/* ═══════════════════════════════════════════════════════════════════════════
   AUTARK ADVISORY — SHARED STYLESHEET  ("Quiet", v6)
   ---------------------------------------------------------------------------
   Everything here is used by more than one page. Anything used by exactly one
   page stays in that page's own <style> block.

   ⚠ DEPLOYMENT NOTES
   1. This file must NOT live at /css/… — worker.js proxies /css/* to the Hugo
      blog, so that path never reaches your own files. Use /styles.css.
   2. worker.js caches .css for one year as `immutable`. A returning visitor
      will not re-check it. So when the contents change, CHANGE THE FILENAME
      (styles.v2.css, styles.v3.css …) and update the <link> on every page.
      Editing this file in place will not reach anyone who has already loaded it.

   DESIGN RULES this sheet encodes
   · No cards, no boxes, no badges. Sections are separated by space alone.
   · Sans display over serif body. No italics in display type.
   · Exactly one filled element on the site: the nav phone number. Nothing
     else gets a fill — no buttons. Links carry a rule underneath instead.
   · Images never animate in. Only text carries .rise.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#F4F2ED;          /* warm bone ground */
  --paper-warm:#EFEBE4;     /* footer + image letterboxing */
  --ink:#16181A;
  --ink-soft:#3E4244;
  --muted:#83837E;
  --hairline:#DFDAD1;
  --accent:#3F6E6B;         /* pulled from the water in the salt-flat image */

  --gutter:clamp(1.5rem,6vw,6rem);
  --container:78rem;       /* cap for wide components, not for the frame */
  /* --breath is the gap BETWEEN two sections, not per side. Each section pays
     half of it top and bottom, so a boundary reads as one gap, not two. */
  --breath:clamp(6rem,12vh,9rem);
  --measure:34rem;          /* narrow reading column */
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(1.02rem,.35vw + .95rem,1.16rem);line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
/* v7: the page frame runs the full window, inside the gutter, so content
   shares its left and right edges with the nav at every width. Reading width
   is held by the text itself (h1 19ch, h2 24ch, .measure, step and split
   columns), never by the frame. Components whose rows or columns would spread
   past comfortable reading on a wide screen are capped at --container below. */
.wrap{max-width:none;margin:0;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
section{padding-block:calc(var(--breath) / 2)}

/* ── TYPE ───────────────────────────────────────────────────────────────── */
h1,h2,h3,.ui{font-family:"Inter Tight",system-ui,sans-serif;font-weight:300}
/* Heading emphasis is carried by inversion, not by a slant. box-decoration-break
   is what makes a phrase that wraps onto a second line get a clean panel on each
   line instead of one ragged bar behind both. */
h1 em,h2 em{
  font-style:normal;font-family:inherit;font-weight:inherit;
  background:var(--ink);color:var(--paper);
  padding:.04em .26em .1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* Inverted panels have physical height; these line-heights give them room.
   Any heading that sets its own line-height must allow for the same. */
h1{font-size:clamp(1.74rem,4.46vw,3.78rem);line-height:1.24;letter-spacing:-.042em;margin:0;max-width:19ch}
h2{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.3;letter-spacing:-.032em;margin:0 0 1.75rem;max-width:24ch}
/* h3 is never inverted — at that size a panel reads as a highlighter. */
h3 em{background:none;color:inherit;padding:0;font-style:normal}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.022em;font-weight:400;margin:0 0 1rem}
p{margin:0 0 1.6rem}
p:last-child{margin-bottom:0}
b,strong{font-weight:400;color:var(--ink)}

.lead{font-size:1.18em;line-height:1.7;color:var(--ink-soft)}
.section-lead{font-size:1.1em;color:var(--ink-soft);max-width:38rem;margin-bottom:3.5rem}
.dim{color:var(--muted)}
.small{font-size:.86rem;line-height:1.7;color:var(--muted)}

/* Small uppercase label above a list or an aside. */
.cap-label{
  font-family:"Inter Tight",sans-serif;font-weight:500;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin:2.75rem 0 1.25rem;
}

/* Kicker above a heading — "Core engagement", "The end state". */
.mark{
  font-family:"Inter Tight",sans-serif;font-weight:500;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;
}

/* Initials shown if a portrait fails to load, as on the live pages. */
.photo-fallback{
  aspect-ratio:1/1;background:var(--paper-warm);border:1px solid var(--hairline);
  align-items:center;justify-content:center;
  font-family:"Inter Tight",sans-serif;font-weight:300;font-size:2rem;
  letter-spacing:.06em;color:var(--muted);
}

/* ── STATS ──────────────────────────────────────────────────────────────── */
/* Figures on hairlines, not badges. auto-fit so the same component takes the
   homepage's four items and the About page's five. */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:2rem;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding-block:2.25rem;
}
.stats b{
  display:block;font-family:"Inter Tight",sans-serif;font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.03em;
  margin-bottom:.6rem;
}
.stats span{font-size:.82rem;line-height:1.5;color:var(--muted)}

