/* DS-07 Split Stage -- Northlight Headshot Studio, an AI headshot studio.
 *
 * Section 4's palette is replaced by the one recommendation #5 names for this
 * profession. Nothing else in the design moves: the split, the rail, the hero
 * composition, the footer model, the spacing scale and the signature effect
 * are section 4's, unchanged, and only the values they read are new.
 *
 * Every contrast this stylesheet ships, computed from the palette at build
 * time rather than asserted:
 *
 *   ink on the page ground             15.40:1
 *   ink on the raised plane            16.73:1
 *   ink in a form field                13.81:1
 *   muted text on the ground            7.99:1
 *   muted text on the plane             8.68:1
 *   the accent as text on the ground   10.05:1
 *   white on the primary action fill   16.48:1
 *   white on the hovered action fill   15.16:1
 *   ink on the highlight fill           9.25:1
 *   ink on the review panel            13.81:1
 *   ink on the staff panel             12.76:1
 *   white on the dark panel            15.18:1
 *   the on-dark link on the dark panel  8.20:1
 *   muted text on the dark panel       7.04:1
 *   the focus ring on the ground       14.82:1
 *   the focus ring on the plane        16.10:1
 *   the frame colour on the ground      8.29:1
 *
 * Normal text clears 4.5:1 and every frame, ring and large-text pair clears
 * 3:1, so the overlay never has to be strengthened to rescue a colour.
 *
 * TWO TOKENS EXIST HERE THAT SECTION 4 DID NOT HAVE, and both are forced by
 * the recommendation rather than invented:
 *
 *   1. `--dark`. Section 4 painted the rail, the drawer, the skip link, the
 *      subscribe band and the footer with `--ink`, because in that palette the
 *      text ink and the dark ground were one colour. Recommendation #5 names
 *      them separately -- text #25181C, footer #381E27 -- so the dark ground
 *      gets its own token and those five backgrounds read it. No rule moved.
 *   2. `--link-d`. The old accent #C9905A was a light tan and was used AS TEXT
 *      on the dark panels, where the order inverts. The new accent #6D1D36 is
 *      a deep wine and cannot do that job -- on #381E27 it is 1.28:1, an
 *      invisible link in the footer, the rail and the subscribe band. The
 *      recommendation's highlight #D1B2F0 is what reads there, so the four
 *      on-dark link rules point at it.
 *
 * The review and staff panels are likewise their own tokens because the
 * recommendation gives them their own colours (#F2E3E8 and #ECDADD) where
 * section 4 had reused the plane and the field fill.
 *
 * THE SPLIT, which is the whole design and is therefore worth writing down.
 *
 * Section 2 asks for a 48/52 split viewport with a sticky stage on the left.
 * A design module has exactly two HTML hooks, so a single pane that outlives
 * one band cannot exist in this markup; every other band comes from the
 * shared renderer and its shape is fixed. What is built instead is a
 * PER-BAND split: at 1024 and up `.sec > .wrap` becomes a two-column grid,
 * the band's heading is moved into the 48% column and made sticky, and
 * everything after it stacks in the 52% column. The heading holds at the top
 * of the viewport while its own content scrolls past it and is released when
 * the band ends, which is the behaviour the section describes, band by band
 * rather than page-wide.
 *
 * Three things in that machinery are load-bearing and look arbitrary:
 *
 *   1. `row-gap: 0`. The stage spans `1 / span 30` so it covers every row the
 *      band will ever have. A row gap would then be multiplied by the
 *      twenty-nine empty implicit rows below the content and open a hole the
 *      height of the page. Spacing between the column-2 items is carried by
 *      margins instead, which a span cannot multiply. Empty implicit rows
 *      auto-size to zero, so the span itself costs nothing.
 *   2. `align-items: start`. A stretched grid item is exactly as tall as its
 *      area and has no room to stick. This is the difference between a sticky
 *      stage and a stage that does not move at all.
 *   3. `48% 52%` with NO column gap, the gap carried as padding INSIDE the
 *      right column. Both halves then stay expressible as a plain percentage
 *      of a known width, which is what makes every `sizes` attribute in this
 *      build a computable number instead of an estimate.
 *
 * Bands whose wrap has a single child -- the room figure, the review list,
 * the privacy body, the contact grid, the closing call to action -- have no
 * heading to put on the stage, so `:only-child` spans them across both
 * columns. Where that would make an image paint wider than its `sizes`
 * promises, pages.css pulls the band back into column 2 and draws the stage
 * as a pseudo-element instead.
 *
 * THE CONTENT BOX IS 1240px WIDE, NOT THE WRAP. Section 4 pins the content
 * max-width at 1240px and `box-sizing: border-box` is set globally, so a
 * plain `max-width: 1240px` with 48px of padding would give a 1240px box
 * with a 1144px interior and every `sizes` string in SIZES would be wrong by
 * ninety-six pixels. `.wrap` is capped at `--max + 2 * --gutter` so the
 * INTERIOR is 1240px exactly, and the cap is reached at a 1400px viewport:
 * 1240px + 96 gutters + 64 rail = 1400.
 */




