/* site-overrides.css — Miracle Braid Lounge, v2 "Crown" (rebuilt 2026-09-10).
   Linked per page AFTER base.css and the salon skin, with head.php's $css_v()
   cache-buster, so it wins the cascade AND reaches returning visitors the day it
   changes. Nothing here belongs in base.css or salon.css (fleet-shared).

   DESIGN SOURCE: the client's own print. Their "Miracle Crown Hair" hang tag (seen
   in their TikTok) is plum-burgundy with rose-gold foil, a stadium-oval "M"
   monogram, spaced serif capitals and a script tagline. So: cream ground, gold
   hairlines, plum accents, arch/stadium frames that echo the monogram's oval, and
   a double gold rule on the booking card that echoes the tag's inset border.

   EVERY COLOUR PAIR BELOW WAS MEASURED (WCAG relative-luminance ratio):
     ink     #2E2226 on cream #FBF6EF ..... 14.23   on alt #F4EADF 12.88
     muted   #6A5E61 on cream ...............  5.77   on alt  5.22   on blush 5.27
     plum    #6A2340 on cream .............. 10.13   (eyebrows, links, outline btn)
     plum-2  #8F4D61 on cream ..............  5.74   (italic accent words)
     goldink #8E6B33 on cream ..............  4.54   (the ONLY gold allowed as text on light)
     ink     #2E2226 on gold #B98F4C ........  5.17   (worst end of the gold button gradient)
     cream   on plum #6A2340 ............... 10.13   gold-light #E6CFA0 on plum 7.16
     #E8DDD3 on footer #2C1220 ............. 12.94   gold-light on footer 11.36
     field underline #8F7F74 on white .......  3.85   (UI boundary, needs 3:1)
     gold UI border  #9C7840 on cream .......  3.77   (slider buttons, needs 3:1)
   AND THE ONES THAT FAIL, so nobody reintroduces them:
     gold #B08D57 on cream 2.87 · #C39A58 on cream 2.42 · rose-gold #D0A18E on cream 2.13
   -> bright golds are DECORATIVE ONLY (rules, frames, glyphs), never text on cream.

   SCOPING RULE (learned the hard way on this site, 2026-09-02): never colour bare
   descendants of a band (".band a", ".band p"). That rule shipped gold-on-gold
   button text and near-invisible tile text inside plum bands. Every component here
   sets its own colours; bands only set their own background and default text colour. */

:root{
  --paper:#FBF6EF; --section-bg-alt:#F4EADF; --blush:#F6EAE6;
  --ink:#2E2226; --muted:#6A5E61;
  --plum:#6A2340; --plum-2:#8F4D61; --plum-deep:#2C1220;
  --gold:#B08D57;        /* decorative hairlines and frames only */
  --gold-ui:#9C7840;     /* interactive boundaries (3.77:1) */
  --gold-ink:#8E6B33;    /* gold as TEXT on light grounds (4.54:1) */
  --gold-light:#E6CFA0;  /* gold as text on plum / plum-deep */
  --rose-gold:#D0A18E;   /* decorative, from the tag's foil */
  --line:rgba(176,141,87,.32);
  --field-line:#8F7F74;
  --radius:2px;
  --shadow:0 30px 60px -32px rgba(44,18,32,.38);
  --tile-border:1px solid var(--line);
  --header-line:1px solid var(--line);
  --accent-border:#A8834B;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* head.php emits --display with a generic sans-serif fallback; a serif display
     face must fall back to a serif, or a font-load failure turns every heading into
     Arial. Jost falls back to the system sans, which is right for it. */
  --display:'Cormorant Garamond', 'Cormorant', Garamond, Georgia, 'Times New Roman', serif;
  --body:'Jost', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

/* ================= base typography ================= */
body{font-family:var(--body);font-size:1.02rem;line-height:1.75;color:var(--ink);
  background:var(--paper);letter-spacing:.005em}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.005em}
h1{font-weight:500;font-size:clamp(2.9rem,6.3vw,5.5rem);line-height:.98}
h2{font-weight:500;font-size:clamp(2.25rem,4.3vw,3.6rem);line-height:1.04;margin:.9rem 0 1.2rem}
h3{font-weight:600;font-size:1.55rem;line-height:1.15}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--plum-2)}
/* No orphaned words or split italic accents (measured at 1440/1024/390 in the review).
   balance only on phones: at desktop widths it made the home h2 break worse. The few
   headings pretty cannot save carry   in the markup. */
