/* ==========================================================================
   Graced Beauty Salon — design system
   Rebuilt 2026-08-15 from the design round Marisa co-designed in Claude Design.
   Shared by every page on the site, including the legal pages.
   Everything is driven by the tokens in :root. Prefer adding a token or reusing
   a scale step over inventing a one-off value. See design.md for the law.
   ========================================================================== */

/* ==========================================================================
   TYPEFACES — self-hosted, 2026-08-15.
   Both families used to come from fonts.googleapis.com, which meant every page
   load reached two more origins (googleapis + gstatic) before a word could be
   painted, and handed a visitor's IP to a third party on the way. These are the
   same faces, same weights, same unicode-ranges Google served — pulled once and
   committed, so the site owes nobody a round trip to render its own brand.
   Latin and latin-ext only: this is an English site with Spanish names in it
   (Nunez), and the cyrillic and vietnamese subsets Google also offers are
   180KB of glyphs no visitor here will ever need.
   Cormorant Garamond and Jost are both SIL Open Font License — self-hosting is
   what that licence is for.
   The browser still loads only the subsets a page actually needs: unicode-range
   is preserved exactly as served, so this is a change of origin, not of
   behaviour.
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-italic-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-italic-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-500-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/jost-200-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/assets/fonts/jost-200-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-300-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/jost-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-400-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jost-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-500-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/jost-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* ---- ground ---- */
  --ground:#100D0A;        /* the page */
  --ground-2:#16120E;      /* raised panels: dropdown, enquiry band, empty wells */
  --ground-3:#0A0806;      /* the footer, the deepest step */

  /* ---- gold ---- */
  --gold:#C9A227;          /* THE brand gold. one gold, site-wide */
  --gold-lift:#E8D9BC;     /* hover / emphasis */

  /* ---- ink ---- */
  --ink:#F2EBE0;           /* headings, primary */
  --ink-strong:#E8DFD2;    /* bolded run-in text inside body copy */
  --ink-warm:#E4DACB;      /* large serif standfirst */
  --ink-body:#C7BBA9;      /* body copy in lists */
  --ink-2:#A99C8A;         /* secondary copy, idle nav */
  /* The quiet end of the scale is bounded by CONTRAST, not by taste. #6E6255 gave
     3.27:1 on --ground and axe failed five elements on every page with it (the
     utility strip note, the footer hours, the copyright line, and both legal
     links). Raised 2026-08-24 to clear 4.5:1 on all three grounds. --ink-3 moved
     with it: at the accessible floor --ink-4 would have landed 0.6 L* from the old
     --ink-3, so the two quietest levels would have rendered identically and the
     scale would have been six names for five colours. Nothing quieter than
     --ink-4 may be used for text. */
  --ink-3:#998E81;         /* tertiary, small labels — 6.03:1 on --ground */
  --ink-4:#8D7E6D;         /* quiet, fine print — 4.92:1 on --ground, the floor */

  /* ---- lines ---- */
  --line-gold:rgba(201,162,39,.16);
  --line-gold-2:rgba(201,162,39,.22);
  --line-gold-3:rgba(201,162,39,.4);
  --line-neutral:rgba(169,156,138,.28);
  --line-faint:rgba(169,156,138,.12);

  /* ---- type ---- */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --fs-h1:clamp(46px,6.6vw,88px);
  --fs-h2:clamp(38px,5vw,62px);
  --fs-h3:clamp(30px,3.8vw,48px);
  --fs-stand:clamp(24px,2.6vw,32px);   /* serif standfirst paragraph */
  --fs-body:15px;
  --fs-lede:15.5px;
  --fs-small:13px;
  --fs-eyebrow:10px;
  --fs-btn:11px;

  --lh-display:1.04;
  --lh-body:2.05;
  --lh-list:1.9;

  --tr-eyebrow:.46em;
  --tr-btn:.3em;
  --tr-label:.3em;

  /* ---- space ---- */
  --sp-1:6px;   --sp-2:12px;  --sp-3:18px;  --sp-4:24px;  --sp-5:34px;
  --sp-6:44px;  --sp-7:64px;  --sp-8:92px;  --sp-9:130px; --sp-10:150px;

  /* ---- layout ---- */
  --measure:1120px;        /* content */
  --measure-wide:1440px;   /* the nav bar only */
  --gutter:clamp(20px,3.2vw,32px);
  --sec-y:clamp(84px,10vw,130px);
  /* Clearance under the fixed header. The bar is a FIXED ~152px at rest (44px utility
     strip + 108px bar) — it does not scale with the viewport, so neither should this.
     190px is the design's own value and clears the bar with room to spare. */
  --nav-clear:190px;
  --radius:0;              /* the brand is square-cornered */
  --tap:44px;              /* minimum comfortable tap target */
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground);-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-weight:300;font-size:var(--fs-body);
  background:var(--ground);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  /* no overflow-x:hidden here — it makes body the scroll box and breaks scrolling.
     Anything wider than the viewport is clipped at its own section instead. */
}
img{display:block;max-width:100%}
ul{list-style:none}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-lift)}
::selection{background:var(--gold);color:var(--ground)}

