/* ============================================================
   Five Elements Studio — scroll-driven interior walkthrough
   Design tokens + page styles.
   ============================================================ */

:root{
  /* colour */
  --paper:#F5F1EA;
  --ink:#1C1A17;
  --sand:#EDE7DD;
  --stone-text:#6E675C;
  --muted:#8B8478;
  --clay:#9B5C3B;
  --brass:#C9A15F;
  --error:#C4553C;
  --error-msg:#E0A08C;
  --hair-dark:rgba(28,26,23,.10);
  --hair-dark-soft:rgba(28,26,23,.07);
  --hair-light:rgba(245,241,234,.16);
  --hair-light-strong:rgba(245,241,234,.30);

  /* type */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --script:"Parisienne","Apple Chancery","Segoe Script",cursive;

  /* rhythm */
  --gutter:44px;
  --section-y:120px;

  /* motion */
  --t-rail:.4s;
  --t-cta:.45s cubic-bezier(.4,0,.2,1);
  --t-copy:.5s ease;
  --t-stage:.55s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
/* <picture> only exists to offer WebP; it must not become a layout box,
   or the img's height:100% would resolve against an inline parent */
picture{display:contents}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:300;font-family:var(--display)}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brass);color:var(--ink)}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:0}

/* The designer's name is set as a signature, not as tracked caps. A script
   needs more size and no tracking to stay legible, so it opts out of both. */
.script{
  font-family:var(--script);
  text-transform:none;
  letter-spacing:.01em;
  font-size:1.85em;
  line-height:1;
  color:var(--clay);
  filter:drop-shadow(0 0 4px rgba(155,92,59,.30));
}

/* A warm highlight travels through the letters. Gated on background-clip:text —
   without the guard an unsupporting browser would paint the name transparent
   and the signature would vanish entirely. The gradient uses currentColor, so
   each instance keeps its own ink and only the highlight is shared. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .script{
    background-image:linear-gradient(100deg,
      currentColor 0%, currentColor 42%,
      #FFF1D6 50%,
      currentColor 58%, currentColor 100%);
    /* GEOMETRY IS LOAD-BEARING — do not widen the size or push the position
       outside 0–100%. The text is clipped to this background, so any part of
       the box the background does not reach renders TRANSPARENT and those
       letters vanish. At size 200%, position P resolves to an offset of
       P × -100%, so the image spans (P-100%) … (P+100%) — which covers the
       whole box for every P in 0–100%, and only for that range.
       A previous 220%/120% pair left the last ~24% uncovered and silently
       ate the end of the name. */
    background-size:200% 100%;
    background-position:100% 0;
    background-repeat:repeat-x;   /* belt and braces: never leave bare box */
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:signatureSheen 7s cubic-bezier(.45,0,.2,1) infinite;
  }
}
@keyframes signatureSheen{
  0%,68%   {background-position:100% 0}
  100%     {background-position:0% 0}
}

.u-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
}
.u-eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}

/* ============================================================ 1. NAV */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gutter);
  background:rgba(245,241,234,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-dark-soft);
}
/* anchored sections clear the fixed nav */
#walkthrough,#approach,#enquire,#top{scroll-margin-top:66px}

.wordmark{display:flex;align-items:center;gap:13px;white-space:nowrap}

/* The mark sits in a round wrapper so a pseudo-element can carry the light
   sweep — an <img> cannot host one itself. */
.wordmark-mark{
  position:relative;flex:none;
  width:36px;height:36px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(28,26,23,.05), 0 1px 8px rgba(201,161,95,.28);
  transition:box-shadow .45s ease,transform .45s ease;
}
/* a glint that crosses the mark occasionally, idle most of the cycle */
.wordmark-mark::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,.70) 48%,
    rgba(255,255,255,.22) 55%,
    transparent 64%);
  transform:translateX(-130%);
  animation:markSheen 9s cubic-bezier(.45,0,.2,1) infinite;
}
.wordmark:hover .wordmark-mark{
  transform:scale(1.05);
  box-shadow:0 0 0 1px rgba(28,26,23,.06), 0 2px 14px rgba(201,161,95,.55);
}
@keyframes markSheen{
  0%,74%   {transform:translateX(-130%)}
  92%,100% {transform:translateX(130%)}
}

