/* ==========================================================================
   Coppertec 2.0 · V20 · site.css
   One family (Onest), one spot colour (copper), neutrals do the work.
   Every section carries a tone class (tone-white, tone-panel, tone-warm,
   tone-dark). Components read the tone's variables.
   Dark grounds are technical: near-black with the contoured dot field, never a
   warm wash. The Green section is the one deliberate break in the palette: a green
   bloom on a light ground, one strong grainy gradient, nowhere else.
   ========================================================================== */

/* Fonts: css/fonts.css (embedded) */

/* ---------- Tokens ---------- */
:root{
  --ink:#0C0E12;  --ink-2:#14171D;  --ink-3:#1E222A;  --ink-4:#2A2E36;
  --paper:#F4F4F2; --paper-2:#EBEBE8; --paper-3:#DEDEDA; --white:#FFFFFF;
  --grey:#8A8D93; --grey-2:#5E6167; --grey-d:#9A9DA4;

  --copper:#B88356; --copper-2:#D3A075; --copper-3:#8F6640;  /* the brand copper, sampled from the icon */
  --teal:#00D2BE;

  /* data roles (live figures, sparklines, indicators). Teal theme re-points. */
  --data:var(--copper-2); --data-dim:rgba(211,160,117,.35);

  --max:1440px; --margin:clamp(24px,5.5vw,96px); --gutter:24px;

  --font:"Onest",Inter,"Helvetica Neue",Arial,sans-serif;
  --fs-display:clamp(38px,4.6vw,72px);
  --fs-h1:clamp(30px,3.4vw,48px);
  --fs-h2:clamp(19px,1.5vw,24px);
  --fs-body:15.5px;
  --fs-small:13.5px; --fs-label:11px;
  --track-label:.14em;

  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.6s;
}
html[data-theme="teal"]{--data:var(--teal);--data-dim:rgba(0,210,190,.32)}

/* ---------- Tones ---------- */
.tone-light{--bg:var(--paper);--bg-2:var(--white);--fg:var(--ink);--fg-2:var(--grey-2);--fg-3:var(--grey);--hair:var(--paper-3);--hair-2:rgba(12,14,18,.14);--acc:var(--copper-3);--btn-line:var(--ink);--panel:var(--paper-2)}
.tone-white{--bg:var(--white);--bg-2:var(--paper);--fg:var(--ink);--fg-2:var(--grey-2);--fg-3:var(--grey);--hair:var(--paper-3);--hair-2:rgba(12,14,18,.14);--acc:var(--copper-3);--btn-line:var(--ink);--panel:var(--paper-2)}
.tone-panel{--bg:var(--paper-2);--bg-2:var(--paper);--fg:var(--ink);--fg-2:var(--grey-2);--fg-3:var(--grey);--hair:rgba(12,14,18,.1);--hair-2:rgba(12,14,18,.16);--acc:var(--copper-3);--btn-line:var(--ink);--panel:var(--paper)}
.tone-warm{--bg:#E8E6E1;--bg-2:var(--paper);--fg:var(--ink);--fg-2:#4A4C51;--fg-3:#6E7076;--hair:rgba(12,14,18,.14);--hair-2:rgba(12,14,18,.2);--acc:var(--copper-3);--btn-line:var(--ink);--panel:rgba(255,255,255,.45)}
.tone-green{--bg:#E1E4DF;--bg-2:var(--paper);--fg:var(--ink);--fg-2:#44494A;--fg-3:#66706A;--hair:rgba(12,14,18,.14);--hair-2:rgba(12,14,18,.2);--acc:#137A3F;--btn-line:var(--ink);--panel:rgba(255,255,255,.45)}
.tone-dark{--bg:var(--ink);--bg-2:var(--ink-2);--fg:var(--paper);--fg-2:var(--grey-d);--fg-3:var(--grey-d);--hair:var(--ink-3);--hair-2:rgba(255,255,255,.1);--acc:var(--copper-2);--btn-line:rgba(244,244,242,.35);--panel:var(--ink-2)}
[class*="tone-"]{background:var(--bg);color:var(--fg)}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--copper);color:var(--white)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--margin)}
.section{position:relative;padding-block:clamp(88px,10vw,160px);overflow:clip}
.section > .wrap{position:relative;z-index:2}

