/* Sweet T Salon design system v1
   Layout patterns from the Nikka Webflow template, rebuilt in Sweet T fonts and colours.
   Brand green #4DC2B0 is fixed. Everything else is proposed. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Prata"; src: url("/assets/fonts/prata.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --teal: #4DC2B0;          /* Sweet T green. Fills, accents, icons on dark. Never white text on it. */
  --teal-ink: #1E7A6E;      /* Green for text and links on white. 5.2:1 */
  --teal-soft: #DDF3EF;     /* Tint for pills and highlights */

  /* Deep greens (from Nikka, shifted to the Sweet T hue) */
  --deep: #0E3833;          /* Hero panel, dark sections */
  --deeper: #0A2622;        /* Footer */

  /* Neutrals */
  --ink: #10201E;           /* Headings and primary text */
  --body: #4A5856;          /* Body copy */
  --mute: #6E7C7A;          /* Captions, meta. 4.6:1 on white */
  --line: #DDE8E6;          /* Borders, rules */
  --mist: #F1F7F6;          /* Muted section and card background */
  --white: #FFFFFF;

  /* Optional warm accents (proposed, not yet approved) */
  --tea: #C98A3D;           /* "Sweet tea" amber. Stars and small highlights only */
  --blush: #F7ECE6;         /* Warm alternate section background */

  /* On dark */
  --on-dark: #FFFFFF;
  --on-dark-mute: rgba(255,255,255,.62);
  --on-dark-line: rgba(255,255,255,.14);
  --on-dark-fill: rgba(255,255,255,.06);

  /* Type */
  --f-display: "Prata", Georgia, "Times New Roman", serif;
  --f-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-hero: clamp(2.4rem, 1.4rem + 3vw, 3.6rem);
  --t-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --t-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --t-h3: clamp(1.4rem, 1.25rem + .6vw, 1.8rem);
  --t-h4: 1.25rem;
  --t-lead: clamp(1.125rem, 1.05rem + .3vw, 1.3rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-meta: .78rem;

  /* Space, radius, layout */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(4rem, 3rem + 5vw, 8rem);
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0;
  --r-btn: 8px;            /* buttons are the only rounded corners (Ethan, 2026-10-05) */
  --wrap: 1240px;
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --header-h: 88px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f-body); font-size: var(--t-body); line-height: 1.65; color: var(--body); background: var(--white); text-align: left; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; color: var(--ink); margin: 0 0 var(--s-4); letter-spacing: -.005em; }
h1 { font-size: var(--t-h1); line-height: 1.12; }
h2 { font-size: var(--t-h2); line-height: 1.15; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
h4 { font-size: var(--t-h4); line-height: 1.3; }
p { margin: 0 0 var(--s-4); }
/* Links (Nikka): body links carry a 1px line that shrinks to the left on hover and grows back
   on leave. Nav and footer links have no line until hover, then it grows in from the left.
   500ms, outQuart. Components that are not text links switch the line off below. */
a { color: var(--teal-ink); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 1px; transition: background-size .5s cubic-bezier(.25, 1, .5, 1), color .2s ease; }
a:hover { color: var(--ink); background-size: 0 1px; }
.btn, .brand, .skip, .mega a, .menu-panel a, .post__img, .nav-phone, .stf-file-btn { background-image: none; }
.nav-links > li > a, .nav-links > li > button, .footer a, .connect a, .crumbs a, .post h3 a { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: background-size .5s cubic-bezier(.25, 1, .5, 1), color .2s ease; }
.nav-links > li > a:hover, .nav-links > li > button:hover, .has-mega.open > button, .footer a:hover, .connect a:hover, .crumbs a:hover, .post h3 a:hover { background-size: 100% 1px; }
.nav-links > li > a, .nav-links > li > button { background-position: 12px calc(100% - 4px); background-size: 0 1px; }
.nav-links > li > a:hover, .nav-links > li > button:hover, .has-mega.open > button { background-size: calc(100% - 24px) 1px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--mist { background: var(--mist); }
.section--blush { background: var(--blush); }
.section--deep { background: var(--deep); color: var(--on-dark-mute); }
.section--deep h2, .section--deep h3 { color: var(--on-dark); }

/* ---------- Type helpers ---------- */
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink); }
.meta { font-family: var(--f-body); font-weight: 500; font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); line-height: 1.6; }
.h-split .soft { color: var(--mute); display: block; }
.on-dark .h-split .soft, .section--deep .h-split .soft { color: var(--on-dark-mute); }
.small { font-size: var(--t-small); }

/* Section label: small caps with rule (Nikka "ABOUT" column) */
.label { font-family: var(--f-body); font-weight: 500; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin: 0; }
.section--deep .label { color: var(--on-dark); border-color: var(--on-dark-line); }

