/* The look of the home page and the product pages, in the site's Apple-style language: white and light grey
   sections, big plain headlines, white tiles with rounded corners, one olive accent, and dark only for the
   demo band and the vision's closing scene. Inline SVG drawings carry the classes under Motion; everything moves
   only when the visitor allows motion. */
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --bg:#ffffff;--bg-alt:#f5f5f7;--ink:#1d1d1f;--ink-2:#424245;--muted:#6e6e73;--line:#d2d2d7;--line-soft:rgba(0,0,0,.08);
  --black:#000;--dark:#161617;--on-dark:#f5f5f7;--on-dark-muted:#a1a1a6;--line-dark:rgba(255,255,255,.14);
  --olive-900:#2f380a;--olive-800:#434F10;--olive-700:#5A6A17;--olive-600:#71831F;--olive-500:#8FA232;--olive-300:#C9D46F;--olive-200:#DCE39C;--olive-100:#EEF1D3;--olive-50:#f6f8e8;
  --lime:#D4DF7F;--lime-hi:#e7eeb0;--slate:#3f7f8c;--amber:#d9822b;
  --r-lg:30px;--r-md:22px;--maxw:1120px;--wide:1360px;--gutter:clamp(16px,4vw,40px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.25,.1,.25,1);--ease-out:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
/* Anchor links land below the sticky bar. This sits on the targets, not as scroll-padding on html, because scroll-padding
   also moves the page whenever something inside the bar itself takes focus. */
:where(main [id]){scroll-margin-top:64px}
html.smooth{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700;color:var(--ink);text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--olive-200);color:var(--ink)}
:focus-visible{outline:2px solid var(--olive-600);outline-offset:3px;border-radius:8px}
.dark :focus-visible{outline-color:var(--lime)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:500;transition:top .2s}
.skip-link:focus{top:10px}
[hidden]{display:none!important}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.nw{white-space:nowrap}
a,button,label{-webkit-tap-highlight-color:transparent}
/* A drawing can come in two layouts: one for wide screens, one for phones */
.only-narrow{display:none}
@media (max-width:640px){.only-wide{display:none}.only-narrow{display:block}}
.wrap.wide{max-width:calc(var(--wide) + 2 * var(--gutter))}