/* ── LINKS — the only call-to-action style on the site ──────────────────── */
.link{
  position:relative;
  display:inline-block;font-family:"Inter Tight",sans-serif;font-weight:400;
  font-size:1rem;letter-spacing:-.01em;text-decoration:none;
  padding-bottom:.4rem;border-bottom:1px solid var(--ink);
  transition:border-color .4s ease,color .4s ease;
}
/* The rule extends past the text on hover. This used to be padding-right, which
   is a LAYOUT property: it widened the element, pushed the next link along, and
   where that push made a link wrap to the next line the cursor fell off it —
   hover ended, it shrank, it unwrapped back under the cursor, and the whole
   thing oscillated. An absolutely positioned tail changes nothing in layout. */
.link::after{
  content:"";position:absolute;left:100%;bottom:-1px;
  width:0;height:1px;background:currentColor;
  transition:width .4s ease;
}
.link:hover{color:var(--accent);border-color:var(--accent)}
.link:hover::after{width:.6rem}
.link + .link{margin-left:2.5rem}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
/* Same rectangle as the nav phone, inverted: outlined at rest, filling with ink
   on hover. That keeps the phone as the only permanently filled element on the
   site while giving form controls a real button's weight and tap target.
   The legacy class names below (.btn-submit, .btn-primary, .f-btn-primary) are
   the live form pages' own. Their JavaScript is bound to them, so the skin
   comes to the markup rather than the markup being renamed. */
.btn-solid,.btn-submit,.btn-primary,.f-btn-primary{
  font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.95rem;
  letter-spacing:.01em;cursor:pointer;text-decoration:none;display:inline-block;
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);border-radius:0;
  padding:.95rem 2rem;
  transition:background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.btn-solid:hover:not(:disabled),.btn-submit:hover:not(:disabled),
