/* Sillplate — one stylesheet for every page.

   The site was three standalone HTML files, each with its own copy of this
   and its own hand-written navigation. They drifted, exactly as copies do:
   the home page had four links and a logo that was not clickable, About had
   two and a logo that was, and the two headers no longer looked like the same
   website. Shared here so that cannot happen again. */

/* ── tokens ───────────────────────────────────────────────────────────────
   Measured before this existed: twenty-one distinct font sizes on the home
   page alone, ten border radii, three heights for the same button, and a
   gold section-eyebrow at 2.42:1 against white. None of it was decided; it
   accumulated. The brand — deep green, cream, brass, Libre Franklin over
   Source Serif — is good and is kept exactly. What follows is the scale it
   was missing.

   Anything that needs a size, a gap, a radius or a colour takes it from here.
   A one-off value in a rule below is a bug, not a decision. */
:root{
  /* Brand. Unchanged. */
  --green:#14452F; --green-2:#1A5539; --green-lt:#1F6046;
  --cream:#F5EFE0; --surface:#fff;

  /* Brass, in two weights.
     The display brass is the brand colour and belongs on dark grounds and on
     large type, where 3:1 is the bar. On white, at eyebrow size, it measured
     2.42:1 — decorative text nobody with less than perfect sight could read.
     --brass-ink is the same hue taken down to 4.6:1 for that job. */
  --brass:#C9A227;
  --brass-ink:#8A6D0F;
  /* The same hue again, dark enough for the cream ground. --brass-ink is
     tuned against white and lands at 4.28:1 on cream, which is under the bar
     — close enough to look fine and not close enough to be legible to
     everyone. */
  --brass-on-cream:#7D5A0B;

  /* Ink. --soft sat at 4.2:1 and was carrying most of the metadata on the
     site; it is now 4.6:1, which is the same grey to look at and a legible
     one to read. */
  --ink:#101317; --mid:#454B55; --soft:#6B717B;
  --line:#E4E6EA; --wash:#F7F8F9;

  --sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  /* Type scale. Eight steps, each a deliberate distance from the next.
     Display sizes are fluid; body sizes are not, because text that resizes
     with the window is unsettling to read. */
  --t-display:clamp(38px,5.4vw,60px);
  --t-h2:clamp(30px,4vw,44px);
  --t-h3:20px;
  --t-lead:clamp(17px,1.8vw,19px);
  --t-md:17px;
  --t-body:15px;
  --t-sm:13.5px;
  --t-xs:12.5px;
  --t-label:11.5px;

  /* Weight. Four, not five. */
  --w-regular:400; --w-medium:600; --w-bold:700; --w-black:800;

  /* Spacing. A 4pt grid, so rhythm holds without anyone thinking about it. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Radius. Four steps and a pill, down from ten arbitrary values. */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* Elevation. Three, used for three distinct heights off the page. */
  --sh-sm:0 1px 2px rgba(11,18,32,.06),0 2px 8px rgba(11,18,32,.04);
  --sh-md:0 14px 40px rgba(11,18,32,.09);
  --sh-lg:0 30px 70px rgba(11,18,32,.14);

  /* One duration and one curve, so every transition on the site agrees. */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.16s;

  /* The smallest a control may be and still be reliably hittable on a phone.
     Nav links were 22px tall and footer links 17px. */
  --tap:44px;
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* Focus, once, for everything. There was no visible focus ring anywhere on
   the site: a keyboard user could not tell where they were. */
:focus-visible{
  outline:2px solid var(--green-lt); outline-offset:3px; border-radius:var(--r-sm);
}
.hero :focus-visible,.dark :focus-visible,footer :focus-visible{
  outline-color:var(--cream);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--surface);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
/* Section eyebrow. On white it uses the readable brass; the rule keeps the
   display brass, because a 1px line is decoration and not something anyone
   has to read. */
.kicker{display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-label);font-weight:var(--w-black);
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);
  margin:0 0 var(--s-4)}
