/* ═════════════════════════════════════════════════════════════
   Product Works — ultra-modern pitch site
   ═════════════════════════════════════════════════════════════ */

/* Self-hosted Inter + JetBrains Mono (variable fonts).
   Eliminates the Google Fonts critical-request chain and renders
   text immediately via font-display: swap. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-italic-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-variable.woff2') format('woff2');
}

:root{
  /* Dark theme (default — apple.com dark palette) */
  --bg:        #000000;
  --bg-soft:  #1D1D1F;
  --surface:  #1D1D1F;
  --surface-2:#2D2D2F;
  --line:     #424245;
  --line-2:   #6E6E73;
  --text:     #F5F5F7;
  --text-2:   #A1A1A6;
  --muted:    #86868B;
  --accent:    #2997FF;
  --accent-2:  #2997FF;
  --on-accent: #FFFFFF;
  --glow:      rgba(41,151,255,.32);

  /* Surface tints (very subtle washes) */
  --tint:        rgba(255,255,255,.025);
  --tint-strong: rgba(255,255,255,.05);
  --tint-accent: rgba(41,151,255,.06);

  /* Atmospheric/decorative glows */
  --spotlight:    rgba(41,151,255,.10);
  --hero-glow:    rgba(41,151,255,.18);
  --contact-glow: rgba(41,151,255,.10);

  /* Image-overlay surfaces (always dark, regardless of theme — sit over photography) */
  --overlay:        rgba(0,0,0,.78);
  --overlay-strong: rgba(0,0,0,.92);
  --tile-bg:        #1D1D1F;

  /* Logo filter (the West East Group mark is black) */
  --logo-filter: invert(1) brightness(1.4);

  /* Grain blend */
  --grain-blend: overlay;
  --grain-opacity: .06;

  --radius-l: 28px;
  --radius-m: 18px;
  --radius-s: 10px;
  --maxw:     1320px;
  --pad:      clamp(20px, 4vw, 56px);

  /* Apple font stack: SF Pro on Apple devices via -apple-system,
     Inter as the closest open-source fallback elsewhere. */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ─── Light theme (apple.com palette) ──────────────────────── */
:root[data-theme="light"]{
  --bg:        #FFFFFF;
  --bg-soft:  #F5F5F7;
  --surface:  #FFFFFF;
  --surface-2:#FAFAFA;
  --line:     #D2D2D7;
  --line-2:   #86868B;
  --text:     #1D1D1F;
  --text-2:   #6E6E73;
  --muted:    #86868B;
  --accent:    #0066CC;
  --accent-2:  #0066CC;
  --on-accent: #FFFFFF;
  --glow:      rgba(0,102,204,.18);

  --tint:        rgba(0,0,0,.02);
  --tint-strong: rgba(0,0,0,.04);
  --tint-accent: rgba(0,102,204,.05);

  /* Apple light is flat — no atmospheric glows */
  --spotlight:    transparent;
  --hero-glow:    transparent;
  --contact-glow: rgba(0,102,204,.05);

  /* Image labels still read as dark chips on light theme — they sit over photography */
  --overlay:        rgba(29,29,31,.78);
  --overlay-strong: rgba(29,29,31,.92);
  --tile-bg:        #F5F5F7;

  /* Logo is already dark — no inversion needed */
  --logo-filter: none;

  /* Grain barely shows on white */
  --grain-blend: multiply;
  --grain-opacity: .02;
}

html{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* Smooth theme transitions on key surfaces */
body, .nav, .nav.is-scrolled, .marquee, .numbers, .contact, .footer,
.tile, .stat, .service, .story__img, .field input, .field textarea,
.contact__cities li, .hero__feature-stat, .hero__meta {
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}

*,*::before,*::after{ box-sizing:border-box; min-width:0; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-0.005em;
  overflow-x:hidden;
  overflow-wrap:break-word;
  min-height:100vh;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
em{ font-style:italic; }
.mono{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--glow); }

/* ───────── Background effects ───────── */
.spotlight{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px circle at var(--mx,50%) var(--my,30%),
      var(--spotlight), transparent 60%);
  transition:background .25s var(--ease);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:var(--grain-blend);
}
main{ position:relative; z-index:2; }