.btn-primary:hover:not(:disabled),.f-btn-primary:hover:not(:disabled){
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.btn-solid:disabled,.btn-submit:disabled,
.btn-primary:disabled,.f-btn-primary:disabled{
  opacity:.35;cursor:default;border-color:var(--hairline);color:var(--muted);
}
/* Arrows are re-inserted by the pages' own scripts; this design has none. */
.btn-solid span,.btn-submit span,.btn-primary span,.f-btn-primary span{display:none}

/* Secondary form actions — Back, Cancel. Quiet, no fill. */
.btn-quiet,.btn-ghost,.f-btn-secondary{
  font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.92rem;
  cursor:pointer;text-decoration:none;display:inline-block;
  background:transparent;color:var(--muted);
  border:0;border-bottom:1px solid var(--hairline);border-radius:0;
  padding:.85rem 0 .4rem;
  transition:color .3s ease,border-color .3s ease;
}
.btn-quiet:hover,.btn-ghost:hover,.f-btn-secondary:hover{color:var(--ink);border-color:var(--ink)}

/* ── FORM FIELDS ────────────────────────────────────────────────────────── */
/* Underlined fields, never boxes. Shared by contact, booking and snapshot —
   again using the live pages' own class names so their scripts keep working. */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.form-group{margin-bottom:1.75rem}
.form-group label{
  display:block;font-family:"Inter Tight",sans-serif;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;
}
.req{color:var(--accent)}
.form-group input[type="text"],.form-group input[type="email"],
.form-group select,.form-group textarea{
  width:100%;box-sizing:border-box;
  font-family:"Newsreader",Georgia,serif;font-size:1rem;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--hairline);
  border-radius:0;padding:.6rem 0;
  transition:border-color .3s ease;
}
.form-group textarea{min-height:8rem;resize:vertical;line-height:1.7}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);opacity:.7}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-bottom-color:var(--accent);
}
.form-group select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 10px) 1.15rem,calc(100% - 5px) 1.15rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field-note{font-size:.8rem;line-height:1.6;color:var(--muted);margin:.6rem 0 0}
.error-msg{display:none;font-size:.86rem;color:#8B3A3A}
.error-msg.visible{display:block}

@media(max-width:900px){ .form-row{grid-template-columns:1fr;gap:0} }

/* ── LISTS ──────────────────────────────────────────────────────────────── */
.marked-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.marked-list li{
  font-size:.97rem;line-height:1.7;color:var(--ink-soft);
  padding-left:1.5rem;position:relative;
}
.marked-list li::before{
  content:"";position:absolute;left:0;top:.8em;
  width:.5rem;height:1px;background:var(--accent);
}

/* ── NAV ────────────────────────────────────────────────────────────────── */
/* Full-bleed bar on the normal gutter. .wrap uses the same gutter, so the logo
   still lines up with the headline beneath it. */
.site-nav{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  width:100%;
  padding:1.35rem var(--gutter);
  border-bottom:1px solid transparent;
  transition:padding .3s ease,background-color .3s ease,border-color .3s ease;
}
/* Once the page has scrolled (site.v2.js), the bar becomes a fixed frame:
   solid warm paper, a hairline beneath, a little less height. */
.site-nav.scrolled{
  background:var(--paper-warm);backdrop-filter:none;
  border-bottom-color:var(--hairline);padding-block:.8rem;
}
.site-nav .logo{display:block;flex-shrink:0}
.site-nav .logo img{width:auto;height:2.25rem}
.nav-right{display:flex;align-items:center;gap:2.2rem}
.nav-links{list-style:none;display:flex;align-items:center;gap:2.1rem;margin:0;padding:0}
.nav-links a{
  font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.92rem;
  color:var(--muted);text-decoration:none;letter-spacing:-.005em;
  transition:color .3s ease;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}

/* The single filled element on the site. Sharp-cornered, because nothing else
   here is a box. If a filled button ever appears elsewhere, this stops reading
   as a deliberate exception — so it shouldn't. */
.nav-phone{
  font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.88rem;
  letter-spacing:.01em;white-space:nowrap;text-decoration:none;
  background:var(--ink);color:var(--paper);padding:.62rem 1rem;
  transition:background .3s ease,color .3s ease;
}
.nav-phone:hover{background:var(--accent);color:var(--paper)}
.nav-toggle{
  display:none;background:none;border:0;padding:.4rem 0;cursor:pointer;
  font-family:"Inter Tight",sans-serif;font-size:.92rem;color:var(--ink);
}

@media(max-width:1240px){
  .nav-links{gap:1.5rem}
  .nav-links a{font-size:.87rem}
  .nav-right{gap:1.5rem}
}
@media(max-width:1040px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:1.4rem;
    background:var(--paper);border-top:1px solid var(--hairline);
    padding:2rem var(--gutter) 2.5rem;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.05rem;color:var(--ink)}
}
/* On a phone the number is the most valuable tap available, so it shrinks
   rather than disappearing. */