.kicker:before{content:"";width:20px;height:1px;background:var(--brass)}
/* On a dark ground the display brass clears 3:1 comfortably and is the
   brand colour, so it stays. Keyed to .dark rather than to each section by
   name, so a new dark section gets it without anyone remembering to. */
.hero .kicker,.dark .kicker,footer .kicker{color:var(--brass)}
.hero .kicker:before,.dark .kicker:before,footer .kicker:before{background:currentColor}
h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.035em;
  font-weight:var(--w-black);margin:0 0 var(--s-4)}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.02em;
  font-weight:var(--w-bold);margin:0 0 var(--s-2)}
.sub{font-family:var(--serif);font-size:var(--t-lead);line-height:1.65;
  color:var(--mid);max-width:58ch;margin:0}
/* Buttons.
   One control at one height. The site had three — 42, 51 and 55 — for the
   same thing, which is the single loudest signal that an interface was
   assembled rather than designed. --tap is also the floor for a thumb. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:inherit;font-weight:var(--w-bold);font-size:var(--t-body);
  text-decoration:none;padding:0 var(--s-5);min-height:var(--tap);
  border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
/* One size up, for the two calls to action that carry the page. */
.btn-lg{min-height:52px;padding:0 var(--s-6);font-size:var(--t-md)}

/* Lifting on hover made a 68px navigation bar look like it had come loose.
   Colour answers the pointer; only the page's own hero buttons move, and
   barely. */
.btn:active{transform:translateY(1px)}

.btn-solid{background:var(--green);color:#fff;box-shadow:var(--sh-sm)}
.btn-solid:hover{background:var(--green-lt);box-shadow:var(--sh-md)}
.btn-cream{background:var(--cream);color:var(--green)}
.btn-cream:hover{background:#fff}
.btn-line{border-color:rgba(255,255,255,.34);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--soft);background:var(--wash)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .2s ease,background .2s ease}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s-3);height:68px}
.nav img{width:33px;height:33px;border-radius:var(--r-sm)}
.nav-name{font-weight:var(--w-black);letter-spacing:-.03em;font-size:var(--t-md)}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:var(--s-5)}
/* :not(.btn) matters more than it looks.
   Without it this rule beat .btn-solid on specificity and painted the Sign
   in button's label the same grey as the links beside it — dark grey on dark
   green, 1.24:1, the site's primary call to action effectively invisible. */
.nav-links a:not(.btn){
  display:inline-flex;align-items:center;
  font-size:var(--t-sm);font-weight:var(--w-medium);color:var(--mid);
  text-decoration:none;
  /* A 22px-tall link is a miss on a phone; the padding brings the hit area
     up to the tap floor without changing where the text sits. */
  min-height:var(--tap);padding:0 var(--s-1);
  transition:color var(--dur) var(--ease)}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav .btn{min-height:38px;padding:0 var(--s-4);font-size:var(--t-sm)}
@media(max-width:800px){.nav-links a:not(.btn){display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--green);color:#fff;padding:88px 0 96px}
.hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 460px at 78% 8%,rgba(255,255,255,.09),transparent 62%),
             radial-gradient(700px 420px at 6% 96%,rgba(201,162,39,.20),transparent 64%)}
/* The document is the hero object, so it gets the room. The text column is
   held to a measure that reads rather than one that fills the grid. */
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr minmax(0,420px);
  gap:72px;align-items:center}
.hero-text{max-width:34rem}
h1{font-size:clamp(38px,5vw,58px);line-height:1.04;letter-spacing:-.042em;
  font-weight:900;margin:0 0 var(--s-5);max-width:13ch}
