:root{--paper:#F6F3EE;--paper-2:#EDE7DE;--line:#D8CFC2;--ink:#16130F;--ink-2:#4A4239;--muted:#6E6458;--copper:#A84A0A;--copper-hover:#8A3C07;--copper-light:#E8A06A;--dark:#16130F;--dark-2:#241E18;--on-dark:#F6F3EE;--on-dark-2:#CFC4B6}
body{margin:0;background:var(--paper)}
a{color:var(--copper)}a:hover{color:var(--copper-hover)}
input,textarea,select,button{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.on-dark a:focus-visible,.on-dark button:focus-visible,.on-dark input:focus-visible,.on-dark textarea:focus-visible,.on-dark select:focus-visible{outline-color:var(--copper-light)}
.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:10}
.skip:focus{top:16px}
.btn-primary:hover{background:var(--copper-hover)!important}
.btn-secondary:hover{background:var(--ink)!important;color:var(--paper)!important}
.navlink:hover{color:var(--copper)!important}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary .mk::before{content:"+"}
details[open] summary .mk::before{content:"−"}
@media (prefers-reduced-motion:no-preference){a,button{transition:background-color .15s ease,color .15s ease}}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-status{padding:14px 16px;border-radius:2px;font-size:15px;border:1px solid}
.form-status.ok{background:#1F2A1C;border-color:#6E8F5E;color:#DCEBD3}
.form-status.err{background:#2E1A12;border-color:var(--copper-light);color:#F6D9C4}

/* ---------- Sticky header ---------- */
.site-header{position:sticky;top:0;z-index:50}
section[id],main[id]{scroll-margin-top:84px}

/* ---------- Production line wires ---------- */
.partners a:hover{color:var(--copper)!important}

@keyframes sw-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sw-ring{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes sw-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes sw-fade{from{opacity:0}to{opacity:1}}
@keyframes sw-draw{from{stroke-dashoffset:var(--len,220)}to{stroke-dashoffset:0}}
@keyframes sw-current{to{stroke-dashoffset:-90}}
@keyframes sw-wire{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sw-pulse{0%{left:-15%;opacity:0}2%{opacity:1}16%{left:100%;opacity:1}17%,100%{left:100%;opacity:0}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* hero text */
  .hero-anim>*{animation:sw-rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-anim>*:nth-child(2){animation-delay:.08s}
  .hero-anim>*:nth-child(3){animation-delay:.18s}
  .hero-anim>*:nth-child(4){animation-delay:.28s}
  /* cable cross-section builds layer by layer */
  .cable .ring{transform-box:fill-box;transform-origin:center;animation:sw-ring .9s cubic-bezier(.2,.7,.2,1) both}
  .cable .r0{animation-delay:.1s}.cable .r1{animation-delay:.25s}.cable .r3{animation-delay:.5s}.cable .r4{animation-delay:.65s}
  .cable .screen{animation:sw-ring .9s cubic-bezier(.2,.7,.2,1) .38s both,sw-current 7s linear 1.4s infinite}
  .cable .strand{transform-box:fill-box;transform-origin:center;animation:sw-pop .4s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.85s + var(--i) * 40ms)}
  .cable .callout{stroke-dasharray:220;--len:220;animation:sw-draw .6s ease-out both;animation-delay:calc(1.5s + var(--n) * 120ms)}
  .cable .label{animation:sw-fade .5s ease-out both;animation-delay:calc(1.8s + var(--n) * 120ms)}
  .cable .dim{stroke-dasharray:260;--len:260;animation:sw-draw .8s ease-out 2.3s both}
  .cable .dim-t{animation:sw-fade .5s ease-out 2.6s both}
    /* smooth FAQ */
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
  details[open]::details-content{block-size:auto}
  .btn-primary,.btn-secondary,.navlink,.partners a{transition:background-color .2s ease,color .2s ease}
}

/* header shrink – class added by js/site.js */
.site-header,.site-header .hdr-inner,.site-header .logo,.site-header .navlink,.site-header .nav-cta{transition:all .25s ease}
.site-header{background:var(--paper)!important}
.site-header.is-stuck{background:var(--paper)!important;box-shadow:0 1px 0 var(--line),0 8px 20px rgba(22,19,15,.06)}
.site-header.is-stuck .hdr-inner{padding-top:8px!important;padding-bottom:8px!important}
.site-header.is-stuck .logo{height:36px!important}
.site-header.is-stuck .site-nav{font-size:14px!important}
.site-header.is-stuck .navlink{padding-top:8px!important;padding-bottom:8px!important}
.site-header.is-stuck .nav-cta{min-height:40px!important;padding:8px 16px!important;font-size:14px}
@media (max-width:640px){.site-header.is-stuck .navlink{display:none}}
@media (prefers-reduced-motion:reduce){.site-header,.site-header *{transition:none!important}}

/* ---------- Scroll animations (js/site.js adds .in) ---------- */
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:0 0 24px;height:2px;background:currentColor;transform-origin:left center}
.wires{max-width:1200px;margin:0 auto;height:6px;border-top:2px solid var(--copper);border-bottom:2px solid var(--copper-light);box-sizing:border-box;transform-origin:left center}
.steps{position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:6px;top:0;width:2px;bottom:0;background:var(--line)}
.steps::after{background:var(--copper);bottom:auto;height:calc(var(--p,0) * 100%)}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;left:-27px;top:34px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--line);box-sizing:border-box;transition:background-color .3s,border-color .3s}
.steps li.lit::before{background:var(--copper);border-color:var(--copper)}
.divider::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#3A322A;transform-origin:top}
.arr{display:inline-block;margin-left:6px;transition:transform .2s ease}
a:hover .arr,button:hover .arr{transform:translateX(4px)}
details .mk{display:inline-block;transition:transform .3s ease}
details[open] .mk{transform:rotate(180deg)}
input,textarea,select{transition:border-color .2s ease,background-color .2s ease}
.on-dark input:focus,.on-dark textarea:focus,.on-dark select:focus{border-color:var(--copper-light)!important;background:#2C251E!important}

@media (prefers-reduced-motion:no-preference){
  .js [data-anim]{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
  .js [data-anim=up]{transform:translateY(28px)}
  .js [data-anim=left]{transform:translateX(-40px)}
  .js [data-anim=right]{transform:translateX(40px)}
  .js [data-anim].in{opacity:1;transform:none}
  /* eyebrow line grows */
  .js .eyebrow::before{transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) .2s}
  .js .eyebrow.in::before{transform:scaleX(1)}
  /* wires across dark sections */
  .js [data-anim=wire]{opacity:1;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
  .js [data-anim=wire].in{transform:scaleX(1)}
  .js   /* dark section divider grows */
  .js .divider::before{transform:scaleY(0);transition:transform 1s cubic-bezier(.6,0,.2,1) .4s}
  .js .divider.in::before{transform:scaleY(1)}
  /* list rules on dark draw in */
  .js .rule-dark{border-top-color:transparent!important;background:linear-gradient(#3A322A,#3A322A) top left/0% 1px no-repeat;transition:opacity .8s,transform .8s,background-size .9s cubic-bezier(.6,0,.2,1)}
  .js .rule-dark.in{background-size:100% 1px}
  .steps::after{transition:height .15s linear}
  .js .cap{animation:sw-fade .6s ease-out 2.4s both}
}
@media (prefers-reduced-motion:reduce){
  .steps::after{height:100%}
  .steps li::before{background:var(--copper);border-color:var(--copper)}
}

/* ---------- Production line: one wire grows left→right, then a signal loops ---------- */
.track{position:relative;height:6px}
.track-fill{position:absolute;left:0;top:0;height:6px;width:100%;border-top:2px solid var(--copper);border-bottom:2px solid var(--copper);box-sizing:border-box}
.tip,.runner{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--copper-light);box-shadow:0 0 0 4px rgba(232,160,106,.25),0 0 18px 6px rgba(232,160,106,.55);pointer-events:none}
.tip{right:-7px;opacity:0}
.runner{left:0;margin-left:-7px;opacity:0}
.stn{position:relative}
.stn::before{content:"";position:absolute;left:0;top:-8px;width:2px;height:22px;background:var(--copper)}
@keyframes sw-run{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:100%;opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .js .line .track-fill{width:calc(var(--lp, 0) * 100%);transition:width .12s linear}
  .js .line .tip{transition:opacity .3s}
  .js .line.moving:not(.looping) .tip{opacity:1}
  .js .line.looping .runner{animation:sw-run 3.2s cubic-bezier(.45,0,.55,1) infinite}
  /* stations appear when the wire reaches them */
  .js .line .stn{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s ease}
  .js .line .stn::before{transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
  .js .line .stn.on{opacity:1;transform:none}
  .js .line .stn.on::before{transform:scaleY(1)}
  .js [data-anim=line]{opacity:1;transform:none}
}

/* Phones: the production line runs top → bottom */
@keyframes sw-run-v{0%{top:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:100%;opacity:0}}
@media (max-width:640px){
  .line{position:relative;padding-left:30px}
  .line .track{position:absolute;left:0;top:0;bottom:0;width:6px;height:auto}
  .line .track-fill{width:6px!important;height:100%;border:0;border-left:2px solid var(--copper);border-right:2px solid var(--copper)}
  .line .tip{top:auto;bottom:-7px;right:auto;left:50%;margin:0 0 0 -7px}
  .line .runner{top:0;left:50%;margin:-7px 0 0 -7px}
  .line .stations{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px 0!important}
  .line .stn{padding:0 12px 0 0!important}
  .line .stn:nth-child(odd)::before{left:-30px;top:9px;width:22px;height:2px}
  .line .stn:nth-child(even){padding-left:12px!important}
  .line .stn:nth-child(even)::before{left:0;top:2px;width:2px;height:18px}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .js .line .track-fill{height:calc(var(--lp, 0) * 100%);transition:height .12s linear}
  .js .line.looping .runner{animation-name:sw-run-v}
  .js .line .stn:nth-child(odd)::before{transform:scaleX(0);transform-origin:left}
  .js .line .stn:nth-child(odd).on::before{transform:scaleX(1)}
}

main>section{overflow-x:clip}
@media (max-width:640px){.foot-meta{align-items:flex-start!important;text-align:left!important}}

/* ---------- Mobile optimisation ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary{-webkit-tap-highlight-color:rgba(168,74,10,.15)}
.nav-links{display:flex;align-items:center;gap:4px 28px}
.nav-toggle{display:none;width:48px;height:48px;border:1px solid var(--line);border-radius:2px;background:transparent;cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:transform .25s ease,background-color .25s ease}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
.nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:800px),(pointer:coarse) and (max-width:1024px){
  .tap{display:inline-block;padding:11px 0}
}
@media (max-width:800px){
  .site-nav{gap:10px!important}
  .nav-toggle{display:inline-flex;order:2}
  .nav-cta{order:1;padding:10px 14px!important;font-size:14px}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(22,19,15,.08);padding:4px clamp(20px,4vw,40px) 12px}
  .nav-links.open{display:flex}
  .nav-links .navlink{padding:14px 0!important;border-top:1px solid var(--line);font-size:17px}
  .nav-links .navlink:first-child{border-top:0}
  .site-header .logo{height:44px!important}
  .site-header.is-stuck .logo{height:34px!important}
  .site-header.is-stuck .navlink{display:block}
}
@media (max-width:640px){
  .cc{font-size:12px!important}
  .stations{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 0!important}
  .stn{padding-right:12px!important}
  .stn h3{font-size:19px!important}
  .cable text{font-size:19px}
  .cable text[fill="var(--muted)"]{font-size:16px}
  .hero-anim h1{letter-spacing:-0.015em}
  .steps{padding-left:24px!important}
  .steps li{gap:14px!important}
  .steps li .num{flex-basis:32px!important}
  details summary{font-size:17px!important}
}
@media (max-width:360px){.nav-cta{display:none!important}}

/* Hero on phones: cable drawing between the headline and the lead text */
@media (max-width:800px){
  .hero-wrap{flex-direction:column;align-items:stretch!important;gap:0!important;padding-top:28px!important}
  .hero-wrap .hero-anim{display:contents}
  .hero-wrap .hero-anim>p:first-child{order:1}
  .hero-wrap>figure{order:2;flex:none!important;width:100%;max-width:520px!important;margin:12px 0 24px!important}
  .hero-wrap .hero-anim>h1{order:3}
  .hero-wrap .hero-anim>p:nth-child(3){order:4}
  .hero-wrap .hero-anim>div{order:5}
  .hero-wrap>figure .cap{display:none}
}