/* Brevarde: seventies supergraphics. Concentric arcs, triple stripes, arched frames. */

:root{
  --mist:#E4EAED;
  --paper:#F4F7F8;
  --slate:#26323C;
  --muted:#51606C;
  --terra:#B8481F;
  --on-terra:#FFFFFF;
  --hair:rgb(38 50 60 / .22);
  --hair-light:rgb(244 247 248 / .28);

  --head:"Rubik","Trebuchet MS",Arial,sans-serif;
  --body:"Work Sans","Helvetica Neue",Arial,sans-serif;

  --r:16px;
  --r-full:999px;
  --wrap:1400px;
  --pad:clamp(16px,4vw,58px);
  --beat:clamp(72px,9vw,136px);
  --ease:cubic-bezier(.22,.7,.2,1);

  --band:linear-gradient(180deg,var(--terra) 0 8px,transparent 8px 13px,var(--slate) 13px 21px,transparent 21px 26px,var(--muted) 26px 34px);
  --ring-gap:var(--mist);
  --ring-far:var(--slate);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--slate);font:400 17px/1.55 var(--body);overflow-x:clip;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{display:block;max-width:100%}
input,textarea,button{font:inherit;color:inherit}
section[id]{scroll-margin-top:90px}

:focus-visible{outline:3px solid var(--slate);outline-offset:3px}
.press :focus-visible,.talk :focus-visible,.creed :focus-visible,.block--make :focus-visible,.block--count :focus-visible{outline-color:var(--paper)}
.dial :focus-visible,.talk__panel :focus-visible,.tenets :focus-visible{outline-color:var(--slate)}

.skip{position:absolute;left:16px;top:-80px;z-index:90;padding:12px 20px;background:var(--slate);color:var(--paper);border-radius:var(--r-full);text-decoration:none}
.skip:focus{top:12px}

.frame{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}

/* Palette helpers for the inline drawings */
.ft{fill:var(--terra)}.fs{fill:var(--slate)}.fm{fill:var(--muted)}.fp{fill:var(--paper)}.fg{fill:var(--mist)}.fw{fill:var(--on-terra)}
.st{stroke:var(--terra)}.ss{stroke:var(--slate)}.sm{stroke:var(--muted)}.sp{stroke:var(--paper)}.sg{stroke:var(--mist)}.sw{stroke:var(--on-terra)}
.arc,.ray,.ln{fill:none}
.tx{font-family:var(--head);font-weight:600}

/* Arc drawing: only hidden when JS runs */
.js [data-draw] .arc{stroke-dasharray:1 1;stroke-dashoffset:1}
[data-draw].is-drawn .arc{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,1.5s) var(--ease) var(--d,0s)}

/* Text reveal */
.js .rise{opacity:0;transform:translateY(18px)}
.js .rise.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s)}

/* Type */
.kick{display:flex;align-items:center;gap:10px;font:600 13.5px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.kick::before{content:"";flex:none;width:30px;height:16px;background:url(../images/mini-arcs.svg) center/contain no-repeat}
.kick--light{color:var(--paper)}
.kick--light::before{background-image:url(../images/mini-arcs-light.svg)}

.big{font:700 clamp(34px,4.6vw,72px)/1.04 var(--head);letter-spacing:-.022em;text-wrap:balance}
.sub{font:600 clamp(25px,2.7vw,40px)/1.12 var(--head);letter-spacing:-.014em;text-wrap:balance}
.lede{font-size:clamp(18px,1.4vw,20.5px);line-height:1.5}

.head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.head .kick{margin-bottom:18px}
.head__note{color:var(--muted);max-width:48ch}

/* Pills */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:var(--r-full);background:var(--terra);color:var(--on-terra);font:600 16px/1 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:box-shadow .28s var(--ease),transform .18s var(--ease),background-color .2s}
.pill:hover{box-shadow:0 0 0 3px var(--ring-gap),0 0 0 6px var(--terra),0 0 0 9px var(--ring-gap),0 0 0 11px var(--ring-far)}
.pill:active{transform:translateY(1px) scale(.985)}
.pill[disabled]{opacity:.72;cursor:progress;box-shadow:none}
.pill--line{background:transparent;color:var(--slate);box-shadow:inset 0 0 0 2px var(--slate)}
.pill--line:hover{background:var(--slate);color:var(--paper);box-shadow:0 0 0 3px var(--ring-gap),0 0 0 5px var(--slate)}
.pill--sm{min-height:44px;padding:0 22px;font-size:15px}

