/* ═══════════════════════════════════════════════════════════════════════
   EMERXING MEDIA — EDITORIAL SYSTEM v5
   Consumes assets/brand.css only. Declares no colour of its own except the
   two status tints, which are noted inline.
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:16px;top:-6rem;z-index:99;background:var(--ink);
  color:var(--paper);padding:12px 18px;border-radius:var(--radius);text-decoration:none;
  font-weight:600}
.skip:focus{top:12px}

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}@media(min-width:768px){:root{--gutter:32px}}@media(min-width:1200px){:root{--gutter:56px}}

/* Sticky header must never cover anchored content (§4). */
html{scroll-padding-top:100px}@media(max-width:939px){html{scroll-padding-top:16px}}

/* No unexplained blank region over 160px: when two bands of the same colour
   sit together the doubled padding is collapsed (§3.4). */
.band-paper + .band-paper,.band-sage + .band-sage,
.band-ink + .band-ink,.band-forest + .band-forest,
section:not([class*="band"]) + section:not([class*="band"]){padding-top:0}
section{padding-block:var(--section)}
section.sm{padding-block:var(--section-sm)}
.band-ink{background:var(--bg-ink);color:var(--on-dark)}
.band-forest{background:var(--bg-forest);color:var(--on-dark)}
.band-ink p,.band-forest p{color:var(--on-dark)}
.band-ink .muted,.band-forest .muted{color:var(--on-dark-muted)}
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4,
.band-forest h1,.band-forest h2,.band-forest h3,.band-forest h4{color:var(--on-dark)}

/* ── Type ─────────────────────────────────────────────────────────────── */
h1,h2,h3,.display{font-family:var(--serif);
  font-variation-settings:var(--fr-display);font-weight:500;
  color:var(--text);margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:var(--t-h1);line-height:var(--lh-display)}
h2{font-size:var(--t-h2);line-height:var(--lh-head)}
h3{font-size:var(--t-h3);line-height:var(--lh-head);
  font-variation-settings:var(--fr-text);letter-spacing:-.008em}
h4{font-family:var(--sans);font-size:var(--t-h4);font-weight:650;margin:0;
  line-height:1.3;letter-spacing:-.01em;color:var(--text)}