/* keyboard focus — the design had none */
:focus-visible{outline:2px solid var(--gold-lift);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ground);
  padding:var(--sp-2) var(--sp-4);font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:var(--sp-2);top:var(--sp-2)}

.wrap{width:100%;max-width:calc(var(--measure) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- shared type ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:300;line-height:var(--lh-display)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);line-height:1.1}
h3{font-size:var(--fs-h3)}
em{font-style:italic;color:var(--gold-lift)}

.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;
  color:var(--gold);display:block}
.rule{width:200px;height:1px;background:var(--gold);opacity:.55;transform-origin:left;margin-top:var(--sp-5)}
.rule.center{margin-inline:auto;transform-origin:center}
.rule.short{width:180px}

.lede{font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--ink-2);font-weight:300;max-width:60ch}
.stand{font-family:var(--serif);font-weight:300;font-size:var(--fs-stand);line-height:1.62;
  color:var(--ink-warm);text-wrap:pretty}

.sec{padding:var(--sec-y) 0;position:relative}
.sec-head{max-width:820px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2,.sec-head h3{margin-top:var(--sp-4)}
.sec-head p{margin-top:var(--sp-5)}
.sec-head.center p{margin-inline:auto}
.divide{border-bottom:1px solid var(--line-gold)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:17px 44px;border-radius:var(--radius);border:1px solid transparent;
  font-family:var(--sans);font-size:var(--fs-btn);font-weight:400;
  letter-spacing:var(--tr-btn);text-transform:uppercase;text-align:center;
  cursor:pointer;transition:background .35s ease,color .35s ease,border-color .35s ease}
.btn-solid{background:var(--gold);color:var(--ground);border-color:var(--gold)}
.btn-solid:hover{background:var(--gold-lift);color:var(--ground);border-color:var(--gold-lift)}
.btn-quiet{background:transparent;color:var(--ink-2);border-color:var(--line-neutral)}
.btn-quiet:hover{color:var(--ink);border-color:var(--gold)}
.btn-ghost{background:transparent;color:var(--gold-lift);border-color:rgba(201,162,39,.45)}
.btn-ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--ground)}
.hero .btn-solid{padding:18px 46px}
.hero .btn-ghost{padding:18px 44px}
.hero .btn-ghost:hover{background:rgba(201,162,39,.08);border-color:var(--gold);color:var(--gold-lift)}
.btn-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.btn-row.center{justify-content:center}

/* an underlined text action — the quiet alternative to a button */
.link-u{display:inline-flex;align-items:center;min-height:var(--tap);
  font-size:var(--fs-btn);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--line-neutral);padding-bottom:6px}
.link-u:hover{color:var(--ink);border-color:var(--gold)}
.link-u{color:var(--gold);border-color:rgba(201,162,39,.4)}
.link-gold{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:var(--tap)}

@media(max-width:560px){
  /* stacked buttons match width rather than sizing to their own labels */
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}

/* ---------- animation ---------- */
@keyframes gbRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes gbRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gbFadeIn{from{opacity:0}to{opacity:1}}
@keyframes gbNavIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes gbDropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes gbPan{0%{transform:scale(1.06) translate3d(-1.2%,.8%,0)}100%{transform:scale(1.15) translate3d(1.2%,-.8%,0)}}
@keyframes gbMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.rise{animation:gbRise 1.2s ease-out both}
.rise-1{animation-delay:.1s}
.rise-2{animation-delay:.2s}
.rise-3{animation-delay:.3s}
.rule{animation:gbRule 1.3s .4s var(--ease) both}

/* scroll reveal — only armed when JS is present, so content shows without it */
html.js [data-reveal]{opacity:0;transform:translateY(34px)}
[data-reveal]{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
/* BOTH selectors must carry `html.js`: `html.js [data-reveal]` is (0,2,1) and a bare
   `[data-reveal].in` is only (0,2,0), so the hidden state wins and the content never
   appears. This shipped once. Do not "simplify" it back. */
html.js [data-reveal].in,[data-reveal].in{opacity:1;transform:none}

/* ---------- header: desktop ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;background:var(--ground);
  border-bottom:1px solid var(--line-gold);font-family:var(--sans)}
.nav-strip{overflow:hidden;border-bottom:1px solid rgba(201,162,39,.1);
  max-height:44px;opacity:1;transition:max-height .5s var(--ease),opacity .4s ease}
.nav.scrolled .nav-strip{max-height:0;opacity:0}
.nav-strip-in{max-width:var(--measure-wide);margin-inline:auto;padding:9px clamp(24px,3vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.nav-social{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
/* padding, not height: the strip is only 44px tall, but a 14px hit area fails the
   24px minimum target size. Padding gets it to 24px without breaking the collapse. */
.nav-social a{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;min-height:24px;padding-block:5px}
.nav-social a:hover{color:var(--gold)}
.nav-strip-note{font-size:9.5px;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-4)}