.trail{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-underline-offset .2s var(--ease),text-decoration-thickness .2s var(--ease);white-space:nowrap}
.trail:hover{text-underline-offset:8px;text-decoration-thickness:3px}

/* Straight triple band */
.stripes{height:34px;background:var(--band)}

/* Triple divider with a bend. Fixed pixel SVG, so the arcs never distort */
.triple{position:relative;overflow:hidden;height:var(--h,152px);pointer-events:none;--at:50%}
.triple--l{--at:24%}
.triple--r{--at:76%}
.triple svg{position:absolute;top:0;left:var(--at);width:6400px;height:100%;max-width:none;transform:translateX(-50%)}
.ray{stroke-width:9}
.js .triple .ray{stroke-dasharray:0 1;stroke-dashoffset:-.5}
.js .triple.is-drawn .ray{stroke-dasharray:1 0;stroke-dashoffset:0;transition:stroke-dasharray 4.8s linear,stroke-dashoffset 4.8s linear}

/* Header */
.topbar{position:sticky;top:0;z-index:50;background:var(--mist)}
.topbar::after{content:"";display:block;height:10px;background:linear-gradient(180deg,var(--terra) 0 2px,transparent 2px 4px,var(--slate) 4px 6px,transparent 6px 8px,var(--muted) 8px 10px)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font:700 23px/1 var(--head);letter-spacing:-.015em}
.mark svg{width:38px;height:22px;flex:none}
.site-nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.site-nav a:not(.pill){position:relative;padding:8px 0;font-weight:500;font-size:15.5px;text-decoration:none}
.site-nav a:not(.pill)::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.site-nav a:not(.pill):hover::after{transform:scaleX(1)}
.site-nav .pill{margin-left:clamp(4px,1vw,14px)}
.menu-btn{display:none;width:48px;height:48px;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:2px solid var(--slate);border-radius:var(--r-full);background:transparent;cursor:pointer}
.menu-btn span{display:block;width:22px;height:3px;background:var(--slate);transition:transform .25s var(--ease),opacity .2s}
.menu-btn span:nth-child(1){background:var(--terra)}
.menu-btn span:nth-child(3){background:var(--muted)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Opening */
.opening{position:relative;overflow:hidden}
.opening>.stripes{position:relative;z-index:3;background-color:var(--mist)}
.opening__corner{position:absolute;top:0;right:0;width:clamp(170px,20vw,300px);height:auto;z-index:1}
.opening__copy{position:relative;z-index:2;max-width:min(720px,52vw);padding-top:clamp(36px,5vw,76px)}
.opening__title{margin-top:20px;font:800 clamp(46px,5.9vw,100px)/.98 var(--head);letter-spacing:-.028em}
.opening__title span{display:block}
.opening__title .hot{color:var(--terra)}
.opening__lede{margin-top:24px;max-width:min(500px,36vw)}
.opening__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.opening__art{position:absolute;right:max(0px,calc((100vw - var(--wrap))/2 - 160px));bottom:130px;width:clamp(700px,66vw,1080px);z-index:1}
.opening__art svg{width:100%;height:auto;overflow:visible;max-width:none}
.figures{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(36px,4vw,56px) 0 48px;background:var(--slate);color:var(--paper);border-radius:var(--r)}
.figures>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:clamp(18px,2.2vw,30px) clamp(18px,2.6vw,38px)}
.figures>div+div{background:linear-gradient(90deg,var(--terra) 0 3px,transparent 3px 7px,var(--paper) 7px 10px,transparent 10px 14px,var(--muted) 14px 17px) left center/17px 56% no-repeat;padding-left:clamp(32px,3.4vw,52px)}
.figures dd{font:800 clamp(30px,3.8vw,56px)/1 var(--head);letter-spacing:-.02em}
.figures dd small{font:600 .46em/1 var(--head);letter-spacing:0;margin-right:.18em}
.figures dt{font-size:15.5px;color:var(--mist)}