p{margin:0 0 1.1em;max-width:var(--measure)}
.lead{font-size:var(--t-body-lg);line-height:1.5;max-width:var(--measure-read);color:var(--text)}
.muted{color:var(--text-muted)}
.small{font-size:var(--t-body-sm)}
.caption{font-size:var(--t-caption);color:var(--text-muted);max-width:52ch}
.eyebrow{font-family:var(--sans);font-size:var(--t-label);font-weight:650;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--label);margin:0 0 14px}
.band-ink .eyebrow,.band-forest .eyebrow{color:var(--label-dark)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:13px 26px;border-radius:var(--radius);
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.btn-primary:hover{background:var(--forest-press);border-color:var(--forest-press)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.band-ink .btn-outline,.band-forest .btn-outline{color:var(--paper);border-color:var(--paper)}
.band-ink .btn-outline:hover,.band-forest .btn-outline:hover{background:var(--paper);color:var(--ink)}
.band-ink .btn-primary,.band-forest .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.link-arrow{font-weight:600;color:var(--label);text-decoration:none;
  border-bottom:1.5px solid var(--brass);padding-bottom:2px}
.link-arrow:hover{color:var(--ink);border-color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--s5)}@media(max-width:520px){.actions .btn{width:100%}}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-head{background:var(--bg);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:60}
.site-head.is-condensed{box-shadow:0 1px 0 var(--rule),0 6px 18px rgba(16,42,61,.06)}
.nav-toggle{display:none;background:transparent;border:1.5px solid var(--ink);
  border-radius:var(--radius);min-height:var(--tap);padding:8px 14px;font-weight:600;
  font-size:15px;cursor:pointer;color:var(--text);font-family:var(--sans)}

.card .eyebrow{margin-bottom:10px}
/* sans-serif label headings that must still sit at the correct outline level */
.lbl{font-family:var(--sans);font-size:var(--t-h4);font-weight:650;
  line-height:1.3;letter-spacing:-.01em;font-variation-settings:normal}
.band-ink .lbl,.band-forest .lbl{color:var(--on-dark)}
.band-ink .steps p{color:var(--on-dark-muted)}
.band-ink .steps li::before{color:var(--brass)}

/* ── Pull quote ───────────────────────────────────────────────────────── */
.pull{border-left:3px solid var(--brass);padding:6px 0 6px 26px;margin:0;
  font-family:var(--serif);font-variation-settings:var(--fr-text);
  font-size:clamp(20px,1.6vw + 1rem,28px);line-height:1.34;max-width:34ch}
.pull cite{display:block;font-family:var(--sans);font-size:13px;font-style:normal;
  font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  margin-top:14px}
/* A pull quote used as a display element rather than as an aside: editorial
   scale, its own brass rule, and a column of its own on the rail. */
/* The measure is set in `ch`, so it shrinks as the type grows and the
   quote ended up 22 characters wide inside a seven-track column — 67% of the
   rail empty beside it, which is the same "awkward unused layout space" the
   rest of this pass removed, arriving through a different door. The column
   IS the measure; the quote fills it. */
.pull-lg{max-width:none;border-left:0;padding:0;
  font-size:clamp(25px,1.9vw + 1rem,38px);line-height:1.22;letter-spacing:-.012em;
  text-wrap:balance}
.pull-lg::before{content:"";display:block;width:52px;height:2px;
  background:var(--accent);margin:0 0 var(--s5)}
.benefits-body{display:grid;gap:var(--gap-block) var(--col-gap);
  grid-template-columns:minmax(0,1fr)}
.benefits-body > *{min-width:0}
@media(min-width:1024px){
  .benefits-body{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .benefits-body > .pull-lg{grid-column:1/span 7;margin-bottom:var(--s7)}
  .benefits-body > .benefit-cols{grid-column:1/-1}
}
.benefit-cols{display:grid;gap:var(--gap-block) var(--col-gap);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.benefit-cols{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.benefit-cols > *{min-width:0}
/* A row of short labelled reasons reads as a deliberate index when it sits
   on a rule, and as a stack of loose paragraphs when it does not. The same
   device as .flow, one weight quieter, so the two are a family rather than
   the same thing twice. */
.benefit{border-top:1px solid var(--rule);padding-top:var(--s4)}
.benefit h3{margin-bottom:var(--s3)}
.benefit p{margin:0;max-width:34ch}
.band-ink .benefit{border-top-color:var(--rule-dark)}

/* ── Tables ───────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:26px}
table{width:100%;border-collapse:collapse;font-size:var(--t-body-sm);min-width:34ch}
caption{text-align:left;margin-bottom:12px;font-size:var(--t-caption);color:var(--text-muted)}
th,td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{border-bottom:2px solid var(--ink);font-weight:650;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase}
.open{color:var(--forest);font-weight:650}

/* ── Forms ────────────────────────────────────────────────────────────── */
form{max-width:min(620px,100%)}
.field{margin-bottom:22px}
label{display:block;font-weight:600;margin-bottom:7px;font-size:15px}
.hint{display:block;font-weight:400;color:var(--text-muted);font-size:13.5px;margin-top:4px}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;padding:13px 15px;min-height:var(--tap);font-family:var(--sans);
  font-size:16px;color:var(--text);background:var(--paper);
  border:1px solid var(--stone);border-radius:var(--radius)}
input:focus,textarea:focus,select:focus{border-color:var(--ink)}
::placeholder{color:var(--stone)}
textarea{min-height:150px;resize:vertical}
.consent{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}
.consent input{margin-top:3px;width:22px;height:22px;flex:0 0 auto;accent-color:var(--forest)}
.consent label{font-weight:400;margin:0;max-width:58ch}
.hp{position:absolute;left:-9999px}

/* Status tints: the only two colours declared here. Both derived from the
   brand greens/terracotta family and measured against their own grounds. */
.status{padding:20px 24px;border-radius:var(--radius-lg);margin-bottom:24px;
  max-width:620px;border-left:4px solid transparent}
.status b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:5px}
.status p{margin:0}
.status-ok{background:var(--sage);color:var(--forest-press);border-left-color:var(--forest)}
.status-fail{background:var(--clay-bg);color:var(--clay-ink);border-left-color:var(--clay-ink)}
.status-note{background:var(--bg-sage);color:var(--text);border-left-color:var(--brass)}


/* ── Shared 12-column grid ────────────────────────────────────────────── */
.g12{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--col-gap)}@media(min-width:700px){.g12{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(min-width:1024px){.g12{grid-template-columns:repeat(12,minmax(0,1fr))}}@media(min-width:1024px){
  .c-6{grid-column:span 6}.c-5{grid-column:span 5}.c-7{grid-column:span 7}
  .c-4{grid-column:span 4}.c-3{grid-column:span 3}
  .c-read{grid-column:1/span 8}}@media(min-width:700px) and (max-width:1023px){
  .c-6,.c-5,.c-7,.c-8{grid-column:span 8}.c-4,.c-3{grid-column:span 4}.c-read{grid-column:1/-1}}
.read{max-width:var(--measure-read)}


/* ═══════════════════════════════════════════════════════════════════════
   PHASE 4 · LAYOUT LAYER — rebuilt, not patched
   ───────────────────────────────────────────────────────────────────────
   The rejected preview accumulated eight successive fix layers in this
   file. Four different `.foot-top` grids, three `.cover` sizes, three
   `.site-foot h2` rules and two competing hero-cover caps were all live at
   once, and the last one to parse won. That is why spacing read as
   inconsistent and why imagery sat off its rail.

   Everything below is declared exactly once. Where a rule replaces an
   earlier one, the earlier one has been deleted rather than overridden.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── L-03 · One rail, one rhythm ────────────────────────────────────────
   Every full-width block on the site now aligns to the same 12-column
   rail, and every section has the same internal rhythm:
       section padding → header → gap-head → body → gap-block → tail
   No section sets its own margins inline. */

.rail{display:grid;gap:var(--gap-block) var(--col-gap);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.rail{grid-template-columns:repeat(12,minmax(0,1fr))}}
.rail > *{min-width:0}

/* L-03a · Layout utilities. The rejected build expressed all of these as
   inline `style` attributes on individual elements — 34 of them across five
   pages, with five different values for the same intent. Inline layout cannot
   be kept consistent and cannot be corrected in one place, which is the direct
   cause of "spacing is inconsistent". Every one is now a named class. */
@media(min-width:1024px){.g12 > .rail-end{grid-column-end:-1}}
.g12.mid,.rail.mid{align-items:center}
.g12.bottom,.rail.bottom{align-items:end}
.self-end{align-self:end}
.sec-gap{margin-bottom:var(--gap-head)}
.sub-gap{margin-top:var(--gap-block)}
.note-tail{margin-top:var(--gap-block);max-width:86ch}
.band-ink .note-tail,.band-forest .note-tail{color:var(--on-dark-muted)}
/* Two form rules previously used var(--space-6), a token that does not exist
   in brand.css. Both declarations resolved to nothing, so the fieldset had a
   browser-default border and the legal note had no separation. */
.fieldset-plain{border:0;padding:0;margin:0 0 var(--s6);min-width:0}
.form-legal{margin-top:var(--s6)}

/* Section header — heading on the left rail, supporting note flush to the
   right rail. 6 + 1 empty + 5 = 12, identical on every page. */
.sec-head{display:grid;gap:var(--s4) var(--col-gap);margin:0 0 var(--gap-head)}
.sec-head > *{min-width:0}
.sec-head .eyebrow{margin-bottom:12px}
.sec-head h2,.sec-head h1{margin:0}
.sec-head .sec-note{margin:0}
.sec-head .sec-note p{margin:0;max-width:44ch}
@media(min-width:1024px){
  .sec-head{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .sec-head > .sec-title{grid-column:1/span 6}
  /* 11B-V8 · the standfirst was aligned to the heading's BASELINE in a
     7-track column, which put a small grey sentence in mid-air beside a
     large serif heading with nothing under it. A standfirst belongs on the
     heading's own top line, set as a standfirst: same optical top, its own
     brass rule, reading size rather than caption size. */
  .sec-head > .sec-note{grid-column:8/-1;padding-top:.5em;
    border-top:1px solid var(--rule);margin-top:.42em}
}
.sec-head .sec-note p{font-size:var(--t-body-sm);line-height:1.55;
  color:var(--text-muted)}
@media(min-width:700px) and (max-width:1023px){
  .sec-head{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .sec-head .sec-note p{max-width:none}
}
/* The 6-track column is the measure. An additional ch cap on top of it made
   the heading narrower than its own longest word plus punctuation, and
   `overflow-wrap:break-word` then broke "neighbourhood," across two lines
   leaving an orphaned comma. The column constrains the heading; nothing else
   needs to. */
.sec-head > .sec-title{max-width:none;overflow-wrap:normal}
.sec-head h2{text-wrap:balance}

/* The block that follows a section header, and the tail that follows it. */
.sec-tail{margin:var(--gap-block) 0 0}
.sec-tail p{margin:0 0 var(--s4);max-width:78ch}
.sec-tail p:last-child{margin-bottom:0}
.sec-tail .actions{margin-top:var(--s5)}


/* ── L-04 · Feature row: artwork and copy, locked to the rail ───────────
   The rejected build put a 360px cover inside a 6-column track roughly
   550px wide and centred it, leaving ~190px of dead ground on both sides
   of the artwork. The media column is now 5 tracks wide and the artwork
   fills it, aligned to the outer rail rather than to its own centre. */

.feature{display:grid;gap:var(--gap-block) var(--col-gap);align-items:center;
  grid-template-columns:minmax(0,1fr)}
.feature > *{min-width:0}
@media(min-width:1024px){
  .feature{grid-template-columns:repeat(12,minmax(0,1fr))}
  .feature > .feature-media{grid-column:1/span 5}
  .feature > .feature-copy {grid-column:7/-1}
  .feature.media-right > .feature-copy {grid-column:1/span 6}
  .feature.media-right > .feature-media{grid-column:8/-1}
  .feature > .feature-media .cover{margin-inline:0 auto}
  .feature.media-right > .feature-media .cover{margin-inline:auto 0}
}
.feature-copy > :first-child{margin-top:0}
.feature-copy > :last-child{margin-bottom:0}
.feature-copy .lead{margin-top:14px}
.feature-copy .actions{margin-top:var(--s5)}

/* L-04b · the same feature without artwork — see Render::r_text_image. */
.spread-title{border-top:2px solid var(--accent);padding-top:var(--s5)}
.spread-title h2{margin:0;text-wrap:balance;
  /* A section heading set for a full-width band is too large for a
     four-track rail: "The ones we are asked most." broke onto four lines.
     The rail has its own display size. */
  font-size:clamp(26px,1.4vw + 1rem,38px)}
.spread-title .sec-head{margin-bottom:0;border-top:0;padding-top:0}
.spread-title .sec-head > .sec-title,
.spread-title .sec-head > .sec-note{grid-column:1/-1}
.spread-title .sec-head > .sec-note{border-top:0;padding-top:0;margin-top:var(--s4)}
.spread-title .sec-head h2{font-size:clamp(26px,1.4vw + 1rem,38px)}
.spread-title .eyebrow{margin-bottom:12px}
.spread-body > :first-child{margin-top:0}
.spread-body > :last-child{margin-bottom:0}
.spread-body .lead{margin-bottom:var(--s5)}
.spread-body p{max-width:64ch}
.spread-body .actions{margin-top:var(--s6)}
@media(min-width:1024px){.spread-title{position:sticky;top:120px}}


/* ── L-05 · Hero ────────────────────────────────────────────────────────
   Copy 6 tracks, artwork 5 tracks flush to the right rail, one empty track
   between. The two columns are optically centred against each other. */

.hero{background:var(--bg);border-bottom:1px solid var(--rule);
  padding-block:clamp(44px,4.6vw,88px)}
.hero h1{font-size:var(--t-display);letter-spacing:-.022em;margin:0}
.hero .eyebrow{margin-bottom:16px}
.hero .lead{margin-top:20px}
.hero-grid{display:grid;gap:var(--s7) var(--col-gap);align-items:center;
  grid-template-columns:minmax(0,1fr)}
.hero-grid > *{min-width:0}
@media(min-width:1024px){
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .hero-copy {grid-column:1/span 6}
  .hero-media{grid-column:8/-1}
  .hero-aside{grid-column:9/-1;align-self:end}
  .hero-media .cover{margin-inline:auto 0}

  /* 11B-V3 · THE HERO WITH NO ARTWORK.
     A hero without a picture used to occupy seven of twelve tracks and
     leave the remaining five empty — 42% of the widest, most valuable
     band on the page, on four of the six launch routes. It was not a
     content gap. It was a single grid-column declaration written for the
     page that does have a cover.

     A masthead does not need a picture to fill a page; it needs a second
     column. The headline now runs long across seven tracks and the
     supporting copy and call to action sit against the right rail, which
     is how a magazine opens a feature and is the reason the page reads as
     deliberate rather than unfinished. */
  .hero-wide{grid-column:1/-1;display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--col-gap);row-gap:0;align-items:start}
  .hero-wide > .eyebrow{grid-column:1/-1}
  .hero-wide > h1{grid-column:1/span 7;margin:0}
  .hero-wide > .lead,
  .hero-wide > .muted,
  .hero-wide > .actions{grid-column:8/-1}
  .hero-wide > .lead{margin-top:.42em}
  .hero-wide > .actions{margin-top:var(--s5)}
  .hero-wide > .hero-meta{grid-column:1/-1;margin-top:var(--s7)}
  /* The right column is a rail, not a paragraph in a wide box. */
  .hero-wide > .lead,.hero-wide > .muted{max-width:none}
}
.hero-copy > :first-child{margin-top:0}
.hero-copy .actions{margin-top:var(--s6)}
.hero-meta{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--rule)}
.hero-meta dt{font-size:11px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);margin:0 0 5px}
.hero-meta dd{margin:0;font-weight:600;font-size:var(--t-body-sm)}
.hero-meta.bare{border-top:0;padding-top:0;margin-top:0}


/* ── L-06 · The magazine, at one size, on its rail ──────────────────────
   Declared once. Width is the shared dimension because the two artworks
   have different aspect ratios; the hero alone is height-bounded so the
   first screen always resolves on a laptop. */

.cover{max-width:min(100%,var(--cover-max));margin-inline:auto;
  display:flex;flex-direction:column}
.cover img{width:100%;height:auto;max-width:100%;
  border-radius:2px 5px 5px 2px;
  box-shadow:14px 20px 46px rgba(16,42,61,.20),2px 3px 8px rgba(16,42,61,.10);
  border-left:3px solid rgba(16,42,61,.13)}
.hero-media .cover{max-width:min(100%,var(--cover-max-hero))}
@media(min-width:1024px){
  .hero-media .cover img{max-height:min(62vh,600px);width:auto;
    max-width:100%;object-fit:contain;align-self:flex-end}
}
@media(max-width:1023px){.cover{--cover-max:360px;margin-inline:auto}}
.cover-note{margin:12px 0 0;font-size:12px;color:var(--text-muted);max-width:100%}
.band-ink .cover-note,.band-forest .cover-note{color:var(--on-dark-muted)}
@media(min-width:1024px){
  .feature > .feature-media .cover-note{text-align:left}
  .feature.media-right > .feature-media .cover-note,
  .hero-media .cover-note{text-align:right}
}
@media(max-width:1023px){.cover-note{text-align:center}}


/* ── L-07 · Logo lockup ─────────────────────────────────────────────────
   Inline SVG plus live HTML text: an <img>-referenced SVG cannot load the
   page webfonts, and the wordmark then overran a fixed canvas.

   V-04 · the mark was 40px in a 72px header — visually subordinate to the
   nav links beside it. V-05 · at 40px the dashed ring, the four cardinal
   dots and the radial hub resolve to grey mush, which is what made the
   mark read as a generic glyph (VD-05). Both are corrected here. */

.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  color:var(--ink);margin-right:auto;min-width:0}
@media(min-width:940px){.brand{gap:16px}}
.brand .mark{width:44px;height:44px;flex:none;color:var(--ink);
  transition:width var(--dur) var(--ease),height var(--dur) var(--ease)}
@media(min-width:940px){.brand .mark{width:48px;height:48px}}
/* Fine detail is suppressed below the size at which it can resolve. */
.brand .mark .seal-fine,.brand .mark circle.seal-fine{display:none}
/* The lockup is a 2-column grid, not a wrapping flex row.
   Measured defect: as a wrapping flex row the tagline carried
   `flex-basis:100%`, and max-content sizing sums every flex item whether or
   not it wraps. The lockup therefore reported 337px of intrinsic width for
   170px of text, which pushed the header CTA onto a second line and made the
   header 127px tall. A grid's max-content is the widest ROW, so the lockup
   now measures what it actually occupies. */
.wordmark{display:grid;grid-template-columns:auto;justify-content:start;
  line-height:1;min-width:0;row-gap:2px}
.wordmark b,.wordmark i{font-family:var(--serif);
  font-variation-settings:var(--fr-text);font-style:normal;font-weight:600;
  font-size:clamp(18px,1.1vw + .6rem,24px);letter-spacing:-.02em;white-space:nowrap}
.wordmark i{font-weight:400;color:var(--stone)}
@media(min-width:520px){
  .wordmark{grid-template-columns:auto auto;align-items:baseline;
    column-gap:.28em;row-gap:4px}
  .wordmark i{color:var(--ink)}
  .tagline{grid-column:1/-1}}
.tagline{font-family:var(--sans);font-size:9.5px;font-weight:650;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stone);
  white-space:nowrap;margin:0;
  transition:opacity var(--dur) var(--ease)}
