/* waynegibbins.com design system
   Lives at site/assets/site.css. Relative URLs below resolve against that folder:
   fonts/ and motifs/ sit next to this file. See design-tokens.md for the reasoning
   behind each token and NOTES.md for component markup. */

/* ---------------------------------------------------------------- fonts */
/* Inter: subset to Latin, weight axis 400-700 (OFL, no reserved name).
   Source Serif 4: Adobe's woff2 files, unmodified, because "Source" is a reserved
   font name under the OFL and subsetting would count as a modified version. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:400 600;font-display:swap;
  src:url("fonts/inter-italic-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/SourceSerif4Subhead-Semibold.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/SourceSerif4-Regular.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/SourceSerif4-It.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* metric-matched fallbacks, measured from the font files, so the swap doesn't shift layout */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:106.79%;ascent-override:90.72%;descent-override:22.59%;line-gap-override:0%}
@font-face{font-family:"Serif Fallback";src:local("Georgia");size-adjust:100%;ascent-override:103.5%;descent-override:33.5%;line-gap-override:0%}

/* --------------------------------------------------------------- tokens */
:root{
  color-scheme:light;
  /* colour: light theme (warm paper) */
  --bg:#FAF9F6; --bg-2:#F3F1EB; --panel:#FFFFFF;
  --ink:#16181D; --muted:#5B616B;
  --line:#E4E1D9; --line-strong:#CDC9BF;
  --accent:#1D5C4A; --accent-hover:#154536; --accent-ink:#FFFFFF; --accent-soft:#E3EEE9;
  --check:#8A5A00; --check-soft:#FBEFD5;
  --motif:rgba(22,24,29,.075); --motif-accent:.2; --motif-contours:.16;
  --glow:rgba(29,92,74,.16); --shadow:0 1px 2px rgba(22,24,29,.04),0 10px 30px -18px rgba(22,24,29,.18);

  /* type */
  --font-sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Source Serif 4","Serif Fallback",Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:13px; --fs-sm:15px; --fs-base:17px;
  --fs-md:clamp(18px,.6vw + 15.5px,21px);
  --fs-lg:clamp(20px,.4vw + 18.5px,23px);
  --fs-xl:clamp(24px,1.2vw + 19px,30px);
  --fs-2xl:clamp(28px,2.4vw + 19px,44px);
  --fs-3xl:clamp(36px,4.4vw + 20px,64px);

  /* space: 4px base */
  --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;
  --section:clamp(72px,6vw + 48px,128px);
  --gutter:16px; --max:1120px; --measure:680px; --header-h:64px;

  /* shape */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:20px; --r-pill:999px;

  /* motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-reveal:500ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121417; --bg-2:#0E1012; --panel:#1A1D21;
    --ink:#ECEDEF; --muted:#A2A8B3;
    --line:#2A2E34; --line-strong:#3A3F47;
    --accent:#6CC3A2; --accent-hover:#8AD4B7; --accent-ink:#0E1A15; --accent-soft:#1B2E27;
    --check:#E8C063; --check-soft:#3A3120;
    --motif:rgba(236,237,239,.065); --motif-accent:.3; --motif-contours:.24;
    --glow:rgba(108,195,162,.22); --shadow:0 1px 0 rgba(255,255,255,.02) inset,0 12px 32px -20px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121417; --bg-2:#0E1012; --panel:#1A1D21;
  --ink:#ECEDEF; --muted:#A2A8B3;
  --line:#2A2E34; --line-strong:#3A3F47;
  --accent:#6CC3A2; --accent-hover:#8AD4B7; --accent-ink:#0E1A15; --accent-soft:#1B2E27;
  --check:#E8C063; --check-soft:#3A3120;
  --motif:rgba(236,237,239,.065); --motif-accent:.3; --motif-contours:.24;
  --glow:rgba(108,195,162,.22); --shadow:0 1px 0 rgba(255,255,255,.02) inset,0 12px 32px -20px rgba(0,0,0,.6);
}
/* derived tokens follow whichever theme is active */
:root{
  --accent-line:color-mix(in srgb,var(--accent) 38%,transparent);
  --accent-faint:color-mix(in srgb,var(--accent) 12%,transparent);
  --check-line:color-mix(in srgb,var(--check) 45%,transparent);
}
@media (min-width:700px){:root{--gutter:32px}}

/* ----------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-base)/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-kerning:normal;overflow-wrap:break-word}
img,svg,video{max-width:100%;height:auto}
img{display:block}
[hidden]{display:none!important}
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--ink)}
p{margin:0 0 var(--s-4);text-wrap:pretty}
ul,ol{margin:0 0 var(--s-4)}
li::marker{color:var(--accent)}
b,strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}

a{color:var(--accent);text-decoration-line:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:var(--accent-line);
  transition:color var(--dur-2) var(--ease-out),text-decoration-color var(--dur-2) var(--ease-out)}
a:hover{color:var(--accent-hover);text-decoration-color:currentColor}

/* one focus treatment everywhere: a 2px accent ring standing clear of the element */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}

.skip-link{position:absolute;left:var(--s-4);top:-100px;z-index:100;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.skip-link:focus{top:var(--s-3)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ----------------------------------------------------------- typography */
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:var(--fs-3xl);line-height:1.06;letter-spacing:-.022em}
h2{font-size:var(--fs-2xl);line-height:1.12;letter-spacing:-.016em;margin-bottom:var(--s-4)}
h3{font-size:var(--fs-lg);line-height:1.25;letter-spacing:-.006em;margin-bottom:var(--s-2)}
h4{font-family:var(--font-sans);font-size:var(--fs-base);margin-bottom:var(--s-1)}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:var(--s-4);line-height:1.4}
.eyebrow::before{content:"";flex:none;width:20px;height:1px;background:currentColor;opacity:.75}
.lede{font-size:var(--fs-md);line-height:1.55;color:var(--muted);max-width:40em;margin:var(--s-5) 0 var(--s-6)}
.muted{color:var(--muted)}
.small{font-size:14px}
.mono{font-family:var(--font-mono);font-size:.875em;letter-spacing:0}
.num{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- layout */
.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:calc(var(--measure) + 2 * var(--gutter))}
section{padding:var(--section) 0;border-top:1px solid var(--line)}
section.alt{background:var(--bg-2)}
.section-head{max-width:760px;margin-bottom:var(--s-7)}
.section-head .lede{margin:0}

