/* Self-hosted so no visitor is sent to Google and the text paints sooner.
 * Both families are variable, one file each, Latin only.
 * Inter and Playfair Display are SIL Open Font License 1.1; see fonts/LICENCE.txt. */
@font-face{font-family:"Inter";src:url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/playfair-latin-var.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
/* Dantia, shared styles for all pages.
   Palette and type come from ../marca-dantia.md. The three on-forest colours that fail
   WCAG on screen are lifted here for contrast: see --band-* tokens. */

:root{
  --paper:#FAF7F0; --sand:#F2E6D6; --mint:#E4EDE1;
  --forest:#1F4622; --forest-d:#16331A;
  --clay:#A8482A; --clay-lt:#CF6B3F;
  --ink:#1C1913; --soft:#6A6252; --hair:#E2DACB;
  --onforest:#F3F1E7; --onforest-soft:#C8D6C3; --onforest-dim:#9BB395;
  --band-kicker:#99B693; --band-accent:#D97F55; --band-accent-text:#E09C7C;
  --disp:"Playfair Display","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1120px; --gut:clamp(1.25rem,4vw,3.5rem);
  /* knobs the tweak panel drives, see assets/tweak.js */
  --type-scale:1; --body-size:17px; --body-lh:1.6; --space-scale:1;
  --radius:3px; --hero-min:92vh; --field-opacity:.4;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--body-size);line-height:var(--body-lh);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:calc(var(--gut) * var(--space-scale));padding-right:calc(var(--gut) * var(--space-scale))}

h1{font-family:var(--disp);font-weight:800;font-size:calc(clamp(2.6rem,.9rem + 6vw,5.2rem) * var(--type-scale));
  line-height:.92;letter-spacing:-.032em;margin:0}
h2{font-family:var(--disp);font-weight:700;font-size:calc(clamp(1.7rem,1.1rem + 2.4vw,2.5rem) * var(--type-scale));
  line-height:1.08;letter-spacing:-.018em;margin:0}
h3{font-family:var(--disp);font-weight:700;font-size:calc(1.12rem * var(--type-scale));line-height:1.2;margin:0 0 .35rem}
p{margin:0;color:var(--soft)}
a{color:var(--forest)}
.kicker{font-size:.69rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin:0 0 .9rem}
.lede{font-size:clamp(1.02rem,.95rem + .35vw,1.19rem);line-height:1.5;color:#3B362C;max-width:46ch}
.fine{font-size:.86rem;color:var(--soft)}
.sec{padding:calc(clamp(2.5rem,6vw,4.25rem) * var(--space-scale)) 0}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(250,247,240,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);transition:background-color .28s ease,border-color .28s ease}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-right:auto}
.mark{width:30px;height:30px;color:var(--forest);flex:none}
.bname{font-family:var(--disp);font-size:20px;font-weight:700;line-height:1;letter-spacing:-.01em;display:block}
/* the line Camilo wants read: bigger, bolder and tracked wider than a byline */
.bline{font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--clay);
  margin-top:5px;display:block}
.nav{display:flex;gap:1.5rem}
.nav a{color:var(--soft);text-decoration:none;font-size:.9rem;font-weight:500;padding:4px 0;
  border-bottom:2px solid transparent;transition:color .16s ease,border-color .16s ease}
.nav a:hover{color:var(--ink);border-bottom-color:var(--clay)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--forest)}
@media (max-width:880px){.nav{display:none}}

