/* =========================================================================
   Sage & Strand Hair Salon, Bronx NY
   Multi-page build. Palette: aubergine ink, porcelain, antique champagne.
   Two self-hosted families, no libraries, no external requests.
   ========================================================================= */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Grounds */
  --ink:        #1E1520;   /* aubergine near-black, the primary dark */
  --ink-2:      #261B29;   /* second dark, so adjacent dark bands separate */
  --ink-deep:   #150E18;   /* footer, the deepest ground */
  --porcelain:  #F7F3F0;   /* the paper */
  --shell:      #EDE5E2;   /* alternate light band */
  --white:      #FFFFFF;

  /* Accents */
  --champagne:      #CDAB6E;   /* on ink grounds (8.15:1) */
  --champagne-ink:  #7A5C29;   /* the same note, dark enough for porcelain (5.61:1) */
  --chip-ink:       #6A4F22;   /* chip text, measured on its own tinted chip ground */
  --plum:           #6B3B5C;   /* on light grounds (7.91:1) */
  --plum-lite:      #C79FBC;   /* on ink grounds (7.70:1) */

  /* Text and rules */
  --muted:      #5B505A;   /* secondary text on light (6.95:1) */
  --muted-dark: #B0A2AE;   /* secondary text on dark (7.29:1) */
  --rule:       #DED3CF;
  --rule-dark:  #3A2C3D;

  --ff-d: "Fraunces", "Times New Roman", Georgia, serif;
  --ff-b: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1220px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --band: clamp(4.25rem, 8.5vw, 8rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* The display face, tuned once. High optical size plus WONK off gives the
   flat, high-contrast serifs of an editorial masthead rather than a warm one. */
.d, .hero__h, .h2, .h3, .phead__h, .wm__name, .fig-n, .promise__n, .mgroup__h,
.gift__amt, .ftr__name, .faq__q, .step__n, .panel__h {
  font-family: var(--ff-d);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 300;
  letter-spacing: -.018em;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--ff-b);
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 2px; }
/* Every dark ground gets the champagne ring: plum on aubergine is a 1.66:1
   focus indicator, which is no indicator at all. */
.hero :focus-visible, .dark :focus-visible,
.book :focus-visible, .phead :focus-visible, .ftr :focus-visible,
.gift__card :focus-visible { outline-color: var(--champagne); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--porcelain); padding: .75rem 1.25rem;
  font-size: .9rem; text-decoration: none;
}
.skip:focus { left: 0; }
/* The skip link is off-screen until focused, and lands over the dark banner.
   Ring drawn ON its own ink ground (8.15:1) so it never depends on what is behind. */
.skip:focus-visible { outline: 3px solid var(--champagne); outline-offset: -3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; }

/* ---------- Shared type pieces ---------- */

.eyebrow {
  display: inline-flex; align-items: baseline; gap: .85rem;
  margin: 0 0 1.35rem;
  font-family: var(--ff-b);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--champagne-ink);
}
.eyebrow::before {
  content: ""; flex: none; width: 28px; height: 1px; background: currentColor;
  opacity: .8; transform: translateY(-.3em);
}
.eyebrow--light { color: var(--champagne); }
.sep { opacity: .45; padding-inline: .1em; }