.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.split.sticky-head > :first-child{position:sticky;top:calc(var(--header-h) + 32px)}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}.split.sticky-head > :first-child{position:static}}
.split > *{min-width:0}

/* --------------------------------------------------------- draft markers */
/* remove before going live */
.draftbar{background:var(--check-soft);color:var(--check);font-size:var(--fs-xs);line-height:1.4;padding:8px var(--gutter);
  text-align:center;border-bottom:1px solid var(--check-line)}
.draftbar::before{content:"Draft";font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--check-line);border-radius:var(--r-xs);padding:3px 6px;margin-right:10px;vertical-align:1px}
mark.check{background:var(--check-soft);color:var(--check);border-radius:3px;padding:0 3px;
  box-shadow:inset 0 -1px 0 var(--check-line);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* --------------------------------------------------------------- header */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:10px;font:600 19px/1 var(--font-serif);letter-spacing:-.005em;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-faint)}
.logo:hover{color:var(--ink)}
nav.main{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);font-size:var(--fs-sm)}
nav.main a{color:var(--muted);text-decoration:none;white-space:nowrap}
nav.main a:not(.cta){position:relative;padding:6px 0}
nav.main a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right center;transition:transform var(--dur-3) var(--ease-out)}
nav.main a:not(.cta):hover{color:var(--ink)}
nav.main a:not(.cta):hover::after{transform:scaleX(1);transform-origin:left center}
nav.main a[aria-current]{color:var(--ink)}
nav.main a[aria-current]::after{transform:scaleX(1)}
.cta{background:var(--accent);color:var(--accent-ink)!important;border-radius:var(--r-sm);padding:8px 14px;font-weight:600;text-decoration:none;
  transition:background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.cta:hover{background:var(--accent-hover)}
.cta:active{transform:translateY(1px)}

/* Below 720px the header is two rows: logo and theme toggle, then the nav as its own row.
   If the links don't fit, the row scrolls sideways under a CTA that stays pinned at the
   right, so the CTA is never clipped. The fade on its left edge only shows while the row
   actually overflows (a scroll-driven animation; its timeline is inactive otherwise). */
@media (max-width:720px){
  :root{--header-h:96px}
  header.site .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;height:auto;padding-top:4px;padding-bottom:2px}
  header.site .logo{margin-right:0;justify-self:start}
  nav.main{grid-column:1/-1;grid-row:2;gap:0;font-size:14px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) 0 -7px;
    padding:0 var(--gutter) 0 0;scroll-padding-inline:0 140px}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a:not(.cta){padding:0 7px}
  nav.main a:not(.cta)::after{left:7px;right:7px;bottom:8px}
  nav.main .cta{position:sticky;right:0;z-index:1;flex:none;padding:0 14px;margin-left:auto}
  nav.main .cta::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:36px;pointer-events:none;opacity:0;
    background:linear-gradient(90deg,transparent,var(--bg) 80%)}
  /* rings sit inside the link so the scroll row can't clip them */
  nav.main a:focus-visible{outline-offset:-2px}
  nav.main .cta:focus-visible{outline-color:var(--accent-ink);outline-offset:-4px}
}
@supports (animation-timeline:scroll()){
  @media (max-width:720px){
    nav.main .cta::before{animation:row-fade linear both;animation-timeline:scroll(nearest inline)}
  }
}
@keyframes row-fade{0%,92%{opacity:1}100%{opacity:0}}

/* tap targets: at least 44px on phones and touch screens (links inside running text are exempt) */
@media (max-width:720px),(pointer:coarse){
  header.site .logo,nav.main a,.cta,.crumbs a,.footer-col a,a.more-link,.link-arrow,.back-link{min-height:44px;display:inline-flex;align-items:center}
  header.site .theme-toggle{width:44px;height:44px}
  footer.site .footer-col ul{gap:0}
  a.more-link{background-position:left 0 bottom 8px;background-position:left 0 bottom calc((44px - 1lh) / 2 - 3px)}
}

/* -------------------------------------------------------- buttons, links */
.btns{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1.2 var(--font-sans);border-radius:var(--r-sm);
  padding:14px 20px;min-height:48px;text-decoration:none;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);cursor:pointer;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink);box-shadow:0 10px 24px -14px var(--glow)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-faint)}
.btn .icon{width:18px;height:18px;transition:transform var(--dur-3) var(--ease-out)}
.btn:hover .icon{transform:translateX(3px)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.link-arrow .icon{width:18px;height:18px;transition:transform var(--dur-3) var(--ease-out)}
.link-arrow:hover .icon{transform:translateX(3px)}
.link-arrow:hover{text-decoration:underline;text-decoration-color:var(--accent-line)}

.icon{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.25em;stroke:currentColor;fill:none}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-faint);margin-bottom:var(--s-5)}
.card-icon .icon{width:22px;height:22px}

/* ----------------------------------------------------------------- hero */
section.hero{position:relative;isolation:isolate;border-top:0;padding:clamp(56px,6vw + 24px,112px) 0 clamp(56px,5vw + 24px,96px)}
/* grid motif plus accent traces, drawn as masks so they take the theme colours */
.hero::before,.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover}
.hero::before{background:var(--motif);-webkit-mask-image:url("motifs/hero-grid.svg");mask-image:url("motifs/hero-grid.svg")}
.hero::after{background:var(--accent);opacity:var(--motif-accent);-webkit-mask-image:url("motifs/hero-traces.svg");mask-image:url("motifs/hero-traces.svg")}
@media (max-width:700px){.hero::after{opacity:calc(var(--motif-accent) * .6)}}
.hero.plain::before,.hero.plain::after{display:none}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero-grid h1{font-size:clamp(36px,4.2vw + 18px,60px)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.portrait{max-width:360px}}