/* ───────── Nav ───────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom:1px solid transparent;
  backdrop-filter:saturate(140%) blur(0px);
}
.nav.is-scrolled{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);
  padding-top:12px; padding-bottom:12px;
}
.nav__brand{
  display:inline-flex; align-items:center; gap:14px;
}
.nav__wordmark{
  font-family:var(--font-display); font-weight:700;
  font-size:18px; letter-spacing:-.02em;
  line-height:1; color:var(--text);
  text-transform:uppercase;
}
.nav__divider{
  display:block; width:1px; height:18px; background:var(--line-2);
}
.nav__brand img{
  height:14px; width:auto;
  filter:var(--logo-filter);
  opacity:.62;
  transition:opacity .25s var(--ease), filter .35s var(--ease);
}
.nav__brand:hover img{ opacity:1; }
@media (max-width: 560px){
  .nav__divider, .nav__brand img{ display:none; }
}
.nav__links{
  display:flex; gap:28px;
  font-size:14px; color:var(--text-2);
}
.nav__links a{
  position:relative; padding:6px 0;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:var(--text); color:var(--bg);
  font-size:13px; font-weight:500;
  transition:transform .25s var(--ease), background .2s var(--ease);
}
.nav__cta:hover{ transform:translateY(-1px); background:var(--accent); color:var(--on-accent); }
.nav__cta svg{
  transform:translate3d(0,0,0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.nav__cta:hover svg{ transform:translate3d(3px,-3px,0); }

@media (max-width: 880px){
  .nav__links{ display:none; }
}

/* ───────── Buttons ───────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-size:14px; font-weight:500;
  transition:transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .3s var(--ease);
  cursor:pointer;
  border:1px solid transparent;
}
.btn--primary{
  background:var(--accent); color:var(--on-accent);
  transition:transform .25s var(--ease), background .2s var(--ease), filter .25s var(--ease);
}
.btn--primary:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn--primary svg{
  transform:translate3d(0,0,0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.btn--primary:hover svg{ transform:translate3d(4px,-4px,0); }
.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--line-2);
}
.btn--ghost:hover{ background:var(--surface-2); border-color:var(--text-2); }

/* ───────── Hero ───────── */
.hero{
  position:relative;
  padding:160px var(--pad) 100px;
  max-width:var(--maxw);
  margin:0 auto;
}
.hero::before{
  content:""; position:absolute; top:80px; right:-10%; width:60vw; height:60vw; max-width:900px; max-height:900px;
  background:radial-gradient(closest-side, var(--hero-glow), transparent 70%);
  filter:blur(40px); pointer-events:none; z-index:-1;
}
/* Second softer gradient orb (lower-left) for compositional balance */
.hero::after{
  content:""; position:absolute; bottom:-15%; left:-12%; width:55vw; height:55vw; max-width:780px; max-height:780px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  filter:blur(60px); pointer-events:none; z-index:-1;
}
/* Architectural backdrop — engineering grid, CAD target, register marks, dimension ticks */
.hero__bg{
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  overflow:hidden;
  color:var(--text);
}
.hero__bg-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.hero__meta{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--surface) 60%, transparent); backdrop-filter:blur(10px);
}
.hero__meta .dot{ width:8px; height:8px; border-radius:50%; background:#3CD876; box-shadow:0 0 10px rgba(60,216,118,.6); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.55; transform:scale(.85);} }

.hero__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(38px, 6vw, 88px);
  line-height:1;
  letter-spacing:-0.03em;
  margin:28px 0 32px;
  text-transform:none;
}
.hero__title .line{ display:block; }
.hero__title em{ color:var(--accent-2); font-weight:500; font-style:italic; }
.hero__title .line--rotator{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25em; }
.hero__title .rotator{
  position:relative;
  display:inline-block;
  vertical-align:baseline;
  min-width:9ch;
  flex-grow:1;
  overflow:hidden;
}
/* Baseline ghost: gives the inline-block a real text baseline (instead of the
   bottom margin edge, which is what an empty inline-block defaults to). With
   this in place, the absolute children at top:0 land on the same baseline as
   surrounding text — no magic numbers, font-agnostic. */