.h2 { margin: 0 0 1.35rem; font-size: clamp(2.05rem, 4.2vw, 3.25rem); line-height: 1.1; }
.h3 { margin: 0 0 .6rem; font-size: 1.35rem; line-height: 1.25; letter-spacing: -.01em; }
.h2--light, .h3--light { color: var(--porcelain); }
.lede { font-size: clamp(1.08rem, 1.4vw, 1.28rem); line-height: 1.62; max-width: 48ch; margin: 0 0 1.5rem; }
.lede--light { color: #E4DCE1; }
.body-m { color: var(--muted); }
.body-d { color: var(--muted-dark); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--ff-b); font-size: .8rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 1px;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--porcelain); }
.btn--solid:hover { background: var(--plum); }
.btn--gold { background: var(--champagne); color: var(--ink); }
.btn--gold:hover { background: #DCBE86; }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--porcelain); }
.btn--line-light { border-color: rgba(247,243,240,.45); color: var(--porcelain); }
.btn--line-light:hover { border-color: var(--porcelain); background: rgba(247,243,240,.08); }
.btn--block { width: 100%; }
/* Disabled controls went solid at launch prep (v4): dashed was the demo's
   furniture vocabulary, and these are live pending features, not previews. */
.btn--off {
  background: transparent; color: var(--muted-dark);
  border: 1px solid rgba(176,162,174,.4); cursor: not-allowed;
}
.btn--off-light,
.btn:disabled {
  background: transparent; color: var(--muted);
  border: 1px solid rgba(91,80,90,.35); cursor: not-allowed;
}

.tel {
  display: inline-block; font-family: var(--ff-d);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.01em; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .1em;
}
.tel--light { color: var(--porcelain); }
.tel--light:hover { color: var(--champagne); }
.tel:hover { color: var(--plum); }

/* The pending panel: a LIVE site's honest interim state for a feature that
   is real but not yet connected (online booking and gift cards until the
   salon's Square links arrive; the contact form until its verification
   click). Solid border on purpose: dashed belongs to demo furniture, and
   furniture never survives launch prep. */
.pending {
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 1.1rem 1.3rem; margin-top: 1.4rem;
}
.pending p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.pending .pending__act { margin: 1.1rem 0 0; }
.dark .pending, .book .pending { border-color: rgba(205,171,110,.35); }
.dark .pending p, .book .pending p { color: var(--muted-dark); }

/* Reveal, armed only when JS runs so a no-JS visitor sees a complete page. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

/* ---------- Dark grounds ---------- */

.dark { background: var(--ink); color: var(--porcelain); position: relative; isolation: isolate; }
.dark--2 { background: var(--ink-2); }
.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(205,171,110,.13) 1px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: .55;
}

/* ---------- Header ---------- */

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247,243,240,.94);
  backdrop-filter: saturate(1.15) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.hdr__in {
  max-width: var(--wrap); margin: 0 auto; padding: .85rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.wm { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); }
.wm__mark { width: 38px; height: 38px; flex: none; display: block; border-radius: 8px; }
.wm__txt { display: flex; flex-direction: column; line-height: 1.02; }
.wm__name { font-size: 1.3rem; letter-spacing: -.005em; }
.wm__sub {
  font-size: .58rem; font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
  color: var(--muted); margin-top: .3rem;
}
.nav { display: flex; align-items: center; gap: 1.9rem; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; }
.nav a { text-decoration: none; color: var(--muted); transition: color .3s var(--ease); padding-block: .2rem; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--champagne-ink); }
.nav__cta {
  color: var(--porcelain) !important; background: var(--ink);
  padding: .7rem 1.25rem !important; border-radius: 1px;
}
.nav__cta:hover { background: var(--plum); }

/* ---------- Split hero (home) ---------- */

.hero { background: var(--ink); color: var(--porcelain); position: relative; isolation: isolate; }
.hero__in {
  max-width: 1560px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: min(82vh, 760px);
}
.hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4.5vw, 5rem);
  position: relative;
}
.hero__copy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(205,171,110,.12) 1px, transparent 1.2px);
  background-size: 24px 24px; opacity: .6;
}
.hero__h {
  margin: 0 0 1.5rem;
  font-size: clamp(2.7rem, 5.4vw, 4.5rem);
  line-height: 1.03; max-width: 13ch;
}
.hero__h .l { display: block; }
.hero__h .gold { color: var(--champagne); }
.hero__sub { margin: 0 0 2.4rem; max-width: 44ch; color: #E4DCE1; font-size: clamp(1.05rem, 1.35vw, 1.2rem); }
.hero__acts { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0; }
.hero__media {
  position: relative; overflow: hidden;
  border-left: 1px solid rgba(205,171,110,.35);
  background: #14100F;
}
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 44%;
  /* Graded, not just cropped: the stock set runs warm and the palette runs
     plum, so every photograph loses a little saturation and gains a little
     contrast to sit in the same room as the type. */
  filter: saturate(.84) contrast(1.05);
  animation: kb 30s var(--ease) infinite alternate;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(30,21,32,.72) 0%, rgba(30,21,32,.22) 22%, rgba(30,21,32,.10) 55%, rgba(30,21,32,.16) 100%);
}
@keyframes kb {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); }
}