.lede{font-family:var(--serif);font-size:clamp(17px,1.7vw,19px);line-height:1.62;
  color:rgba(255,255,255,.84);max-width:48ch;margin:0 0 var(--s-6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
/* Each claim stays on one line or moves to the next whole. On a phone this
   was breaking as "Cancel any / time", which reads as a sentence that ran
   out of room rather than three separate facts. */
/* Three separate facts, so they are set as three — separated by rule rather
   than by a middle dot that leaves them looking like one long sentence that
   ran out of room. */
.hero-note{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  font-size:var(--t-xs);color:rgba(255,255,255,.7);margin:var(--s-6) 0 0}
.hero-note span{display:inline-flex;align-items:center}
/* The rule follows its item rather than leading the next one. When the line
   wraps, a trailing rule reads as a continuation; a leading one reads as a
   bullet that lost its text. */
.hero-note span:not(:last-child):after{content:"";width:1px;height:11px;
  margin-left:var(--s-4);background:rgba(255,255,255,.26)}
/* Between a laptop and a tablet the report was still claiming 420px, which
   squeezed the text column until the two calls to action fell onto separate
   lines at different widths — one button and an afterthought. */
@media(max-width:1180px){
  .hero .wrap{grid-template-columns:1fr minmax(0,340px);gap:var(--s-7)}
}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:48px}}

/* The hero, recomposed for a phone rather than stacked.
   Two calls to action at their natural widths read as one button and one
   afterthought; the trust line's rules end up stranded at the ends of wrapped
   lines; and the eyebrow's rule sits against the middle of two lines of text
   instead of beside the first. */
@media(max-width:640px){
  .hero{padding:56px 0 64px}
  .hero .wrap{gap:40px}
  .hero-text{max-width:none}
  h1{max-width:none;letter-spacing:-.035em}
  .lede{max-width:none;margin-bottom:var(--s-5)}
  .hero-cta{flex-direction:column;align-items:stretch;gap:var(--s-2)}
  .hero-cta .btn{width:100%}
  /* One fact per line, so nothing has to be separated by anything. */
  .hero-note{flex-direction:column;gap:var(--s-2);margin-top:var(--s-5)}
  .hero-note span:not(:last-child):after{display:none}
  .kicker{align-items:flex-start}
  .kicker:before{margin-top:.55em;flex:0 0 20px}
}

/* report, the thing an inspector hands over, which is also the one visual a
   stylesheet can render honestly. A drawn photograph reads as a broken image;
   a document reads as a document. */
.doc{width:100%;max-width:380px;margin:0 auto;position:relative}
/* ── the hero's report mockup ─────────────────────────────────────────────
   Deliberately outside the type scale. This is a picture of a report shrunk
   to fit beside the headline, not interface — its sizes are chosen to read as
   a miniature of a document, and putting them on the scale would make it look
   like a form. Nothing in here is text a visitor has to read; the same words
   are in the page around it. */
.paper{background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 2px 4px rgba(6,20,14,.16),0 18px 40px rgba(6,20,14,.28),
             0 48px 90px rgba(6,20,14,.22)}