.nav-bar{max-width:var(--measure-wide);margin-inline:auto;padding:20px clamp(24px,3vw,48px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;
  transition:padding .45s var(--ease)}
.nav.scrolled .nav-bar{padding-block:10px}
.nav-left,.nav-right{display:flex;align-items:center;gap:30px}
.nav-left{gap:32px}
.nav-right{justify-content:flex-end}
.nav-link{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);
  display:inline-flex;align-items:center;min-height:var(--tap);transition:color .35s ease}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--gold)}
.nav-logo{display:flex;align-items:center;justify-content:center}
.nav-logo img{width:auto;height:78px;filter:brightness(1.9) saturate(.4);transition:height .45s var(--ease)}
.nav.scrolled .nav-logo img{height:46px}
.nav-cta{padding:15px 34px;background:var(--gold);color:var(--ground);
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:var(--tap);transition:background .35s ease}
.nav-cta:hover{background:var(--gold-lift);color:var(--ground)}

/* the Rent a Space menu — hover on pointer devices, click everywhere */
.rent{position:relative}
.rent-btn{display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-2);min-height:var(--tap);transition:color .35s ease}
.rent-btn:hover,.rent[data-open="true"] .rent-btn{color:var(--ink)}
.rent-btn[aria-current="page"]{color:var(--gold)}
.rent-btn .caret{font-size:8px;color:var(--gold)}
.rent-panel{position:absolute;top:100%;right:0;width:360px;background:var(--ground-2);
  border:1px solid var(--line-gold-2);padding:14px;display:none;flex-direction:column;gap:8px;
  animation:gbDropIn .35s var(--ease) both}
.rent[data-open="true"] .rent-panel{display:flex}
.rent-item{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:10px;
  transition:background .35s ease}
.rent-item:hover{background:rgba(201,162,39,.07)}
.rent-item img{width:96px;height:68px;object-fit:cover}
.rent-item .t{font-family:var(--serif);font-size:21px;font-weight:300;color:var(--ink);display:block}
.rent-item .s{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-top:7px}

/* ---------- header: mobile ---------- */
.nav-m{position:fixed;inset:0 0 auto 0;z-index:90;display:none;
  align-items:center;justify-content:space-between;padding:22px var(--gutter);
  font-family:var(--sans);
  background:linear-gradient(var(--ground),rgba(16,13,10,.72) 60%,rgba(16,13,10,0));
  backdrop-filter:blur(2px)}
.nav-m img{height:40px;width:auto;filter:brightness(1.9) saturate(.4)}
.m-toggle{display:flex;align-items:center;gap:14px;background:none;border:none;cursor:pointer;
  padding:8px 2px;min-height:var(--tap);font-family:var(--sans);
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.m-toggle .bars{display:flex;flex-direction:column;gap:5px;width:26px}
.m-toggle .bars span{display:block;height:1px;background:var(--gold)}
.m-toggle .bars span:last-child{opacity:.55}

.m-menu{position:fixed;inset:0;z-index:89;background:rgba(14,11,8,.93);backdrop-filter:blur(14px);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);
  font-family:var(--serif);overflow-y:auto;padding:96px var(--gutter) var(--sp-7);
  animation:gbFadeIn .5s ease both}
.m-menu.open{display:flex}
.m-menu a{font-size:clamp(30px,6vw,46px);font-weight:300;color:var(--ink);
  padding:6px 0;min-height:var(--tap);display:flex;align-items:center;
  animation:gbNavIn .6s var(--ease) both}
.m-menu a:hover{color:var(--gold)}
.m-menu a:nth-of-type(1){animation-delay:.06s}
.m-menu a:nth-of-type(2){animation-delay:.13s}
.m-menu a:nth-of-type(3){animation-delay:.2s}
.m-menu a:nth-of-type(4){animation-delay:.27s}
.m-menu a:nth-of-type(5){animation-delay:.34s}
.m-menu .m-rule{width:90px;height:1px;background:rgba(201,162,39,.5);margin:34px 0 26px;
  animation:gbFadeIn .8s .5s both}
.m-menu .m-foot{font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;line-height:2.4;animation:gbFadeIn .8s .58s both}
body.locked{overflow:hidden}

/* the design's own breakpoint: desktop nav at 1024 and up, drawer below */
@media(max-width:1023px){
  .nav{display:none}
  .nav-m{display:flex}
  /* the mobile bar is ~84px tall, so the desktop clearance would leave a hole */
  :root{--nav-clear:118px}
}