/* ---------- Type ---------- */
.eyebrow{font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3);display:flex;align-items:center;gap:12px}
.display{font-size:var(--fs-display);font-weight:500;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:var(--fs-h1);font-weight:400;line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.h2{font-size:var(--fs-h2);font-weight:400;line-height:1.25;letter-spacing:-.008em;text-wrap:balance}
.lede{font-size:clamp(15px,1.1vw,16.5px);line-height:1.55;max-width:38ch;text-wrap:pretty;color:var(--fg-2);font-weight:300}
.body{max-width:44ch;color:var(--fg-2);text-wrap:pretty;font-size:var(--fs-body);line-height:1.6}
.small{font-size:var(--fs-small);line-height:1.45}
.quiet{color:var(--fg-3)}
.tbc{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);border:1px solid currentColor;border-radius:2px;padding:1px 5px;vertical-align:middle;margin-left:6px;opacity:.85}
.link{font-size:var(--fs-body);border-bottom:1px solid var(--copper);padding-bottom:3px;transition:color var(--dur)}
.link:hover{color:var(--acc)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 22px 0 24px;border-radius:2px;font-size:13.5px;font-weight:400;border:1px solid var(--btn-line);color:var(--fg);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:hover svg{transform:translateX(4px)}
.btn--accent{background:var(--copper);border-color:var(--copper);color:var(--white)}
.btn--accent:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* ---------- Grounds ----------
   The bloom: one strong, grainy, high-end gradient on the light Green ground. Nowhere else. */
.ground{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* Green: ink on eco paper, drawn in WebGL (site.js inkBleed). The static fallback is the paper with the two inks already in. */
.ground--ink{background:#EFEADF url("../assets/img/paper.jpg") center/1024px 1024px repeat}
.ground--ink canvas{width:100%;height:100%;display:block}
.ground--ink.is-static{background:radial-gradient(62% 62% at 100% 100%,#0F7A3A 0%,#2E9A52 30%,rgba(239,234,223,0) 70%),radial-gradient(62% 42% at 10% 12%,#0F7A3A 0%,#2E9A52 34%,rgba(239,234,223,0) 70%),#EFEADF url("../assets/img/paper.jpg") center/1024px 1024px repeat}
.ground--grain::after{content:"";position:absolute;inset:-50%;width:200%;height:200%;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.34;mix-blend-mode:overlay;animation:grain 1.8s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1.5%)}66%{transform:translate(1.5%,-2%)}100%{transform:translate(0,0)}}

/* two dark sections on one continuous ground */
.dark-run{position:relative;background:var(--ink)}
.dark-run > .dots{position:absolute;inset:0}
.dark-run > .section{background:transparent;position:relative;z-index:1}

/* the contoured dot field (technical black), WebGL */
.dots{position:absolute;inset:0;z-index:0;pointer-events:none}
.dots canvas{width:100%;height:100%}

/* the colour bar strip: a copper block laid over image and page, the elements behind it showing through */
.bar{position:absolute;background:var(--copper);mix-blend-mode:multiply;pointer-events:none;z-index:2}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.lines .ln{display:block;overflow:hidden}
.lines .ln > span{display:block;transform:translateY(110%);transition:transform 1s var(--ease-out)}
.lines.in .ln > span{transform:none}
.lines .ln:nth-child(2) > span{transition-delay:.08s}.lines .ln:nth-child(3) > span{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.drag svg{animation:none}.rv{opacity:1;transform:none;transition:none}.ground--grain::after{animation:none}.lines .ln > span{transform:none}}

/* ==========================================================================
   Header: logo left, nav right, with room to breathe at both edges
   ========================================================================== */
.header{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;display:flex;align-items:center;color:var(--ink);transition:color var(--dur),background var(--dur)}
.header.is-dark{color:var(--paper)}
.header.is-scrolled{background:rgba(244,244,242,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.header.is-scrolled.is-dark{background:rgba(12,14,18,.6)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none;padding-inline:clamp(28px,3.6vw,60px)}
.brand{display:flex;align-items:center;gap:14px;height:36px}
.brand .mark{height:28px;width:28px}
.brand .wordmark{height:12px}
.brand .wordmark svg{height:100%;width:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;opacity:.8;transition:opacity var(--dur)}
.nav__cta{display:inline-flex;align-items:center;gap:8px}
.nav__cta::after{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.nav a:hover{opacity:1}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.menu-btn span{display:block;width:22px;height:1.5px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}

/* the dynamic mark */
.mark svg{width:100%;height:100%;overflow:visible}
.mark .d{transform-box:fill-box;transform-origin:center;transition:transform 1.1s var(--ease-out),opacity 1.1s var(--ease-out)}
.mark.is-scattered .d.r1{transform:scale(.55) translate(0,-6px);opacity:.5}
.mark.is-scattered .d.r2{transform:scale(.4) translate(0,10px);opacity:.25}
.mark.is-scattered .d.r3{transform:scale(0) translate(0,20px);opacity:0}
.mark.is-breathing .d{animation:markbreath 6s var(--ease) infinite}
.mark.is-breathing .d.r1{animation-delay:.25s}.mark.is-breathing .d.r2{animation-delay:.5s}.mark.is-breathing .d.r3{animation-delay:.75s}
@keyframes markbreath{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ==========================================================================
   Landing: the facility pinned full-viewport. The four beats top-left, the
   annotations pass on the right as the model turns to each part.
   ========================================================================== */
.land{position:relative}
.land__sticky{position:sticky;top:0;height:100svh;width:100%;overflow:hidden;isolation:isolate}
.land__fig{position:absolute;inset:0;margin:0;z-index:1}
.land__fig .three{position:absolute;inset:0}
.land__fig canvas{width:100%;height:100%;display:block}
.land__copy{position:absolute;left:var(--margin);top:calc(72px + clamp(28px,5vh,64px));z-index:3;display:grid;gap:18px;max-width:min(52vw,640px);pointer-events:none}
.land__copy > *{pointer-events:auto}
.land__beats{position:relative;width:min(100%,16ch);min-height:2.1em;font-size:var(--fs-display)}
.beat{position:absolute;left:0;right:0;top:0;opacity:0;visibility:hidden;pointer-events:none;font-size:inherit;margin:0}
.beat.is-on{position:relative;opacity:1;visibility:visible}
.beat.is-off{visibility:visible}
.beat .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em}
.beat .w > span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out)}
.beat.is-on .w > span{transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.beat.is-off .w > span{transform:translateY(-110%);transition:transform .6s var(--ease)}
.land__progress{display:flex;gap:6px}
.land__progress i{display:block;width:30px;height:2px;background:var(--hair-2);position:relative;overflow:hidden;border-radius:1px}
.land__progress i::after{content:"";position:absolute;inset:0;background:var(--copper);transform:scaleX(0);transform-origin:left}
.land__progress i.is-on::after{animation:fill var(--beat-dur,5.2s) linear forwards}
.land__progress i.is-done::after{transform:none}
@keyframes fill{to{transform:scaleX(1)}}
.land__copy .lede{margin-top:4px;padding-top:14px;border-top:1px solid var(--hair-2)}
.land__actions{display:flex;gap:28px;flex-wrap:wrap}
.land__nudge{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(18px,3vh,32px);z-index:6;display:flex;align-items:stretch;gap:8px;transition:opacity .6s}
.land__hint{cursor:pointer;flex:none;white-space:nowrap;height:40px;padding:0 16px 0 18px;background:var(--copper);color:var(--white);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:12px;border-radius:2px;animation:nudgeflash 1.6s var(--ease) infinite,nudgedown 1.6s var(--ease) infinite}
.land__hint i{flex:none;width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin-top:-4px;opacity:1;animation:chevdown 1.6s var(--ease) infinite}
@keyframes nudgedown{0%,100%{transform:translateY(0)}55%{transform:translateY(6px)}}
@keyframes chevdown{0%{transform:translateY(-3px) rotate(-45deg);opacity:.35}45%{transform:translateY(3px) rotate(-45deg);opacity:1}100%{transform:translateY(5px) rotate(-45deg);opacity:0}}
.land__hint .on-mob{display:none}
.land__skip{cursor:pointer;flex:none;white-space:nowrap;height:40px;padding:0 14px 0 16px;border:1px solid var(--copper);color:var(--copper-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:8px;border-radius:2px;transition:background var(--dur),color var(--dur)}
.land__skip svg{width:14px;height:14px}
.land__skip:hover{background:var(--copper);color:var(--white)}
@keyframes nudgeflash{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(184,131,86,.55)}50%{opacity:.72;box-shadow:0 0 0 10px rgba(184,131,86,0)}}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.land__steps{position:relative;margin-top:-100svh;z-index:2;pointer-events:none}
.land__steps li{height:38svh;display:flex;align-items:center;justify-content:flex-end;padding:0 var(--margin)}
/* the Overview step fills the first screen (it was li:first-child until the brand heading became the first li in V13, which cut it to a normal step and put point 01 on screen at load) */
.land__steps li[data-step="0"]{height:100svh;align-items:flex-end;padding-bottom:9vh}
.land__steps li[data-step="0"] .ann{max-width:30ch}
.ann{max-width:34ch;pointer-events:auto;opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);padding-left:24px;border-left:1px solid var(--hair-2);position:relative}
.ann::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:28px;background:var(--copper)}
.land__steps li.is-on .ann{opacity:1;transform:none}
.ann b{display:block;font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3);margin-bottom:12px}
.ann b em{display:block;font-style:normal;font-size:36px;font-weight:400;letter-spacing:-.02em;color:var(--fg);margin-bottom:10px;text-transform:none}
.ann h2{font-size:var(--fs-h1);font-weight:400;line-height:1.1;letter-spacing:-.012em;margin-bottom:14px}
.ann p{font-size:var(--fs-body);line-height:1.6;color:#C9CCD2}
/* once the brand beat has flashed on the left it comes up on the right as the heading over the points, with a copper rule under it.
   It is a zero-height sticky item at the top of the steps list, so it sits above the points and they scroll up into it and behind it.
   While the brand beat is showing on the left the text steps aside; the rule stays. */
.land__steps li.land__brand{position:sticky;top:0;height:0;padding:0;margin:0;display:block;z-index:3;pointer-events:none;overflow:visible}
/* solid ink from the top of the viewport down to the copper rule: a point scrolling up goes behind the rule and stays hidden */
.land__brand > div{position:absolute;right:var(--margin);top:0;font-size:var(--fs-body);width:calc(34ch + 25px);padding:calc(72px + clamp(28px,5vh,64px)) 0 0 25px;opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);background:var(--ink)}
.land__brand span{display:block;font-size:var(--fs-h1);font-weight:400;line-height:1.1;letter-spacing:-.012em;color:var(--fg);padding-top:6px;transition:opacity .5s var(--ease)}
.land__brand i{display:block;width:100%;height:1px;background:var(--copper);margin-top:16px}
.land.has-brand .land__brand > div{opacity:1;transform:none}
.land.is-leaving .land__brand > div{opacity:0;transform:translateY(-10px);transition-duration:.45s}
.rail{position:absolute;right:var(--margin);top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:3}
.rail li{width:1px;height:18px;background:var(--hair-2);transition:background .4s,height .4s}
.rail li.is-on{background:var(--copper);height:30px}

/* ==========================================================================
   Reel: in a frame at content width, on dark
   ========================================================================== */
.film__head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:end;margin-bottom:40px}
.film__head > div{grid-column:1/8}
.film__head .eyebrow{margin-bottom:20px}
.film__head .quiet{grid-column:9/13;text-align:right;font-size:var(--fs-small)}
.film__frame{position:relative;border-radius:4px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 40px 120px rgba(0,0,0,.5)}
.film__frame video{width:100%;height:100%;object-fit:cover}
.film__sound{position:absolute;right:18px;bottom:18px;z-index:4;height:40px;padding:0 16px;border-radius:3px;border:1px solid rgba(255,255,255,.35);color:var(--paper);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;backdrop-filter:blur(8px);background:rgba(12,14,18,.35);display:inline-flex;align-items:center;gap:8px;transition:background var(--dur)}
.film__sound:hover{background:rgba(255,255,255,.14)}
.film__sound svg{width:14px;height:14px}

/* trust strip */
.strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.strip ul{display:flex;gap:40px;flex-wrap:wrap;padding:18px 0;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3)}
.strip li b{color:var(--fg);font-weight:400;margin-right:8px}

