/* ══════════════════════════════════════════════════════════════════
   VSI Accountants — "Ruled"   (experimental redesign, branch
   redesign/experiment; main is untouched)

   The page is an accountant's ledger: a margin rule down the left,
   ruled rows on cream paper and black, and labels,
   codes and dates hanging in the margin like a ledger's particulars.

   Motion is kept to four moments that each mean something: the hero
   total being ruled, the register in Services rolling while each
   service is ticked off, the process line filling as the steps are
   read, and the season line filling to today. Everything else is still.

   ONE CONTENT EDGE. Every section's text starts at the margin line
   (var(--margin) from the wrap's edge). Grids that put a label in the
   margin use column-gap:0 and pad the label instead, so the edge never
   drifts by a gap's width. The hero and footer are page furniture and
   use the full wrap.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* palette. Brass is the client's logo gold and the one fixed value. */
  --ink:#000000;          /* the logo artwork is drawn on black */
  --carbon:#131313;       /* charcoal, the second dark — neutral, no green;
                             1.13:1 off black, so it always carries a hairline */
  --carbon-2:#1C1C1C;
  --gold:#E8B02F;         /* brass — on dark grounds only */
  --gold-lt:#F5CA46;
  --gold-rgb:232,176,47;  /* every rgba() of the gold reads this */
  --gold-deep:#7E5C0E;    /* gold as ink on the cream, 5.6:1 on --ledger */
  /* no green anywhere — client decision, September 2026. The light sections
     are the site's original warm cream; the greys are warm neutral */
  --ledger:#F7F4ED;       /* cream: Services, How it works, About, article body */
  --sheet:#FFFDF9;        /* a sheet on the cream: forms, cards */
  --rule:#CFC7B8;         /* hairlines on the cream */
  --bone:#F2F0EB;         /* text on dark */
  --fog:#9C978E;          /* muted on dark, 6.4:1 on charcoal */
  --sage:#57534C;         /* muted on the cream, 7.0:1 */
  --prose:#2A2825;        /* long reading on the cream */
  --line:rgba(var(--gold-rgb),.26);
  --line-soft:rgba(242,240,235,.12);

  --display:"Instrument Serif",Georgia,serif;
  --text:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* type scale. Display: hero, section, item. Text: lead, body, small,
     label. Adjacent steps differ by at least 1.13x, and each step has
     one role — if a new size seems necessary, one of these is wrong. */
  --t-hero:clamp(44px,14.5vw,164px);  /* widest line is 5.78em; content is ~.9vw */
  --t-d2:clamp(40px,5.4vw,72px);      /* article masthead */
  --t-d3:clamp(34px,4.4vw,56px);      /* section heading — 2x the item title */
  --t-d4:clamp(22px,2.3vw,28px);      /* item title: service, step, option, issue */
  --t-lead:clamp(18px,1.6vw,21px);
  --t-body:17px;
  --t-sm:15px;
  --t-label:13px;
  --measure:31em;                     /* ~65 characters of Archivo at any size */

  /* 8px grid */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --pad:clamp(20px,5vw,80px);
  --maxw:1280px;
  --margin:clamp(132px,14vw,200px);   /* the ledger's particulars column */
  --sec-pad:clamp(80px,12vh,128px);

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-rule:cubic-bezier(.65,0,.2,1);  /* a pen: slow start, sure finish */
}

