/* ==========================================================================
   Wrenhollow Pet Grooming — concept build. Rebuilt 9 Sep 2026.

   THE FIRST VERSION WAS RIGHT ABOUT THE COLOURS AND WRONG ABOUT EVERYTHING
   ELSE. It was rounded white cards with 1px borders and soft shadows, laid out
   as equal columns — the default shape of a generated page, not the shape of
   this business.

   Their own "MAIN LOGO" sheet (screenshot 224943) is the brief, and it is
   emphatic:

     - FOUR FLAT RECTANGLES. Mint on white, white on mint, white on black,
       mint on black. No gradient, no shadow, no rounded card, no hairline.
     - A FAT, SOFT, SLIGHTLY BOUNCY SANS set in two tight stacked lines, the
       letters almost touching. Nunito at 900 is the right face for that — the
       mistake was using it timidly, at heading size, inside boxes.
     - DOG EARS on the F and the R, and WHISKER STROKES flanking PURR. Those
       are the only ornament the brand has, so they are the only ornament here.

   So the page is built the way the sheet is built: full-bleed blocks of mint,
   black and cream that meet edge to edge, enormous stacked type, 3px ink rules,
   and whisker marks. `border-radius` and `box-shadow` are close to banned.

   The photographs are 420-1205px and several are soft, so they are never asked
   to fill a panel. They are hung as PRINTS — flat rectangles in a thick cream
   frame, turned a degree or two — because that is what a groomer's photographs
   actually are, and it makes a 684px snapshot read as intentional rather than
   as a low-resolution hero.
   ========================================================================== */

@font-face{
  font-family:"Nunito";
  src:url("../../fonts/nunito-var.woff2") format("woff2-variations");
  font-weight:300 900; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Work Sans";
  src:url("../../fonts/worksans-var.woff2") format("woff2-variations");
  font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212;
}

:root{
  /* the grounds, and nothing else */
  --cream:#FAF8F5;
  --shell:#F1EEE8;
  --mint:#9CCCBA;          /* their measured brand colour — a GROUND, never text */
  --ink:#181818;           /* their measured brand black                          */
  --white:#FFFFFF;

  /* text tones, each measured against the ground it is allowed on */
  --ink-soft:#5A5A5A;      /* on cream 6.51:1 — NEVER on mint, where it is 3.81:1 */
  --mint-deep:#2E6B58;     /* on cream 5.90:1                                     */
  --on-mint:#1E322B;       /* on mint  8.3:1  — the muted tone for mint blocks    */
  --on-ink:#D8D8D8;        /* on ink  11.6:1                                      */
  --on-ink-soft:#B8B8B8;   /* on ink   8.1:1                                      */
  --caramel-deep:#7A5730;  /* on cream 6.13:1                                     */
  --rose-deep:#A8524A;     /* on cream 4.99:1                                     */

  --measure:58ch;
  --pad:clamp(1.15rem, 4.5vw, 4rem);
  --gap:clamp(1.2rem, 2.6vw, 2.2rem);
  --section:clamp(3.5rem, 7vw, 6.5rem);
  --rule:3px;

  --s--1:clamp(.82rem, .8rem + .1vw, .92rem);
  --s-0:clamp(1.02rem, .98rem + .2vw, 1.14rem);
  --s-1:clamp(1.18rem, 1.08rem + .45vw, 1.5rem);
  --s-2:clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --s-3:clamp(2.1rem, 1.5rem + 2.8vw, 4.4rem);
  --s-4:clamp(2.55rem, 1.6rem + 4.6vw, 7rem);
  --s-5:clamp(4.5rem, 2rem + 12vw, 15rem);

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:"Work Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--s-0);
  line-height:1.62;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  /* clip, NOT hidden: overflow-x:hidden makes <body> a scroll container and
     silently breaks position:sticky on the nav. */
  overflow-x:clip;
}