/* Formats: an arcade of arches */
.formats{padding-top:var(--beat);overflow:hidden}
.arcade{--g:clamp(18px,2.4vw,34px);display:grid;gap:clamp(40px,4.4vw,64px)}
.arcade:focus-visible{outline-offset:-3px}
.arcade__row{display:grid;gap:var(--g);align-items:start}
.arcade__row--a{grid-template-columns:300fr 300fr 625fr}
.arcade__row--b{grid-template-columns:400fr 330fr 484fr}
.bay{min-width:0}
.bay svg{width:100%;height:auto}
.bay__floor{height:14px;margin-inline:calc(var(--g)/-2);background:linear-gradient(180deg,var(--slate) 0 3px,transparent 3px 5px,var(--terra) 5px 9px,transparent 9px 11px,var(--slate) 11px 14px)}
.bay figcaption{padding-top:16px}
.bay h3{font:600 clamp(20px,1.65vw,24px)/1.15 var(--head);letter-spacing:-.01em;margin-bottom:6px}
.bay p{color:var(--muted);font-size:16px;line-height:1.45;max-width:38ch}
.bay__fill{transition:opacity .8s ease .55s}
.js .bay:not(.is-drawn) .bay__fill{opacity:0}
.spin{transform-origin:165px 190px}
.bay:hover .spin--a{animation:turn 9s linear infinite}
.bay:hover .spin--b{animation:turn 6s linear infinite reverse}
.bay:hover .spin--c{animation:turn 4s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.formats .triple{margin-top:clamp(48px,6vw,88px)}

/* Factory */
.press{position:relative;overflow:hidden;background:var(--slate);color:var(--paper);padding-block:var(--beat);--ring-gap:var(--slate);--ring-far:var(--paper)}
.press__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start}
.press__words .big{margin-top:18px}
.press__words>p:not(.kick){margin-top:22px;color:var(--mist);max-width:56ch}
.plate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,36px);margin-top:clamp(28px,3.4vw,48px)}
.plate>div{padding:18px 0 20px;border-top:1px solid var(--hair-light)}
.plate dt{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.plate dd{margin-top:8px;font-size:15.5px;line-height:1.4;color:var(--mist)}
.plate dd strong{display:block;margin-bottom:6px;font:700 clamp(28px,2.9vw,42px)/1.05 var(--head);letter-spacing:-.015em;color:var(--paper)}
.plate dd strong small{font:600 .55em/1 var(--head);letter-spacing:0}

.dialwrap{--rise:clamp(84px,8vw,124px);position:relative;isolation:isolate;margin-top:var(--rise)}
.dial-halo{position:absolute;z-index:-1;left:-12%;top:calc(var(--rise)*-1);width:124%;height:calc(100% + var(--rise));max-width:none}
.dial{--ring-gap:var(--paper);--ring-far:var(--slate);background:var(--paper);color:var(--slate);border-radius:var(--r);padding:clamp(18px,2.6vw,36px)}
.dial__title{font:700 clamp(23px,2.1vw,30px)/1.1 var(--head);letter-spacing:-.012em}
.dial__intro{margin-top:6px;color:var(--muted);font-size:16px}
.dial__gauge{position:relative;margin-top:14px}
.dial__gauge svg{width:100%;height:auto}
.dial__count{position:absolute;left:0;right:0;bottom:1%;text-align:center;font:800 clamp(40px,5.2vw,76px)/1 var(--head);letter-spacing:-.025em}
.dial__count .unit{font:600 .34em/1 var(--body);letter-spacing:0;color:var(--muted)}
.dial__progress{transition:stroke-dasharray 1.1s var(--ease) .35s}
.dial__knob{transition:opacity .4s ease 1.2s}
.js .dial__gauge:not(.is-drawn) .dial__progress{stroke-dasharray:0 60}
.js .dial__gauge:not(.is-drawn) .dial__knob{opacity:0}
.dial__tick{font:600 26px var(--head);fill:var(--muted)}
.dial__control{margin-top:14px}
.dial__control label{display:block;font-weight:600;font-size:15.5px}
.dial__range{--thumb:34px;--fill:calc(var(--thumb)/2 + (100% - var(--thumb))*var(--p,.3333));-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:2px 0 0;padding:0;background:transparent;cursor:grab}
.dial__range:active{cursor:grabbing}
.dial__range::-webkit-slider-runnable-track{height:18px;background:linear-gradient(90deg,var(--terra) var(--fill),transparent var(--fill)) 0 50%/100% 8px no-repeat,linear-gradient(var(--slate),var(--slate)) 0 0/100% 2px no-repeat,linear-gradient(var(--slate),var(--slate)) 0 100%/100% 2px no-repeat,linear-gradient(var(--mist),var(--mist)) 0 50%/100% 8px no-repeat}
.dial__range::-moz-range-track{height:18px;background:linear-gradient(90deg,var(--terra) var(--fill),transparent var(--fill)) 0 50%/100% 8px no-repeat,linear-gradient(var(--slate),var(--slate)) 0 0/100% 2px no-repeat,linear-gradient(var(--slate),var(--slate)) 0 100%/100% 2px no-repeat,linear-gradient(var(--mist),var(--mist)) 0 50%/100% 8px no-repeat}
.dial__range::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--thumb);height:var(--thumb);margin-top:-8px;border:5px solid var(--paper);border-radius:50%;background:var(--terra);box-shadow:0 0 0 2px var(--slate);transition:box-shadow .2s var(--ease)}
.dial__range::-moz-range-thumb{box-sizing:border-box;width:var(--thumb);height:var(--thumb);border:5px solid var(--paper);border-radius:50%;background:var(--terra);box-shadow:0 0 0 2px var(--slate);transition:box-shadow .2s var(--ease)}
.dial__range:hover::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--slate),0 0 0 5px var(--paper),0 0 0 7px var(--terra)}
.dial__range:hover::-moz-range-thumb{box-shadow:0 0 0 2px var(--slate),0 0 0 5px var(--paper),0 0 0 7px var(--terra)}
.dial__ends{display:flex;justify-content:space-between;font-size:14px;font-weight:500;color:var(--muted)}
.dial__sums{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
.dial__ratios{font-weight:500}
.dial__price{font:800 clamp(30px,3.1vw,44px)/1.05 var(--head);letter-spacing:-.018em;color:var(--terra)}
.dial__price small{font:600 .5em/1 var(--head);letter-spacing:0}
.dial__note{margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--muted)}
.dial .pill{margin-top:18px}