/* ==========================================================================
   Headline-description: label · headline · one paragraph. The section head.
   ========================================================================== */
.hd{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:22px;margin-bottom:clamp(40px,5vw,72px);align-items:start}
.hd__label{grid-column:1/4;font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3);padding-top:8px;display:block}
.hd__title{grid-column:4/12;font-size:var(--fs-h1);font-weight:400;line-height:1.08;letter-spacing:-.015em}
.hd__text{grid-column:4/9;font-size:var(--fs-body);line-height:1.6;color:var(--fg-2);max-width:44ch}
.hd--wide{grid-column:1/13}
.next{display:flex;justify-content:flex-end;margin-top:clamp(40px,5vw,72px)}

/* ==========================================================================
   Range: a modular system, five module types
   ========================================================================== */
.range__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:48px;align-items:start}
.range__intro{grid-column:1/6;display:grid;grid-template-columns:1fr;gap:22px}
.range__intro > *{grid-column:1/-1 !important}
.range__intro .body{max-width:40ch}
.range__intro .hd__title{margin-bottom:6px}
.range__types{grid-column:7/13;display:grid;grid-template-columns:1fr;gap:18px}
.range__types > *{grid-column:1/-1 !important}
.types{display:grid;border-top:1px solid var(--fg)}
.type{display:grid;grid-template-columns:132px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:center;cursor:default;transition:opacity .4s}
.type svg{width:132px;height:auto;color:var(--fg);transition:color .4s}
.type b{display:block;font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:4px}
.type p{font-size:var(--fs-small);color:var(--fg-2);line-height:1.5;max-width:44ch}
.type.is-on svg{color:var(--copper-3)}
.type b .l{transition:color .32s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.type.is-on b .l{color:var(--copper-3)}
.range__feature{position:relative;margin-top:clamp(56px,7vw,110px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:end}
.render{position:relative;overflow:hidden;background:#3a3a3a;border-radius:4px}
.render img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)}
.render:hover img{transform:scale(1.025)}
.frame{position:relative}
.frame .tag > span{color:var(--white)}
.frame--wide{grid-column:1/9}
.render--wide{aspect-ratio:16/9}
.range__note{grid-column:10/13;padding-bottom:48px}
.range__note b{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--fg-2);margin-bottom:10px;padding-top:14px;border-top:1px solid var(--fg)}
.range__note p{font-size:var(--fs-small);color:var(--fg-2);max-width:30ch}
.bar--range{left:calc(-1*var(--margin));right:26%;top:70%;bottom:-9%}