h1,h2,p{text-wrap:pretty}
@media (max-width:640px){h1,h2,.manifesto p{text-wrap:balance}}
p + p{margin-top:1rem}
.lede{font-size:1.14rem;line-height:1.8;color:var(--muted);max-width:52ch}
.sub{color:var(--muted)}
.prose{max-width:62ch}
.prose p{color:var(--muted)}
.prose h2{font-size:clamp(1.6rem,2.6vw,2rem);margin:2.4rem 0 .6rem}
.feature-copy.prose h2{font-size:clamp(2.25rem,4.3vw,3.6rem);margin:.9rem 0 1.2rem}   /* editorial, not legal */
/* :not([class]) is load-bearing. This was ".prose a" and it bled into the BUTTONS
   inside .prose on /about/ - plum text on the gold button (3.68:1, fails AA) plus an
   underline - the same descendant-colour bug class as the rules above. Only plain,
   unclassed inline links get link styling; .btn and .text-link style themselves.
   Caught by site-factory/tools/render-check.ps1, not by eye and not by qa.ps1. */
.prose a:not([class]),.inline-link{color:var(--plum);text-decoration:underline;text-decoration-color:var(--gold);
  text-underline-offset:.22em;text-decoration-thickness:1px}
.prose a:not([class]):hover,.inline-link:hover{text-decoration-color:var(--plum)}
/* a phone number never splits across lines ("(301) 201-" / "5617" in the /contact/ lede).
   Buttons excluded: "Call or text (301) 201-5617" must still be allowed to wrap at 360px. */
a[href^="tel:"]:not(.btn){white-space:nowrap}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

/* eyebrow: tracked capitals with a gold hairline (both sides when centred) */
.eyebrow{display:inline-flex;align-items:center;gap:.95rem;font-family:var(--body);
  font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--plum);
  padding:0}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:0 0 auto}
.eyebrow::after{content:none}
.center .eyebrow::after,.section-head .eyebrow::after{content:"";width:34px;height:1px;
  background:var(--gold);flex:0 0 auto}

/* ================= sections ================= */
section{padding:0}                       /* salon skin sets 5.2rem on every <section> */
.lux-section{padding:clamp(4.5rem,9vw,7.5rem) 0}
.bg-alt{background:var(--section-bg-alt)}
.bg-blush{background:var(--blush)}
.section-head{max-width:760px;margin:0 auto clamp(2.4rem,5vw,3.6rem);text-align:center}
.section-head .lede,.center .lede{margin-left:auto;margin-right:auto}
.center{text-align:center}
.center .cta-row{justify-content:center}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.1rem}
/* phones: two equal full-width buttons, not a ragged stack of unequal widths */
@media (max-width:640px){.cta-row{flex-direction:column;align-items:stretch}.cta-row .btn{justify-content:center;width:100%}}
.flourish{display:block;width:120px;height:14px;margin:0 auto;color:var(--gold)}

/* ================= header ================= */
.site-header{background:rgba(251,246,239,.93);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .site-header{background:var(--paper)}}
/* Brand lockup: the rebuilt monogram badge + the name set in real type. The words
   are CSS pseudo-content, purely visual - the <a> already carries the business
   name as its aria-label, which wins the accessible name, so nothing is read twice.
   Grid, not flex, so ::before/::after stack in column 2 beside the badge.
   Deliberately NOT the fleet 'wordmark' config key: its CSS was lost from the
   template base.css in the 2026-09-02 Dropbox conflict (it would stack). */