.hero__title .rotator::before{
  content:"\00A0";
  visibility:hidden;
}
.hero__title .rotator span{
  position:absolute; left:0; top:0;
  opacity:0; transform:translateY(.5em);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  font-style:italic; font-weight:500; color:var(--accent-2);
  white-space:nowrap;
}
.hero__title .rotator span.is-active{ opacity:1; transform:translateY(0); }
.hero__title .rotator span.is-leaving{ opacity:0; transform:translateY(-.5em); }

.hero__sub{
  display:grid; grid-template-columns:1.4fr 1fr; gap:48px;
  align-items:end;
  border-top:1px solid var(--line);
  padding-top:32px;
}
.hero__sub p{
  font-size:clamp(16px,1.4vw,19px);
  color:var(--text-2);
  max-width:48ch; margin:0;
}
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width:760px){
  .hero{ padding-top:120px; }
  .hero__sub{ grid-template-columns:1fr; gap:24px; }
  .hero__actions{ justify-content:flex-start; }
}

/* Hero feature image */
.hero__feature{
  margin:80px 0 0;
  display:grid; grid-template-columns:1.7fr 1fr; gap:24px;
  align-items:stretch;
}
.hero__feature-frame{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, #F5F5F7 60%, #E5E5EA 100%);
  aspect-ratio:16/10;
}
.hero__feature-frame::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.18), transparent 55%);
  pointer-events:none;
}
.hero__feature-frame img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain;
  padding:6%;
  transform:scale(1);
  transition:transform 1.2s var(--ease-out);
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.35));
}
.hero__feature-frame:hover img{ transform:scale(1.04); }
.hero__feature-tag{
  position:absolute; left:24px; bottom:24px; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  padding:14px 18px;
  background:var(--overlay-strong); backdrop-filter:blur(10px);
  border:1px solid #424245;
  border-radius:14px;
  color:#F5F5F7;
}
.hero__feature-tag .mono{ color:#86868B; }
.hero__feature-tag strong{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.02em; color:#F5F5F7; text-transform:uppercase; }

.hero__feature-aside{
  display:grid; grid-template-rows:repeat(3,1fr); gap:14px;
}
.hero__feature-stat{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:22px 22px;
  background:linear-gradient(180deg, var(--tint), transparent);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hero__feature-stat:hover{ border-color:var(--line-2); }
.hero__feature-stat strong{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(32px,4.4vw,56px);
  letter-spacing:-.035em; line-height:1;
  color:var(--text);
}

@media (max-width:880px){
  .hero__feature{ grid-template-columns:1fr; }
  .hero__feature-aside{ grid-template-rows:none; grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .hero__feature-aside{ grid-template-columns:1fr; }
}

/* ───────── Marquee ───────── */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:26px 0;
  background:var(--tint);
}
.marquee__track{
  display:flex; gap:36px; align-items:center;
  white-space:nowrap;
  animation:marq 18s linear infinite;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(24px,3.4vw,48px);
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--text-2);
}
.marquee__track > *{ flex-shrink:0; }
.marquee__track i{ font-style:normal; color:var(--accent); font-size:.7em; }
@keyframes marq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ───────── Section header ───────── */
.section__header{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex; flex-direction:column; gap:18px;
}
.section__header--center{ align-items:center; text-align:center; }
.section__header h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px,5.2vw,76px);
  line-height:1; letter-spacing:-.03em;
  margin:0; max-width:18ch;
}
.section__header h2 em{ color:var(--accent-2); font-weight:500; font-style:italic; }
.section__desc{
  color:var(--text-2);
  font-size:clamp(15px,1.2vw,17px);
  max-width:62ch; margin:0;
}

