/* ═══════════════════════════════════════════════════════════
   Build Theory
   Palette is deliberately two-tone. Gold appears exactly three
   times in the page content, and nowhere else:
     1. the ampersand in the hero wordmark
     2. the word UNFORGETTABLE. in the kinetic manifesto
     3. the email address in the footer
   (The cursor dot is gold by spec — it is chrome, not content.)
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #000000;
  --bone:     #e8e3d9;
  --gold:     #c8a44d;

  --dim:      rgba(232,227,217,.44);
  --dimmer:   rgba(232,227,217,.24);
  --line:     rgba(232,227,217,.13);

  --display:  'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --body:     'EB Garamond', Georgia, serif;
  --util:     'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --pad:      clamp(20px, 4.5vw, 80px);
  --sec:      clamp(96px, 14vh, 190px);
}

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

html{ background:var(--ink); }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(17px,1.12vw,20px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,canvas{ display:block; max-width:100%; }

::selection{ background:var(--bone); color:var(--ink); }

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:4px;
}

/* ── shared type ──────────────────────────────────────────── */

.label{
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  display:block;
}

.sec__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:0 var(--pad);
  margin-bottom:clamp(40px,6vw,84px);
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
}

.sec__note{
  margin:0;
  font-size:clamp(20px,2vw,30px);
  font-style:italic;
  color:var(--bone);
}

/* ── grain + cursor ───────────────────────────────────────── */

.grain{
  position:fixed; inset:-50%;
  z-index:60;
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(1) infinite;
}
@keyframes grainshift{
  0%  { transform:translate(0,0); }
  25% { transform:translate(-2%,1%); }
  50% { transform:translate(1%,-2%); }
  75% { transform:translate(-1%,-1%); }
}

.cursor{
  position:fixed; top:0; left:0;
  z-index:80;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
}
.cursor.is-on{ opacity:1; }

.cursor__dot,
.cursor__ring{
  position:absolute;
  top:0; left:0;
  border-radius:50%;
  will-change:transform;
}
.cursor__dot{
  width:6px; height:6px;
  margin:-3px 0 0 -3px;
  background:var(--gold);
}
.cursor__ring{
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border:1px solid rgba(200,164,77,.5);
  transition:width .3s, height .3s, margin .3s, border-color .3s;
}
.cursor.is-big .cursor__ring{
  width:64px; height:64px;
  margin:-32px 0 0 -32px;
  border-color:rgba(200,164,77,.9);
}

@media (hover:none), (pointer:coarse){
  .cursor{ display:none; }
}

/* ── nav ──────────────────────────────────────────────────── */

.skip{
  position:absolute;
  left:-9999px;
  z-index:100;
  padding:12px 18px;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--util);
  font-size:12px;
}
.skip:focus{ left:12px; top:12px; }

.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:clamp(16px,2.6vw,44px);
  padding:16px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
}
.nav.is-stuck{
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
/* inner pages sit on flat black, so the bar is solid immediately */
body:not(.is-home) .nav{
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}

/* the drawn logo. it carries its own transparent margin, so the box is
   sized on height and the width follows the file's 1688×414 ratio */
.nav__mark{
  display:block;
  flex:0 0 auto;
  line-height:0;
}
.nav__logo{
  height:clamp(30px,3.4vw,42px);
  width:auto;
  max-width:52vw;      /* never crowds the burger on a narrow phone */
  opacity:.96;
  transition:opacity .3s;
}
.nav__mark:hover .nav__logo{ opacity:1; }

.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.9vw,30px);
  margin-left:auto;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.nav__links > a,
.nav__parent{
  position:relative;
  padding:6px 0;
  color:var(--dim);
  white-space:nowrap;
  transition:color .3s;
}
.nav__links > a:hover,
.nav__parent:hover,
.nav__links > a.is-here,
.nav__parent.is-here{ color:var(--bone); }

.nav__links > a::after,
.nav__parent::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.nav__links > a:hover::after,
.nav__parent:hover::after,
.nav__links > a.is-here::after,
.nav__parent.is-here::after{ transform:scaleX(1); }

/* ── services dropdown ────────────────────────────────────── */