/* ---------- Fact ribbon ---------- */

.ribbon { background: var(--shell); border-bottom: 1px solid var(--rule); }
.ribbon__in {
  max-width: var(--wrap); margin: 0 auto; padding: 1.5rem var(--gut);
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem 2rem;
}
.ribbon__in li { display: flex; flex-direction: column; gap: .3rem; }
.ribbon__k { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.ribbon__v { font-size: .98rem; }
.ribbon__v a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.ribbon__v a:hover { border-color: var(--plum); color: var(--plum); }

/* ---------- Section shells ---------- */

.sec { padding: var(--band) var(--gut); }
.sec--light2 { background: var(--shell); border-block: 1px solid var(--rule); }
.sec__head { max-width: var(--wrap); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.sec__head--wide p.lede { max-width: 56ch; }

/* ---------- Three steps (the visit) ---------- */

.steps {
  max-width: var(--wrap); margin: 0 auto; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem);
}
.steps li { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.step__n {
  display: block; font-size: 2.6rem; line-height: 1; color: var(--champagne-ink);
  margin-bottom: .9rem; font-variant-numeric: lining-nums;
}
.steps p { margin: 0; color: var(--muted); font-size: 1rem; }
.steps .h3 { color: var(--ink); }

/* ---------- Promises (differentiators) ---------- */

.promises {
  max-width: var(--wrap); margin: 0 auto; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
}
.promises li {
  padding: 2rem 2rem 2.2rem 0;
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.promises li + li { padding-left: 2rem; }
/* Asymmetric on purpose: the first promise is the loudest and takes two columns,
   which stops the row reading as three identical template cards. */
.promises li:first-child { grid-column: span 2; }
.promises li:nth-child(2), .promises li:nth-child(5) { border-right: 0; }
.promise__n {
  display: block; font-size: .78rem; letter-spacing: .22em; color: var(--champagne-ink);
  font-family: var(--ff-b); font-weight: 500; margin-bottom: 1rem;
}
.promises h3 { margin: 0 0 .55rem; font-size: 1.2rem; line-height: 1.3; font-weight: 400; letter-spacing: -.005em; }
.promises li:first-child h3 {
  font-family: var(--ff-d); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; letter-spacing: -.018em;
}
.promises li:first-child p { font-size: 1.05rem; max-width: 44ch; }
.promises p { margin: 0; font-size: .96rem; color: var(--muted); }
.promises a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.promises a:hover { color: var(--plum); border-color: var(--plum); }

/* ---------- Menu teaser ---------- */

/* The eyebrow holds a row of its own so the price list starts level with the
   heading, not with the small type above it. Row gap is zero and the eyebrow
   keeps its own bottom margin, so the copy column reads exactly as before. */
.teaser__in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: 0 clamp(2.5rem, 6vw, 5.5rem); align-items: start;
}
.teaser__eyebrow { grid-column: 1; grid-row: 1; }
.teaser__copy { grid-column: 1; grid-row: 2; }
.teaser__copy > p:last-child { margin-bottom: 0; }
.teaser__list { grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0; }

/* ---------- Menu rows (shared by teaser and services page) ---------- */

.mrow {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .62rem 0;
  border-bottom: 1px solid rgba(222,211,207,.75);
}
.mrow:last-child { border-bottom: 0; }
.mrow__n { font-size: 1.02rem; }
.mrow__d { flex: 1 1 auto; min-width: 1.5rem; border-bottom: 1px dotted var(--rule); transform: translateY(-.3em); }
.mrow__p { font-size: 1.02rem; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.plus { color: var(--champagne-ink); }
.mrow--free .mrow__p {
  font-family: var(--ff-d); font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
  font-weight: 400; font-size: 1.02rem; color: var(--plum);
}

/* ---------- Gallery ---------- */

.gal {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.1rem;
}
.gal__i { margin: 0; position: relative; overflow: hidden; border-radius: 2px; }
.gal__i--tall { grid-row: span 2; }
.gal__i img {
  width: 100%; height: 100%; object-fit: cover; background: #2A1F2C;
  filter: saturate(.84) contrast(1.05);
  transition: transform 1.2s var(--ease);
}
/* A single plum wash across all three, so a cool studio frame and a warm salon
   frame read as one set rather than three unrelated stock photographs. */
.gal__i::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: rgba(30,21,32,.16);
}
.gal__i figcaption { z-index: 2; }
.gal__i--tall img { aspect-ratio: 4 / 5; }
.gal__i:not(.gal__i--tall) img { aspect-ratio: 16 / 10; }
.gal__i--blowout img { object-position: 46% 42%; }
.gal__i:hover img { transform: scale(1.04); }
.gal__i figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.2rem 1rem;
  /* Measured against the brightest rendered pixel under the label, not the
     average one: the blow-dry frame is nearly white behind its caption. */
  background: linear-gradient(to top, rgba(10,6,12,.95) 0%, rgba(10,6,12,.92) 34%, rgba(10,6,12,.55) 68%, rgba(10,6,12,0) 100%);
}
.gal__i figcaption span {
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--porcelain);
}
.photo-note { max-width: var(--wrap); margin: 1.5rem auto 0; font-size: .85rem; color: var(--muted-dark); }
.photo-note--light { color: var(--muted); }