:root {
  --bg: #F8F1F4;          /* page background */
  --ink: #25181C;         /* primary text */
  --act: #0C1B4B;         /* primary action */
  --acc: #6D1D36;         /* secondary accent */
  --hi: #6C3748;          /* frames and borders */
  --plane: #FDFCFC;       /* primary surface / cards */
  --field: #F2E3E8;       /* form fields */
  --muted: #5A444B;       /* secondary / muted text */
  --act-t: #0C1B4B;
  --acc-t: #6D1D36;
  --acc-f: #D1B2F0;       /* highlight / selected fill */
  --act-h: #0D205E;       /* action, hovered */
  --ink-m: #C1ABB2;       /* muted text AND hairlines on the dark ground */
  --on-act: #FFFFFF;

  --dark: #381E27;        /* footer and dark-panel ground */
  --on-dark: #FFFFFF;     /* footer text */
  --link-d: #D1B2F0;      /* a link ON the dark ground */
  --panel-rev: #F2E3E8;   /* review panel */
  --panel-stf: #ECDADD;   /* staff panel */

  /* Section 4's spacing scale, entire. No length in this build is off it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --max: 1240px;         /* the CONTENT width, section 4 */
  --measure: 68ch;        /* section 4 */
  --measure-s: 52ch;      /* section 4, review quotations */
  --radius: 16px;         /* recommendation #5's frame radius */
  --rail: 64px;           /* section 4, the desktop edge header */
  --head-h:var(--catalog-font-heading);         /* section 4, the mobile top bar */
  --band-pad: 72px;       /* section 4's 72 / 112 / 144 section spacing */
  --gutter: 16px;
  --gap: var(--s5);       /* base.css reads this for every .grid */

  --hair: 1px;
  --rule: 2px;

  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);

  /* Section 4: 220ms standard, 600ms maximum. */
  --t: 220ms cubic-bezier(.2,.8,.2,1);
  --t-long: 600ms cubic-bezier(.2,.8,.2,1);

  /* base.css draws :focus-visible from these three, so the ring is set by
     declaring them rather than by rewriting the rule. Section 4's values,
     unaltered -- see the palette note above for why no correction is due. */
  --focus-ring: #0C1B4B;
  --focus-width: 3px;
  --focus-offset: 3px;
}

/* Section 7's gutter ladder, and the section spacing that steps with it. */
@media (min-width: 360px)  { :root { --gutter: 18px; } }
@media (min-width: 375px)  { :root { --gutter: 20px; } }
@media (min-width: 414px)  { :root { --gutter: 24px; } }
@media (min-width: 768px)  { :root { --gutter: 36px; --band-pad: 80px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --band-pad: 88px; } }

/* ---- the ground ------------------------------------------------------- */

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3 {
  font-family: var(--font-h);
  font-weight: 400;
  margin: 0;
  overflow-wrap: break-word;
}

/* Section 4's mobile H1, then its desktop H1 at the 768 identity change. */
h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.02em;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3.25rem, 7vw, 7rem);
    line-height: .94;
    letter-spacing: -.035em;
  }
}

h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; }

p { margin: 0; }

.measure   { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }

a { color: var(--act-t); text-underline-offset: .18em; }
a:hover { color: var(--ink); }