/* ---------- hero ----------
   Centred, and vertically centred in a full-height box — which is how it clears the fixed
   header without needing --nav-clear. */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.hero-wash{position:absolute;inset:-6%;display:flex;align-items:center;justify-content:center;
  animation:gbPan 28s ease-in-out infinite alternate;will-change:transform}
.hero-wash img{width:60%;max-width:760px;opacity:.13;
  filter:grayscale(1) brightness(2.2) sepia(.45)}
/* the wash is lifted out of flat black by a warm pool of light behind the type */
.hero-scrim{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 44%,rgba(62,49,35,.5) 0%,rgba(16,13,10,.93) 60%,var(--ground) 100%)}
.hero-in{position:relative;z-index:2;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:clamp(70px,8.9vw,128px) var(--gutter) clamp(46px,5.8vw,84px);text-align:center}
.hero-thread{width:1px;height:64px;opacity:.75;
  background:linear-gradient(var(--gold),rgba(201,162,39,0))}
.hero .eyebrow{letter-spacing:.5em}
.hero h1{font-size:clamp(52px,8.6vw,112px);line-height:1;letter-spacing:.01em}
.hero .rule{margin-top:0;transform-origin:center}
.hero .lede{max-width:600px;color:var(--ink-body)}
.hero .btn-row{gap:20px;justify-content:center;margin-top:12px}
.hero-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-4)}

/* a page hero that sits on a photo — used by the rental pages */
.hero-shot{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shot .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,13,10,.86) 0%,rgba(16,13,10,.4) 45%,rgba(16,13,10,.95) 100%)}
.hero-shot .wrap{position:relative;z-index:2;padding-bottom:var(--sp-8)}
.hero-shot h1{margin-top:var(--sp-4)}

/* a centred page header with no photo */
.hero-plain{padding:var(--nav-clear) 0 var(--sp-8);text-align:center}
.hero-plain h1{margin-top:var(--sp-5)}
.hero-plain .lede{margin:var(--sp-6) auto 0;max-width:560px}

/* ---------- cards: service categories ---------- */
.cards{max-width:1180px;margin:var(--sp-7) auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--sp-4)}
.card{border:1px solid rgba(201,162,39,.18);transition:border-color .5s ease,background .5s ease;
  display:flex;flex-direction:column}
.card:hover{border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.04)}
.card-img{overflow:hidden;background:var(--ground-2)}
.card-img img{width:100%;height:clamp(240px,24vw,330px);object-fit:cover;
  transition:transform .9s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px) clamp(28px,3vw,36px)}
/* the card is an <a>, so the heading would otherwise inherit the link gold */
.card-body h3{font-size:32px;color:var(--ink)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.card-body .chips{margin:22px 0 26px}
.chip{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-body);
  border:1px solid var(--line-neutral);padding:9px 15px}
.card-more{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.card:hover .card-more{color:var(--gold)}

/* ---------- team ----------
   No card frame here: photo, then centred type. The frame belongs to the service cards. */
.team{max-width:1180px;margin:var(--sp-7) auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.pro{display:flex;flex-direction:column;gap:20px}
.pro-img{overflow:hidden;background:var(--ground-2)}
.pro-img img{width:100%;height:clamp(280px,26vw,400px);object-fit:cover;
  transition:transform 1.1s var(--ease)}
.pro:hover .pro-img img{transform:scale(1.05)}
.pro-body{text-align:center}
.pro-role{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  line-height:1.6}
.pro-name{font-family:var(--serif);font-size:29px;font-weight:300;color:var(--ink);
  margin-top:12px;line-height:1.15}
.pro-more{display:block;margin-top:14px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3)}
.pro:hover .pro-more{color:var(--gold)}

/* the full roster row used on /our-team/ */
.roster{display:flex;flex-direction:column;gap:var(--sp-4)}
.roster-row{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-6);
  align-items:center;padding:28px;border:1px solid var(--line-gold);
  transition:border-color .5s ease,background .5s ease}
.roster-row:hover{border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.04)}
.roster-img{overflow:hidden;height:clamp(260px,30vw,380px)}
.roster-img img{width:100%;height:100%;object-fit:cover}
.roster-row .name{font-family:var(--serif);font-size:clamp(38px,4vw,54px);font-weight:300;
  color:var(--ink);margin-top:var(--sp-3);line-height:1.05}
