/* JOUR paper trial v3: art-direction layer on top of live site.css + paper-trial.css (v1 colours).
   Sources: Vera's v2/v3 notes (captions, outlines, Tris tone rhythm) and the pack's tokens
   (261008_JOUR_Site_ArtDirection(RE1).md 2.1, 2.3, 3.1). Offline trial only. */

/* --- photo edge: no frames, no drop shadows, a 1px hairline outline only --- */
img { box-shadow: 0 0 0 1px rgba(20,18,16,0.08); }
/* Animated covers sit in <picture> (WebP, GIF fallback); the img stays the layout box. */
.proj-row picture, .frame-link picture { display: contents; }

/* --- nav: solid paper band (pack 2.3), hairline once scrolled > 8px --- */
nav {
  height: 72px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, transform .45s ease;
}
nav.is-away { transform: translateY(-100%); }
body.home { padding-top: 72px; }
body.home nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: #E8E2D6; mix-blend-mode: normal;
}
body.home.scrolled nav { border-bottom-color: #CFC5B5; }
body:not(.home) nav { background: #141210; mix-blend-mode: normal !important; color: #E8E2D6 !important; }
body:not(.home) nav a, body:not(.home) .links a { color: #E8E2D6 !important; }
@media (max-width: 760px) { nav { height: 56px; } body.home { padding-top: 56px; } }

/* Nav hover: the word under the cursor turns brass. Nothing else moves. */
body.home nav a:hover { color: #6E5A3A !important; }
body:not(.home) nav a:hover { color: #a48455 !important; }

html:has(body.home) { scroll-behavior: auto; }

/* --- HOME: centred Aeme film, then one left-aligned row. Trial only. --- */
.film-opener {
  display: block;
  box-sizing: border-box;
  min-height: calc(100svh - 72px); /* nav sits in this screen, then scrolls away */
  background: #E8E2D6;
  padding: 24px 64px 0;
}
.film-block { width: min(768px, 100%, calc((100svh - 72px - 150px) * 0.75)); margin: 0 auto; }
.film-block video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 72px - 150px);
  background: #E8E2D6;
  cursor: pointer;
}
.film-name, .pname, .film-line, .pdesc { display: block; }
/* Vera type lock (Aesthetic room). v3.css wins over site.css. */
/* Outfit 11: nav links, labels, kickers, small uppercase — NOT the mark. */
nav .links, nav .links a {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Mark: interim rust geometric Asset1 → assets/mark.png. Quiet nav height; not Outfit/Cormorant text. */
nav .mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0;
}
nav .mark img {
  display: block;
  height: 20px;
  width: auto;
}
.film-name, .pname {
  margin: 12px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: #141210;
}
body.home .film-name, body.home .pname { color: #141210; }
.film-line, .pdesc {
  margin: 8px 0 0;
  max-width: 100%;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: #3C3832;
}
.home-index {
  max-width: none;
  margin: 0;
  padding: 24px 64px 0;
  background: #E8E2D6;
}
.proj-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}
.home-index { container-type: inline-size; }
.proj-row > a { flex: 0 0 auto; display: block; min-width: 0; color: inherit; }
.proj-row > a:nth-child(1) { width: calc((100cqi - 48px) * 1.6 / 3.95); } /* Tris 16:10, widest */
.proj-row > a:nth-child(2) { width: calc((100cqi - 48px) * 0.8 / 3.95); } /* Grace 4:5 */
.proj-row > a:nth-child(3) { width: calc((100cqi - 48px) * 0.75 / 3.95); } /* Dragon 3:4 */
.proj-row > a:nth-child(4) { width: calc((100cqi - 48px) * 0.8 / 3.95); } /* Candy 4:5 */
.proj-row img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 1px rgba(20,18,16,0.08);
}
.proj-row .ratio-34 { aspect-ratio: 3 / 4; }
.proj-row .ratio-45 { aspect-ratio: 4 / 5; }
.proj-row .ratio-1610 { aspect-ratio: 16 / 10; }
.proj-row .pname, .proj-row .pdesc { max-width: 100%; }
.studio { padding-top: 120px !important; padding-bottom: 200px !important; }
@media (max-width: 760px) {
  .film-opener { min-height: calc(100svh - 56px); padding: 24px 24px 0; }
  .film-block { width: min(100%, calc((100svh - 56px - 150px) * 0.75)); }
  .film-block video { max-height: calc(100svh - 56px - 150px); }
  .home-index { padding: 24px 0 0; }
  .proj-row {
    gap: 12px;
    padding: 0 24px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .proj-row > a { flex: 0 0 auto; scroll-snap-align: start; }
  .proj-row > a:nth-child(1) { width: 384px; }
  .proj-row > a:nth-child(2) { width: 192px; }
  .proj-row > a:nth-child(3) { width: 180px; }
  .proj-row > a:nth-child(4) { width: 192px; }
  .studio { padding-top: 96px !important; padding-bottom: 96px !important; }
}

/* --- WORK --- */
/* Desktop: one looping row. One photo sits centered. Sides at half strength. Center grows 8%. */
body.work-scroll { height: 100svh; overflow: hidden; }
.reel {
  height: 100svh;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  scroll-snap-type: none;
  gap: 72px;
  padding: 0;
}
.frame-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  scroll-snap-align: none;
  opacity: 0.5;
}
.frame-link img {
  display: block;
  height: auto;
  width: auto;
  max-height: 52vh;
  max-width: 42vw;
  object-fit: contain;
  transform-origin: center bottom;
  transition: transform 0.35s ease;
}
.frame-link .cap {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  text-align: left;
  box-sizing: border-box;
}
.frame-link .cap .name {
  position: static;
  display: block;
  opacity: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: 0;
  color: #E8E2D6;
}
.frame-link .cap .sent {
  position: static;
  display: block;
  margin-top: 8px;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: #E8E2D6;
  opacity: 0;
}
@media (max-width: 760px) {
  /* Phone: sideways scroll, and each snap lands on a whole photo. */
  body.work-scroll { height: 100svh; overflow: hidden; }
  .reel {
    height: 100svh;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding: 72px 24px 32px;
  }
  .reel { scroll-padding-left: 24px; }
  .frame-link { flex: 0 0 calc(100vw - 48px); max-width: calc(100vw - 48px); scroll-snap-align: start; scroll-snap-stop: always; opacity: 1; }
  .frame-link img { width: 100%; height: auto; max-width: none; max-height: 68vh; aspect-ratio: auto; object-fit: contain; transform: none; }
  /* Phone caption: name, area, location under the photo. Same Cormorant 24 / Outfit 17, quiet. */
  .frame-link .cap { display: block; margin-top: 12px; }
  .frame-link .cap .name { opacity: 1; }
  .frame-link .cap .sent { opacity: 1; margin-top: 4px; color: rgba(232,226,214,0.72); }
}

/* --- PROJECT pages: 12-col gallery, pale and dark alternate, dark images small --- */
.case-head { max-width: 1080px; }
.g { max-width: 1080px; margin: 120px auto 0; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; row-gap: 160px; align-items: start; }
.g-item { display: block; }
.g-item img { display: block; width: 100%; height: auto; }
.g-item.drop { margin-top: 240px; }
/* Size by measured tone (mean luminance < 115 = dark = small, 3-4 of 12 cols, never full bleed). */
/* Tris */
.t-cover { grid-column: 1 / -1; }                     /* 01 pale cover, full content width */
.t-03    { grid-column: 8 / 12; }                     /* 03 dark, 4/12, offset right */
.t-02    { grid-column: 1 / 9; }                      /* 02 pale, 8/12 */
.t-04    { grid-column: 10 / 13; margin-top: 240px; } /* 04 dark, 3/12, stepped beside 02 */
.t-05    { grid-column: 3 / 10; }                     /* 05 pale, 7/12 */
.t-08    { grid-column: 1 / 4; margin-top: 160px; }   /* 08 dark, 3/12, floats left beside 06 */
.t-06    { grid-column: 6 / 13; }                     /* 06 pale, 7/12 */
.t-07    { grid-column: 4 / 10; }                     /* 07 pale (measured), 6/12 */
/* Aeme: Vera IG pull — DEKM cover → main sketch → material → sofa → Grand Jeté → finished */
.a-cover { grid-column: 1 / 8; }                      /* DEKM_01 4:5 opener */
.ae-main-sketch { grid-column: 1 / 11; }              /* stitched main sketch 16:10 */
.ae-material { grid-column: 1 / 6; }                  /* material board, tone-pale, no plate */
.ae-sofa-sketch { grid-column: 7 / 12; margin-top: 160px; } /* sofa sketch on plate */
.ae-grand-jete { grid-column: 1 / 10; }               /* Grand_Jete landscape sketch on plate */
.a-11 { grid-column: 1 / 6; }                         /* 11 pale, 5/12 */
.a-12 { grid-column: 8 / 13; margin-top: 240px; }     /* 12 pale, 5/12, dropped */
.a-14 { grid-column: 3 / 8; }                         /* 14 pale, 5/12 */
.a-13 { grid-column: 7 / 12; }                        /* 13 pale, 5/12 */
.a-06 { grid-column: 2 / 5; margin-top: 240px; }      /* 06 dark, 3/12 */
.a-05 { grid-column: 1 / 6; }                         /* 05 pale, 5/12 */
.a-09 { grid-column: 7 / 12; margin-top: 240px; }     /* 09 pale, 5/12, last image */
/* Artehouse: RE1 Pattern D cut — plan → perspective/hands → process three → finished */
.ah-01 { grid-column: 1 / 9; }                          /* plan opener */
.ah-03 { grid-column: 6 / 13; }                         /* perspective large */
.ah-05 { grid-column: 1 / 5; grid-row: 2; margin-top: 160px; } /* hands small, stepped */
.ah-06 { grid-column: 5 / 8; }                          /* process strip */
.ah-10 { grid-column: 8 / 11; }
.ah-11 { grid-column: 11 / 13; }
.ah-18 { grid-column: 1 / -1; width: 100vw; margin-left: calc(50% - 50vw); } /* full bleed */
.ah-18 img { box-shadow: none; }
.ah-17 { grid-column: 1 / 5; }                          /* finished small */
.ah-16 { grid-column: 6 / 12; margin-top: 200px; }      /* finished large */
.ah-19 { grid-column: 9 / 12; }                         /* float */

/* Artehouse drawing openers (Vera): transparent sketch PNGs sit on #E8E2D6 paper plate;
   keep black ink. No white-line invert. Kill global .tone-sketch multiply on black ground.
   Process 06/10/11 stay as photos. Scoped under .ah-* so Grace multiply-on-paper is untouched. */
body.project .g-item.ah-01,
body.project .g-item.ah-03,
body.project .g-item.ah-05 {
  background: #E8E2D6;
}
body.project .g-item.ah-01 img,
body.project .g-item.ah-03 img,
body.project .g-item.ah-05 img {
  mix-blend-mode: normal;
  filter: none;
}
/* Aeme sketches (Vera): main + sofa + Grand Jeté on #E8E2D6 paper plate, black ink, normal blend.
   Scoped under .ae-* so Artehouse/Grace treatments stay untouched. Material board stays tone-pale. */
body.project .g-item.ae-main-sketch,
body.project .g-item.ae-sofa-sketch,
body.project .g-item.ae-grand-jete {
  background: #E8E2D6;
}
body.project .g-item.ae-main-sketch img,
body.project .g-item.ae-sofa-sketch img,
body.project .g-item.ae-grand-jete img {
  mix-blend-mode: normal;
  filter: none;
}
/* Grace: pack Pattern D. Jonathan's drawings sit on the paper with multiply and no outline (pack 3.6 D). */
.tone-sketch img { box-shadow: none; mix-blend-mode: multiply; filter: none; }  /* soft: scan on paper */
.gr-09 { grid-column: 1 / 9; }
.gr-01 { grid-column: 6 / 13; }
.gr-06 { grid-column: 1 / 6; grid-row: 2; margin-top: 160px; }  /* placed in the same row as 01, stepped */
.gr-02 { grid-column: 1 / 7; }                       /* mood board */
.gr-07 { grid-column: 7 / 13; }                       /* 07 pale (139), 6/12 */
.gr-04 { grid-column: 1 / -1; width: 100vw; margin-left: calc(50% - 50vw); }   /* full bleed (pale) */
.gr-04 img { box-shadow: none; }
.gr-05 { grid-column: 1 / 6; }
.gr-08 { grid-column: 7 / 12; margin-top: 200px; }
.case { overflow-x: clip; }
.next-proj { margin-top: 200px; border-top-color: #CFC5B5 !important; }
.next-proj a { color: #141210; }

/* --- Vera type lock: sizes that must beat site.css --- */
/* Cormorant 24: cover names, film names, facts, Work titles, next-proj, frame-link spans */
.case-head h1,
body.project .case-head h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 16px;
}
.facts dd {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
}
.frame-link span,
.frame-link .cap .name {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
}
.next-proj,
.next-proj a {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
}
/* Outfit 17: essay body (unify ~18 → 17). note-line already 17 above. */
.essay p {
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
}
/* Outfit 11: facts labels / kickers (reinforce) */
.facts dt,
.kicker,
.next-proj span {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Hero clamp 64–128: landing/opening only — keep supersize exception */
.opening h1,
.hero h1 {
  font-size: clamp(64px, 12vw, 128px);
}
/* Cormorant 40: Contact / Studio / Room door h1 only — already set below; do not shrink */


/* --- Eight pack projects (Dragon…Regent): 12-col spans, dark = small --- */
/* Dragon — all pale */
.dg-01 { grid-column: 1 / -1; }
.dg-02 { grid-column: 1 / 9; }
.dg-03 { grid-column: 8 / 13; margin-top: 200px; }
.dg-04 { grid-column: 1 / 8; }
.dg-05 { grid-column: 6 / 13; margin-top: 160px; }
.dg-06 { grid-column: 3 / 10; }
/* Candy */
.ca-01 { grid-column: 1 / -1; }
.ca-02 { grid-column: 1 / 8; }
.ca-03 { grid-column: 8 / 13; margin-top: 200px; }
.ca-04 { grid-column: 3 / 10; }
/* Redwood */
.rw-01 { grid-column: 1 / -1; }
.rw-02 { grid-column: 1 / 9; }
.rw-03 { grid-column: 8 / 13; margin-top: 200px; }
.rw-04 { grid-column: 1 / 8; }
.rw-05 { grid-column: 6 / 13; }
.rw-06 { grid-column: 1 / 7; }
.rw-07 { grid-column: 7 / 13; margin-top: 160px; }
.rw-08 { grid-column: 2 / 5; margin-top: 200px; } /* dark small */
/* Aton */
.at-01 { grid-column: 1 / -1; }
.at-02 { grid-column: 1 / 8; }
.at-03 { grid-column: 7 / 13; margin-top: 200px; }
.at-04 { grid-column: 1 / 7; }
.at-05 { grid-column: 6 / 13; }
/* JCE — many dark */
.jc-01 { grid-column: 1 / 8; }
.jc-02 { grid-column: 9 / 13; margin-top: 200px; } /* dark */
.jc-03 { grid-column: 1 / 5; } /* dark */
.jc-04 { grid-column: 6 / 10; margin-top: 160px; } /* dark */
.jc-05 { grid-column: 10 / 13; } /* dark */
.jc-06 { grid-column: 1 / 8; }
.jc-07 { grid-column: 9 / 13; margin-top: 200px; } /* dark */
.jc-08 { grid-column: 3 / 10; }
/* TPSSS — drawing-first (black-ground layouts: no multiply) */
.tone-ink img { box-shadow: none; mix-blend-mode: normal; filter: none; }
.tp-lay1 { grid-column: 1 / 9; }
.tp-lay2 { grid-column: 6 / 13; }
.tp-01 { grid-column: 1 / -1; width: 100vw; margin-left: calc(50% - 50vw); }
.tp-01 img { box-shadow: none; }
.tp-04 { grid-column: 1 / 7; }
.tp-05 { grid-column: 7 / 13; margin-top: 160px; }
.tp-06 { grid-column: 3 / 7; margin-top: 200px; } /* dark */
/* VMK */
.vm-01 { grid-column: 1 / 5; } /* dark */
.vm-02 { grid-column: 6 / 10; margin-top: 160px; } /* dark */
.vm-03 { grid-column: 1 / 8; } /* material board */
.vm-04 { grid-column: 6 / 13; margin-top: 200px; }
.vm-05 { grid-column: 1 / 5; } /* dark */
.vm-06 { grid-column: 8 / 12; margin-top: 200px; } /* dark */
/* Regent */
.re-01 { grid-column: 1 / 5; } /* dark */
.re-02 { grid-column: 1 / -1; }
.re-03 { grid-column: 1 / 7; }
.re-04 { grid-column: 8 / 12; margin-top: 200px; } /* dark */
.re-05 { grid-column: 1 / 7; }
.re-06 { grid-column: 8 / 12; margin-top: 160px; } /* dark */
.re-07 { grid-column: 2 / 9; }
.re-08 { grid-column: 9 / 13; margin-top: 200px; } /* dark */
.re-09 { grid-column: 1 / 7; }
.re-10 { grid-column: 8 / 12; margin-top: 160px; } /* dark */
.re-11 { grid-column: 3 / 7; } /* dark */

@media (max-width: 760px) {
  .g { display: flex; flex-direction: column; gap: 96px; margin-top: 72px; }
  .g-item { width: 100%; margin-top: 0 !important; }
  .g-item.tone-dark { width: 62%; }                   /* dark ones never full width on phone */
  .t-03, .t-08, .a-06, .rw-08, .jc-02, .jc-03, .jc-04, .jc-05, .jc-07, .tp-06, .vm-01, .vm-02, .vm-05, .vm-06, .re-01, .re-04, .re-06, .re-08, .re-10, .re-11 { align-self: flex-end; }
  .gr-04, .ah-18, .tp-01 { width: 100vw; }
  .next-proj { margin-top: 96px; }
}

/* Leave the landing once: sharper orange, no word, then the next page. */
.leave {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #ED5315;
}

/* Contact, Studio, Room door: centred note shell on black. Trial only. */
body.contact, body.studio-page, body.room { color-scheme: dark; }
body.contact .note, body.studio-page .note, body.room .note {
  box-sizing: border-box;
  width: min(440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 120px 0 72px;
}
body.contact .note .kicker,
body.studio-page .note .kicker,
body.room .note .kicker {
  text-align: center;
  margin: 0 0 14px;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A48455;
}
body.contact h1, body.studio-page h1, body.room h1 {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #E8E2D6;
  margin: 0 0 12px;
}
body.contact .note-line, body.studio-page .note-line {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.35;
  color: #E8E2D6;
  text-align: center;
}
body.studio-page .note-line + .note-line { margin-top: 12px; }
body.studio-page .note .kicker:not(:first-child) { margin-top: 28px; }
body.studio-page .note-link {
  margin: 28px 0 0;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.studio-page .note-link a {
  color: #E8E2D6;
  border-bottom: 1px solid rgba(232,226,214,0.45);
  padding-bottom: 4px;
}
body.contact form, body.room form { margin-top: 28px; text-align: left; }
body.contact label, body.room label {
  display: grid;
  gap: 0;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a48455;
  text-align: left;
}
body.contact input, body.contact select, body.room input, body.room select {
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: #E8E2D6;
  text-align: left;
}
body.contact button:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (max-width: 760px) {
  body.contact .note, body.studio-page .note, body.room .note {
    width: min(440px, calc(100% - 48px));
    margin: 0 auto;
    padding-top: 88px;
  }
}

/* Questionnaire: 640 shell. Contact’s .note stays 440. Off-nav draft. */
body.questionnaire .note-wide {
  box-sizing: border-box;
  width: min(640px, calc(100% - 64px));
  margin: 0 auto;
  padding: 120px 0 96px;
  text-align: center;
}
body.questionnaire form {
  margin-top: 36px;
  text-align: left;
  display: grid;
  gap: 28px;
}
body.questionnaire fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
body.questionnaire legend {
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A48455;
  margin-bottom: 4px;
  padding: 0;
}
body.questionnaire .field {
  display: grid;
  gap: 0;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a48455;
  text-align: left;
}
body.questionnaire .field input,
body.questionnaire .field select,
body.questionnaire .field textarea {
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: #E8E2D6;
  text-align: left;
}
body.questionnaire .checks {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
body.questionnaire .check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: #E8E2D6;
  text-align: left;
}
body.questionnaire .check input {
  width: auto;
  margin: 0;
  accent-color: #A48455;
  border: 0;
  border-bottom: 0;
  padding: 0;
}
body.questionnaire .sub {
  display: grid;
  gap: 10px;
  padding-left: 0;
  margin-top: 4px;
}
body.questionnaire .hint {
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(232,226,214,0.55);
  margin: 0;
  text-align: left;
}
body.questionnaire button[type="submit"] {
  justify-self: start;
  margin-top: 8px;
  opacity: 1;
  cursor: pointer;
}
@media (max-width: 760px) {
  body.questionnaire .note-wide {
    width: min(640px, calc(100% - 64px));
    padding-top: 88px;
  }
}

/* Services: process stages. 640 shell (questionnaire width); Contact .note stays 440. */
body.services { color-scheme: dark; }
body.services .note-wide {
  box-sizing: border-box;
  width: min(640px, calc(100% - 48px));
  margin: 0 auto;
  padding: 120px 0 96px;
  text-align: center;
}
body.services .note-wide .kicker {
  text-align: center;
  margin: 0 0 14px;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A48455;
}
body.services h1 {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #E8E2D6;
  margin: 0 0 12px;
}
body.services .note-line {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.35;
  color: #E8E2D6;
  text-align: center;
}
body.services .stage {
  margin: 40px 0 0;
  padding: 0 0 36px;
  border-bottom: 1px solid rgba(164, 132, 85, 0.2);
  text-align: left;
}
body.services .stage:first-of-type { margin-top: 48px; }
body.services .stage.stage-last {
  border-bottom: 0;
  padding-bottom: 0;
}
body.services .stage-num {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(232, 226, 214, 0.28);
}
body.services .stage-name {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #E8E2D6;
}
body.services .stage-body {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.35;
  color: #E8E2D6;
}
body.services .stage-body + .stage-body { margin-top: 8px; }
body.services .note-link {
  margin: 48px 0 0;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.services .note-link a {
  color: #E8E2D6;
  border-bottom: 1px solid rgba(232,226,214,0.45);
  padding-bottom: 4px;
}
@media (max-width: 760px) {
  body.services .note-wide {
    width: min(640px, calc(100% - 48px));
    padding-top: 88px;
  }
  body.services .stage-num { font-size: 48px; }
  body.services .stage { margin-top: 32px; padding-bottom: 28px; }
}


/* Mobile header (≤600): mark on its own row, links centred below. Desktop untouched. */
@media (max-width: 600px) {
  nav {
    height: auto !important;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 12px 16px 0 !important;
  }
  body.home { padding-top: 77px; }
  nav .links {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
  }
  nav .links, nav .links a { letter-spacing: 0.14em; }
  /* Tap targets: 44px tall hit area from padding/min-height. Text stays 11px; spacing between words
     unchanged (7px + 7px replaces the old 14px gap). Bar is 77px vs 74px before (incl. 1px hairline). */
  nav .links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 7px;
    box-sizing: border-box;
  }
}

/* Services stage bar (Vera filling timeline + quiet register). */
body.services .stage-bar {
  position: sticky;
  top: 72px;
  z-index: 5;
  margin: 40px 0 0;
  padding: 14px 0 36px;
  background: #141210;
  box-shadow: none;
  filter: none;
  transition: top .45s ease, opacity .3s ease, visibility .3s;
}
body.services .stage-bar.is-past { opacity: 0; visibility: hidden; pointer-events: none; }
body.services .stage-bar ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.services .sb-track {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 32px;
  height: 1px;
  background: rgba(232, 226, 214, 0.18);
  pointer-events: none;
  z-index: 0;
}
body.services .sb-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #A48455;
  border-radius: 0;
  box-shadow: none;
  transition: width .35s ease;
}
body.services .stage-mark {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: inline-block;
  padding: 2px 2px 5px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(232, 226, 214, 0.5) !important;
  transition: color .2s, border-color .2s;
}
body.services .stage-mark[aria-current="step"] {
  color: #E8E2D6 !important;
  border-bottom-color: #A48455;
}
body.services .stage-mark:hover { color: rgba(232, 226, 214, 0.5) !important; }
body.services .stage-mark[aria-current="step"]:hover { color: #E8E2D6 !important; }
body.services .stage-mark:focus-visible {
  outline: 1px solid rgba(232, 226, 214, 0.5);
  outline-offset: 4px;
}
body.services .sb-hover {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: Outfit, sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 226, 214, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
body.services .stage-mark:hover .sb-hover,
body.services .stage-mark:focus-visible .sb-hover { opacity: 1; }
body.services .stage { scroll-margin-top: 150px; }
body.services .stage-bar + .stage { margin-top: 40px; }
@media (max-width: 600px) {
  body.services .stage-bar { top: 77px; margin-top: 32px; padding-bottom: 22px; }
  body.services .stage { scroll-margin-top: 140px; }
  body.services .sb-hover { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.services .stage-bar,
  body.services .stage-mark,
  body.services .sb-fill,
  body.services .sb-hover { transition: none; }
}