/* Section 4 puts the metadata floor at .8125rem and labels at .875rem. */
.nav__no, .price__q, .svc__fitlabel, .gal__no, .rev__no, .proc__no,
.how__no, .ft__legal, .hint, .field__opt, .sub-form__status,
.cform__status, .pv__date, .revp__by, .rev__by {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- the band, and the 48/52 split ------------------------------------ */
/*
 * `overflow: clip` and not `hidden`: clip contains the section markers and
 * the rules that run to the band edge without creating a scroll container,
 * which `hidden` would -- and a scroll container between a sticky element and
 * the viewport is what silently turns a sticky stage into a static one.
 */

.sec {
  position: relative;
  overflow: clip;
  padding-block: var(--band-pad);
}

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

/* Below 1024 the band is one column and the spacing is plain margins. */
.sec > .wrap > * + * { margin-top: var(--s6); }

@media (min-width: 1024px) {
  .sec > .wrap {
    display: grid;
    grid-template-columns: 48% 52%;
    column-gap: 0;
    row-gap: 0;
    align-items: start;
  }

  .sec > .wrap > * {
    grid-column: 2;
    padding-left: var(--s7);
  }

  /* The heading IS the stage. */
  .sec > .wrap > h2,
  .sec > .wrap > .phead__h1,
  .sec > .wrap > .nf__h1 {
    grid-column: 1;
    grid-row: 1 / span 30;
    position: sticky;
    top: var(--s7);
    align-self: start;
    padding-left: 0;
    padding-right: var(--s5);
    margin-top: 0;
  }

  /* The first item in the 52% column sits level with the stage. */
  .sec > .wrap > h2 + *,
  .sec > .wrap > .phead__h1 + *,
  .sec > .wrap > .nf__h1 + * { margin-top: 0; }

  /* A band with one child has no heading to stage; -1 is safe because both
     columns are explicit. pages.css narrows this where an image is inside. */
  .sec > .wrap > :only-child {
    grid-column: 1 / -1;
    padding-left: 0;
  }
}

/* ---- the section marker ----------------------------------------------- */
/*
 * A rule and a filled square, drawn as pseudo-elements on the stage heading.
 * They are pseudo-elements and not markup because a class invented here and
 * emitted by nobody is a dead selector and the audit refuses it -- the module
 * has two HTML hooks and neither of them is a band heading.
 *
 * The rule is a structural divider, so it has to clear 3:1: it is the
 * highlight at 4.13:1. The square is decoration with nothing on it and
 * carries no requirement, but it is drawn in the action colour at
 * 6.30:1 anyway rather than in the accent, which clears nothing here.
 */

.sec > .wrap > h2::before,
.sec > .wrap > .phead__h1::before,
.sec > .wrap > .nf__h1::before {
  content: "";
  display: block;
  width: var(--s8);
  height: var(--rule);
  background: var(--hi);
  margin-bottom: var(--s4);
}

.sec > .wrap > h2::after,
.sec > .wrap > .phead__h1::after,
.sec > .wrap > .nf__h1::after {
  content: "";
  display: block;
  width: var(--s3);
  height: var(--s3);
  background: var(--act);
  margin-top: var(--s5);
}

/* ---- the vertical edge header ----------------------------------------- */
/*
 * One element in two states. Below 1024 it is an ordinary 56px top bar with
 * the shared <details> drawer; at 1024 and up it is fixed to the left edge,
 * 64px wide and the full height of the viewport, and the drawer is replaced
 * by the rail's own nine links. Section 7 puts that change at 1024 in as many
 * words: "desktop nav replaces disclosure".
 *
 * ROTATION, which is the one thing here that can quietly fail an audit.
 * measure2 reads every image's getBoundingClientRect and compares it against
 * what `sizes` promised, and a transform: rotate() on ANY ancestor of an
 * <img> inflates that rectangle. The rail rotates its wordmark, its nine
 * links and its Book control. NOT ONE OF THEM CONTAINS AN IMAGE, and nothing
 * else anywhere in this build is rotated at all.
 *
 * `writing-mode: vertical-rl` with `transform: rotate(180deg)` makes a label
 * read bottom-to-top. It is applied to each link rather than to the list, so
 * the nine keep their order down the rail instead of running backwards.
 */

.hd {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--dark);
  color: var(--bg);
}

/* A button carries its own pair and must not inherit the panel's link
   colour: `.hd a` is (0,1,1) and `.btn--book` is (0,1,0), so without the
   :not() the rail's link colour repainted the Book control's ink text in the
   page ground -- accent on accent-adjacent, 2.35:1 in the rail and 1.00:1 in
   the footer, twenty failures across ten pages and not one of them visible
   in the palette table, because the palette was never the thing that was
   wrong. */
.hd a:not(.btn) { color: var(--bg); }
.hd a:not(.btn):hover { color: var(--link-d); }

.hd__in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--head-h);
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mark {
  font-family: var(--font-h);
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  margin-right: auto;
  display: block;
}

.mark__h { margin-inline-end: var(--s2); }

.mark__sub {
  font-family: var(--font-b);
  font-size: .8125rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-m);
}

.nav { display: none; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  font-size: .875rem;
}

.nav__link[aria-current="page"] { color: var(--acc); }