.press__line{margin-top:clamp(64px,7vw,112px)}
.press__line-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,5vw,84px);align-items:end}
.press__line-head p{color:var(--mist);max-width:54ch}
.stops{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(34px,4vw,52px)}
.stops::before{content:"";position:absolute;top:6px;left:-100vw;right:-100vw;height:16px;background:linear-gradient(180deg,var(--terra) 0 4px,transparent 4px 6px,var(--paper) 6px 10px,transparent 10px 12px,var(--muted) 12px 16px)}
.stop{position:relative;padding-top:50px}
.stop::before{content:"";position:absolute;top:0;left:0;width:28px;height:28px;border-radius:50%;background:var(--paper);border:7px solid var(--slate);box-shadow:0 0 0 3px var(--paper)}
.stop__n{display:block;font:600 14px/1 var(--head);letter-spacing:.06em;color:var(--mist)}
.stop h4{margin-top:8px;font:600 clamp(19px,1.5vw,22px)/1.15 var(--head);letter-spacing:-.008em}
.stop p{margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--mist)}

/* Playbooks */
.routes{position:relative;overflow:hidden;padding-bottom:var(--beat)}
.routes .triple{margin-top:clamp(28px,4vw,56px)}
.routes__head{position:relative;z-index:1;max-width:min(880px,62vw);padding-top:clamp(28px,4vw,52px);margin-bottom:clamp(28px,3.4vw,48px)}
.routes__head .big{margin-top:18px}
.routes__head .head__note{margin-top:18px}
.routes__arcs{position:absolute;z-index:0;top:clamp(120px,14vw,190px);right:-7vw;width:clamp(280px,36vw,560px);height:auto}
.lanes{position:relative;z-index:1;background:var(--paper);border-radius:var(--r);padding:clamp(4px,1vw,12px) clamp(16px,3vw,44px)}
.lane{display:grid;grid-template-columns:64px minmax(0,1.5fr) minmax(0,1fr) auto;gap:clamp(16px,3vw,44px);align-items:center;padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--hair)}
.lane:first-child{border-top:0}
.lane__glyph{width:64px;height:64px}
.lane h3{font:600 clamp(21px,1.9vw,27px)/1.16 var(--head);letter-spacing:-.01em}
.lane__sector{margin-top:6px;font:600 13.5px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lane__text{margin-top:8px;color:var(--muted);font-size:16px;line-height:1.45;max-width:54ch}
.lane__label{font-size:14px;color:var(--muted)}
.lane__figure{margin-top:4px;font:800 clamp(30px,3.5vw,52px)/1.02 var(--head);letter-spacing:-.022em;color:var(--terra)}
.lane__figure--words{font-size:clamp(26px,2.5vw,36px)}

/* Services */
.circuit{position:relative;overflow:hidden;padding-top:clamp(24px,3vw,44px)}
.circuit__head{padding-top:clamp(28px,4vw,56px)}
.trio{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"media make" "media count";gap:clamp(14px,1.6vw,22px)}
.block{position:relative;border-radius:var(--r);padding:clamp(22px,3vw,44px)}
.block__tag{font:600 14px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.block h3{margin-top:10px;font:700 clamp(26px,2.7vw,40px)/1.08 var(--head);letter-spacing:-.016em}
.block__text{margin-top:14px;max-width:58ch}
.block--media{grid-area:media;background:var(--paper)}
.block--media .block__tag{color:var(--muted)}
.block--media .block__text{color:var(--muted)}
.block--make{grid-area:make;background:var(--terra);color:var(--on-terra);--ring-gap:var(--terra);--ring-far:var(--on-terra)}
.block--make .block__tag,.block--make h3{max-width:calc(100% - 118px)}
.block__arcs{position:absolute;top:-38px;right:-38px;width:196px;height:196px;max-width:none;pointer-events:none}
.block--count{grid-area:count;background:var(--slate);color:var(--paper)}
.block--count .block__tag{color:var(--mist)}
.block--count .block__text{color:var(--mist)}
.block .trail{margin-top:14px}
.bill{margin-top:24px;border-bottom:1px solid var(--hair)}
.bill li{display:grid;grid-template-columns:minmax(112px,.72fr) minmax(0,1fr);gap:4px 18px;align-items:baseline;padding:15px 0;border-top:1px solid var(--hair)}
.bill strong{font:600 clamp(18px,1.5vw,21px)/1.2 var(--head)}
.bill span{color:var(--muted);font-size:16px;line-height:1.4}
.gauges{margin-top:20px}
.gauges>div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--hair-light)}
.gauges dt{font:700 18px/1.2 var(--head)}
.gauges dd{font-size:15.5px;line-height:1.42;color:var(--mist)}