@media(max-width:520px){.tagline{display:none}}
.brand-rev,.brand-rev .mark{color:var(--paper)}
.brand-rev .wordmark i{color:var(--ivory-dim)}
.brand-rev{margin-right:0;margin-bottom:var(--s4)}

/* Colours stated explicitly in both contexts: browser testing found the
   footer wordmark resolving to Stone on Ink (2.38:1) by inheritance. */
.site-head .brand .wordmark b{color:var(--ink)}
.site-head .brand .wordmark i{color:var(--stone)}
@media(min-width:520px){.site-head .brand .wordmark i{color:var(--ink)}}
.site-foot .brand-rev .wordmark b{color:var(--paper)}
.site-foot .brand-rev .wordmark i{color:var(--ivory-dim)}


/* ── L-08 · Header ──────────────────────────────────────────────────────
   The lockup, the nav and the CTA sit on one optical centre line, and the
   nav has its own breathing room rather than borrowing the brand's. */

.site-head .wrap{display:flex;align-items:center;gap:var(--s5);min-height:84px;
  flex-wrap:wrap;transition:min-height var(--dur) var(--ease)}
@media(min-width:940px){.site-head .wrap{min-height:92px}}
.site-head.is-condensed .wrap{min-height:68px}
.site-head.is-condensed .brand .mark{width:38px;height:38px}
.site-head.is-condensed .tagline{opacity:0}
.site-nav ul{display:flex;align-items:center;gap:clamp(18px,2.1vw,32px);
  list-style:none;margin:0;padding:0}