/* ==========================================================================
   Facilities: 3, 15, 18
   ========================================================================== */
.facs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);border-top:1px solid var(--fg);padding-top:26px}
.fac{display:grid;gap:20px;align-content:start;position:relative}
.fac__k{display:grid;gap:6px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);font-weight:500}
.fac__k i{font-style:normal;color:var(--acc);margin-right:8px}
.fac__k span:first-child{color:var(--fg)}
.fac__hero{aspect-ratio:16/10}
.fac__foot{display:grid;gap:16px;padding-top:6px}
.fac__plan{width:100%;height:auto;color:var(--fg);background:var(--white);border:1px solid var(--hair);border-radius:3px}
.fac__foot p{font-size:var(--fs-small);color:var(--fg-2);line-height:1.5;max-width:40ch}
.facs__note{margin-top:40px;max-width:60ch;color:var(--fg-2);font-size:var(--fs-body);padding-top:18px;border-top:1px solid var(--hair-2)}

/* the spec-sheet tag: copper bar, white caps, on the image edge */
.tag{position:absolute;left:-14px;top:58%;width:auto;height:22%;min-height:44px;display:flex;align-items:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);padding:0 26px 0 calc(14px + 26px);white-space:nowrap}
.tag::before{content:"";position:absolute;inset:0;background:var(--copper);mix-blend-mode:multiply}
.tag > span{position:relative}
.tag .stab{display:none}
/* the facility bands wipe in from the left one after the other, hold, then wipe out one after the other, and repeat.
   The copper is still a multiply layer over the render: the wipe scales that layer (a transform keeps the blend) and clips the text. */