/* ---------- type ---------------------------------------------------------- */
h1,h2,h3{
  font-family:"Nunito",ui-rounded,"Segoe UI",sans-serif;
  font-weight:900;
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 .38em;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:var(--s-4)}
h2{font-size:var(--s-3)}
h3{font-size:var(--s-1);line-height:1.16;letter-spacing:-.02em;font-weight:800}
p{margin:0 0 1.05em;max-width:var(--measure);text-wrap:pretty}
a{color:var(--mint-deep);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--caramel-deep)}
strong,b{font-weight:650}
::selection{background:var(--mint);color:var(--ink)}

.lede{font-size:var(--s-1);line-height:1.5;color:var(--ink-soft);max-width:44ch}
.fine{font-size:var(--s--1);color:var(--ink-soft);line-height:1.55}

/* the eyebrow, closed with the whisker mark straight off their own logo */
.eyebrow{
  font-family:"Nunito",sans-serif;
  font-size:var(--s--1);font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 1.1rem;display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{
  content:"";flex:none;width:30px;height:14px;
  background:
    linear-gradient(currentColor,currentColor) 0 1px/30px 2.5px no-repeat,
    linear-gradient(currentColor,currentColor) 3px 6px/24px 2.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 11px/30px 2.5px no-repeat;
}

/* ---------- shell --------------------------------------------------------- */
.wrap{width:min(100% - (var(--pad) * 2),1240px);margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--pad) * 2),720px);margin-inline:auto}
section{padding-block:var(--section);position:relative}

.band-cream{background:var(--cream)}
.band-shell{background:var(--shell)}
.band-mint{background:var(--mint);color:var(--ink)}
.band-ink{background:var(--ink);color:var(--on-ink)}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--cream)}
.band-ink .lede{color:var(--on-ink)}
.band-ink .fine{color:var(--on-ink-soft)}
.band-ink .eyebrow{color:var(--mint)}
.band-ink a:not(.btn){color:var(--mint)}
.band-mint .lede,.band-mint .fine,.band-mint .note{color:var(--on-mint)}
.band-mint .eyebrow{color:var(--ink)}
.band-mint a:not(.btn){color:var(--ink)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:#fff;padding:.8rem 1.2rem;font-weight:700;
}
.skip:focus{left:0}

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--mint-deep);outline-offset:3px;
}
/* --mint-deep on #181818 measures 3.01:1 — a technical pass and far too close
   to it for a focus ring. On the dark surfaces it becomes their own mint,
   which is 9.94:1 on that black. Measured 9 Sep 2026. */
.band-ink :where(a,button):focus-visible,
.half-ink :where(a,button):focus-visible,
.foot :where(a,button):focus-visible,
.demobar a:focus-visible{outline-color:var(--mint)}

