/* Guy K Web — portfolio */

/* Type: Apple's system font (SF Pro) throughout - nothing to download. The handwritten note uses Caveat (OFL),
   self-hosted and preloaded so it is set before first paint. */
@font-face {
  font-family: "Dancing Script";   /* "Your website", a flowing pen hand (OFL, self-hosted) */
  src: url("../fonts/dancingscript-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* dark blue page, light text */
  --bg: #06153a;
  --bg-2: #0b2052;
  --line: rgba(220, 230, 255, 0.12);
  --line-strong: rgba(220, 230, 255, 0.24);
  --text: #f2f5fb;
  --silver: #c6d0e3;
  --muted: #93a1bd;
  --blue: #3b7bff;
  --blue-soft: #8db6ff;
  --sans: var(--apple);
  --serif: var(--apple);   /* the italic accents ("Our project.") are SF Pro italic */
  /* Apple's system font (SF Pro) on Apple devices; the closest system font elsewhere */
  --apple: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 88px;   /* a deeper header, for the bigger logo */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;   /* the hero zooms past the edges as you scroll away from it */
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }

.wrap {
  width: 100%;
  max-width: 1280px;   /* the shared container: header, hero and sections line up on its edges */
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 500;
}
/* fully hidden (no peeking when the mobile browser bar moves); shown only to keyboard users who Tab to it */
.skip:not(:focus-visible) { clip-path: inset(50%); opacity: 0; pointer-events: none; }

:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  /* the logo and the menu button sit in the top corners, a little in from them */
  padding-inline: max(30px, env(safe-area-inset-left)) max(30px, env(safe-area-inset-right));
  isolation: isolate;
}
.menu-open .nav { background: transparent; }


/* Menu button: just two plain lines (the lower one shorter) that turn into an X */
.menu-btn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; margin-right: -10px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text);
  cursor: pointer;
}
.menu-btn__icon { position: relative; display: block; width: 36px; height: 18px; }
.menu-btn__icon i {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2.5px; margin-top: -1.25px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.45s var(--ease), background-color 0.3s var(--ease);
}
.menu-btn__icon i:first-child { transform: translateY(-6.5px); }
.menu-btn__icon i:last-child { transform: translateY(6.5px) translateX(-20%) scaleX(0.6); }   /* shorter, left-aligned */
.menu-btn[aria-expanded="true"] { color: #fff; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { transform: rotate(-45deg); }
.menu-btn:focus-visible { outline-offset: 2px; }

/* Menu panel: a blue circle grows out of the Menu button to fill the screen (transform only); the X shrinks it
   back into the button. Links follow in a short stagger. */
.menu {
  position: fixed; inset: 0; z-index: 58;   /* over the page (and the held hero, 56), under the header (60) */
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto;
  visibility: hidden;
  color: #fff;
  transition: visibility 0s linear 0.55s;
}
.menu[hidden] { display: none; }
.menu.is-open { visibility: visible; transition: visibility 0s; }
.menu__blob {
  position: fixed; z-index: 0;
  left: calc(var(--bx, 100vw) - var(--br, 150vmax)); top: calc(var(--by, 0px) - var(--br, 150vmax));
  width: calc(var(--br, 150vmax) * 2); aspect-ratio: 1;
  border-radius: 50%;
  background: #0a1d55;   /* a deep blue, a shade lighter than the page */
  transform: scale(0);
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.84, 0);
}
.menu.is-open .menu__blob { transform: scale(1); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.menu__inner { position: relative; z-index: 1; }
.menu__inner { width: 100%; max-width: 1280px; margin-inline: auto; }
.menu__list a {
  display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 32px);
  min-height: 48px;
  padding: clamp(12px, 1.8vh, 20px) 0;
  font-size: clamp(1.35rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}
.menu__list a:hover { color: rgba(255, 255, 255, 0.72); }
.menu__ext { margin-left: -0.2em; font-size: 0.6em; color: rgba(255, 255, 255, 0.8); align-self: flex-start; padding-top: 0.15em; }
.menu__mail {
  display: inline-flex; align-items: center; min-height: 48px;
  margin-top: clamp(20px, 3.5vh, 36px);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.8);
}
.menu__mail:hover { color: #fff; }
.menu__list li, .menu__mail {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.menu.is-open .menu__list li, .menu.is-open .menu__mail {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease) 0.22s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
}
.menu.is-open .menu__list li:nth-child(2) { transition-delay: 0.28s; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: 0.34s; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: 0.4s; }
.menu.is-open .menu__mail { transition-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open { transform: none; transition: opacity 0.2s linear, visibility 0s linear 0.2s; opacity: 0; }
  .menu.is-open { opacity: 1; transition: opacity 0.2s linear, visibility 0s; }
  .menu__blob, .menu.is-open .menu__blob { transform: none; transition: none; }
  .menu__list li, .menu__mail, .menu.is-open .menu__list li, .menu.is-open .menu__mail { transition: none; transform: none; opacity: 1; }
}
.menu-open { overflow: hidden; }
html:not(.js) .menu-btn { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow-x: clip;   /* the headline sheen travels past the text edge */
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);   /* text and logo close together, balanced */
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  min-height: calc(100svh - var(--nav-h));
  padding-block: clamp(48px, 8vh, 96px);
}

.eyebrow {
  font-size: 15.6px; letter-spacing: 0.14em; text-transform: uppercase;   /* 20% bigger */
  color: var(--muted);
  margin-bottom: clamp(20px, 3vh, 32px);
}