/* ---------- Booking ---------- */

.book { background: var(--ink); color: var(--porcelain); padding: var(--band) var(--gut); position: relative; isolation: isolate; }
.book::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(205,171,110,.13) 1px, transparent 1.2px);
  background-size: 24px 24px; opacity: .55;
}
.book__in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
.book__hours { list-style: none; margin: 2.25rem 0 2.5rem; padding: 0; max-width: 26rem; }
.book__hours li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .62rem 0; border-bottom: 1px solid var(--rule-dark);
  font-size: .98rem;
}
.book__hours li:last-child { border-bottom: 0; }
.book__hours .d { color: var(--muted-dark); letter-spacing: .04em; }
.book__hours .t { font-variant-numeric: lining-nums tabular-nums; }
.book__hours .t--shut { color: var(--muted-dark); }
.book__call { margin: 0 0 .9rem; }
.book__callnote { margin: 0; font-size: .93rem; color: var(--muted-dark); max-width: 34ch; }

/* The online-booking panel: an ink card. Since launch prep (v4) it is live
   furniture-free: a real designed feature in its honest pending state, the
   dashed preview border retired with the rest of the demo vocabulary. */
.panel {
  background: var(--ink-2);
  border: 1px solid rgba(205,171,110,.35);
  border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.panel__note { margin: 1.1rem 0 0; font-size: .85rem; color: var(--muted-dark); }
.panel__h { margin: 0 0 .75rem; font-size: 1.45rem; color: var(--porcelain); }
.panel__p { margin: 0 0 1.6rem; font-size: .98rem; color: var(--muted-dark); }
.panel__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .85rem; }
.panel__list li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; font-size: .96rem; color: var(--muted-dark); }
.panel__list .tick {
  width: 16px; height: 1px; flex: none; margin-top: .78rem;
  background: var(--champagne);
}

/* ---------- Gift cards ---------- */