/* Pill badge (Nikka "FOR BUSINESSES") */
.pill { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-body); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--teal-soft); border: 1px solid transparent; border-radius: var(--r-sm); padding: .45em .8em; line-height: 1; }
.pill--dark { color: var(--on-dark); background: var(--on-dark-fill); border-color: transparent; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .55em; font-family: var(--f-body); font-size: .95rem; font-weight: 500; line-height: 1; padding: 14px 20px; border-radius: var(--r-btn); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.btn svg { width: 16px; height: 16px; flex: none; }
/* Button hover (Nikka): the label rolls up and an identical copy rolls in from below. 500ms, outQuint. */
.btn__roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.15; height: 1.15em; vertical-align: top; }
.btn__roll > span { display: block; transition: transform .5s cubic-bezier(.23, 1, .32, 1); }
.btn__roll > span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .btn__roll > span, .stf-submit:hover:not(:disabled) .btn__roll > span { transform: translateY(-100%); }
/* Buttons (Nikka, 2026-10-05): on dark grounds the primary is white and the second button is glass.
   On light grounds the primary is deep green. Hover is the label roll; colours barely move. */
.btn--primary { background: var(--deep); color: var(--white); }
.btn--primary:hover { background: var(--ink); color: var(--white); }
:is(.header, .hero, .page-hero, .cta-band, .section--deep, .mega-promo, .menu-panel, .quote-band, .demo-dark, .connect, .opt-stage) .btn--primary { background: var(--white); color: var(--deep); border-color: var(--white); }
:is(.header, .hero, .page-hero, .cta-band, .section--deep, .mega-promo, .menu-panel, .quote-band, .demo-dark, .connect, .opt-stage) .btn--primary:hover { background: #EEF5F4; color: var(--deep); }
.btn--dark { background: var(--deep); color: var(--white); }
.btn--dark:hover { background: var(--ink); color: var(--white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--light { background: var(--white); color: var(--deep); }
.btn--light:hover { background: var(--teal-soft); color: var(--deep); }
.btn--ghost { background: rgba(255,255,255,.06); color: var(--white); border-color: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: var(--white); }
.btn--sm { padding: 10px 14px; font-size: .875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow { font-weight: 500; color: var(--ink); }
.link-arrow:hover { color: var(--teal-ink); }

/* ---------- Header / nav (Nikka) ---------- */
/* Sticky header. Transparent over the dark hero at the top of the page. Once the page
   scrolls (html.is-scrolled, from site.js) it turns solid and a little shorter; the full
   nav and mega menu stay. Below 980px it is the compact layout: logo, phone, Book Now, Menu. */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .3s ease, box-shadow .3s ease; }
.header--demo { position: relative; z-index: 5; }
.header--demo.header--over { position: absolute; inset: 0 0 auto 0; }
.header--solid { background: var(--white); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); transition: height .3s ease; }
html.is-scrolled .header:not(.header--demo), .header--compact { background: rgba(14,56,51,.97); box-shadow: 0 1px 0 var(--on-dark-line), 0 10px 30px rgba(10,38,34,.18); }
html.is-scrolled .header:not(.header--demo) .nav, .header--compact .nav { height: 72px; }
.header--compact .nav-links { display: none; }
.header--compact .menu-btn { display: inline-flex; }
@supports (backdrop-filter: blur(8px)) { html.is-scrolled .header:not(.header--demo), .header--compact { background: rgba(14,56,51,.9); backdrop-filter: blur(10px); } }
/* Logo: client wordmark inlined as SVG, currentColor. Script T in brand green. */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--white); line-height: 0; flex: none; }
.brand:hover { color: var(--white); }
.logo { display: block; width: 168px; height: auto; }
/* Nav logo. The wordmark's lowercase baseline sits at 74.0% of the SVG height (y 93.9 of 126.83),
   below the box centre. Nav text (Roboto, line-height 1) has its baseline 0.342em below centre.
   translateY = 0.342 * nav font size - 0.240 * logo height puts both baselines on one line. */
.header .logo, .menu-head .logo { width: auto; height: 33px; transform: translateY(-2.9px); }
/* Option B: logo lowercase matches nav text size (x-height 8.4px), nav text at 16px. */
.header--matched .logo { height: 26px; transform: translateY(-0.8px); }
.header--matched .nav-links a, .header--matched .nav-links button, .header--matched .nav-phone { font-size: 1rem; }
.logo .logo-t { fill: var(--teal); }
.logo--plain .logo-t { fill: currentColor; }
.logo--demo { width: 100%; max-width: 300px; }
.header--solid .brand, .header--solid .brand:hover { color: var(--ink); }
.header--solid .logo .logo-t, .card--white .logo .logo-t { fill: var(--teal-ink); }
.card--white .logo--plain .logo-t { fill: currentColor; }
.nav-links { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav-links a, .nav-links button { display: inline-flex; align-items: center; gap: .3em; font: 400 .92rem/1 var(--f-body); color: var(--on-dark-mute); text-decoration: none; padding: 10px 12px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; }
.nav-links a:hover, .nav-links button:hover, .nav-links [aria-current="page"] { color: var(--white); }
.header--solid .nav-links a, .header--solid .nav-links button { color: var(--body); }
.header--solid .nav-links a:hover, .header--solid .nav-links button:hover, .header--solid .nav-links [aria-current="page"] { color: var(--ink); }
.nav-links svg { width: 12px; height: 12px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; font: 500 .9rem/1 var(--f-body); color: var(--white); text-decoration: none; }
.nav-phone svg { width: 15px; height: 15px; color: var(--teal); }
.nav-phone:hover { color: var(--teal); }
.header--solid .nav-phone { color: var(--ink); }
.header--solid .nav-phone:hover { color: var(--teal-ink); }

.has-drop { position: relative; }
.drop { position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-2); list-style: none; margin: 0; box-shadow: 0 18px 40px rgba(10,38,34,.16); display: none; }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }  /* hover bridge across the gap */
.has-drop.open .drop { display: block; }
html:not(.js) .has-drop:hover .drop, html:not(.js) .has-drop:focus-within .drop { display: block; }
.has-drop button svg, .has-mega button svg { transition: transform .2s ease; }
.has-mega.open button svg { transform: rotate(180deg); }
.has-drop.open button svg { transform: rotate(180deg); }
.nav-links [data-current] { color: var(--white); }
.drop__sep { border-top: 1px solid var(--line); margin-top: var(--s-2); padding-top: var(--s-2); }