.hops{margin-top:var(--beat)}
.hops__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px)}
.hop svg{width:100%;height:auto}
.hop__body{padding:16px clamp(10px,1.4vw,22px) 0 0}
.hop h4{font:700 clamp(21px,1.8vw,26px)/1.1 var(--head);letter-spacing:-.012em}
.hop p{margin-top:6px;color:var(--muted);font-size:15.5px;line-height:1.45}

.cycle{margin-top:var(--beat)}
.beats{--bite:clamp(92px,8.6vw,124px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a b" "d c";gap:14px;margin-top:clamp(28px,3.4vw,48px)}
.beat{background:var(--paper);border-radius:var(--r);padding:clamp(24px,2.8vw,40px)}
.beat:nth-child(1){grid-area:a;padding-right:var(--bite)}
.beat:nth-child(2){grid-area:b;padding-left:var(--bite)}
.beat:nth-child(3){grid-area:c;padding-left:var(--bite)}
.beat:nth-child(4){grid-area:d;padding-right:var(--bite);background:var(--slate);color:var(--paper)}
.beat__tag{font:600 14.5px/1.2 var(--head);letter-spacing:.03em;color:var(--terra)}
.beat:nth-child(4) .beat__tag{color:var(--mist)}
.beat h4{margin-top:10px;font:700 clamp(23px,2.2vw,32px)/1.1 var(--head);letter-spacing:-.014em}
.beat>p:not(.beat__tag){margin-top:12px;color:var(--muted)}
.beat:nth-child(4)>p:not(.beat__tag){color:var(--mist)}
.ticks{margin-top:16px;display:grid;gap:7px;font-size:16px;line-height:1.4}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:10px;background:linear-gradient(currentColor 0 2px,transparent 2px 4px,currentColor 4px 6px,transparent 6px 8px,currentColor 8px 10px)}
.beats__loop{position:absolute;left:50%;top:50%;width:clamp(170px,16.4vw,232px);height:auto;transform:translate(-50%,-50%)}
.beats__word{font:600 19px/1 var(--head);fill:var(--slate)}

.extras-sec{margin-top:var(--beat)}
.extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin-top:clamp(24px,3vw,40px)}
.extra{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:20px 0 22px;border-top:1px solid var(--hair)}
.extra__n{font:600 15px/1.6 var(--head);color:var(--muted)}
.extra h4{font:600 clamp(20px,1.7vw,24px)/1.2 var(--head);letter-spacing:-.008em}
.extra p{grid-column:2;color:var(--muted);font-size:16px;line-height:1.45}
.extra--ask{display:flex;align-items:center}
.circuit>.frame+.triple{margin-top:clamp(48px,6vw,88px)}