*{margin:0;padding:0;box-sizing:border-box}
/* anchors and keyboard focus land clear of the 76px fixed header */
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--text);font-size:var(--t-body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sec--ledger :focus-visible,.nl-body :focus-visible,#contactForm :focus-visible{outline-color:var(--gold-deep)}
::selection{background:var(--gold);color:var(--ink)}
main:focus{outline:none}

.skip-link{
  position:absolute;left:var(--s4);top:-120px;z-index:200;
  padding:var(--s3) var(--s5);background:var(--gold);color:var(--ink);
  font-size:var(--t-sm);font-weight:600;
}
.skip-link:focus{top:var(--s4)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ── labels: one style everywhere ────────────────────────────────────
   Sentence case, semi-condensed — the ledger's handwriting, not a
   tracked-out all-caps eyebrow. "Meta" is the same size, lighter: text
   you read past rather than scan for. */
.eyebrow,.hero-scroll,.fact dt,.svc-code,.shelf-tag,.step .n,.season-today span,
.news-date,.news-open,.about-card .role,.about-card .kv dt,.contact-detail dt,
.field > span:first-child,.nl-date,.nl-points h2,.nl-note h2,.nl-warn h2,
.nl-date-card .who,.nl-pager a,.nl-pager span,.arc-date,.arc-open,.nl-quote cite,.nl-col > dl dt{
  font-family:var(--text);font-size:var(--t-label);font-weight:600;font-stretch:86%;
  letter-spacing:.01em;line-height:1.4;
}
.foot-l p,.social,.nl-flag,.nl-source,.season-label{
  font-family:var(--text);font-size:var(--t-label);font-weight:500;font-stretch:92%;line-height:1.5;
}
.eyebrow{color:var(--gold)}
.sec--ledger .eyebrow{color:var(--gold-deep)}

/* the mark — extracted from the 2026 lockup, keyed transparent.
   Paths are relative to this stylesheet at assets/css/. */
.mark{width:34px;aspect-ratio:192/170;flex:none;background:url("../vsi-mark.png") center/contain no-repeat}
.mark--sm{width:26px}
.mark-chip{width:88px;height:88px;display:grid;place-items:center;background:var(--ink);margin-bottom:var(--s5)}
.mark-chip .mark{width:50px}

/* standalone links get a real target: 24px on desktop (WCAG 2.2),
   44px on touch screens further down — these are tap-to-call links */
.fact dd a,.about-card .kv dd a,.contact-detail dd a,.foot-l a,.social,.hero-scroll{
  display:inline-flex;align-items:center;min-height:24px;
}

/* ── nav ─────────────────────────────────────────────────────────── */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
}
header.stuck{
  background:rgba(0,0,0,.84);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:76px}
.brand{display:flex;align-items:center}
.brand-logo{
  height:clamp(34px,4vw,44px);aspect-ratio:480/123;
  background:url("../vsi-logo.png") center/contain no-repeat;
}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nav-links a{
  position:relative;padding:var(--s2) 0;white-space:nowrap;
  font-size:var(--t-sm);font-weight:500;color:rgba(242,240,235,.74);
  transition:color .25s;
}
/* underline ruled in on hover, and left ruled under the section you are in */
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-rule);
}
.nav-links a:hover{color:var(--bone)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--gold)}
.nav-links a.nav-cta{
  border:1px solid var(--gold);color:var(--gold);padding:var(--s3) var(--s5);
  transition:background .3s,color .3s;
}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta:hover,.nav-links a.nav-cta[aria-current]{background:var(--gold);color:var(--ink)}
.burger{display:none;background:none;border:0;color:var(--bone);cursor:pointer;padding:var(--s2)}
.burger svg{width:24px;height:24px}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s6);cursor:pointer;
  font-family:var(--text);font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;
  transition:background .3s,color .3s,border-color .3s,transform .2s;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-solid:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn-ghost{border-color:rgba(242,240,235,.3);color:var(--bone)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-block{width:100%}

/* ── hero: "Assembled, then entered" ─────────────────────────────────
   Act one, on load (CSS only, so it plays even if the script fails): the
   four panels of the mark glide in along their slant and lock together, a
   ring pulses out from the join, a band of light crosses the gold, and the
   headline rises. Buttons are in by about 1.2s.
   Act two, on scroll (script): the copy lifts away, the mark slides to the
   centre of the screen and rushes at the viewer — the small panels nearer
   than the large ones — until the viewer passes through the channel at its
   centre. The stage is sticky, so scrolling stays native: nothing is
   hijacked, the page simply holds still while the mark moves.
   With reduced motion, or a screen too short to hold the stage, there is
   no act two: the hero is one screen tall with the mark assembled. */
.hero{position:relative;background:var(--ink)}
.js .hero{height:260vh}                   /* 160vh of scroll for the dive */
.hero-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* sized by height as well as width, so a 1280x600 laptop fits the lot */
  padding:clamp(80px,12vh,96px) var(--pad) clamp(28px,5vh,88px);text-align:center;
}
/* the building. Its load animation uses transform; the script uses the
   separate scale and translate properties, so the two compose instead of
   the animation overriding the dive */
.hero-photo{
  position:absolute;inset:-3%;z-index:-3;
  background:url("../hero-tower.jpg") 72% center/cover no-repeat;
  transform-origin:50% 45%;
  /* graded like a film still: lower, deeper, a touch warm to sit with the gold */
  filter:brightness(1.24) contrast(1.16) sepia(.22);
  animation:photo-in 1.8s var(--ease) both,drift 28s 1.8s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:none}to{transform:scale(1.05) translate(-1%,-.6%)}}
/* the grade, over the graded photo: a warm near-black, about 88% behind the
   mark and headline, about 79% at the sides so the building still reads, and
   a lens vignette that takes the corners darker than both. Smooth gradients
   only — the film grain that was here read as noise and lifted the blacks */
.hero-wash{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 110% 90% at 50% 50%,transparent 40%,rgba(4,3,2,.55) 100%),
    linear-gradient(180deg,rgba(4,3,2,.94) 0%,rgba(4,3,2,.36) 22%,rgba(4,3,2,.36) 68%,rgba(4,3,2,.96) 100%),
    radial-gradient(ellipse 60% 56% at 50% 50%,rgba(4,3,2,.8),rgba(4,3,2,.6) 70%,rgba(4,3,2,.54));
}
  60%{transform:translate(-9px,27px)}80%{transform:translate(29px,6px)}
}
@keyframes photo-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.hero-markwrap{
  position:relative;flex:none;
  width:clamp(120px,min(38vmin,31vh),360px);aspect-ratio:320/289;
  margin-bottom:clamp(12px,3vh,36px);
  /* no will-change: a forced layer is rasterised once and capped in size,
     so at 60x the vector edges went soft. Painted directly, they stay sharp */
}
.hero-glow{
  position:absolute;left:50%;top:50%;width:260%;height:260%;translate:-50% -50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(var(--gold-rgb),.2),rgba(var(--gold-rgb),.06) 45%,transparent 72%);
  animation:fade-in 1.6s .5s var(--ease) both;
}
.hero-mark{display:block;width:100%;height:100%;overflow:visible}
/* the bevel, as on the logo: a gold rim 3 units in with a darker line inside it.
   Strokes are clipped to each panel, so they only ever fall inside the shape */