/* ───────── Story ───────── */
.story{ padding:140px var(--pad); max-width:var(--maxw); margin:0 auto; }
.story__grid{
  margin-top:64px;
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:start;
}
.story__copy .lede{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.25; letter-spacing:-.018em;
  margin:0 0 24px; font-weight:500;
}
.story__copy p{ color:var(--text-2); font-size:17px; }
.story__pills{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:28px;
}
.story__pills span{
  padding:8px 14px; border:1px solid var(--line);
  border-radius:999px; font-size:13px; color:var(--text-2);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.story__pills span:hover{ border-color:var(--accent); color:var(--text); }

.story__media{
  position:relative; aspect-ratio:1/1; min-height:420px;
}
.story__img{
  position:absolute; margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--tile-bg);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.45);
}
.story__img img{ width:100%; height:100%; object-fit:cover; }
.story__img--a{ top:0; left:0; width:60%; aspect-ratio:4/5; transform:rotate(-2deg); transition:transform .8s var(--ease-out); }
.story__img--b{ bottom:14%; right:0; width:55%; aspect-ratio:1/1; transform:rotate(3deg); transition:transform .8s var(--ease-out); }
.story__img--c{ bottom:0; left:24%; width:46%; aspect-ratio:5/4; transform:rotate(-4deg); z-index:2; transition:transform .8s var(--ease-out); }
.story__media:hover .story__img--a{ transform:rotate(-3deg) translate(-6px,-6px); }
.story__media:hover .story__img--b{ transform:rotate(4deg) translate(8px,4px); }
.story__media:hover .story__img--c{ transform:rotate(-5deg) translate(-4px,8px); }

@media (max-width:1000px){
  .story__grid{ grid-template-columns:1fr; gap:60px; }
}

/* ───────── Services ───────── */
.services{ padding:140px var(--pad); max-width:var(--maxw); margin:0 auto; }
.services__grid{
  list-style:none; padding:0; margin:64px 0 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  overflow:hidden;
}
.service{
  position:relative;
  background:var(--bg);
  padding:42px 36px 32px;
  min-height:300px;
  display:flex; flex-direction:column; gap:20px;
  transition:background .35s var(--ease);
  cursor:pointer;
}
.service:hover{ background:var(--surface); }
.service__num{ color:var(--muted); }
.service__icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:12px;
  color:var(--accent);
  transition:transform .4s var(--ease), border-color .3s var(--ease);
}
.service__icon svg{ width:22px; height:22px; }
.service:hover .service__icon{ transform:rotate(-6deg) scale(1.06); border-color:var(--accent); }
.service h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px,1.85vw,26px);
  letter-spacing:-.02em; line-height:1.15;
  margin:0;
}
.service p{
  color:var(--text-2);
  font-size:14.5px; line-height:1.55;
  margin:0; flex-grow:1;
}
.service__arrow{
  position:absolute; right:28px; top:38px;
  color:var(--muted);
  font-size:20px;
  transform:translate(-6px,6px); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease), color .2s var(--ease);
}
.service:hover .service__arrow{ transform:translate(0,0); opacity:1; color:var(--accent); }

@media (max-width:1000px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services__grid{ grid-template-columns:1fr; } }