/* portrait: duotone photo, scanline wash, viewfinder corners, live dot */
.portrait{position:relative;margin:0;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:#0A100E;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 30px 80px -30px color-mix(in srgb,var(--accent) 45%,transparent)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
             linear-gradient(180deg,transparent 55%,rgba(10,16,14,.85) 100%)}
.portrait::before{content:"";position:absolute;inset:14px;z-index:1;pointer-events:none;--c:rgba(176,242,214,.55);
  background:
    linear-gradient(var(--c),var(--c)) left top/18px 1px,linear-gradient(var(--c),var(--c)) left top/1px 18px,
    linear-gradient(var(--c),var(--c)) right top/18px 1px,linear-gradient(var(--c),var(--c)) right top/1px 18px,
    linear-gradient(var(--c),var(--c)) left bottom/18px 1px,linear-gradient(var(--c),var(--c)) left bottom/1px 18px,
    linear-gradient(var(--c),var(--c)) right bottom/18px 1px,linear-gradient(var(--c),var(--c)) right bottom/1px 18px;
  background-repeat:no-repeat}
.portrait figcaption{position:absolute;left:28px;bottom:26px;z-index:2;font:500 13px/1 var(--font-mono);letter-spacing:.02em;color:#B0F2D6;
  display:flex;align-items:center;gap:10px}
.portrait .dot,.live-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#6CC3A2;box-shadow:0 0 10px #6CC3A2;
  animation:pulse 2.4s ease-in-out infinite}
.portrait .dot::after,.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #6CC3A2;
  animation:ring 2.4s var(--ease-out) infinite}
@keyframes pulse{50%{opacity:.35}}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3);opacity:0}}

/* ---------------------------------------------------------------- cards */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2vw + 14px,32px);
  box-shadow:var(--shadow)}
.card p{margin:8px 0 0;color:var(--muted)}
.card ul{margin:12px 0 0;padding-left:18px;color:var(--muted)}
.card li{margin:6px 0;padding-left:2px}
.card > :first-child{margin-top:0}

.service{display:flex;flex-direction:column}
.kicker{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-variant-numeric:tabular-nums}
.service h3{font-size:clamp(22px,.6vw + 19px,26px)}
.service ul{margin-bottom:var(--s-5)}
.service .eg{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--line);font-size:14px;line-height:1.55}
.service .eg b{color:var(--ink);font-weight:600}

/* who it's for: ticks and dashes drawn in CSS, so lists need no extra markup */
.fit-yes h3{color:var(--accent)}
.fit-no h3{color:var(--muted)}
.fit-yes ul,.fit-no ul,ul.ticks{list-style:none;padding-left:0;margin-top:var(--s-3)}
.fit-yes li,.fit-no li,ul.ticks li{position:relative;padding-left:30px;margin:10px 0}
.fit-yes li::before,ul.ticks li::before{content:"";position:absolute;left:3px;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.fit-no li::before{content:"";position:absolute;left:3px;top:.8em;width:12px;height:2px;border-radius:1px;background:var(--muted);opacity:.7}
.fit-no{background:transparent;box-shadow:none;border-style:dashed;border-color:var(--line-strong)}

.tags span,.tag{display:inline-block;font-size:12px;font-weight:500;line-height:1.5;background:var(--accent-soft);color:var(--accent);
  border-radius:var(--r-pill);padding:2px 10px;margin-right:6px}

/* ------------------------------------------------------------ team diagram */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin-top:var(--s-5)}
.team div{position:relative;border:1px dashed var(--line-strong);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.45;color:var(--muted);
  background:color-mix(in srgb,var(--panel) 55%,transparent)}
.team div b{display:flex;align-items:center;gap:8px;color:var(--ink);font:500 13px/1.4 var(--font-mono);margin-bottom:4px}
.team div:not(.you) b::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.85}
.team div:not(.you)::before{content:"";position:absolute;left:50%;top:-13px;height:12px;border-left:1px dashed var(--accent-line)}
.team .you{grid-column:1/-1;border:1px solid var(--accent-line);background:var(--accent-soft);padding:16px 18px;font-size:var(--fs-sm)}
.team .you b{font:600 19px/1.25 var(--font-serif);margin-bottom:4px}

/* --------------------------------------------------------------- steps */
.steps{counter-reset:s;display:grid;gap:12px;margin-top:8px;padding:0;list-style:none}
.step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font:600 15px/1 var(--font-sans);font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--accent-line)}
.step:not(:last-child)::after{content:"";position:absolute;left:38px;top:62px;bottom:-13px;border-left:1px dashed var(--accent-line)}
.step b{display:block;color:var(--ink);font-weight:600;margin:6px 0 2px}
.step span{color:var(--muted);font-size:var(--fs-sm)}

/* ------------------------------------------------- experience highlights */
.highlights{display:grid;gap:0;border-top:1px solid var(--line)}
.highlights div{padding:16px 0;border-bottom:1px solid var(--line)}
.highlights b{display:block;font-weight:600;color:var(--ink)}
.highlights span{color:var(--muted);font-size:var(--fs-sm)}