.nav__no { color: var(--ink-m); }

/* ---- the drawer, below 1024 ------------------------------------------- */

.drawer { margin-left: var(--s2); }

.drawer__toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s2);
  cursor: pointer;
  list-style: none;
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.drawer__toggle::-webkit-details-marker { display: none; }

/* ---- the top bar below 768 -------------------------------------------- *
 * Section 4's bar is a nowrap flex row: wordmark, Book action, drawer
 * toggle. It carries no media query of its own because the base site's
 * wordmark subtitle is five characters. This one's is fifteen, and at 390
 * the three items demanded more than the 342px interior: the wordmark
 * wrapped under the Book pill and the pill's label overflowed its fill.
 *
 * The bar is given a phone layout. The wordmark stacks onto two lines of
 * its own so its width is its longest line rather than both lines side by
 * side, and the action and the toggle take their compact size. Nothing at
 * 768 and nothing at 1024 and up is touched -- both were verified clean on
 * all ten pages before this rule existed -- and no token moves.
 */
@media (max-width: 767.98px) {
  .hd__in { gap: var(--s2); }

  .mark { min-width: 0; font-size: 1rem; }

  .mark__h { display: block; margin-inline-end: 0; }

  .mark__sub {
    display: block;
    font-size: .5625rem;
    letter-spacing: .06em;
    line-height: 1.3;
  }

  /* base.css warns that a (0,1,1) selector there outranks a bare
     .btn--book, so this is (0,2,0) and wins on its own merits. */
  .hd .btn--book {
    flex: none;
    white-space: nowrap;
    font-size: .75rem;
    padding-inline: var(--s3);
  }

  .drawer { margin-left: 0; }

  .drawer__toggle {
    font-size: .75rem;
    padding-inline: var(--s2);
  }
}

.drawer__bars {
  width: 20px;
  height: var(--rule);
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.drawer[open] .drawer__bars { box-shadow: 0 6px 0 currentColor; }

.drawer__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--dark);
  border-top: var(--hair) solid var(--ink-m);
  padding: var(--s4) var(--gutter) var(--s6);
}

.drawer__panel nav { display: grid; }

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  text-decoration: none;
  border-bottom: var(--hair) solid var(--ink-m);
}

.drawer__link:last-child { border-bottom: 0; }

.drawer__link[aria-current="page"] { color: var(--acc); }

/* ---- the rail, at 1024 and up ----------------------------------------- */

@media (min-width: 1024px) {
  body { padding-left: var(--rail); }

  .hd {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: var(--hair) solid var(--ink);
  }

  .hd__in {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--s6);
    min-height: 100%;
    width: var(--rail);
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: var(--s4);
  }

  .mark {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-right: 0;
    font-size: 1.25rem;
  }

  .nav { display: block; }

  .nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s5);
  }

  .nav__link {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding-block: var(--s2);
    letter-spacing: .04em;
  }

  /* The two-digit index is the drawer's affordance, not the rail's; it is
     hidden here rather than deleted, which would make it a dead selector. */
  .nav__link .nav__no { display: none; }

  .drawer { display: none; }
}

/* ---- actions ---------------------------------------------------------- */
/*
 * Logical padding throughout, because the Book control is horizontal in the
 * top bar and vertical in the rail and section 4's "24px minimum horizontal
 * padding on the primary action" means 24px ALONG the text in both.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s5);
  padding-block: var(--s3);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-b);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}

.btn--primary, .btn--sub {
  background: var(--act);
  color: var(--on-act);
}

.btn--primary:hover, .btn--primary:active,
.btn--sub:hover, .btn--sub:active {
  background: var(--act-h);
  color: var(--on-act);
}

.btn--ghost {
  background: transparent;
  color: var(--act-t);
  box-shadow: inset 0 0 0 var(--rule) var(--hi);
}

.btn--ghost:hover, .btn--ghost:active {
  background: var(--plane);
  color: var(--ink);
}

.btn--book {
  background: var(--acc);
  color: var(--ink);
}

.btn--book:hover, .btn--book:active {
  background: var(--bg);
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

/* ---- the skip link ---------------------------------------------------- */

.skip {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  z-index: 50;
  background: var(--dark);
  color: var(--bg);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-220%);
}

.skip:focus, .skip:focus-visible { transform: translateY(0); }

/* ---- the subscribe band ----------------------------------------------- */

.sub-band {
  background: var(--dark);
  color: var(--bg);
  padding-block: var(--s9);
}

.sub-band a:not(.btn) { color: var(--link-d); }