.site-nav a{font-size:15.5px;font-weight:550;text-decoration:none;
  color:var(--text);display:inline-flex;align-items:center;min-height:var(--tap)}
.site-nav a:hover{color:var(--label)}
.site-nav a[aria-current="page"]{color:var(--label);
  box-shadow:inset 0 -2px 0 var(--brass)}
.nav-cta{margin-left:clamp(12px,1.8vw,24px)}
/* 940–1199px: the lockup, five nav items and the CTA are within a few pixels
   of the available width. Measured at 1024 the row overflowed by 6px and the
   CTA dropped to a second line, making the header 127px tall. The gaps close
   up rather than the header growing. */
@media(min-width:940px) and (max-width:1199px){
  .site-head .wrap{gap:var(--s4);min-height:88px}
  .site-nav ul{gap:18px}
  .nav-cta{margin-left:var(--s3)}
  .site-nav a{font-size:15px}}

@media(max-width:939px){
  .site-head{position:static}
  .site-head .wrap{min-height:76px;gap:var(--s4);flex-wrap:wrap}
  .nav-toggle{display:inline-flex;align-items:center;order:2}
  .site-nav{display:none;width:100%;order:4;padding-bottom:var(--s4)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav li{border-top:1px solid var(--rule)}
  .site-nav a{min-height:52px;width:100%;font-size:17px}
  /* The booking CTA stays on the header row wherever it fits. Below that it
     is the first thing inside the open menu, rather than a full-width block
     that adds 55px to the header on every page and every scroll. */
  .nav-cta{order:1;margin:0 0 0 auto}
  /* One button geometry across the whole site — same padding, same type
     size, same height. A "compact" header variant was measured and reverted:
     it put a second button shape on 31 of 70 renders. */
  .nav-cta{white-space:nowrap}}
@media(max-width:599px){
  .nav-cta{order:5;width:100%;margin:var(--s4) 0 0;display:none}
  .site-nav.open ~ .nav-cta{display:block}
  .nav-cta .btn{width:100%}}


/* ── L-09 · Editorial tiles ─────────────────────────────────────────────
   Card heights are equalised by the grid, and the page count is pinned to
   the foot of every card so the grid keeps a baseline across all rows.

   11B-V1 · THE BLANK TILE, AND WHY IT WAS NOT A PUBLICATIONS DEFECT.
   This grid used to draw its hairlines by showing a --rule background
   through a 1px gap. That works only while the item count is an exact
   multiple of the column count. Five departments in three columns left the
   sixth cell empty, and an empty cell in a bleed grid is not empty — it is
   a solid pale-blue rectangle exactly the size of a card. The same
   mechanism was one item away from doing it on Home, on Publishers, and on
   any grid the owner ever builds in the CMS, because nothing in the section
   editor constrains an item count to a multiple of three.

   The hairline is now carried by each card, so a cell with no card in it
   draws nothing. A short last row reads as a short last row, which is
   ordinary editorial layout, rather than as a card that failed to load. */

.tiles{display:grid;gap:clamp(14px,1.5vw,24px);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:470px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{background:var(--bg-paper);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:clamp(22px,2vw,32px);
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--accent);opacity:0;transition:opacity var(--dur) var(--ease)}
.tile:hover,.tile:focus-within{background:var(--bg-sage)}
.tile:hover::before,.tile:focus-within::before{opacity:1}
.tile .n{font-family:var(--serif);font-variation-settings:var(--fr-display);
  font-size:26px;font-weight:500;line-height:1;color:var(--label);display:block;
  margin-bottom:var(--s4);padding-bottom:var(--s4);letter-spacing:.01em;
  border-bottom:2px solid var(--accent);align-self:flex-start;min-width:2.2em}
.tile .n:empty{display:none}
.tile h3{font-family:var(--sans);font-size:var(--t-h4);font-weight:650;
  letter-spacing:-.01em;line-height:1.3;margin:0 0 10px;
  font-variation-settings:normal}
.tile p{margin:0;font-size:var(--t-body-sm);color:var(--text-muted);max-width:38ch;
  line-height:1.55}
.tile .pages{display:block;margin-top:auto;padding-top:var(--s4);font-size:11px;
  font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-muted)}