@media(max-width:520px){
  .site-nav .logo img{height:1.9rem}
  .nav-phone{font-size:.8rem;padding:.5rem .7rem}
  .nav-right{gap:1rem}
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
/* Nothing above the fold carries .rise — the first screen must never depend on
   JavaScript or a scroll event to become visible. */
.hero{padding-top:clamp(4.5rem,13vh,8.5rem);padding-bottom:clamp(3.5rem,8vh,5.5rem)}
.hero .sub,.hero .intro{margin-top:2.5rem;max-width:40rem}
.hero .actions{margin-top:3.25rem}

/* ── IMAGE PLATES ───────────────────────────────────────────────────────── */
/* Three heights. Plates are always full-bleed and never animate in. */
/* Large separating images. The frame sets the height; the image fills it.
   The top and bottom edges step down at 30 degrees: the diagonal runs
   --step high and --step x 1.732 wide (tan 30). The step sits at the same x on
   both edges, so the band keeps its depth. --at is where it begins; .flip
   mirrors it (steps up instead of down). site.v2.js sets --at and .flip per
   image, the same way on every visit. With .parallax the image is drawn 28%
   taller than the frame and moved on scroll. */
.plate{
  --step-base:clamp(2.25rem,5vw,4.5rem);
  --step:var(--step-base);
  --run:calc(var(--step) * 1.732);
  --at:58%;
  --step-b:var(--step-base);            /* bottom edge; the home hero deepens only the top */
  --run-b:calc(var(--step-b) * 1.732);
  position:relative;width:100%;overflow:hidden;background:var(--paper-warm);margin:0;
  height:clamp(24rem,72vh,44rem);                                       /* hero scale */
  clip-path:polygon(0 0, var(--at) 0, calc(var(--at) + var(--run)) var(--step), 100% var(--step),
    100% 100%, calc(var(--at) + var(--run-b)) 100%, var(--at) calc(100% - var(--step-b)), 0 calc(100% - var(--step-b)));
}
.plate.flip{
  clip-path:polygon(0 var(--step), var(--at) var(--step), calc(var(--at) + var(--run)) 0, 100% 0,
    100% calc(100% - var(--step-b)), calc(var(--at) + var(--run-b)) calc(100% - var(--step-b)), var(--at) 100%, 0 100%);
}
.plate.mid{height:clamp(20rem,56vh,33rem)}                              /* mid-page */
.plate.band{height:clamp(18rem,44vh,27rem)}                             /* short band */
.plate picture{display:block;height:100%}
.plate img{display:block;width:100%;height:100%;object-fit:cover}
.parallax .plate img{position:relative;top:-14%;height:128%;will-change:transform}
@media(max-width:640px){.plate{--step-base:1.6rem}}
.caption{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap;padding-block:1.4rem}
.caption p{margin:0}

/* ── RIGHT-ALIGNED STATEMENT ────────────────────────────────────────────── */
.statement{display:flex;justify-content:flex-end;text-align:right}
.statement > div{max-width:40rem}
.statement .small{margin-top:2.25rem;margin-left:auto;max-width:32rem}
/* Statements are set in Newsreader's italic, not Inter Tight's: at this size the
   sans italic is a weak slant, the serif italic is an actual cut. Every major
   section closes on one, so an argument lands on a position rather than
   trailing off into body copy. */
.pull{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.55rem,3.1vw,2.45rem);line-height:1.3;letter-spacing:-.012em;margin:0;
}

/* ── ASIDE ──────────────────────────────────────────────────────────────── */
.aside{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.aside .cap-label{margin-top:0}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
/* The page changes tone here, so the bottom is unmistakably the bottom rather
   than another gap you might keep scrolling through. */
footer{background:var(--paper-warm);border-top:1px solid var(--hairline);padding-block:3.5rem}
footer .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none;margin-right:1.6rem}
footer a:hover{color:var(--ink)}