.roster-row .more{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.roster-row:hover .more{color:var(--gold)}
/* the row stays one big click target, but the booking button sits above it */
.roster-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.roster-actions .more::after{content:"";position:absolute;inset:0}
.roster-actions .btn{position:relative;z-index:1;padding:15px 32px}

/* ---------- split: copy beside media ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:var(--sp-7);
  align-items:start}
.split.center{align-items:center}
.s-salon .split{gap:clamp(48px,6vw,90px)}
.s-suite .split{gap:clamp(44px,5vw,68px)}
.s-booth .split{gap:clamp(44px,5vw,68px)}
.split-copy h3{margin:18px 0 26px}
.split-copy .lede{max-width:460px;margin-bottom:34px}
.split-copy .btn-row{gap:18px;margin-top:0}
.s-salon h2{font-size:clamp(34px,4.4vw,58px);line-height:1.12;margin:0 0 32px}
.s-salon .lede{max-width:520px;margin-bottom:26px}
.s-salon .lede:last-child{margin-bottom:0}
.split-media{display:flex;flex-direction:column;gap:var(--sp-3)}
.split-media img{width:100%;height:clamp(260px,32vw,440px);object-fit:cover}
.split-media.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.split-media.pair img{height:clamp(200px,24vw,320px)}
/* rental collages: the suite leads with one wide shot, the booth is a plain 2x2 */
.collage-r{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.collage-r img{width:100%;object-fit:cover;height:clamp(150px,19vw,250px)}
.collage-r img:first-child{grid-column:1 / -1;height:clamp(220px,26vw,340px)}
.collage-b{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.collage-b img{width:100%;height:clamp(200px,23vw,300px);object-fit:cover}

/* the salon collage — two up, one spanning, the first nudged down so it staggers */
.collage{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.collage img{width:100%;height:clamp(200px,24vw,330px);object-fit:cover}
.collage img:first-child{margin-top:42px}
.collage img:last-child{grid-column:1 / -1}
@media(max-width:767px){.collage img:first-child{margin-top:0}}
.split.flip .split-media{order:-1}

/* a numbered feature list */
.numlist{display:flex;flex-direction:column;gap:26px;margin-top:var(--sp-5)}
.numlist li{display:grid;grid-template-columns:26px 1fr;gap:16px;
  font-size:var(--fs-body);line-height:var(--lh-list);color:var(--ink-body);
  padding-bottom:26px;border-bottom:1px solid var(--line-faint)}
.numlist li:last-child{padding-bottom:0;border-bottom:0}
.numlist .n{color:var(--gold);font-family:var(--serif);font-size:17px}
.numlist strong{color:var(--ink-strong);font-weight:400}
.list-label{font-size:var(--fs-eyebrow);letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin-top:var(--sp-6);display:block}

/* a dash list, used in the homepage rental blocks */
.dashlist{display:flex;flex-direction:column;gap:20px;margin:0 0 42px}
.dashlist li{display:grid;grid-template-columns:22px 1fr;gap:14px;
  font-size:var(--fs-body);line-height:var(--lh-list);color:var(--ink-body)}
.dashlist .d{color:var(--gold)}
.dashlist strong{color:var(--ink-strong);font-weight:400}

/* ---------- reasons grid ----------
   Two columns on desktop, one below 768 — the design binds this explicitly rather than
   letting auto-fit decide, so four across never happens on a wide screen. */
.reasons{max-width:1180px;margin:var(--sp-7) auto 0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.reason{background:var(--ground);border:1px solid var(--line-gold);
  padding:clamp(30px,3.6vw,44px) clamp(22px,3vw,34px);
  display:flex;flex-direction:column;gap:16px}
.reason .n{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--gold)}
.reason .t{font-family:var(--serif);font-size:27px;font-weight:300;color:var(--ink);line-height:1.15}
.reason p{font-size:14.5px;line-height:1.95;color:var(--ink-2)}

/* ---------- gallery ---------- */
.gal{max-width:1080px;margin-inline:auto}
.gal-main{width:100%;height:clamp(300px,46vw,620px);overflow:hidden;background:var(--ground-2);
  border:1px solid rgba(201,162,39,.18)}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:12px;
  margin-top:14px}
.gal-thumbs button{padding:0;border:1px solid transparent;background:none;cursor:pointer;
  height:clamp(70px,8vw,108px);overflow:hidden;
  transition:opacity .4s ease,border-color .4s ease;opacity:.45}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover}
.gal-thumbs button:hover{opacity:1}
.gal-thumbs button[aria-current="true"]{opacity:1;border-color:var(--gold)}

/* the storefront marquee — masked at both edges rather than overlaid with a gradient,
   so it works on any background */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:22px;width:max-content;animation:gbMarquee 62s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee figure{flex-shrink:0}
.marquee img{height:clamp(200px,24vw,340px);width:auto;object-fit:cover}

/* ---------- two ways in ---------- */
.s-ways{background:var(--ground-2);border-top:1px solid rgba(201,162,39,.14);
  border-bottom:1px solid rgba(201,162,39,.14);padding:clamp(66px,8.3vw,120px) 0}
.ways{max-width:1080px;margin-inline:auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-4)}
.way{border:1px solid rgba(201,162,39,.2);
  padding:clamp(30px,4vw,48px) clamp(24px,3.4vw,40px);
  display:flex;flex-direction:column;gap:20px}
.way .eyebrow{letter-spacing:.4em}
.way h3{font-size:clamp(30px,3.4vw,42px);line-height:1.15}
.way p{font-size:14.5px;line-height:2;color:var(--ink-2)}
.way .btn-row{align-self:flex-start;margin-top:10px}

/* ---------- hours ---------- */
.hours{margin-top:var(--sp-5);border-top:1px solid var(--line-faint)}
.hours div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line-faint)}
.hours span:first-child{font-size:10px;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--ink-3)}
.hours span:last-child{font-family:var(--serif);font-size:19px;color:var(--ink);text-align:right}
.map{display:block;overflow:hidden;background:var(--ground-2);aspect-ratio:4/3}
.map img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}