/* ───────── Numbers ───────── */
.numbers{
  padding:140px var(--pad);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.numbers__grid{
  max-width:var(--maxw); margin:64px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.stat{
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:36px 28px 28px;
  background:var(--tint);
  transition:transform .35s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.stat:hover{ transform:translateY(-4px); border-color:var(--accent); background:var(--tint-accent); }
.stat__num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(50px,6.4vw,96px);
  line-height:.95; letter-spacing:-.04em;
  color:var(--text);
  margin-bottom:24px;
  background:linear-gradient(180deg, var(--text) 50%, var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat h4{
  margin:0 0 10px;
  font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text);
}
.stat p{ margin:0; color:var(--text-2); font-size:14.5px; }
@media (max-width:1000px){ .numbers__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .numbers__grid{ grid-template-columns:1fr; } }

/* ───────── Work / Portfolio (bento) ───────── */
.work{ padding:140px var(--pad); max-width:var(--maxw); margin:0 auto; }
.work__grid{
  margin-top:64px;
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px;
  grid-auto-flow:dense;
  gap:14px;
}
.tile{
  position:relative;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--tile-bg);
  border:1px solid var(--line);
  transition:transform .5s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .4s var(--ease);
  filter:saturate(.97) brightness(.98);
}
.tile:hover{ border-color:var(--accent); }
.tile:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1); }
.tile__caption{
  position:absolute; left:14px; bottom:14px; right:14px;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 14px;
  background:var(--overlay); backdrop-filter:blur(8px);
  border:1px solid #424245;
  border-radius:10px;
  transform:translateY(8px); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
  color:#F5F5F7;
}
.tile__caption .mono{ color:#86868B; }
.tile:hover .tile__caption{ transform:translateY(0); opacity:1; }
.tile__caption strong{
  font-family:var(--font-display); font-weight:700; font-size:14px;
  letter-spacing:-.01em;
  color:#F5F5F7;
  text-transform:uppercase;
}

.tile--xl{ grid-column:span 2; grid-row:span 2; }
.tile--tall{ grid-row:span 2; }
.tile--wide{ grid-column:span 2; }
.tile--xl img{
  object-fit:contain; padding:5%;
  background:radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, #F5F5F7 60%, #E5E5EA 100%);
}

@media (max-width:1000px){
  .work__grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; }
}
@media (max-width:720px){
  .work__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .tile--xl, .tile--wide{ grid-column:span 2; }
}

/* ───────── Process ───────── */
.process{ padding:140px var(--pad); max-width:var(--maxw); margin:0 auto; }
.process__steps{
  list-style:none; margin:64px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.process__steps li{
  padding:36px 24px 32px;
  border-right:1px solid var(--line);
  position:relative;
  transition:background .3s var(--ease);
}
.process__steps li:last-child{ border-right:none; }
.process__steps li:hover{ background:var(--surface); }
.process__steps li::before{
  content:""; position:absolute; top:-1px; left:0; width:0; height:2px;
  background:var(--accent);
  transition:width .55s var(--ease-out);
}
.process__steps li:hover::before{ width:100%; }
.process__steps h4{
  margin:14px 0 12px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(18px,1.65vw,24px); letter-spacing:-.02em;
  text-transform:uppercase;
}
.process__steps p{ color:var(--text-2); font-size:14px; margin:0; }

@media (max-width:1000px){
  .process__steps{ grid-template-columns:repeat(2,1fr); }
  .process__steps li{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .process__steps li:nth-child(even){ border-right:none; }
}
@media (max-width:560px){
  .process__steps{ grid-template-columns:1fr; }
  .process__steps li{ border-right:none; }
}

/* ───────── Contact ───────── */
.contact{
  padding:140px var(--pad);
  background:
    radial-gradient(1200px 500px at 50% 0%, var(--contact-glow), transparent 70%),
    var(--bg);
  border-top:1px solid var(--line);
}
.contact__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:80px;
  align-items:start;
}
.contact__head h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(36px,5vw,72px);
  line-height:1; letter-spacing:-.03em;
  margin:18px 0 18px;
}
.contact__head h2 em{ color:var(--accent-2); font-weight:500; font-style:italic; }
.contact__head p{ color:var(--text-2); max-width:46ch; }