/* Mega menu (chosen 2026-10-05). Services opens a wide panel under the nav; About a short one.
   Opens on click, or on hover with a delay (site.js). The ::before bridge covers the gap. */
.has-mega { position: static; }
.has-mega--small { position: relative; }
.mega { position: absolute; left: var(--gutter); right: var(--gutter); max-width: calc(var(--wrap) - var(--gutter) * 2); margin: 0 auto; top: calc(100% - 8px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 50px rgba(10,38,34,.2); padding: var(--s-6); display: none; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-6); z-index: 10; text-align: left; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.has-mega.open .mega { display: grid; }
html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega { display: grid; }
.mega .meta { margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.mega-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s-4); list-style: none; margin: 0; padding: 0; }
.mega-list { list-style: none; margin: 0; padding: 0; }
.nav-links .mega a.mi { display: block; padding: 10px 12px; border-radius: var(--r-md); text-decoration: none; color: var(--ink); font-size: inherit; }
.nav-links .mega a.mi:hover, .nav-links .mega a.mi[aria-current="page"] { background: var(--mist); color: var(--ink); }
.mega a.mi b { display: block; font-weight: 500; font-size: .95rem; line-height: 1.3; }
.mega a.mi span { display: block; font-size: .82rem; color: var(--mute); margin-top: 3px; line-height: 1.35; }
.mega-promo { background: var(--deep); color: var(--on-dark-mute); border-radius: var(--r-lg); padding: var(--s-5); }
.mega-promo .label { color: var(--white); border-color: var(--on-dark-line); }
.mega-promo__h { font-family: var(--f-display); color: var(--white); font-size: 1.35rem; line-height: 1.25; margin: var(--s-4) 0 var(--s-2); }
.mega-promo p:not(.label):not(.mega-promo__h) { font-size: .9rem; margin-bottom: var(--s-4); }
.nav-links .mega-promo .btn { display: inline-flex; padding: 10px 14px; font-weight: 500; border-radius: var(--r-btn); }
.mega--small { left: 0; right: auto; width: 280px; top: calc(100% + 10px); grid-template-columns: 1fr; padding: var(--s-2); }
.mega--small::before { top: -14px; height: 14px; }
.drop a, .header--solid .drop a { display: block; color: var(--ink); padding: 10px 12px; font-size: .92rem; }
.drop a:hover, .header--solid .drop a:hover { background: var(--mist); color: var(--ink); }

/* Menu button (GGH pattern): label + burger, shown below 980px */
.menu-btn { display: none; align-items: center; gap: 12px; margin-left: var(--s-2); padding: 8px 0; background: none; border: 0; cursor: pointer; color: var(--white); font: 500 .92rem/1 var(--f-body); letter-spacing: .02em; }
.menu-btn:hover { color: var(--teal); }
.header--solid .menu-btn { color: var(--ink); }
.header--solid .menu-btn:hover { color: var(--teal-ink); }
.burger { display: inline-flex; flex-direction: column; gap: 4px; }
.burger i { display: block; width: 24px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s ease; }
.menu-btn:hover .burger i:nth-child(1) { transform: translateY(-1px); }
.menu-btn:hover .burger i:nth-child(3) { transform: translateY(1px); }