/* ── L-10 · Package cards ───────────────────────────────────────────────
   Equal height, equal internal rhythm, and a tag row that occupies the
   same vertical band in both cards whether or not a card carries a tag. */

.pkg{display:grid;gap:var(--col-gap);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.pkg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pkg > *{min-width:0}
.pkg article{background:var(--bg-paper);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:clamp(24px,2.2vw,34px);
  display:flex;flex-direction:column}
.pkg article.lead-pkg{border-color:var(--forest);border-width:1.5px}
.pkg .tag{display:inline-block;align-self:flex-start;font-size:11px;
  font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper);background:var(--forest);padding:6px 11px;
  border-radius:2px;margin-bottom:var(--s4)}
.pkg .tag-alt{background:var(--stone)}
.pkg h3,.pkg-title{font-family:var(--sans);font-size:var(--t-h3);font-weight:650;
  font-variation-settings:normal;letter-spacing:-.015em;margin:0 0 6px}
.pkg .avail{font-size:var(--t-body-sm);color:var(--text-muted);margin:0 0 var(--s4)}
.pkg .avail.only{margin:0}
.pkg ul{list-style:none;margin:0;padding:0}
.pkg li{position:relative;padding-left:22px;margin-bottom:10px;
  font-size:var(--t-body-sm)}
.pkg li:last-child{margin-bottom:0}
.pkg li::before{content:"";position:absolute;left:0;top:.62em;width:9px;
  height:1.5px;background:var(--brass)}


/* ── L-11 · Process flow ────────────────────────────────────────────────
   Five steps in a three-column grid left a two-item orphan row with a
   visible hole in it, which is why this was pinned to five columns above
   1160px.

   11B-V2 · A fixed column count is only ever right for one item count.
   Digital Solutions has FOUR steps, so five fixed tracks left the row a
   fifth short and the timeline stopped in mid-air. auto-fit collapses the
   tracks it does not need, so four steps fill the row, five steps fill the
   row, and a sixth wraps evenly. The minimum track width is what keeps the
   step copy legible rather than the column count. */

.flow{display:grid;gap:var(--gap-block) var(--col-gap);counter-reset:f;
  margin:0;padding:0;grid-template-columns:minmax(0,1fr)}
@media(min-width:470px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 180px is chosen so a FIVE-step process still resolves to five tracks on
   the 1240px rail — Advertise and Publishers both have five — while four
   steps collapse to four even tracks rather than leaving a fifth empty. */
@media(min-width:1024px){.flow{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.flow > *{min-width:0}
.flow li{counter-increment:f;list-style:none;padding-top:18px;
  border-top:2px solid var(--brass);position:relative}
.flow li::before{content:counter(f,decimal-leading-zero);font-family:var(--serif);
  font-variation-settings:var(--fr-display);font-size:28px;color:var(--label);
  display:block;line-height:1;margin-bottom:10px}
.flow h3{font-family:var(--sans);font-size:var(--t-h4);font-weight:650;
  margin:0 0 6px;font-variation-settings:normal;letter-spacing:-.01em}
.flow p{margin:0;font-size:var(--t-body-sm);color:var(--text-muted);max-width:34ch}
.band-ink .flow p{color:var(--on-dark-muted)}
.band-ink .flow li::before{color:var(--label-dark)}


/* ── L-12 · Facts and categories ────────────────────────────────────────*/
.facts{display:grid;gap:var(--s5) var(--col-gap);margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.facts{grid-template-columns:repeat(6,minmax(0,1fr))}}
.facts > *{min-width:0}
.facts dt{font-size:11px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label);margin:0 0 6px}
.facts dd{margin:0;font-size:var(--t-body-sm);font-weight:600;line-height:1.35}

/* 11B-V1 again: the same bleed-grid hairline, and therefore the same solid
   pale rectangle whenever the category count is not a multiple of five. The
   ring travels with the item here too. */
.catgrid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1vw,14px);
  grid-template-columns:1fr}