.brand{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
/* The CLIENT'S OWN LOGO since 2026-09-14 (see _brand/build-logo.ps1): pale gold on
   cream by design, so at header size its hairline rings melted into the cream header.
   A soft plum shadow plus a half-pixel gold edge give it definition WITHOUT changing a
   single pixel of the logo. Its own lettering is illegible at 40-62px, which is why the
   typeset name stays beside it. */
.brand img{grid-column:1;grid-row:1 / span 2;height:62px;width:auto;
  filter:drop-shadow(0 1px 1.5px rgba(44,18,32,.18)) drop-shadow(0 0 .6px rgba(142,107,51,.6))}
.brand::before{content:"MIRACLE";grid-column:2;grid-row:1;align-self:end;font-family:var(--display);
  font-weight:600;font-size:1.22rem;letter-spacing:.34em;line-height:1;color:var(--ink)}
.brand::after{content:"Braid Lounge";grid-column:2;grid-row:2;align-self:start;margin-top:5px;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:1.02rem;
  letter-spacing:.06em;line-height:1.1;color:var(--plum-2)}
.main-nav{gap:26px}
.main-nav a,.nav-item > a{font-family:var(--body);font-weight:500;font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.main-nav a:hover,.main-nav a[aria-current],.nav-item > a:hover,.nav-item > a[aria-current]{color:var(--plum)}
.nav-item > a[aria-current]{text-decoration:underline;text-decoration-color:var(--gold);
  text-underline-offset:.55em;text-decoration-thickness:1px}
.tel-mini{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.08em;color:var(--ink)}
.tel-mini:hover{color:var(--plum)}
.menu-btn{background:transparent;border:1px solid var(--plum);border-radius:var(--radius);
  color:var(--plum);font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.6rem .9rem}
.mobile-nav{background:var(--paper);border-bottom:1px solid var(--line)}
.mobile-nav a{font-family:var(--display);font-weight:600;font-size:1.3rem;border-bottom:1px solid var(--line)}
.mobile-nav a.mobile-cta{font-family:var(--body);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;border:1px solid var(--accent-border);border-radius:var(--radius);color:var(--ink);
  background:linear-gradient(135deg,#E6CD98 0%,#C9A25E 55%,#B98F4C 100%)}
/* The phone number drops before the nav runs out of room: brand lockup + 4 nav
   items + phone + CTA measured tight at 862px. Measured, not guessed - see SITE-CLAUDE.md. */
@media (max-width:1080px){.tel-mini{display:none}}
@media (max-width:860px){
  .brand img{height:40px}
  .brand::before{font-size:1rem;letter-spacing:.3em}
  .brand::after{font-size:.86rem;margin-top:3px}
}
@media (max-width:360px){.brand::after{display:none}.brand::before{align-self:center;grid-row:1 / span 2}}

/* ================= buttons ================= */
/* base.css gives .btn a 2px SOLID DARK border and a dark shadow; every variant is
   restated after .btn so none keeps the old look at equal specificity. */
.btn{border-radius:var(--radius);border:1px solid var(--plum);background:transparent;color:var(--plum);
  box-shadow:none;font-family:var(--body);font-weight:500;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.95rem 1.5rem;gap:.7rem;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{background:var(--plum);color:var(--paper);transform:translateY(-1px)}
.btn-accent{background:linear-gradient(135deg,#E6CD98 0%,#C9A25E 55%,#B98F4C 100%);
  border:1px solid var(--accent-border);color:var(--ink)}
.btn-accent:hover{background:linear-gradient(135deg,#EDD6A6 0%,#CFA964 55%,#BE9450 100%);
  color:var(--ink);box-shadow:0 14px 30px -14px rgba(106,35,64,.45)}
.btn-primary{background:var(--plum);border:1px solid var(--plum);color:var(--paper)}
.btn-primary:hover{background:#561B34;color:var(--paper)}
.btn-big{padding:1.1rem 1.9rem;font-size:.78rem}
.btn-light{border-color:var(--gold-light);color:var(--gold-light);background:transparent}
.btn-light:hover{background:var(--gold-light);color:var(--plum-deep)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.text-link{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--body);font-weight:500;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--plum);text-decoration:none}
.text-link::after{content:"";width:28px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.text-link:hover::after{width:46px}

/* ================= arch frames (echo the monogram's stadium oval) ================= */
.arch-wrap{position:relative;width:min(100%,460px);margin-inline:auto;isolation:isolate}
/* The gold outline sits up-and-RIGHT by default (photo on the right of its row),
   up-and-LEFT with .flip; .lux-hero-media / .feature-media reserve the matching
   padding so the outline is never clipped by the grid cell. */
.arch-wrap::before{content:"";position:absolute;inset:-16px -16px 16px 16px;border:1px solid var(--gold);
  border-radius:999px 999px 24px 24px;z-index:-1}
.arch{position:relative;margin:0;aspect-ratio:3/4;width:100%;border-radius:999px 999px 16px 16px;
  overflow:hidden;background:var(--section-bg-alt);box-shadow:var(--shadow)}
.arch img{width:100%;height:100%;object-fit:cover;display:block}
.arch-wrap.flip::before{inset:-16px 16px 16px -16px}
.arch-cap{margin-top:1.4rem;text-align:center;font-family:var(--display);font-style:italic;
  font-size:1.05rem;color:var(--muted)}

/* ================= heroes (cream split; the photo lives in an arch) ================= */
/* Kept on the .hero hook so every marketing page still has "a .hero with a real
   photo" (factory standard), but no page uses a full-bleed photo hero any more -
   so no eyebrow ever sits on a photograph and no scrim is needed. */
.hero.lux-hero{min-height:0;display:block;overflow:hidden;color:var(--ink);
  padding:clamp(8rem,13vw,10rem) 0 clamp(4rem,8vw,6.5rem);
  /* the plum glow sits at 45% height so it fades out INSIDE the hero; at 96% the
     section edge cut it off in a hard horizontal line (review D4) */
  background:radial-gradient(1100px 620px at 88% 12%,rgba(214,183,126,.18),transparent 62%),
             radial-gradient(900px 520px at 4% 45%,rgba(143,77,97,.07),transparent 60%),var(--paper)}
.hero.lux-hero h1{color:var(--ink);text-shadow:none}
.hero.lux-hero .eyebrow{color:var(--plum);text-shadow:none}
.hero.lux-hero .lede,.hero.lux-hero .sub{color:var(--muted);text-shadow:none}
.lux-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center}
.lux-hero-grid.flip{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.lux-hero-copy h1{margin:1.2rem 0 1.4rem}
.lux-hero-media{position:relative;padding:18px 18px 0 0}
.lux-hero-grid.flip .lux-hero-media{padding:18px 0 0 18px}
/* services: centred title over a triptych of arches */
.hero.lux-hero.centred{text-align:center}
.hero.lux-hero.centred h1{margin:1.1rem 0 1.3rem}
.hero.lux-hero.centred .lede{margin:0 auto}
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);
  max-width:980px;margin:clamp(2.5rem,5vw,3.8rem) auto 0;align-items:end}
.triptych .arch:nth-child(2){transform:translateY(-26px)}

/* trust line: tracked capitals divided by gold diamonds */
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.3rem;margin-top:2.2rem;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.trust li{display:inline-flex;align-items:center;gap:1.3rem}
.trust li + li::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.center .trust{justify-content:center}
/* On phones the line wraps, and a "separator" diamond then starts the second line
   looking like a stray bullet (seen on the 390px render). So on narrow screens every
   item gets its own diamond and the line reads as a short list instead. */
@media (max-width:640px){
  .trust{gap:.5rem 1.1rem}
  .trust li{gap:.6rem}
  .trust li::before,.trust li + li::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
  .eyebrow-more{display:none}      /* home eyebrow: the DMV half would wrap with a dangling middot */
}

/* Home hero on phones: the PHOTO first (a salon sells the work), small enough that the
   headline and the Book button still land on the first screen (390x844: arch ~108-364,
   h1 ~450, button ~755-815). Scoped to .home-hero - the other heroes keep their order. */
@media (max-width:640px){
  .hero.lux-hero.home-hero{padding-top:5.6rem}
  .home-hero .lux-hero-grid{gap:1.6rem}
  .home-hero .lux-hero-media{order:-1;max-width:210px}
  .home-hero .seal{width:80px;height:80px;left:-12px;bottom:14px}
}

/* the seal: a slowly turning ring of words around the static monogram */
.seal{position:absolute;left:-30px;bottom:34px;width:134px;height:134px;z-index:3}
.seal-ring{width:100%;height:100%;display:block;animation:sealspin 38s linear infinite}
.seal-ring .seal-bg{fill:var(--plum)}
.seal-ring .seal-line{fill:none;stroke:var(--gold-light);stroke-width:.8;opacity:.6}
.seal-ring text{font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:2.6px;
  fill:var(--gold-light);text-transform:uppercase}
/* Width-driven so the M sits INSIDE the inner ring (r=58 of a 100-radius seal =
   58% of the diameter). At the first render it was height-driven at 52%, which made
   it ~67% wide and it covered the ring text - measured on a screenshot, not guessed. */
.seal-mark{position:absolute;left:50%;top:50%;width:40%;height:auto;transform:translate(-50%,-50%)}
@keyframes sealspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.seal-ring{animation:none}}

/* ================= ribbon of style names ================= */
.ribbon-wrap{position:relative}
.ribbon{background:var(--plum);color:var(--gold-light);overflow:hidden;
  border-block:1px solid rgba(230,207,160,.28)}
.ribbon-track{display:flex;width:max-content;animation:ribbon 70s linear infinite}
.ribbon-track span{display:inline-flex;align-items:center;gap:1.7rem;padding:1.05rem 0 1.05rem 1.7rem;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:1.45rem;white-space:nowrap}
.ribbon-track span::after{content:"";width:6px;height:6px;background:var(--rose-gold);transform:rotate(45deg)}
@keyframes ribbon{to{transform:translateX(-50%)}}
/* soft edges: the names fade in and out of the band instead of being sliced off */
.ribbon-wrap::before,.ribbon-wrap::after{content:"";position:absolute;top:1px;bottom:1px;z-index:1;
  width:clamp(48px,8vw,120px);pointer-events:none}
.ribbon-wrap::before{left:0;background:linear-gradient(to left,rgba(106,35,64,0),var(--plum) 70%)}
.ribbon-wrap::after{right:0;background:linear-gradient(to right,rgba(106,35,64,0),var(--plum) 62%)}
/* WCAG 2.2.2 pause control (script inline in index.php). 36px target; the icon is
   gold-light on plum, 7.16:1. The fleet focus ring is plum, invisible on this band. */
.motion-toggle{position:absolute;top:50%;right:clamp(.75rem,2.2vw,1.6rem);z-index:2;transform:translateY(-50%);
  width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(230,207,160,.6);
  background:var(--plum);color:var(--gold-light);display:grid;place-items:center;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.motion-toggle[hidden]{display:none}
.motion-toggle::before{content:"";width:9px;height:11px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.motion-toggle[aria-pressed="true"]::before{width:0;height:0;border-right:0;border-left:9px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.motion-toggle:hover{background:var(--plum-deep);border-color:var(--gold-light)}
.motion-toggle:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
html.motion-paused .ribbon-track,html.motion-paused .seal-ring,.ribbon:hover .ribbon-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .ribbon-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding:.4rem 1rem}
  .ribbon-track span[aria-hidden="true"]{display:none}
  /* static, wrapped list: nothing to pause, and edge fades would hide line-end names */
  .ribbon-wrap::before,.ribbon-wrap::after,.motion-toggle{display:none}}

/* ================= the six pillars ================= */
.pillars{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);margin-top:.5rem}
.pillars li{padding:2.5rem 2.2rem 2.7rem;border-bottom:1px solid var(--line)}
.pillars li:not(:nth-child(3n)){border-right:1px solid var(--line)}
.pillar-num{display:block;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:2.7rem;line-height:1;color:var(--gold-ink)}
.pillars h3{margin:1rem 0 .6rem}
.pillars p{color:var(--muted);font-size:.98rem}

/* ================= signature style cards ================= */
.styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.4rem)}
.style-card{display:block;text-decoration:none;color:var(--ink)}
.style-card .arch{box-shadow:0 22px 44px -26px rgba(44,18,32,.5)}
.style-card img{transition:transform 1s var(--ease)}
.style-card:hover img{transform:scale(1.05)}
.style-card h3{margin-top:1.35rem;font-size:1.5rem}
.style-card p{color:var(--muted);font-size:.95rem;margin-top:.35rem}
.style-card .text-link{margin-top:.95rem}
.style-card:hover .text-link::after{width:46px}
@media (prefers-reduced-motion:reduce){.style-card:hover img{transform:none}}

/* ================= portfolio: the fleet .slider, dressed ================= */
.lux-slider.slider{--slide-h:470px;margin-top:0}
.lux-slider .slider-track{gap:22px;padding:4px 2px 10px}
.lux-slider .slider-track img{border-radius:999px 999px 14px 14px;box-shadow:0 22px 40px -26px rgba(44,18,32,.5)}
.lux-slider figcaption{margin-top:1rem;font-family:var(--display);font-style:italic;font-size:1.08rem;
  color:var(--muted);text-align:center}
/* A caption must never set its slide's width (review 2026-09-14, D1): base.css sizes
   each slide to its content, so on phones "Bora French curl braids, three-quarter view"
   made its figure 45px wider than the 226px photo and broke the 22px rhythm. With
   min-content the PHOTO decides the width and a long caption wraps, balanced, under it. */
.lux-slider .slider-track > figure{width:min-content}
.lux-slider figcaption{text-wrap:balance}
.lux-slider .slider-btn{background:transparent;border:1px solid var(--gold-ui);color:var(--plum)}
.lux-slider .slider-btn:not(:disabled):hover{background:var(--plum);border-color:var(--plum);color:var(--paper)}
.lux-slider .slider-rail{background:rgba(176,141,87,.22)}
.lux-slider .slider-rail::after{background:var(--gold-ink)}
@media (max-width:900px){.lux-slider.slider{--slide-h:380px}}
@media (max-width:560px){.lux-slider.slider{--slide-h:300px}}

/* ================= editorial feature (photo in an arch + copy) ================= */
.feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,7vw,6.5rem);align-items:center}
.feature.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.feature.flip .feature-media{order:2}
.feature-media{padding:16px}
.feature-copy h2{margin-top:1rem}
.feature-copy .lede{margin-bottom:1rem}

/* ================= manifesto ================= */
.manifesto{max-width:900px;margin:0 auto;text-align:center}
.manifesto blockquote{margin:0}
.manifesto p{font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.9rem,3.7vw,3.1rem);line-height:1.22;color:var(--ink)}
.manifesto p::before{content:"\201C";display:block;font-style:normal;font-size:4.4rem;line-height:.55;
  color:var(--gold);margin-bottom:.9rem}