.nav__group{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
}
.nav__caret{
  width:13px; height:13px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  position:relative;
}
.nav__caret::before{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:6px; height:6px;
  border-right:1.5px solid var(--dim);
  border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg);
  transition:transform .35s, border-color .3s;
}
.nav__group:hover .nav__caret::before,
.nav__group.is-open .nav__caret::before{ border-color:var(--bone); }
.nav__group.is-open .nav__caret::before{ transform:rotate(225deg) translate(-2px,-2px); }

.nav__menu{
  position:absolute;
  top:100%; left:-20px;
  margin-top:14px;
  min-width:268px;
  display:grid;
  padding:10px;
  background:#070707;
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(0,0,0,.9);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .32s, transform .32s, visibility .32s;
}
/* a hit-area bridge so the pointer can cross the gap */
.nav__menu::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-16px;
  height:16px;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__group.is-open .nav__menu{
  opacity:1;
  visibility:visible;
  transform:none;
}
.nav__menu a{
  padding:10px 12px;
  color:var(--dim);
  letter-spacing:.14em;
  transition:color .25s, background .25s, padding-left .25s;
}
.nav__menu a:hover,
.nav__menu a.is-here{
  color:var(--bone);
  background:rgba(232,227,217,.06);
  padding-left:18px;
}
.nav__menu-all{
  color:var(--bone) !important;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
}

.nav__cta{
  padding:11px 20px;
  border:1px solid var(--line);
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .35s, color .35s, border-color .35s;
}
.nav__cta:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }

/* ── burger + mobile menu ─────────────────────────────────── */

.burger{
  display:none;
  margin-left:auto;
  width:40px; height:32px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute;
  left:8px; right:8px;
  height:1.5px;
  background:var(--bone);
  transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.burger span:nth-child(1){ top:12px; }
.burger span:nth-child(2){ top:19px; }
.burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobilemenu{
  position:fixed;
  inset:0;
  z-index:45;
  padding:96px var(--pad) 40px;
  background:var(--ink);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.mobilemenu[hidden]{ display:none; }
.mobilemenu nav{ display:grid; }
.mobilemenu nav > a{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--display);
  font-size:clamp(22px,6vw,34px);
  letter-spacing:-.02em;
}
.mobilemenu__sub{
  display:grid;
  padding:10px 0 14px 16px;
  border-bottom:1px solid var(--line);
}
.mobilemenu__sub a{
  padding:9px 0;
  font-family:var(--util);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}
.mobilemenu__cta{
  margin-top:28px;
  padding:18px;
  text-align:center;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--util);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}

@media (max-width:1100px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:block; }
}
@media (min-width:1101px){
  .mobilemenu{ display:none !important; }
}

/* ═══ 1. HERO ═════════════════════════════════════════════ */

.hero{
  position:relative;
  height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero__media{
  position:absolute; inset:0;
  z-index:0;
}
.hero__media .slot__video,
.hero__media .slot__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__veil{
  position:absolute; inset:0;
  opacity:.8;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 0%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.9) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 26%, transparent 62%, rgba(0,0,0,.85) 100%);
}

.hero__inner{
  position:relative;
  z-index:2;
  padding:0 var(--pad);
}

.wordmark{
  margin:0;
  font-family:var(--display);
  font-size:clamp(64px,19vw,340px);   /* JS refits to exactly 80vw */
  line-height:.78;
  letter-spacing:-.035em;
  white-space:nowrap;
  text-align:center;
}
.wordmark .amp{ color:var(--gold); }      /* ◆ GOLD 1 of 3 */

.hero__line{
  margin:clamp(20px,3vh,38px) auto 0;
  max-width:62ch;
  text-align:center;
  font-size:clamp(17px,1.5vw,25px);
  font-style:italic;
  color:var(--bone);
  min-height:2.6em;
}
.caret{
  display:inline-block;
  width:2px; height:1em;
  margin-left:3px;
  background:var(--bone);
  vertical-align:-.12em;
  animation:blink 1.05s steps(1) infinite;
}
.caret.is-done{ animation:none; opacity:0; }
@keyframes blink{ 50%{ opacity:0; } }

.hero__foot{
  position:absolute;
  left:var(--pad); right:var(--pad); bottom:26px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.hero__cue{ animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:.44 } 50%{ transform:translateY(6px); opacity:1 } }

/* ═══ 2. KINETIC MANIFESTO ════════════════════════════════ */