/* the mark is clipped round so any square artwork drops straight in */
.wordmark-logo{
  display:block;width:100%;height:100%;
  object-fit:cover;background:var(--paper);
}
.wordmark-text{display:flex;align-items:baseline;gap:10px;min-width:0}
.wordmark b{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.16em;text-transform:uppercase}
.wordmark i{font-style:normal;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.nav-right{display:flex;align-items:center;gap:34px}
.nav-links{display:flex;gap:28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-text)}
.nav-links a{transition:color .25s ease}
.nav-links a:hover{color:var(--ink)}
.btn-outline{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:11px 20px;border:1px solid var(--ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-outline .short{display:none}

/* ============================================================ 2. HERO */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* Two layers: the spec's vertical scrim, plus the same left-hand scrim the
   walkthrough uses. The vertical one alone was tuned for a dark placeholder and
   leaves the eyebrow and lede under-contrasted on a bright photograph. */
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(28,26,23,.62) 0%,rgba(28,26,23,.30) 42%,rgba(28,26,23,0) 72%),
    linear-gradient(180deg,rgba(28,26,23,.58) 0%,rgba(28,26,23,.20) 34%,rgba(28,26,23,.16) 56%,rgba(28,26,23,.78) 100%);
}
.hero-inner{
  position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;
  padding:150px var(--gutter) 44px;color:var(--paper);
}
.hero-copy{align-self:center;max-width:1000px;animation:rise 1s ease both}
/* brass on a bright window needs help the scrim alone cannot give */
.hero-copy .u-eyebrow{color:var(--brass);margin-bottom:30px;text-shadow:0 1px 6px rgba(28,26,23,.85)}
.hero-cue,.hero-meta{text-shadow:0 1px 5px rgba(28,26,23,.7)}
.hero h1{
  font-size:clamp(50px,7.4vw,124px);line-height:.98;letter-spacing:-.025em;
  margin:0 0 28px;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero-lede{font-size:17px;line-height:1.7;color:rgba(245,241,234,.78);max-width:46ch;text-wrap:pretty}
.hero-rail{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  border-top:1px solid rgba(245,241,234,.2);padding-top:22px;
}
.hero-cue{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.hero-cue span:first-child{animation:cue 2.2s ease-in-out infinite}
.hero-meta{display:flex;gap:44px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,234,.6);list-style:none;margin:0;padding:0}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(9px);opacity:1}}

/* ============================================================ 3. CREDENTIALS */
.creds{
  display:grid;grid-template-columns:repeat(3,1fr);margin:0;
  border-top:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark);
}
.creds > div{padding:30px var(--gutter);border-right:1px solid var(--hair-dark)}
.creds > div:last-child{border-right:0}
.creds dt{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1}
.creds dd{margin:6px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ============================================================ 4. WALKTHROUGH */
.walk{position:relative;background:var(--sand)}   /* height is set by app.js */
.pin{position:sticky;top:0;height:100vh;overflow:hidden}

.stage-stack{position:absolute;inset:0}
.stage{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity var(--t-stage)}
.stage[data-active]{opacity:1;z-index:2}
.layer{position:absolute;inset:0}
.layer img{width:100%;height:100%;object-fit:cover}
.layer--done{will-change:clip-path}
.grade{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none}
.grade--cool{background:linear-gradient(160deg,rgba(104,116,128,.34),rgba(70,78,86,.42))}
.grade--warm{background:linear-gradient(160deg,rgba(201,161,95,.26),rgba(155,92,59,.2))}
.tag{
  position:absolute;right:26px;top:118px;
  display:flex;align-items:center;gap:10px;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.tag::before{content:"";width:18px;height:1px;background:currentColor}

.seam{
  position:absolute;top:0;bottom:0;left:0;width:2px;z-index:5;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(201,161,95,0),var(--brass) 22%,var(--brass) 78%,rgba(201,161,95,0));
}
.walk-scrim{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,rgba(28,26,23,.74) 0%,rgba(28,26,23,.44) 34%,rgba(28,26,23,0) 62%);
}