/* ---------- the demo notice ---------------------------------------------- */
.demobar{
  background:var(--ink);color:#F0F0F0;
  font-size:var(--s--1);line-height:1.5;
  padding:.7rem var(--pad);text-align:center;
}
.demobar b{color:var(--mint);font-weight:800}
.demobar a{color:#F0F0F0;text-underline-offset:.2em;display:inline-block;padding:.2rem 0}

/* ---------- nav: a cream bar closed with a 3px ink rule ------------------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--cream);
  border-bottom:var(--rule) solid var(--ink);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.65rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{flex:none;width:38px;height:38px}
.brand-name{
  font-family:"Nunito",sans-serif;font-weight:900;font-size:1.22rem;
  letter-spacing:-.03em;line-height:.9;text-transform:uppercase;display:block;
}
.brand-sub{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:3px;font-weight:700}
.nav ul{display:flex;gap:clamp(.85rem,2vw,1.9rem);list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--ink);text-decoration:none;
  font-family:"Nunito",sans-serif;font-size:var(--s--1);font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  padding:.45rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.05rem;height:3px;
  background:var(--ink);transition:right .3s var(--ease-out);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}

/* ---------- buttons: solid blocks, no shadow ------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:"Nunito",sans-serif;font-size:var(--s-0);font-weight:900;
  letter-spacing:-.01em;
  padding:.85em 1.5em;border:var(--rule) solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease-out),background-color .2s,color .2s;
}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}          /* 17.76:1 */
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-mint{background:var(--mint);color:var(--ink);border-color:var(--mint)}     /*  9.94:1 */
.btn-mint:hover{background:transparent;color:var(--mint)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.band-ink .btn-ghost{color:var(--cream);border-color:var(--cream)}
.band-ink .btn-ghost:hover{background:var(--cream);color:var(--ink)}
.band-mint .btn-ghost:hover{background:var(--ink);color:var(--mint)}
.btn:active{transform:translateY(2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}

/* ==========================================================================
   HERO — a mint panel, the way their logo sheet is a mint panel
   ========================================================================== */
.hero{padding-block:clamp(2.6rem,6vw,5rem)}
.hero h1{max-width:11ch}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:56rem){.hero-grid{grid-template-columns:1.12fr .88fr}}

.hero-meta{
  margin-top:clamp(1.8rem,3.5vw,2.8rem);
  border-top:var(--rule) solid var(--ink);
  display:grid;grid-template-columns:1fr;
}
.hero-meta span{
  border-bottom:1px solid rgba(24,24,24,.28);
  padding:.62rem 0;
  font-family:"Nunito",sans-serif;font-weight:800;
  font-size:var(--s--1);letter-spacing:.03em;text-transform:uppercase;
}
@media (min-width:40rem){
  .hero-meta{grid-template-columns:repeat(3,1fr);column-gap:1.5rem}
}

/* the print: a flat rectangle in a thick frame, turned a couple of degrees.
   Never a full-bleed photograph — the sources are 420-1205px. */
.print{
  background:var(--cream);padding:13px 13px 44px;
  border:2px solid var(--ink);
  justify-self:center;width:min(100%,380px);
  transform:rotate(-2deg);
  position:relative;margin:0;
}
.print img{display:block;width:100%;height:auto}
.print figcaption{
  position:absolute;left:15px;right:15px;bottom:13px;
  font-family:"Nunito",sans-serif;font-weight:800;font-size:var(--s--1);
  color:var(--ink);letter-spacing:-.01em;line-height:1.25;
}
.print-r{transform:rotate(1.6deg)}

/* ==========================================================================
   MARQUEE — the brand saying its own three facts, in its own face
   ========================================================================== */
.ticker{
  background:var(--ink);color:var(--mint);
  overflow:hidden;padding-block:.85rem;
}
.ticker-track{display:flex;width:max-content;animation:slide 40s linear infinite}
.ticker span{
  font-family:"Nunito",sans-serif;font-weight:900;
  font-size:clamp(1.1rem,2.5vw,1.9rem);letter-spacing:-.02em;
  text-transform:uppercase;white-space:nowrap;padding-inline:1.1rem;
  display:inline-flex;align-items:center;gap:2.2rem;
}
.ticker span::after{content:"";flex:none;width:10px;height:10px;background:var(--mint)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .ticker span[aria-hidden]{display:none}
}

/* ==========================================================================
   THE 20+ RULE BAND — a giant numeral and her own sentence
   ========================================================================== */
.claim{
  display:grid;gap:clamp(.6rem,3vw,3rem);grid-template-columns:1fr;align-items:center;
  border-block:var(--rule) solid var(--ink);padding-block:clamp(1.4rem,3.5vw,2.6rem);
}
@media (min-width:52rem){.claim{grid-template-columns:auto 1fr}}
.claim-num{
  font-family:"Nunito",sans-serif;font-weight:900;
  font-size:var(--s-5);line-height:.8;letter-spacing:-.06em;
  color:var(--ink);
}
.claim p{margin:0;font-size:var(--s-1);max-width:46ch;color:var(--on-mint)}
.claim b{font-weight:700}

/* ==========================================================================
   DOGS | CATS — one full-bleed split, not two cards. Equal billing on
   opposite grounds, which is exactly what their logo sheet does.
   ========================================================================== */
section.split{padding-block:0}
.split{display:grid;grid-template-columns:1fr}
@media (min-width:52rem){.split{grid-template-columns:1fr 1fr}}
.split > *{padding:clamp(2.2rem,5vw,4.5rem) var(--pad)}
.half-mint{background:var(--mint);color:var(--ink)}
.half-ink{background:var(--ink);color:var(--on-ink)}
.half-in{width:min(100%,34rem);margin-inline:auto}
.half-word{
  font-family:"Nunito",sans-serif;font-weight:900;
  font-size:var(--s-3);line-height:.9;letter-spacing:-.045em;
  text-transform:uppercase;margin:0 0 .45rem;
}
.half-mint .half-word{color:var(--ink)}
.half-ink .half-word{color:var(--mint)}
.half-mint p{color:var(--on-mint)}
.half-ink p{color:var(--on-ink)}
.half-list{list-style:none;margin:1.6rem 0 0;padding:0}
.half-list li{padding:.72rem 0;font-size:var(--s-0);display:flex;gap:.9rem;align-items:baseline}
.half-mint .half-list li{border-top:2px solid rgba(24,24,24,.3);color:var(--ink)}
.half-ink .half-list li{border-top:2px solid rgba(216,216,216,.28);color:var(--on-ink)}
.half-list li::before{content:"";flex:none;width:9px;height:9px;transform:translateY(-.05em)}
.half-mint .half-list li::before{background:var(--ink)}
.half-ink .half-list li::before{background:var(--mint)}

/* ==========================================================================
   THE PROMISE — her own sentence, at the biggest size on the site, and
   nothing else in the block. It does not need a card.
   ========================================================================== */
.promise{text-align:center;padding-block:clamp(3rem,7vw,6rem)}
.promise blockquote{
  margin:0 auto;font-family:"Nunito",sans-serif;font-weight:900;
  font-size:var(--s-4);line-height:1;letter-spacing:-.04em;color:var(--ink);
  max-width:15ch;text-wrap:balance;
}
.promise cite{
  display:block;margin-top:1.8rem;font-style:normal;
  font-family:"Nunito",sans-serif;font-size:var(--s--1);
  font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--on-mint);
}
/* the whisker mark, enlarged, as the rule above and below the quote */
.whiskers{
  width:84px;height:32px;margin:0 auto 2.4rem;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 3px/84px 5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 8px 14px/68px 5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 25px/84px 5px no-repeat;
}
.whiskers-b{margin:2.4rem auto 0}

/* ==========================================================================
   THE WALL — prints hung up and turned a degree or two. This is how a
   groomer's photographs actually exist, and it is the honest way to show
   snapshots that top out at 684px.
   ========================================================================== */
.wall{columns:2;column-gap:clamp(1rem,2.4vw,2rem)}
@media (min-width:44rem){.wall{columns:3}}
@media (min-width:72rem){.wall{columns:4}}
.wall .print{
  width:auto;margin:0 0 clamp(1.4rem,3vw,2.4rem);
  break-inside:avoid;transform:rotate(-1.1deg);
  padding:10px 10px 38px;
  transition:transform .4s var(--ease-out);
}
.wall .print:nth-child(2n){transform:rotate(1.4deg)}
.wall .print:nth-child(3n){transform:rotate(-.4deg)}
.wall .print:nth-child(5n){transform:rotate(2deg)}
.wall .print:hover{transform:rotate(0deg)}

/* ==========================================================================
   HOW IT GOES — three columns divided by rules. No boxes.
   ========================================================================== */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr}