/* Slide-in menu panel (GGH pattern): right panel, overlay, sub-panels slide over the root list */
.menu-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(10,38,34,.55); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.menu-overlay.open { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.menu-panel { position: fixed; top: 0; right: 0; z-index: 100; display: flex; flex-direction: column; width: min(380px, 90vw); height: 100%; overflow-y: auto; background: var(--deep); color: var(--white); box-shadow: -10px 0 34px rgba(0,0,0,.3); transform: translateX(100%); visibility: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s linear .4s; }
.menu-panel.open { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s; }
html.menu-open { overflow: hidden; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 14px 26px; min-height: 72px; border-bottom: 1px solid var(--on-dark-line); }
.menu-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, transform .3s ease; }
.menu-close svg { width: 18px; height: 18px; }
.menu-close:hover { background: rgba(255,255,255,.12); transform: rotate(90deg); }
.menu-nav { display: grid; overflow: hidden; }
.menu-nav .m-root, .menu-nav .m-panel { grid-area: 1 / 1; display: flex; flex-direction: column; transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .3s ease, visibility 0s linear .38s; }
.menu-nav .m-panel { transform: translateX(100%); opacity: 0; visibility: hidden; }
.menu-nav.sub-open .m-root { transform: translateX(-28%); opacity: 0; visibility: hidden; pointer-events: none; }
.menu-nav .m-panel.is-active { transform: none; opacity: 1; visibility: visible; transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .3s ease, visibility 0s; }
.m-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 26px; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); background: none; color: var(--white); font: 500 .85rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; text-align: left; text-decoration: none; cursor: pointer; transition: background .18s ease; }
.menu-panel a { color: var(--white); text-decoration: none; }
.m-item:hover, .m-sub a:hover { background: rgba(77,194,176,.16); color: var(--white); }
.m-chev { flex: none; width: 8px; height: 8px; margin-left: 12px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.m-chev--back { transform: rotate(135deg); margin: 0 12px 0 0; }
.m-back { display: flex; align-items: center; padding: 14px 26px; border: 0; border-bottom: 1px solid var(--on-dark-line); background: var(--on-dark-fill); color: var(--white); font: 500 .72rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.m-back:hover { background: rgba(255,255,255,.12); }
.m-sub { display: flex; flex-direction: column; padding-bottom: 12px; }
.m-sub .m-h { padding: 16px 26px 8px; font: 500 .7rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.m-sub a { padding: 10px 26px 10px 40px; font-size: .95rem; line-height: 1.3; }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 32px; }
.menu-foot .btn { width: 100%; justify-content: center; }
.menu-foot__tel { font-weight: 500; }
.menu-foot__tel:hover { color: var(--teal) !important; }
.menu-foot .meta { color: var(--on-dark-mute); }

@media (max-width: 980px) {
  .nav { gap: var(--s-3); height: 72px; }
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-phone span { display: none; }
  .nav-phone { width: 38px; height: 38px; justify-content: center; border: 1px solid var(--on-dark-line); border-radius: 50%; }
  .nav-phone svg { width: 16px; height: 16px; }
  .header .logo { height: 28px; transform: translateY(-2.4px); }
}
@media (max-width: 400px) {
  .nav-right { gap: var(--s-2); }
  .nav-book { padding: 9px 11px; }
  .menu-btn__label { display: none; }
  .header .logo { height: 25px; }
}
@media (prefers-reduced-motion: reduce) { .menu-panel, .menu-overlay, .menu-nav .m-root, .menu-nav .m-panel { transition: none; } }

/* ---------- Leaf motif: the sprig from the live keratin page (Font Awesome "pagelines", CC BY 4.0) ---------- */
.leaf { display: inline-block; width: .75em; height: 1em; color: var(--teal); vertical-align: -.12em; }
.label .leaf { margin-right: .5em; }
/* The script T from the logo is the brand mark (replaced the leaf 2026-10-05). It is about square. */
.leaf.tee { width: 1.44em; height: 1.44em; vertical-align: middle; }
.label { display: flex; align-items: center; }
.label .leaf.tee { margin-right: .45em; flex: none; }
.hero__proof .leaf.tee { width: 31px; height: 31px; color: var(--teal); }
.leaf-rule { display: flex; align-items: center; gap: var(--s-3); color: var(--teal); }
.leaf-rule::before, .leaf-rule::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.leaf-rule::before { flex: 0 0 48px; }
.leaf-rule svg { width: 26px; height: 26px; }
/* Watermark T: the whole letter, flush to the bottom-right corner of its green panel. */
.leaf-mark { position: absolute; right: 0; bottom: 0; pointer-events: none; color: var(--teal); opacity: .08; height: min(88%, 420px); width: auto; aspect-ratio: 125 / 127.5; }
.leaf-list { list-style: none; margin: 0; padding: 0; }
.leaf-list li { display: flex; gap: var(--s-3); padding: 8px 0; color: var(--ink); line-height: 1.45; }
.leaf-list li { align-items: center; }
.leaf-list li svg { flex: none; width: 22px; height: 22px; color: var(--teal-ink); }

/* ---------- Hero (Nikka split) ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: min(100vh, 860px); background: var(--deep); color: var(--on-dark-mute); }
.hero__copy { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + var(--s-7)) var(--gutter) var(--s-8); padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.hero__copy h1 { font-size: var(--t-hero); line-height: 1.06; color: var(--white); margin: var(--s-5) 0 var(--s-5); max-width: 15ch; }
.hero__copy .lead { color: var(--on-dark-mute); max-width: 34rem; margin-bottom: var(--s-6); }
.hero__media { position: relative; min-height: 420px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 180px; background: linear-gradient(180deg, rgba(10,38,34,.75), rgba(10,38,34,0)); z-index: 1; }
.hero__proof { z-index: 2; }
.hero__proof { position: absolute; right: var(--s-5); bottom: var(--s-5); display: flex; align-items: center; gap: var(--s-3); background: rgba(10,38,34,.72); backdrop-filter: blur(6px); color: var(--white); border: 1px solid var(--on-dark-line); border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); font-size: var(--t-small); line-height: 1.35; }
.hero__proof strong { display: block; font-weight: 500; }
.hero__proof .meta { color: var(--on-dark-mute); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-7); }
  .hero__media { min-height: 360px; }
}

/* Interior page hero (no photo) */
.page-hero { background: var(--deep); padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-8); color: var(--on-dark-mute); }
.page-hero h1 { color: var(--white); margin: var(--s-4) 0; max-width: 18ch; }
.page-hero .lead { color: var(--on-dark-mute); max-width: 40rem; margin: 0; }
.crumbs { font-family: var(--f-body); font-weight: 500; font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-mute); }
.crumbs a { color: var(--on-dark-mute); text-decoration: none; }
.crumbs a:hover { color: var(--white); }