.copy-well{
  position:absolute;left:var(--gutter);top:0;bottom:0;z-index:4;
  width:min(430px,38vw);display:flex;align-items:center;pointer-events:none;
}
.copy-track{position:relative;width:100%;height:360px}
.copy{
  position:absolute;inset:0;color:var(--paper);
  opacity:0;transform:translateY(18px);
  transition:opacity var(--t-copy),transform var(--t-copy);
}
.copy[data-active]{opacity:1;transform:none}
.copy-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;color:var(--brass)}
.copy-head b{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.1em}
.copy-head span{font-size:10px;letter-spacing:.28em;text-transform:uppercase}
/* the element is the identity; the style tag rides behind it */
.copy-head .style{color:rgba(245,241,234,.5)}
.copy-head .style::before{content:"·";margin-right:14px;color:rgba(245,241,234,.3)}
.copy h2{font-size:clamp(34px,4vw,56px);line-height:1.06;margin:0 0 18px}
.copy p{font-size:15.5px;line-height:1.75;color:rgba(245,241,234,.78);margin:0 0 26px;max-width:38ch;text-wrap:pretty}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{
  padding:7px 13px;border:1px solid var(--hair-light-strong);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,234,.82);
}

.rail{
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:20px;list-style:none;margin:0;padding:0;
}
.rail li{display:flex;opacity:.4;transition:opacity var(--t-rail)}
.rail li[data-active]{opacity:1}
.rail li:hover,.rail li:focus-within{opacity:1}
/* each row jumps to its room */
.rail button{
  display:flex;align-items:center;gap:12px;padding:4px 0 4px 6px;
  transition:gap .25s ease;
}
.rail button:hover{gap:16px}
.rail span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 4px rgba(28,26,23,.75)}
.rail i{display:block;width:2px;height:34px;background:rgba(245,241,234,.28);flex:none}
.rail b{display:block;width:100%;height:0;background:var(--brass)}

.counter{
  /* sits 34px clear of the sticky CTA bar, which owns the bottom edge */
  position:absolute;left:var(--gutter);bottom:90px;z-index:4;
  display:flex;align-items:baseline;gap:8px;color:rgba(245,241,234,.72);
  text-shadow:0 1px 4px rgba(28,26,23,.75);
}
.counter b{font-family:var(--display);font-weight:400;font-size:17px;color:var(--paper)}
.counter span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}

/* ============================================================ 5. APPROACH */
.approach{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;
  padding:var(--section-y) var(--gutter) 110px;max-width:1500px;margin:0 auto;
}
.approach .u-eyebrow{color:var(--clay);margin-bottom:22px}
.approach h2{font-size:clamp(32px,3.6vw,50px);line-height:1.1;text-wrap:balance}
.steps{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(28,26,23,.12);border:1px solid rgba(28,26,23,.12);
}
.steps > div{background:var(--paper);padding:34px 30px}
.steps em{font-family:var(--display);font-style:normal;font-size:13px;color:var(--clay)}
.steps h3{font-family:var(--ui);font-size:15px;font-weight:500;margin:10px 0}
.steps p{font-size:14px;line-height:1.7;color:var(--stone-text)}

/* ============================================================ 6. ENQUIRY */
.enquire{background:var(--ink);color:var(--paper);padding:110px var(--gutter) 120px}
.enquire-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;max-width:1400px;margin:0 auto}
.enquire .u-eyebrow{color:var(--brass);margin-bottom:26px}
.enquire h2{font-size:clamp(34px,4vw,58px);line-height:1.06;margin-bottom:22px}
.enquire h2 em{font-style:italic;color:var(--brass)}
.enquire-lede{font-size:15.5px;line-height:1.75;color:rgba(245,241,234,.66);max-width:42ch}
.contact{margin-top:40px;padding-top:26px;border-top:1px solid var(--hair-light);display:grid;gap:14px}
.contact p{font-size:13.5px;line-height:1.7;color:rgba(245,241,234,.6)}
.contact a:hover{color:var(--brass)}

.card{border:1px solid var(--hair-light);padding:42px 40px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--wide{grid-column:1/-1}
.field label,.legend{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,234,.55);
}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--paper);
  background:transparent;border:0;border-bottom:1px solid rgba(245,241,234,.28);
  border-radius:0;padding:8px 0;outline:none;width:100%;
  transition:border-color .25s ease;
}
.field textarea{resize:vertical;min-height:76px;line-height:1.6}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:22px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(245,241,234,.55) 50%),linear-gradient(135deg,rgba(245,241,234,.55) 50%,transparent 50%);
  background-position:calc(100% - 9px) 18px,calc(100% - 5px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--ink);color:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--brass)}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,241,234,.3)}
.field[data-invalid] input,.field[data-invalid] select{border-bottom-color:var(--error)}
.field-error{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--error-msg);display:none}
.field[data-invalid] .field-error{display:block}

fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 15px;border:1px solid rgba(245,241,234,.28);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,234,.8);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.chip:hover{border-color:var(--brass)}
.chip[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass)}