/* Creed */
.creed{position:relative;overflow:hidden;background:var(--terra);color:var(--on-terra);padding-block:var(--beat)}
.creed__arcs{position:absolute;top:-24%;right:-9%;width:min(64%,960px);height:auto;max-width:none}
.creed__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start}
.creed__say{margin-top:20px;font:800 clamp(38px,4.9vw,80px)/1.02 var(--head);letter-spacing:-.026em;text-wrap:balance}
.creed__note{margin-top:24px;max-width:44ch}
.tenets{background:var(--paper);color:var(--slate);border-radius:var(--r);padding:clamp(6px,1vw,14px) clamp(20px,2.8vw,40px)}
.tenet{display:grid;grid-template-columns:60px minmax(0,1fr);gap:4px 14px;padding:clamp(20px,2vw,28px) 0;border-top:1px solid var(--hair)}
.tenet:first-child{border-top:0}
.tenet__n{font:800 clamp(28px,2.6vw,36px)/1 var(--head);letter-spacing:-.02em;color:var(--terra)}
.tenet h3{font:600 clamp(21px,1.8vw,26px)/1.16 var(--head);letter-spacing:-.01em}
.tenet p{grid-column:2;margin-top:4px;color:var(--muted);font-size:16.5px;line-height:1.48}

/* Channels */
.ringroad{background:var(--paper);--ring-gap:var(--paper)}
.ringroad__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,84px);align-items:center;padding-block:var(--beat) calc(var(--beat)*.9)}
.ringroad .big{margin-top:18px}
.ringroad__note{margin-top:20px;color:var(--muted);max-width:56ch}
.rings{width:100%;height:auto;margin-top:clamp(28px,3.4vw,48px)}
.rt{font-family:var(--head);font-weight:600;font-size:30px;letter-spacing:.005em}
.rt-c{font-family:var(--head);font-weight:700;font-size:32px;letter-spacing:-.01em}
.rings__words{transition:opacity .7s ease .9s}
.js .rings:not(.is-drawn) .rings__words{opacity:0}
.stack>div{padding:18px 0 20px;border-top:1px solid var(--hair)}
.stack>div:last-child{border-bottom:1px solid var(--hair)}
.stack dt{font:600 13.5px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stack dd{margin-top:6px;font:600 clamp(20px,1.7vw,24px)/1.2 var(--head);letter-spacing:-.008em}
.stack dd span{display:block;margin-top:4px;font:400 16px/1.42 var(--body);letter-spacing:0;color:var(--muted)}

/* FAQ */
.asked{position:relative;overflow:hidden;padding-top:clamp(24px,3vw,44px)}
.asked__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,84px);align-items:start;padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,104px)}
.asked .big{margin-top:18px}
.asked__arcs{position:absolute;left:0;bottom:128px;width:clamp(220px,25vw,380px);height:auto}
.q{border-top:1px solid var(--slate)}
.q:last-child{border-bottom:1px solid var(--slate)}
.q summary{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:20px;align-items:center;padding:22px 0;font:600 clamp(19px,1.7vw,24px)/1.25 var(--head);letter-spacing:-.008em;cursor:pointer;list-style:none;transition:padding-left .28s var(--ease)}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{padding-left:8px}
.q__mark{width:36px;height:21px;transition:transform .38s var(--ease)}
.q[open] .q__mark{transform:rotate(180deg)}
.q__a{padding:0 clamp(0px,5vw,56px) 26px 0;max-width:74ch;color:var(--muted)}