.hero-mark .rim-dk{fill:none;stroke:#9A5C08;stroke-width:7.6}
.hero-mark .rim-lt{fill:none;stroke:url(#vsiRim);stroke-width:6}
.hero-mark .gl-a{fill:#FFF8DC;opacity:.2}
.hero-mark .gl-l{fill:none;stroke:#FFFBEA;stroke-width:1.1;opacity:.75}
.hero-mark .gl-soft{opacity:.35}
.hero-mark .gl-a.gl-soft{opacity:.1}
.hero-mark .pc,.hero-mark .pz,.hero-ring{transform-box:view-box;transform-origin:160px 144px}
.hero-mark .pc{animation:pc-in .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.08s + var(--i) * 90ms)}
.hero-ring{
  fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0;
  animation:ring-out 1.1s .62s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes pc-in{from{transform:translate(var(--fx),var(--fy));opacity:0}to{transform:none;opacity:1}}
@keyframes ring-out{from{transform:scale(.3);opacity:.9}to{transform:scale(3.4);opacity:0}}

.hero-copy{position:relative;max-width:1100px}
.hero .eyebrow{margin-bottom:clamp(8px,1.6vh,16px);animation:fade-in .5s .66s var(--ease) both}
.hero h1{
  font-family:var(--display);font-weight:400;
  /* bounded by height as well as width: the mark sits above it */
  font-size:clamp(40px,min(10vw,12vh),124px);line-height:.92;letter-spacing:-.022em;color:var(--bone);
  text-shadow:0 2px 34px rgba(0,0,0,.55);
}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .ln > span{display:block;animation:line-up .7s var(--ease) both}
.hero h1 .ln:nth-child(1) > span{animation-delay:.72s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.8s}
/* the brand line keeps its one italic; section headings do not */
.hero h1 em{font-style:italic}
.hero-lede{
  max-width:58ch;margin:clamp(12px,2.2vh,26px) auto 0;
  font-size:var(--t-lead);line-height:1.55;color:rgba(242,240,235,.74);
  animation:fade-in .5s .92s var(--ease) both;
}
.hero-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:clamp(14px,2.6vh,28px);
  animation:fade-in .5s .98s var(--ease) both;
}

/* scroll cue — static by the client's choice; the sweeping version read as cheap */
.hero-foot{position:absolute;left:var(--pad);bottom:clamp(20px,3.4vh,36px)}
.hero-scroll{gap:var(--s3);color:var(--fog);transition:color .3s}
.hero-scroll i{
  display:block;width:56px;height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(var(--gold-rgb),.12));
  transition:width .3s var(--ease);
}
.hero-scroll:hover{color:var(--gold)}
.hero-scroll:hover i{width:72px}

@media(max-height:680px){.hero-lede{font-size:var(--t-body)}}
/* phones: the mark a fifth larger than the shared rule gives, still bounded by
   height so an iPhone SE keeps the buttons on screen */
@media(max-width:560px){.hero-markwrap{width:clamp(150px,min(46vmin,27vh),220px)}}
/* a short phone (iPhone SE) stacks both buttons right down to where the scroll
   cue sits; on a phone that small, scrolling needs no prompt */
@media(max-width:560px) and (max-height:700px){.hero-foot{display:none}}
/* a stage that can't fit — phones held sideways — gets the assembled mark
   only. This was 620px, which also caught 1280x600 laptops: keep it low */
@media(max-height:460px){
  .js .hero{height:auto}
  .hero-stage{position:relative;height:auto;min-height:100svh}
}

@keyframes line-up{from{transform:translateY(106%)}to{transform:none}}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── facts strip ─────────────────────────────────────────────────── */
.facts{background:var(--ink);border-block:1px solid var(--line-soft)}
.facts-in{display:grid;grid-template-columns:repeat(3,1fr)}
.fact{padding:var(--s5) var(--s5) var(--s5) 0}
.fact + .fact{border-left:1px solid var(--line-soft);padding-left:var(--s5)}
.fact dt{color:var(--fog)}
.fact dd{margin-top:var(--s1);color:var(--bone)}
.fact dd a{transition:color .25s}
.fact dd a:hover{color:var(--gold)}

/* ── sections ────────────────────────────────────────────────────── */
section{position:relative}
.sec{padding:var(--sec-pad) 0}
.sec--major{--sec-pad:clamp(96px,15vh,160px)}
.sec--ledger{background:var(--ledger);color:var(--ink);isolation:isolate}
/* the hairline makes a carbon section's edge visible against black */
.sec--carbon{background:var(--carbon);border-block:1px solid var(--line-soft)}
.sec--ink{background:var(--ink)}

/* the margin rule. It runs the full height of each section, padding
   included, so consecutive sections join into one line down the page. */
.has-margin > .wrap{position:relative}
.has-margin > .wrap::before{
  content:"";position:absolute;width:1px;
  top:calc(-1 * var(--sec-pad));bottom:calc(-1 * var(--sec-pad));
  left:calc(var(--pad) + var(--margin) - var(--s5));
  background:var(--line);
}
.sec--ledger.has-margin > .wrap::before{background:var(--rule)}

.sec-head{
  display:grid;grid-template-columns:var(--margin) minmax(0,1fr);
  margin-bottom:clamp(40px,7vh,80px);
}
.sec-head .eyebrow{grid-column:1;grid-row:1 / span 2;padding:.9em var(--s6) 0 0}
.sec-head h2,.about-body h2{
  grid-column:2;max-width:20ch;
  font-family:var(--display);font-weight:400;
  font-size:var(--t-d3);line-height:1.04;letter-spacing:-.016em;
}
/* one italic phrase per headline is a template habit; the words stay
   <em> in the markup, the styling does not */
.sec-head h2 em,.contact-h em,.nl-mast h1 em{font-style:normal}
.sec-head p{grid-column:2;margin-top:var(--s4);max-width:var(--measure);line-height:1.7;color:var(--sage)}
.sec--carbon .sec-head p,.sec--ink .sec-head p{color:rgba(242,240,235,.66)}

/* ruled rows */
.rl{border-bottom:1px solid var(--line)}
.sec--ledger .rl{border-bottom-color:var(--rule)}

/* item titles: one size, one line-height, whatever the item */
.svc-name,.shelf h3,.step h3,.news-title,.about-card h3,.arc-title{
  font-family:var(--display);font-weight:400;font-size:var(--t-d4);line-height:1.15;letter-spacing:-.005em;
}

/* ── services: the list reads on the left, the register counts on the
   right — particulars left, figures right, as in any ledger ─────── */
.svc-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,20vw,290px);
  column-gap:clamp(32px,4.4vw,64px);align-items:start;
}
.svc{grid-column:1;grid-row:1;border-top:1px solid var(--rule)}
/* built by the script from the rows' own codes; decorative, so hidden
   from assistive tech and absent without JS */
.register{display:none;grid-column:2;grid-row:1}
.js .register{
  display:block;position:sticky;top:max(112px,calc(50vh - 110px));container-type:inline-size;
  z-index:1;background:var(--ledger);padding-block:var(--s4);
}
.reg-win{border-bottom:5px double var(--ink);padding-bottom:var(--s3)}
.reg-glass{
  display:flex;justify-content:flex-end;overflow:hidden;
  font-family:var(--display);font-weight:400;line-height:1.1;height:1.1em;
  font-size:clamp(64px,7vw,100px);
  font-size:calc(100cqi / (var(--slots,5) * .56 + .04));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
.reg-slot{display:block;width:.56em;text-align:center}   /* widest glyph used, H/X, is .546em */
.reg-strip{display:block;will-change:transform}
.reg-strip span{display:block;height:1.1em}
.reg-tape{display:flex;justify-content:flex-end;gap:6px;margin-top:var(--s4)}
.reg-tape i{width:22px;height:3px;background:var(--rule);transition:background .35s}
.reg-tape i.on{background:var(--gold-deep)}

.svc-row{
  display:grid;grid-template-columns:var(--margin) minmax(0,1fr);
  row-gap:var(--s2);padding:clamp(24px,3vw,36px) 0;
}
.svc-code{
  grid-row:1 / span 2;display:flex;align-items:center;gap:var(--s2);align-self:start;
  padding:.5em var(--s6) 0 0;font-weight:700;letter-spacing:.04em;color:var(--sage);
  transition:color .35s;
}
.svc-name,.svc-desc{grid-column:2}
.svc-desc{line-height:1.7;color:var(--sage);max-width:var(--measure)}
.svc-desc strong{font-weight:600;color:var(--ink)}
.svc-desc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:3px;transition:color .25s}
.svc-desc a:hover{color:var(--gold-deep)}
.svc-row.is-current .svc-code{color:var(--gold-deep)}
/* the auditor's tick — drawn once, when the row is read, and left there */
.tick{
  width:18px;height:18px;flex:none;fill:none;stroke:var(--gold-deep);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .55s var(--ease);
}
.svc-row.ticked .tick{stroke-dashoffset:0}

/* ── shelf companies: one level row — the inclusion is said in words, in
   the bold "Everything in Option A/B" line, not by stepping the cards ── */
.shelf-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);align-items:stretch;margin-left:var(--margin);
}
.shelf{
  position:relative;display:flex;flex-direction:column;gap:var(--s4);
  background:var(--carbon-2);border:1px solid var(--line-soft);padding:clamp(24px,2.6vw,32px);
}
.shelf::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gold)}
.shelf-tag{color:var(--gold)}
.shelf ul{list-style:none;display:grid;gap:var(--s2)}
.shelf li{position:relative;padding-left:var(--s5);font-size:var(--t-sm);line-height:1.55;color:rgba(242,240,235,.74)}
.shelf li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--gold)}
/* "Everything in Option A/B" — the inclusion is the point of B and C */
.shelf + .shelf li:first-child{color:var(--bone);font-weight:500}