/* ---------- Type ---------- */
.kicker{font-size:clamp(1.05rem,.98rem + .35vw,1.3rem);font-weight:600;letter-spacing:-.01em;color:var(--olive-700)}
.dark .kicker{color:var(--lime)}
.h1{margin-top:12px;font-size:clamp(2.6rem,1.2rem + 5vw,4.75rem);line-height:1.02;letter-spacing:-.035em}
.h2{margin-top:10px;font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);line-height:1.06;letter-spacing:-.03em}
.h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.8rem);line-height:1.15;letter-spacing:-.022em}
.grad{background:linear-gradient(92deg,var(--olive-800) 0%,var(--olive-700) 50%,var(--olive-600) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark .grad,.space .grad{background-image:linear-gradient(92deg,#f5f5f7 0%,var(--lime) 60%,#bfd05a 100%)}
.lead{margin-top:20px;max-width:30em;font-size:clamp(1.12rem,1rem + .55vw,1.5rem);line-height:1.38;letter-spacing:-.015em;color:var(--ink-2);font-weight:500}
.dark .lead{color:var(--on-dark-muted)}
.hero .lead{text-wrap:balance}
.center{text-align:center}
.center .lead{margin-inline:auto}
.muted{color:var(--muted)}
.src{margin-top:22px;font-size:.8rem;line-height:1.5;color:var(--muted)}
.src a{color:inherit;text-underline-offset:2px}
.dark h2,.dark h3{color:var(--on-dark)}

/* ---------- Buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:30px;align-items:center}
.center .btns,.hero .btns{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 24px;border-radius:999px;border:1px solid transparent;font:500 1.0625rem/1 var(--font);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s,color .2s}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-glow{background:var(--olive-700);color:#fff}
.btn-glow:hover{background:var(--olive-800)}
.dark .btn-glow{background:var(--lime);color:var(--black)}
.dark .btn-glow:hover{background:var(--lime-hi)}
.btn-line{border-color:var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--ink)}
.dark .btn-line{background:transparent;border-color:rgba(255,255,255,.35);color:var(--on-dark)}
.dark .btn-line:hover{border-color:#fff}
.btn[disabled]{opacity:.55;cursor:progress}
/* Apple-style text link with a chevron */
.more{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:1.0625rem;font-weight:500;color:var(--olive-700);text-decoration:none}
.more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.more:hover svg{transform:translateX(2px)}
.dark .more{color:var(--lime)}

/* ---------- Sections ---------- */
.sec{position:relative;padding-block:clamp(80px,10vw,140px)}
.sec.alt{background:var(--bg-alt)}
.sec.dark{background:var(--black);color:var(--on-dark-muted)}
.sec-head{max-width:860px}
.sec-head.center{margin-inline:auto}

/* Hero: words centred, one big drawing below, as a product page on apple.com */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(40px,6vw,80px);overflow:hidden;text-align:center}
.hero-copy{max-width:900px;margin-inline:auto}
.hero .lead{margin-inline:auto;max-width:30em}
.hero-art{max-width:760px;margin:clamp(36px,5vw,64px) auto 0}
.art{position:relative;width:100%}
.art svg{width:100%;height:auto;overflow:visible}

/* Tiles: a drawing on a soft panel, a few words, an arrow */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:699px){.cards.two{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:#fff;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 0 0 1px var(--line-soft);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.sec:not(.alt) .card{background:var(--bg-alt);box-shadow:none}
a.card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(0,0,0,.25),0 0 0 1px var(--line-soft)}
.card .pic{aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 1px 1px,rgba(74,68,65,.12) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(180deg,var(--olive-50),#fbfcf4)}
.card .pic svg{width:84%;height:84%}
.card .pic img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.card .pic.ic{aspect-ratio:16/7}.card .pic.ic svg{width:auto;height:92%}}
/* Photos drawn below the detail they hold, never enlarged. The gripper photos are the 560 px copies from the
   decks and carry about 400 px of real detail, so --cap limits each one: 200 CSS px on a PC or tablet (400
   device px on a 2x screen), 140 CSS px on any screen of 2.5x or more (420 on a 3x phone, portrait or
   landscape; the file's own size on a 4x one). Below 600 px the row itself is capped at two photos, so phones
   always show two per row. Every screen downsamples, so the photos look crisp instead of soft. Raise the caps
   only with larger source files */
.grips{--gg:clamp(12px,2vw,24px);--cap:200px;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3vw,32px) var(--gg);margin-top:clamp(36px,5vw,56px)}
.grip{margin:0;flex:0 0 min(var(--cap),calc((100% - 3 * var(--gg)) / 4))}
.grip img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);background:var(--bg-alt)}
.grip figcaption{margin-top:12px;text-align:center}
.grip figcaption b{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.grip figcaption span{display:block;margin-top:2px;font-size:.92rem;line-height:1.35;color:var(--muted);text-wrap:balance}
@media (min-resolution:2.5dppx),(-webkit-min-device-pixel-ratio:2.5){.grips{--cap:140px}}
@media (max-width:600px){.grips{--cap:140px;max-width:calc(2 * var(--cap) + var(--gg));margin-inline:auto}.grip{flex-basis:calc((100% - var(--gg)) / 2)}}
.card .body{display:flex;flex-direction:column;gap:6px;padding:22px 24px 26px}
.card.has-go .body{padding-right:72px}
.card .tag{align-self:flex-start;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--olive-700)}
.card b{font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem);line-height:1.15;letter-spacing:-.022em;font-weight:700}
.card .body > span:not(.tag){font-size:1.02rem;line-height:1.4;color:var(--ink-2)}
.card .go{position:absolute;right:22px;bottom:24px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--olive-700);box-shadow:0 0 0 1px var(--line);transition:background .3s,color .3s}
.sec:not(.alt) .card .go{background:#fff}
.card .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.card:hover .go{background:var(--olive-700);color:#fff;box-shadow:none}

/* Big numbers */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.stat{padding:clamp(24px,3vw,40px) 24px;border-radius:var(--r-lg);background:#fff;text-align:center}
.sec:not(.alt) .stat{background:var(--bg-alt)}
.stat b{display:block;font-size:clamp(2.8rem,1.8rem + 3.4vw,4.6rem);line-height:1;letter-spacing:-.045em;font-weight:700;color:var(--olive-700)}
.stat span{display:block;margin:12px auto 0;max-width:18em;font-size:1rem;line-height:1.35;font-weight:500;color:var(--ink);text-wrap:balance}

/* Steps joined by a line */
.flow{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px;margin-top:clamp(40px,5vw,64px)}
.flow::before{content:"";position:absolute;left:calc(50% / var(--n,3));right:calc(50% / var(--n,3));top:35px;height:2px;background:linear-gradient(90deg,var(--olive-600),var(--olive-300) 70%,var(--olive-200));border-radius:2px}
.flow li{position:relative;text-align:center;padding:0 6px}
.flow .node{position:relative;display:grid;place-items:center;width:72px;height:72px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid var(--olive-600);color:var(--olive-800);box-shadow:0 0 0 8px var(--bg)}
.sec.alt .flow .node{box-shadow:0 0 0 8px var(--bg-alt)}
.flow .node svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow .node.hot{background:var(--olive-700);border-color:var(--olive-700);color:#fff}
.flow b{display:block;margin-top:16px;font-size:1.12rem;letter-spacing:-.02em;font-weight:600}
.flow small{display:block;margin-top:3px;font-size:.95rem;color:var(--ink-2)}
.flow .when{display:block;margin:18px 0 -8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--olive-700)}
@media (max-width:640px){
  .flow{grid-template-columns:1fr;gap:28px;justify-items:start}
  .flow::before{left:35px;right:auto;top:36px;bottom:36px;width:2px;height:auto;background:linear-gradient(180deg,var(--olive-600),var(--olive-200))}
  .flow li{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;text-align:left;padding:0}
  .flow .node,.sec.alt .flow .node{margin:0;box-shadow:none}
  .flow b{margin-top:0}
  .flow .when{margin:0 0 4px}
}

/* A panel that holds one big drawing */
.stage{margin-top:clamp(36px,5vw,56px);padding:clamp(16px,3vw,40px);border-radius:var(--r-lg);background:#fff}
.sec:not(.alt) .stage{background:var(--bg-alt)}
.stage svg{width:100%;height:auto}
.stage-cap{margin-top:18px;text-align:center;font-size:.95rem;color:var(--muted)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:899px){.duo{grid-template-columns:1fr}.duo .center-m{text-align:center}}

/* Chips of short facts */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pills.center,.center .pills{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line-soft);font-size:.95rem;font-weight:500;color:var(--ink);text-align:left}
.sec:not(.alt) .pill{background:var(--bg-alt);box-shadow:none}
.pill svg{width:16px;height:16px;fill:none;stroke:var(--olive-700);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The closing invitation on every page: a dark tile */
.band{position:relative;overflow:hidden;margin-block:clamp(56px,8vw,110px);padding:clamp(44px,6vw,88px) clamp(22px,5vw,64px);border-radius:var(--r-lg);text-align:center;background:var(--black);color:var(--on-dark-muted)}
.band::before{content:"";position:absolute;inset:auto -20% -60%;height:120%;background:radial-gradient(ellipse at 50% 100%,rgba(212,223,127,.22),transparent 60%);pointer-events:none}
.band > *{position:relative}
.band .kicker{color:var(--lime)}
.band .h2{max-width:18ch;margin-inline:auto;color:var(--on-dark)}
.band .lead{margin-inline:auto;color:var(--on-dark-muted)}
.band .btns{justify-content:center}
.band .btn-glow{background:var(--lime);color:var(--black)}
.band .btn-glow:hover{background:var(--lime-hi)}
.band .btn-line{background:transparent;border-color:rgba(255,255,255,.35);color:var(--on-dark)}
.band .btn-line:hover{border-color:#fff}
.band .fine{margin-top:22px;font-size:.8rem;color:var(--on-dark-muted)}
.band .fine a{color:var(--on-dark);text-underline-offset:3px}
.band :focus-visible{outline-color:var(--lime)}

/* ---------- Motion ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dash{to{stroke-dashoffset:-40}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}}
@keyframes squeezeL{0%,100%{transform:translateX(-14px)}45%,60%{transform:translateX(0)}}
@keyframes squeezeR{0%,100%{transform:translateX(14px)}45%,60%{transform:translateX(0)}}
@keyframes stiff{0%,100%{transform:scaleX(.18)}45%,60%{transform:scaleX(1)}}
@keyframes needle{0%,100%{transform:rotate(-62deg)}50%{transform:rotate(48deg)}}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
/* Helpers the drawings use. transform-box keeps each SVG part turning around its own centre. */
.spin,.spinr,.float,.ping{transform-box:fill-box;transform-origin:center}
.spin{animation:spin 40s linear infinite}
.spinr{animation:spinr 60s linear infinite}
.spin.fast{animation-duration:14s}
.float{animation:float 6s ease-in-out infinite}
.dash{stroke-dasharray:4 6;animation:dash 1.6s linear infinite}
.blink{animation:blink 2.4s ease-in-out infinite}
.glow{animation:glow 3.2s ease-in-out infinite}
.ping{animation:ping 2.8s ease-out infinite}
/* common.js marks a drawing paused while it is off screen or the tab is hidden, so phones do not spend battery on it */
svg.paused *{animation-play-state:paused}
/* Parts that turn around a set point say where with an inline transform-origin */
.sway,.needle{transform-box:view-box}
.sway{animation:sway 5s ease-in-out infinite}
.needle{animation:needle 7s ease-in-out infinite}
.sqL,.sqR,.stiff{transform-box:fill-box;transform-origin:left center}
.sqL{animation:squeezeL 4s ease-in-out infinite}
.sqR{animation:squeezeR 4s ease-in-out infinite}
.stiff{animation:stiff 4s ease-in-out infinite}
svg text{font-family:var(--font)}
svg .mono{font-family:var(--mono);letter-spacing:.12em}
.dl1{animation-delay:.4s}.dl2{animation-delay:.8s}.dl3{animation-delay:1.2s}.dl4{animation-delay:1.6s}.dl5{animation-delay:2s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.smooth{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}
@media print{.js .reveal{opacity:1!important;transform:none!important}}

/* Safety at Dunster: the six duties, longest bar first */
.duties{display:grid;gap:10px;max-width:780px;margin:clamp(32px,5vw,52px) auto 32px}
.duties li{display:flex;align-items:center;gap:16px;width:var(--w);min-width:min(100%,300px);padding:14px 20px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line-soft)}
.sec:not(.alt) .duties li{background:var(--bg-alt);box-shadow:none}
.duties .n{flex:none;width:1.3em;font:700 1.4rem/1 var(--font);color:var(--olive-700)}
.duties .t{font-weight:600;line-height:1.3}
.duties .t a{color:inherit;text-decoration:none}
.duties .t a:hover,.duties .t a:focus-visible{color:var(--olive-700);text-decoration:underline;text-underline-offset:3px}

/* Vision: a starfield behind the closing line, the one dark scene */
.space{display:grid;align-items:center;min-height:clamp(400px,48vw,560px);overflow:hidden;background:var(--black)}
.space-art{position:absolute;inset:0;pointer-events:none}
.space-art svg{width:100%;height:100%}
.space-copy{position:relative}
.space .h2{color:var(--on-dark)}
.space .kicker{color:var(--lime)}