.top.onhero{background:transparent;border-bottom-color:rgba(237,239,232,.14)}
.top.onhero .bname{color:var(--onforest)}
.top.onhero .bline{color:var(--band-kicker)}
.top.onhero .mark{color:#8FB588}
.top.onhero .nav a{color:var(--onforest-soft)}
.top.onhero .nav a:hover,.top.onhero .nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--band-accent)}
.top.onhero .btn--primary{background:var(--onforest);color:var(--forest)}
.top.onhero .btn--primary:hover{background:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.35rem;
  border:1px solid transparent;font-family:var(--sans);font-size:.95rem;font-weight:600;
  text-decoration:none;cursor:pointer;border-radius:var(--radius);
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
.btn--primary{background:var(--forest);color:var(--onforest)}
.btn--primary:hover{background:var(--forest-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(31,70,34,.2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn--ghost:hover{border-color:var(--forest);transform:translateY(-1px)}
.btn--light{background:var(--onforest);color:var(--forest)}
.btn--light:hover{background:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.btn[disabled]{opacity:.65;cursor:default;transform:none}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 0}

/* page header for inner pages */
.phead{background:var(--sand);padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(2rem,5vw,3rem);
  border-bottom:1px solid var(--hair)}
.phead h1{max-width:16ch}
.phead .lede{margin-top:1rem}

/* chips, the trade picker */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.chip{appearance:none;background:rgba(22,51,26,.7);border:1px solid rgba(237,239,232,.34);color:var(--onforest-soft);
  border-radius:999px;padding:.55rem 1rem;min-height:44px;font:inherit;font-size:.92rem;font-weight:500;
  cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.chip:hover{border-color:var(--onforest);color:var(--onforest);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--onforest);border-color:var(--onforest);color:var(--forest);font-weight:600}
.chip:focus-visible{outline:2px solid var(--band-accent);outline-offset:3px}
.chips--light .chip{border-color:var(--hair);color:var(--soft)}
.chips--light .chip:hover{border-color:var(--forest);color:var(--ink)}
.chips--light .chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--onforest)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:1.75rem}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--hair);border-radius:calc(var(--radius) + 1px);
  padding:1.15rem 1.25rem;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.card:hover{border-color:var(--forest);transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,25,19,.07)}
.card h3{color:var(--ink);font-family:var(--sans);font-size:1rem;font-weight:700}
.card p{color:var(--soft);font-size:.93rem;line-height:1.45}
.card .cnum{font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--clay);
  display:block;margin-bottom:.5rem}
/* the dark variant only exists over the hero */
.hero .card{background:rgba(22,51,26,.88);border-color:rgba(237,239,232,.2)}
.hero .card:hover{background:rgba(22,51,26,.95);border-color:rgba(237,239,232,.38);box-shadow:none}
.hero .card h3{color:var(--onforest)}
.hero .card p{color:var(--onforest-soft)}
.hero .card .cnum{color:var(--band-accent-text)}

/* tasks, the six blocks */
.taskgrid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,3vw,2.5rem);
  row-gap:clamp(1.75rem,3vw,2.5rem);margin-top:2rem}
@media (max-width:860px){.taskgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.taskgrid{grid-template-columns:1fr}}
.task{appearance:none;background:transparent;border:0;border-top:2px solid var(--hair);
  padding:1.1rem 0 0;text-align:left;font:inherit;cursor:pointer;width:100%;
  transition:border-color .2s ease}
.task:hover,.task[aria-expanded="true"]{border-top-color:var(--forest)}
.task:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.task .tnum{font-size:.69rem;font-weight:700;letter-spacing:.14em;color:var(--clay);display:block;margin-bottom:.6rem}
.ico{display:block;width:31px;height:31px;margin-bottom:.7rem}
.ico svg{width:31px;height:31px;display:block}
.task h3{color:var(--ink)}
.task p{font-size:.95rem;line-height:1.5}
.task .more{display:block;margin-top:.7rem;font-size:.84rem;font-weight:600;color:var(--forest)}