/* ---------- Proof strip (Nikka logo row) ---------- */
.proof-strip { border-bottom: 1px solid var(--line); padding: var(--s-6) 0; }

/* ---------- Three-column intro (Nikka about / values / mission) ---------- */
.intro { display: grid; grid-template-columns: 220px 1fr 1fr; gap: var(--s-7); align-items: start; }
.intro h2 { margin: 0; }
.intro .lead { margin-bottom: var(--s-5); }
@media (max-width: 980px) { .intro { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- Grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.with-label { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-7); align-items: start; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr 1fr; } .with-label { grid-template-columns: 1fr; gap: var(--s-5); } }
@media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Service card (Nikka services) ---------- */
.card { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.card--white { background: var(--white); }
.card h3 { margin-bottom: var(--s-3); }
.card > p { margin-bottom: var(--s-5); }
.card .meta { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.card .link-arrow { display: inline-block; margin-top: var(--s-5); }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; padding: 8px 0; color: var(--ink); font-size: .95rem; line-height: 1.45; }
.checks svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--teal-ink); }
.plus li svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); }

/* ---------- Price menu ---------- */
.menu-group + .menu-group { margin-top: var(--s-7); }
.menu-group h3 { margin-bottom: var(--s-2); }
.menu-group > p { color: var(--mute); font-size: var(--t-small); }
.price-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.price-list .price { font-family: var(--f-body); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--ink); white-space: nowrap; }
.price-list .price small { color: var(--mute); font-size: .78rem; margin-right: .4em; }

/* ---------- Process (Nikka sticky image + step cards) ---------- */
.process { display: grid; grid-template-columns: 1fr 1fr; background: var(--mist); }
.process__media { position: relative; min-height: 520px; }
.process__sticky { position: sticky; top: 0; height: 100vh; max-height: 900px; overflow: hidden; }
.process__sticky img { width: 100%; height: 100%; object-fit: cover; }
.process__sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,38,34,.1) 30%, rgba(10,38,34,.82)); }
.process__title { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-7); z-index: 2; color: var(--on-dark-mute); }
.process__title h2 { color: var(--white); font-size: var(--t-h1); }
.process__title p { max-width: 30rem; }
.process__steps { padding: var(--s-8) var(--gutter); display: grid; gap: var(--s-5); align-content: start; max-width: 620px; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.step .meta { color: var(--ink); margin-bottom: var(--s-3); }
.step h3 { margin-bottom: var(--s-2); }
.step p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; }
  .process__sticky { position: relative; height: 460px; }
}

/* ---------- Testimonial (Nikka full-bleed quote) ---------- */
.quote-band { position: relative; color: var(--white); overflow: hidden; }
.quote-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,38,34,.92) 0%, rgba(10,38,34,.78) 55%, rgba(10,38,34,.35) 100%); z-index: 1; }
.quote-band .wrap { position: relative; z-index: 2; padding-top: var(--section); padding-bottom: var(--section); }
.quote-band svg.q { width: 34px; height: 34px; color: var(--teal); margin-bottom: var(--s-5); }
.quote-band blockquote { margin: 0; font-family: var(--f-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); line-height: 1.25; max-width: 22ch; color: var(--white); }
.quote-by { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.quote-by .meta { color: var(--on-dark-mute); }
.stars { display: inline-flex; gap: 2px; color: var(--tea); }
.stars svg { width: 15px; height: 15px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: var(--deep); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 1.1rem; flex: none; }

/* Review card */
.review { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.review h3 { font-size: var(--t-h4); margin: 0; }
.review p { margin: 0; }
.review footer { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.review footer strong { color: var(--ink); font-weight: 500; display: block; line-height: 1.2; }

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; font-family: var(--f-display); font-size: 1.25rem; line-height: 1.35; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-ink); }
.faq summary .ico { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
.faq summary .ico svg { width: 14px; height: 14px; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--s-5); max-width: 46rem; }
.faq .answer p:last-child { margin: 0; }

/* ---------- Blog card (Nikka news) ---------- */
.post { display: flex; flex-direction: column; }
.post__img { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: var(--s-4); }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__date { position: absolute; top: var(--s-4); left: var(--s-4); background: rgba(10,38,34,.72); backdrop-filter: blur(6px); border: 1px solid var(--on-dark-line); border-radius: var(--r-md); color: var(--white); padding: 8px 10px; text-align: left; line-height: 1.1; }
.post__date b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; }
.post__date span { font-family: var(--f-body); font-weight: 500; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.post .meta { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.post h3 { font-size: 1.4rem; margin-bottom: var(--s-2); }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--teal-ink); }
.post .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- Answer (AEO): the direct answer under a question heading ----------
   Default is the pull statement (option B): Prata, the T beside it, a thin green rule on top.
   Fact-heavy answers add a :::facts block (option C): ruled label and value rows. */