.manifesto figcaption{margin-top:1.6rem;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* ================= plum band (used once per page at most) ================= */
.band-plum{background:radial-gradient(900px 400px at 80% 0%,rgba(230,207,160,.10),transparent 60%),var(--plum);
  color:var(--paper)}
.band-plum h2{color:var(--paper)}
.band-plum h2 em{color:var(--gold-light)}
.band-plum .eyebrow{color:var(--gold-light)}
.band-plum .eyebrow::before,.band-plum .eyebrow::after{background:var(--gold-light)}
.band-plum .lede{color:#EADBD9}                              /* 7.5:1 on plum */
/* The manifesto sets its own dark ink, so it must be re-scoped for the band. The first
   render of /about/ shipped dark-on-plum mission text here - caught on a screenshot. */
.band-plum .manifesto p{color:var(--paper)}                   /* 10.13:1 */
.band-plum .manifesto p::before{color:var(--gold-light)}
.band-plum .manifesto figcaption{color:var(--gold-light)}     /* 7.16:1 */

/* ================= services menu ================= */
.menu-block{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.menu-block.flip{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.menu-block.flip .menu-media{order:2}
.menu-media{position:sticky;top:120px;padding:16px}
.menu-list{list-style:none;margin-top:2rem;border-top:1px solid var(--line)}
.menu-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:1.4rem 2rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.menu-list h3{font-size:1.5rem}
.menu-list p{color:var(--muted);font-size:.98rem}
.tag{display:inline-block;margin-top:.55rem;padding:.2rem .6rem;border:1px solid var(--gold-ui);
  font-family:var(--body);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.menu-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.8rem;margin-top:2.4rem;list-style:none}
.menu-nav a{font-family:var(--body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--plum);text-decoration:none;font-weight:500;padding:.3rem 0;border-bottom:1px solid transparent}
.menu-nav a:hover{border-bottom-color:var(--gold)}

/* the locs & crochet list: two columns, and on the plum band the COMPONENT sets its
   own colours (never ".band-plum p") - see the scoping rule at the top of this file */
.menu-list.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,5vw,4.5rem);
  max-width:1000px;margin:0 auto}
.menu-list.two-col li{display:block}
.menu-list.two-col h3{margin-bottom:.45rem}
.band-plum .menu-list,.band-plum .menu-list li{border-color:rgba(230,207,160,.28)}
.band-plum .menu-list h3{color:var(--paper)}                  /* 10.13:1 on plum */
.band-plum .menu-list p{color:#EADBD9}                        /* 7.5:1 on plum */
@media (max-width:760px){.menu-list.two-col{grid-template-columns:1fr}}
/* The list's own top rule ran unbroken across the column gutter while every row rule
   below breaks at it; the first row of each column now carries its own top rule. */
.menu-list.two-col{border-top:0}
.menu-list.two-col li:nth-child(-n+2){border-top:1px solid var(--line)}
.band-plum .menu-list.two-col li:nth-child(-n+2){border-top-color:rgba(230,207,160,.28)}
@media (max-width:760px){.menu-list.two-col li:nth-child(2){border-top:0}}

/* booking steps: base .steps restyled - gold italic numerals instead of filled discs */
.lux-steps{counter-reset:step;gap:0;border-top:1px solid var(--line);margin-top:.5rem}
.lux-steps li{padding:2.2rem 1.8rem 2.4rem;border-bottom:1px solid var(--line)}
.lux-steps li:not(:last-child){border-right:1px solid var(--line)}
.lux-steps li::before{content:counter(step,decimal-leading-zero);display:block;width:auto;height:auto;
  border-radius:0;background:none;margin:0 0 .9rem;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:2.3rem;line-height:1;color:var(--gold-ink);text-align:left}
.lux-steps h3{font-size:1.35rem;margin-bottom:.4rem}
.lux-steps p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.lux-steps li:nth-child(2){border-right:0}}
/* :nth-child(n) matches every item but carries the same (0,2,1) specificity as the
   :not(:last-child) rule above, so source order - not !important - decides it. */
@media (max-width:520px){.lux-steps li:nth-child(n){border-right:0;padding:1.8rem .4rem}}

/* ================= notes / small facts ================= */
/* Arch-topped cards with a gold diamond: the same vocabulary as the photo arches and
   the trust line, instead of the plain boxed rectangles the review called generic.
   Transparent on every ground (the old (0,2,0) white-fill rule is overridden here). */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem);margin-top:1rem}