.gift__in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.gift__card {
  position: relative; border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, #261B29 0%, #1E1520 55%, #2E2033 100%);
  border: 1px solid rgba(205,171,110,.4);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--porcelain);
}
.gift__card::after {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(205,171,110,.22); border-radius: 2px; pointer-events: none;
}
.gift__brand { display: flex; align-items: center; gap: .7rem; }
.gift__brand svg { width: 32px; height: 32px; border-radius: 7px; display: block; }
.gift__brand span { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne); }
.gift__amt { display: block; font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.1; color: var(--porcelain); }
.gift__foot { display: block; margin-top: .55rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); }
.gift__cap { margin: .95rem 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- Closing CTA ---------- */

.cta { padding: var(--band) var(--gut); background: var(--shell); border-top: 1px solid var(--rule); }
/* .cta is declared after .dark, so the dark variant has to reclaim its ground. */
.cta.dark { background: var(--ink); border-top-color: var(--rule-dark); }
.cta.dark.dark--2 { background: var(--ink-2); }
.cta__in { max-width: 62rem; margin: 0 auto; text-align: center; }
.cta .eyebrow { justify-content: center; }
.cta .lede { margin-inline: auto; }
.cta__acts { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.cta__fine { margin: 1.75rem 0 0; font-size: .92rem; color: var(--muted); }

/* ---------- Page header (inner pages) ---------- */

.phead { background: var(--ink); color: var(--porcelain); padding: clamp(3.5rem, 7vw, 6rem) var(--gut) clamp(3rem, 6vw, 5rem); position: relative; isolation: isolate; }
.phead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(205,171,110,.13) 1px, transparent 1.2px);
  background-size: 24px 24px; opacity: .55;
}
.phead__in { max-width: var(--wrap); margin: 0 auto; }
.phead__h { margin: 0 0 1.1rem; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.05; max-width: 18ch; }
/* A sentence-length masthead needs a wider measure and a step down, or it
   stacks into six short lines. */
.phead__h--long { font-size: clamp(2.05rem, 4.1vw, 3.1rem); line-height: 1.1; max-width: 25ch; }
.phead__p { margin: 0; max-width: 52ch; color: #E4DCE1; font-size: clamp(1.05rem, 1.35vw, 1.2rem); }

/* ---------- Services menu ---------- */

.menu__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.75rem, 5vw, 4.25rem) clamp(3rem, 7vw, 6rem);
}
.mgroup--wide { grid-column: 1 / -1; }
.mgroup__h {
  display: flex; align-items: baseline; gap: .9rem;
  margin: 0 0 1.3rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--ink);
  font-size: 1.6rem;
}
.mgroup__num {
  font-family: var(--ff-b); font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; color: var(--champagne-ink);
}
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist--two { columns: 2; column-gap: clamp(3rem, 7vw, 6rem); }
.mlist--two .mrow { break-inside: avoid; }
.mgroup__foot { margin: 1.1rem 0 0; font-size: .88rem; color: var(--muted); }
.mgroup__aside {
  margin-top: 2.5rem; padding: 1.6rem 1.7rem;
  background: var(--shell); border-left: 2px solid var(--champagne-ink); border-radius: 2px;
}
.mgroup__aside p { margin: 0; font-size: .96rem; color: var(--muted); }
.mgroup__aside-h {
  font-family: var(--ff-d); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 300; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.018em;
  color: var(--ink) !important; margin-bottom: .5rem !important;
}
.mgroup__aside-act { margin-top: 1.35rem !important; }

/* ---------- Spec band (about) ---------- */

.spec {
  max-width: var(--wrap); margin: 0 auto; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
}
.spec li {
  padding: 1.9rem 1.75rem 2rem 0;
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .7rem;
}
.spec li + li { padding-left: 1.75rem; }
.spec li:last-child { border-right: 0; }
.spec__n {
  font-family: var(--ff-d); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 2.9rem); line-height: 1;
  letter-spacing: -.018em; color: var(--champagne-ink);
}
.spec__l { font-size: .95rem; color: var(--muted); max-width: 22ch; }