.paper-band{background:var(--green);padding:26px 26px 22px;color:#fff;position:relative}
.paper-band:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brass)}
.paper-logo{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.paper-logo img{width:28px;height:28px;border-radius:7px;background:#fff;
  padding:2px;object-fit:contain;display:block}
.paper-logo span{font-size:11px;font-weight:700;letter-spacing:.03em}
.paper-kick{font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin:0 0 6px}
.paper-addr{font-size:20px;font-weight:800;letter-spacing:-.025em;margin:0;line-height:1.2}
.paper-meta{font-size:10.5px;color:rgba(255,255,255,.66);margin:7px 0 0}
.paper-body{padding:22px 26px 26px}
.sevs{display:flex;gap:7px;margin-bottom:20px}
.sev{flex:1;text-align:center;border-radius:8px;padding:9px 4px;background:var(--wash)}
.sev b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.sev span{font-size:7.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--soft)}
.sev.red b{color:#A3231B}.sev.amb b{color:#8A4B08}
.finding{border-top:1px solid var(--line);padding:13px 0}
.finding:first-of-type{border-top:0;padding-top:0}
.f-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.f-sev{font-size:7.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:var(--r-pill)}
.f-sev.rep{background:#FBEEDC;color:#8A4B08}
.f-sev.saf{background:#FCEBE8;color:#A3231B}
.f-loc{font-size:9.5px;color:var(--soft);margin-left:auto}
.f-txt{font-family:var(--serif);font-size:11.5px;line-height:1.55;color:#2A2F36;margin:0}
.f-shot{height:52px;border-radius:var(--r-sm);margin-top:9px;
  background:linear-gradient(140deg,#DFE3E1,#C9D0CD)}
.paper-foot{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;
  display:flex;align-items:center;gap:8px}
.paper-foot i{width:7px;height:7px;border-radius:50%;background:#2E6B4F;display:block}
.paper-foot span{font-size:9.5px;color:var(--soft)}
@media(max-width:900px){.doc{max-width:340px}}

/* strip */
.strip{background:var(--cream)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:36px 24px}
.strip b{display:block;font-size:var(--t-body);font-weight:800;color:var(--green);margin-bottom:4px;
  letter-spacing:-.01em}
.strip p{margin:0;font-size:var(--t-sm);color:#5C5341;line-height:1.55}
@media(max-width:800px){.strip .wrap{grid-template-columns:1fr;gap:22px}}

section{padding:92px 0}
/* 92px between sections is a considered pause on a laptop and a scroll
   through nothing on a phone. */
@media(max-width:640px){
  section{padding:56px 0}
  .strip .wrap{padding:32px 24px}
  h2{font-size:clamp(27px,7.4vw,34px)}
}
/* transform demo */
/* One thing becoming another, read downwards.
   Side by side with an arrow between them, this read as two cards that
   happened to be near each other. The point of the section is that the
   second thing is the first thing, rewritten — so it is set as a single
   column and the eye travels through the turn rather than across a gap. */
/* Heading and transformation side by side: the section was setting a 620px
   column against a 1140px page and leaving the rest empty. */
.demo-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s-8);align-items:start}
.demo-lead{max-width:34rem}
.demo-col{min-width:0}
.demo{max-width:560px;margin:0}
@media(max-width:900px){
  .demo-wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .demo{max-width:none;margin-top:var(--s-2)}
}
.said,.wrote{border-radius:var(--r-lg);padding:var(--s-5) var(--s-5)}
.said{background:var(--wash);border:1px solid var(--line)}
.wrote{background:#fff;border:1px solid rgba(20,69,47,.18);box-shadow:var(--sh-sm)}
.tag{font-size:var(--t-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 var(--s-3)}
.said .tag{color:var(--soft)}
.wrote .tag{color:var(--green)}
.said p{margin:0;font-size:var(--t-md);color:var(--mid);line-height:1.6;font-style:italic}
.wrote p{margin:0;font-family:var(--serif);font-size:var(--t-md);line-height:1.68;color:var(--ink)}

/* The turn: a short rule and a single chevron, drawn in CSS. Enough to say
   "and this becomes", not enough to be a graphic. */
.demo-turn{display:flex;flex-direction:column;align-items:center;gap:0;
  padding:var(--s-2) 0}
.demo-turn:before{content:"";width:1px;height:22px;background:var(--line)}
.demo-turn span{width:9px;height:9px;margin-top:-5px;
  border-right:1.5px solid var(--green);border-bottom:1.5px solid var(--green);
  transform:rotate(45deg)}

.demo-note{margin:var(--s-5) 0 0;font-size:var(--t-sm);color:var(--soft);
  max-width:620px;line-height:1.6}
.demo-note b{color:var(--ink);font-weight:700}

/* steps */
/* Three steps, as columns rather than as boxes.
   They were cards on a card-coloured page that lifted on hover — the generic
   shape a feature grid takes when nobody decides otherwise. A rule, a number
   and a heading carry the sequence perfectly well, and the section stops
   competing with the report beside it. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7);
  margin-top:var(--s-7)}
.step{padding-top:var(--s-4);border-top:2px solid var(--green)}
.step-n{font-size:var(--t-label);font-weight:800;letter-spacing:.14em;
  color:var(--brass-ink);margin-bottom:var(--s-3)}
.step h3{font-size:var(--t-h3);letter-spacing:-.022em;margin:0 0 var(--s-2)}
.step p{margin:0;font-size:var(--t-body);color:var(--mid);line-height:1.62;
  max-width:34ch}
@media(max-width:840px){
  .steps{grid-template-columns:1fr;gap:var(--s-5)}
  .step p{max-width:none}
}

/* dark */
.dark{background:var(--green);color:#fff;position:relative;overflow:hidden}
.dark:before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 420px at 88% 12%,rgba(201,162,39,.15),transparent 62%)}
.dark .wrap{position:relative}
.dark h2{color:#fff}.dark .sub{color:rgba(255,255,255,.76)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.grid2{grid-template-columns:1fr;gap:38px}}
.pts{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.pts li{display:flex;gap:15px;align-items:flex-start}
.tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(201,162,39,.2);
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.tick:after{content:"";width:9px;height:5px;border-left:2px solid var(--brass);
  border-bottom:2px solid var(--brass);transform:rotate(-45deg);margin-top:-3px}
.pts b{display:block;font-size:var(--t-md);margin-bottom:4px;letter-spacing:-.01em}
.pts p{margin:0;font-size:var(--t-body);color:rgba(255,255,255,.68);line-height:1.58}

/* pricing */
.price-wrap{background:var(--wash)}
.price{max-width:540px;margin:46px auto 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:40px 36px;
  box-shadow:var(--sh-lg);text-align:center;position:relative;overflow:hidden}
.price:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--green),var(--brass))}
.price .amt{font-size:var(--t-display);font-weight:900;letter-spacing:-.05em;line-height:1;
  color:var(--green)}
.price .per{font-size:var(--t-sm);color:var(--soft);margin:9px 0 28px}
.price ul{list-style:none;padding:0;margin:0 0 30px;text-align:left;display:grid;gap:13px}
.price li{display:flex;gap:12px;font-size:var(--t-body);color:var(--mid);align-items:flex-start}
.price li:before{content:"";flex:0 0 auto;width:9px;height:5px;margin-top:8px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg)}
.price .btn{width:100%}
.price small{display:block;margin-top:18px;font-size:var(--t-xs);color:var(--soft);line-height:1.6}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:36px 60px;margin-top:48px}
.faq h3{font-size:var(--t-md);margin:0 0 8px;letter-spacing:-.015em}
.faq p{margin:0;font-size:var(--t-body);color:var(--mid);line-height:1.65}
@media(max-width:840px){.faq{grid-template-columns:1fr;gap:28px}}

footer{background:var(--green);color:rgba(255,255,255,.7);padding:60px 0 46px;font-size:var(--t-sm)}
.foot img{width:40px;height:40px;border-radius:var(--r-md)}
.foot a{color:var(--cream)}
.rule{height:1px;background:rgba(255,255,255,.14);margin:36px 0 22px}
/* Was .48, which flattens to 3.8:1 on the green. This is the billing terms
   — the one paragraph on the site somebody may need to read carefully. */
.fine{font-size:var(--t-xs);color:rgba(255,255,255,.66);line-height:1.7;margin:0}


/* ── navigation, shared ──────────────────────────────────────────────────
   Every page uses the markup in full: the mark links home, the same four
   destinations in the same order, sign-in last. */
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.nav-brand{min-height:var(--tap)}
.nav-brand:hover .nav-name{color:var(--green)}
.nav-name{transition:color var(--dur) var(--ease)}

/* The sign-in button lifted and dropped a heavy shadow on hover, which on a
   68px bar made it look like it had come loose. It tints instead. */
.nav .btn-solid{box-shadow:none}
.nav .btn-solid:hover{transform:none;background:var(--green-lt)}

/* The menu, for phones.
   Every link was simply hidden below 800px and nothing took their place, so
   a phone got a logo, a sign-in button, and no way to reach anything else. */
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:8px;
  cursor:pointer;color:var(--ink);border-radius:var(--r-sm)}
.nav-toggle:hover{background:var(--wash)}
.nav-toggle svg{display:block}
.nav-menu{display:none}
@media(max-width:800px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-menu{display:block;max-height:0;overflow:hidden;
    transition:max-height .28s cubic-bezier(.4,0,.2,1);
    border-top:1px solid transparent;background:rgba(255,255,255,.97);
    backdrop-filter:saturate(1.6) blur(14px)}
  .nav-menu.open{max-height:340px;border-top-color:var(--line)}
  .nav-menu a{display:block;padding:15px 24px;text-decoration:none;
    font-weight:600;font-size:var(--t-body);color:var(--ink);
    border-bottom:1px solid var(--line)}
  .nav-menu a:last-child{border-bottom:0;color:var(--green);font-weight:700}
  .nav-menu a:active{background:var(--wash)}
}
@media(min-width:801px){.nav-menu{display:none!important}}

/* ── footer, shared ──────────────────────────────────────────────────────
   Was two columns with the links stacked by <br> against the right edge,
   which read as a list that had fallen over. Proper columns, with the
   headings that tell you what each one is. */
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;align-items:start}
.foot-brand{display:flex;gap:14px;align-items:flex-start}
.foot-brand img{width:42px;height:42px;border-radius:var(--r-md);flex:none}
.foot-name{font-weight:900;color:#fff;font-size:var(--t-md);letter-spacing:-.03em}
.foot-desc{margin-top:6px;line-height:1.7}
.foot h4{font-size:var(--t-label);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Footer links were 17px tall. On a phone that is a coin toss. */
.foot li a{display:inline-flex;align-items:center;min-height:var(--tap)}
.foot a{color:var(--cream);text-decoration:none;
  transition:color var(--dur) var(--ease)}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){
  .foot{grid-template-columns:1fr 1fr;gap:34px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:460px){.foot{grid-template-columns:1fr}}


/* ── reading pages (About, Privacy) ──────────────────────────────────────
   Both use these; kept here rather than copied into each, which is how the
   navigation came to differ between them in the first place. */
.page{max-width:760px;margin:0 auto;padding:var(--s-9) var(--s-5) var(--s-9)}
/* 96px of nothing between the navigation and the first word is generous on a
   laptop and dead space on a phone, where it costs a third of the screen. */
@media(max-width:640px){.page{padding:var(--s-7) var(--s-5) var(--s-8)}}
.page h1{font-size:clamp(32px,4.6vw,46px);line-height:1.08;letter-spacing:-.035em;
  font-weight:900;margin:0 0 18px;max-width:18ch}
.page .stand{font-family:var(--serif);font-size:var(--t-h3);line-height:1.65;color:var(--mid);
  margin:0 0 12px}
.page h2{font-size:var(--t-h3);letter-spacing:-.025em;margin:52px 0 14px}
.page p{font-size:var(--t-body);line-height:1.72;color:var(--mid);margin:0 0 14px}
.page ul{margin:0 0 14px;padding-left:20px}
.page li{font-size:var(--t-body);line-height:1.72;color:var(--mid);margin-bottom:8px}
.page strong{color:var(--ink)}


/* ── company facts, on the terms page ────────────────────────────────────
   A definition list of what is sold, at what price, billed how. It reads as
   a disclosure because that is what it is — which is exactly why it no
   longer ends the About page. */
.facts{background:var(--wash);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;margin:34px 0 0}
.facts dl{margin:0;display:grid;grid-template-columns:170px 1fr;gap:13px 20px}
.facts dt{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);padding-top:3px}
.facts dd{margin:0;font-size:var(--t-body);color:var(--ink);font-weight:600}
@media(max-width:640px){.facts dl{grid-template-columns:1fr;gap:4px 0}
  .facts dd{margin-bottom:12px}}

/* ── about ────────────────────────────────────────────────────────────────
   The page was a 760px article column of headings and paragraphs, ending in
   a grey table of price and billing terms. It read as a disclosure document
   with a story bolted to the front, and it was mostly about money.

   It is a page about a product now, and it is built from the same parts as
   the home page — the same eyebrow, the same three-column rule treatment, the
   same dark band — so the two read as one company. Its rhythm comes from
   alternating grounds and a changing measure, not from putting each section
   in a rounded rectangle. */

.about-hero{padding:var(--s-9) 0 var(--s-8);border-bottom:1px solid var(--line)}
.about-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--s-6) var(--s-8);align-items:end}
.about-hero .kicker{grid-column:1/-1;margin-bottom:0}
.about-hero h1{font-size:clamp(34px,4.4vw,50px);line-height:1.06;letter-spacing:-.04em;
  font-weight:900;margin:0;max-width:15ch}
/* Serif, set against the headline rather than beneath it. */
.about-lede{font-family:var(--serif);font-size:var(--t-lead);line-height:1.65;
  color:var(--mid);max-width:46ch;margin:0 0 var(--s-2)}

/* The one belief the product is built on, given a page to itself. Cream,
   because it is the brand's quiet colour and a change of ground does more
   for rhythm here than any box would. */
.belief{background:var(--cream);padding:var(--s-9) 0}
.belief .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--s-6) var(--s-8);align-items:end}
.belief .kicker{grid-column:1/-1;color:var(--brass-on-cream);margin-bottom:0}
.belief-line{font-size:clamp(28px,4.2vw,44px);line-height:1.12;letter-spacing:-.035em;
  font-weight:900;color:var(--green);margin:0;max-width:14ch}