/* legacy components kept so older markup still renders */
.timeline{border-left:2px solid var(--line);margin:8px 0 0 6px;padding-left:24px}
.timeline div{position:relative;padding:0 0 22px}
.timeline div::before{content:"";position:absolute;left:-31px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.timeline b{display:block}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media (max-width:700px){.pillars{grid-template-columns:1fr}}
.pillars div{border-top:3px solid var(--accent);padding-top:12px}
.demo{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:860px){.demo{grid-template-columns:1fr}}
.shot{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:18px;font:13px/1.55 var(--font-mono);color:var(--muted);overflow:hidden}
.shot .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}
.shot .row b{color:var(--ink)}
.shot .flag{background:var(--check-soft);color:var(--check);border-radius:6px;padding:6px 8px;margin-top:10px;font-family:var(--font-sans)}

/* --------------------------------------------- regenerative agriculture */
.hero.hero-regen::before{background:var(--accent);opacity:var(--motif-contours);
  -webkit-mask-image:url("motifs/contours.svg"),linear-gradient(90deg,transparent 25%,#000 75%);mask-image:url("motifs/contours.svg"),linear-gradient(90deg,transparent 25%,#000 75%);
  -webkit-mask-size:cover,100% 100%;mask-size:cover,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}
.hero.hero-regen::after{display:none}
@media (max-width:900px){.hero.hero-regen::before{-webkit-mask-image:url("motifs/contours.svg"),linear-gradient(180deg,transparent 20%,#000 90%);mask-image:url("motifs/contours.svg"),linear-gradient(180deg,transparent 20%,#000 90%)}}

.cred-badge{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--accent-line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.cred-badge-mark{display:block;width:44px;height:44px;border-radius:50%;margin-bottom:var(--s-5);
  border:1.5px solid var(--accent);box-shadow:inset 0 0 0 5px var(--panel),inset 0 0 0 6.5px var(--accent),inset 0 0 0 11px var(--panel),inset 0 0 0 13px var(--accent)}
.cred-badge-title{font:600 var(--fs-xl)/1.2 var(--font-serif);color:var(--ink);margin:0 0 var(--s-2);letter-spacing:-.01em}
.cred-badge-sub{color:var(--muted);margin:0}
.cred-badge .tag{margin-top:var(--s-4)}

ul.creds,ol.creds{list-style:none;padding:0;margin:0;display:grid;border-top:1px solid var(--line)}
.creds li{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 0 18px 36px;border-bottom:1px solid var(--line)}
.creds li::before{content:"";position:absolute;left:0;top:22px;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--accent);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--accent-line)}
.creds b{font-weight:600;color:var(--ink)}
.creds span{grid-column:1;color:var(--muted);font-size:var(--fs-sm)}
.creds .tag{grid-column:2;grid-row:1;align-self:start;margin:0;white-space:nowrap}
@media (max-width:560px){.creds li{grid-template-columns:1fr}.creds .tag{grid-column:1;grid-row:auto;justify-self:start}}

.divider{border:0;margin:0;height:1px;background:var(--line);position:relative;overflow:visible}
.divider::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--bg);border:1px solid var(--line-strong);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 7px var(--accent)}
.divider.furrows{height:48px;background:var(--accent);opacity:var(--motif-contours);
  -webkit-mask:url("motifs/divider-furrows.svg") center/100% 100% no-repeat;mask:url("motifs/divider-furrows.svg") center/100% 100% no-repeat}
.divider.furrows::after{display:none}

/* ------------------------------------------------------- proof slots */
/* For content Wayne must supply. Dashed amber so it reads as "coming", never as real. */
.slot{position:relative;border:1px dashed var(--check-line);border-radius:var(--r);padding:20px 22px;background:color-mix(in srgb,var(--check-soft) 45%,transparent);color:var(--muted);font-size:var(--fs-sm)}
.slot p{margin:6px 0 0}
.slot-label{display:inline-block;font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--check);
  border:1px solid var(--check-line);border-radius:var(--r-xs);padding:4px 6px}
.slot.inline{display:inline-flex;align-items:center;gap:10px;padding:10px 14px}
.slot.inline p{margin:0}

.testimonial{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 24px;box-shadow:var(--shadow)}
.testimonial blockquote{margin:0;position:relative;padding-top:28px}
.testimonial blockquote::before{content:"\201C";position:absolute;left:-4px;top:-18px;font:600 64px/1 var(--font-serif);color:var(--accent);opacity:.6}
.testimonial blockquote p{font:400 var(--fs-lg)/1.45 var(--font-serif);color:var(--ink);margin:0}
.testimonial figcaption{margin-top:var(--s-4);font-size:14px;color:var(--muted)}
.testimonial figcaption b{color:var(--ink)}
.testimonial.empty{background:transparent;box-shadow:none;border:1px dashed var(--check-line)}
.testimonial.empty blockquote::before{color:var(--check);opacity:.35}
.testimonial.empty blockquote p{color:var(--muted);font-style:italic}

/* ------------------------------------------------------------- contact */
.contact-card{display:grid;gap:4px;padding:12px}
.contact-row{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:12px;border-radius:10px;color:var(--ink);text-decoration:none;
  transition:background-color var(--dur-2) var(--ease-out)}