.kinetic{
  position:relative;
  height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-top:1px solid var(--line);
}

.kinetic__stage{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}

/* Each word fills the stage and centres its own text, so a long
   word can never push a short one off-centre. JS fits the size. */
.kinetic__word{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:clamp(40px,9vw,190px);   /* JS refits each word to 86vw */
  line-height:.9;
  letter-spacing:-.04em;
  text-align:center;
  white-space:nowrap;
  opacity:0;
  will-change:transform,opacity,filter;
}
.kinetic__word.is-gold{ color:var(--gold); }   /* ◆ GOLD 2 of 3 */

.kinetic__ticks{
  position:absolute;
  bottom:38px; left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}
.kinetic__ticks i{
  width:34px; height:2px;
  background:var(--dimmer);
  transition:background .4s;
}
.kinetic__ticks i.is-on{ background:var(--bone); }

/* ═══ 3. WORK ═════════════════════════════════════════════ */

.work{ padding:var(--sec) 0; }

.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4vw,72px) clamp(20px,3vw,48px);
  padding:0 var(--pad);
}

.case{ position:relative; }

.case__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#050505;
  border:1px solid var(--line);
}
.case__media .slot__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .6s, transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.strip{ position:absolute; inset:0; }

.case__media .strip{
  opacity:0;
  transform:scale(1.06);
  transition:opacity .6s, transform 1.2s cubic-bezier(.2,.8,.2,1);
}

/* The plate carries the project's mark and sits over the media
   until you hover, when it lifts to reveal the reel behind. */
.case__plate{
  position:absolute; inset:0;
  z-index:2;
  background:var(--ink);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1);
}

/* The reveal is pure CSS, so it works with or without JS.
   .is-live is added on hover AND on keyboard focus, and is what
   starts/stops the video. */
.case:hover .case__plate,
.case.is-live .case__plate{ opacity:0; }

.case:hover .case__media .slot__video,
.case:hover .case__media .strip,
.case.is-live .case__media .slot__video,
.case.is-live .case__media .strip{
  opacity:1;
  transform:scale(1);
}

/* index tag, sits above the plate */
.case__media::before{
  content:attr(data-tag);
  position:absolute;
  left:14px; top:12px;
  z-index:3;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--dim);
  transition:color .5s;
}
.case:hover .case__media::before,
.case.is-live .case__media::before{ color:var(--bone); }

/* ── project visual: geometric mark, or real photography ──── */