/* Contact */
.talk{position:relative;overflow:hidden;background:var(--slate);color:var(--paper);padding-block:var(--beat);--ring-gap:var(--slate);--ring-far:var(--paper)}
.talk__arcs{position:absolute;top:-16%;right:-7%;width:min(58%,860px);height:auto;max-width:none}
.talk__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:start}
.talk .big{margin-top:18px}
.talk__note{margin-top:20px;color:var(--mist);max-width:50ch}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.facts li{padding:10px 18px;border-radius:var(--r-full);box-shadow:inset 0 0 0 2px var(--hair-light);font-weight:500;font-size:15.5px;line-height:1.2}
.talk__back{margin-top:18px}
.talk__panel{--ring-gap:var(--paper);--ring-far:var(--slate);background:var(--paper);color:var(--slate);border-radius:var(--r);padding:clamp(20px,3vw,44px)}
.talk__title{font:700 clamp(25px,2.4vw,34px)/1.1 var(--head);letter-spacing:-.014em}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.field{min-width:0}
.field--wide{grid-column:1/-1}
.field label{display:block;margin-bottom:6px;font-weight:600;font-size:15.5px}
.field input,.field textarea{display:block;width:100%;min-height:52px;padding:13px 16px;border:2px solid var(--muted);border-radius:var(--r);background:var(--mist);transition:border-color .2s,box-shadow .2s var(--ease)}
.field textarea{min-height:128px;resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--slate)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--slate);box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--terra)}
.hp{position:absolute;left:-9999px}
.lead__send{margin-top:20px}
.form-status{margin-top:16px;font-weight:500;font-size:16px;line-height:1.4}
.form-status:empty{margin-top:0}
.form-status:not(:empty){padding:12px 16px 12px 22px;background:var(--mist);border-radius:var(--r);box-shadow:inset 6px 0 0 var(--terra)}
.lead__promise{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.45}
.thanks{outline:0}
.thanks__stamp{width:150px;height:auto}
.thanks h3{margin-top:18px;font:700 clamp(27px,2.8vw,38px)/1.1 var(--head);letter-spacing:-.016em;overflow-wrap:anywhere}
.thanks p{margin-top:12px;color:var(--muted);max-width:44ch}

/* Footer */
.scallop{height:48px;background:url(../images/scallop.svg) center/auto 48px repeat-x}
.close{overflow:hidden;padding-top:clamp(36px,5vw,72px)}
.close__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(32px,5vw,84px);align-items:start}
.close__line{max-width:46ch;color:var(--muted)}
.close__nav{display:flex;flex-wrap:wrap;gap:6px clamp(16px,2vw,28px);justify-content:flex-end}
.close__nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-underline-offset:5px;text-decoration-thickness:2px}
.close__word{margin-top:clamp(24px,3vw,44px);font:800 min(18.4vw,268px)/.86 var(--head);letter-spacing:-.04em;white-space:nowrap}
.close .stripes{margin-top:clamp(14px,2vw,26px)}
.close__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding-block:18px 26px;color:var(--muted);font-size:15px}
.close__base a{color:var(--slate);font-weight:500;text-underline-offset:4px}