.form-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:34px;
}
.note{font-size:12px;line-height:1.6;color:rgba(245,241,234,.45);max-width:44ch}
.note[data-state="error"]{color:var(--error-msg)}
.note[data-state="busy"]{color:var(--brass)}
.btn-solid{
  background:var(--brass);color:var(--ink);padding:16px 34px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s ease,opacity .25s ease;
}
.btn-solid:hover{background:var(--paper)}
.btn-solid[disabled]{opacity:.55;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.thanks[hidden]{display:none}
.thanks b{font-family:var(--display);font-size:15px;color:var(--brass)}
.thanks h3{font-size:38px;line-height:1.1;margin:16px 0}
.thanks p{font-size:15px;line-height:1.75;color:rgba(245,241,234,.7);max-width:46ch}
.thanks p strong{color:var(--brass);font-weight:400;letter-spacing:.06em}
.btn-ghost{
  margin-top:32px;padding:14px 26px;border:1px solid var(--hair-light-strong);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .25s ease,color .25s ease;
}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}

/* ============================================================ 7. FOOTER */
/* brass on ink carries a glow far better than clay on paper */
.foot .script{
  color:var(--brass);font-size:1.7em;
  filter:drop-shadow(0 0 6px rgba(201,161,95,.55));
}
.foot{
  background:var(--ink);color:rgba(245,241,234,.4);
  border-top:1px solid rgba(245,241,234,.1);
  padding:30px var(--gutter) 46px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}