a.contact-row:hover{background:var(--accent-faint);color:var(--ink)}
.contact-row > .icon{width:44px;height:44px;padding:11px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.contact-row span{display:block;min-width:0}
.contact-row b{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
a.contact-row span span{color:var(--accent);overflow-wrap:anywhere}

/* -------------------------------------------------------------- writing */
.post-list,.posts{list-style:none;padding:0;margin:0;display:grid;border-top:1px solid var(--line)}
.post-list li{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.post-list a{display:grid;gap:6px;text-decoration:none;color:var(--ink)}
.post-title{font:600 var(--fs-lg)/1.3 var(--font-serif);letter-spacing:-.006em;transition:color var(--dur-2) var(--ease-out)}
.post-summary{color:var(--muted);font-size:var(--fs-sm);max-width:60ch}
.post-list time{grid-column:2;grid-row:1;color:var(--muted);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:4px}
.post-list a:hover .post-title{color:var(--accent)}
@media (max-width:560px){.post-list li{grid-template-columns:1fr}.post-list time{grid-column:1;grid-row:auto;padding:0}}
/* legacy index markup */
.posts a{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.posts a span{color:var(--muted);font-size:14px;white-space:nowrap}
.posts a em{display:block;font-style:normal;color:var(--muted);font-size:var(--fs-sm)}
.posts a:hover{color:var(--accent)}
.empty-state{border:1px dashed var(--line-strong);border-radius:var(--r);padding:32px;color:var(--muted);text-align:center}

/* article: a 680px measure at 20px serif is about 70 characters a line */
article.post{max-width:var(--measure);margin:0 auto;padding:clamp(48px,5vw + 24px,96px) 0}
article.post p,article.post li{font-family:var(--font-serif);font-size:20px;line-height:1.65}
article.post p{margin:0 0 22px}
article.post ul,article.post ol{padding-left:1.3em;margin:0 0 22px}
article.post li{margin:0 0 8px;padding-left:4px}
article.post h2{font-size:var(--fs-xl);margin:56px 0 16px}
article.post h3{font-size:var(--fs-lg);margin:40px 0 12px}
article.post blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent)}
article.post blockquote p{font-style:italic;font-size:22px;line-height:1.5;color:var(--ink)}
article.post blockquote p:last-child{margin-bottom:0}
article.post figure{margin:36px 0}
article.post figure img{border-radius:var(--r);border:1px solid var(--line)}
article.post figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
article.post code{font-family:var(--font-mono);font-size:.85em;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px}
article.post hr{margin:48px auto;width:64px;border-top-color:var(--line-strong)}
.post-head{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.post-head h1{font-size:clamp(34px,3vw + 22px,52px);line-height:1.1}
article.post .standfirst{font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.55;color:var(--muted);margin:20px 0 0}
article.post .post-meta{font:400 14px/1.5 var(--font-sans);color:var(--muted);margin:20px 0 0;font-variant-numeric:tabular-nums}
.post-foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
article.post .post-foot p{font:inherit}
.draft-notice{margin:0 0 40px;padding:16px 18px;border:1px solid var(--check-line);border-left-width:3px;border-radius:var(--r-sm);
  background:var(--check-soft);color:var(--check);font:400 var(--fs-sm)/1.55 var(--font-sans)}
article.post .draft-notice p{font:inherit;margin:0}
article.post .draft-notice p + p{margin-top:8px}

/* privacy and other plain long-form pages */
.prose{max-width:var(--measure)}
.prose h2{font-size:var(--fs-xl);margin:48px 0 12px}
.prose h3{margin:32px 0 8px}
.prose p,.prose li{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:6px 0}
.prose .updated{color:var(--muted);font-size:14px}

/* 404 */
.notfound{min-height:calc(100vh - var(--header-h) - 200px);display:flex;align-items:center}
.notfound .wrap{width:100%}
.notfound-code{font:600 clamp(96px,14vw + 40px,220px)/.9 var(--font-serif);letter-spacing:-.04em;margin:0 0 var(--s-5);
  color:transparent;-webkit-text-stroke:1.5px var(--accent-line);font-variant-numeric:lining-nums}
@supports not (-webkit-text-stroke:1px black){.notfound-code{color:var(--accent-soft)}}

/* --------------------------------------------------------------- footer */
footer.site{background:var(--bg-2);border-top:1px solid var(--line);padding:var(--s-8) 0 var(--s-6);color:var(--muted);font-size:14px}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-line)}
footer.site .footer-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--s-6) var(--s-7)}
@media (max-width:860px){footer.site .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
.footer-brand .logo{margin-bottom:var(--s-4)}
.footer-brand p{max-width:34ch;margin:0}
.footer-brand .footer-h{margin:var(--s-6) 0 var(--s-3)} /* a Contact block inside the brand column */
.footer-h{font:600 12px/1.4 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 var(--s-4)}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer-col a{display:inline-flex;align-items:center;gap:8px}
.footer-col .icon{width:16px;height:16px}
footer.site .footer-base{position:relative;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:flex-start;align-items:center;margin-top:var(--s-7);padding-top:var(--s-5);font-size:13px}
footer.site .footer-base::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line)}
.footer-base .built{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px}
.footer-base .built::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.footer-base .spacer{flex:1}
@media (max-width:700px){.footer-base .spacer{display:none}}

/* ======================================================== phase 2: pages */

/* ------------------------------------------------------- theme toggle */
/* Hidden until theme.js has set data-theme-pref, which happens before first paint,
   so the button never pops in. Without JavaScript it stays hidden and the system theme applies. */
.theme-toggle{display:none;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border-radius:var(--r-sm);
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
[data-theme-pref] .theme-toggle{display:inline-flex}
.theme-toggle:hover{color:var(--ink);border-color:var(--line-strong);background:var(--accent-faint)}
.theme-toggle:active{transform:translateY(1px)}
.theme-toggle .icon{display:none;width:18px;height:18px}
[data-theme-pref="system"] .theme-toggle .i-system,
[data-theme-pref="light"] .theme-toggle .i-light,
[data-theme-pref="dark"] .theme-toggle .i-dark{display:block}
header.site .wrap{position:relative}
header.site .logo{margin-right:auto}

/* -------------------------------------------------- page hero (sub-pages) */
section.hero.page-hero{padding:clamp(40px,4vw + 20px,80px) 0 clamp(40px,4vw + 16px,72px);border-bottom:1px solid var(--line)}
.page-hero::before{-webkit-mask-position:right center;mask-position:right center}
.page-hero::after{display:none}
.page-hero h1{font-size:clamp(34px,3.2vw + 20px,56px);line-height:1.08;max-width:24ch}
.page-hero .lede{margin-bottom:0}
.page-hero .btns{margin-top:var(--s-6)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:end}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;align-items:start}}
.page-hero-aside{min-width:0}
.page-hero + section{border-top:0}