/* ---------- Below desktop layout ---------- */
@media (max-width:1099.98px){
  .menu-btn{display:inline-flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 22px;background:var(--paper);border-radius:0 0 var(--r) var(--r);max-height:calc(100dvh - 78px);overflow-y:auto}
  .site-nav.is-open{display:flex}
  .site-nav a:not(.pill){padding:14px 0;border-bottom:1px solid var(--hair);font:600 20px/1.2 var(--head)}
  .site-nav a:not(.pill)::after{display:none}
  .site-nav .pill{margin:18px 0 0;align-self:flex-start;min-height:52px}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .topbar{position:static}
  html:not(.js) .topbar__in{flex-wrap:wrap;padding-block:10px}
  html:not(.js) .site-nav{display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:4px 16px;width:100%;padding:0;background:transparent;max-height:none}
  html:not(.js) .site-nav a:not(.pill){padding:8px 0;border:0;font:500 15.5px/1.2 var(--body)}
  html:not(.js) .site-nav .pill{margin:0;min-height:44px}

  .opening__corner{display:none}
  .opening__copy{max-width:none}
  .opening__lede{max-width:60ch}
  .opening__art{position:relative;right:auto;bottom:auto;width:auto;height:min(72vw,390px);margin-top:18px}
  .opening__art svg{position:absolute;bottom:0;right:-10vw;width:min(135vw,720px)}
  .figures{margin-top:-52px}

  .press__top,.press__line-head,.creed__in,.talk__in{grid-template-columns:minmax(0,1fr)}
  .creed__arcs{top:-40px;right:-24%;width:60%}
  .talk__arcs{top:-40px;right:-26%;width:62%}

  .ringroad__in{grid-template-columns:minmax(0,1fr)}
  .asked__in{grid-template-columns:minmax(0,1fr)}
  .asked__arcs{display:none}
}

@media (max-width:899.98px){
  .head{grid-template-columns:minmax(0,1fr);align-items:start}
  .formats .head{margin-bottom:28px}
  .arcade{--bay-h:clamp(340px,62vw,440px);display:flex;gap:var(--g);overflow-x:auto;margin-inline:calc(var(--pad)*-1);padding:0 var(--pad) 14px;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)}
  .arcade__row{display:contents}
  .bay{flex:0 0 auto;width:calc(var(--bay-h)*var(--ratio));max-width:84vw;scroll-snap-align:start}

  .stops{grid-template-columns:minmax(0,1fr);gap:26px}
  .stops::before{top:0;bottom:0;left:6px;right:auto;width:16px;height:auto;background:linear-gradient(90deg,var(--terra) 0 4px,transparent 4px 6px,var(--paper) 6px 10px,transparent 10px 12px,var(--muted) 12px 16px)}
  .stop{padding:0 0 0 48px}
  .stop h4{margin-top:6px}

  .routes__arcs{display:none}
  .routes__head{max-width:none}
  .lane{grid-template-columns:44px minmax(0,1fr);gap:10px 14px;align-items:start}
  .lane__glyph{width:44px;height:44px}
  .lane__stat,.lane>.trail{grid-column:2}

  .trio{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "make" "count"}
  .block__arcs{top:-26px;right:-26px;width:138px;height:138px}
  .block--make .block__tag,.block--make h3{max-width:calc(100% - 84px)}

  .hops__list{grid-template-columns:minmax(0,1fr);gap:18px}
  .hop{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start}
  .hop__body{padding:0}

  .beats{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .beat:nth-child(n){grid-area:auto;padding:clamp(22px,5vw,32px)}
  .beats__loop{display:none}

  .extras{grid-template-columns:minmax(0,1fr)}
  .extra--ask{padding-top:24px}

  .triple--l,.triple--r{--at:50%}
  .close__top{grid-template-columns:minmax(0,1fr)}
  .close__nav{justify-content:flex-start}
}

@media (max-width:599.98px){
  body{font-size:16.5px}
  .opening__acts .pill{flex:1 1 auto}
  .figures{grid-template-columns:minmax(0,1fr)}
  .figures>div{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 18px}
  .figures>div+div{background:none;padding-left:18px;border-top:1px solid var(--hair-light)}
  .figures dt{text-align:right}
  .plate{grid-template-columns:minmax(0,1fr)}
  .fields{grid-template-columns:minmax(0,1fr)}
  .lead__send,.dial .pill{width:100%}
  .bill li{grid-template-columns:minmax(0,1fr)}
  .gauges>div{grid-template-columns:minmax(0,1fr)}
  .q__a{padding-right:0}
  .tenet{grid-template-columns:48px minmax(0,1fr)}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-draw] .arc{stroke-dasharray:none;stroke-dashoffset:0}
  .js .triple .ray{stroke-dasharray:none;stroke-dashoffset:0}
  .js .rise{opacity:1;transform:none}
  .js .bay:not(.is-drawn) .bay__fill,.js .rings:not(.is-drawn) .rings__words,.js .dial__gauge:not(.is-drawn) .dial__knob{opacity:1}
}