.answer-box { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); border-top: 1px solid var(--teal); padding-top: var(--s-5); margin-bottom: var(--s-6); }
.answer-box > svg { width: 34px; height: 34px; color: var(--teal-ink); }
.answer-box p { font-family: var(--f-display); font-size: 1.4rem; line-height: 1.42; color: var(--ink); margin: 0 0 var(--s-3); }
.answer-box p:last-child { margin: 0; }
.answer-box a { color: var(--ink); }
.section--deep .answer-box p { color: var(--white); }
.facts { border-top: 1px solid var(--ink); margin: 0 0 var(--s-6); }
.facts > div { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-top: 4px; }
.facts dd { margin: 0; color: var(--ink); }
.answer-box + .facts { margin-top: calc(var(--s-6) * -.5); }
@media (max-width: 560px) { .answer-box p { font-size: 1.2rem; } .answer-box > svg { width: 26px; height: 26px; } .facts > div { grid-template-columns: 100px 1fr; } }

/* ---------- Stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats div { padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.stats b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--ink); line-height: 1.1; margin-bottom: var(--s-2); }
.section--deep .stats { border-color: var(--on-dark-line); }
.section--deep .stats b { color: var(--white); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- CTA band (Nikka contact CTA, left aligned) ---------- */
.cta-band { position: relative; overflow: hidden; color: var(--on-dark-mute); }
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(10,38,34,.8); z-index: 1; }
.cta-band .wrap { position: relative; z-index: 2; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.cta-band h2 { color: var(--white); font-size: var(--t-h1); max-width: 16ch; }
.cta-band p { max-width: 34rem; margin-bottom: var(--s-6); }

/* ---------- Visit / contact block ---------- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }
.visit dl { margin: 0; display: grid; gap: var(--s-5); }
.visit dt { margin-bottom: var(--s-1); }
.visit dd { margin: 0; color: var(--ink); }
.visit img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.hours td + td { text-align: right; font-variant-numeric: tabular-nums; font-size: .88rem; }
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: var(--s-4); }
.field label { font-family: var(--f-body); font-weight: 500; font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--f-body); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; width: 100%; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.field .hint { font-size: var(--t-small); color: var(--mute); }

/* ---------- Connect bar + footer (Nikka) ---------- */
.connect { background: var(--deep); color: var(--white); border-bottom: 1px solid var(--on-dark-line); }
.connect .wrap { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; justify-content: space-between; padding-top: var(--s-6); padding-bottom: var(--s-6); }
.connect h2, .connect__title { font-family: var(--f-display); color: var(--white); font-size: var(--t-h3); margin: 0; }
.connect ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-5); }
.connect a { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--white); }
.connect a:hover { color: var(--teal); }
.footer .social a, .connect a { background-position: 50px 100%; }
.ico-badge { width: 38px; height: 38px; border-radius: 50%; background: var(--on-dark-fill); border: 1px solid var(--on-dark-line); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico-badge svg { width: 16px; height: 16px; }

.footer { background: var(--deeper); color: var(--on-dark-mute); padding: var(--s-8) 0 var(--s-5); font-size: .95rem; }
.footer__grid { display: grid; grid-template-columns: 1.25fr 1.15fr 1fr 1fr 1.15fr; gap: var(--s-6); }
.footer .brand, .footer .brand:hover { color: var(--white); text-decoration: none; }
.footer .logo { width: 200px; }
.footer h3, .footer__h { font-family: var(--f-body); font-weight: 500; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--white); padding-bottom: var(--s-3); border-bottom: 1px solid var(--on-dark-line); margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 5px 0; }
.footer a { color: var(--on-dark-mute); text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer .social { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.footer .social a { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-body); font-weight: 500; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; }
.footer__base { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--on-dark-line); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; font-family: var(--f-body); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.footer__base nav { display: flex; gap: var(--s-5); }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }



/* =====================================================================
   Page templates (build.py)
   ===================================================================== */

/* Interior hero with photo: Nikka split, shorter */
.hero--page { min-height: 0; }
.hero--page .hero__copy { padding-top: calc(var(--header-h) + var(--s-7)); padding-bottom: var(--s-8); }
.hero--page .hero__copy h1 { font-size: var(--t-h1); max-width: 18ch; margin: var(--s-4) 0; }
.hero--page .hero__media { min-height: 460px; }
.hero--page .crumbs a, .page-hero .crumbs a { color: var(--on-dark-mute); }
.crumbs span { color: var(--white); }
.page-hero .btn-row, .hero--page .btn-row { margin-top: var(--s-6); }
.page-hero__meta { color: var(--on-dark-mute); margin-top: var(--s-4); }
.hero--page .hero__copy .lead { margin-bottom: 0; }