.sub-band__in {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 1024px) {
  .sub-band__in {
    grid-template-columns: 48% 52%;
    column-gap: 0;
    align-items: start;
  }
  .sub-band__text { padding-right: var(--s5); }
  .sub-form { padding-left: var(--s7); }
}

.sub-band__h {
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.04;
}

.sub-band__p {
  margin-top: var(--s4);
  max-width: var(--measure);
  color: var(--ink-m);
}

.sub-form { display: grid; gap: var(--s4); justify-items: start; }

.sub-form__field { width: 100%; max-width: 420px; }

.sub-form__status { margin: 0; color: var(--ink-m); }

/* ---- forms ------------------------------------------------------------ */

.field label, .sub-band label {
  display: block;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: var(--s2);
}

.field input, .field select, .field textarea, .sub-band input {
  width: 100%;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 0 0 var(--hair) var(--muted);
  transition: box-shadow var(--t);
}

.field textarea { min-height: 168px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus,
.sub-band input:focus { box-shadow: inset 0 0 0 var(--rule) var(--ink); }

.field input::placeholder, .field textarea::placeholder,
.sub-band input::placeholder { color: var(--muted); }

.field__opt { text-transform: none; letter-spacing: normal; }

.hint { margin-top: var(--s2); text-transform: none; letter-spacing: normal; }

.err { margin: var(--s2) 0 0; font-size: .875rem; color: var(--act-t); }

.sub-band .err { color: var(--link-d); }

/* ---- the footer ------------------------------------------------------- */

.ft {
  background: var(--dark);
  color: var(--bg);
  padding-block: var(--s8) var(--s7);
}

.ft a:not(.btn) { color: var(--link-d); }
.ft a:not(.btn):hover { color: var(--bg); }

.ft__in {
  display: grid;
  gap: var(--s7);
  margin-top: var(--s8);
}

@media (min-width: 768px) {
  .ft__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ft__h {
  font-size: 1.125rem;
  line-height: 1.2;
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--hair) solid var(--ink-m);
}

.ft__addr { line-height: 1.9; }

.ft__hours { margin: 0; }

.ft__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding-block: var(--s2);
  border-bottom: var(--hair) solid var(--ink-m);
}

.ft__row:last-child { border-bottom: 0; }

.ft__row dt { font-weight: 700; min-width: 11ch; }

.ft__row dd { margin: 0; color: var(--ink-m); }

.ft__list { list-style: none; margin: 0; padding: 0; }

.ft__list li { border-bottom: var(--hair) solid var(--ink-m); }

.ft__list li:last-child { border-bottom: 0; }

.ft__list a {
  display: block;
  min-height: 44px;
  line-height: 44px;
  text-decoration: none;
}

.ft__foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--ink-m);
  display: grid;
  gap: var(--s3);
}

.ft__legal { color: var(--ink-m); }

/* ---- print ------------------------------------------------------------ */
/*
 * base.css already hides .skip, .drawer and .sub-band in print. What it
 * cannot know is that this header is FIXED at 1024 and up, and a fixed
 * element reprints on every page. It is returned to the flow here.
 */

@media print {
  body { padding-left: 0; }
  .hd { position: static; width: auto; background: none; color: inherit; }
  .hd__in { flex-direction: row; width: auto; }
  .mark, .nav__link { writing-mode: horizontal-tb; transform: none; }
  .sec > .wrap { display: block; }
  .sec > .wrap > * { padding-left: 0; }
  .ft { background: none; color: inherit; }
}


/* PREMIUM REALISM PASS — DS01-09
+   One unmistakable signature per design; shared selectors only provide polish. */
footer, .ft { position: relative; overflow: hidden; isolation: isolate; }
footer::before, .ft::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 88% 12%, rgba(209,178,240,.14), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(209,178,240,.14) 58% 59%, transparent 59%); }
footer a, .ft a { text-underline-offset: .28em; transition: color .2s ease, transform .2s ease; }
footer a:hover, footer a:focus-visible, .ft a:hover, .ft a:focus-visible { color: #D1B2F0; }
.stf, .stf__card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.stf:hover, .stf__card:hover { transform: translateX(5px); border-color: #6D1D36; box-shadow: 0 18px 48px rgba(109,29,54,.14); }
.field--intake { padding: 14px; border-inline-start: 3px solid #6D1D36; background: rgba(109,29,54,.07); }
.field--intake label { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .stf, .stf__card { transition: none; } .stf:hover, .stf__card:hover { transform: none; } }