/* ---------- booth grid ---------- */
.booths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.booth figure{display:flex;flex-direction:column;gap:14px}
.booth img{width:100%;height:clamp(240px,26vw,340px);object-fit:cover}
.booth figcaption{font-size:9.5px;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-3)}
.booth-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3);
  margin-top:var(--sp-3)}
.booth-extra img{width:100%;height:clamp(200px,22vw,290px);object-fit:cover}
@media(max-width:560px){.booths{grid-template-columns:1fr}}

/* a head with a title on the left and a note on the right */
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-6);padding-bottom:22px;border-bottom:1px solid rgba(201,162,39,.18)}

/* ---------- enquiry band ---------- */
.enquire{background:var(--ground-2);border-top:1px solid var(--line-gold);padding:var(--sec-y) 0}
.enquire-in{max-width:900px;margin-inline:auto;text-align:center}
.enquire h2{margin-top:var(--sp-4)}
.enquire p{margin:var(--sp-4) auto 0;max-width:520px;font-size:14.5px;line-height:2;color:var(--ink-2)}
.enquire-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-6)}
.enquire-alt{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:var(--sp-5);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.enquire-alt a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* ---------- stylist page ---------- */
.stylist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-7);
  align-items:center;padding-top:var(--nav-clear)}
.portrait{position:relative}
.portrait img{width:100%;height:clamp(380px,52vw,660px);object-fit:cover}
.portrait::before,.portrait::after{content:"";position:absolute;width:70px;height:70px;pointer-events:none}
.portrait::before{top:-14px;left:-14px;border-top:1px solid rgba(201,162,39,.55);border-left:1px solid rgba(201,162,39,.55)}
.portrait::after{bottom:-14px;right:-14px;border-bottom:1px solid rgba(201,162,39,.55);border-right:1px solid rgba(201,162,39,.55)}
.back-link{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;min-height:var(--tap)}
.back-link:hover{color:var(--gold)}
.stylist .eyebrow{margin-top:var(--sp-4)}
.stylist h1{margin-top:var(--sp-3);font-size:clamp(46px,6vw,82px);line-height:1.02}
.stylist .bio{margin-bottom:var(--sp-5);font-size:15.5px;line-height:var(--lh-body);
  color:var(--ink-2);max-width:460px;text-wrap:pretty}
.spec-label{font-size:10px;letter-spacing:.38em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:var(--sp-3);display:block}
.also{text-align:center}
.also-links{display:flex;gap:var(--sp-6);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-5)}
.also-links a{font-family:var(--serif);font-size:30px;font-weight:300;color:var(--ink-2);
  display:inline-flex;align-items:center;min-height:var(--tap)}
.also-links a:hover{color:var(--ink)}

/* ---------- reviews embed ---------- */
.reviews-frame{margin-top:var(--sp-7);border:1px solid var(--line-gold);background:var(--ground-2)}
.reviews-frame iframe{display:block;width:100%;height:900px;border:0}
@media(max-width:900px){.reviews-frame iframe{height:1500px}}
@media(max-width:560px){.reviews-frame iframe{height:2100px}}

/* ---------- legal pages ---------- */
.legal{padding-top:var(--nav-clear)}
.legal .prose{max-width:76ch;margin-top:var(--sp-6)}
.legal .prose h2{font-size:clamp(26px,3vw,36px);margin:var(--sp-7) 0 var(--sp-3)}
.legal .prose h3{font-size:clamp(20px,2.2vw,26px);margin:var(--sp-5) 0 var(--sp-2)}
.legal .prose p,.legal .prose li{font-size:14.5px;line-height:1.95;color:var(--ink-2);
  margin-bottom:var(--sp-3)}
.legal .prose ul,.legal .prose ol{margin:0 0 var(--sp-3) 1.2em;list-style:disc}
.legal .prose ol{list-style:decimal}
.legal .prose li{margin-bottom:var(--sp-1)}
.legal .prose strong{color:var(--ink-strong);font-weight:400}
.legal .prose a{border-bottom:1px solid var(--line-gold-3)}

/* ---------- footer ---------- */
.foot{background:var(--ground-3);border-top:1px solid var(--line-gold);
  padding:var(--sp-8) var(--gutter) var(--sp-6);font-family:var(--sans)}