/* Prose: section and article body */
.prose { min-width: 0; max-width: 48rem; }
.prose > h2 { margin-bottom: var(--s-5); }
.prose h2:not(:first-child) { margin-top: var(--s-8); }
.prose h3 { font-size: var(--t-h4); margin: var(--s-6) 0 var(--s-3); }
.prose h4 { font-family: var(--f-body); font-weight: 500; font-size: 1rem; margin: var(--s-5) 0 var(--s-2); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--s-5); }
.prose li { margin: 0 0 var(--s-2); padding-left: .25rem; }
.prose ul li::marker { color: var(--teal-ink); }
.prose ol li::marker { color: var(--teal-ink); font-weight: 500; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose > * + .answer-box, .prose > * + .faq, .prose > * + .steps, .prose > * + .cards, .prose > * + .price-list,
.prose > * + .quote-card, .prose > * + .video, .prose > * + .callout, .prose > * + .reviews-grid, .prose > * + .people { margin-top: var(--s-5); }
.callout p:last-child { margin-bottom: 0; }
.prose .checks, .prose .leaf-list { padding-left: 0; }
.prose .checks li, .prose .leaf-list li { padding-left: 0; margin: 0; }
.prose--article { font-size: 1.0625rem; }
.prose--article > p:first-of-type { font-size: var(--t-lead); color: var(--ink); line-height: 1.55; }
.article-side { position: sticky; top: var(--s-6); align-self: start; }
.article-side .meta { margin: 0 0 4px; }
@media (max-width: 980px) { .article-side { position: static; } }

.figure { margin: 0 0 var(--s-6); }
.figure img { border-radius: var(--r-lg); width: 100%; }
.figure--feature img { aspect-ratio: 16 / 9; object-fit: cover; }

.table-wrap { overflow-x: auto; margin: 0 0 var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; font-weight: 500; font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--mist); padding: 12px 16px; }
.table td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink); }

.price-note { font-size: var(--t-small); color: var(--mute); }
.prose .price-list { padding-left: 0; margin-bottom: var(--s-6); }
.prose .price-list li { margin: 0; padding-left: 0; }
.price-list li > span:first-child { min-width: 0; }

.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
.steps .step { background: var(--white); }
.section--mist .steps .step { background: var(--white); }
.section:not(.section--mist) .steps .step { background: var(--mist); }
.steps .step h3 { margin-top: 0; }
@media (max-width: 680px) { .steps { grid-template-columns: 1fr; } }

.cards { margin-bottom: var(--s-6); }
.section--mist .cards .card { background: var(--white); }
.cards .card h3 { margin-top: 0; font-size: var(--t-h3); }
.cards .card > p:last-of-type { margin-bottom: var(--s-4); }
.prose .cards .checks { margin-bottom: 0; }

.callout { border: 1px solid var(--line); border-left: 3px solid var(--teal); background: var(--white); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6); color: var(--ink); }
.section--mist .callout { background: var(--white); }

.quote-card { margin: 0 0 var(--s-6); background: var(--deep); color: var(--white); border-radius: var(--r-lg); padding: var(--s-6); }
.quote-card svg.q { width: 26px; height: 26px; color: var(--teal); margin-bottom: var(--s-3); }
.quote-card blockquote { margin: 0; font-family: var(--f-display); font-size: 1.35rem; line-height: 1.4; color: var(--white); }
.quote-card blockquote p:last-child { margin: 0; }
.quote-card figcaption { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.quote-card .meta { color: var(--on-dark-mute); }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--deep); margin-bottom: var(--s-6); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.faq { margin-bottom: var(--s-6); }
.faq .answer ul { padding-left: 1.25rem; }

/* Reviews page */
.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.reviews-grid .review { background: var(--white); }
.review__reply { background: var(--mist); border-radius: var(--r-md); padding: var(--s-4); font-size: .95rem; }
.review__reply .meta { color: var(--teal-ink); margin-bottom: 4px; }
@media (max-width: 760px) { .reviews-grid { grid-template-columns: 1fr; } }
.prose:has(.reviews-grid), .prose:has(.people) { max-width: none; }

/* Stylists page */
.people { display: grid; gap: var(--s-5); }
.person { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); align-items: start; }
.person__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.person h3 { margin: var(--s-2) 0 var(--s-1); font-size: var(--t-h3); }
.person__role { color: var(--ink); font-weight: 500; margin-bottom: var(--s-1); }
.person__since { color: var(--teal-ink); margin-bottom: var(--s-4); }
.person__spec { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-4); }
.person__spec .meta { margin-bottom: 4px; }
.person__spec p:last-child { margin: 0; font-size: .95rem; }
@media (max-width: 680px) { .person { grid-template-columns: 1fr; } .person__img img { aspect-ratio: 1; } }

/* Blog index */
.post-grid { row-gap: var(--s-8); }

