@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;800&display=swap');

:root{
  --ink:#0b0d0c; --paper:#f4f5ee; --lime:#d9fa85; --font:'DM Sans',sans-serif;
  --g-tint:rgba(255,255,255,.085);
  --g-line:rgba(255,255,255,.16);
  --g-spec:rgba(255,255,255,.55);
  --measure:66ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#eef2e8;font-family:var(--font);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Manrope,var(--font);font-weight:500;letter-spacing:-.05em;margin:0}
em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.045em}
::selection{background:var(--lime);color:#111}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:6px}

/* ============ the light behind the glass ============
   Glass only reads as glass when something luminous sits behind it, so the page
   is lit by a controlled colour field rather than by the project screenshot —
   a light UI blurred to full-bleed washes the whole page out. */
.ambient{position:fixed;inset:0;z-index:-3;overflow:hidden;
  background:
    radial-gradient(48% 38% at 14% 6%,  color-mix(in srgb, var(--accent,#9fd356) 72%, transparent), transparent 66%),
    radial-gradient(44% 34% at 88% 16%, color-mix(in srgb, var(--accent2,#6ea8fe) 62%, transparent), transparent 68%),
    radial-gradient(52% 40% at 74% 74%, color-mix(in srgb, var(--accent,#9fd356) 40%, transparent), transparent 70%),
    radial-gradient(40% 34% at 22% 88%, color-mix(in srgb, var(--accent2,#6ea8fe) 34%, transparent), transparent 70%),
    #070a09;
  filter:saturate(125%)}
.ambient .drift{position:absolute;inset:-25%;
  background:
    radial-gradient(34% 30% at 40% 30%, color-mix(in srgb, var(--accent2,#6ea8fe) 45%, transparent), transparent 70%),
    radial-gradient(30% 26% at 66% 62%, color-mix(in srgb, var(--accent,#9fd356) 40%, transparent), transparent 70%);
  opacity:.75;animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.14)}}
/* pulled back down so type stays legible over it */
.ambient .vignette{position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(7,10,9,.42) 0%, rgba(7,10,9,.66) 46%, rgba(7,10,9,.88) 100%),
    radial-gradient(130% 95% at 50% 0%, transparent 30%, rgba(5,7,6,.72) 100%)}
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

/* ============ the glass itself ============ */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(142deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.055) 46%, rgba(255,255,255,.085) 100%);
  backdrop-filter:blur(40px) saturate(185%);
  -webkit-backdrop-filter:blur(40px) saturate(185%);
  border:1px solid var(--g-line);
  border-radius:28px;
  box-shadow:
    inset 0 1px 0 var(--g-spec),            /* specular top edge */
    inset 0 -1px 0 rgba(255,255,255,.07),
    inset 1px 0 0 rgba(255,255,255,.1),
    inset -1px 0 0 rgba(255,255,255,.1),
    0 28px 70px rgba(0,0,0,.5),
    0 4px 14px rgba(0,0,0,.3);
}
/* the lens: a bright rim that catches light at the top-left, as real glass does */
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(140deg, rgba(255,255,255,.4), rgba(255,255,255,0) 26%, rgba(255,255,255,0) 72%, rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
/* a slow specular sweep, the highlight moving across a curved surface */
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(130% 80% at var(--mx,22%) var(--my,-10%), rgba(255,255,255,.17), transparent 58%)}
.glass>*{position:relative;z-index:2}

.glass-soft{background:linear-gradient(142deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 40px rgba(0,0,0,.34)}

/* ============ chrome ============ */
.topbar{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:40;
  width:min(1180px,calc(100% - 36px));display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:11px 13px 11px 20px;border-radius:50px}
.topbar .back{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:550}
.topbar .back span{font-size:17px;transition:transform .25s}
.topbar .back:hover span{transform:translateX(-4px)}
.topbar .where{font-size:11px;letter-spacing:1.6px;color:#b9c4b2;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:50px;font-size:11.5px;
  letter-spacing:1.3px;text-transform:uppercase;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.17);white-space:nowrap}
.pill.live{background:rgba(190,240,120,.17);border-color:rgba(200,245,130,.4);color:#dcfa9a}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}

.wrap{width:min(1180px,calc(100% - 36px));margin:0 auto}

/* ============ hero ============ */
.hero{padding:170px 0 30px}
.eyebrow{font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:#aebaa6;margin:0 0 26px}
.eyebrow b{color:var(--lime);font-weight:600}
.hero h1{font-size:clamp(40px,5.8vw,78px);line-height:1.05;margin:0 0 26px;max-width:19ch}
.hero h1 em{color:var(--lime)}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.6;color:#d3dbcb;max-width:52ch;margin:0}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{font-size:12.5px;padding:7px 14px;border-radius:50px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);color:#cfd8c6}

/* the headline number */
.figure{margin-top:46px;padding:30px 34px;display:flex;align-items:baseline;gap:26px;flex-wrap:wrap}
.figure strong{font-family:Manrope,sans-serif;font-size:clamp(50px,7vw,86px);font-weight:500;
  letter-spacing:-.05em;line-height:.95;color:#fff;
  text-shadow:0 2px 30px rgba(217,250,133,.28)}
.figure span{font-size:14.5px;color:#c3ccb9;max-width:34ch;line-height:1.5}

/* ============ sections ============ */
.section{padding:76px 0 0}
.kicker{display:flex;align-items:center;gap:15px;font-size:11.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:#9fae95;margin-bottom:26px}
.kicker i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent);font-style:normal}
.prose{font-size:clamp(19px,2.1vw,24px);line-height:1.6;color:#e4ead9;max-width:var(--measure);
  letter-spacing:-.018em;font-weight:400}
.prose.small{font-size:17.5px;line-height:1.72;color:#ccd5c3}

/* the mechanism drawing */
.mech{margin-top:38px;padding:34px 30px}
.mech svg{width:100%;height:auto;display:block;overflow:visible}
.mech figcaption{margin-top:22px;font-size:13px;color:#a8b39e;letter-spacing:.4px;text-align:center}

/* detail cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px;margin-top:38px}
.card{padding:30px 30px 32px}
.card h3{font-size:21px;margin-bottom:13px;letter-spacing:-.04em}
.card p{margin:0;font-size:16px;line-height:1.7;color:#c9d2bf}
.card .idx{font-size:11px;letter-spacing:2px;color:var(--lime);opacity:.75;display:block;margin-bottom:14px}

/* outcome */
.outcome{margin-top:40px;padding:38px 40px;border-left:2px solid rgba(217,250,133,.5)}
.outcome .prose{max-width:58ch}

/* footer nav */
.next{margin:86px 0 90px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.next small{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#a3ae99;margin-bottom:9px}
.next strong{font-family:Manrope,sans-serif;font-size:25px;font-weight:500;letter-spacing:-.04em}
.next a.go{display:inline-flex;align-items:center;gap:11px;padding:14px 24px;border-radius:50px;
  background:var(--lime);color:#111;font-weight:600;font-size:14.5px;transition:transform .25s}
.next a.go:hover{transform:translateY(-3px)}

.shotbox{margin-top:38px;padding:14px;border-radius:26px}
.shotbox img{width:100%;display:block;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.shotcap{margin-top:16px;padding:0 6px 4px;font-size:12px;letter-spacing:.4px;color:#a8b39e;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media(max-width:820px){
  body{font-size:16px}
  .hero{padding:132px 0 10px}
  .figure{padding:24px 24px;gap:16px}
  .mech{padding:22px 16px}
  .card{padding:24px 22px 26px}
  .outcome{padding:28px 24px}
  .next{padding:24px 24px}
  .topbar{padding:9px 11px 9px 16px;top:12px}
  .topbar .where{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ motion ============
   Everything here is opt-in: the .motion class is only set by script, and only
   when the visitor has not asked for reduced motion. Without it the page is
   fully laid out and legible, which is also what a crawler and a print sheet see. */
.motion .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.motion .reveal.in{opacity:1;transform:none}
.motion .reveal[data-d="1"]{transition-delay:.08s}
.motion .reveal[data-d="2"]{transition-delay:.16s}
.motion .reveal[data-d="3"]{transition-delay:.24s}

/* the figure counts up from its own baseline rather than sliding */
.motion .figure{transform-origin:left center}
.motion .figure.in strong{animation:fig .9s cubic-bezier(.16,1,.3,1) both}
@keyframes fig{from{opacity:0;transform:translateY(14px) scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* the diagram draws itself: strokes stream in, then the nodes surface */
.motion .mech svg .flow{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.motion .mech.in svg .flow{animation:draw 1.1s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.motion .mech svg rect,.motion .mech svg text,.motion .mech svg circle,.motion .mech svg path:not(.flow){opacity:0}
.motion .mech.in svg rect,.motion .mech.in svg text,.motion .mech.in svg circle,.motion .mech.in svg path:not(.flow){
  animation:surface .7s ease-out forwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes surface{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the colour field drifts against the scroll, a long way behind the glass */
.ambient{will-change:transform}
.motion .ambient{transform:translate3d(0,calc(var(--sy,0) * -.045px),0) scale(1.06)}

@media(prefers-reduced-motion:reduce){
  .motion .reveal{opacity:1!important;transform:none!important}
  .motion .mech svg *{opacity:1!important;animation:none!important}
  .motion .ambient{transform:none!important}
  .ambient .drift{animation:none!important}
}

/* the project name leads; the slogan follows it */
.hero-slogan{font-family:Manrope,var(--font);font-size:clamp(22px,2.6vw,34px);font-weight:500;
  letter-spacing:-.05em;line-height:1.15;color:#c8d3bd;margin:0 0 22px;max-width:22ch}
.hero-slogan em{color:var(--lime)}
.byline{font-size:13.5px;color:#a9b49e;margin:18px 0 0;letter-spacing:.2px}
.byline strong{color:#dbe3d2;font-weight:600}

/* author block — the prose an assistant can quote */
.case-foot{margin-top:70px;padding:32px 34px;border-radius:22px}
.case-foot p{margin:0;font-size:15px;line-height:1.75;color:#c4cebb;max-width:70ch}
.case-foot-links{margin-top:18px!important;font-size:13px;color:#98a48f}
.case-foot-links a{border-bottom:1px solid #ffffff2e}
.case-foot-links a:hover{color:var(--lime);border-color:var(--lime)}
/* reserve the image box so it cannot shift layout while loading */
.shotbox img{aspect-ratio:16/10;object-fit:cover}
@media(max-width:820px){.case-foot{padding:24px 22px}.hero-slogan{font-size:21px}}