.steps li{border-top:var(--rule) solid var(--ink);padding:1.5rem 0 1.9rem;position:relative}
/* a mint square sitting on the rule, the same marker the DOGS/CATS lists use */
.steps li::before{content:"";position:absolute;left:0;top:-9px;width:15px;height:15px;background:var(--mint)}
@media (min-width:48rem){
  .steps{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,3vw,3rem)}
  .steps li{padding-right:clamp(1rem,2vw,2rem)}
}
/* The numeral was mint on cream: 1.9:1. A -webkit-text-stroke is not a
   contrast fix — the computed colour is what a checker and a low-vision reader
   both get. Ink numeral, mint square marker above it instead. */
.steps b{
  display:block;font-family:"Nunito",sans-serif;font-weight:900;
  font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;letter-spacing:-.05em;
  color:var(--ink);margin-bottom:.2rem;
}
.steps h3{margin-bottom:.35em}
.steps p{margin:0;font-size:var(--s--1);color:var(--ink-soft);max-width:34ch}
.steps.stack{grid-template-columns:1fr}
@media (min-width:48rem){.steps.stack{grid-template-columns:1fr}.steps.stack li{padding-right:0}}

/* ==========================================================================
   THE PHONE BLOCK — the number is the biggest thing in it, because it is the
   only way to actually reach her.
   ========================================================================== */