/* Job application form (markup and form.js kept from the live site) */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); max-width: 48rem; }
.stf-form h3 { font-size: var(--t-h4); margin: var(--s-6) 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.stf-form .stf-section:first-of-type h3 { margin-top: 0; }
.stf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
.stf-full { grid-column: 1 / -1; }
.stf-field { display: grid; gap: 6px; margin-bottom: var(--s-4); }
.stf-field > label, .stf-check label { font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.stf-req { color: var(--teal-ink); }
.stf-field input[type=text], .stf-field input[type=email], .stf-field input[type=tel], .stf-field select, .stf-field textarea { font: 400 1rem/1.4 var(--f-body); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; width: 100%; }
.stf-field textarea { min-height: 110px; resize: vertical; }
.stf-field input:focus, .stf-field select:focus, .stf-field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.stf-hint { font-size: var(--t-small); color: var(--mute); }
.stf-error { font-size: var(--t-small); color: #A12C2C; min-height: 0; }
.stf-invalid input, .stf-invalid select, .stf-invalid textarea { border-color: #A12C2C; }
.stf-botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stf-submit { display: inline-flex; align-items: center; font: 500 .95rem/1 var(--f-body); padding: 14px 20px; border-radius: var(--r-btn); border: 0; background: var(--deep); color: var(--white); cursor: pointer; margin-top: var(--s-4); }
.stf-submit:hover { background: var(--ink); }
.stf-submit:disabled { opacity: .5; cursor: not-allowed; }
.stf-status { margin-top: var(--s-4); font-weight: 500; }
.stf-ok { color: var(--teal-ink); }
.stf-bad { color: #A12C2C; }
.stf-file { position: relative; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.stf-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stf-file-btn { display: inline-flex; align-items: center; font: 500 .9rem/1 var(--f-body); padding: 11px 16px; border-radius: var(--r-btn); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: border-color .2s; }
.stf-file-btn:hover { border-color: var(--ink); }
.stf-file input[type="file"]:focus-visible + .stf-file-btn { outline: 2px solid var(--teal); outline-offset: 3px; }
.stf-file-name { font-size: var(--t-small); color: var(--mute); }
.stf-check { display: flex; align-items: flex-start; gap: var(--s-3); }
.stf-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--deep); flex: none; }
.stf-check label { font-weight: 400; cursor: pointer; }
.stf-turnstile { margin: var(--s-4) 0; }
@media (max-width: 680px) { .stf-row { grid-template-columns: 1fr; } .form-card { padding: 0; border: 0; background: none; } }
.stf-turnstile { overflow: hidden; }

/* Legal pages read narrower */
.t-legal .prose { max-width: 44rem; }
.t-legal .section { padding: var(--s-7) 0; }
.t-legal .section + .section { padding-top: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.person:not(:has(.person__img)) { grid-template-columns: 1fr; }

/* Google rating summary (reviews page hero) */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--on-dark-fill); border: 1px solid var(--on-dark-line); border-radius: var(--r-lg); max-width: 40rem; }
.rating__num { font-family: var(--f-display); font-size: 3rem; line-height: 1; color: var(--white); }
.rating__body { display: grid; gap: 6px; margin-right: auto; }
.rating__body .meta { color: var(--on-dark-mute); }
.rating__stars { position: relative; display: inline-block; line-height: 0; }
.rating__stars svg { width: 20px; height: 20px; margin-right: 2px; }
.rating__bg { color: rgba(255,255,255,.18); white-space: nowrap; }
.rating__fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--tea); }
.review .stars { color: var(--tea); }
.price-list .price-time { display: block; font-size: .8rem; color: var(--mute); margin-top: 2px; }

/* Mobile menu sub-panels mirror the mega menu: title plus a one-line description */
.m-sub a { display: block; }
.m-sub a b { display: block; font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--white); }
.m-sub a span { display: block; font-size: .8rem; line-height: 1.35; color: var(--on-dark-mute); margin-top: 2px; }
.m-sub .m-h { margin-top: var(--s-2); }
.menu-foot { gap: var(--s-3); }
.menu-foot .btn { width: 100%; justify-content: center; }
.menu-foot__hours { margin: var(--s-2) 0 0; font-size: .85rem; line-height: 1.55; color: var(--on-dark-mute); }
.hours-lines { line-height: 1.7; }

/* Awards and stats strips (option A, 2026-10-05): equal columns split by hairlines.
   Value on top in Prata, caption under in small caps, left aligned. */
.proof-strip { border-bottom: 1px solid var(--line); padding: var(--s-6) 0; }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.strip li { min-width: 0; padding: var(--s-2) var(--s-5); border-left: 1px solid var(--line); }
.strip li:first-child { padding-left: 0; border-left: 0; }
.strip b { display: block; font-family: var(--f-display); font-weight: 400; color: var(--ink); line-height: 1.15; }
.strip span { display: block; font-family: var(--f-body); font-weight: 500; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-top: 6px; line-height: 1.45; }
.strip--awards b { font-size: 1.15rem; }
.strip--stats b { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: var(--s-1); }
.section--deep .strip li { border-color: var(--on-dark-line); }
.section--deep .strip b { color: var(--white); }
.section--deep .strip span { color: var(--on-dark-mute); }
@media (max-width: 860px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .strip li { padding: var(--s-2) var(--s-4); }
  .strip li:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Footer watermark: the full wordmark, faint, flush right, sitting on the bottom rule. */
.footer__mark { display: flex; justify-content: flex-end; margin-top: var(--s-7); line-height: 0; pointer-events: none; }
.footer .footer__wm { width: min(760px, 72%); height: auto; color: var(--white); opacity: .06; }
.footer__wm .logo-t { fill: var(--teal); }
.footer__mark + .footer__base { margin-top: var(--s-4); }
.nw { white-space: nowrap; }