.pvisual{
  position:absolute; inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:24px;
  color:var(--bone);
  background:radial-gradient(125% 100% at 50% 0%, #121212 0%, #000 72%);
}
.pvisual svg{
  width:clamp(72px,15vw,148px);
  height:auto;
  opacity:.92;
}
.pvisual__sector{
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
  text-align:center;
  padding:0 24px;
}
.pvisual__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

.case__body{ padding-top:20px; }

.case__name{
  margin:0 0 10px;
  font-family:var(--display);
  font-size:clamp(26px,3.4vw,52px);
  line-height:1;
  letter-spacing:-.03em;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.case:hover .case__name,
.case.is-live .case__name{ transform:translateX(12px); }

.case__desc{
  margin:0 0 16px;
  max-width:46ch;
  color:var(--bone);
}

.case__meta{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}

/* fallback poster strip — a sideways gallery dolly built in DOM.
   Replaced automatically the moment clip 2 is dropped in. */
.strip__track{
  position:absolute;
  top:0; left:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:26px;
  padding:0 26px;
  animation:dolly 26s linear infinite;
}
/* Explicit width: aspect-ratio does not resolve on a flex item
   whose basis is auto, which left every panel content-sized. */
.strip__panel{
  flex:0 0 auto;
  width:clamp(88px,11vw,200px);
  height:76%;
  display:grid;
  place-items:center;
  /* fixed, not %: percentage padding on a flex item resolves
     against the track's full scroll width, not the panel */
  padding:18px 14px;
  background:#161616;
  border:1px solid rgba(232,227,217,.2);
  box-shadow:0 0 60px rgba(0,0,0,.9);
}
.strip__panel span{
  width:100%;
  font-family:var(--display);
  font-size:clamp(11px,1.5vw,26px);
  line-height:.92;
  letter-spacing:-.03em;
  text-align:center;
  color:var(--bone);
}
.strip__panel.is-inv{ background:var(--bone); }
.strip__panel.is-inv span{ color:var(--ink); }
.strip::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(95% 75% at 50% 50%, transparent 30%, rgba(0,0,0,.6) 100%);
}
@keyframes dolly{ to{ transform:translateX(-50%); } }

@media (max-width:860px){
  .grid{ grid-template-columns:1fr; }
}

/* No hover on touch, so the reveal is simply always open there. */
@media (hover:none), (pointer:coarse){
  .case__media .slot__video,
  .case__media .strip{ opacity:1; transform:none; }
  .case__media::before{ color:var(--bone); }
}

/* ═══ 4. SERVICES ═════════════════════════════════════════ */

.services{ padding:var(--sec) 0; }

.svc{ margin:0; padding:0 var(--pad); }

.svc__row{
  display:grid;
  grid-template-columns:minmax(230px,.9fr) 1.6fr auto;
  gap:clamp(16px,4vw,72px);
  align-items:start;
  padding:clamp(22px,3vw,40px) 0;
  border-top:1px solid var(--line);
}
.svc__row:last-child{ border-bottom:1px solid var(--line); }

.svc__name{
  margin:0;
  font-family:var(--display);
  font-size:clamp(22px,2.7vw,42px);
  line-height:1.02;
  letter-spacing:-.03em;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.svc__row:hover .svc__name{ transform:translateX(14px); }

.svc__name a{ color:inherit; }

.svc__desc{
  margin:0;
  max-width:58ch;
  color:var(--dim);
  transition:color .5s;
}
.svc__row:hover .svc__desc{ color:var(--bone); }

.svc__go{
  margin:0;
  align-self:center;
  font-size:24px;
  color:var(--dimmer);
  transition:color .4s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.svc__row:hover .svc__go{ color:var(--bone); transform:translateX(8px); }

.case__link{ display:block; color:inherit; }

@media (max-width:760px){
  .svc__row{ grid-template-columns:1fr auto; }
  .svc__desc{ grid-column:1 / -1; }
}

/* ═══ 5. STUDIO ═══════════════════════════════════════════ */

.studio{
  position:relative;
  overflow:hidden;
  min-height:96vh;
  display:flex;
  align-items:center;
  padding:clamp(110px,16vh,200px) var(--pad);
  border-top:1px solid var(--line);
}

.studio__media{ position:absolute; inset:0; z-index:0; }
.studio__media .slot__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.studio__veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.82) 40%, rgba(0,0,0,.3) 100%);
}

/* fallback: city bokeh + silhouettes, stands in for clip 3 */
.bokeh{ position:absolute; inset:0; background:#050608; }
.bokeh i{
  position:absolute;
  border-radius:50%;
  background:rgba(232,227,217,.5);
  filter:blur(var(--b));
  animation:drift var(--d) ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate(var(--tx), var(--ty)); } }
.bokeh::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:44%;
  background:linear-gradient(to top, #000 26%, transparent 100%);
}

.studio__inner{
  position:relative;
  z-index:2;
  max-width:620px;
}
.studio__head{
  margin:16px 0 26px;
  font-family:var(--display);
  font-size:clamp(38px,5.6vw,86px);
  line-height:.95;
  letter-spacing:-.035em;
}
.studio__copy{
  margin:0 0 18px;
  color:rgba(232,227,217,.8);
}
.studio__stats{
  margin:38px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,4vw,56px);
  border-top:1px solid var(--line);
  padding-top:24px;
}
.studio__stats b{
  display:block;
  font-family:var(--display);
  font-size:clamp(28px,3.4vw,48px);
  line-height:1;
  font-weight:400;
}
.studio__stats span{
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}

/* ═══ 6. FOOTER ═══════════════════════════════════════════ */

.foot{
  padding:clamp(90px,13vh,170px) var(--pad) 30px;
  border-top:1px solid var(--line);
}

.foot__cry{
  margin:0 0 clamp(56px,8vw,110px);
  font-family:var(--display);
  font-size:clamp(40px,8.2vw,150px);
  line-height:.9;
  letter-spacing:-.04em;
}

.foot__start{
  display:inline-block;
  margin-bottom:clamp(56px,8vw,100px);
  padding:18px 34px;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--util);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.foot__start:hover{ transform:translateX(10px); }