@media(min-width:470px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.catgrid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.catgrid > *{min-width:0}
.catgrid li{background:var(--bg-paper);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:16px 18px;
  font-size:var(--t-body-sm);font-weight:600;display:flex;
  flex-direction:column;gap:5px}
.catgrid span{font-size:11px;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:var(--forest)}


/* ── L-13 · Closing CTA band ────────────────────────────────────────────
   Heading on the left rail, buttons flush to the right rail, both on one
   centre line. Compact: a CTA is a seam, not a section. */

section.cta{padding-block:clamp(40px,3.4vw,64px)}
section.cta .rail{align-items:center;row-gap:var(--s5)}
/* The two-column arrangement started at 1024, so at 834 the band stacked: a
   heading capped at 20ch, a body capped at 46ch, and 285px of empty band to
   the right of both for its whole height. A tablet is wide enough for the
   arrangement this band was designed for. */
@media(min-width:700px) and (max-width:1023px){
  section.cta .rail{grid-template-columns:repeat(12,minmax(0,1fr))}
  section.cta .cta-copy{grid-column:1/span 7}
  section.cta .cta-actions{grid-column:8/-1}
  section.cta .actions{justify-content:flex-end}
  section.cta h2{max-width:none}
}
@media(min-width:1024px){
  section.cta .cta-copy{grid-column:1/span 6}
  section.cta .cta-actions{grid-column:8/-1}
  section.cta .actions{justify-content:flex-end}
}
/* .actions is itself a flex row. Nesting it inside a second flex container
   let it shrink below its content and the two buttons stacked. */
section.cta .cta-actions{min-width:0}
section.cta h2{max-width:20ch;margin:0 0 10px}
section.cta p{margin:0;max-width:46ch}
section.cta .actions{margin-top:0}

/* Two dark bands stacked read as one large void, so the seam is a hairline
   and the doubled padding is removed. */
section.cta.band-ink{padding-bottom:var(--s6)}
section.cta.band-ink + .site-foot{padding-top:var(--s6);
  box-shadow:inset 0 1px 0 var(--rule-dark)}
section.cta.band-forest{padding-bottom:clamp(34px,3vw,52px)}
.band-forest + .site-foot{box-shadow:inset 0 1px 0 var(--rule-dark)}


/* ── L-14 · Footer ──────────────────────────────────────────────────────
   Four columns of comparable weight. The rejected build aligned the three
   link columns to a 4px nudge on their headings while the brand column
   started with a 40px lockup, so nothing lined up. Every column now opens
   on the same hairline, which is what makes the row read as deliberate. */

.site-foot{background:var(--ink);color:var(--on-dark);
  padding-block:var(--s8) var(--s6);margin-top:0}
.site-foot a{color:var(--on-dark);text-decoration:none}
.site-foot a:hover{color:var(--brass)}
.foot-top{display:grid;gap:var(--s6) var(--col-gap);padding-bottom:var(--s6);
  align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){
  .foot-top{grid-template-columns:1.5fr 1fr 1.15fr 1.15fr;column-gap:var(--s7)}}
.foot-top > *{min-width:0}
/* The alignment rule is what makes four columns read as one row. When the
   columns stack on a phone there is no row to align, and four hairlines are
   just four extra rules and 75px of height. */
@media(min-width:640px){
  .foot-top > *{border-top:1px solid var(--rule-dark);padding-top:var(--s5)}}
.foot-brand p{margin:0;font-size:var(--t-body-sm);color:var(--on-dark-muted);
  max-width:30ch}
.site-foot h2{font-family:var(--sans);font-size:11px;font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label-dark);
  margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:6px;font-size:var(--t-body-sm);line-height:1.45}
.site-foot li:last-child{margin-bottom:0}
.site-foot li a,.foot-strip nav a{display:inline-flex;align-items:center;
  min-height:36px;padding-block:2px}
@media(max-width:939px){.site-foot li a,.foot-strip nav a{min-height:var(--tap)}}
.site-foot .brand-rev .mark{width:40px;height:40px}
.site-foot .brand-rev .wordmark b,.site-foot .brand-rev .wordmark i{font-size:20px}

.foot-strip{display:flex;flex-wrap:wrap;gap:6px var(--s6);align-items:baseline;
  padding-top:var(--s5);border-top:1px solid var(--rule-dark)}
.foot-strip p{margin:0;font-size:12.5px;color:var(--on-dark-muted);max-width:none}
.foot-strip p:first-child{font-weight:600;color:var(--ivory-dim)}
.foot-strip nav{margin-left:auto}
.foot-strip nav ul{display:flex;flex-wrap:wrap;gap:var(--s5)}
.foot-strip nav li{margin:0;font-size:12.5px}
.foot-strip nav a{color:var(--on-dark-muted)}
@media(max-width:639px){.foot-strip nav{margin-left:0;width:100%}}


/* ── L-15 · Prose blocks ────────────────────────────────────────────────*/
.cols2{column-gap:var(--s8);max-width:none}
@media(min-width:900px){.cols2{columns:2}}
.cols2 p{max-width:none;break-inside:avoid}
.cols2 p:last-child{margin-bottom:0}

.privacy-notice{background:var(--bg-sage);border-left:3px solid var(--brass);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:clamp(20px,2.2vw,30px);margin:0 0 var(--gap-block)}

/* One token per heading role. Measurement found .lbl rendering at both
   20.3px and 26.1px because some instances carried an inline size. */
.lbl-lg{font-family:var(--sans);font-size:var(--t-h3);font-weight:650;
  line-height:1.25;letter-spacing:-.015em;font-variation-settings:normal;
  margin:0 0 12px}
.band-ink .lbl-lg,.band-forest .lbl-lg{color:var(--on-dark)}


/* ── L-16 · Light surfaces inside dark bands ────────────────────────────
   A dark band sets its own text colour and that cascades into any light
   card placed inside it, producing paper-on-paper text. Every light
   surface restates its own colours. */
.band-ink .pkg article,.band-forest .pkg article,
.band-ink .card,.band-forest .card,
.band-ink .tile,.band-forest .tile,
.band-ink .catgrid li,.band-forest .catgrid li{color:var(--text)}
.band-ink .pkg article h2,.band-ink .pkg article h3,.band-ink .pkg article h4,
.band-forest .pkg article h2,.band-forest .pkg article h3,.band-forest .pkg article h4,
.band-ink .card h2,.band-ink .card h3,.band-ink .card h4,
.band-forest .card h2,.band-forest .card h3,.band-forest .card h4,
.band-ink .tile h3,.band-forest .tile h3,
.band-ink .pkg article .lbl,.band-forest .pkg article .lbl{color:var(--text)}
.band-ink .pkg article p,.band-forest .pkg article p,
.band-ink .card p,.band-forest .card p,
.band-ink .tile p,.band-forest .tile p{color:var(--text-muted)}
.band-ink .pkg li,.band-forest .pkg li{color:var(--text)}
.band-ink .pkg .avail,.band-forest .pkg .avail{color:var(--text-muted)}
.band-ink .pkg .tag,.band-forest .pkg .tag{color:var(--paper)}
.band-ink .catgrid span,.band-forest .catgrid span{color:var(--forest)}
.band-ink .tile .n,.band-forest .tile .n,
.band-ink .card .eyebrow,.band-forest .card .eyebrow{color:var(--label)}
.band-ink .tile .pages,.band-forest .tile .pages{color:var(--text-muted)}


/* ── L-17 · Narrow-viewport corrections ─────────────────────────────────
   VD-03: the availability and PIPA retention tables were cut off inside a
   320px viewport. `min-width:34ch` on the table forced it wider than the
   frame. Below 400px the minimum is released, the cells tighten, and the
   scroll container gets a visible edge so the reader knows there is more
   to the right. */