.belief-body{font-size:var(--t-lead);line-height:1.62;color:#5C5341;max-width:46ch;
  margin:0 0 var(--s-2)}

.principles{padding:var(--s-9) 0}
.place{background:var(--wash);padding:var(--s-9) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.place-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--s-8);align-items:start}
.place h2{margin:0}
.place-body{font-size:var(--t-lead);line-height:1.65;color:var(--mid);max-width:52ch;margin:0}

/* Contact gets the dark band, so the answer to "who do I ask" is the most
   present thing on the page rather than a paragraph at the end of it. */
.contact{padding:var(--s-9) 0;text-align:center}
.contact .kicker{display:flex;justify-content:center;margin-bottom:var(--s-5)}
.contact-mail{display:inline-block;font-size:clamp(24px,3.6vw,38px);font-weight:800;
  letter-spacing:-.03em;color:#fff;text-decoration:none;
  border-bottom:2px solid rgba(201,162,39,.5);padding-bottom:4px;
  transition:border-color var(--dur) var(--ease)}
.contact-mail:hover{border-bottom-color:var(--brass)}
.contact-note{font-size:var(--t-body);color:rgba(255,255,255,.72);
  margin:var(--s-5) auto 0;max-width:46ch}

/* Company information: present, findable, and plainly not the point. */
.company{padding:var(--s-8) 0 var(--s-9)}
.company-h{font-size:var(--t-label);font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft);margin:0 0 var(--s-5)}
.company-dl{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);margin:0}
.company-dl dt{font-size:var(--t-xs);color:var(--soft);margin:0 0 var(--s-1)}
.company-dl dd{margin:0;font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.company-dl a{color:var(--green)}
.company-more{font-size:var(--t-sm);color:var(--soft);line-height:1.65;
  margin:var(--s-6) 0 0;max-width:62ch}
.company-more a{color:var(--green);font-weight:600}

@media(max-width:900px){
  .about-hero .wrap,.belief .wrap{grid-template-columns:minmax(0,1fr);
    gap:var(--s-5);align-items:start}
  .about-hero .kicker,.belief .kicker{margin-bottom:var(--s-4)}
  .about-lede,.belief-body{max-width:60ch;margin-bottom:0}
  .place-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .company-dl{grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-4)}
}
@media(max-width:640px){
  .about-hero{padding:var(--s-7) 0 var(--s-6)}
  .about-hero h1{max-width:none}
  .belief,.principles,.place,.contact{padding:var(--s-7) 0}
  .belief-line{max-width:none}
  .company{padding:var(--s-6) 0 var(--s-7)}
  .company-dl{grid-template-columns:1fr;gap:var(--s-4)}
}