.hero__copy { container-type: inline-size; }   /* the headline is sized to its column */
.hero__title {
  font-weight: 400;
  font-size: clamp(1.9rem, 12.1cqi, 5rem);   /* "OUR PROJECT." (1.16x) just fits one line */
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero__line { display: block; white-space: nowrap; }
/* "Your Website" handwritten (Dancing Script), written out by a pen (js: a mask whose edge follows the writing);
   then "Our project." in the sans */
.hero__title .hero__line {
  font-family: "Dancing Script", "Snell Roundhand", cursive; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  font-size: 1.5em; line-height: 1;
  /* the box covers the swashes, so the writing mask reaches them (the margins cancel it in the layout) */
  padding: 0.12em 0.2em 0.18em 0.04em; margin: -0.12em -0.2em -0.18em -0.04em; width: max-content;
}
.hero__line.is-writing {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--w, 0px) - 0.22em), transparent calc(var(--w, 0px) + 0.04em));
          mask-image: linear-gradient(100deg, #000 calc(var(--w, 0px) - 0.22em), transparent calc(var(--w, 0px) + 0.04em));
}
.hero__title em {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.03em; white-space: nowrap;   /* one line, like the line above */
  /* the box fits the whole slanted line (the gradient only paints inside it, so the T would be cut off) */
  width: max-content; padding-right: 0.14em; margin-right: -0.14em;
  font-size: 1.16em;   /* "Our project." a little bigger than the line above it */
  line-height: 1.02;
  color: var(--silver);
  background: linear-gradient(100deg, #5b8cff 0%, #8db6ff 55%, #c3d8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}

/* Headline sheen (js/site.js): the window (.sheen, 34% of the headline's width) travels left to right while its
   copy of the text travels the opposite way by the same whole number of pixels, so the copy sits exactly on the
   letters (no fractional-pixel resampling at the edges). No will-change: on its own layer the copy snaps to whole
   pixels and leaves a dark fringe beside the real letters. */
.hero__title { position: relative; }
.sheen {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 34%;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  transform: translate3d(-100%, 0, 0);
  opacity: 0;   /* shown only while it sweeps (js), so its copy never waits in view beside the headline (opacity, not
                  visibility: the copy's typed letters set their own visibility) */
}
.sheen__text {
  position: absolute; left: 0; top: 0;
  width: calc(100% / 0.34);
  color: #e3edff;
}
.sheen__text em {
  background: none; -webkit-text-fill-color: #e3edff; color: #e3edff;
}

.hero__lede {
  max-width: 46ch;   /* a comfortable line length for the capitals */
  margin-top: clamp(36px, 5.5vh, 60px);   /* clear space under the headline */
  font-size: clamp(1.08rem, 1.22vw, 1.22rem);   /* 20% bigger */
  color: var(--silver);
}

/* The headline types itself out (js/site.js); the paragraph fades in once it has */
.hero__title .tc { visibility: hidden; }
.hero__title .tc.on { visibility: visible; }
/* "Your website." turns into a rainbow, letter by letter (js sets --rc and --ri, then .is-rainbow), no glow (the
   colours and the shine stay exactly on the letters); the
   sheen's copy stays white, so it shines across the colours */
.hero__line .tc { transition: color 1.4s var(--ease), text-shadow 1.4s var(--ease); transition-delay: calc(var(--ri, 0) * 70ms); }
.hero__title.is-rainbow .hero__line .tc { color: var(--rc); }
.hero__title.is-rainbow .sheen__text .hero__line .tc { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hero__line .tc { transition: none; } }
.js .hero__lede { opacity: 0; transition: opacity 2.6s cubic-bezier(0.33, 0, 0.2, 1); }   /* a slow fade */
.js .hero__lede.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .hero__lede { opacity: 1; transition: none; } }
.caret { position: relative; }          /* an empty inline box: no width, no effect on line height */
.caret::after {
  content: ""; position: absolute; left: 0.06em; bottom: 0.19em;    /* from the baseline (the box bottom is the font descent) */
  width: 0.09em; height: 0.72em;    /* baseline to cap height, like the capitals beside it (SF Pro) */
  background: var(--blue);
  animation: caret-blink 1.05s steps(1, end) infinite;
}
.is-typing .caret::after { animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret::after { animation: none; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 5vh, 48px); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 62px; padding: 0 31px;   /* 20% bigger */
  border-radius: 999px;
  font-size: 18.6px; font-weight: 500;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn--primary { background: var(--text); color: var(--bg); }
.btn--primary:hover { background: #dbe5f7; }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--silver); }
.btn__arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.btn--primary:hover .btn__arrow { transform: translateY(3px); }

/* Symbol on hairline orbits */
.hero__mark {
  position: relative;
  justify-self: center; align-self: center;
  width: min(100%, 460px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.orbit {
  position: absolute; inset: -6%;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.orbit--inner { inset: 14%; border-color: rgba(12, 22, 40, 0.06); }
.orbit::after {
  /* a single blue node on the outer orbit */
  content: ""; position: absolute; top: 50%; right: -4px; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px rgba(31, 99, 232, 0.12), 0 0 14px 3px rgba(31, 99, 232, 0.45);
}
.orbit--inner::after { display: none; }
.mark__glow {
  position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 99, 232, 0.12), rgba(31, 99, 232, 0.03) 60%, transparent);
  opacity: 0.7;
  will-change: transform, opacity;
}
.orbit:not(.orbit--inner) { will-change: transform; }
.mark__spin { position: relative; width: 84%; will-change: transform; cursor: pointer; }   /* (pressed, it spins: js) */
.mark__spin img { display: block; width: 100%; filter: drop-shadow(0 6px 14px rgba(20, 60, 160, 0.2)); }
/* the live star logo (js/intro3d.js): a see-through canvas 1.44x the image, centred on it, its edge softly masked
   off. The image stays for layout (and without WebGL). */
.mark__intro { position: relative; }
.mark__live {
  position: absolute; left: -22%; top: -22%; width: 144%; height: 144%;
  pointer-events: none; opacity: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.mark__live.is-on { opacity: 1; }
.mark__spin img.is-hidden { opacity: 0; }

/* The hero symbol settles from big on load (js adds .is-in), then js/site.js spins it with the scroll. */
@media (prefers-reduced-motion: no-preference) {
  .js .mark__intro {
    opacity: 0; transform: scale(1.9);
    transition: opacity 0.9s var(--ease), transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .mark__intro.is-in { opacity: 1; transform: none; }
}

/* ---------- Work ---------- */
.work { padding-block: clamp(72px, 12vh, 140px); overflow-x: clip; overflow-clip-margin: 0; }


.project {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;      /* the title lines up with the top of the MacBook */
}
.pin + .pin { margin-top: clamp(96px, 16vh, 180px); }
.project--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.project--flip .project__stage { order: 2; }
.project__stage { min-width: 0; }

/* Visit button (replaces the status pill / text link) */
.project__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.project__actions .status { margin-top: 0; }
.visit-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
  transition: background-color 0.3s var(--ease);
}
.visit-btn__arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.visit-btn:hover { background: var(--blue); }
.visit-btn:hover .visit-btn__arrow { transform: translate(2px, -2px); }

.project__media {
  position: relative;
  display: block;
  padding-bottom: 6%;
  padding-right: 7%;
}
.project--flip .project__media { padding-right: 0; padding-left: 7%; }

/* MacBook Pro 14" (M4, Space Black), seen from slightly above as in product photos: a 3D scene with the lid
   (screen face + aluminium back) hinged onto the base drawing below (keyboard, speaker grilles, trackpad, front edge
   with the thumb notch). js/site.js sets --persp from the laptop's width and swings the lid open on scroll. */
.project__media { perspective: var(--persp, 3000px); perspective-origin: 50% 12%; }
.laptop { position: relative; transform-style: preserve-3d; margin-bottom: 14%; }
.laptop__lid { position: relative; transform-style: preserve-3d; transform-origin: 50% 100%; }
/* Lid geometry, measured in display points (pt). On the 14" MacBook Pro (M4) the 3024 x 1964 panel is 1512 x 982 pt
   and 302.5 x 196.5 mm, so 1 pt = 0.2 mm. The 312.6 mm lid is 1563 pt wide:
     aluminium rim 8 pt (1.6 mm) + black glass bezel 17.5 pt (3.5 mm) at the sides and top, 47 pt of glass chin,
     so the lid is 1563 x 1062.5 pt and the display sits 25.5 pt in from the sides and top.
   Padding and widths in % are fractions of the lid width; vertical radii/insets are converted with the fixed
   1563 : 1062.5 lid ratio, so the shape is exact at every size (no magic offsets). */
.laptop__face, .laptop__back { border-radius: 2.415% 2.415% 0.384% 0.384% / 3.553% 3.553% 0.565% 0.565%; }   /* 37.75 pt top, 6 pt hinge end */
.laptop__face {
  position: relative;
  padding: 1.6315% 1.6315% 3.5189%;          /* 25.5 pt sides/top, 55 pt bottom */
  background: linear-gradient(180deg, #3b3c41, #2c2d31 40%, #252629);   /* Space Black anodised rim */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 0.5px rgba(0, 0, 0, 0.5),
    0 40px 80px -40px rgba(15, 30, 60, 0.45);
  backface-visibility: hidden;
}
.laptop__face::before {
  /* the glass: one black pane inside the 8 pt rim, 30 pt top corners */
  content: ""; position: absolute;
  inset: 0.7529% 0.5118%;
  border-radius: 1.939% 1.939% 0.26% 0.26% / 2.867% 2.867% 0.38% 0.38%;
  background: #060607;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.laptop__back {
  /* outside of the lid, seen while it is still closing over the keyboard */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #45474c, #2c2d31 55%, #222326);
  box-shadow: 0 0 0 1px #55575d;
  transform: rotateX(180deg);
  backface-visibility: hidden;
}
.laptop__notch {
  /* hardware, part of the glass: hangs from the bezel over the centre of the 37 pt menu bar.
     204 x 37 pt below the top of the display, 14 pt lower corners, 6 pt concave shoulders where the display's
     top edge meets it, FaceTime camera in the middle. Drawn as one SVG (216 x 54.5 pt incl. shoulders + bezel). */
  position: absolute; z-index: 2;
  top: 0.7529%; left: 43.0902%;              /* (1563 - 216) / 2 pt */
  width: 13.8196%; aspect-ratio: 216 / 54.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 54.5'%3E%3Cpath fill='%23060607' d='M0 0H216V17.5A6 6 0 0 0 210 23.5V40.5A14 14 0 0 1 196 54.5H20A14 14 0 0 1 6 40.5V23.5A6 6 0 0 0 0 17.5Z'/%3E%3Ccircle cx='108' cy='29' r='3.6' fill='%23111622'/%3E%3Ccircle cx='108' cy='29' r='3.6' fill='none' stroke='%23232a3a' stroke-width='.8'/%3E%3Ccircle cx='107' cy='28' r='1' fill='%232b3550'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
/* Base (keyboard deck, hinge, front edge with the thumb notch): a vector drawing in the same straight-on view
   (tools/macbook_base.py), 4% wider than the lid at the front. Flat, so it stays razor sharp; the lid swings
   open over it in 3D, pivoting on the hinge line. */
.laptop__base { position: absolute; left: -2%; top: 100%; width: 104%; height: auto; display: block; overflow: visible; }
.browser {
  /* the display: exactly 1512:982 pt, content clipped to its rounded top corners (12.5 pt; the bottom ones are square) */
  display: block;
  position: relative; z-index: 1;
  border-radius: 0.8267% 0.8267% 0 0 / 1.2729% 1.2729% 0 0;
  overflow: hidden;
  background: #eff1ee;   /* the sites' own light page colour, never a black screen */
  isolation: isolate;
}
/* macOS menu bar + a Safari window filling the MacBook screen, laid out in screen points via --pt so it scales
   exactly with the laptop: 37 pt menu bar (the notch's height), 52 pt Safari toolbar, 893 pt of page at 1512 pt wide. */
.browser { container-type: inline-size; aspect-ratio: 1512 / 982; }
.safari { --pt: calc(100cqw / 1512); display: flex; flex-direction: column; height: 100%; background: #fff;
  font-family: var(--apple); text-transform: none; letter-spacing: 0; color: #1d1d1f;
  -webkit-font-smoothing: antialiased; }
.safari svg { display: block; flex: none; fill: currentColor; overflow: visible; }
.mb {
  flex: none; height: calc(37 * var(--pt));
  display: flex; align-items: center; gap: calc(21 * var(--pt));
  padding: 0 calc(22 * var(--pt)) 0 calc(21 * var(--pt));
  background: linear-gradient(90deg, #d9e2f2, #e6dff0);
  font-size: calc(13.5 * var(--pt)); line-height: 1; white-space: nowrap; overflow: hidden;
}
.mb b { font-weight: 700; }
.mb__apple { height: calc(16 * var(--pt)); width: auto; margin-top: calc(-2 * var(--pt)); }
.mb__right { margin-left: auto; display: flex; align-items: center; gap: calc(17 * var(--pt)); }
.mb__batt { height: calc(12 * var(--pt)); width: auto; aspect-ratio: 27 / 12; }
.mb__wifi { height: calc(12.5 * var(--pt)); width: auto; aspect-ratio: 18 / 13; }
.mb__ico { height: calc(14 * var(--pt)); width: auto; aspect-ratio: 1; }
.sf {
  flex: none; height: calc(52 * var(--pt));
  display: flex; align-items: center; gap: calc(14 * var(--pt));
  padding: 0 calc(16 * var(--pt)) 0 calc(20 * var(--pt));
  background: #f6f6f6; border-bottom: calc(1 * var(--pt)) solid #d9d9d9;
  font-size: calc(13 * var(--pt)); color: #737378;
}
.sf__lights { display: flex; gap: calc(8 * var(--pt)); margin-right: calc(10 * var(--pt)); }
.sf__lights i { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgba(0, 0, 0, 0.12); }
.sf__lights i:nth-child(2) { background: #febc2e; }
.sf__lights i:nth-child(3) { background: #28c840; }
.sf__ico { height: calc(16 * var(--pt)); width: auto; }
.sf__ico--side { aspect-ratio: 20 / 16; }
.sf__ico--nav { aspect-ratio: 40 / 16; height: calc(15 * var(--pt)); margin-left: calc(6 * var(--pt)); }
.sf__tab {
  flex: 0 1 calc(620 * var(--pt)); margin: 0 auto;
  height: calc(34 * var(--pt));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border-radius: calc(9 * var(--pt)); background: #e7e7e9; color: #1d1d1f;
}
.sf__page { position: absolute; left: calc(11 * var(--pt)); height: calc(14 * var(--pt)); width: auto; aspect-ratio: 16 / 14; color: #737378; }
.sf__url { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.sf__lock { height: calc(12 * var(--pt)); width: auto; aspect-ratio: 10 / 13; color: #737378; }
.sf__reload { position: absolute; right: calc(11 * var(--pt)); height: calc(13 * var(--pt)); width: auto; aspect-ratio: 1; color: #737378; }
.sf__tools { display: flex; align-items: center; gap: calc(22 * var(--pt)); }
.sf__tools .sf__ico { height: calc(17 * var(--pt)); }
.sf__tools .sf__ico:first-child { aspect-ratio: 16 / 20; height: calc(19 * var(--pt)); }
.sf__tools .sf__ico:nth-child(2) { aspect-ratio: 1; height: calc(15 * var(--pt)); }
.sf__tools .sf__ico:last-child { aspect-ratio: 1; }
.sf__tabs {
  flex: none; height: calc(36 * var(--pt));
  display: flex; align-items: stretch; gap: calc(2 * var(--pt));
  padding: calc(4 * var(--pt)) calc(10 * var(--pt)) 0;
  background: #e9e9eb;   /* no line under the tabs: the website starts right below them */
  font-size: calc(12.5 * var(--pt)); color: #59595e;
}
.sf__tabx {
  position: relative; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--pt));
  width: calc(300 * var(--pt)); padding: 0 calc(26 * var(--pt));
  border-radius: calc(7 * var(--pt)) calc(7 * var(--pt)) 0 0;
  white-space: nowrap; overflow: hidden;
}
.sf__tabx.is-active { background: #f6f6f6; color: #1d1d1f; box-shadow: 0 calc(-0.5 * var(--pt)) 0 #d4d4d6; }
.sf__tabx i { flex: none; width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); border-radius: calc(3.5 * var(--pt)); background: var(--fav); }
.sf__tabx b { position: absolute; left: calc(9 * var(--pt)); font-weight: 400; color: #8e8e93; opacity: 0.8; }
.sf__newtab { margin-left: auto; align-self: center; font-size: calc(18 * var(--pt)); color: #8e8e93; padding-right: calc(4 * var(--pt)); }
.sf__view { flex: 1; position: relative; overflow: hidden; background: #fff; }
/* Kalifa Architecture: just the website, at the window's size (no Safari bar or tabs), square-cornered */
.browser--bare { border-radius: 4px; }
.browser--bare .safari > :not(.sf__view) { display: none; }
.browser--bare .sf__view { background: #eff1ee; }
.sf__view video { display: block; width: 100%; height: calc(100% + 1px); margin-top: -1px; object-fit: cover; object-position: 50% 0; }   /* top of the page, never squeezed; tucked 1px under the tabs, so no hairline shows */

.browser picture, .phone picture { display: block; overflow: hidden; }
.browser picture { aspect-ratio: 1512 / 982; }
/* Tall captures: scrolled through the site's intro by js/site.js (transform only). */
.browser img, .phone img { width: 100%; will-change: transform; }

/* iPhone 17 Pro: 402 x 874pt screen, Dynamic Island, slim black bezel in a silver aluminium frame. */
.phone {
  position: absolute; right: 0; bottom: -2%;
  width: 23%;
  container-type: inline-size;
  transition: translate 0.9s var(--ease);
  will-change: transform;
}
.project--flip .phone { right: auto; left: 0; }
.phone__screen {
  position: relative;
  overflow: hidden;
  border: 3.6cqw solid #050506;
  border-radius: 16.5cqw;
  background: #000;
  box-shadow:
    0 0 0 1.5cqw #2a2b2e,
    0 0 0 calc(1.5cqw + 1px) #0d0d0f,
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -18px rgba(15, 30, 60, 0.5);
  isolation: isolate;
}
.phone::before, .phone::after {
  /* side buttons: volume up/down (left), side button (right) */
  content: ""; position: absolute; width: 1.4cqw; border-radius: 1cqw;
  background: #2a2b2e;
}
.phone::before { left: -2.7cqw; top: 24%; height: 24%; background: linear-gradient(#2a2b2e 0 45%, transparent 45% 55%, #2a2b2e 55%); }
.phone::after { right: -2.7cqw; top: 30%; height: 14%; }
.phone__status {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  height: 12.6cqw; padding: 0 6.4cqw 0 8.6cqw;
  background: var(--sb); color: var(--sb-ink);
  font: 600 4cqw/1 -apple-system, "SF Pro Text", "Helvetica Neue", var(--sans);
  letter-spacing: 0; text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.phone__time { min-width: 12cqw; text-align: center; }
.phone__island {
  position: absolute; left: 50%; top: 2.3cqw;
  width: 28cqw; height: 8.2cqw; margin-left: -14cqw;
  border-radius: 5cqw; background: #000;
}
.phone__icons { display: flex; align-items: center; gap: 1.3cqw; }
.phone__icons svg { display: block; height: 3cqw; width: auto; fill: currentColor; overflow: visible; }
.phone__icons svg:nth-child(1) { aspect-ratio: 18 / 12; }
.phone__icons svg:nth-child(2) { aspect-ratio: 18 / 13; height: 3.2cqw; }
.phone__icons svg:nth-child(3) { aspect-ratio: 27 / 12; height: 3.1cqw; }
.phone__view {
  position: relative; display: block;
  aspect-ratio: 402 / 820;
  overflow: hidden;
  background: #050506;  /* never white: no light fringe at the rounded screen edges */
}
.phone__view picture, .phone__view video { margin: -1px; width: calc(100% + 2px); max-width: none; }
.phone__view picture { display: block; }
/* MilkPod: a recording of the real home page scrolling; swapped for the live site on the first scroll attempt. */
.phone__view--live video { display: block; height: calc(100% + 2px); object-fit: cover; }

/* The phones' screens are view-only recordings: scrolling over them scrolls the page (js/site.js). */

/* Handwritten note with crayon arrows to the laptop and the phone (arrows drawn in pixels by js/site.js) */
.project__stage { position: relative; }
.scribble { height: clamp(64px, 7vw, 92px); margin-top: -2%; pointer-events: none; }
.scribble__svg {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 100%; height: 100%;          /* sized by CSS, never by script: no layout shift */
  overflow: visible; pointer-events: none;
  fill: none; stroke: var(--blue); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round;
}
.scribble__svg path { filter: url(#crayon); }
.scribble__text {
  position: absolute; right: 0; bottom: 0;
  font: 600 clamp(1.35rem, 2.1vw, 1.9rem)/1 var(--hand);
  color: var(--silver);
  text-transform: none; letter-spacing: 0;
  rotate: -4deg;   /* separate from transform, which the fade-in uses */
  white-space: nowrap;
}


.project__name {
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 450; letter-spacing: 0.02em;
  color: var(--silver);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.status--soon .status__dot { background: transparent; border: 1.5px solid var(--blue-soft); }

.project__desc { margin-top: 22px; color: var(--silver); max-width: 40ch; }
.project__note {
  margin-top: 14px; max-width: 40ch;
  padding-left: 14px; border-left: 2px solid var(--blue);
  font-size: 15px; color: var(--muted);
}

.project__meta {
  display: flex; gap: 32px;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.project__meta dt { color: var(--muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.project__meta dd { margin-top: 2px; color: var(--text); }


/* ---------- Contact ---------- */
.contact {
  background: radial-gradient(55% 45% at 85% 55%, rgba(59, 123, 255, 0.12), transparent 100%);   /* (on the page's own blue: no edge) */
}
.contact__inner { padding-block: clamp(96px, 16vh, 180px); }
.contact__title {
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.contact__title em { font-family: var(--serif); color: var(--silver); letter-spacing: -0.01em; }
.contact__start { margin-top: clamp(24px, 4vh, 36px); }
.contact__lede { margin-top: 24px; max-width: 42ch; color: var(--silver); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }

.contact__mail {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 24px;
  margin-top: clamp(40px, 7vh, 72px);
  padding: 22px 0;
}
.contact__label { grid-column: 1; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.contact__addr {
  grid-column: 1;
  font-size: clamp(1.4rem, 4.2vw, 3rem);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.contact__arrow {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: clamp(52px, 6vw, 72px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--text); color: var(--bg);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  transition: transform 0.4s var(--ease);
}
.contact__mail:hover .contact__arrow { transform: translateX(6px); }

/* ---------- Footer ---------- */
/* Site footer (home page): dark closing section */
.site-footer {
  position: relative; z-index: 1;
  background: linear-gradient(to bottom, rgba(3, 11, 34, 0) 0, #030b22 clamp(120px, 18vh, 200px));   /* fading into a shade deeper than the page */
  color: #e8ecf3;
  padding: clamp(64px, 10vh, 112px) 0 calc(28px + env(safe-area-inset-bottom));
}
.site-footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));   /* brand, work, contact, legal */
  gap: clamp(32px, 4vw, 72px);
  padding-bottom: clamp(48px, 7vh, 80px);
  border-bottom: 1px solid rgba(232, 236, 243, 0.14);
}
.site-footer__brand p { margin-top: 0; max-width: 34ch; color: rgba(232, 236, 243, 0.72); }
.site-footer__brand .btn { margin-top: 28px; }
.btn--light { background: #fff; color: var(--bg); }
.btn--light:hover { background: #dfe6f3; }
.site-footer__col h2 { font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; color: rgba(232, 236, 243, 0.55); margin-bottom: 14px; }
.site-footer__col a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; letter-spacing: 0.04em;
  transition: color 0.25s var(--ease);
}
.site-footer__col a:hover { color: #8db6ff; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 22px;
  font-size: 13px; letter-spacing: 0.08em; color: rgba(232, 236, 243, 0.6);
}
.site-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }
.site-footer__bottom a:hover { color: #8db6ff; }
@media (max-width: 799px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .site-footer__top { grid-template-columns: 1fr; }
}

.footer { border-top: 1px solid var(--line); }
.footer__inner {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 28px calc(28px + env(safe-area-inset-bottom));
  font-size: 14px; color: var(--muted);
}

/* ---------- Entrance motion (only when JS is running and motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .hero__mark { opacity: 0; transition: opacity 1.4s var(--ease) 0.15s; }
  .js .hero__mark.is-in { opacity: 1; }
}

/* No circle round the logo: the orbit box stays (invisible) only to place the scroll star, just right of the logo */
.orbit { border-color: transparent !important; }
.orbit::after, .mark__glow { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 56px;
  }
  .hero__lede { max-width: 40ch; }
  .hero__mark { grid-row: 1; justify-self: start; width: min(40vw, 300px); margin: 0 0 12px 6%; }
  .project, .project--flip { grid-template-columns: 1fr; }
  .project--flip .project__stage { order: 0; }
  .laptop { margin-inline: 4%; }
  .project__desc, .project__note { max-width: 56ch; }
}

@media (max-width: 599px) {
  body { font-size: 16px; }
  .hero { padding-top: 32px; }
  .hero__mark { width: min(44vw, 172px); margin: 0 0 4px 4%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .phone { width: 28%; }
  .laptop { margin-inline: 5%; }
}

/* ---------- The hero logo's stars streaming down to the first website (js/site.js) ---------- */
.stream { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 55; pointer-events: none; display: none; }
.has-rail .stream { display: block; }
/* room below the hero for the stars to curve to the left on their way to the first website */
/* Desktop: the first scroll plays the opening by itself (the hero held still for it) - the logo zooms into stars, its
   text fades, a website zooms in big over them (js/site.js) - and then the page scrolls on as normal, the website
   going up with it */
.bigsite { display: none; }
@media (min-width: 1000px) {
  .has-rail .hero { position: sticky; top: var(--nav-h); z-index: 56; }   /* (over the stars) */
  .has-rail .hero__copy { will-change: opacity; }   /* (its own layer, ready before it starts to fade: no first-frame stall) */
  .has-rail .hero-pin::after { content: ""; display: block; height: 16vh; }   /* (just the first scroll, which starts the opening: then the page scrolls on as normal) */
  .has-rail .work { padding-top: 0; }   /* (the MacBooks come up straight after) */
  .has-rail .bigsite {
    display: block; position: absolute; left: 50%; top: 50%; z-index: 2;
    width: min(1160px, 84vw, calc((100vh - var(--nav-h) - 96px) * 1512 / 906));
    border-radius: 14px; overflow: hidden; background: #0b1636;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 90px rgba(0, 0, 0, 0.55);
    opacity: 0; transform: translate(-50%, -50%) scale(0.94); pointer-events: none;
  }
  .has-rail .bigsite.is-on { pointer-events: auto; }
  /* a macOS Safari toolbar (light): the red, yellow and green window buttons, sidebar, back/forward, the address
     field with its padlock and reload, share and new tab */
  .bigsite__bar {
    display: flex; align-items: center; gap: 18px; height: 46px; padding: 0 16px;
    background: linear-gradient(#f5f5f7, #ececee); border-bottom: 1px solid #d4d4d8; color: #6e6e73;
  }
  .bigsite__lights { display: flex; gap: 8px; margin-right: 6px; }
  .bigsite__lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); }
  .bigsite__lights i:nth-child(2) { background: #febc2e; }
  .bigsite__lights i:nth-child(3) { background: #28c840; }
  .bigsite__icon { flex: none; width: 18px; height: 16px; }
  .bigsite__addr {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; position: relative;
    max-width: 520px; height: 30px; margin: 0 auto; border-radius: 8px; background: #e3e3e8;
    font: 400 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: #1d1d1f;
  }
  .bigsite__addr a { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 34px; color: inherit; }
  .bigsite__addr a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .bigsite__addr svg { width: 10px; height: 13px; color: #6e6e73; }
  .bigsite__view { position: relative; display: block; aspect-ratio: 1512 / 906; background: #fff; }
  .bigsite__view video { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* a round blue button over the site, at the bottom in the middle */
  .bigsite__visit {
    position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%);
    display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 999px;
    background: var(--bg); color: #fff; font: 500 14px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.3);   /* the page's own colour */
    transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .bigsite__visit:hover { background: #0e2463; transform: translateX(-50%) translateY(-2px); }
}
.pin, .contact, .site-footer { position: relative; z-index: 1; }

/* Desktop: the hero's text sits further left (a wider container than the sections') and higher (from the top,
   not centred in the screen); the logo stays centred on the text beside it */
@media (min-width: 1000px) {
  .hero.wrap { max-width: none; padding-left: max(46px, env(safe-area-inset-left)); }   /* (the text just in from the header logo) */
  .hero { align-items: start; align-content: start; padding-top: clamp(4px, 1.5vh, 20px); }   /* close under the header */
  .hero__mark { align-self: center; }
}


/* Desktop and tablet: the MacBook (its lid opens on scroll, js) with the iPhone beside it; the handwritten notes
   are for phones only */
@media (min-width: 600px) {
  .project__stage .scribble { display: none; }
}

/* Desktop: the hero text is 20% bigger, so its column is wider (the logo fills the space left beside it) */
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .hero__title { font-size: clamp(2.2rem, 12.4cqi, 6.4rem); }
}

/* Desktop: the three websites side by side, each an open MacBook with its details under it; the logo's stars
   divide into three and land on all three at once (js), and each screen then fades in from black to its site */
@media (min-width: 1000px) {
  .work__deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 56px); align-items: start; }
  .pin + .pin { margin-top: 0; }
  .work .project, .work .project--flip { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .work .project--flip .project__stage { order: 0; }
  .work .project__media, .work .project--flip .project__media { padding: 0; }
  .work .project__media .phone { display: none; }
  .has-rail .laptop .safari { transition: opacity 0.9s var(--ease); }
}

/* Desktop with the stars (js): the three MacBooks alone, held on screen while the scroll goes on. Once the stars
   have landed the scroll zooms into the first, its details appearing beside it, then moves across to the second
   and the third (js moves the MacBooks, transform and opacity only; this is the room that scroll takes) */
@media (min-width: 1000px) {
  .has-rail .work::after { content: ""; display: block; height: 420vh; }
  .has-rail .work__deck {
    position: sticky; top: 0; height: 100vh; padding-top: var(--nav-h);
    align-items: center; align-content: center;
  }
  .has-rail .work__deck .pin, .has-rail .work__deck .project { position: static; }
  .has-rail .work__deck .project__stage { transform-origin: 0 0; }
  .js.has-rail .work__deck .project__info {
    position: absolute; left: 58%; width: 38%; top: calc(var(--nav-h) + (100vh - var(--nav-h)) / 2);
    transform: translateY(-50%); transition: none;
    opacity: var(--info, 0); visibility: hidden;
  }
  .js.has-rail .work__deck .project__info.is-shown { visibility: visible; }
}

/* ---------- Phones: the MacBook (open) showing the website as on a desktop - no iPhone, no note ----------
   Its screen fades in from black when it comes into view, and the website plays from its intro (js). */
@media (max-width: 599px) {
  .project__media, .project--flip .project__media { padding: 0; }
  .phone, .project__stage .scribble { display: none !important; }
  .laptop { margin: 0; }
  .laptop .safari { transition: opacity 0.9s var(--ease); }
}

/* Phones: a slimmer header - bar, logo and menu all a size down - and the home page text close under the logo, with
   "Our project." a little smaller */
@media (max-width: 599px) {
  :root { --nav-h: 66px; }
  .nav { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .nav .wordmark__logo { width: 36px; }
  .menu-btn { width: 44px; height: 44px; margin-right: -8px; }
  .menu-btn__icon { width: 26px; height: 14px; }
  .menu-btn__icon i { height: 2px; margin-top: -1px; }
  .menu-btn__icon i:first-child { transform: translateY(-4.5px); }
  .menu-btn__icon i:last-child { transform: translateY(4.5px) translateX(-20%) scaleX(0.6); }
  .hero { padding-top: 6px; row-gap: 14px; }
  .hero__mark { width: min(40vw, 156px); margin: 0 0 0 4%; }
  .hero__title em { font-size: 0.9em; }
}

/* Phones: one logo only - the intro's star logo lands in the header's top-left corner and stays there as stars (the
   live star logo, fixed where the header logo would be; the header's picture logo is not shown), and the home page
   text starts right under the header */
@media (max-width: 599px) {
  .hero__mark {
    position: fixed; z-index: 61; margin: 0; pointer-events: none;
    width: 43px;   /* its stars (84% of it) the size of the header logo, centred on it */
    left: calc(max(20px, env(safe-area-inset-left)) - 3.5px); top: calc(var(--nav-h) / 2 - 21.5px);
  }
  .hero__mark .orbit { display: none; }
  .js .hero__mark { transition: opacity 0.4s var(--ease); }   /* (under the intro's logo as it lands; fades with the menu) */
  .nav .wordmark__logo { visibility: hidden; }
}

/* Phones: the sections sit closer together */
@media (max-width: 599px) {
  .hero { padding-bottom: 40px; }
  .work { padding-block: 40px 64px; }
  .pin + .pin { margin-top: 76px; }
  .hero__actions .btn { white-space: nowrap; padding-inline: 18px; font-size: clamp(14px, 4.3vw, 17px); }   /* (one line, even at 320 px) */
}

/* The three websites (desktop and iPad; phones have the slideshow): each a browser window playing a recording of the
   site, its name and a few words, and a button to the real site in a new tab */
.sites { padding-block: clamp(80px, 12vh, 150px) 0; }
.sites__title { margin-top: 18px; font-size: clamp(2.2rem, 4.4vw, 4.2rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; text-transform: uppercase; }
.sites__title em { color: var(--silver); }
.sites__grid { display: grid; gap: clamp(48px, 5vw, 72px) clamp(24px, 3vw, 44px); margin-top: clamp(36px, 5vh, 60px); }
@media (min-width: 1000px) {
  .sites__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* desktop: the full width of the screen, the title starting where the home page's does */
  .sites.wrap { max-width: none; padding-inline: max(46px, env(safe-area-inset-left)); }
  .sites__grid { gap: clamp(28px, 2.6vw, 48px); }
}
.site-card { display: flex; flex-direction: column; align-items: flex-start; }
.site-card__window {
  width: 100%; border-radius: 12px; overflow: hidden; background: #050b1e;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.site-card__bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: linear-gradient(#f5f5f7, #ececee); border-bottom: 1px solid #d4d4d8; }
.site-card__lights { display: flex; gap: 6px; }
.site-card__lights i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.site-card__lights i:nth-child(2) { background: #febc2e; }
.site-card__lights i:nth-child(3) { background: #28c840; }
.site-card__url { flex: 1; margin-right: 42px; text-align: center; font-size: 11px; text-transform: none; letter-spacing: 0; color: #3a3a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-card__view { display: block; aspect-ratio: 1512 / 906; }
.site-card__view video { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-card__name { margin-top: 24px; font-size: clamp(1.3rem, 1.7vw, 1.7rem); font-weight: 400; line-height: 1.15; text-transform: uppercase; }
.site-card__desc { margin-top: 12px; color: var(--silver); font-size: 15px; }
.site-card__note { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--blue); color: var(--muted); font-size: 14px; }
.site-card__visit { margin-top: 22px; min-height: 52px; padding: 0 22px; font-size: 15px; background: var(--bg); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }   /* the page's own colour */
.site-card__visit:hover { background: #0e2463; }
@media (max-width: 599px) { .sites { display: none; } }

/* What Guy K Web is and does (after the work, on every screen): the introduction, then its sections, what matters to
   us and the invitation. On wide screens the introduction stays in view on the left while the sections go by on the
   right */
.about { padding-block: clamp(72px, 12vh, 150px); }
/* the title in the headline's two hands: "About" written as "Your Website" is, "Guy K Web" as "Our project." */
.about__title { font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.about__script {
  display: block; font-family: "Dancing Script", "Snell Roundhand", cursive; font-weight: 600; font-size: 1.3em;
  text-transform: none; letter-spacing: 0; line-height: 1.05; color: var(--text);
}
.about__title em {
  display: block; width: max-content; max-width: 100%; padding-right: 0.14em; margin-top: 0.02em;
  font-family: var(--serif); letter-spacing: -0.03em; line-height: 1.04;
  background: linear-gradient(100deg, #5b8cff 0%, #8db6ff 55%, #c3d8ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.about__intro p, .about__part p, .about__end p { margin-top: 16px; color: var(--silver); max-width: 60ch; }
.about__intro .about__lede { margin-top: 26px; color: var(--text); font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; }
.about__more { margin-top: 56px; }
.about__part + .about__part { margin-top: 52px; }
.about__part h3, .about__values h3, .about__end h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: uppercase;
}
.about__part h3 { padding-top: 22px; border-top: 1px solid var(--line); }
.about__values { margin-top: clamp(64px, 10vh, 110px); }
.about__values ul { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.about__values li { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); color: var(--silver); }
.about__values strong { display: block; margin-bottom: 10px; color: var(--text); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.about__end { margin-top: clamp(64px, 10vh, 110px); padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line); }
.about__end .about__last { color: var(--text); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.about__cta { margin-top: 30px; }
@media (min-width: 700px) { .about__values ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  /* (the introduction stays in view only while its own sections go by) */
  .about__main { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(56px, 7vw, 130px); align-items: start; }
  .about__intro { position: sticky; top: calc(var(--nav-h) + 32px); }
  .about__more { margin-top: 0; }
  .about__values ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about__end { text-align: center; }
  .about__end p { margin-inline: auto; }
}

/* Phones: the headline stays where it was, "Guy K Web · Web design" and the paragraph under it, the buttons, and
   under them the websites, there as you scroll down to them: one at a time, each its own screen (a little narrower
   than the buttons) with its link under it, the whole slide moving off to the left as the next comes in by itself
   (js/site.js). "Get in touch" glows through blue, light blue and white (transform only: a wide band of colour
   slides along behind it). */
.show { display: none; }
@media (max-width: 599px) {
  .hero__copy {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
    grid-template-areas: "title" "under" "lede" "actions" "sites";
    padding-top: calc(25px + clamp(20px, 3vh, 32px));
  }
  .hero__title { grid-area: title; }
  .hero__copy .eyebrow { grid-area: under; margin: 14px 0 0; }
  .eyebrow__more { display: none; }
  .hero__copy .hero__lede { grid-area: lede; margin-top: 26px; }
  .hero__copy .hero__actions { grid-area: actions; margin-top: 22px; gap: 14px; }
  .js .hero__copy .hero__actions.reveal, .js .hero__copy .eyebrow.reveal { transform: none; transition: opacity 0.67s var(--ease); }
  /* (every text animation a third quicker on phones) */
  .js .hero__copy .hero__lede { transition-duration: 1.73s; }
  .hero__line .tc { transition-duration: 0.93s; transition-delay: calc(var(--ri, 0) * 47ms); }
  .js .hero__copy .hero__actions.reveal:not(.is-shown), .js .hero__copy .eyebrow.reveal:not(.is-shown) { opacity: 0; }
  .hero__actions .btn { min-height: 54px; font-weight: 600; }
  .show { grid-area: sites; display: grid; margin-top: 40px; }
  .js .show { opacity: 0; transition: opacity 0.67s var(--ease); }   /* (in after the buttons) */
  .js .show.is-shown { opacity: 1; }
  /* (side by side: the one showing in the middle, the last and the next peeking in at either side; a swipe moves them
     with the finger, and left or right goes on or back) */
  .show { touch-action: pan-y; }
  .show__slide { grid-area: 1 / 1; transform: translate3d(calc(var(--off, 0) * (88% + 2px) + var(--drag, 0px)), 0, 0) scale(0.86); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }   /* (gliding on from the finger, easing to a stop) */
  .show__slide.is-on { z-index: 1; transform: translate3d(calc(var(--drag, 0px)), 0, 0) scale(1); }   /* (the one showing a size bigger than the two at the sides, never under them) */
  .show__slide.is-jumping { visibility: hidden; }
  .show.is-dragging .show__slide { transition: none; }
  .show__view video { pointer-events: none; }   /* (a recording to watch, nothing to click or scroll) */
  .show__slide:not(.is-on) .show__visit { opacity: 0; pointer-events: none; }
  .show__visit { transition: opacity 0.4s var(--ease); }
  .show__screen {
    width: 88%; margin-inline: auto; border-radius: 12px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 44px rgba(0, 0, 0, 0.42);
  }
  .show__view { position: relative; aspect-ratio: 1512 / 906; overflow: hidden; background: #050b1e; }
  .show__view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* (the whole page) */
  .show__visit {
    display: flex; width: fit-content; min-height: 46px; margin: 14px auto 0; padding: 0 22px; font-size: 14px; font-weight: 600;
    background: var(--bg); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);   /* the page's own colour, outlined */
  }
  .hero .btn--ghost { position: relative; overflow: hidden; isolation: isolate; border-color: transparent; color: #06153a; }
  .hero .btn--ghost::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 500%; z-index: -1;
    background: linear-gradient(90deg, #4f86ff 0%, #9cc8ff 20%, #ffffff 40%, #7fb3ff 60%, #4f86ff 80%, #9cc8ff 100%);
  }
  .about { padding-block: 40px 72px; }
  .about__title { font-size: 40px; text-align: center; }   /* (in the middle of the screen) */
  .about__title em { margin-inline: auto; }
  .about__cta { width: 100%; justify-content: center; min-height: 56px; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .hero .btn--ghost::before { animation: colour-walk 14s linear infinite; }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .show, .js .hero__copy .hero__actions.reveal, .js .hero__copy .eyebrow.reveal { transition: none; }
}
@keyframes colour-walk { to { transform: translate3d(-80%, 0, 0); } }

/* ---------- Header logo (top-left corner) + intro ---------- */
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  transition: opacity 0.5s var(--ease);
}
/* the brand symbol, standing still; it fades in (js adds .is-in). (On phones the live star logo sits here instead,
   turning.) */
.wordmark__logo { display: block; width: clamp(44px, 3.6vw, 54px); height: auto; }
.js .wordmark__logo { opacity: 0; transition: opacity 0.6s var(--ease); }
.js .wordmark.is-in .wordmark__logo { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .wordmark__logo { opacity: 1; transition: none; }
}
.intro-pending body::before {
  content: ""; position: fixed; inset: 0; z-index: 200; background: var(--bg);   /* the intro starts on a clean, empty blue */
}
.intro-pending, .intro-running { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 201; pointer-events: auto; cursor: pointer; }
.intro__bg { position: absolute; inset: 0; background: var(--bg); }   /* ends on the page's dark blue */
.intro__white { position: absolute; inset: 0; background: var(--bg); will-change: opacity; }   /* starts blue (the name is historical) */
.intro__blue { position: absolute; inset: 0; opacity: 0; will-change: opacity; background: var(--bg); }   /* one solid dark blue */
/* the hero waits under the intro, then fades in once it has finished */
.intro-pending .hero .reveal, .intro-running .hero .reveal { opacity: 0 !important; transform: translate3d(0, 18px, 0) !important; }
.intro-pending .hero__mark, .intro-running .hero__mark { opacity: 0 !important; }   /* opacity only: its position is measured */
.intro__stars { position: absolute; z-index: 1; will-change: transform, opacity; }
.intro__logo { position: absolute; z-index: 2; opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }   /* the logo picture the stars turn into */
.intro__logo img { display: block; width: 100%; height: 100%; }
.intro__hint {
  position: absolute; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom)); z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 500 12px/1 var(--apple); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.intro__hint i { width: 1px; height: 28px; background: linear-gradient(var(--muted), transparent); }
.intro__hint.is-in { opacity: 1; }
.intro__hint.is-gone { opacity: 0; transition-duration: 0.3s; }

/* ---------- Project colour themes ----------
   As each project scrolls into view the page takes on that website's colour (Kalifa red, MilkPod sky blue,
   Elkalifa gold). Fixed full-screen colour layers cross-fade with opacity only; text colours switch with it. */
.theme-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; will-change: opacity; }
.theme-bg--kalifa { background: #a70a1d; }
.theme-bg--milkpod { background: #a6bbd6; }
.theme-bg--elkalifa { background: linear-gradient(170deg, #c79a3c 0%, #e6c875 30%, #d4ad4f 52%, #f1dc97 72%, #a9781f 100%); }
body { transition: background-color 0s; }
/* the header bar has copies of the same colour layers at the same opacity, so it always matches the page exactly */
.nav__bg { position: absolute; inset: 0; z-index: -1; transition: opacity 0.5s var(--ease); }
.nav__bg::before { content: ""; position: absolute; inset: 0; background: var(--bg); }
/* once you scroll, the header bar and wordmark fade away; the Menu button stays */
.has-rail .nav__bg { opacity: 0; }   /* (desktop: the stars show right up to the top, behind the logo and menu) */
/* scrolled: no header bar - just the logo and the menu, over the page */
.js:not(.menu-open) .nav__bg { opacity: 0; }
.menu-open .nav__bg, .menu-closing .nav__bg { opacity: 0; transition: none; }
.menu-open .nav__links { opacity: 0; pointer-events: none; }   /* (the menu has them; the logo stays) */
.menu-open .wordmark { opacity: 1; pointer-events: auto; }
.theme-bg--nav { position: absolute; z-index: 0; background-size: 100% 100vh; background-position: 0 0; }
.project__info, .scribble__text, .project__meta dt, .project__meta dd, .project__desc, .project__note, .project__name, .status { transition: color 0.8s var(--ease), border-color 0.8s var(--ease); }
html[data-theme="elkalifa"] .project[data-theme="elkalifa"] { --ink: #2a1c04; --ink-soft: #3d2b0b; --ink-line: rgba(42, 28, 4, 0.3); }
html[data-theme="kalifa"] .project[data-theme="kalifa"] { --ink: #fff; --ink-soft: rgba(255, 255, 255, 0.82); --ink-line: rgba(255, 255, 255, 0.3); }
html[data-theme="milkpod"] .project[data-theme="milkpod"] { --ink: #0a1a33; --ink-soft: #1d3152; --ink-line: rgba(10, 26, 51, 0.25); }
html[data-theme] .project[data-theme] .project__name,
html[data-theme] .project[data-theme] .project__meta dd,
html[data-theme] .project[data-theme] .scribble__text { color: var(--ink, inherit); }
html[data-theme] .project[data-theme] .project__desc,
html[data-theme] .project[data-theme] .project__note,
html[data-theme] .project[data-theme] .project__meta dt,
html[data-theme] .project[data-theme] .status { color: var(--ink-soft, inherit); }
html[data-theme] .project[data-theme] .project__meta,
html[data-theme] .project[data-theme] .status { border-color: var(--ink-line, var(--line)); }
html[data-theme] .project[data-theme] .project__note { border-left-color: var(--ink, var(--blue)); }
html[data-theme="kalifa"] .project[data-theme="kalifa"] .visit-btn { background: #fff; color: #0b0e14; }
html[data-theme="elkalifa"] .project[data-theme="elkalifa"] .visit-btn { background: #2a1c04; color: #f6e7b8; }
html[data-theme="kalifa"] .scribble__svg { stroke: #fff; }
html[data-theme="elkalifa"] .scribble__svg { stroke: #2a1c04; }

/* ---------- Enquiry page ---------- */
.nav--sub { justify-content: flex-start; }
.back-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 4px;   /* (just the arrow and the word, no circle) */
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
  transition: color 0.3s var(--ease);
}
.back-link:hover { color: #8db6ff; }
.enquiry { padding-block: clamp(32px, 6vh, 72px) clamp(72px, 12vh, 140px); }
.enquiry__intro { max-width: 760px; }
.enquiry__title {
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 1; letter-spacing: -0.025em;
}
.enquiry__title em { display: block; font-family: var(--serif); color: var(--silver); letter-spacing: 0; }
.enquiry__lede { margin-top: 22px; max-width: 52ch; color: var(--silver); }
.enquiry__form { margin-top: clamp(36px, 6vh, 64px); max-width: 920px; display: grid; gap: clamp(22px, 3vh, 32px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.field { display: grid; align-content: start; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend, .field__label { font-size: 12.5px; letter-spacing: 0.14em; color: var(--silver); padding: 0; }
.field__opt { color: var(--muted); letter-spacing: 0.06em; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="number"], .field textarea {
  width: 100%;
  min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); color: var(--text);
  font: 400 16px/1.5 var(--sans);
  text-transform: none; letter-spacing: 0;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { min-height: 222px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 99, 232, 0.18); }
.field [aria-invalid="true"] { border-color: #c4331f; }
.field__error { color: #b42318; font-size: 14px; letter-spacing: 0.04em; }
.field textarea::placeholder { color: #8a93a2; text-transform: none; }

.links { display: grid; gap: 10px; }
.link-row { display: flex; gap: 10px; }
.link-row__remove, .file__remove {
  flex: none; width: 48px; min-height: 48px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); color: var(--silver); font-size: 22px; line-height: 1; cursor: pointer;
}
.link-row__remove:hover, .file__remove:hover { border-color: var(--text); color: var(--text); }
.add-link {
  justify-self: start;
  display: inline-grid; justify-items: center; gap: 2px;
  min-width: 120px; padding: 12px 20px 10px;
  border: 1px dashed var(--line-strong); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); color: var(--text); cursor: pointer;
  font: 500 12.5px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.add-link__plus { font-size: 26px; font-weight: 300; line-height: 1; color: var(--blue); }
.add-link:hover { border-color: var(--blue); }

.drop {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 8px;
  width: 100%; min-height: 222px;   /* (the same size as the big text box above it) */
  padding: 24px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: 12px;   /* (matching the text box) */
  background: rgba(255, 255, 255, 0.05); color: var(--silver);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--blue); background: rgba(59, 123, 255, 0.1); }
.drop:focus-within { outline: 2px solid var(--blue); outline-offset: 4px; }
.drop__icon { width: 44px; color: var(--blue); }
.drop__text { font-size: 14px; letter-spacing: 0.08em; color: var(--text); }
.drop__hint { font-size: 12.5px; letter-spacing: 0.08em; color: var(--muted); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.files { display: grid; gap: 8px; max-width: 640px; }
.file { display: flex; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; }
.file__thumb {
  flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover;
  display: grid; place-items: center; background: #eef1f6; color: var(--blue); font-size: 12px; font-weight: 600;
}
.file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; text-transform: none; letter-spacing: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.enquiry__submit .btn { text-transform: uppercase; letter-spacing: 0.02em; }
.enquiry__submit .btn[disabled] { opacity: 0.6; cursor: progress; }
.enquiry__status { color: var(--silver); font-size: 15px; letter-spacing: 0.04em; }
.enquiry__done { margin-top: clamp(36px, 6vh, 64px); max-width: 640px; }
.enquiry__done h2 { font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.1; }
.enquiry__done p { margin: 18px 0 28px; color: var(--silver); }
.enquiry__done strong { font-weight: 500; text-transform: none; color: var(--text); }
@media (max-width: 699px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- All caps ---------- */
body { text-transform: uppercase; letter-spacing: 0.02em; }
.hero__title, .contact__title { letter-spacing: -0.025em; }
.hero__title em, .contact__title em { letter-spacing: 0; }
.project__name { letter-spacing: -0.015em; }
/* desktop: the details under the line sit level with the bottom of the MacBook (js sets the column height) */
@media (min-width: 1000px) {
  .project__info { display: flex; flex-direction: column; }
  .project__info .project__meta { margin-top: auto; }
}
.hero__lede, .project__desc, .contact__lede { line-height: 1.65; letter-spacing: 0.03em; }
.project__note { letter-spacing: 0.03em; }

/* Lid thickness. The real 14" lid is about 3.9 mm thick on a 312.6 mm width (1.25 %); js/site.js sets --lid-t in px
   from the lid's width. The screen face sits half that in front of the hinge plane and the aluminium back half
   behind it; three anodised edges (top and both sides, inset past the rounded corners) close the gap, so the lid
   reads as a solid panel at every angle while it opens. Transforms only, set once; the swing itself is unchanged. */
.laptop__face { transform: translateZ(calc(var(--lid-t, 5px) / 2)); }
.laptop__back { transform: translateZ(calc(var(--lid-t, 5px) / -2)) rotateX(180deg); }
.laptop__edge { position: absolute; pointer-events: none; background: linear-gradient(90deg, #2a2b2f, #4a4c52 50%, #2a2b2f); }
.laptop__edge--top {
  top: 0; left: 2.415%; right: 2.415%; height: var(--lid-t, 5px);
  transform-origin: 50% 0; transform: translateZ(calc(var(--lid-t, 5px) / -2)) rotateX(90deg);
  background: linear-gradient(180deg, #55575d, #34363a);   /* catches the light along the top */
}
.laptop__edge--left, .laptop__edge--right {
  top: 3.553%; bottom: 0.565%; width: var(--lid-t, 5px);
  background: linear-gradient(90deg, #3c3e43, #2a2b2f);
}
.laptop__edge--left { left: 0; transform-origin: 0 50%; transform: translateZ(calc(var(--lid-t, 5px) / -2)) rotateY(-90deg); }
.laptop__edge--right { right: 0; transform-origin: 100% 50%; transform: translateZ(calc(var(--lid-t, 5px) / -2)) rotateY(90deg); }
/* lid edges: lighter, polished aluminium so the thickness catches the light while the lid swings */
.laptop__edge--top { background: linear-gradient(180deg, #8a8d94, #5b5e64 45%, #3c3e43); }
.laptop__edge--left, .laptop__edge--right { background: linear-gradient(90deg, #6d7076, #45474c 60%, #34363a); }

/* ---------- The MacBook: photographs, always open ----------
   The open MacBook photo, as its keyboard deck (mbp-base) with the lid above it (mbp-lid, the screen cut out, with
   the Safari window behind it). The screen is black until its stars land (js), then the website fades in. Measured
   from the photo: base and lid 1353 px wide, the lid 635 px tall, the base 344; the screen 11.83% in from the lid's
   left, 4.09% down, 76.27% x 90.08% of it. */
.laptop { aspect-ratio: 1353 / 979; margin-bottom: 0; transform-style: flat; }
.laptop__lid { position: absolute; left: 0; top: 0; width: 100%; height: 64.862%; transform: none !important; }
.laptop__lid::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/mbp-lid.webp") 0 0 / 100% 100% no-repeat; }
.laptop__face { position: absolute; left: 11.8256%; top: 4.0945%; width: 76.2749%; height: 90.0787%;
  padding: 0; border-radius: 0; background: #000; box-shadow: none; overflow: hidden; transform: none !important; }
.laptop__face::before, .laptop__notch, .laptop__base, .laptop__back, .laptop__edge { display: none !important; }
.laptop .browser { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
.laptop .safari { opacity: var(--screen, 1); }
.laptop::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 35.138%; pointer-events: none;
  background: url("../img/mbp-base.webp") 0 0 / 100% 100% no-repeat; }

/* ---------- Legal pages (cookies, terms, privacy) and their links ---------- */
.legal { padding-block: calc(var(--nav-h) + 24px) clamp(72px, 12vh, 140px); max-width: 860px; }
.legal__title { margin-top: 18px; font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 400; line-height: 1.04; text-transform: uppercase; }
.legal__title em { color: var(--silver); }
.legal__date { margin-top: 14px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.legal__body { margin-top: clamp(36px, 6vh, 60px); }
.legal__body h2 { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 400; text-transform: uppercase; }
.legal__body p, .legal__body li { margin-top: 14px; color: var(--silver); max-width: 64ch; }
.legal__body ul { margin: 0; padding-left: 1.2em; }
.legal__body strong { color: var(--text); font-weight: 500; }
.legal__body a, .footer__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
/* the Instagram link: its glyph and handle */
.insta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.insta svg { flex: none; width: 20px; height: 20px; }
.menu .insta { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: #fff; }
.menu .insta svg { width: 22px; height: 22px; }
.menu .insta:hover { color: #fff; }
.site-footer .insta span:not(.sr-only) { text-transform: none; }

/* Phones: from the websites down to the "Start now" button the background drifts slowly through blue, grey and black - by itself, over time - and it is the page's blue again before and after (the colour layers' opacity
   only: they cross-fade on a slow loop, and js fades the whole wash in and out with where you are on the page).
   The "Have a project in mind?" title and its text are centred, with a smaller button */
.wash { display: none; }
@media (max-width: 599px) {
  .wash { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
  .wash.is-on { opacity: 1; }
  .wash i { position: absolute; inset: 0; opacity: 0; }
  /* (only blue, light blue, grey and black - with a soft white light - all dark enough for the white text to stay clear) */
  .wash i:nth-child(1) { background: radial-gradient(90% 60% at 20% 25%, rgba(140, 190, 255, 0.16), transparent 70%), radial-gradient(120% 80% at 30% 40%, #163578, #0a1a44 75%); }   /* blue, light blue */
  .wash i:nth-child(2) { background: radial-gradient(80% 55% at 75% 35%, rgba(255, 255, 255, 0.12), transparent 70%), radial-gradient(120% 80% at 70% 55%, #343b48, #171b23 75%); }   /* grey, white light */
  .wash i:nth-child(3) { background: radial-gradient(120% 80% at 40% 70%, #10141c, #030406 75%); }   /* black */
  .contact__title { font-size: clamp(2.3rem, 10vw, 3rem); }
  .contact__start .btn { min-height: 50px; padding: 0 24px; font-size: 15px; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  /* (the colours keep cycling all the time; only the whole wash fades in and out, so nothing snaps as it goes) */
  .wash i { animation: wash-cycle 24s ease-in-out infinite; }
  .wash i:nth-child(2) { animation-delay: -16s; }
  .wash i:nth-child(3) { animation-delay: -8s; }
}
@keyframes wash-cycle { 0%, 100% { opacity: 0; } 18%, 38% { opacity: 1; } 56% { opacity: 0; } }

/* the menu's foot: Instagram and the email under it, at the bottom of the screen in the middle */
.menu__foot {
  position: fixed; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; transition: opacity 0.2s ease-in;
}
.menu.is-open .menu__foot { opacity: 1; transition: opacity 0.6s var(--ease) 0.46s; }
.menu__foot .menu__mail { margin-top: 0; opacity: 1; transform: none; transition: color 0.3s var(--ease); }

/* Desktop and iPad: About us, Our work and Get in touch in the header's top-left corner, beside the logo; the
   home page itself has no buttons (phones keep theirs) */
.nav__links { display: none; }
@media (min-width: 600px) {
  .nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); margin-left: clamp(20px, 2.6vw, 40px); margin-right: auto; transition: opacity 0.4s var(--ease); }   /* (beside the logo) */
  .nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
  .nav__links a:hover { color: #8db6ff; }
  .hero__copy .hero__actions { display: none; }
}

/* the header while you scroll down: away (up and out of view), back as you scroll up - transform and opacity only */
.nav { transition: transform 0.45s var(--ease), opacity 0.45s var(--ease); }
.nav-away .nav { transform: translate3d(0, -100%, 0); opacity: 0; pointer-events: none; }
@media (max-width: 599px) { .nav-away .hero__mark { opacity: 0 !important; pointer-events: none; } }   /* (the phone's header logo too) */

/* ---------- Create your website (create.html): page chips, the budget, where the link goes ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: 15px; text-transform: none;
  letter-spacing: 0.02em; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.chip:has(input:checked) { border-color: var(--blue); background: rgba(59, 123, 255, 0.14); }
.chip:has(input:focus-visible) { outline: 2px solid #8db6ff; outline-offset: 2px; }
.money { display: flex; align-items: center; gap: 10px; }
.money span { font-size: 1.4rem; color: var(--silver); }
.money input { max-width: 220px; }
.field__hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
#field-email:not(.is-needed) label::after, #field-phone:not(.is-needed) label::after { content: " (optional)"; color: var(--muted); font-size: 0.85em; }

/* ---------- Get in touch (contact.html): the email and the number, and a WhatsApp button ---------- */
.reach { max-width: 760px; padding-block: calc(var(--nav-h) + 8px) clamp(72px, 12vh, 140px); }
.reach__title { margin-top: 18px; font-size: clamp(2.8rem, 8vw, 5rem); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; }
.reach__title em { color: var(--silver); }
.reach__lede { margin-top: 22px; color: var(--silver); max-width: 44ch; }
.reach__list { margin-top: clamp(32px, 5vh, 48px); }
.reach__row { display: grid; gap: 4px; padding: 18px 0; }
.reach__row + .reach__row { border-top: 1px solid var(--line); }
.reach__label { font-size: 12.5px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.reach__value { font-size: clamp(1.4rem, 5vw, 2.2rem); letter-spacing: -0.01em; text-transform: none; overflow-wrap: anywhere; }
.reach__row:hover .reach__value { color: #8db6ff; }
.reach__wa {
  margin-top: 26px; gap: 12px; background: #000; color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.reach__wa:hover { background: #16181d; }
.reach__wa svg { width: 24px; height: 24px; }
.reach__more { margin-top: 36px; color: var(--muted); }
.reach__more a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* (no browser play button over the recordings: they start by themselves, or on the first touch - js/site.js) */
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* "Have a project in mind?" - its title, text and button in the middle, the email under them (every screen) */
.contact__inner { text-align: center; }
.contact__lede { margin-inline: auto; }
.contact__mail { grid-template-columns: 1fr; justify-items: center; gap: 6px; max-width: 760px; margin-inline: auto; }
.contact__arrow { grid-column: 1; grid-row: auto; width: 48px; margin-top: 10px; }
@media (min-width: 600px) {
  /* "Guy K Web · Web design studio" under the headline */
  .hero__copy { display: flex; flex-direction: column; }
  .hero__copy .hero__title { order: 0; }
  .hero__copy .eyebrow { order: 1; margin: clamp(16px, 2.4vh, 26px) 0 0; }
  .hero__copy .hero__lede { order: 2; }
}
@media (min-width: 1000px) {
  /* About: starting at the same left edge as the titles above, the full width of the screen */
  .about.wrap { max-width: none; padding-inline: max(46px, env(safe-area-inset-left)); }
}

/* the menu (every screen): its links at the top left, under the logo; at the foot, Instagram, the email, the number and
   WhatsApp */
.menu { align-items: flex-start; padding-top: calc(var(--nav-h) + 18px); }
.menu { padding-left: max(30px, env(safe-area-inset-left)); }   /* (lined up with the logo above them) */
.menu__inner { max-width: none; margin-inline: 0; }
@media (max-width: 599px) { .menu { padding-left: max(20px, env(safe-area-inset-left)); } }
.menu__foot { gap: 2px; }
.menu__foot .menu__mail { min-height: 40px; }
.menu__wa {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 6px; padding: 0 20px; border-radius: 999px;
  background: #000; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}


/* "Create website now" (phones' home page): a deep blue button */
.btn--create { background: #173c9c; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 28px rgba(10, 30, 110, 0.45); }
.btn--create:hover { background: #1d48b8; }


/* the three websites: each one's name above its screen, the button right under it, then its description */
.site-card__name { order: 0; margin: 0 0 14px; }
.site-card__window { order: 1; }
.site-card__visit { order: 2; margin-top: 16px; }
.site-card__desc { order: 3; margin-top: 16px; }
.site-card__note { order: 4; }

/* "Built around your business" - in the headline's two hands like the About title, a size smaller, no line above */
.about__part h3.about__part-title { padding-top: 0; border-top: 0; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.035em; }   /* (as big as the About title) */
.about__part-title .about__script { font-size: 1.3em; }
.about__part-title em {
  display: block; width: max-content; max-width: 100%; padding-right: 0.14em; font-family: var(--serif); letter-spacing: -0.03em;
  background: linear-gradient(100deg, #5b8cff 0%, #8db6ff 55%, #c3d8ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* phones: "Get in touch" above "Create website now"; the About introduction centred; no big gap before "Have a project
   in mind?" */
@media (max-width: 599px) {
  .about__part-title { text-align: center; }
  .about__part-title em { margin-inline: auto; }
  .contact__lede { text-align: left; }
  .site-footer__brand p { display: none; }
  .about { padding-bottom: 20px; }
  .contact__inner { padding-top: 28px; }
}
/* the menu's links in the blue italic capitals of "Our project." */
.menu__list a {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.05; width: fit-content;
  background: linear-gradient(100deg, #8db6ff 0%, #c3d8ff 60%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.menu__list a:hover { opacity: 0.8; }

/* (Safari's fallback when it won't start a video by itself: the same recording as a moving picture, in its place) */
.bigsite__view, .site-card__view, .show__view { position: relative; }
.vid-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.show__view .vid-img { object-fit: contain; }

/* desktop: the About, "Built around your business" and "Have a project in mind?" text a size bigger */
@media (min-width: 1000px) {
  .about__intro p, .about__part p { font-size: 18px; line-height: 1.6; }
  .about__intro .about__lede { font-size: 22px; line-height: 1.5; }
  .contact__lede { font-size: 20px; line-height: 1.6; max-width: 52ch; }
}

/* "Have a project in mind?" in the headline's two hands, like the titles above it */
.contact__title { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.contact__title .about__script { font-size: 1.3em; }
.contact__title em {
  display: block; width: max-content; max-width: 100%; margin-inline: auto; padding-right: 0.14em; font-family: var(--serif); letter-spacing: -0.03em; color: inherit;
  background: linear-gradient(100deg, #5b8cff 0%, #8db6ff 55%, #c3d8ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 599px) { .contact__title { font-size: 40px; } }

/* while the colours drift behind (phones), the softer text brightens so it stays clear on every one of them */
@property --muted { syntax: '<color>'; inherits: true; initial-value: #93a1bd; }
@property --silver { syntax: '<color>'; inherits: true; initial-value: #c6d0e3; }
html { transition: --muted 1.4s var(--ease), --silver 1.4s var(--ease); }   /* (in step with the colours fading) */
.wash-on { --muted: #c3cde2; --silver: #dbe3f2; }

/* ---------- The chat helper (js/chat.js): a business messenger in the site's colours - a header with the logo and
   its status, replies beside a small logo, your messages in deep blue, the time under each, "typing…" before each
   reply, one row of suggested questions, and WhatsApp or a call at the foot. Its button: a message bubble drawn in
   twinkling stars on phones, a dark round button with a fine outline elsewhere ---------- */
.chat { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 57; }
.menu-open .chat { opacity: 0; pointer-events: none; }
.chat__btn {
  display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
  background: var(--bg); color: #fff; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: transform 0.25s var(--ease);
}
.chat__btn:hover { transform: scale(1.06); }
.chat__btn svg.chat__glyph { width: 26px; height: 26px; }
.chat.is-open .chat__btn { transform: scale(0.9); }
.chat__stars { display: none; }
.chat__panel {
  position: absolute; right: 0; bottom: 74px; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100svh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
  background: #081a47; color: var(--text); text-transform: none; letter-spacing: 0; font: 400 14.5px/1.5 var(--sans);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform-origin: 100% 100%; animation: chat-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat__panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.96); } }
.chat__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 16px; background: linear-gradient(#06153a, #081a47); }
/* (no lines: the messages fade softly away under the header and above the questions) */
.chat__head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(#081a47, rgba(8, 26, 71, 0)); pointer-events: none; }
.chat__avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #0f2766; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.chat__avatar img { width: 28px; height: 28px; }
.chat__online { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 2px var(--bg); }
.chat__who { flex: 1; display: grid; min-width: 0; }
.chat__who strong { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.chat__sub { font-size: 12.5px; color: var(--muted); }
.chat__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.chat__close:hover { background: rgba(255, 255, 255, 0.08); }
.chat__close svg { width: 20px; height: 20px; }
.chat__log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat__row { display: flex; align-items: flex-end; gap: 8px; }
.chat__row.is-cont { margin-top: -4px; }
.chat__row--me { justify-content: flex-end; }
.chat__mini { flex: none; width: 26px; height: 26px; margin-bottom: 0; border-radius: 50%; display: grid; place-items: center; background: #0f2766; }   /* (level with the bubble, above its time) */
.chat__typing .chat__mini { margin-bottom: 0; }
.chat__mini img { width: 18px; height: 18px; }
.chat__row.is-cont .chat__mini { visibility: hidden; }
.chat__bubble { max-width: 80%; display: grid; gap: 3px; }
.chat__row--me .chat__bubble { justify-items: end; }
.chat__msg { margin: 0; padding: 10px 13px; border-radius: 16px; overflow-wrap: anywhere; }
.chat__row--bot .chat__msg { background: rgba(255, 255, 255, 0.07); border-bottom-left-radius: 5px; }
.chat__row--me .chat__msg { background: #173c9c; color: #fff; border-bottom-right-radius: 5px; }
.chat__msg a { color: #9cc8ff; text-decoration: underline; text-underline-offset: 2px; }
.chat__typing .chat__bubble { padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.chat__dots { display: flex; gap: 4px; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--silver); animation: chat-dot 1.1s ease-in-out infinite; }
.chat__dots i:nth-child(2) { animation-delay: 0.15s; }
.chat__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat__quick { position: relative; display: flex; gap: 8px; padding: 8px 14px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chat__log { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.chat__quick::-webkit-scrollbar { display: none; }
.chat__quick button {
  flex: none; min-height: 40px; padding: 0 14px; border: 1px solid rgba(141, 182, 255, 0.45); border-radius: 999px; background: transparent;
  color: #cfe0ff; font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color 0.2s var(--ease);
}
.chat__quick button:hover { background: rgba(141, 182, 255, 0.12); }
.chat__form { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; flex: none; }
.chat__form input { flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text); font: 400 16px/1 var(--sans); text-transform: none; letter-spacing: 0; }
.chat__form input::placeholder { color: var(--muted); }
.chat__form input:focus { outline: none; border-color: #8db6ff; background: rgba(255, 255, 255, 0.09); }
.chat__form button { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; }
.chat__form button svg { width: 20px; height: 20px; }
.chat__foot { margin: 0; padding: 0 14px 12px; text-align: center; font-size: 12.5px; color: var(--muted); flex: none; }
.chat__foot a { color: var(--silver); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 599px) {
  /* phones: the chat opens as a sheet from the bottom of the screen */
  .chat__panel { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: min(78svh, 640px); border-radius: 22px; }
  .chat.is-open .chat__btn { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .chat__panel, .chat__dots i { animation: none; } }
/* the button on every screen: a message bubble drawn in twinkling stars, no circle */
@media all {
  .chat__btn { width: 64px; height: 64px; background: none; box-shadow: none; }
  .chat__btn svg.chat__glyph { display: none; }
  .chat__btn .chat__stars { display: block; width: 62px; height: 62px; overflow: visible; fill: #e8f0ff; filter: drop-shadow(0 0 1.5px rgba(160, 200, 255, 1)) drop-shadow(0 0 8px rgba(59, 123, 255, 0.85)); }
  .chat__stars path:nth-child(3n) { fill: #8db6ff; }
  .chat__stars path:nth-child(5n) { fill: #ffffff; }
}
@media (prefers-reduced-motion: no-preference) {
  .chat__stars path { animation: chat-twinkle 2.8s ease-in-out infinite; }
  .chat__stars path:nth-child(2n) { animation-delay: -0.9s; }
  .chat__stars path:nth-child(3n) { animation-delay: -1.7s; animation-duration: 3.6s; }
  .chat__stars path:nth-child(7n) { animation-delay: -2.3s; animation-duration: 2.2s; }
}
@keyframes chat-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .chat__btn { transition: none; } }

/* "Start now": slowly fading through the colours of "Your Website" (a wide band of them gliding behind it - transform
   only); on hover a blue circle grows out from where the pointer came in and fills it, the text turning white (as on
   Elkalifa's buttons; js sets where it starts) */
.btn--glow { position: relative; overflow: hidden; isolation: isolate; background: #fff; color: #06153a; font-weight: 600; transition: color 0.55s cubic-bezier(0.76, 0, 0.24, 1); }
.btn--glow::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1000%; z-index: -2;
  background: linear-gradient(90deg, #ffffff 0%, #ffe14d 8%, #ffab3d 16%, #ff8a7e 24%, #ff8fd8 32%, #c3a2ff 40%, #8fb3ff 48%, #7fe3ff 56%, #8ff5bd 64%, #d6f57e 72%, #ffffff 80%, #ffe14d 88%, #ffab3d 96%, #ff8a7e 100%);
}
.btn--glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  left: var(--x, 50%); top: var(--y, 50%); width: 480px; height: 480px; margin: -240px 0 0 -240px;
  background: var(--blue); transform: scale(0); transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
}
.btn--glow:hover, .btn--glow:focus-visible { color: #fff; }
.btn--glow:hover::before, .btn--glow:focus-visible::before { transform: scale(1); }
.btn--glow .btn__arrow { transition: transform 0.35s var(--ease); }
.btn--glow:hover .btn__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) { .btn--glow::after { animation: glow-walk 26s linear infinite; } }
@keyframes glow-walk { to { transform: translate3d(-80%, 0, 0); } }
@media (hover: none) { .btn--glow:hover { color: #06153a; } .btn--glow:hover::before { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .btn--glow::before { transition: none; } }

/* phones: the text under "Have a project in mind?" goes; "Get in touch" and, under it, "Create website now", both
   on the left */
@media (max-width: 599px) {
  .contact__lede { display: none; }
  .contact__inner { padding-bottom: 56px; }
  .contact__start { margin-top: 26px; }
  .hero__copy .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { flex: none; width: auto; justify-content: center; }
  .hero__actions .btn--ghost { order: -1; }
}

/* desktop and iPad: "Built around your business" under the About text, on the left (one column) */
@media (min-width: 600px) {
  .about__main { display: block; }
  .about__intro { position: static; }
  .about__more { margin-top: clamp(64px, 9vh, 110px); }
  .about__more .about__part p { max-width: 60ch; }
}
@media (max-width: 599px) { .about__part h3.about__part-title { font-size: 40px; } }

/* "Guy K Web · Web design studio" waits for the headline to finish (every screen), then the paragraph follows it */
.js .hero__copy .eyebrow.reveal { transform: none; transition: opacity 0.8s var(--ease); }
.js .hero__copy .eyebrow.reveal:not(.is-shown) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .hero__copy .eyebrow.reveal:not(.is-shown) { opacity: 1; } }

/* phones: the home text comes in from the top down - each piece in its turn, fading in as it settles down into place,
   and the paragraph uncovering from its first line to its last */
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .js .hero__copy .eyebrow.reveal, .js .hero__copy .hero__actions.reveal, .js .show {
    transition: opacity 0.75s var(--ease), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .hero__copy .eyebrow.reveal:not(.is-shown), .js .hero__copy .hero__actions.reveal:not(.is-shown), .js .show:not(.is-shown) { transform: translate3d(0, -12px, 0); }
  .js .hero__copy .hero__lede {
    -webkit-mask-image: linear-gradient(#000 40%, transparent 60%); mask-image: linear-gradient(#000 40%, transparent 60%);
    -webkit-mask-size: 100% 250%; mask-size: 100% 250%; -webkit-mask-position: 0 100%; mask-position: 0 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    transition: opacity 0.5s var(--ease), -webkit-mask-position 1.3s cubic-bezier(0.33, 0, 0.2, 1), mask-position 1.3s cubic-bezier(0.33, 0, 0.2, 1);
  }
  .js .hero__copy .hero__lede.is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* Tablets (iPad, 600-999px), like a computer: the text on the left, and the spinning logo in the free space on its
   right (placed by js/site.js), the hero a full screen high. Phones keep it in the header's corner. */
@media (min-width: 600px) and (max-width: 999px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); min-height: calc(100svh - var(--nav-h)); align-items: start; }
  .hero__mark { grid-row: auto; justify-self: center; margin: 0; }
}