.shelf-note,.cal-note{display:grid;grid-template-columns:var(--margin) minmax(0,1fr);margin-top:clamp(48px,7vh,80px)}
.shelf-note .eyebrow,.cal-note .eyebrow{padding:.35em var(--s6) 0 0}
.shelf-note p,.cal-note p{max-width:var(--measure);line-height:1.7;color:rgba(242,240,235,.76)}
.shelf-note strong,.cal-note strong{font-weight:600;color:var(--gold)}

/* ── process: a real sequence, so it is allowed its numbers ──────── */
.steps{position:relative;border-top:1px solid var(--rule)}
/* progress: the margin rule turns to brass as the steps are read */
.steps::after{
  content:"";position:absolute;top:0;bottom:0;width:3px;
  left:calc(var(--margin) - var(--s5) - 1px);
  background:var(--gold-deep);transform-origin:top;transform:scaleY(var(--p,1));
}
.step{
  position:relative;   /* the node below is placed per step, not per list */
  display:grid;grid-template-columns:var(--margin) minmax(0,.85fr) minmax(0,1.15fr);
  align-items:baseline;padding:clamp(28px,3.6vw,48px) 0;
}
.step::before{
  content:"";position:absolute;z-index:1;top:clamp(34px,4.2vw,56px);
  left:calc(var(--margin) - var(--s5) - 5px);width:11px;height:11px;border-radius:50%;
  background:var(--ledger);border:2px solid var(--rule);transition:background .4s,border-color .4s;
}
.step.reached::before{background:var(--gold-deep);border-color:var(--gold-deep)}
.step .n{display:block;padding-right:var(--s6);font-weight:700;color:var(--sage);text-transform:lowercase;transition:color .4s}
.step .n::first-letter{text-transform:uppercase}
.step.reached .n{color:var(--gold-deep)}
.step h3{padding-right:var(--s6)}
.step p{line-height:1.7;color:var(--sage);max-width:var(--measure)}