/* detail panel revealed by a task */
.panel{margin-top:1.5rem;background:var(--mint);border-radius:4px;padding:clamp(1.25rem,3vw,2rem)}
.panel[hidden]{display:none}
.panelgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem);margin-top:1rem}
@media (max-width:700px){.panelgrid{grid-template-columns:1fr}}
.panelgrid h4{margin:0 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.panelgrid .before h4{color:var(--clay)}
.panelgrid .after h4{color:var(--forest)}
.panelgrid ul{margin:0;padding-left:1.1rem}
.panelgrid li{margin-bottom:.4rem;font-size:.95rem;line-height:1.45;color:#3B362C}

/* steps */
.steprow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.1rem}
@media (max-width:760px){.steprow{grid-template-columns:1fr;gap:2.25rem}}
.step{position:relative;padding-top:1.25rem;border-top:2px solid var(--forest)}
.sdot{position:absolute;top:-13px;left:0;width:26px;height:26px;border-radius:50%;background:var(--forest);
  color:var(--onforest);font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.step p{font-size:.95rem;line-height:1.5;color:#4E5B4C}

/* forms */
.form{display:grid;gap:.85rem;max-width:26rem}
.field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:.3rem}
.input{width:100%;min-height:48px;padding:.6rem .75rem;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  transition:border-color .16s ease,box-shadow .16s ease}
.input:hover{border-color:#cfc6b4}
.input:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(31,70,34,.17)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.note{color:var(--clay);font-weight:600}

/* closing band and footer */
.cta{background:var(--forest);color:var(--onforest);padding:clamp(2rem,5vw,2.75rem) 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.cta h2{color:var(--onforest);max-width:23ch}
.cta p{color:var(--onforest-soft);margin-top:.7rem;max-width:44ch;font-size:.97rem}
.cta .mark{color:#7FA278}
.cta .bname{color:var(--onforest)}
.cta .bline{color:var(--band-kicker)}
.ctaR{text-align:right;flex:none}
.mail{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,1rem + 1.2vw,1.7rem);
  color:var(--onforest);letter-spacing:-.01em;text-decoration:none;display:inline-block}
.mail:hover{text-decoration:underline}
.ctaR small{display:block;font-size:.78rem;color:var(--onforest-dim);margin-top:.5rem}
/* The footer signs the page off rather than trailing away: the same lock-up as the
   header, with the line spelled out under the name, and the links set against it. */
.foot{padding:clamp(1.9rem,4vw,2.6rem) 0 clamp(2rem,4vw,2.8rem);font-size:.82rem;color:var(--soft)}
.foot .wrap{display:flex;gap:1.4rem 2rem;flex-wrap:wrap;justify-content:space-between;
  align-items:center}
.footbrand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.footbrand .mark{width:30px;height:30px;color:var(--forest)}
.footbrand .bname{font-size:19px}
/* in the footer there is room for it at every width, unlike the header */
.footbrand .bline{display:block;font-size:8.5px;letter-spacing:.16em}
.footnav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;justify-content:flex-end}
.footnav a{color:var(--soft)}
.footnav a:hover{color:var(--ink)}
.footnav .footmail{color:var(--clay)}
@media (max-width:620px){
  .foot .wrap{align-items:flex-start}
  .footnav{justify-content:flex-start;gap:.4rem 1.1rem}
}

/* reveal */
.js [data-reveal]{opacity:0;transform:translate3d(0,var(--reveal-rise,14px),0);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
             transform .55s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}
.skip{position:absolute;left:-9999px;background:var(--forest);color:#fff;padding:.6rem 1rem;border-radius:3px}
.skip:focus{left:1rem;top:1rem;z-index:50}

/* ---------- landing hero ---------- */
.hero{position:relative;background:var(--forest);color:var(--onforest);overflow:hidden;
  min-height:min(var(--hero-min),56rem);display:flex;flex-direction:column;justify-content:center;
  /* pulled up so the dark hero runs behind the sticky header, which is what makes the
     transparent header legible at the top of the page */
  margin-top:calc(-1 * var(--header-h, 66px));
  padding:calc(var(--header-h, 66px) + clamp(2rem,8vh,4.5rem)) 0 clamp(2.5rem,6vh,4rem)}
.heroField{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr);
  grid-auto-rows:min-content;align-content:center;gap:clamp(4px,.75vw,11px);
  padding:clamp(.75rem,2.5vw,2.25rem);opacity:var(--field-opacity);pointer-events:none;overflow:hidden}
.heroField i{aspect-ratio:1}
.heroField i{border-radius:3px;background:rgba(237,239,232,.07);
  transition:background-color .5s cubic-bezier(.22,.61,.36,1) var(--cell-delay,0ms)}
.heroField i.adm{background:rgba(217,127,85,.55)}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1{max-width:15ch;color:var(--onforest);text-shadow:0 2px 18px rgba(22,51,26,.55)}
.hero .lede{color:#D7E3D3;max-width:38ch;margin-top:1.25rem;text-shadow:0 1px 10px rgba(22,51,26,.8)}
.pickline{font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#AFC7A9;margin:2rem 0 0;text-shadow:0 1px 10px rgba(22,51,26,.85)}
.heroend{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  margin-top:clamp(1.75rem,4vh,2.5rem)}
.badge{flex:none;width:112px;height:112px;border-radius:50%;border:1px solid rgba(237,239,232,.38);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  color:var(--onforest);text-decoration:none;font-size:.71rem;line-height:1.25;text-align:center;
  letter-spacing:.04em;transition:background-color .2s ease,transform .2s ease}
.badge:hover{background:rgba(237,239,232,.1);transform:translateY(-2px)}
.badge:focus-visible{outline:2px solid var(--band-accent);outline-offset:3px}
.badge span:last-child{font-size:1.05rem;line-height:1}
@media (max-width:720px){.badge{display:none}}

/* a detail panel moved into the grid sits full width, under the row clicked */
.taskgrid .panel{grid-column:1 / -1;margin-top:.25rem}
/* with no JavaScript the buttons cannot open anything, so show every panel */
html:not(.js) .panel[hidden]{display:block}
html:not(.js) .task .more{display:none}

/* ---------- small screens: keep every page reachable, no hamburger ---------- */
@media (max-width:880px){
  .top .wrap{flex-wrap:wrap;gap:.4rem 1rem;padding-top:.6rem;padding-bottom:.6rem;min-height:0}
  .nav{display:flex;order:3;width:100%;gap:1.1rem;overflow-x:auto;padding-bottom:.15rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:.86rem;white-space:nowrap}
  .brand{margin-right:auto}
  .bline{display:none}
}
@media (max-width:420px){
  .top .btn{min-height:44px;padding:0 .9rem;font-size:.88rem}
  .bname{font-size:18px}
}

/* ===================== design pass, 2026-10-13 ===================== */

/* cross-page transitions. Chrome and Edge honour this; others simply navigate. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .32s cubic-bezier(0,0,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* the badge, now a deliberate object: a ring that turns, an arrow that leans */
.badge{position:relative;width:132px;height:132px;border:0;background:transparent;gap:.15rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.68rem}
.badge::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(237,239,232,.45);animation:ring 26s linear infinite}
.badge::after{content:"";position:absolute;inset:7px;border-radius:50%;
  background:rgba(237,239,232,.06);transition:background-color .25s ease,transform .25s ease}
.badge:hover::after{background:rgba(237,239,232,.14);transform:scale(1.04)}
.badge:hover::before{border-color:rgba(217,127,85,.85)}
/* a flex child in a column sizes itself to its longest line and will happily run past
   the ring, so it is held inside the circle and wraps instead */
.badge span{position:relative;z-index:1;max-width:80%}
.badge .arrow{font-size:1.35rem;line-height:1;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.badge:hover .arrow{transform:translateX(4px)}
@keyframes ring{to{transform:rotate(360deg)}}

/* primary buttons get an arrow that moves on hover */
.btn .ar{display:inline-block;margin-left:.5rem;transition:transform .2s cubic-bezier(.22,.61,.36,1)}
.btn:hover .ar{transform:translateX(4px)}

/* inner page headers carry the brand motif instead of a flat block */
.phead{position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;right:-4rem;top:-3rem;width:26rem;height:26rem;
  background:
    repeating-linear-gradient(90deg,rgba(168,72,42,.11) 0 18px,transparent 18px 26px),
    repeating-linear-gradient(0deg,rgba(168,72,42,.11) 0 18px,transparent 18px 26px);
  transform:rotate(-8deg);pointer-events:none}
.phead .wrap{position:relative;z-index:1}
.phead h1{font-size:calc(clamp(2.2rem,1.1rem + 3.8vw,3.9rem) * var(--type-scale))}

/* the six blocks: a chevron that states what will happen */
.task{position:relative;padding-right:1.75rem}
.task .more{display:inline-flex;align-items:center;gap:.4rem}
.task .more::after{content:"\203A";font-size:1.15rem;line-height:1;
  transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.task[aria-expanded="true"] .more::after{transform:rotate(90deg)}
.task[aria-expanded="true"] .more{color:var(--clay)}
.task:hover{background:linear-gradient(to bottom,rgba(31,70,34,.04),transparent 60%)}
.task:hover .ico{transform:translateY(-2px)}
.ico{transition:transform .22s ease}

/* panels fade and lift in rather than appearing */
.panel{opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.panel.is-open{opacity:1;transform:none}
.panel h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);margin-bottom:.25rem}

/* steps: the rule above each one draws itself in */
.step::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--clay);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.step.is-in::before,.js .step[data-reveal].is-in::before{transform:scaleX(1)}

/* quiet link underline that grows */
.foot a,.panelgrid a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .25s ease}
.foot a:hover,.panelgrid a:hover{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .badge::before,.badge::after{animation:none}
  .badge.is-floating{animation:none}
  .panel{opacity:1;transform:none}
  .step::before{transform:scaleX(1)}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- the mark draws itself, once, on load ---------- */
/* circle circumference at r=17 is about 107; the check path is about 24 long */
/* The drawn state is the default. The animation only plays the drawing in, so if it
   never runs (a tab that is not painting) the mark is simply there, not invisible. */
.brand .mark circle{stroke-dasharray:107;stroke-dashoffset:0;
  animation:draw-ring .85s cubic-bezier(.22,.61,.36,1) .15s both}
.brand .mark path{stroke-dasharray:24;stroke-dashoffset:0;
  animation:draw-check .45s cubic-bezier(.22,.61,.36,1) .6s both}
@keyframes draw-ring{from{stroke-dashoffset:107}to{stroke-dashoffset:0}}
@keyframes draw-check{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

/* ---------- real icons instead of text glyphs ---------- */
.i{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none}
.sdot .i{width:.78em;height:.78em;vertical-align:0}
.task .more::after{content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}

@media (prefers-reduced-motion:reduce){
  .brand .mark circle,.brand .mark path{animation:none;stroke-dashoffset:0}
}

/* ---------- the inline demo: one email, handled ---------- */
.demo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:start;margin-top:1.75rem}
@media (max-width:820px){.demo{grid-template-columns:1fr}}

.demo-steps{list-style:none;margin:0;padding:0;position:relative}
.demo-steps::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;
  background:var(--hair)}
.demo-rail{position:absolute;left:11px;top:14px;width:2px;background:var(--forest);
  height:0;transition:height .6s cubic-bezier(.22,.61,.36,1)}
.demo-step{position:relative;display:flex;gap:.9rem;align-items:flex-start;padding:.55rem 0}
.demo-dot{position:relative;z-index:1;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--paper);border:2px solid var(--hair);display:flex;align-items:center;
  justify-content:center;transition:border-color .3s ease,background-color .3s ease}
.demo-dot svg{width:12px;height:12px;opacity:0;transform:scale(.6);
  transition:opacity .25s ease,transform .25s cubic-bezier(.22,.61,.36,1)}
.demo-step.is-on .demo-dot{border-color:var(--clay)}
.demo-step.is-done .demo-dot{border-color:var(--forest);background:var(--forest);color:var(--onforest)}
.demo-step.is-done .demo-dot svg{opacity:1;transform:scale(1)}
.demo-when{flex:none;width:3.2rem;font-size:.78rem;color:var(--soft);
  font-variant-numeric:tabular-nums;padding-top:.2rem}
.demo-what{font-size:.97rem;line-height:1.4;color:var(--soft);transition:color .3s ease}
.demo-step.is-on .demo-what,.demo-step.is-done .demo-what{color:var(--ink)}
.demo-step.is-on .demo-what b{color:var(--clay)}
.demo-what b{font-weight:600}

.demo-stage{background:var(--mint);border-radius:calc(var(--radius) + 1px);
  padding:clamp(1rem,2.5vw,1.4rem);min-height:13rem;position:relative;overflow:hidden}
.demo-card{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);
  padding:.7rem .8rem;font-size:.86rem;line-height:1.35;color:var(--ink);
  box-shadow:0 6px 16px rgba(28,25,19,.07);opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.demo-card.show{opacity:1;transform:none}
.demo-card + .demo-card{margin-top:.6rem}
.demo-card .from{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);margin-bottom:.25rem}
.demo-card .files{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap}
.demo-chip{font-size:.72rem;padding:.18rem .45rem;border-radius:3px;background:var(--sand);
  color:var(--soft)}
.demo-card--filed{border-left:3px solid var(--forest)}
.demo-card--sent{border-left:3px solid var(--clay)}
.demo-cap{margin-top:.9rem}

/* ---------- the opening on the landing page ---------- */
/* The cover exists only while <html> carries .intro, which the head script adds on
   the first page of a visit, with motion allowed. No script, no cover.
   The lock-up inside is the header's own markup at the header's own size, centred
   and scaled up. The animation is one transform, measured at the moment it runs,
   that drops it onto the header logo where it belongs. */
.intro{display:none}
.intro .bname{color:var(--onforest)}
.intro .bline{color:var(--band-kicker)}
.intro .mark{color:#8FB588}
html.intro .intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--forest);transition:background-color .85s cubic-bezier(.65,0,.35,1);
  /* if the script never gets to finish, uncover the page anyway */
  animation:intro-failsafe 0s linear 4.4s forwards}