/* breadcrumb */
.crumbs{margin-bottom:var(--s-5);font-size:14px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
.crumbs li{display:inline-flex;align-items:center;color:var(--muted)}
.crumbs li + li::before{content:"";width:5px;height:5px;margin:0 10px;border-top:1.5px solid var(--line-strong);border-right:1.5px solid var(--line-strong);transform:rotate(45deg)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-line)}
.crumbs [aria-current]{color:var(--ink)}

/* "at a glance" facts, for the page-hero side card */
.facts{margin:0;display:grid;gap:0}
.facts > div{display:grid;grid-template-columns:minmax(0,9em) 1fr;gap:4px 16px;padding:12px 0;border-top:1px solid var(--line)}
.facts > div:first-child{border-top:0;padding-top:0}
.facts > div:last-child{padding-bottom:0}
.facts dt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.facts dd{margin:0;color:var(--ink);font-size:var(--fs-sm)}
@media (max-width:420px){.facts > div{grid-template-columns:1fr}}

/* compact portrait for sub-pages (pairs with the home portrait in the view transition) */
.portrait.compact{max-width:280px;border-radius:16px}
.portrait.compact figcaption{left:22px;bottom:20px;font-size:12px}

/* ------------------------------------------------------- "More" link */
/* ends a home section and points to its page */
.more{margin:var(--s-6) 0 0}
.more-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) left bottom/0 1.5px no-repeat;padding-bottom:3px;
  transition:background-size var(--dur-3) var(--ease-out),color var(--dur-2) var(--ease-out)}
.more-link:hover{background-size:calc(100% - 26px) 1.5px;color:var(--accent-hover)}
.more-link .icon{width:18px;height:18px;transition:transform var(--dur-3) var(--ease-out)}
.more-link:hover .icon{transform:translateX(4px)}

/* -------------------------------------------------- end of page nav */
.page-end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4) var(--s-6);
  padding:var(--s-6) 0;border-top:1px solid var(--line)}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:var(--fs-sm)}
.back-link .icon{width:18px;height:18px;transition:transform var(--dur-3) var(--ease-out)}
.back-link:hover{color:var(--ink)}
.back-link:hover .icon{transform:translateX(-4px)}

/* ---------------------------------------------------------------- FAQ */
/* native <details>: works without JavaScript; the open/close animates where the browser supports it */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:20px 0;cursor:pointer;list-style:none;
  font:600 var(--fs-lg)/1.3 var(--font-serif);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary > :is(h2,h3,h4){font:inherit;margin:0;color:inherit}
.faq summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--accent),var(--accent)) center/14px 1.5px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1.5px 14px no-repeat;
  transition:transform var(--dur-3) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq .answer{padding:0 0 22px;color:var(--muted);max-width:62ch}
.faq .answer > :last-child{margin-bottom:0}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height var(--dur-3) var(--ease-out),content-visibility var(--dur-3) allow-discrete}
  .faq details[open]::details-content{height:auto}
}

/* ------------------------------------------------------- shipped log */
/* newest first; a dashed amber node marks an entry Wayne hasn't confirmed */
.shipped{list-style:none;margin:0;padding:0;position:relative}
.ship{position:relative;display:grid;grid-template-columns:minmax(0,11em) 1fr;gap:6px 32px;padding:0 0 var(--s-7) 0}
.ship::before{content:"";position:absolute;left:calc(11em + 15px);top:12px;bottom:-4px;border-left:1px solid var(--line-strong)}
.ship:last-child::before{display:none}
.ship::after{content:"";position:absolute;left:calc(11em + 10px);top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--accent)}
.ship:first-child::after{background:var(--accent);box-shadow:0 0 0 4px var(--accent-faint)}
.ship-date{font:500 13px/1.5 var(--font-mono);color:var(--muted);padding-top:2px;text-align:right}
.ship-date time{white-space:nowrap}
.ship-body{padding-left:24px;min-width:0}
.ship-body > :last-child{margin-bottom:0}
.ship-title{font:600 var(--fs-lg)/1.3 var(--font-serif);color:var(--ink);margin:0 0 var(--s-2)}
.ship-body p{color:var(--muted)}
.ship-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-3)}
.ship-shot{margin:var(--s-5) 0 0}
.ship-shot img{display:block;width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line)}
.ship-shot figcaption{margin-top:var(--s-2);font-size:14px;line-height:1.5;color:var(--muted)}
.ship-meta .tag{margin:0}
.ship.unconfirmed::after{border-style:dashed;border-color:var(--check);background:var(--check-soft);box-shadow:none}
.ship.unconfirmed .ship-date{color:var(--check)}
@media (max-width:640px){
  .ship{grid-template-columns:1fr;padding-left:28px}
  .ship::before{left:5px}
  .ship::after{left:0}
  .ship-date{text-align:left}
  .ship-body{padding-left:0}
}

/* --------------------------------------------- reading progress (articles) */
/* <div class="read-progress" aria-hidden="true"></div> as the first child of <body>.
   Only shown where scroll-driven animations exist; no JavaScript. */