@media(max-width:400px){
  table{min-width:0;font-size:13.5px}
  th,td{padding:11px 10px 11px 0}
  thead th{font-size:11.5px;letter-spacing:.04em}
  .tablewrap{box-shadow:inset -14px 0 14px -14px rgba(16,42,61,.45)}
}
.tablewrap{max-width:100%}

/* Grid children must be allowed to shrink. */
.g12 > *,.grid > *,.tiles > *{min-width:0}
/* iOS Safari zooms the page when a focused control is under 16px. */
input,select,textarea,button{font-size:16px}
.consent input[type=checkbox]{width:24px;height:24px;font-size:16px}


/* ── L-18 · Motion (§23) ────────────────────────────────────────────────
   transform and opacity only; nothing over 480ms. */
.btn,.tile,.card,.site-nav a,.link-arrow,.site-foot a{
  transition:background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  .btn:active{transform:none}
  html{scroll-behavior:auto}}


/* ═══════════════════════════════════════════════════════════════════════
   PHASE 6 · DYNAMIC CMS COMPONENTS
   Added for section types that did not exist in the static build. Every
   rule below is declared once and lives in this one block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Announcement bar ─────────────────────────────────────────────────── */
.announce{background:var(--ink);color:var(--on-dark);font-size:14px;font-weight:600;
  letter-spacing:.01em;text-align:center}
.announce .wrap{padding-block:10px}
.announce a{color:var(--on-dark);text-underline-offset:3px}

/* ── Brand lockups ────────────────────────────────────────────────────────
   The header carries BOTH approved lockups and shows the one the brand
   document specifies for the width: primary at 900px and above, compact
   below it. The master SVG files are inlined unmodified so their <text>
   wordmark renders in the real Fraunces rather than falling back inside an
   <img> that cannot see the page fonts. */
.brand{display:inline-flex;align-items:center;text-decoration:none;margin-right:auto;
  min-width:0;color:var(--ink)}
.brand svg{display:block;height:auto}
.lockup{display:none;min-width:0}
.lockup svg{width:100%;height:auto}
.lockup-compact{display:block;width:clamp(190px,52vw,236px)}
@media(min-width:900px){
  .lockup-compact{display:none}
  .lockup-full{display:block;width:clamp(238px,20vw,272px)}
}
.site-head.is-condensed .lockup-full{width:214px}
.site-head.is-condensed .lockup-compact{width:180px}
.site-foot .brand-rev{display:block;margin:0 0 var(--s4);max-width:250px}
.site-foot .brand-rev svg{width:100%;height:auto}

/* ── FAQs ─────────────────────────────────────────────────────────────── */
.faqs{border-top:1px solid var(--rule)}
details.faq{border-bottom:1px solid var(--rule)}
details.faq > summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--sans);font-size:var(--t-h4);font-weight:650;letter-spacing:-.01em;
  color:var(--text)}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-9px;border-right:2px solid var(--label);border-bottom:2px solid var(--label);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
details.faq[open] > summary::after{transform:rotate(-135deg);margin-top:-4px}
details.faq > summary:hover{color:var(--label)}
details.faq > summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.faq-body{padding:0 44px 22px 0;color:var(--text-muted)}
.faq-body p{margin:0 0 .9em;max-width:70ch}
.faq-body p:last-child{margin-bottom:0}