.contact__form{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin-top:28px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.field span .opt{ font-style:normal; color:var(--muted); opacity:.7; text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:11px; }
.field input, .field textarea{
  width:100%;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  font-family:var(--font-body);
  /* 16px is the iOS Safari zoom threshold — anything smaller and Safari
     zooms the viewport on focus. Keep it exact. */
  font-size:16px;
  outline:none;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  border-color:var(--accent);
  background:var(--surface-2);
}
.contact__submit{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:6px;
}
.contact__direct a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--line-2);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-color .2s var(--ease);
}
.contact__direct a:hover{ text-decoration-color:var(--accent); }

/* Inline thank-you state after a successful submission */
.contact__thanks{
  margin-top:28px;
  padding:36px 32px;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  background:var(--surface);
  display:flex; flex-direction:column; gap:8px;
  animation:thanks-in .5s var(--ease-out);
}
.contact__thanks strong{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em;
  color:var(--text);
}
.contact__thanks p{ margin:0; color:var(--text-2); font-size:15.5px; }
@keyframes thanks-in{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Disabled-state styling for the submit button while sending */
#submitBtn[disabled]{ opacity:.7; cursor:wait; }

.contact__cities{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.contact__cities li{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:24px 26px;
  background:var(--tint);
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.contact__cities li:hover{ border-color:var(--accent); transform:translateX(4px); background:var(--tint-accent); }
.contact__cities h5{
  margin:8px 0 8px;
  font-family:var(--font-display); font-weight:700;
  font-size:28px; letter-spacing:-.025em;
  text-transform:uppercase;
}
.contact__cities p{ margin:0; color:var(--text-2); font-size:14.5px; }

@media (max-width:1000px){
  .contact__inner{ grid-template-columns:1fr; gap:48px; }
}
@media (max-width:560px){
  .contact__form{ grid-template-columns:1fr; }
}

/* ───────── Footer ───────── */
.footer{
  padding:80px var(--pad) 40px;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; gap:28px;
  padding-bottom:60px;
  border-bottom:1px solid var(--line);
}
.footer__brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.footer__wordmark{
  font-family:var(--font-display); font-weight:700;
  font-size:44px; letter-spacing:-.03em; line-height:1; color:var(--text);
  text-transform:uppercase;
}
.footer__sub{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.footer__brand img{
  height:24px; width:auto; margin-top:4px;
  filter:var(--logo-filter); opacity:.6;
  transition:filter .35s var(--ease);
}
.footer__tag{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(24px,3.4vw,44px); line-height:1.15;
  letter-spacing:-.025em; color:var(--text);
  margin:0; max-width:30ch;
  text-transform:uppercase;
}
.footer__bottom{
  max-width:var(--maxw); margin:0 auto;
  padding-top:28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.footer__bottom a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--line-2);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-color .2s var(--ease);
}
.footer__bottom a:hover{ text-decoration-color:var(--accent); }

/* ───────── Reveal animation ───────── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }

.reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); transition-delay:calc(var(--i,0) * 60ms); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; animation-iteration-count:1 !important; }
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; }
}

/* ───────── Theme toggle ───────── */
.theme-toggle{
  position:relative;
  display:inline-flex; align-items:center;
  padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--tint);
  isolation:isolate;
}
.theme-toggle__opt{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  padding:0; border:0;
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  cursor:pointer;
  transition:color .25s var(--ease);
}
.theme-toggle__opt:hover{ color:var(--text-2); }
.theme-toggle__opt[aria-checked="true"]{ color:var(--accent); }
.theme-toggle__pill{
  position:absolute; z-index:1;
  top:3px; left:3px;
  width:28px; height:28px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:0 4px 12px -6px rgba(0,0,0,.4);
  transition:transform .35s var(--ease-out), background .25s var(--ease);
}
:root[data-theme="light"] .theme-toggle__pill{ transform:translateX(28px); }
.theme-toggle__opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ───────── Selection ───────── */
::selection{ background:var(--accent); color:var(--bg); }