.facs.in .fac:nth-child(1) .tag::before{transform-origin:0 50%;animation:band1 10s var(--ease) infinite}
.facs.in .fac:nth-child(2) .tag::before{transform-origin:0 50%;animation:band2 10s var(--ease) infinite}
.facs.in .fac:nth-child(3) .tag::before{transform-origin:0 50%;animation:band3 10s var(--ease) infinite}
.facs.in .fac:nth-child(1) .tag > span{animation:text1 10s var(--ease) infinite}
.facs.in .fac:nth-child(2) .tag > span{animation:text2 10s var(--ease) infinite}
.facs.in .fac:nth-child(3) .tag > span{animation:text3 10s var(--ease) infinite}
@keyframes band1{0%{transform:scaleX(0)}8%{transform:scaleX(1)}58%{transform:scaleX(1);transform-origin:100% 50%}66%{transform:scaleX(0);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes band2{0%,10%{transform:scaleX(0)}18%{transform:scaleX(1)}68%{transform:scaleX(1);transform-origin:100% 50%}76%{transform:scaleX(0);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes band3{0%,20%{transform:scaleX(0)}28%{transform:scaleX(1)}78%{transform:scaleX(1);transform-origin:100% 50%}86%{transform:scaleX(0);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes text1{0%{clip-path:inset(0 100% 0 0)}8%{clip-path:inset(0 0 0 0)}58%{clip-path:inset(0 0 0 0)}66%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes text2{0%,10%{clip-path:inset(0 100% 0 0)}18%{clip-path:inset(0 0 0 0)}68%{clip-path:inset(0 0 0 0)}76%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes text3{0%,20%{clip-path:inset(0 100% 0 0)}28%{clip-path:inset(0 0 0 0)}78%{clip-path:inset(0 0 0 0)}86%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 100%)}}
@media (prefers-reduced-motion:reduce){.facs.in .tag::before,.facs.in .tag > span{animation:none}}
/* the Range feature keeps the V03 tag: flush to the frame edge, copper edge, on the image */
.tag--flush{left:0;top:auto;bottom:28px;width:auto;height:40px;min-height:0;padding:0 18px 0 0;background:rgba(12,14,18,.72);mix-blend-mode:normal;font-size:12px;font-weight:600;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tag--flush::before{position:static;inset:auto;mix-blend-mode:normal;width:6px;align-self:stretch;background:var(--copper);margin-right:16px}

/* ==========================================================================
   The operator screen
   ========================================================================== */
.live .hd{position:relative}
.live .hd::before{content:"";position:absolute;inset:-48px -72px -40px -72px;z-index:-1;background:radial-gradient(70% 90% at 32% 50%,var(--ink) 30%,rgba(12,14,18,.85) 55%,rgba(12,14,18,0) 100%)}
.live .hd > *{position:relative}
.app{position:relative;border-radius:4px;border:1px solid var(--hair-2);background:var(--bg-2);overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.45)}
.app__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--hair-2);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--fg-2)}
.app__bar .left,.app__bar .right{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.app__bar .live-dot{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.app__bar .live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--data);box-shadow:0 0 0 3px var(--data-dim);animation:pulse 2.4s ease-in-out infinite}
.app__bar .app__tag{color:var(--acc);font-weight:600}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--data-dim)}50%{box-shadow:0 0 0 7px rgba(0,0,0,0)}}
.app__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--hair-2)}
.app__grid > *{background:var(--bg-2);padding:22px 22px 20px;min-height:150px;position:relative}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.tile__k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-2);display:flex;justify-content:space-between;gap:12px}
.tile__k span:last-child{white-space:nowrap}
.tile__v{font-size:clamp(28px,2.6vw,42px);font-weight:400;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.tile__v small{font-size:.4em;font-weight:500;letter-spacing:0;color:var(--fg-2)}
.tile__s{font-size:12px;color:var(--fg-2);display:flex;gap:10px;align-items:center;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.tile__s .set{color:var(--fg);opacity:.75}
.tile ul{display:grid;gap:8px;font-size:14px}
.tile ul li{display:flex;justify-content:space-between;gap:12px}
.tile ul b{font-weight:500;font-variant-numeric:tabular-nums}
.spark{height:34px;width:100%}
.spark canvas{width:100%;height:100%}
.t-2{grid-column:span 2}.t-3{grid-column:span 3}.t-4{grid-column:span 4}.t-12{grid-column:span 12}
.state{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fg-3);opacity:.5;transition:background .4s,opacity .4s,box-shadow .4s}
.state.is-on::before{background:var(--data);opacity:1;box-shadow:0 0 0 4px var(--data-dim)}
.photoperiod{display:flex;gap:2px;height:18px}
.photoperiod i{flex:1;background:var(--hair-2);border-radius:1px}
.photoperiod i.on{background:var(--data)}
.photoperiod i.now{outline:1px solid var(--fg);outline-offset:1px}
.log{font-size:12.5px;line-height:1.8;color:var(--fg-2);font-variant-numeric:tabular-nums;height:150px;overflow:hidden;position:relative}
.log li{display:grid;grid-template-columns:52px 1fr auto;gap:14px;opacity:0;transform:translateY(6px);animation:login .6s var(--ease-out) forwards}
.log li b{color:var(--fg);font-weight:500}
.log li em{font-style:normal;color:var(--acc)}
@keyframes login{to{opacity:1;transform:none}}
.log::after{content:"";position:absolute;inset:auto 0 0 0;height:40px;background:linear-gradient(180deg,rgba(0,0,0,0),var(--bg-2))}
.app__foot{display:flex;justify-content:space-between;gap:16px;padding:14px 22px;font-size:11.5px;letter-spacing:.06em;color:var(--fg-2);border-top:1px solid var(--hair-2);flex-wrap:wrap}
.unitmap{display:flex;gap:6px;align-items:flex-end}
.unitmap i{display:block;width:34px;height:14px;border:1px solid var(--hair-2);border-radius:2px;position:relative}
.unitmap i.tall{height:26px}
.unitmap i::after{content:"";position:absolute;inset:3px;background:var(--data);opacity:.9;border-radius:1px}
.person{position:absolute;right:22px;top:20px;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.person svg{width:14px;height:14px}
.tile--dial{justify-content:flex-start}
.dial{display:flex;align-items:center;gap:18px;margin:4px 0 6px}
.dial svg{width:92px;height:92px;flex:none;transform:rotate(135deg)}
.dial circle{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:198 264}
.dial__track{stroke:var(--hair-2)}
.dial__set{stroke:var(--fg);opacity:.35;stroke-width:1.5;stroke-dasharray:1 263}
.dial__val{stroke:var(--data);stroke-dashoffset:198;transition:stroke-dashoffset 1.1s var(--ease)}
.dial__v{font-size:clamp(24px,2.2vw,36px);font-weight:400;white-space:nowrap;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.dial__v small{font-size:.4em;font-weight:500;letter-spacing:0;color:var(--fg-2)}

/* ==========================================================================
   Digital twin (the COMOS section from build 1)
   ========================================================================== */
.twin__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:56px}
.twin__head{grid-column:1/7;display:grid;grid-template-columns:1fr;gap:22px;align-content:start}
.twin__head > *{grid-column:1/-1 !important}
.twin__head .hd__title{margin-bottom:6px}
.twin__list{grid-column:8/13;align-self:end;display:grid}
.twin__list li{padding:22px 0;border-top:1px solid var(--hair-2);display:grid;grid-template-columns:44px 1fr;gap:16px}
.twin__list li:last-child{border-bottom:1px solid var(--hair-2)}
.twin__list b{font-size:12px;letter-spacing:.13em;color:var(--acc);font-weight:600;padding-top:4px}
.twin__list p{color:var(--fg-2)}
.twin__list p strong{color:var(--fg);font-weight:500;display:block;margin-bottom:4px}
.twin__diagram{grid-column:1/13;margin-top:8px}
.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);border-radius:6px;overflow:hidden}
.layers li{background:var(--bg);padding:26px 24px 28px;position:relative;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.layers li b{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-2);font-weight:500}
.layers li b i{font-style:normal;color:var(--acc);margin-right:10px}
.layers li span{font-size:15px;color:var(--fg);line-height:1.4}
.layers li::after{content:"";position:absolute;right:-1px;top:50%;width:1px;height:0;background:var(--copper);transition:height 1.2s var(--ease-out)}
.layers.in li::after{height:100%;top:0}

/* ==========================================================================
   Inside the unit: the drawing on white paper
   ========================================================================== */