/* ── compliance calendar ─────────────────────────────────────────── */
/* the season line, built by the script from the rows' dates; it fills
   with brass up to today */
.season{display:none}
.js .season{display:block;position:relative;height:150px;margin:0 0 clamp(40px,6vh,72px) var(--margin)}
.season-track{position:absolute;left:0;right:0;top:92px;height:1px;background:rgba(242,240,235,.22)}
.season-fill{
  position:absolute;left:0;top:-1px;width:100%;height:3px;background:var(--gold);
  transform-origin:left;transform:scaleX(var(--f,0));
}
.season-mark{position:absolute;top:92px;height:0}
.season-mark.is-range::before{
  content:"";position:absolute;left:0;right:0;top:-4px;height:9px;background:rgba(var(--gold-rgb),.4);
}
.season-dot{
  position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--carbon);border:2px solid var(--bone);
}
.is-deadline .season-dot{left:-7px;top:-7px;width:14px;height:14px;background:var(--gold);border-color:var(--gold)}
.season-label{position:absolute;left:-6px;bottom:16px;white-space:nowrap;color:var(--fog)}
.season-label b{display:block;font-weight:600;color:var(--bone)}
.is-below .season-label{bottom:auto;top:16px}
.is-end .season-label{left:auto;right:-6px;text-align:right}
.season-today{position:absolute;top:0;height:112px;width:0;opacity:0;transition:opacity .6s}
.season.is-on .season-today{opacity:1}
.season-today::before{content:"";position:absolute;left:-1px;top:26px;bottom:0;width:2px;background:var(--gold)}
.season-today span{position:absolute;left:-1px;top:0;white-space:nowrap;font-weight:700;color:var(--gold)}
.season-today.is-late span{left:auto;right:-1px}

.cal{border-top:1px solid var(--line)}
.cal-row{
  display:grid;grid-template-columns:var(--margin) minmax(0,.8fr) minmax(0,1.2fr);
  align-items:baseline;padding:clamp(24px,3vw,36px) 0;
}
.cal-date{padding-right:var(--s6);font-family:var(--display);font-size:var(--t-lead);line-height:1.15;color:var(--gold)}
.cal-what{padding-right:var(--s6);color:var(--bone)}
.cal-who{max-width:var(--measure);font-size:var(--t-sm);line-height:1.7;color:rgba(242,240,235,.68)}

/* ── newsletters ─────────────────────────────────────────────────── */
.news-list{border-top:1px solid var(--line)}
.news-item{
  display:grid;grid-template-columns:var(--margin) minmax(0,1fr) auto;
  align-items:baseline;padding:clamp(20px,2.4vw,28px) 0;
}
.news-meta{display:contents}
.news-date{padding-right:var(--s6);color:var(--gold);text-transform:lowercase}
.news-date::first-letter{text-transform:uppercase}
.news-title{color:var(--bone);transition:color .3s}
.news-open{display:inline-flex;align-items:center;gap:var(--s3);padding-left:var(--s5);color:var(--fog);transition:color .3s}
.news-open i{position:relative;display:block;width:22px;height:1px;background:currentColor;transition:width .45s var(--ease-rule)}
.news-open i::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}
.news-item:hover .news-title,.news-item:hover .news-open{color:var(--gold)}
.news-item:hover .news-open i{width:44px}