.read-progress{display:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .read-progress{display:block;position:fixed;inset:0 0 auto 0;height:2px;z-index:70;background:var(--accent);transform-origin:0 50%;
      animation:read-progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes read-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* -------------------------------------------- regen hero heading (from build) */
.hero-regen .hero-grid h1{font-size:clamp(32px,4.5vw,52px)}

/* ---------------------------------------------------- view transitions */
/* Cross-document: the header and portrait hold still while the page cross-fades.
   Browsers without support ignore all of this and navigate normally. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
header.site{view-transition-name:site-header}
.portrait{view-transition-name:portrait}
::view-transition-group(root){animation-duration:240ms;animation-timing-function:var(--ease-out)}
::view-transition-old(root){animation:240ms var(--ease-out) both vt-out}
::view-transition-new(root){animation:240ms var(--ease-out) both vt-in}
::view-transition-group(portrait){animation-duration:360ms;animation-timing-function:var(--ease-out)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;translate:0 6px}}

/* ---------------------------------------------- scroll-driven reveals */
/* Where supported, CSS drives the reveal of .below sections from scroll position; motion.js only tags them. */
@keyframes reveal{from{opacity:0;translate:0 12px}to{opacity:1;translate:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .js main > section.below > .wrap,.js [data-reveal].below{opacity:1;translate:none;transition:none;
      animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 220px}
  }
}
/* header border fades in once the page scrolls */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    header.site{animation:header-settle linear both;animation-timeline:scroll(root);animation-range:0 64px}
  }
}
@keyframes header-settle{from{border-bottom-color:transparent}}

/* ======================================================= phase 3: sectors */

/* ------------------------------------------------------- linked cards */
/* The heading link stretches over the whole card, so the card is one click target with one
   accessible name. Any "More" text inside is decoration (aria-hidden). */
.card.linked{cursor:pointer}
.card.linked h3 a{color:inherit;text-decoration:none}
.card.linked h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.card.linked h3 a:focus-visible{outline:none}
.card.linked:has(h3 a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.card.linked:hover h3{color:var(--accent)}
.card.linked:hover .more-link{background-size:calc(100% - 26px) 1.5px}
.card.linked:hover .more-link .icon{transform:translateX(4px)}
.card .more{margin-top:auto;padding-top:var(--s-5)}
.card.service .more{margin-top:var(--s-5);padding-top:0}

/* ------------------------------------------------------- sector cards */
/* four across on desktop, two on tablet, one on phone; .part-grid is the same grid for the
   four "What I do" part cards */
.sector-grid,.part-grid{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
@media (max-width:1040px){.sector-grid,.part-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sector-grid,.part-grid{grid-template-columns:1fr}}
.sector-grid > li,.part-grid > li{display:flex}
.part-grid .service h3{font-size:clamp(20px,.4vw + 18px,23px)}
.sector-card{display:flex;flex-direction:column;width:100%}
.sector-card .card-icon{margin-bottom:var(--s-5)}
.sector-card h3{font-size:clamp(20px,.4vw + 18px,23px)}
.sector-card p{margin-top:var(--s-2)}

/* ---------------------------------------------- in-page section nav */
/* For the overview pages: links to the three or four parts. Sticky under the header on
   wide screens; a plain scrollable row on phones. motion.js marks the part in view. */
.section-nav{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);z-index:40}
@media (min-width:721px){.section-nav{position:sticky;top:var(--header-h)}}
.section-nav ol{list-style:none;margin:0;padding:0;display:flex;gap:clamp(4px,1vw,12px);overflow-x:auto;scrollbar-width:none;counter-reset:part}
.section-nav ol::-webkit-scrollbar{display:none}
.section-nav li{flex:none}
.section-nav a{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 12px;color:var(--muted);text-decoration:none;
  font-size:var(--fs-sm);font-weight:500;white-space:nowrap;transition:color var(--dur-2) var(--ease-out)}
.section-nav li:first-child a{padding-left:0}
.section-nav a .icon{width:18px;height:18px;color:var(--accent);opacity:.75;transition:opacity var(--dur-2) var(--ease-out)}
.section-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-3) var(--ease-out)}
.section-nav li:first-child a::after{left:0}
.section-nav a:hover{color:var(--ink)}
.section-nav a:focus-visible{outline-offset:-3px}
/* a quiet rule between the icon links (the parts) and the plain links that follow them */
.section-nav li:has(.icon) + li:not(:has(.icon)){margin-left:clamp(4px,1vw,12px);padding-left:clamp(4px,1vw,12px);border-left:1px solid var(--line);align-self:center}
.section-nav li:has(.icon) + li:not(:has(.icon)) a{padding-left:12px}
/* up to 1100px the icons go, so up to seven links fit on one line from 720px */
@media (max-width:1100px){
  .section-nav a{padding:16px 10px}
  .section-nav a .icon{display:none}
  .section-nav a::after{left:10px;right:10px}
}
@media (max-width:900px){
  .section-nav a{padding:16px 7px;font-size:14px}
  .section-nav a::after{left:7px;right:7px}
  .section-nav li:has(.icon) + li:not(:has(.icon)){margin-left:4px;padding-left:4px}
  .section-nav li:has(.icon) + li:not(:has(.icon)) a{padding-left:9px}
} /* inside the link: the scroll row would clip an outer ring */
.section-nav a:hover .icon,.section-nav a[aria-current] .icon{opacity:1}
.section-nav a[aria-current]{color:var(--ink)}
.section-nav a[aria-current]::after{transform:scaleX(1)}
.page-hero + .section-nav + section{border-top:0}
/* anchors land below both sticky bars */
@media (min-width:721px){html:has(.section-nav){scroll-padding-top:calc(var(--header-h) + 56px + 16px)}}

/* ------------------------------------------------- nav disclosure menus */
/* "What I do" and "Sectors" keep their links to the overview pages; a chevron button beside
   each opens a panel (nav.js). Panels hang from the left edge of the nav so they never run off
   a 900px screen. Without JavaScript the buttons stay hidden and the links work as before.
   Phones (720px and below) get no menus at all. */
nav.main{position:relative}
.nav-item{display:inline-flex;align-items:center;gap:0}
.menu-toggle{display:none}
.js .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:32px;margin-left:2px;padding:0;
  border:0;border-radius:var(--r-xs);background:none;color:var(--muted);cursor:pointer;transition:color var(--dur-2) var(--ease-out)}