/* ── MOTION ─────────────────────────────────────────────────────────────── */
.rise{
  opacity:0;transform:translateY(18px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── SHARED RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:900px){
  .statement{justify-content:flex-start;text-align:left}
  .statement .small{margin-left:0}
  .link + .link{margin-left:0;margin-top:1.25rem;display:block;width:fit-content}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v6 ADDITIONS: the engagement model (Architect, Build, Stewardship), the
   stage pages and the illustrative documents. Same rules as above: hairlines
   and space, never boxes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Numbered rows on hairlines: stages, process steps, scenarios. */
.steps{display:grid}
.step{
  display:grid;grid-template-columns:6.5rem minmax(0,42rem);
  gap:clamp(1.5rem,5vw,4rem);align-items:start;
  padding-block:clamp(2.5rem,5vh,3.75rem);border-top:1px solid var(--hairline);
}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step .num{
  font-family:"Inter Tight",sans-serif;font-weight:300;font-size:.95rem;
  color:var(--muted);margin:0;padding-top:.45rem;
}
.step .num b{display:block;font-weight:500;font-size:.68rem;letter-spacing:.2em;color:var(--accent);margin-top:.4rem}
.step h3{margin-bottom:.9rem}
.step h3 a{color:inherit;text-decoration:none;transition:color .3s ease}
.step h3 a:hover{color:var(--accent)}
.step .promise{font-size:1.1em;color:var(--ink-soft)}
.step .fee{font-family:"Inter Tight",sans-serif;font-size:.9rem;color:var(--muted);margin-top:1.5rem}
.step .fee b{color:var(--ink)}

/* Label left, reasoning right. The stage pages' backbone. */
.split{
  display:grid;grid-template-columns:minmax(0,18rem) minmax(0,42rem);
  gap:clamp(2rem,6vw,5rem);align-items:start;
  padding-block:clamp(2.5rem,5vh,3.75rem);border-top:1px solid var(--hairline);
}
.split:last-child{border-bottom:1px solid var(--hairline)}
.split > div:first-child .cap-label{margin-top:.35rem}
.split h3{margin-bottom:.9rem}
.split .marked-list + p,.split p + .marked-list{margin-top:1.25rem}

/* The figure. Given room, given no box. */
.price{
  font-family:"Inter Tight",sans-serif;font-weight:300;
  line-height:1.05;letter-spacing:-.035em;color:var(--ink);margin:0 0 .8rem;
}
.price .cur{font-size:.95rem;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:.35rem}
.price .num{font-size:clamp(2rem,3.6vw,2.9rem)}
.price .range{font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--ink-soft);margin-left:.35rem}
.price .per{font-size:1rem;color:var(--muted);margin-left:.4rem}
.price-basis{font-size:.86rem;line-height:1.65;color:var(--muted);margin:0}

/* The commercial sequence: four names on one line, joined by rules. */
.sequence{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.sequence li{padding:1.1rem 1.25rem 0 0;font-family:"Inter Tight",sans-serif;font-size:.95rem;line-height:1.4;color:var(--ink)}
.sequence li span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.sequence li small{display:block;font-size:.82rem;color:var(--muted);margin-top:.35rem}
@media(max-width:760px){.sequence{grid-template-columns:1fr 1fr;row-gap:1.75rem}}

/* An illustrative document: set apart by its rules and its type, not a box. */
.doc{max-width:46rem;border-top:2px solid var(--ink);border-bottom:1px solid var(--hairline);padding-block:1.5rem 2rem}
.doc-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
  font-family:"Inter Tight",sans-serif;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.75rem;
}
.doc-head .flag{color:var(--accent)}
.doc h3{font-size:1.15rem;margin:2rem 0 .75rem}
.doc h3:first-of-type{margin-top:0}
.doc p,.doc li{font-size:.95rem}
.doc table{width:100%;border-collapse:collapse;font-size:.88rem;line-height:1.55;margin:1rem 0 .5rem}
.doc th{text-align:left;font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.8rem;color:var(--muted);padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--ink)}
.doc td{vertical-align:top;color:var(--ink-soft);padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--hairline)}
.doc td:first-child{color:var(--ink)}
@media(max-width:640px){
  .doc table,.doc tbody,.doc tr,.doc td{display:block}
  .doc thead{display:none}
  .doc tr{padding:.75rem 0;border-bottom:1px solid var(--hairline)}
  .doc td{border:0;padding:.15rem 0}
}