/* ============================================================ STICKY CTA */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gutter);
  background:var(--ink);border-top:1px solid rgba(245,241,234,.12);
  transform:translateY(110%);transition:transform var(--t-cta);
}
.cta-bar[data-shown]{transform:none}
.cta-left{display:flex;align-items:baseline;gap:16px;min-width:0}
.cta-left b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--brass);flex:none}
.cta-left p{
  font-size:13.5px;color:rgba(245,241,234,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cta-left .short{display:none}
.cta-bar .btn-solid{flex:none;padding:13px 26px;font-size:11px}

/* ============================================================ RESPONSIVE */
@media (max-width:1180px){
  :root{--gutter:32px;--section-y:96px}
  .hero-meta{gap:24px}
  .approach{gap:44px}
  /* the mark plus the credit plus the links no longer fit on one line —
     the credit gives way here and is carried by the footer instead */
  .wordmark i{display:none}
}

@media (max-width:900px){
  :root{--gutter:22px;--section-y:76px}

  .nav{padding:14px var(--gutter)}
  .nav-links{display:none}
  .wordmark b{font-size:17px}
  .wordmark-mark{width:30px;height:30px}
  .wordmark{gap:10px}
  .btn-outline{padding:9px 14px;font-size:10px}

  .hero{height:auto;min-height:0;padding-top:58px;overflow:visible}
  .hero-media{position:relative;height:56vh;min-height:300px}
  .hero-scrim{background:linear-gradient(180deg,rgba(28,26,23,.5),rgba(28,26,23,.18) 58%,rgba(28,26,23,.6))}
  .hero-inner{position:static;display:block;padding:34px var(--gutter);background:var(--ink)}
  .hero h1{font-size:clamp(38px,9.6vw,58px);margin-bottom:20px}
  .hero-lede{font-size:15.5px;max-width:none}
  .hero-rail{margin-top:30px}
  .hero-meta{flex-direction:column;gap:6px;text-align:right}

  .creds{grid-template-columns:1fr}
  .creds > div{border-right:0;border-bottom:1px solid var(--hair-dark);padding:22px var(--gutter)}
  .creds > div:last-child{border-bottom:0}

  /* copy panel drops to the bottom over a solid scrim; the rail goes away */
  .rail{display:none}
  .walk-scrim{background:linear-gradient(180deg,rgba(28,26,23,.30) 0%,rgba(28,26,23,.10) 30%,rgba(28,26,23,.86) 70%,rgba(28,26,23,.96) 100%)}
  .copy-well{left:0;right:0;top:auto;bottom:0;width:auto;align-items:flex-end;padding:0 var(--gutter) 112px}
  .copy-track{height:auto;min-height:262px}
  .copy h2{font-size:clamp(28px,7.4vw,38px);margin-bottom:12px}
  .copy p{font-size:14.5px;line-height:1.65;margin-bottom:16px;max-width:none}
  .chips li{padding:6px 10px;font-size:9px}
  .counter{bottom:68px}
  .tag{right:16px;top:72px}

  .approach{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr}

  .enquire{padding:76px var(--gutter) 90px}
  .enquire-grid{grid-template-columns:1fr;gap:44px}
  .card{padding:28px 22px}
  .fields{grid-template-columns:1fr}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn-solid{width:100%}

  .foot{flex-direction:column;gap:8px}

  .cta-bar{padding:12px var(--gutter)}
  .cta-left .long{display:none}
  .cta-left .short{display:block}
  .cta-bar .btn-solid{padding:15px 18px;font-size:10px}
  .wordmark{padding:7px 0}
}

@media (max-width:520px){
  /* the nav has to stay one line: drop the sub-label, shorten the CTA */
  .wordmark i{display:none}
  .wordmark b{font-size:15px;letter-spacing:.13em}
  .wordmark-mark{width:30px;height:30px}
  .wordmark{gap:9px}
  .btn-outline{padding:14px 13px;font-size:9.5px;white-space:nowrap}
  .btn-outline .long{display:none}
  .btn-outline .short{display:inline}

  .hero-rail{flex-direction:column;align-items:flex-start;gap:16px}
  .hero-meta{text-align:left}
  .thanks h3{font-size:30px}
}

/* ============================================================ MOBILE POLISH
   Everything below is specific to phones: touch ergonomics, iOS quirks and
   notch geometry. It is additive — nothing here changes the desktop layout. */
@media (max-width:900px){

  /* iOS zooms the whole page in when a focused input is under 16px. That
     zoom is not undone on blur, so the layout stays broken for the rest of
     the visit. 16px is the fix; nothing else prevents it. */
  .field input,.field select,.field textarea{font-size:16px}

  /* the notch and the home indicator: keep fixed furniture out of both */
  .nav{padding-left:max(var(--gutter),env(safe-area-inset-left));
       padding-right:max(var(--gutter),env(safe-area-inset-right))}
  .cta-bar{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .foot{padding-bottom:max(46px,calc(env(safe-area-inset-bottom) + 46px))}

  /* 44px is the smallest reliable touch target */
  .chip{padding:13px 16px;font-size:10.5px}
  .rail button{padding:10px 0 10px 6px}
  .contact a{display:inline-block;padding:13px 0}
  .nav-links a{padding:10px 0}
  .btn-solid{padding:17px 30px}
  .btn-ghost{padding:16px 26px}
  .btn-outline{padding:14px 16px}
  .field input,.field select,.field textarea{padding:11px 0}
  .field select{background-position:calc(100% - 9px) 21px,calc(100% - 5px) 21px}

  /* small tracked caps go muddy on a phone screen — give them room */
  .creds dd,.chips li{font-size:10.5px;letter-spacing:.16em}
  .copy-head span{font-size:10.5px;letter-spacing:.2em}
  .tag{font-size:9px;letter-spacing:.2em}
  .field label,.legend{font-size:11px;letter-spacing:.16em}
  .note{font-size:13px}
  .foot{font-size:11.5px;letter-spacing:.12em}

  /* stop the grey flash on tap; keep our own focus ring */
  a,button{-webkit-tap-highlight-color:rgba(201,161,95,.18)}
}

/* The signature is hidden with the nav sub-label on small screens, so the
   phone gets it back under the hero instead — it is the studio's name and
   should not be desktop-only. */
.hero-sign{display:none}
@media (max-width:900px){
  .hero-sign{
    display:block;margin-top:26px;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(245,241,234,.55);
  }
  .hero-sign .script{font-size:2.1em;color:var(--brass)}
}

/* Reduced motion — rooms sit finished, nothing sweeps */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .seam{display:none !important}

  /* the sheens are decorative: drop them rather than freeze them mid-sweep,
     and hand the signature its flat colour back so nothing can render blank */
  .script{
    background-image:none !important;
    -webkit-text-fill-color:currentColor !important;
    animation:none !important;
    filter:none !important;
  }
  .wordmark-mark::after{display:none !important}
  .wordmark-mark{box-shadow:0 0 0 1px rgba(28,26,23,.05) !important}
}

/* Print — a flat one-pager, no pinned viewport */
@media print{
  .nav,.cta-bar,.seam,.rail,.counter,.hero-cue{display:none !important}
  .walk{height:auto !important}
  .pin{position:static;height:auto}
  body{background:#fff;color:#000}
}