.inside__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:var(--gutter)}
.plan{grid-column:1/13;position:relative;border-radius:4px;overflow:hidden;aspect-ratio:3236/2345;max-height:78vh}
.plan--paper{background:var(--white);border:1px solid var(--hair)}
.plan__ink{position:absolute;inset:6%;display:flex;align-items:center;justify-content:center}
.plan__ink img{width:100%;height:100%;object-fit:contain;opacity:.92}
.plan__cap{position:absolute;left:22px;bottom:20px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--fg-3)}
.ph{position:relative;background:var(--panel);border-radius:4px;overflow:hidden;display:flex;align-items:flex-end;padding:22px;min-height:200px;color:var(--fg);opacity:.72}
.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:48px 48px;opacity:.7}
.ph::after{content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);background:linear-gradient(var(--fg-3) 1px,transparent 1px) center/100% 1px no-repeat,linear-gradient(90deg,var(--fg-3) 1px,transparent 1px) center/1px 100% no-repeat;opacity:.5}
.ph__lab{position:relative;z-index:1;display:grid;gap:6px}
.ph__lab b{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.ph__lab span{font-size:12px;color:var(--fg-3);letter-spacing:.04em}
.ph--still{padding:0;opacity:1;background:var(--ink-2)}
.ph--still::before,.ph--still::after{display:none}
.ph--still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph--still .ph__lab{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;color:var(--white);background:linear-gradient(180deg,rgba(12,14,18,0),rgba(12,14,18,.7))}
.ph--still .ph__lab span{color:rgba(244,244,242,.72)}
.ph--dark{--panel:var(--ink-2);--hair:var(--ink-3);--fg:var(--paper);--fg-3:var(--grey-d)}
.inside .ph{grid-column:span 4;aspect-ratio:4/3}

/* ==========================================================================
   In the field
   ========================================================================== */
.field__grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:var(--gutter)}
.ph--night{--panel:#07080B}
.ph--night::before{opacity:.5}
.ph--night .glow{position:absolute;left:30%;top:35%;width:40%;height:30%;border-radius:50%;background:radial-gradient(circle,rgba(211,160,117,.25),rgba(211,160,117,0) 70%);filter:blur(30px)}
.sites{margin-top:40px;border-top:1px solid var(--fg)}
.sites li{display:grid;grid-template-columns:40px 2.2fr 1.2fr 2fr .8fr 1.6fr;gap:var(--gutter);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair-2);font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--fg-3)}
.sites li i{font-style:normal;color:var(--acc)}
.sites li b{color:var(--fg);font-weight:600}
.sites li b:last-child{text-align:right}

/* ==========================================================================
   Green: the one palette break. The word first, the six points in a row with icons.
   ========================================================================== */