/* ── about ───────────────────────────────────────────────────────── */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  column-gap:clamp(32px,5vw,72px);align-items:start;
}
.about-body{display:grid;grid-template-columns:var(--margin) minmax(0,1fr);align-content:start}
.about-body > *{grid-column:2}
.about-body .eyebrow{grid-column:1;grid-row:1 / span 5;padding:.9em var(--s6) 0 0}
.about-body h2{margin-bottom:var(--s5)}
.about-body p{line-height:1.75;color:var(--sage);max-width:var(--measure)}
.about-body p + p{margin-top:var(--s4)}
.about-card{position:relative;background:var(--sheet);border:1px solid var(--rule);padding:clamp(24px,3vw,36px)}
.about-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gold-deep)}
.about-card .role{margin-top:var(--s1);color:var(--sage)}
.about-card dl{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);display:grid;gap:var(--s3)}
.about-card .kv{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);font-size:var(--t-sm);line-height:1.5}
.about-card .kv dt{color:var(--sage);padding-top:3px}
.about-card .kv dd{overflow-wrap:anywhere}
.about-card .kv dd a{transition:color .25s}
.about-card .kv dd a:hover{color:var(--gold-deep)}

/* ── contact: the enquiry is a form on a sheet of the pad ─────────── */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  column-gap:clamp(40px,5vw,80px);align-items:start;
}
.contact-copy{display:grid;grid-template-columns:var(--margin) minmax(0,1fr);align-content:start}
.contact-copy > *{grid-column:2}
.contact-copy .eyebrow{grid-column:1;grid-row:1 / span 3;padding:.9em var(--s6) 0 0}
.contact-h{font-family:var(--display);font-weight:400;font-size:var(--t-d3);line-height:1.04;letter-spacing:-.016em}
.contact-lede{margin-top:var(--s5);max-width:40ch;font-size:var(--t-lead);line-height:1.6;color:rgba(242,240,235,.72)}
.contact-dl{margin-top:clamp(32px,5vh,56px);border-top:1px solid var(--line)}
.contact-detail{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s5);padding:var(--s5) 0}
.contact-detail dt{color:var(--fog);padding-top:4px}
.contact-detail dd{line-height:1.6;overflow-wrap:anywhere}
.contact-detail dd a{transition:color .25s}
.contact-detail dd a:hover{color:var(--gold)}
.contact-detail dd small{display:block;margin-top:var(--s1);font-size:var(--t-sm);color:var(--fog)}

#contactForm{position:relative;background:var(--sheet);color:var(--ink);padding:clamp(28px,3.6vw,48px)}
#contactForm::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-top:5px double var(--gold-deep)}
.field{display:block;margin-bottom:var(--s5)}
.field > span:first-child{display:block;margin-bottom:var(--s1);color:var(--sage)}
/* required fields carry an asterisk; the optional one already says so */
.field:has([required]) > span:first-child::after{content:" *";color:var(--gold-deep)}
.field input,.field textarea,.field select{
  width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;
  font:inherit;font-size:var(--t-body);color:var(--ink);padding:var(--s2) 0 var(--s3);
  transition:border-color .3s;
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:var(--s5);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2357534C' stroke-width='1.4'/%3E%3C/svg%3E") right 2px center/12px 8px no-repeat;
}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field textarea:focus,.field select:focus,
.field [aria-invalid="true"]{
  outline:0;border-bottom:2px solid var(--gold-deep);padding-bottom:calc(var(--s3) - 1px);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(87,83,76,.62)}
/* an error sits under its own field, not under the button — no red on the pad */
.field .field-err{
  display:block;margin-top:var(--s2);padding-left:var(--s3);border-left:2px solid var(--gold-deep);
  font-size:var(--t-sm);line-height:1.5;color:var(--ink);
}
#contactForm .btn-solid{background:var(--ink);border-color:var(--ink);color:var(--gold);margin-top:var(--s2)}
#contactForm .btn-solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
#contactForm .btn-solid:disabled{opacity:.6;cursor:progress}
.form-note{margin-top:var(--s4);font-size:var(--t-sm);line-height:1.6;color:var(--sage)}
.form-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:3px}
#formMsg{display:none;margin-top:var(--s4);padding-left:var(--s3);border-left:2px solid var(--gold-deep);font-size:var(--t-sm);color:var(--ink)}
#formMsg.show{display:block}

/* ── footer ──────────────────────────────────────────────────────── */
footer{background:var(--ink);border-top:1px solid var(--line-soft);padding:var(--s7) 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.foot-l{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s4)}
/* scoped to .foot-l: a bare ".foot p" also caught the tagline and set it at 13px */
.foot-l p{color:var(--fog)}
.foot-l a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.foot-l a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.foot-tag{font-family:var(--display);font-style:italic;font-size:var(--t-lead);line-height:1.3;color:var(--gold)}
.social{gap:var(--s2);color:var(--fog);transition:color .25s}
.social svg{width:15px;height:15px;flex:none}
.social:hover{color:var(--gold)}
.foot-l a.social,.foot-l a.social:hover{border-bottom:0}

/* ══════════════════════════════════════════════════════════════════
   NEWSLETTER + PRIVACY PAGES — same pad, no scroll choreography.
   These are for reading; the only motion is the masthead arriving.
   ══════════════════════════════════════════════════════════════════ */