.foot-grid{max-width:1180px;margin-inline:auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-7);align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:22px}
.foot-brand img{height:66px;width:auto;align-self:flex-start;filter:brightness(1.9) saturate(.4)}
.foot-brand p{max-width:300px;font-family:var(--serif);font-size:21px;font-style:italic;
  font-weight:300;line-height:1.6;color:var(--ink-2)}
.foot-col{display:flex;flex-direction:column;gap:var(--sp-2)}
.foot-h{font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.foot-col a{font-size:14px;color:var(--ink-2);font-weight:300;
  display:inline-flex;align-items:center;min-height:var(--tap)}
.foot-col a:hover{color:var(--gold-lift)}
.foot-col .plain{font-size:13px;line-height:2;color:var(--ink-4);font-weight:300}
.foot-col .note{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.foot-social{display:flex;gap:10px;margin-top:var(--sp-3);flex-wrap:wrap}
.foot-social a{width:44px;height:44px;flex-shrink:0;border:1px solid rgba(201,162,39,.3);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:color .35s ease,border-color .35s ease;min-height:0}
.foot-social a:hover{border-color:var(--gold);color:var(--gold)}
.foot-bottom{max-width:1180px;margin:var(--sp-8) auto 0;padding-top:26px;
  border-top:1px solid rgba(169,156,138,.13);display:flex;justify-content:space-between;
  align-items:center;gap:var(--sp-4);flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:var(--ink-4)}
.foot-bottom a{color:var(--ink-4);display:inline-flex;align-items:center;min-height:var(--tap)}
.foot-bottom a:hover{color:var(--gold)}
.foot-legal{display:flex;gap:26px;flex-wrap:wrap}

/* ---------- homepage section order ----------
   `main` is a flex column so the design's ordering survives. Only ONE section moves:
   below 768 "Two ways in" rises above the gallery, so a phone reaches the two calls to
   action sooner. Every section needs an explicit order or it would sort to 0 and jump. */
main{display:flex;flex-direction:column}
.s-hero{order:10}   .s-services{order:20}  .s-cats{order:30}
.s-team{order:40}   .s-salon{order:50}     .s-work{order:60}
.s-ways{order:70}   .s-rentintro{order:80} .s-suite{order:90}
.s-booth{order:100} .s-why{order:110}      .s-find{order:120}
.s-visit{order:130} .s-reviews{order:140}  .s-cta{order:150}

/* ---------- below 768: the design centres, rather than merely stacking ----------
   These are the bindings the design carries in JS (mAlign / mJustify / mSelf / mAuto /
   whyCols / twoWaysOrder). Left-aligned copy in a narrow column reads as an unfinished
   stack; centred, it reads as designed. */
@media(max-width:767px){
  .s-ways{order:55}
  .reasons{grid-template-columns:1fr}
  .card-body,.reason,.way,.split-copy,.s-visit .split>div:first-child{text-align:center}
  .card-body .chips,.way .btn-row,.split-copy .btn-row,.s-visit .btn-row{justify-content:center}
  .way .btn-row{align-self:center}
  .split-copy .lede,.split-copy .stand,.s-salon .lede{margin-inline:auto}
  .chips{justify-content:center}
}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-wash,.marquee .track{animation:none}
  [data-reveal],html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .rise,.rule,.m-menu,.m-menu a,.rent-panel{animation:none}
  .card:hover .card-img img,.pro:hover .pro-img img{transform:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   WO-GRACED-CONVERT-001 — ways to act
   Added 2026-08-24. The site carried fourteen calls to action and no way to
   call, write or send anything: 0 tel:, 0 mailto:, 0 <form> across nine pages.
   Everything below is built from tokens that already existed — no new colour,
   no new typeface, no new spacing step. See design.md §9.
   ========================================================================== */

/* ---------- the number in the desktop nav bar ----------
   It lived in the utility strip until 2026-08-24, which was wrong: that strip
   COLLAPSES on scroll past 24px (design.md §5), so the number vanished the moment
   anyone moved down the page and desktop had no persistent way to call. It now
   sits in the nav bar itself, immediately before Book — Call then Book, the same
   order as the mobile bar — where nothing collapses.
   Same metrics as .nav-link so it sits on the row cleanly, but gold, because it
   is an action and the other links are navigation. It is deliberately NOT a
   filled button: Book is the one solid button in this view (design.md §4). */
.nav-tel{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;min-height:var(--tap);white-space:nowrap;
  transition:color .35s ease}
.nav-tel:hover{color:var(--gold-lift)}

/* the number in the mobile drawer, under the address */
.m-menu .m-tel{font-family:var(--sans);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;min-height:var(--tap);
  margin-top:var(--sp-2);animation:gbFadeIn .8s .62s both}
.m-menu .m-tel:hover{color:var(--gold-lift)}

/* ---------- mobile action bar ----------
   Two equal buttons pinned to the bottom below 768px. Deliberately NOT tied to
   the 1024px header breakpoint: this is a phone affordance, and a tablet has the
   drawer's number. --mbar-h is a height, not a spacing step, so it is its own
   token rather than an abuse of the --sp scale (design.md §3). */
:root{--mbar-h:56px}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:88;
  background:var(--ground-3);border-top:1px solid var(--line-gold);
  padding-bottom:env(safe-area-inset-bottom,0px);font-family:var(--sans)}
.mbar-in{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.mbar a{height:var(--mbar-h);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-btn);font-weight:400;letter-spacing:var(--tr-btn);text-transform:uppercase;
  transition:background .35s ease,color .35s ease}
.mbar .mbar-call{color:var(--gold);border-right:1px solid var(--line-gold)}
.mbar .mbar-call:hover{background:rgba(201,162,39,.07);color:var(--gold-lift)}
.mbar .mbar-book{background:var(--gold);color:var(--ground)}
.mbar .mbar-book:hover{background:var(--gold-lift);color:var(--ground)}

@media(max-width:767px){
  .mbar{display:block}
  /* the bar is fixed, so the last line of the footer would sit under it */
  body{padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px))}
  /* the drawer is a full-screen overlay at z-89 and must cover the bar */
  body.locked .mbar{display:none}
}