.band {
  position: relative;
  height: clamp(170px, 24vw, 320px);
  background-image: url("/assets/img/stock-detail.jpg");
  background-size: cover; background-position: 50% 64%;
  border-block: 1px solid var(--rule);
  filter: saturate(.84) contrast(1.05);
}
.band::after { content: ""; position: absolute; inset: 0; background: rgba(30,21,32,.16); }

/* ---------- About ---------- */

/* The copy column is shorter than the portrait beside it, so the two are
   centered against each other rather than hung from a shared top edge. */
.split {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
.split--rev { grid-template-columns: .9fr 1.1fr; }
.fig { margin: 0; }
.fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--shell); border-radius: 2px; filter: saturate(.84) contrast(1.05); }
.fig figcaption { margin-top: .8rem; font-size: .82rem; color: var(--muted); }
.fig-n { display: block; font-size: 1.35rem; margin-bottom: .2rem; }
.split__closer { margin-top: 2rem; color: var(--muted); }

/* ---------- The team (about) ---------- */

.team {
  max-width: var(--wrap); margin: 0 auto; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3.2vw, 2.75rem);
}
.team__i { display: flex; flex-direction: column; }
/* The portraits are client-provided (Review round 1). The crop matches the
   furniture slot they replaced, so the row's rhythm never moved. */
.team__img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%;
  margin-bottom: 1.25rem; border-radius: 2px; display: block;
  background: var(--shell); filter: saturate(.84) contrast(1.05);
}
.team__i .fig-n { margin-bottom: .35rem; }
.team__r {
  margin: 0 0 .85rem; font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--champagne-ink);
}
.team__b { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--muted); }

/* ---------- Contact ---------- */