html.intro .intro.is-lifting{background-color:transparent;pointer-events:none}
html.intro .intro-lock{--intro-grow:3.2;margin:0;transform:scale(var(--intro-grow));
  will-change:transform}
html.intro .intro.is-lifting .intro-lock{transition:transform .95s cubic-bezier(.62,0,.2,1)}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden}}
@media (max-width:880px){html.intro .intro-lock{--intro-grow:2.6}}
@media (max-width:420px){html.intro .intro-lock{--intro-grow:2.1}}
@media (prefers-reduced-motion:reduce){html.intro .intro{display:none}}

/* ---------- the next-page badge, louder, and on light pages too ---------- */
/* Every page points at the one after it: Home to What we do, What we do to How it
   starts, How it starts to Contact. A filled disc instead of an outline, a clay ring
   that turns, and a slow pulse, so it reads as a thing to press. */
.badge{width:140px;height:140px;gap:.2rem;line-height:1.2}
.badge .beyebrow{font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#C3D7BD}
.badge .bname,.badge span:nth-child(2){font-weight:600;font-size:.82rem;letter-spacing:.01em}
/* the ring turns and pulses; the disc lifts off the background with a shadow */
.badge::before{border-color:rgba(217,127,85,.8);
  animation:ring 26s linear infinite,badge-pulse 3.6s cubic-bezier(.22,.61,.36,1) 1.4s infinite}
/* a forest veil under the light wash, so the hero grid does not show through the disc
   as a square patch, and the label keeps its contrast wherever a cell lands */
.badge::after{background:linear-gradient(rgba(237,239,232,.14),rgba(237,239,232,.14)),
  rgba(22,51,26,.62);border:1px solid rgba(237,239,232,.2);
  box-shadow:0 14px 30px rgba(8,20,10,.32)}
.badge:hover{color:#fff}
.badge:hover::after{background:rgba(217,127,85,.92);border-color:transparent;transform:scale(1.05)}
@keyframes badge-pulse{
  0%{box-shadow:0 0 0 0 rgba(217,127,85,.42)}
  65%{box-shadow:0 0 0 17px rgba(217,127,85,0)}
  100%{box-shadow:0 0 0 0 rgba(217,127,85,0)}}

/* the same badge on the sand page headers */
.badge--ink{color:var(--ink)}
.badge--ink .beyebrow{color:var(--clay)}
.badge--ink::before{border-color:rgba(168,72,42,.6)}
.badge--ink::after{background:rgba(255,255,255,.7);border-color:rgba(28,25,19,.08);
  box-shadow:0 12px 26px rgba(28,25,19,.13)}
.badge--ink:hover{color:var(--paper)}
.badge--ink:hover::after{background:var(--clay);border-color:transparent}

/* a page header that carries one sits it bottom right, opposite the title */
.phead .wrap:has(.badge){display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem 2.5rem;flex-wrap:wrap}
.pheadtext{flex:1 1 32rem;min-width:0}
.badge-slot{flex:none;width:140px;height:140px}
/* when the header is too narrow to hold both on one line, it stays on the right */
.phead .wrap:has(.badge-slot) .badge-slot{margin-left:auto}
/* the decorative circle would sit right behind it, so it steps aside */
.phead:has(.badge)::after{right:-9rem}

/* On a phone a 140 px circle is too much, but the next page should still be there,
   so it becomes a pill: same words, same link, laid on its side. */
@media (max-width:720px){
  .badge{display:inline-flex;width:auto;height:auto;flex-direction:row;align-items:center;
    gap:.55rem;padding:.65rem 1.1rem;border-radius:999px;margin-top:1.25rem;line-height:1.1}
  .badge::before{display:none}
  .badge::after{inset:0;border-radius:999px;box-shadow:none}
  .badge .arrow{font-size:1.1rem}
  .badge-slot{width:auto;height:auto}
  .phead .wrap:has(.badge-slot){display:block}
  .phead .wrap:has(.badge-slot) .badge-slot{margin-left:0}
}

/* ---------- the demo and the six blocks, joined up ---------- */
/* Each step in the example names the block that does the work and opens it, so the
   animation stops being a thing on its own and becomes the way into what follows. */
.demo-go{display:flex;width:fit-content;align-items:center;gap:.25rem;margin-top:.4rem;padding:0;
  border:0;background:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;
  color:var(--clay);text-align:left;line-height:1.25;
  border-bottom:1px solid rgba(168,72,42,.3);transition:color .18s ease,border-color .18s ease}
.demo-go .i{width:.85em;height:.85em;transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.demo-go:hover{color:var(--forest);border-bottom-color:var(--forest)}
.demo-go:hover .i{transform:translateX(2px)}
.demo-go:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
/* The tags stay put rather than fading with the animation. They are navigation, and
   a link that disappears as you reach for it, every time the loop restarts, is worse
   than one that simply sits there. */
.demo-what{display:block}

/* a block the example sent you to, so you can see what you just opened */
.task.is-from-demo{box-shadow:0 0 0 2px rgba(168,72,42,.35)}

/* one example swapped for the next, behind a short fade so nothing jumps */
.demo{transition:opacity .3s ease}
.demo.is-turning{opacity:0}
#demo-title{transition:opacity .3s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
#demo-title.is-turning{opacity:0}

.sechead{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.sechead h2{margin-top:.5rem;max-width:22ch}

/* ---------- the badge follows you down the page ---------- */
/* Once its place has scrolled past the header it docks in the corner, so the next
   page is always one press away. The slot above keeps its size, so nothing shifts.
   One look while it floats, dark with a clay ring, because it can end up over the
   paper sections, the sand headers or the forest bands. */
.badge.is-floating{position:fixed;z-index:40;width:118px;height:118px;
  right:clamp(10px,1.6vw,22px);top:50%;transform:translateY(-50%);color:var(--onforest);
  animation:badge-dock .34s cubic-bezier(.22,.61,.36,1) both}
/* the circle is smaller than the one in the page, so the label is too, or a long one
   like "how it starts" runs past the ring */
.badge.is-floating .beyebrow{font-size:.52rem}
.badge.is-floating span:nth-child(2){font-size:.73rem;letter-spacing:.04em}
.badge.is-floating .arrow{font-size:1.15rem}
.badge.is-floating .beyebrow{color:#C3D7BD}
.badge.is-floating::before{border-color:rgba(217,127,85,.9)}
.badge.is-floating::after{background:var(--forest);border-color:rgba(237,239,232,.22);
  box-shadow:0 18px 38px rgba(8,20,10,.34)}
.badge.is-floating:hover{color:#fff}
.badge.is-floating:hover::after{background:var(--clay);border-color:transparent}
@keyframes badge-dock{
  from{opacity:0;transform:translateY(-50%) scale(.86)}
  to{opacity:1;transform:translateY(-50%) scale(1)}}
/* it is a convenience, not a layer over the page: never on a phone, never when printing */
@media (max-width:720px){.badge.is-floating{position:static;width:auto;height:auto;
  transform:none;animation:none}}
@media print{.badge.is-floating{display:none}}

/* ---------- the headline ---------- */
/* The words arrive out of focus and sharpen into place. Rise and fade alone looked
   like every other site; the blur is what makes it read as arriving. No clipping
   mask, because the headline carries a text shadow a mask box would cut. */
.h1-split .w{display:inline-block;opacity:0;filter:blur(14px);
  transform:translateY(.42em) scale(.965);will-change:filter,transform,opacity;
  transition:opacity .6s ease,filter .75s ease,
    transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--wd,0ms)}
.h1-split.is-lit .w{opacity:1;filter:blur(0);transform:none}
/* once they have landed, stop being a filtered layer and go back to being text */
.h1-split.is-settled .w{filter:none;will-change:auto;transition:none}

/* the clay word works through the jobs, out through the top, in from below */
/* nowrap so a two word job never breaks inside its own box, and so the width it is
   measured at is always the width it wants */
.hero h1 .swap{display:inline-block;white-space:nowrap;color:var(--band-accent);
  transition:opacity .28s ease,filter .28s ease,transform .28s ease,
    width .34s cubic-bezier(.22,.61,.36,1)}
.hero h1 .swap.is-out{opacity:0;filter:blur(9px);transform:translateY(-.24em)}
.hero h1 .swap.is-under{opacity:0;filter:blur(9px);transform:translateY(.24em)}

@media (prefers-reduced-motion:reduce){
  .h1-split .w{opacity:1;filter:none;transform:none;transition:none}
  .hero h1 .swap{transition:none}
}