.green{padding-block:clamp(64px,6.5vw,104px)}
.green__head{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.green__text{font-size:var(--fs-body);line-height:1.6;color:#2A2E2B;max-width:44ch}
.green{--hair-2:rgba(12,14,18,.22)}
.green__word{font-size:clamp(56px,7.5vw,116px);font-weight:500;letter-spacing:-.035em;line-height:.95;color:var(--white)}
.green__title{font-size:var(--fs-h1);font-weight:400;line-height:1.08;letter-spacing:-.015em;color:var(--fg);max-width:20ch}
.green__points{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gutter);border-top:1px solid var(--fg)}
.green__points li{padding:20px 0 22px;border-bottom:1px solid var(--hair-2);display:grid;gap:10px;align-content:start}
.green__points .ico{width:30px;height:30px;color:#137A3F}
.green__points b{display:block;font-size:19px;font-weight:500;letter-spacing:-.01em}
.green__points p{color:#2A2E2B;font-size:var(--fs-small);line-height:1.5;max-width:28ch}
.green__flow{margin-top:clamp(28px,3vw,44px)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);align-items:start;border-top:1px solid var(--fg)}
.flow li{padding:26px 0 8px;display:grid;gap:12px;align-content:start;cursor:pointer}
.flow li b{font-size:clamp(26px,2.6vw,38px);font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--fg-3);transition:color .7s var(--ease)}
.flow li.is-on b{color:#137A3F}
/* the last word sits on the bottom-right splotch. Its colours travel with the ink: white as it arrives, back to grey and green as it leaves. Same clock as the splotch. */
.flow li b,.flow li span{transition:color 1.4s var(--ease)}
/* the flow words stay dark on the ink */
.green .flow li b{color:#3F4441}
.green .flow li span{color:#3A3E3C}
.flow li span{font-size:var(--fs-small);color:var(--fg-2);max-width:26ch}

/* ==========================================================================
   Specifications, with the turntable
   ========================================================================== */
.spec__top{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:center;margin-bottom:clamp(40px,5vw,72px)}
.spec__top .hd{grid-column:1/7;margin-bottom:0}
.spec__top .hd__label,.spec__top .hd__title,.spec__top .hd__text{grid-column:1/13}
.spec__turn{grid-column:7/13;position:relative;aspect-ratio:4/3;margin:0}
.spec__turn .three{position:absolute;inset:-20% -10%}   /* V21: the canvas runs past the figure so the turning model is never cut by its edge; hero3d keeps the model's size to the figure */
.spec__turn canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.drag{position:absolute;right:0;bottom:-6px;display:flex;align-items:center;gap:12px;height:40px;padding:0 18px 0 12px;background:var(--copper);color:var(--white);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;pointer-events:none;transition:opacity .6s var(--ease)}
.drag svg{width:26px;height:26px;color:var(--white);animation:dragnudge 2.6s var(--ease) infinite}
.drag__arc{stroke-dasharray:4 5;opacity:.9}
@keyframes dragnudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-7px)}70%{transform:translateX(7px)}}
.spec__turn.is-used .drag{opacity:0}
.spec__turncap{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--fg-3)}
.spec__turncap i{width:24px;height:1px;background:var(--hair-2)}
.tabs{position:relative;z-index:2;display:flex;gap:4px;border-bottom:1px solid var(--hair-2);margin-bottom:48px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,0))}
.tabs button{padding:14px 18px;font-size:14px;font-weight:500;color:var(--fg-3);position:relative;white-space:nowrap;transition:color var(--dur)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--copper);transform:scaleX(0);transition:transform var(--dur) var(--ease)}
.tabs button.is-on{color:var(--fg)}
.tabs button.is-on::after{transform:none}
.tabs button:hover{color:var(--fg)}
.pane{display:none}
.pane.is-on{display:block;animation:pane .5s var(--ease-out)}
@keyframes pane{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pane__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px}
.pane__intro{grid-column:1/5}
.pane__intro .h2{margin-bottom:16px}
.pane__main{grid-column:5/13}
.speclist{display:grid}
.speclist li{display:grid;grid-template-columns:minmax(160px,.38fr) 1fr;gap:24px;padding:16px 0;border-top:1px solid var(--hair-2);font-size:15px}
.speclist li:last-child{border-bottom:1px solid var(--hair-2)}
.speclist b{font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);padding-top:2px}
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{text-align:left;padding:16px 18px 16px 0;border-top:1px solid var(--hair-2);vertical-align:top}
.compare th{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--fg-3);border-top:0;padding-top:0}
.compare tr:last-child td{border-bottom:1px solid var(--hair-2)}
.compare td:first-child{font-weight:600;width:28%}
.compare td:nth-child(2){color:var(--fg-3)}
.compare td:nth-child(3){font-weight:600}
.compare td:nth-child(3)::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--copper);margin-right:12px;vertical-align:middle;position:relative;top:-1px}
.gmp{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.gmp li{padding:24px 0 0;border-top:1px solid var(--fg)}
.gmp li b{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:12px}
.gmp li p{font-size:15px;color:var(--fg-2)}
.gmp li p strong{color:var(--fg);font-weight:700}
.partners{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);margin-top:64px}
.partners li{padding:24px 0 8px;border-top:1px solid var(--fg);display:grid;gap:8px}
.partners li b{font-size:18px;font-weight:500;letter-spacing:-.01em}
.partners li span{font-size:14px;color:var(--fg-2)}
/* journey dial */
.dialnav{position:relative;min-height:420px;overflow:hidden;border-top:1px solid var(--fg)}
.dialnav__arc{position:absolute;left:-420px;top:50%;width:760px;height:760px;margin-top:-380px;border-radius:50%;border:1px solid var(--hair-2)}
.dialnav__nums{position:absolute;left:0;top:0;width:100%;height:100%}
.dialnav__nums li{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot));font-size:34px;font-weight:300;letter-spacing:-.02em;color:var(--hair-2);cursor:pointer;transition:color .5s,font-size .5s;line-height:1;font-variant-numeric:tabular-nums}
.dialnav__nums li::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--hair-2);left:var(--dx);top:var(--dy);transform:translate(-50%,-50%)}
.dialnav__nums li.is-on{color:var(--fg-3)}
.dialnav__nums li.is-on::before{background:var(--copper)}
.dialnav__body{position:absolute;left:min(46%,380px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:28px;max-width:calc(100% - min(46%,380px) - 32px)}
.dialnav__big{font-size:clamp(64px,7vw,104px);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.dialnav__text strong{display:block;font-size:17px;font-weight:500;margin-bottom:8px;letter-spacing:-.01em}
.dialnav__text p{font-size:14px;color:var(--fg-2);line-height:1.5;max-width:34ch}

/* ==========================================================================
   Contact, on the copper signal ribbon
   ========================================================================== */
.ribbon{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 30%,#000 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 30%,#000 70%)}
.ribbon canvas{width:100%;height:100%}
.cta__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:48px;align-items:start}
.cta__head{grid-column:1/7}
.cta__head .hd{margin-bottom:0}
.cta__head .hd__label,.cta__head .hd__title,.cta__head .hd__text{grid-column:1/13}
.cta__form{grid-column:7/13}
.cta__direct{margin-top:40px;display:grid;gap:8px;color:var(--fg-2);font-size:15px}
.cta__direct a{color:var(--fg);font-weight:600}
.form{display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
.field label{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--fg-2)}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-2);color:var(--fg);font:inherit;font-size:17px;padding:10px 0 12px;border-radius:0;outline:none;transition:border-color var(--dur)}
.field textarea{min-height:110px;resize:vertical}
.field select{appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239A9DA4' stroke-width='1.5'/></svg>") right center no-repeat}
.field select option{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper)}
.form__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:8px;flex-wrap:wrap}
.form__foot .small{color:var(--fg-2);max-width:40ch}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{border-top:1px solid var(--hair);padding:56px 0 40px}
.footer__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;align-items:start}
.footer__brand{grid-column:1/5;display:grid;gap:22px}
.footer__brand .mark{width:44px;height:44px;color:var(--copper)}
.footer__brand p{color:var(--fg-2);font-size:14px;max-width:30ch}
.footer__col{display:grid;gap:10px;font-size:var(--fs-small);align-content:start}
.footer__col h4{font-size:var(--fs-label);font-weight:400;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3);margin-bottom:6px}
.footer__col a{opacity:.85}.footer__col a:hover{opacity:1}
.footer__col p{color:var(--fg-2)}
.footer__col:nth-of-type(1){grid-column:6/8}.footer__col:nth-of-type(2){grid-column:8/10}.footer__col:nth-of-type(3){grid-column:10/13}
.footer__bar{margin-top:56px;padding-top:22px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--fg-2);letter-spacing:.04em;flex-wrap:wrap}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .hd__label,.hd__title,.hd__text{grid-column:1/13}
  .range__intro,.range__types,.frame--wide,.range__note,.twin__head,.twin__list,.cta__head,.cta__form,.pane__intro,.pane__main,.spec__top .hd,.spec__turn{grid-column:1/13}
  .green__points{grid-template-columns:repeat(2,1fr)}
  .sites li{grid-template-columns:40px 1fr 1fr;row-gap:6px}
  .sites li b:last-child{text-align:left;grid-column:2/-1}
  .range__note{padding-bottom:0;padding-top:24px}
  .bar--range{right:-8%;top:62%;bottom:-10%}
  .facs{grid-template-columns:1fr 1fr}
  .inside .ph{grid-column:span 6}
  .field__grid .ph--night,.field__grid .ph--walk{grid-column:1/13 !important;aspect-ratio:16/10 !important}
  .layers{grid-template-columns:repeat(2,1fr)}
  .t-2{grid-column:span 4}.t-3{grid-column:span 6}.t-4{grid-column:span 6}
  .footer__brand{grid-column:1/13}.footer__col{grid-column:span 4 !important}
}
@media (max-width:1300px){
  /* Below 1300 the two columns stop fitting: the copy and the annotation were landing on top of
     each other. From here down the landing stacks, and the point cards share one slot at the foot
     of the stage, as they do on the phone. */
  .land__copy{max-width:min(62vw,560px)}
  .land__copy .lede,.land__actions{display:none}   /* the stacked landing gives the stage and the cards the room instead */
  .land__steps li.land__brand{display:none}
  .land__steps{padding-bottom:45svh}
  .land__steps li{height:42svh;padding:0;justify-content:flex-start}
  .land__steps li[data-step="0"]{height:88svh;padding:0}
  .ann{position:fixed;left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom,0px));max-width:none;padding:18px var(--margin) 8px calc(var(--margin) + 16px);border-left:0;background:linear-gradient(180deg,rgba(12,14,18,0),rgba(12,14,18,.92) 16px);z-index:2}
  .land__steps li[data-step="0"] .ann{max-width:none}   /* the Overview card is pinned to 30ch on the desktop layout; in the slot it takes the width */
  .ann > *{max-width:60ch}
  .ann::before{left:var(--margin);top:18px}
  .land.is-leaving .ann{opacity:0;transition-duration:.45s}
  .land__steps li:not(.is-on) .ann{transition-duration:.22s}   /* the cards share one slot: the old one is gone before the new one is up */
}
@media (max-width:760px){
  :root{--fs-display:clamp(30px,8vw,44px)}
  .nav{display:none}
  .menu-btn{display:flex}
  .header.is-open .nav{display:flex;position:fixed;inset:72px 0 0 0;background:var(--ink);color:var(--paper);flex-direction:column;align-items:flex-start;padding:32px var(--margin);gap:24px}
  .header.is-open .nav a{font-size:22px;opacity:1}
  .header.is-open .menu-btn span{background:transparent}
  .header.is-open .menu-btn span::before{transform:translateY(7px) rotate(45deg)}
  .header.is-open .menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}
  .land__copy{max-width:calc(100vw - 2*var(--margin))}
  /* the stacked landing comes from the 1100 block; the phone only tightens it: the card sits closer to
     the foot so it reads with the model rather than after a gap, and the type steps down a size. */
  .ann{bottom:calc(68px + env(safe-area-inset-bottom,0px));padding:14px var(--margin) 6px calc(var(--margin) + 16px);background:linear-gradient(180deg,rgba(12,14,18,0),rgba(12,14,18,.94) 26px)}   /* a longer fade: on a short phone the model's base dissolves into the card */
  .ann > *{max-width:none}
  .ann::before{top:14px}
  .ann h2{font-size:26px;margin-bottom:10px}
  .ann p{font-size:15px;line-height:1.55}
  .ann b{margin-bottom:8px}
  .ann b em{font-size:30px;margin-bottom:6px}
  .land__fig,.land__fig .three,.land__fig canvas,.land .dots,.land .dots canvas{pointer-events:none!important;touch-action:pan-y!important}
  .land__sticky{touch-action:pan-y}
  .land__nudge{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .land__hint,.land__skip{height:36px;font-size:10px;letter-spacing:.1em}
  .land__hint{padding:0 13px 0 15px;gap:10px}
  .land__skip{padding:0 12px 0 13px;gap:7px}
  .land__nudge{gap:7px;max-width:calc(100vw - 24px)}
  .land__hint .on-desk{display:none}
  .land__hint .on-mob{display:inline}
  .land__hint i{border-left:1.6px solid currentColor;border-top:1.6px solid currentColor;border-bottom:0;transform:rotate(45deg);margin:0 2px 0 0;animation:chevup 1.6s var(--ease) infinite}
  .land__hint{animation:nudgeflash 1.6s var(--ease) infinite,nudgeup 1.6s var(--ease) infinite}
  @keyframes nudgeup{0%,100%{transform:translateY(0)}55%{transform:translateY(-6px)}}
  @keyframes chevup{0%{transform:translateY(3px) rotate(45deg);opacity:.35}45%{transform:translateY(-3px) rotate(45deg);opacity:1}100%{transform:translateY(-5px) rotate(45deg);opacity:0}}
  .rail{display:flex;flex-direction:row;gap:7px;right:auto;left:50%;top:auto;bottom:60px;transform:translateX(-50%)}
  .rail li{width:16px;height:2px;background:rgba(255,255,255,.28)}
  .rail li.is-on{height:2px;width:26px}
  .land.is-scrolled .rail{opacity:.75}
  .film__head > div,.film__head .quiet{grid-column:1/13;text-align:left}
  .type{grid-template-columns:1fr;gap:12px}
  .type svg{width:160px}
  .facs{grid-template-columns:1fr}
  .inside .ph{grid-column:span 12}
  .flow{grid-template-columns:1fr 1fr}
  .green__points{grid-template-columns:1fr}
  .sites li{grid-template-columns:40px 1fr}
  .sites li > span,.sites li > b{grid-column:2}
  .gmp{grid-template-columns:1fr}
  .partners{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .speclist li{grid-template-columns:1fr;gap:6px}
  .compare td:first-child{width:auto}
  .t-2,.t-3{grid-column:span 6}.t-4{grid-column:span 12}
  .app__bar .right{display:none}
  .plan{aspect-ratio:4/3}
  .footer__col{grid-column:1/13 !important}
  .dialnav{min-height:560px}.dialnav__arc{left:-560px}.dialnav__body{left:24px;right:24px;max-width:none;flex-direction:column;align-items:flex-start;top:auto;bottom:32px;transform:none}
}