.fact{padding:3.3rem 2rem 2.4rem;text-align:center;background:transparent;
  border:1px solid rgba(176,141,87,.5);border-radius:999px 999px 3px 3px / 150px 150px 3px 3px}
.bg-alt .fact,.bg-blush .fact{background:transparent}
.fact::before{content:"";display:block;width:7px;height:7px;margin:0 auto 1.25rem;background:var(--gold);transform:rotate(45deg)}
.fact h3{font-size:1.35rem;margin-bottom:.5rem}
.fact p{color:var(--muted);font-size:.96rem;max-width:34ch;margin-inline:auto}

/* ================= booking band + form ================= */
.reserve-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.details{margin-top:2rem;display:grid;gap:1.25rem}
.details div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.details dt{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:.35rem}
.details dd{margin:0;font-family:var(--display);font-size:1.3rem;line-height:1.35;color:var(--ink)}
.details dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.details dd a:hover{color:var(--plum);border-bottom-color:var(--plum)}
.details dd small{display:block;font-family:var(--body);font-size:.86rem;color:var(--muted);margin-top:.15rem}
.socials{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.6rem;list-style:none}
/* every item leads with its own diamond (as .trust does on phones), so a wrapped row
   never ends in a dangling hairline or starts with a stray separator */
.socials .text-link::after{content:none}
.socials li{display:inline-flex;align-items:center;gap:.6rem}
.socials li::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
/* The double gold rule echoes the inset border on the client's own hang tag. */
.reserve-card{padding:10px;border:1px solid var(--gold);background:var(--paper)}
.reserve-card .lead-panel{border:1px solid var(--gold);border-radius:0;box-shadow:none;background:#FFFDF9}
.lead-panel{border-radius:0;background:#FFFDF9;border:1px solid var(--line);box-shadow:var(--shadow)}
.lead-head{background:transparent;border-bottom:0;color:var(--ink);text-align:center;
  font-family:var(--display);font-weight:600;font-size:1.7rem;padding:1.8rem 1.6rem .2rem}
.lead-head::after{content:"";display:block;width:44px;height:1px;background:var(--gold);margin:.9rem auto 0}
.lead-form{padding:1rem 1.9rem 2rem;gap:1.15rem}
.lead-form label{font-family:var(--body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--muted);gap:.25rem}
.lead-form input,.lead-form textarea,.lead-form select{font-family:var(--body);font-size:1rem;letter-spacing:0;
  text-transform:none;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--field-line);
  border-radius:0;padding:.65rem 0;width:100%}
.lead-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A2340' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right .2rem center}
.lead-form textarea{resize:vertical;min-height:4.5rem}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus{outline:none;
  border-bottom-color:var(--plum);box-shadow:0 2px 0 0 var(--plum)}
.lead-form input:focus-visible,.lead-form textarea:focus-visible,.lead-form select:focus-visible{outline:none}
.lead-form .btn{width:100%;justify-content:center;margin-top:.6rem}
.lead-form .fine{text-align:center;font-size:.82rem;color:var(--muted)}
.lead-form .fine a{color:var(--plum);white-space:nowrap}     /* never split the phone number */
/* shown on /contact/?sent=0 (see contact/index.php) - plum-deep on blush-white, 16:1 */
.form-error{margin:0 0 10px;padding:1rem 1.2rem;border:1px solid var(--plum);border-left-width:3px;
  background:#FFF6F4;color:var(--plum-deep);font-size:.95rem;line-height:1.55}
.form-error a{color:var(--plum);font-weight:500;white-space:nowrap}

/* contact hero: the booking card layered over an arch photo - the form stays above
   the fold AND the hero still carries a real photo (factory standard). */
/* Arch top-right, card bottom-left: the photo shows in full across the top and only
   its lower-left corner sits under the card. (First attempt centred the card over the
   arch and hid most of the photo - measured on a screenshot, recomposed.) */
.contact-stack{position:relative}
.contact-arch{position:absolute;top:0;right:0;width:62%;z-index:0}
.contact-stack .reserve-card{position:relative;z-index:1;width:86%;margin:230px 0 0 0;box-shadow:var(--shadow)}
@media (max-width:980px){
  .contact-stack{padding-top:0;max-width:560px;margin:0 auto;width:100%}
  .contact-arch{position:relative;width:min(64%,300px);margin:0 auto -70px}
  .contact-stack .reserve-card{margin:0;width:100%}
  /* On a contact page the booking form is the point: on phones it now follows the
     headline and lede (which carries tap-to-call), and the details list and socials
     come after it. display:contents lifts the copy's children into the column. */
  .contact-hero .lux-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .contact-hero .lux-hero-copy{display:contents}
  .contact-hero .contact-stack{order:1;margin:2.2rem auto 2.4rem}
  .contact-hero .details{order:2}
  .contact-hero .socials{order:3}
}

/* ================= FAQ ================= */
.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:1.35rem 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  font-family:var(--display);font-weight:600;font-size:1.38rem;line-height:1.3;color:var(--ink);cursor:pointer;list-style:none}
/* The '/ ""' alt text keeps screen readers from reading "plus" after every question;
   the plain declaration first is the fallback for engines that reject that syntax. */
.faq summary::after{content:"+";content:"+" / "";font-family:var(--body);font-weight:300;font-size:1.6rem;color:var(--gold-ink);flex:0 0 auto}
.faq details[open] summary::after{content:"\2212";content:"\2212" / ""}
.faq p{margin-top:.85rem;color:var(--muted);max-width:70ch}

/* ================= reviews partial (renders nothing until Trustindex is set) ================= */
.reviews-more a{color:var(--plum)}

/* ================= footer ================= */
.site-footer{background:radial-gradient(900px 380px at 12% 0%,rgba(230,207,160,.08),transparent 60%),var(--plum-deep);
  color:#E8DDD3;border-top:1px solid rgba(214,183,126,.35);padding:3.4rem 0 1.4rem}
/* the client's logo on its own cream plate, cut to a stadium tag (build-logo.ps1) */
.foot-logo{height:104px;width:auto;margin-bottom:1.1rem;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.site-footer .foot-head{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--gold-light);letter-spacing:.01em}
.foot-nap,.foot-area,.foot-hours,.foot-links{font-size:.9rem}
.foot-area{color:#C7B8AF}
.site-footer a{color:#E8DDD3}
.site-footer a:hover,.foot-links a:hover{color:var(--gold-light)}
.foot-legal{border-top:1px solid rgba(214,183,126,.22);color:#C7B8AF}

/* ================= /about/ story (the client's own words, 2026-09-17) ================= */
/* The story is long enough that only its opening sits beside the hero photo; the rest is
   one centred column so it reads like a page of prose, closing on a display line. */
.story{max-width:500px;margin:0 auto}         /* 62ch measured ~86 chars in Jost - review D1 */
.story p{color:var(--muted);font-size:1.06rem;line-height:1.85}           /* 5.22:1 on --section-bg-alt */
.story p + p{margin-top:1.15rem}
.story-close{max-width:46ch;margin:clamp(2.6rem,5vw,3.6rem) auto 0;text-align:center;
  font-family:var(--display);font-style:italic;font-weight:500;color:var(--ink);
  font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.35;text-wrap:balance}
.story-close::before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin:0 auto 1.4rem}
/* the closing line of a feature column: their words, set as the section's sign-off */
.feature-copy .emph{color:var(--ink);font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.3rem);line-height:1.45;margin-top:1.3rem}

/* Same ch/Jost mismatch as .story in the long feature columns (review D2): 62ch renders
   ~88 characters at 768-980px, where the grid is single-column. Capped by measure. */
.feature-copy.prose{max-width:500px}   /* same as .story, so the two stacked columns share one edge */
/* Stacked at <=980px the story column is centred and the feature copy was flush left, so
   two identical columns started at different x on consecutive screens (review D3). */
@media (max-width:980px){.feature-copy{margin-inline:auto}}

/* ================= responsive ================= */
@media (max-width:980px){
  .lux-hero-grid,.lux-hero-grid.flip,.feature,.feature.flip,.reserve-grid,.menu-block,.menu-block.flip{grid-template-columns:1fr}
  .lux-hero-grid.flip .lux-hero-media{order:2}
  /* Service groups keep photo-then-list on phones (consistent menu rhythm). Flipped
     FEATURES keep their copy first, so a page never stacks two photos back to back
     (it did on /about/ at 390px: hero photo, then the "Who we are" photo). */
  .menu-block.flip .menu-media{order:0}
  .lux-hero-media{padding:18px 18px 0 0;max-width:440px;margin:0 auto;width:100%}
  .menu-media{position:relative;top:auto;max-width:380px;margin:0 auto;width:100%}
  .styles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars li:not(:nth-child(3n)){border-right:0}
  .pillars li:nth-child(odd){border-right:1px solid var(--line)}
  .facts{grid-template-columns:1fr;max-width:520px;margin-inline:auto}   /* arch cards, not wide domes */
}
@media (max-width:640px){
  .pillars{grid-template-columns:1fr}
  .pillars li:nth-child(odd){border-right:0}
  .pillars li{padding:2rem .4rem 2.2rem}
  .menu-list li{grid-template-columns:1fr;gap:.4rem}
  .details div{grid-template-columns:1fr;gap:.2rem}
  .seal{width:104px;height:104px;left:-10px;bottom:18px}
  .triptych{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .triptych .arch:nth-child(2){transform:translateY(-14px)}
  .ribbon-track span{font-size:1.2rem}
  .lead-form{padding:1rem 1.2rem 1.6rem}
}
@media (max-width:420px){.styles{gap:1rem}.style-card h3{font-size:1.28rem}.style-card p{display:none}}