/* Before and after diagram. Lines and type only. */
.diagram{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);margin-top:1rem}
.diagram figure{margin:0}
.diagram svg{width:100%;height:auto;display:block}
.diagram figcaption{font-family:"Inter Tight",sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.diagram figcaption b{color:var(--accent);font-weight:500}
.diagram .ln{stroke:var(--ink);stroke-width:1;fill:none}
.diagram .ln-soft{stroke:var(--muted);stroke-width:1;fill:none;stroke-dasharray:3 4}
.diagram .ln-accent{stroke:var(--accent);stroke-width:1.25;fill:none}
.diagram .dot{fill:var(--ink)}
.diagram .dot-open{fill:var(--paper);stroke:var(--muted);stroke-width:1}
.diagram .dot-accent{fill:var(--accent)}
.diagram text{font-family:"Inter Tight",sans-serif;font-size:12px;fill:var(--ink-soft)}
.diagram text.lbl-muted{fill:var(--muted)}
.diagram text.lbl-strong{fill:var(--ink);font-weight:500}

/* Responsibilities: who does what, on hairline rows. */
.duties{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.6}
.duties th{text-align:left;font-family:"Inter Tight",sans-serif;font-weight:400;font-size:.8rem;color:var(--muted);padding:.75rem 1.25rem .75rem 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.duties td{vertical-align:top;color:var(--ink-soft);padding:1rem 1.25rem 1rem 0;border-bottom:1px solid var(--hairline)}
.duties td:first-child{color:var(--ink);font-family:"Inter Tight",sans-serif;width:11rem}
@media(max-width:760px){
  .duties,.duties tbody,.duties tr,.duties td{display:block}
  .duties thead{display:none}
  .duties tr{padding:1rem 0;border-bottom:1px solid var(--hairline)}
  .duties td{border:0;padding:.2rem 0;width:auto}
  .duties td[data-k]::before{content:attr(data-k);display:block;font-family:"Inter Tight",sans-serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
}

/* Grey dash for lists of what a fee does not cover. */
.marked-list.not-included li::before{background:var(--muted)}

/* A heading that is also a link. */
h2 a,h3 a{color:inherit;text-decoration:none;transition:color .3s ease}
h2 a:hover,h3 a:hover{color:var(--accent)}

@media(max-width:820px){
  .step,.split{grid-template-columns:1fr;gap:.9rem}
  .step .num{padding-top:0}
  .diagram{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v7: full-width frame. Blocks placed directly in .wrap are held to the old
   78rem width, anchored to the left edge, so two-column grids and hairline
   rows do not stretch across a 2560px screen. :where() gives this zero
   specificity: any narrower max-width set elsewhere (h1 19ch, .measure,
   .doc, page styles) still wins. A .statement still pushes its text to the
   right edge, under the nav's phone button.
   ═══════════════════════════════════════════════════════════════════════════ */
:where(.wrap) > :where(*){max-width:var(--container)}

/* Rhythm on long pages: every other section sits on the warmer paper, edge to
   edge, so the reader sees where one topic ends and the next begins. Sections
   next to a large image or the footer stay on plain paper, so the stepped
   cut-outs and the footer keep a clean edge. Pages without large images
   (forms, tools) are left alone. */
body:has(.plate) > section:nth-of-type(even):not(:has(+ .plate)):not(.plate + section):not(:has(+ footer)){
  background:var(--paper-warm);
  padding-block:calc(var(--breath) / 2) !important;   /* some sections set padding-top:0 inline */
}