.phone-huge{
  display:inline-block;
  font-family:"Nunito",sans-serif;font-weight:900;
  font-size:clamp(2.1rem,7.5vw,5.5rem);line-height:1.05;letter-spacing:-.045em;
  color:var(--mint);text-decoration:none;
  border-bottom:6px solid var(--mint);padding-bottom:.06em;
  transition:color .2s,border-color .2s;
}
.phone-huge:hover{color:var(--cream);border-color:var(--cream)}

/* ---------- contact list -------------------------------------------------- */
.contact{margin:0;padding:0;border-top:var(--rule) solid var(--mint)}
.contact > div{border-bottom:1px solid rgba(216,216,216,.3);padding:1.05rem 0}
.contact dt{
  font-family:"Nunito",sans-serif;font-size:var(--s--1);font-weight:900;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:.3rem;
}
.contact dd{margin:0;font-size:var(--s-1);font-family:"Nunito",sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--cream)}
.contact dd.placeholder{font-family:"Work Sans",sans-serif;font-weight:400;font-size:var(--s--1);color:var(--on-ink-soft);font-style:italic;line-height:1.55}
.contact dd a{display:inline-block;padding:.15rem 0}

/* ---------- the demo form: it sends nothing and says so ------------------- */
.formnote{
  display:flex;gap:.9rem;align-items:flex-start;
  border:var(--rule) solid var(--rose-deep);
  padding:1.05rem 1.2rem;margin:0 0 2rem;background:#FBF0EE;
}
.formnote svg{flex:none;margin-top:.15rem}
.formnote p{margin:0;font-size:var(--s--1);color:var(--ink);max-width:none}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:"Nunito",sans-serif;font-size:var(--s--1);font-weight:800;letter-spacing:.02em}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--s-0);color:var(--ink);
  background:var(--white);border:2px solid var(--ink);border-radius:0;
  padding:.7rem .85rem;width:100%;
}
.field textarea{min-height:7.5rem;resize:vertical}
.field input:disabled,.field textarea:disabled,.field select:disabled{
  opacity:1;color:#4A4A4A;background:#EDEBE7;border-color:#767676;cursor:not-allowed;
}
.field-row{display:grid;gap:0 1.1rem;grid-template-columns:1fr}
@media (min-width:40rem){.field-row{grid-template-columns:1fr 1fr}}