.menu-toggle .icon{width:15px;height:15px;transition:transform var(--dur-3) var(--ease-out)}
.menu-toggle:hover,.nav-item.open .menu-toggle{color:var(--ink)}
.nav-item.open .menu-toggle .icon{transform:rotate(180deg)}
.menu{position:absolute;left:-14px;top:calc(100% + 14px);z-index:60;width:min(440px,calc(100vw - 2 * var(--gutter)));padding:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 24px 48px -20px rgba(0,0,0,.45),0 0 0 3px var(--accent-faint);
  visibility:hidden;opacity:0;translate:0 -6px;
  transition:opacity 140ms var(--ease-out),translate 140ms var(--ease-out),visibility 0s linear 140ms}
.menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} /* hover bridge from the trigger */
.nav-item.open .menu{visibility:visible;opacity:1;translate:none;transition-delay:0s}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
nav.main .menu a.menu-link,nav.main .menu a.menu-all{position:static;white-space:normal;text-decoration:none;color:var(--ink);padding:0}
nav.main .menu a.menu-link::after,nav.main .menu a.menu-all::after{content:none}
nav.main .menu a.menu-link{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:10px 12px;border-radius:10px;
  transition:background-color var(--dur-2) var(--ease-out)}
.menu-link > .icon{width:36px;height:36px;padding:8px;border-radius:9px;background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-faint)}
.menu-name{display:block;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink);transition:color var(--dur-2) var(--ease-out)}
.menu-desc{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--muted)}
nav.main .menu a.menu-link:hover,nav.main .menu a.menu-link:focus-visible{background:var(--accent-faint)}
nav.main .menu a.menu-link:hover .menu-name,nav.main .menu a.menu-link[aria-current] .menu-name{color:var(--accent)}
nav.main .menu a.menu-all{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:12px;border-top:1px solid var(--line);
  border-radius:0 0 8px 8px;font-weight:600;font-size:var(--fs-sm);color:var(--accent)}
nav.main .menu a.menu-all .icon{width:18px;height:18px;transition:transform var(--dur-3) var(--ease-out)}
nav.main .menu a.menu-all:hover{color:var(--accent-hover);background:var(--accent-faint)}
nav.main .menu a.menu-all:hover .icon{transform:translateX(3px)}
@media (pointer:coarse){.js .menu-toggle{width:44px;height:44px;margin-left:-6px}}
@media (max-width:720px){.js .menu-toggle,.menu{display:none}}

/* --------------------------------------------- motion: opt-in with .js */
/* motion.js adds .js to <html> and .below to sections that start below the fold at load;
   only those are ever hidden, so the first viewport is always at full contrast. Without
   JavaScript nothing is hidden. Reveal uses the individual translate property so it never
   fights hover transforms. */
.js main > section.below > .wrap,.js [data-reveal].below{opacity:0;translate:0 12px;
  transition:opacity var(--dur-reveal) var(--ease-out),translate var(--dur-reveal) var(--ease-out)}
.js main > section.below.in > .wrap,.js [data-reveal].below.in{opacity:1;translate:none}

@media (hover:hover) and (pointer:fine){
  .card,.step,.testimonial{transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
  .card:hover,.step:hover{transform:translateY(-2px);border-color:var(--accent-line);
    box-shadow:0 0 0 3px var(--accent-faint),0 18px 40px -22px var(--glow)}
  .card.fit-no:hover{border-color:var(--muted);box-shadow:none}
  .team div{transition:border-color var(--dur-2) var(--ease-out)}
  .team div:not(.you):hover{border-color:var(--accent-line)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .portrait .dot,.portrait .dot::after,.live-dot,.live-dot::after{animation:none}
  .js main > section.below > .wrap,.js [data-reveal].below{opacity:1;translate:none;animation:none}
  .card:hover,.step:hover,.btn:active,.cta:active{transform:none}
  .btn:hover .icon,.link-arrow:hover .icon,.more-link:hover .icon,.back-link:hover .icon,.card.linked:hover .more-link .icon,nav.main .menu a.menu-all:hover .icon{transform:none}
  .menu{translate:none}
  .read-progress{display:none}
}

/* ---------------------------------------------------------------- print */
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
    color-scheme:light;--bg:#fff;--bg-2:#fff;--panel:#fff;--ink:#000;--muted:#3a3a3a;--line:#ccc;--line-strong:#999;
    --accent:#1D5C4A;--accent-hover:#1D5C4A;--accent-ink:#fff;--accent-soft:#fff;--check:#6b4600;--check-soft:#fff;--shadow:none}
  @page{margin:18mm 16mm}
  body{font-size:11pt;line-height:1.5;background:#fff;color:#000}
  header.site{position:static;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
  nav.main,.skip-link,.hero::before,.hero::after,.divider.furrows,.theme-toggle,.read-progress,.page-end,.section-nav{display:none!important}
  main > section > .wrap,[data-reveal]{animation:none!important;opacity:1!important;translate:none!important}
  .faq details::details-content{height:auto!important;content-visibility:visible!important}
  section{padding:24px 0;border-top:1px solid #ccc;break-inside:auto}
  section.hero{padding-top:0}
  .card,.step,.testimonial,.highlights div,.creds li,.cred-badge{break-inside:avoid;box-shadow:none}
  h1,h2,h3{break-after:avoid}
  .portrait{max-width:160px;box-shadow:none}
  .portrait::before,.portrait figcaption{display:none}
  .btn{background:none;color:#000;border:1px solid #000;padding:6px 10px;min-height:0}
  .js main > section > .wrap,.js [data-reveal]{opacity:1!important;translate:none!important}
  a{color:#000;text-decoration:underline}
  a[href]:not([href^="#"]):not(.logo)::after{content:" (" attr(href) ")";font-size:.85em;font-weight:400;color:#3a3a3a;word-break:break-all}
  mark.check{background:none;color:#000;border:1px dashed #8A5A00;box-shadow:none}
  .draftbar{background:none;border:1px dashed #8A5A00;color:#000}
  footer.site{background:none;padding-top:24px}
}