.contact__in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.facts li:first-child { padding-top: 0; }
.facts__k { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.facts__v a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.facts__v a:hover { color: var(--plum); border-color: var(--plum); }
.hoursline { display: block; }
.hoursline + .hoursline { margin-top: .2rem; }

.form { background: var(--shell); border: 1px solid var(--rule); border-radius: 3px; padding: clamp(1.5rem, 3vw, 2.1rem); }
.form fieldset { border: 0; margin: 0; padding: 0; }
.fld { display: block; margin-bottom: 1.15rem; }
.fld--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fld__l { display: block; margin-bottom: .45rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fld__i {
  width: 100%; padding: .8rem .9rem;
  background: rgba(255,255,255,.6); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink); font-family: var(--ff-b); font-size: .95rem;
}
.fld__i::placeholder { color: #8A7F88; }
textarea.fld__i { min-height: 8.5rem; resize: vertical; }

/* ---------- FAQ ---------- */

.faq {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
/* Answers carry the reading load here, so they run a step above body size on
   a looser leading, and each pair gets room of its own. */
.faq__item { padding: 2.15rem 0; border-bottom: 1px solid var(--rule); }
.faq__item:nth-child(1), .faq__item:nth-child(2) { padding-top: 0; }
.faq__q { margin: 0 0 .75rem; font-size: 1.26rem; line-height: 1.32; }
.faq__a { margin: 0; color: var(--muted); font-size: 1.13rem; line-height: 1.8; max-width: 62ch; }
.faq__a a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.faq__a a:hover { color: var(--plum); border-color: var(--plum); }
.chiprow { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; }

/* ---------- Footer ---------- */

.ftr { background: var(--ink-deep); color: var(--muted-dark); padding: var(--band) var(--gut) 2.5rem; }
.ftr__in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
}
.ftr__mark { width: 40px; height: 40px; display: block; border-radius: 9px; margin-bottom: 1.1rem; }
.ftr__name { margin: 0 0 .45rem; font-size: 1.35rem; color: var(--porcelain); }
.ftr__line { margin: 0; font-size: .92rem; }
.ftr__col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.ftr__h { margin: 0 0 .45rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--porcelain); }
.ftr__col a, .ftr__col span { font-size: .94rem; text-decoration: none; }
.ftr__col a { transition: color .3s var(--ease); }
.ftr__col a:hover { color: var(--porcelain); }

.ftr__legal {
  max-width: var(--wrap); margin: 2.5rem auto 0; padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
  font-size: .82rem;
}

/* ---------- 404 ---------- */

.err { display: grid; place-items: center; min-height: 58vh; padding: var(--band) var(--gut); }
.err__in { max-width: 44rem; text-align: center; }
.err .eyebrow { justify-content: center; }
.err .lede { margin-inline: auto; }
.err__acts { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.p404 .ftr { padding-block: 3rem 2.5rem; }

/* Concept posture (v6): the fiction disclosure replaces the business's own
   legal line, mirroring the Work-page concepts exactly. */
.ftr__fiction { max-width: var(--wrap); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); }
.ftr__fiction p { margin: 0 0 .45rem; font-size: .82rem; line-height: 1.6; color: var(--muted-dark); }
.ftr__fiction strong { color: var(--porcelain); font-weight: 500; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .hero__in { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { min-height: 46vh; border-left: 0; border-top: 1px solid rgba(205,171,110,.35); order: 2; }
  .hero__copy { order: 1; }
  .book__in, .gift__in, .contact__in, .split, .split--rev, .teaser__in { grid-template-columns: 1fr; }
  .teaser__eyebrow, .teaser__copy, .teaser__list { grid-column: 1; grid-row: auto; }
  .teaser__list { margin-top: clamp(2.5rem, 6vw, 5.5rem); }
  .team { grid-template-columns: 1fr 1fr; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
  .ribbon__in { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .spec { grid-template-columns: 1fr 1fr; }
  .spec li:nth-child(2) { border-right: 0; }
  .fig { max-width: 460px; }
  .promises { grid-template-columns: 1fr 1fr; }
  .promises li:first-child { grid-column: 1 / -1; }
  .promises li:nth-child(2) { border-right: 1px solid var(--rule); }
  .promises li:nth-child(3), .promises li:nth-child(5) { border-right: 0; }
}

@media (max-width: 760px) {
  body { font-size: 1.02rem; }
  .hdr__in { flex-direction: column; align-items: flex-start; gap: .85rem; padding-bottom: .7rem; }
  .nav { gap: 1.1rem; font-size: .7rem; letter-spacing: .12em; flex-wrap: wrap; }
  .nav__cta { padding: .55rem .95rem !important; }
  .menu__grid { grid-template-columns: 1fr; }
  .mlist--two { columns: 1; }
  .gal { grid-template-columns: 1fr; }
  .gal__i--tall { grid-row: auto; }
  .ftr__in { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: 1fr; gap: .35rem; }
  .faq { grid-template-columns: 1fr; }
  .faq__item:nth-child(2) { padding-top: 2.15rem; }
  .fld--row { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .spec li, .spec li + li { border-right: 0 !important; padding-inline: 0; }
  .promises { grid-template-columns: 1fr; border-top: 0; }
  .promises li, .promises li + li { border-right: 0 !important; padding-inline: 0; }
  .promises li:first-child { grid-column: auto; border-top: 1px solid var(--rule); }
  .steps li { padding-top: 1.2rem; }
  .btn { padding: .95rem 1.6rem; font-size: .76rem; }
}

/* One profile per row below this: two columns would leave the blurbs about
   eighteen characters wide, and a full-width portrait frame would be taller
   than the phone. A square is the crop a headshot arrives in anyway. */
@media (max-width: 560px) {
  .team { grid-template-columns: 1fr; gap: 2.75rem; }
  .team__img { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media img { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .gal__i img { transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Attribution link in the fiction footer (concept-posture) */
.nhmw-link{color:inherit;text-decoration:underline;text-underline-offset:2px}