/* ---------- FAQ: ruled, not boxed ---------------------------------------- */
.faq{max-width:var(--measure);border-top:var(--rule) solid var(--ink)}
.faq details{border-bottom:2px solid rgba(24,24,24,.22)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.2rem 2.6rem 1.2rem 0;position:relative;
  font-family:"Nunito",sans-serif;font-weight:900;font-size:var(--s-1);
  line-height:1.2;letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
/* one element, two gradient bars, so the plus is aligned on its own centre
   instead of on two hand-tuned offsets that did not agree. */
.faq summary::after{
  content:"";position:absolute;right:2px;top:1.3rem;width:19px;height:19px;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 8px/19px 3px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 8px 0/3px 19px no-repeat;
}
.faq details[open] summary::after{
  background:linear-gradient(var(--ink),var(--ink)) 0 8px/19px 3px no-repeat;
}
.faq details > div{padding:0 0 1.5rem}
.faq p:last-child{margin-bottom:0}

/* ---------- an editorial text column ------------------------------------- */
.h-sub{font-size:var(--s-2)}
.rule-head{border-top:var(--rule) solid var(--ink);padding-top:1.1rem;margin-top:2.8rem}
.rule-head-first{margin-top:0}

/* ---------- footer -------------------------------------------------------- */
.foot{background:var(--ink);color:var(--on-ink-soft);padding-block:clamp(3rem,6vw,4.5rem) 2rem;border-top:6px solid var(--mint)}
.foot h2,.foot h3{color:var(--cream)}
.foot a{color:var(--mint)}
.foot a:hover{color:var(--cream)}
.foot-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));margin-bottom:2.6rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.foot ul a{display:inline-block;padding:.3rem 0;font-family:"Nunito",sans-serif;font-weight:800}
.foot .ft{font-family:"Nunito",sans-serif;font-size:var(--s--1);letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin:0 0 1rem;font-weight:900}
.foot-brand .brand-name{color:var(--cream);font-size:1.9rem}
/* --ink-soft is a LIGHT-GROUND colour: on this ink it is about 1.9:1 and fails
   outright. Every muted token inside .foot is re-stated. */
.foot .fine,.foot .lede,.foot p.fine{color:var(--on-ink-soft)}
.foot-brand .brand-sub{color:#A8A8A8}

.disclosure{
  border-top:2px solid rgba(216,216,216,.25);
  border-bottom:2px solid rgba(216,216,216,.25);
  padding:1.5rem 0;margin-bottom:1.4rem;
}
.disclosure p{font-size:var(--s--1);color:#DCDCDC;margin:0 0 .6rem;max-width:78ch;line-height:1.6}
.disclosure p:last-child{margin-bottom:0}
.disclosure b{color:var(--mint);font-weight:700}
.foot-base{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:space-between;font-size:var(--s--1);color:var(--on-ink-soft)}
.foot-base a{color:var(--on-ink-soft);display:inline-block;padding:.25rem 0}

/* ---------- motion -------------------------------------------------------- */
.rise{opacity:0;transform:translateY(16px)}
.rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rise:nth-child(2){transition-delay:.05s}
.rise:nth-child(3){transition-delay:.1s}
.rise:nth-child(4){transition-delay:.15s}
.rise:nth-child(5){transition-delay:.2s}

/* ---------- utilities — the CSP is style-src 'self', so no inline styles --- */
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}
.mi-auto{margin-inline:auto}
.tac{text-align:center}
.center-x{justify-content:center}
.al-start{align-items:start}
.mw-14{max-width:14ch}
.mw-18{max-width:18ch}
.pt-tight{padding-top:clamp(1.8rem,4vw,2.8rem)}
.pb-tight{padding-bottom:clamp(1.8rem,4vw,2.8rem)}
.note{margin-top:1.4rem;max-width:58ch}

/* ---------- small phones -------------------------------------------------- */
@media (max-width:30rem){
  .nav .brand-sub{display:none}
  .nav-in{flex-direction:column;align-items:flex-start;gap:.4rem;padding-block:.55rem}
  .nav ul{gap:.8rem}
  .nav a{font-size:.78rem}
  .brand-name{font-size:1.05rem}
  .print{width:min(100%,300px)}
}

/* ---------- tap targets: measured, not assumed ---------------------------- */
@media (pointer:coarse){
  .nav a{padding:.72rem 0}
  .foot ul a{padding:.55rem 0}
  .demobar a{padding:.4rem 0}
  .foot-base a{padding:.45rem 0}
  .faq summary{padding-block:1.4rem}
}

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

@media print{
  .nav,.demobar,.ticker{display:none}
  body{background:#fff;color:#000}
  .rise{opacity:1;transform:none}
  .print{transform:none}
}