.foot__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr .9fr;
  gap:clamp(28px,4vw,54px);
  padding-bottom:clamp(48px,7vw,90px);
  border-bottom:1px solid var(--line);
}
.foot__col .label{ margin-bottom:14px; }

/* the address is 24 characters long, so it is sized to stay on one line
   in the narrowest column it ever occupies rather than sized for effect
   and then broken in half */
.foot__mail{
  display:inline-block;
  max-width:100%;
  font-family:var(--display);
  font-size:clamp(15px,1.35vw,20px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--gold);                       /* ◆ GOLD 3 of 3 */
  white-space:nowrap;
  overflow-wrap:normal;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .5s cubic-bezier(.2,.8,.2,1);
}
.foot__mail:hover{ background-size:100% 1px; }

.foot__addr{ margin:0; color:var(--dim); }

.foot__addr a{ color:var(--dim); transition:color .3s; }
.foot__addr a:hover{ color:var(--bone); }

.foot__list{
  margin:0; padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.foot__list a{
  color:var(--dim);
  transition:color .35s, padding-left .35s;
}
.foot__list a:hover{ color:var(--bone); padding-left:8px; }

.foot__base{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-top:24px;
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dimmer);
}

@media (max-width:980px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .foot__grid{ grid-template-columns:1fr; }
}

/* ── shared button ────────────────────────────────────────── */

.btn{
  display:inline-block;
  padding:16px 32px;
  border:1px solid var(--line);
  font-family:var(--util);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone);
  cursor:pointer;
  background:none;
  transition:background .4s, color .4s, border-color .4s;
}
.btn:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn--gold{ border-color:rgba(200,164,77,.55); }
.btn--gold:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn--wide{ width:100%; text-align:center; }

.sec__more{ padding:clamp(34px,5vw,60px) var(--pad) 0; }
.studio__inner .sec__more{ padding:34px 0 0; }

/* ═══ MOBILE ══════════════════════════════════════════════
   Everything above is fluid already. What follows fixes the
   two things fluid type cannot fix on a phone: controls that
   are too small to hit with a thumb, and rows that only make
   sense side by side.
   ═══════════════════════════════════════════════════════════ */

/* ── touch targets ────────────────────────────────────────
   44px is the smallest reliably tappable box. These elements
   are all smaller than that at their drawn size, so the extra
   height is bought with padding and negative margin, leaving
   the visual rhythm exactly where it was. */

@media (hover:none), (pointer:coarse){
  .nav__mark{ padding:7px 0; }

  .burger{ width:44px; height:44px; }
  .burger span{ left:10px; right:10px; }
  .burger span:nth-child(1){ top:18px; }
  .burger span:nth-child(2){ top:25px; }
  .burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

  .foot__list{ gap:0; }
  .foot__list a{ display:inline-block; padding:10px 0; }
  .foot__addr a{ display:inline-block; padding:9px 0; }

  .foot__mail{
    padding:12px 0;
    /* the underline sweep is drawn on the background, so it has to be
       pushed back down by exactly the padding that was just added */
    background-position:0 calc(100% - 12px);
  }

  .mobilemenu nav > a{ padding:18px 0; }
  .mobilemenu__sub a{ padding:12px 0; }
}

/* ── phones ───────────────────────────────────────────────── */

@media (max-width:640px){
  /* the two footer labels are too long to share a line at this width */
  .hero__foot{
    align-items:flex-end;
    gap:14px;
    bottom:20px;
  }
  .hero__foot .label{ font-size:10px; letter-spacing:.16em; }
  .hero__cue{ flex:0 0 auto; }

  .sec__head{ gap:10px; }

  /* three stats across is unreadable at this width, two is not */
  .studio__stats{ gap:22px 30px; }
  .studio__stats li{ flex:0 0 calc(50% - 15px); }

  .foot__base{ gap:8px; }
}

@media (max-width:420px){
  .case__meta{ gap:6px 14px; }
  .foot__start{ padding:16px 26px; letter-spacing:.16em; }
  .btn{ padding:15px 24px; letter-spacing:.16em; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .kinetic__word{ opacity:1; }
  .kinetic{ height:auto; padding:var(--sec) var(--pad); }
  .kinetic__stage{ display:block; }
  .kinetic__word{ white-space:normal; margin-bottom:.2em; }
}