.nl-mast{
  position:relative;background:var(--ink);border-bottom:1px solid var(--line-soft);
  padding:clamp(136px,18vh,176px) 0 clamp(48px,7vh,72px);
}
.nl-kicker{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);
  padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:1px solid var(--line);
}
.nl-date{color:var(--gold)}
.nl-flag{color:var(--fog)}
.nl-mast h1{
  max-width:18ch;font-family:var(--display);font-weight:400;
  font-size:var(--t-d2);line-height:1.02;letter-spacing:-.02em;
  animation:fade-in .6s .05s var(--ease) both;
}
.nl-standfirst{margin-top:var(--s5);max-width:var(--measure);font-size:var(--t-lead);line-height:1.6;color:rgba(242,240,235,.72)}

.nl-body{background:var(--ledger);color:var(--ink);padding:clamp(48px,8vh,80px) 0 clamp(64px,10vh,112px)}
/* long-form measure: ~70 characters, the upper end for sustained reading */
.nl-col{max-width:34em}
.nl-col > p{line-height:1.8;color:var(--prose)}
.nl-col > p + p{margin-top:var(--s4)}
.nl-col > p strong{font-weight:600;color:var(--ink)}
.nl-col a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:3px;transition:color .25s}
.nl-col a:hover{color:var(--gold-deep)}
.nl-col > h2{
  margin:clamp(40px,6vh,56px) 0 var(--s3);
  font-family:var(--display);font-weight:400;font-size:var(--t-d4);line-height:1.15;color:var(--ink);
}
.nl-col > h2:first-child{margin-top:0}
.nl-col > h3{margin:var(--s5) 0 var(--s2);font-weight:600;font-size:var(--t-body);color:var(--ink)}
.nl-col > ul{list-style:none;display:grid;gap:var(--s2);margin:var(--s4) 0}
.nl-col > ul > li{position:relative;padding-left:var(--s5);line-height:1.72;color:var(--prose)}
.nl-col > ul > li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--gold-deep)}
.nl-col > ul > li strong{font-weight:600;color:var(--ink)}
.nl-col > dl{margin:var(--s4) 0;display:grid;gap:var(--s3)}
.nl-col > dl > div{display:flex;flex-wrap:wrap;gap:var(--s4)}
.nl-col > dl dt{width:120px;flex:none;padding-top:3px;color:var(--sage)}
.nl-col > dl dd{flex:1;min-width:200px;line-height:1.7;color:var(--prose)}

.nl-quote{position:relative;margin:clamp(32px,5vh,48px) 0;padding:clamp(28px,3.6vw,40px);background:var(--ink);color:var(--bone)}
.nl-quote::before{
  content:"\201C";position:absolute;top:6px;left:14px;
  font-family:var(--display);font-size:72px;line-height:1;color:var(--gold);opacity:.5;
}
.nl-quote p{font-family:var(--display);font-style:italic;font-size:var(--t-d4);line-height:1.38}
.nl-quote cite{display:block;margin-top:var(--s3);font-style:normal;color:var(--gold)}

.nl-points{margin:clamp(32px,5vh,48px) 0;padding:clamp(24px,3.4vw,36px);background:var(--ink);color:var(--bone)}
.nl-points h2{padding-bottom:var(--s3);margin-bottom:var(--s4);border-bottom:1px solid var(--line);color:var(--gold)}
.nl-points ul{list-style:none;display:grid;gap:var(--s3)}
.nl-points li{position:relative;padding-left:var(--s5);line-height:1.62;color:rgba(242,240,235,.76)}
.nl-points li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--gold)}
.nl-points li b{font-weight:600;color:var(--bone)}

.nl-note{margin:clamp(32px,5vh,48px) 0;padding:clamp(24px,3vw,32px);background:var(--sheet);border-left:3px solid var(--gold-deep)}
/* warnings are dashed brass, not red — there is no red on the pad */
.nl-warn{margin:clamp(32px,5vh,48px) 0;padding:clamp(24px,3vw,32px);border:1px dashed var(--gold-deep);background:rgba(var(--gold-rgb),.1)}
.nl-note h2,.nl-warn h2{margin-bottom:var(--s3);color:var(--sage)}
.nl-note p,.nl-warn p{line-height:1.75;color:var(--ink)}
.nl-note strong,.nl-warn strong{font-weight:600}

.nl-dates{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:clamp(32px,5vh,48px) 0;
  background:var(--rule);border:1px solid var(--rule);
}
.nl-date-card{background:var(--sheet);padding:var(--s5)}
.nl-date-card .who{color:var(--sage)}
.nl-date-card .when{margin:var(--s2) 0 var(--s1);font-family:var(--display);font-size:var(--t-lead);line-height:1.15;color:var(--gold-deep)}
.nl-date-card .what{font-size:var(--t-sm);line-height:1.5;color:var(--sage)}

.nl-source{margin-top:clamp(32px,6vh,48px);padding-top:var(--s5);border-top:1px solid var(--rule);line-height:1.8;color:var(--sage)}