/* ── Gallery ──────────────────────────────────────────────────────────── */
.gallery{display:grid;gap:var(--col-gap);grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery > *{min-width:0}
.shot{margin:0}
.shot img{width:100%;height:auto;border-radius:var(--radius);
  box-shadow:0 8px 26px rgba(16,42,61,.14)}
.shot figcaption{margin-top:10px;font-size:var(--t-caption);color:var(--text-muted)}

/* ── Resource links ───────────────────────────────────────────────────── */
.resources{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.resources li{padding:18px 0;border-bottom:1px solid var(--rule)}
.resources p{margin:6px 0 0;font-size:var(--t-body-sm);color:var(--text-muted)}

/* ── Draft preview flag ───────────────────────────────────────────────── */
.preview-flag{background:var(--warning,#8A5300);color:#fff;font-size:13.5px;font-weight:700;
  letter-spacing:.04em}
.preview-flag .wrap{padding-block:11px}

/* ── Brass hairline, the one place the third brand colour appears ─────── */
.sec-head{border-top:2px solid var(--accent);padding-top:var(--s5)}
.hero .sec-head{border-top:0;padding-top:0}

/* ── Form status blocks live above the form, not after it ─────────────── */
.status{scroll-margin-top:120px}

/* P7-FLD-01 — the feature-grid "style" choice must actually do something.
   Phase 7 found the CMS offering Bordered / Plain while the renderer ignored
   the value entirely. Render.php now emits a modifier class; these are the two
   appearances it selects between. */
/* The two appearances are now expressed in approved tokens. They were
   written with raw hex values and a --line variable this system never
   declares, so "Bordered" drew a hairline in a grey that appears nowhere
   else on the site and "Plain" removed the card entirely, which is what
   made the Advertise category block read as an undesigned slab. */
.tiles-bordered .tile{border:1px solid var(--rule);border-radius:var(--radius-lg);
  background:var(--bg-paper)}
/* PLAIN is an editorial index, not a quieter card. A catalogue of services or
   categories and a choice of three routes are different things, and rendering
   both as the same bordered box is what made the six-card grid read as a
   generic wireframe. Rule above, no container, more air. */
.tiles-plain{gap:var(--gap-block) var(--col-gap)}
.tiles-plain .tile{border:0;border-top:2px solid var(--accent);border-radius:0;
  background:transparent;padding:var(--s5) 0 0;overflow:visible}
.tiles-plain .tile::before{display:none}
.tiles-plain .tile:hover,.tiles-plain .tile:focus-within{background:transparent}
.tiles-plain .tile .n{border-bottom:0;padding-bottom:0;margin-bottom:var(--s3);
  font-size:22px;min-width:0}
.tiles-plain .tile h3{margin-top:0;font-size:var(--t-h3);font-family:var(--serif);
  font-variation-settings:var(--fr-text);font-weight:500;letter-spacing:-.008em}
.tiles-plain .tile p{max-width:36ch}

/* ── Phase 11: forms generated by FormRenderer ──────────────────────────
   These are public styles, so they belong here and not in admin.css. The
   first draft put them in admin.css, where the visitor would never load
   them and every generated form would have rendered unstyled.

   11B-V4 · WHY THE FORM READ AS AN ADMINISTRATIVE FORM.
   The half-width fields were laid out as inline-blocks with a sibling
   margin — `.field.half + .field.half { margin-left }` — which is applied
   to EVERY half field after the first, not to the second of each pair.
   The first two fitted on one line. The third inherited a left margin it
   had no room for, wrapped, and then pushed the fourth off its line too.
   From the third field down, every control sat alone, at half width, and
   indented by a stray 14px: ragged left edge, inconsistent field widths,
   a column of small boxes. Not a styling preference — a layout bug, and
   one that applied to all four public forms and to every form the owner
   builds in the CMS, because it lives in the renderer's stylesheet.

   A real two-track grid pairs the halves, keeps one left edge, and needs
   no sibling arithmetic. Nothing about the fields, their labels, their
   required markers, their help text or their validation changes. */
/* `stretch`, not `start`: fields in the same row must share a row height
   before the control inside them can take the slack. With `start` each field
   was only as tall as its own contents, `margin-top:auto` had nothing to push
   against, and a field with help text under its label sat its input up to
   76px below its neighbour's. */
.emx-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s5);row-gap:var(--s5);align-items:stretch;max-width:none}
.emx-form > *{grid-column:1/-1;min-width:0}
.emx-form .field{margin:0;display:flex;flex-direction:column}
/* A row of fields is only tidy if the CONTROLS line up. Help text under one
   label and not under its neighbour pushed one input half a line lower than
   the other, which is most of what made the form look unconsidered. The
   label and help keep their order; the control takes the slack. */
.emx-form .field > input,.emx-form .field > select,.emx-form .field > textarea{
  margin-top:auto}
@media(min-width:700px){.emx-form .field.half{grid-column:span 1}}
.emx-form label{display:block;font-weight:600;margin-bottom:7px;font-size:15px}
.emx-form .field-help{margin:0 0 8px;font-size:13.5px;color:var(--text-muted)}
.emx-form .field-error{margin:7px 0 0;font-size:13.5px;color:var(--clay-ink);
  font-weight:600}
.emx-form .has-error input,.emx-form .has-error textarea,.emx-form .has-error select{
  border-color:var(--clay-ink);box-shadow:0 0 0 3px var(--clay-bg)}
.emx-form input[type=text],.emx-form input[type=email],.emx-form input[type=tel],
.emx-form textarea,.emx-form select{background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:14px 16px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.emx-form input:focus,.emx-form textarea:focus,.emx-form select:focus{
  border-color:var(--forest);box-shadow:0 0 0 3px var(--bg-sage);outline:none}
.emx-form textarea{min-height:132px}
.emx-form fieldset.group{border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:var(--s4) var(--s5);margin:0}
.emx-form fieldset.group legend{font-weight:600;padding:0 var(--s2)}
.emx-form .opt{display:flex;align-items:center;gap:10px;margin:4px 0}
.emx-form .opt label{font-weight:400;margin:0}
/* Touch targets: §18 asks for reasonable ones, so state a floor rather than
   hoping the theme happens to provide it. */
.emx-form input[type=checkbox],.emx-form input[type=radio]{width:20px;height:20px}
.emx-form .opt label,.emx-form .consent label{min-height:44px;display:flex;align-items:center}
.emx-form .req{font-weight:400;font-size:13px;color:var(--text-muted)}
.emx-form .consent{margin:0;padding:var(--s4) var(--s5);background:var(--bg-sage);
  border-radius:var(--radius-lg);align-items:flex-start}
.emx-form .consent label{min-height:0;display:block;padding-top:2px}
.emx-form .actions{margin-top:var(--s2)}
.emx-form .actions .btn{min-height:52px;padding-inline:var(--s7);font-weight:650}
.formerrors ul{margin:.35rem 0 0;padding-left:1.1rem}
.formerrors a{color:inherit}

/* ── 11B-V5 · The lead-capture panel ────────────────────────────────────
   §4 asks the booking form to read as commercial lead generation rather
   than administration, without hiding a field or weakening a rule. Nothing
   below changes what is asked or what is enforced: the form is given a
   surface of its own, a stated commitment above the first field, and a
   quieter home for the privacy explanation, which previously occupied a
   tall pale box beside a tall empty column and outweighed the action it
   was explaining. */
.form-panel{background:var(--bg-paper);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:clamp(24px,2.6vw,44px);
  box-shadow:var(--lift-card)}
.form-panel > .sec-head{border-top:0;padding-top:0}
.form-panel > .lead{margin-bottom:var(--s6)}
.form-panel .onward{margin:var(--s5) 0 0;font-size:var(--t-body-sm);
  color:var(--text-muted);max-width:60ch}
.band-sage .form-panel,.band-ink .form-panel{background:var(--bg-paper)}
.form-aside{display:flex;flex-direction:column;gap:var(--s5)}
@media(min-width:1024px){.form-aside{position:sticky;top:112px}}
.form-aside .privacy-notice{margin:0}
.form-aside .privacy-notice h3{font-family:var(--sans);font-size:14px;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);
  margin:0 0 var(--s3)}
.form-aside .privacy-notice p{font-size:var(--t-body-sm);line-height:1.55}
.form-aside .privacy-notice p:last-child{margin-bottom:0}

/* The privacy explanation belongs with the form, under it, at footnote
   weight. It used to be a tall tinted panel in its own column beside the
   form, where it was the largest object in the section and the second
   thing the eye reached — §7: help content must not visually dominate the
   conversion action. Nothing is hidden: same words, same link, same
   position in the reading order for a screen reader, one weight quieter. */
.form-panel .privacy-notice{margin:var(--s6) 0 0;padding:var(--s5);
  background:var(--bg-sage);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0}
.form-panel .privacy-notice h3{font-family:var(--sans);font-size:12px;font-weight:650;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted);
  margin:0 0 var(--s3)}
.form-panel .privacy-notice p{font-size:13.8px;line-height:1.55;color:var(--text-muted);
  max-width:none}
.form-panel .privacy-notice p:last-child{margin-bottom:0}

/* The proposition rail that sits opposite the form. */
.form-pitch > :first-child{margin-top:0}
.form-pitch > :last-child{margin-bottom:0}
.form-pitch .sec-head{margin-bottom:var(--s5)}
.form-pitch .sec-head h2{font-size:clamp(28px,1.5vw + 1rem,42px)}
.form-pitch .sec-head > .sec-title{grid-column:1/-1}
.form-pitch .sec-head > .sec-note{grid-column:1/-1;border-top:0;padding-top:0;
  margin-top:var(--s4)}
.form-pitch .lead{margin-bottom:var(--s5)}
@media(min-width:1024px){.form-pitch{position:sticky;top:120px}}