/* ---------- the rental inquiry form ----------
   Native controls, native validation. The error state carries the phone number
   and the email address, so a submission that does not reach the CRM still
   reaches a human — design.md §8, "no form that does not send". */
.gform{max-width:560px;margin:var(--sp-6) auto 0;text-align:left;
  display:flex;flex-direction:column;gap:var(--sp-4);
  /* native selects and their option lists inherit the page's dark ground */
  color-scheme:dark}
.gf-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.gf-field label{font-size:var(--fs-eyebrow);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--ink-3)}
.gf-field input,.gf-field select,.gf-field textarea{
  width:100%;min-height:var(--tap);padding:var(--sp-2) var(--sp-3);
  font-family:var(--sans);font-weight:300;font-size:var(--fs-body);color:var(--ink);
  background:var(--ground);border:1px solid var(--line-neutral);border-radius:var(--radius);
  transition:border-color .35s ease}
.gf-field textarea{min-height:96px;line-height:1.9;resize:vertical}
.gf-field input::placeholder,.gf-field textarea::placeholder{color:var(--ink-4)}
.gf-field input:hover,.gf-field select:hover,.gf-field textarea:hover{border-color:var(--line-gold-3)}
.gf-field input:focus,.gf-field select:focus,.gf-field textarea:focus{
  outline:2px solid var(--gold-lift);outline-offset:3px;border-color:var(--gold)}
/* the invalid state — the palette has no red, and design.md forbids inventing one,
   so attention is carried by the brand gold on the border and the message */
.gf-field.is-bad input,.gf-field.is-bad select,.gf-field.is-bad textarea{border-color:var(--gold)}
.gf-err{display:none;font-size:var(--fs-small);letter-spacing:.06em;color:var(--gold)}
.gf-field.is-bad .gf-err{display:block}
.gform .btn-row{margin-top:var(--sp-2)}
.gform .btn-row .btn{width:100%}
/* `.enquire p` is (0,1,1) and this was (0,1,0), so every declaration below was
   silently losing and the note rendered as ordinary body copy. Scoped to match. */
.enquire .gf-note{font-size:var(--fs-small);line-height:1.9;color:var(--ink-3);text-align:center}
/* the number inside that sentence is a real tap target, not decoration: padded to
   clear the 24px minimum the utility strip already meets (design.md §4) */
.gf-note a{display:inline-block;padding-block:4px}

/* The two outcomes.
   Success REPLACES the form — there is nothing left to do on it.
   Failure sits BENEATH the still-filled form, because the visitor's answers are
   still in the fields and they may want to try again; and because a failure that
   hid their typing would be a second thing going wrong. */
.gf-done,.gf-fail{display:none;max-width:560px;margin:var(--sp-6) auto 0;
  border:1px solid var(--line-gold);background:var(--ground);
  padding:clamp(30px,4vw,44px) clamp(22px,3vw,34px);text-align:center}
.gform.is-sent+.gf-done,.gform.is-failed~.gf-fail{display:block}
.gf-done h3,.gf-fail h3{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.gf-done p,.gf-fail p{font-size:14.5px;line-height:2;color:var(--ink-2);max-width:44ch;
  margin-inline:auto}
.gf-fail .enquire-alt{margin-top:var(--sp-4)}
.gform.is-sent{display:none}

/* a submitting form says so rather than looking ignored */
.gform button[disabled]{opacity:.55;cursor:progress}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  .m-menu .m-tel{animation:none}
}