.nl-cta{background:var(--ink);border-bottom:1px solid var(--line-soft);padding:clamp(56px,9vh,80px) 0;text-align:center}
.nl-cta h2{font-family:var(--display);font-weight:400;font-size:var(--t-d3);line-height:1.08;color:var(--bone)}
.nl-cta p{margin-top:var(--s3);color:rgba(242,240,235,.66)}
.nl-cta .btn{margin-top:var(--s5)}
.nl-pager{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);padding:var(--s6) 0}
.nl-pager a,.nl-pager span{display:inline-flex;align-items:center;min-height:24px;color:var(--fog);transition:color .25s}
.nl-pager a:hover{color:var(--gold)}

.arc-item{
  display:grid;grid-template-columns:var(--margin) minmax(0,1fr) auto;
  align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--line-soft);
}
.arc-item:first-child{border-top:1px solid var(--line)}
.arc-date{padding-right:var(--s6);color:var(--gold)}
.arc-title{display:block;color:var(--bone);transition:color .3s}
.arc-sum{display:block;margin-top:var(--s2);max-width:var(--measure);line-height:1.6;color:rgba(242,240,235,.64)}
.arc-open{padding-left:var(--s5);white-space:nowrap;color:var(--fog);transition:color .3s}
.arc-item:hover .arc-title,.arc-item:hover .arc-open{color:var(--gold)}

/* ══ responsive ════════════════════════════════════════════════════
   Three layouts, not two. Between 961 and 1180px the margin column
   stays, but the side-by-side pieces that were starving — About's text,
   the shelf cards, the contact form — stack onto the content edge. */
@media(max-width:1180px){
  .about-grid,.contact-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--s8)}
  .about-card,#contactForm{margin-left:var(--margin);max-width:34em}

  .shelf-grid{grid-template-columns:minmax(0,1fr)}
  .shelf{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;column-gap:var(--s6);row-gap:var(--s2)}
  .shelf-tag{grid-column:1;grid-row:1}
  .shelf h3{grid-column:1;grid-row:2}
  .shelf ul{grid-column:2;grid-row:1 / span 2}
}
@media(max-width:960px){
  /* no margin column on narrow screens: labels sit above what they name */
  :root{--margin:0px}
  .has-margin > .wrap::before{display:none}
  /* the process line moves to the left edge of the steps on phones */
  .steps{padding-left:var(--s6)}
  .steps::after{left:10px}
  .step::before{left:-26px;top:32px}
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .sec-head .eyebrow{grid-column:1;grid-row:auto;padding:0 0 var(--s3)}
  /* .about-body h2 shares the section-heading rule, which places it in
     column 2 at a higher specificity than ".about-body > *" — reset it
     here too, or it opens a phantom second column on phones */
  .sec-head h2,.sec-head p,.about-body h2{grid-column:1}

  .svc-wrap{grid-template-columns:minmax(0,1fr)}
  /* the register becomes a counter strip, stuck under the header while the
     service rows scroll beneath it */
  .register{grid-column:1;grid-row:1}
  .svc{grid-row:2}
  .js .register{top:76px;padding-block:var(--s3) var(--s2)}
  .reg-glass{font-size:clamp(44px,15vw,58px)}
  .reg-tape{margin-top:var(--s3)}
  /* code above the text: a side column left descriptions at ~30
     characters a line on a 375px phone */
  .svc-row{grid-template-columns:minmax(0,1fr)}
  .svc-code{grid-row:auto;padding:0}
  .svc-name,.svc-desc{grid-column:1}

  .shelf{display:flex}
  .shelf-note,.cal-note{grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}

  .step{grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}
  .cal-row{grid-template-columns:minmax(0,1fr);row-gap:var(--s1)}
  .js .season{height:96px}
  .season-track,.season-mark{top:64px}
  .season-label{display:none}
  .season-today{height:78px}

  .news-item{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s1)}
  .news-date{grid-column:1 / -1}
  .news-title{grid-column:1}

  .about-body,.contact-copy{grid-template-columns:minmax(0,1fr)}
  .about-body > *,.contact-copy > *{grid-column:1}
  .about-body .eyebrow,.contact-copy .eyebrow{grid-row:auto;padding:0 0 var(--s3)}

  .facts-in{grid-template-columns:1fr 1fr}
  .fact:last-child{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--line-soft)}

  .arc-item{grid-template-columns:minmax(0,1fr);row-gap:var(--s1)}
  .arc-open{display:none}
  .nl-dates{grid-template-columns:1fr 1fr}

  /* touch: tap-to-call and the rest get a full 44px target */
  .fact dd a,.about-card .kv dd a,.contact-detail dd a,.foot-l a,.social,.hero-scroll{min-height:44px}

  .nav-links{
    position:fixed;inset:76px 0 auto 0;display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s2) var(--pad) var(--s5);background:rgba(0,0,0,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:var(--s4) 0;font-size:var(--t-body);border-bottom:1px solid var(--line-soft)}
  .nav-links a::after{display:none}
  .nav-links a.nav-cta{margin-top:var(--s4);text-align:center;justify-content:center}
  .burger{display:block}
}
@media(max-width:560px){
  .facts-in{grid-template-columns:1fr}
  .fact + .fact{border-left:0;padding-left:0;border-top:1px solid var(--line-soft)}
  .contact-detail{grid-template-columns:minmax(0,1fr);row-gap:var(--s1)}
  .nl-dates{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero{height:auto}
  .hero-mark .sh,.hero-ring{display:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}