/* Cloco v3. Layout: DD.NYC-style light editorial page. Grey and white surfaces, black bold
   Manrope, one flame accent, a black header bar and ribbon as the only dark elements.
   The flame cloud is the brand object and the protagonist of the home-page story. Light only. */
:root{
  --bg:#EEEEEE; --white:#FFFFFF; --stone:#E2E2DF; --line:#D2D2CF; --soft:#8A8A87;
  --ink:#0E0E0E; --muted:#555552; --accent:#DF7A55; --accent-hi:#CC6943; --glow:rgba(232,128,88,.5); --on-accent:#0E0E0E;
  --accent-text:#A84B2B; --ok:#1F7A4D; --danger:#B42318;
  --sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --r:18px; --r-sm:12px;
  --gl:max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,4vw,56px),env(safe-area-inset-right,0px));
  --hdr:64px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.05em;line-height:.98;text-wrap:balance}
p,ul,ol,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
[hidden]{display:none!important}
svg{flex:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--on-accent)}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sel{user-select:all}

.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.sec{padding-block:clamp(80px,10vw,150px)}
.sec-tight{padding-block:clamp(56px,7vw,96px)}
.t-xxl{font-size:clamp(50px,9.4vw,150px);letter-spacing:-.06em;line-height:.92}
.t-xl{font-size:clamp(44px,7.4vw,118px);letter-spacing:-.058em;line-height:.93}
.t-lg{font-size:clamp(36px,5.2vw,80px)}
.t-md{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.04em;line-height:1.1}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);max-width:52ch;font-weight:500}
.kicker{font:500 13px/1 var(--mono);color:var(--accent-text);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";flex:none;width:21px;height:14px;background:var(--accent);-webkit-mask:url(../img/cloud.svg) center/contain no-repeat;mask:url(../img/cloud.svg) center/contain no-repeat}
.flame .kicker::before{background:var(--on-accent)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* Surfaces */
.white{background:var(--white)}
.stone{background:var(--stone)}
.ink{background:var(--ink);color:var(--white)}
.ink .lead,.ink .muted{color:#B5B5B2}
.ink .kicker{color:var(--accent)}
.flame{background:radial-gradient(110% 90% at 12% 0%,#E88B66 0%,var(--accent) 58%);color:var(--on-accent)}
.flame .lead,.flame .muted{color:#3A1A10}
.flame .kicker{color:var(--on-accent)}

/* Logo mask: one PNG coloured by currentColor */
.logo-mask{display:block;aspect-ratio:305/160;background:currentColor;-webkit-mask:url(../img/cloco-logo.png) center/contain no-repeat;mask:url(../img/cloco-logo.png) center/contain no-repeat}
.ftr-mark .logo-mask{-webkit-mask-image:url(../img/cloco-logo-lg.png);mask-image:url(../img/cloco-logo-lg.png)}

/* Buttons (pills) */
.btn{--h:54px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 28px;border-radius:999px;font:700 16px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),color .3s var(--ease),border-color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn:active{transform:translateY(1px) scale(.98)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 28px -12px var(--glow)}
.btn-accent:hover{box-shadow:0 14px 36px -10px var(--glow)}
.btn-accent::before{background:var(--ink)}
.btn-accent:hover{color:var(--white)}
.flame .btn-accent{background:var(--ink)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink::before{background:var(--accent)}
.btn-ink:hover{color:var(--on-accent)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--white);border-color:var(--ink)}
.ink .btn-ghost::before{background:var(--white)}
.ink .btn-ghost:hover{color:var(--ink);border-color:var(--white)}
.btn-sm{--h:44px;padding:0 18px;font-size:14px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;color:var(--accent-text)}
.link-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* Header: black bar */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ink);color:var(--white)}
.hdr-in{display:flex;align-items:center;gap:28px;height:var(--hdr)}
.brand{display:block;width:84px;color:var(--white)}
.nav{display:flex;align-items:center;gap:34px;margin-inline:auto;font-size:15px;font-weight:600}
.nav>a,.dd>summary{position:relative;text-decoration:none;padding-block:8px;cursor:pointer}
.nav>a::after,.dd>summary::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav>a:hover::after,.nav>a[aria-current]::after,.dd>summary:hover::after,.dd>summary[aria-current]::after{transform:scaleX(1);transform-origin:left}
.dd{position:relative}
.dd>summary{list-style:none;display:flex;align-items:center;gap:6px}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .3s}
.dd[open]>summary svg{transform:rotate(90deg)}
.dd-panel{position:absolute;left:50%;top:calc(100% + 16px);transform:translateX(-30%);width:min(620px,calc(100vw - 32px));background:var(--white);color:var(--ink);border-radius:var(--r);padding:12px;box-shadow:0 40px 80px -40px rgb(14 14 14 / .45)}
.dd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.dd-grid a{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:var(--r-sm);text-decoration:none}
.dd-grid a:hover{background:var(--bg)}
.dd-grid strong{font-weight:700;font-size:15px;letter-spacing:-.01em}
.dd-grid span{font-size:13px;line-height:1.4;color:var(--muted);font-weight:500}
.dd-all{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:16px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700}
.dd-all svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.hdr-cta{--h:40px;padding:0 18px;font-size:14px}
.hdr .btn-accent::before{background:var(--white)}
.hdr .btn-accent:hover{color:var(--ink)}
.menu-btn{display:none;align-items:center;gap:12px;margin-left:auto;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid currentColor;background:transparent;cursor:pointer;font-weight:700}
.menu-btn i{position:relative;width:16px;height:10px;border-block:2px solid currentColor;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded="true"] i{transform:rotate(45deg) scale(.9)}
.mnav{position:fixed;inset:calc(var(--hdr) + env(safe-area-inset-top,0px)) 0 0;background:var(--accent);color:var(--on-accent);overflow:auto;padding-block:24px max(48px,env(safe-area-inset-bottom))}
.mnav nav{display:flex;flex-direction:column}
.mnav a{font-size:clamp(36px,10vw,60px);font-weight:700;letter-spacing:-.05em;line-height:1.1;text-decoration:none;padding-block:10px;border-bottom:1.5px solid rgb(14 14 14 / .18)}
.mnav a:last-child{border:0;margin-top:16px;font-size:20px;letter-spacing:-.01em;background:var(--ink);color:var(--white);border-radius:999px;padding:18px 24px;text-align:center}
@media (max-width:1060px){.nav,.hdr-cta{display:none}.menu-btn{display:inline-flex}}
body.menu-open{overflow:hidden}

/* Floating pill (DD "New Project?") */
.float-pill{position:fixed;z-index:45;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));--h:58px;padding:0 26px;box-shadow:0 18px 40px -18px rgb(14 14 14 / .6);transform:translateY(140%);transition:transform .6s var(--ease),color .3s}
.float-pill.on{transform:none}
.float-pill:active{transform:scale(.98)}

/* ===== Home: hero + "From cloud to code" story (one pinned stage) ===== */
.story{position:relative;background:var(--bg)}
.stage{position:relative;height:calc(100svh - var(--hdr));min-height:620px;overflow:hidden}
.hairline{position:absolute;width:160vw;left:-30vw;top:42%;height:1px;background:#B4B4B1;transform:rotate(var(--r));transform-origin:center;pointer-events:none;z-index:1}
.hairline span{position:absolute;left:var(--at,60%);top:-22px;font:500 12px/1 var(--mono);color:var(--soft);white-space:nowrap}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-top:2vh;z-index:3}
.hero-copy h1{font-size:clamp(50px,8.6vw,138px);letter-spacing:-.062em;line-height:.93;max-width:13ch;position:relative}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(28px,4vw,48px)}
.hero-foot .lead{max-width:40ch;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:12px;font:500 12px/1.3 var(--mono);color:var(--muted)}
.badge b{display:block;font:800 15px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.badge i{width:38px;height:38px;border-radius:999px;background:var(--white);display:grid;place-items:center;font-style:normal;color:var(--accent);font:800 13px/1 var(--sans)}

/* The cloud */
.cloud{position:absolute;z-index:4;width:clamp(150px,17vw,280px);aspect-ratio:316/211;left:0;top:0;cursor:pointer;border:0;padding:0;background:none;transform-origin:50% 50%;-webkit-tap-highlight-color:transparent}
.cloud svg{display:block;width:100%;height:100%;overflow:visible}
.cloud .fill{fill:var(--accent)}
.cloud svg{filter:drop-shadow(0 10px 28px var(--glow))}
.cloud .sketch{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:6 7}
.drop{position:absolute;z-index:3;width:3px;height:22px;border-radius:2px;background:var(--accent);pointer-events:none}

/* Story copy (beats) */
.beats{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,64px);pointer-events:none}
.beat-stack{position:relative;min-height:340px}
.beat{position:absolute;inset:0 0 auto;display:flex;flex-direction:column;gap:20px}
.beat .num{font:500 13px/1 var(--mono);color:var(--accent-text)}
.beat h2{font-size:clamp(44px,6.4vw,104px);letter-spacing:-.06em;line-height:.92}
.beat p{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:36ch}
.beat .btn-row{pointer-events:auto}
.scene{position:relative;width:100%;max-width:760px;justify-self:end;aspect-ratio:760/600}
.scene svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cloud-dock{position:absolute;left:32%;top:0;width:36%;aspect-ratio:316/211}
.dock-logo{position:absolute;left:25%;top:-4%;width:50%;color:var(--ink);opacity:0;pointer-events:none}
.cloud-icons [data-icon]{opacity:0}
.scene .frame{fill:var(--white);stroke:var(--ink);stroke-width:2.5}
.scene .wire{fill:none;stroke:#B9B9B6;stroke-width:1.5}
.scene .wire-fill{fill:#DCDCD9}
.scene .mono *{fill:none!important;stroke:#ADADAA!important;stroke-width:1.4px!important;stroke-dasharray:none!important;vector-effect:non-scaling-stroke}
.scene .mono text{fill:#ADADAA!important;stroke:none!important}
.scene text{font-family:var(--sans)}
.scene .rain{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:14 34}
.scene .tagp rect{fill:var(--ink)}
.scene .tagp text{fill:var(--white);font:700 15px var(--sans);letter-spacing:-.01em}
.scene .tagp.f rect{fill:var(--accent)}
.scene .tagp.f text{fill:var(--ink)}
.scene .big{font:800 64px var(--sans);letter-spacing:-.06em;fill:var(--ink)}
.scene .small{font:500 14px var(--mono);fill:var(--muted)}
.story-steps{display:none}
@media (max-width:900px){
  /* phone: copy on top, scene pinned to the bottom of the stage so they never overlap */
  .beats{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:start;padding-block:2svh;gap:clamp(16px,4svh,40px)}
  .beat-stack{min-height:min(176px,28svh)}
  .beat{gap:12px}
  .beat h2{font-size:clamp(32px,9vw,50px)}
  .beat p{font-size:15px;max-width:34ch}
  .beat .btn-row{display:none}
  .hero-copy{justify-content:flex-start;padding-top:7svh}
  .scene{justify-self:center;width:min(100%,520px,calc((100svh - var(--hdr) - 250px) * 1.27))}
}
/* Story runs only with JS + GSAP + motion allowed (site.js removes html.js otherwise).
   Fallback: hero copy, cloud and the four steps as plain content. */
html.js .beats{opacity:0}
html.js .cloud{opacity:0}
html:not(.js) .stage{height:auto;min-height:0;padding-block:clamp(72px,9vw,120px) 40px}
html:not(.js) .hero-copy{position:static}
html:not(.js) .beats,html:not(.js) .hairline{display:none}
html:not(.js) .cloud{right:var(--gr);left:auto;top:24px;width:clamp(96px,13vw,190px)}
html:not(.js) .story-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:24px 96px}
.story-steps div{border-top:2px solid var(--ink);padding-top:18px}
.story-steps h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.04em;margin-bottom:8px}
.story-steps p{color:var(--muted)}
@media (max-width:900px){html:not(.js) .story-steps{grid-template-columns:minmax(0,1fr)}}

/* Ribbon (black ticker, DD) */
.ribbon-wrap{overflow:hidden;padding-block:28px}
.ribbon{background:var(--ink);color:var(--white);overflow:hidden;padding-block:18px;transform:rotate(-1.6deg) scale(1.03);position:relative;z-index:5}
.ribbon-track{display:flex;gap:32px;width:max-content;animation:marq 34s linear infinite;font:700 clamp(18px,1.8vw,24px)/1 var(--sans);letter-spacing:-.02em}
.ribbon-track span{display:inline-flex;align-items:center;gap:32px;white-space:nowrap}
.ribbon-track span::after{content:"\203A";color:var(--accent);font-weight:800}
@keyframes marq{to{transform:translateX(-50%)}}

/* Work slider (DD) */
.slider{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:end;margin-top:48px}
.slides{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:var(--stone)}
.slide{position:absolute;inset:0;visibility:hidden}
.slide.on{visibility:visible}
.slide img{width:100%;height:100%;object-fit:cover}
.poster{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,3vw,44px)}
.poster b{font-size:clamp(40px,6vw,96px);letter-spacing:-.06em;line-height:.9;font-weight:800}
.poster .client{height:clamp(48px,6vw,80px);width:60%;background:currentColor}
.poster small{font:500 13px/1.4 var(--mono)}
.slide-meta{display:flex;flex-direction:column;gap:18px;padding-bottom:6px}
.slide-meta h3{font-size:clamp(30px,3.4vw,52px);letter-spacing:-.05em}
.slide-meta p{color:var(--muted);max-width:42ch}
.slide-meta .chips{margin-top:0}
.slider-ctl{display:flex;align-items:center;gap:18px;margin-top:24px}
.slider-ctl button{width:48px;height:48px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background-color .25s,color .25s}
.slider-ctl button:hover{background:var(--ink);color:var(--white)}
.slider-ctl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.slider-count{font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
.slider-bar{flex:1;height:2px;background:var(--line);position:relative}
.slider-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transition:transform .6s var(--ease)}
@media (max-width:900px){.slider{grid-template-columns:minmax(0,1fr)}}

/* Stats (DD) */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.stat b{display:block;font-size:clamp(64px,8.4vw,132px);font-weight:700;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;padding-bottom:24px;border-bottom:1.5px solid var(--ink)}
.stat span{display:block;margin-top:22px;font-size:clamp(20px,1.9vw,28px);font-weight:700;letter-spacing:-.035em;line-height:1.15;max-width:16ch}
@media (max-width:760px){.stats{grid-template-columns:minmax(0,1fr)}}
.intro{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);margin-bottom:clamp(64px,8vw,120px)}
.intro p{font-size:clamp(24px,2.5vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.2;max-width:28ch}
.intro p a{color:var(--accent-text);text-decoration:none;white-space:nowrap}
/* About: a small cloud rains on the paragraph and paints it word by word (site.js paint()) */
.intro{position:relative}
.rc-home{width:clamp(64px,7vw,104px);aspect-ratio:316/211;margin-top:clamp(24px,3vw,44px)}
.rc{position:absolute;left:0;top:0;width:clamp(64px,7vw,104px);aspect-ratio:316/211;pointer-events:none;z-index:2}
.rc svg{display:block;width:100%;height:100%;fill:var(--accent);filter:drop-shadow(0 8px 20px var(--glow))}
.rc-rain{position:absolute;left:22%;right:22%;top:72%;height:42px;display:flex;justify-content:space-between;opacity:0;transition:opacity .3s,height .45s var(--ease)}
.rc-rain i{width:2px;height:100%;background:repeating-linear-gradient(to bottom,var(--accent) 0 9px,transparent 9px 24px);opacity:.85;animation:rcfall .5s linear infinite}
.rc-rain i:nth-child(2){animation-delay:-.12s}.rc-rain i:nth-child(3){animation-delay:-.31s}.rc-rain i:nth-child(4){animation-delay:-.2s}
.rc.raining .rc-rain{opacity:1}
@keyframes rcfall{from{background-position:0 0}to{background-position:0 24px}}
html:not(.js) .rc{display:none}
.cando{border-top:1.5px solid var(--ink);padding-top:clamp(32px,4vw,56px)}
.cando h2{max-width:18ch}
.cando-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3vw,44px)}
.cando-list li{padding:11px 18px;border-radius:999px;background:var(--bg);font-weight:700;font-size:clamp(14px,1.1vw,16px);letter-spacing:-.01em}
.cando-list li:nth-child(5n+2){background:var(--accent);color:var(--on-accent);box-shadow:0 8px 22px -12px var(--glow)}
.cando-list li:nth-child(7n+4){background:var(--ink);color:var(--white)}
@media (max-width:900px){.intro{grid-template-columns:minmax(0,1fr)}.rc-home{margin-top:16px}}
@media (prefers-reduced-motion:reduce){.rc-rain i{animation:none}}

/* Services list (DD) */
.svc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:start;margin-top:56px}
.svc-list{display:flex;flex-direction:column}
.svc-item{text-decoration:none;display:flex;align-items:baseline;gap:20px;background:none;border:0;padding:6px 0;text-align:left;cursor:pointer;color:var(--soft);transition:color .3s}
.svc-item small{font:500 12px/1 var(--mono);width:22px;color:inherit}
.svc-item span{font-size:clamp(30px,3.6vw,56px);font-weight:700;letter-spacing:-.05em;line-height:1.1;transition:transform .5s var(--ease)}
.svc-item[aria-selected="true"]{color:var(--ink)}
.svc-item[aria-selected="true"] span{transform:translateX(8px)}
.svc-item:hover{color:var(--ink)}
.svc-panel{position:sticky;top:calc(var(--hdr) + 40px);display:flex;flex-direction:column;gap:22px;padding-top:14px}
.svc-panel .chips{margin:0}
.svc-panel p{font-size:17px;color:var(--muted);max-width:44ch}
.svc-panel .proof{font:500 13px/1.5 var(--mono);color:var(--muted)}
.svc-panel hr{border:0;border-top:1.5px solid var(--ink);margin:6px 0 0}
@media (max-width:900px){.svc{grid-template-columns:minmax(0,1fr)}.svc-panel{position:static}}

/* Aimate block (Refokus flame) */
.aimate-word{font-size:clamp(90px,21vw,340px);font-weight:800;letter-spacing:-.08em;line-height:.8}
.road{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,88px);position:relative}
.road>div{border-top:2px solid var(--on-accent);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.road h3{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.045em;line-height:1.05}
.road p{color:#3A1A10;max-width:30ch}
.tag{display:inline-flex;align-self:flex-start;align-items:center;padding:6px 12px;border-radius:999px;font:500 12px/1 var(--mono);border:1.5px solid currentColor}
.tag-on{background:var(--ink);color:var(--white);border-color:var(--ink)}
@media (max-width:900px){.road{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.road{grid-template-columns:minmax(0,1fr)}}

/* Client logo grid (DD) */
.logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:48px}
.logo-grid>div{display:grid;place-items:center;aspect-ratio:2/1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px}
.logo-grid .client{height:clamp(30px,3vw,46px);max-width:80%;background:#7A7A77;transition:background-color .3s}
.logo-grid>div:hover .client{background:var(--ink)}
@media (max-width:760px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Client carousel: colour logos on brand-tinted tiles, two rows drifting in opposite directions */
.marq{display:grid;gap:14px;margin-top:clamp(36px,4vw,56px);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marq-track{display:flex;gap:14px;width:max-content;padding-block:10px;animation:marq 46s linear infinite}
.marq-row.rev .marq-track{animation-direction:reverse;animation-duration:52s}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 7px))}}
.tile{--tw:clamp(190px,19vw,290px);flex:none;display:grid;place-items:center;width:var(--tw);height:calc(var(--tw) / 2);overflow:hidden;border-radius:20px;background:var(--t);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile img{display:block;max-width:70%;max-height:calc(48% * var(--s,1));width:auto;height:auto;object-fit:contain}
.tile:hover,.tile:focus-visible{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 26px 40px -26px rgba(14,14,14,.5)}
@media (prefers-reduced-motion:reduce){.marq{-webkit-mask:none;mask:none}.marq-track{animation:none;flex-wrap:wrap;width:auto;padding-inline:var(--gl) var(--gr)}.tile.dup{display:none}}
.client{display:block;height:44px;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span,.chips a{padding:9px 15px;border-radius:999px;font-size:14px;font-weight:600;background:var(--white);text-decoration:none}
.white .chips span,.p-surface .chips span{background:var(--bg)}
.p-ink .chips span{background:#262626;color:var(--white)}
.p-flame .chips span{background:rgb(14 14 14 / .1)}

/* Page hero (inner pages) */
.phero{padding-block:clamp(72px,9vw,140px) clamp(48px,6vw,88px)}
.phero h1{max-width:14ch}
.phero .lead{margin-top:28px}
.phero .btn-row{margin-top:36px}
.phero-meta{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:40px;font:500 13px/1 var(--mono);color:var(--muted)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.track-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}

/* Filters */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);font:700 15px/1 var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color .25s,border-color .25s,color .25s}
.pill:hover{border-color:var(--ink)}
.pill small{font:400 12px var(--mono);color:var(--muted)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pill[aria-pressed="true"] small{color:#CFCFCC}

/* Project index rows */
.plist{border-top:1.5px solid var(--ink);margin-top:32px}
.prow{border-bottom:1px solid var(--line)}
.prow>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;gap:24px;align-items:center;padding-block:clamp(20px,2.4vw,32px)}
.prow>summary::-webkit-details-marker{display:none}
.prow h2{font-size:clamp(28px,3.8vw,58px);letter-spacing:-.055em;transition:transform .6s var(--ease),color .3s}
.prow>summary:hover h2{transform:translateX(12px);color:var(--accent-text)}
.prow .sector{color:var(--muted);font-size:15px}
.status{font:500 12px/1 var(--mono);padding:7px 12px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;background:var(--white)}
.status.build{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.plus{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--ink);display:grid;place-items:center;transition:transform .4s var(--ease),background-color .3s}
.plus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.prow[open] .plus{transform:rotate(45deg);background:var(--ink);color:var(--white)}
.pbody{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding-bottom:40px}
.pbody figure{border-radius:4px;overflow:hidden;background:var(--white);aspect-ratio:4/3}
.pbody figure img{width:100%;height:100%;object-fit:cover}
.pbody .noimg{display:grid;place-items:center;padding:24px;color:var(--ink);font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.05em;text-align:center}
.pbody .noimg .client{height:56px;width:70%;background:var(--ink)}
.pbody p{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:52ch}
.pbody ul{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--line)}
.pbody li{padding-block:12px;border-bottom:1px solid var(--line);display:flex;gap:12px}
.pbody li::before{content:"\203A";color:var(--accent-text);font-weight:800}
.pbody .btn-row{margin-top:28px}
@media (max-width:860px){.prow>summary{grid-template-columns:minmax(0,1fr) auto}.prow .sector{grid-column:1;order:3}.prow .status{order:2;justify-self:start}.pbody{grid-template-columns:minmax(0,1fr)}}

/* Bento (expertise) */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento>a{border-radius:var(--r);padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:280px;text-decoration:none;transition:transform .5s var(--ease)}
.bento>a:hover{transform:translateY(-6px)}
.bento h3{font-size:clamp(28px,2.6vw,40px)}
.bento p{font-size:16px;max-width:40ch}
.bento .go{display:flex;align-items:center;justify-content:space-between;font-weight:700}
.bento .go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.b-w4{grid-column:span 4}.b-w3{grid-column:span 3}.b-w2{grid-column:span 2}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento>a{grid-column:auto!important}}
@media (max-width:600px){.bento{grid-template-columns:minmax(0,1fr)}}
.p-surface{background:var(--white)}
.p-surface p{color:var(--muted)}
.p-ink{background:var(--ink);color:var(--white)}
.p-ink p{color:#B5B5B2}
.p-flame{background:var(--accent);color:var(--on-accent)}
.p-stone{background:var(--stone)}
.p-stone p{color:var(--muted)}

/* Process path */
.glance-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-bottom:16px;border-bottom:1.5px solid var(--ink);font:500 13px/1.4 var(--mono);color:var(--muted)}
.glance-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.glance-list li+li{border-left:1px solid var(--line)}
.glance-list a{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px);height:100%;padding:24px clamp(14px,1.6vw,24px) 28px;text-decoration:none;font:800 clamp(22px,2.3vw,34px)/1.02 var(--sans);letter-spacing:-.045em;transition:color .3s var(--ease),background .3s var(--ease)}
.glance-list li:first-child a{padding-left:0}
.glance-list a:hover{color:var(--accent-text)}
.glance-list small{font:500 13px/1 var(--mono);letter-spacing:0;color:var(--accent-text)}
.practices{margin-top:clamp(48px,6vw,88px);border-bottom:1px solid var(--line)}
.practice{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(20px,4vw,64px);padding-block:clamp(36px,4.4vw,64px);border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 24px)}
.practice-id{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.practice-id b{font:800 clamp(56px,6vw,96px)/.8 var(--sans);letter-spacing:-.07em;color:var(--accent)}
.practice h3{font-size:clamp(34px,4vw,60px);margin-bottom:20px}
.practice-main p{color:var(--muted);max-width:46ch}
.practice-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:26px}
.practice-more{font:500 13px/1 var(--mono);color:var(--muted)}
.practice-more:hover{color:var(--ink)}
.practice-caps{align-self:end}
.practice-caps li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:-.01em}
.practice-caps li:first-child{border-top:1px solid var(--line)}
.practice-caps li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
@media (max-width:960px){.practice{grid-template-columns:1fr}.practice-id{flex-direction:row;align-items:center}.glance-list{grid-template-columns:repeat(2,minmax(0,1fr))}.glance-list li:nth-child(3){border-left:0}.glance-list li:nth-child(3) a{padding-left:0}.glance-list li:nth-child(n+3){border-top:1px solid var(--line)}}
.path{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:64px;padding-top:44px}
.path::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.path-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform-origin:left}
.path h3{font-size:clamp(32px,3.4vw,52px);margin-bottom:14px}
.path p{color:var(--muted);max-width:34ch}
@media (max-width:760px){.path{grid-template-columns:minmax(0,1fr)}}

/* Platform logos */
.plat{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,5vw,72px);margin-top:44px}
.plat svg{height:clamp(30px,3vw,40px);width:auto;fill:currentColor;opacity:.85}
.plat .client{height:clamp(32px,3.4vw,46px);background:var(--ink)}

/* Service page */
.deliver{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.deliver>div{border-radius:var(--r);padding:clamp(24px,2.6vw,40px);min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;background:var(--white)}
.deliver h3{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.045em}
.deliver p{color:var(--muted)}
.deliver>div:nth-child(4){background:var(--accent);color:var(--on-accent)}
.deliver>div:nth-child(4) p{color:#3A1A10}
@media (max-width:700px){.deliver{grid-template-columns:minmax(0,1fr)}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.card{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.card figure{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--white);display:grid;place-items:center}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover figure img{transform:scale(1.05)}
.card figure .client{height:52px;width:62%;background:var(--ink)}
.card figure b{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.05em;padding:16px;text-align:center}
.card h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.04em;line-height:1.1}
.card p{color:var(--muted);font-size:15px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:minmax(0,1fr)}}
.next-link{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;padding-block:12px}
.next-link h3{font-size:clamp(34px,5vw,80px);transition:transform .6s var(--ease),color .3s}
.next-link:hover h3{transform:translateX(12px);color:var(--accent-text)}
.next-link small{display:block;font:500 13px/1 var(--mono);color:var(--muted);margin-bottom:14px;letter-spacing:0}
.arr{width:60px;height:60px;border-radius:999px;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background-color .3s,transform .5s var(--ease);flex:none}
.arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.next-link:hover .arr{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:24px;font:700 clamp(18px,1.5vw,21px)/1.3 var(--sans);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:36px;height:36px;border-radius:999px;background:var(--ink);color:var(--white);display:grid;place-items:center;font-weight:500;font-size:20px;transition:transform .4s var(--ease),background-color .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--accent);color:var(--ink)}
.faq details p{padding-bottom:24px;color:var(--muted);max-width:60ch}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* CTA band */
.cta-band{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px}
.cta-band h2{max-width:13ch}

/* Sticky stack (Aimate page) */
.stack-cards{display:flex;flex-direction:column;gap:24px;margin-top:56px}
.scard{border-radius:24px;padding:clamp(28px,4vw,64px);min-height:clamp(360px,58vh,520px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:end;transform-origin:center top;background:var(--white)}
.scard h3{font-size:clamp(40px,5.4vw,84px)}
.scard p{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:44ch;color:var(--muted)}
.scard.flame{background:var(--accent)}
.scard.flame{color:var(--on-accent)}
.scard.flame p{color:#3A1A10}
.scard .when{font:500 13px/1 var(--mono);display:block;margin-bottom:18px;color:var(--accent-text)}
.scard.flame .when{color:var(--on-accent)}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.scard{position:sticky;top:calc(var(--hdr) + 32px + var(--i,0) * 28px)}}
@media (max-width:900px){.scard{grid-template-columns:minmax(0,1fr);min-height:0}}
.caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.caps>div{border-radius:var(--r);padding:clamp(24px,3vw,44px);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;background:var(--white)}
.caps>div.flame{background:var(--accent)}
.caps h3{font-size:clamp(28px,2.8vw,44px);margin-top:14px}
@media (max-width:760px){.caps{grid-template-columns:minmax(0,1fr)}}

/* About */
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start}
.prose{display:flex;flex-direction:column;gap:20px;font-size:clamp(18px,1.5vw,21px);line-height:1.6;max-width:60ch}
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:48px;border-top:1.5px solid var(--ink)}
.values>div{padding-block:32px;border-bottom:1px solid var(--line)}
.values h3{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.045em;margin-bottom:12px}
.values p{color:var(--muted)}
.cert{border-radius:4px;overflow:hidden;background:#fff}
@media (max-width:900px){.story-grid,.values{grid-template-columns:minmax(0,1fr)}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.cinfo{display:flex;flex-direction:column;gap:26px;margin-top:44px}
.cinfo dt{font:500 12px/1 var(--mono);color:var(--muted);margin-bottom:8px}
.cinfo dd{font-size:clamp(19px,1.6vw,22px);font-weight:700;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cinfo dd a{text-decoration:none;border-bottom:1.5px solid var(--line)}
.copy{min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);font-size:13px;font-weight:700;cursor:pointer}
.form{display:flex;flex-direction:column;gap:22px;background:var(--white);border-radius:24px;padding:clamp(24px,3.4vw,48px)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:640px){.frow{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-weight:700;font-size:15px}
.field .opt{font-weight:500;color:var(--muted)}
.field .hint{font-size:14px;color:var(--muted)}
.field input,.field select,.field textarea{font:500 17px/1.4 var(--sans);color:var(--ink);background:var(--bg);border:1.5px solid var(--bg);border-radius:var(--r-sm);padding:14px 16px;min-height:54px;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6E6E6B;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:var(--white);box-shadow:0 0 0 3px var(--accent)}
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{border-color:var(--danger)}
.err{font-size:14px;color:var(--danger);font-weight:600}
.check{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;font-size:15px}
.check label{flex:1 1 0;min-width:0}
.check .err{flex-basis:100%}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent);flex:none}
.notice{padding:16px 18px;border-radius:var(--r-sm);font-weight:600;background:var(--bg)}
.notice.ok{color:var(--ok)}
.notice.bad{color:var(--danger)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:48px}
.steps>div{border-top:1.5px solid var(--ink);padding-top:22px}
.steps h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.04em;line-height:1.1;margin-bottom:10px}
.steps p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* Footer: compact, on an animated "sky" wallpaper of drifting Cloco clouds (canvas).
   The page opens with one cloud in the headline and closes in a sky full of them. */
.ftr{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);padding-block:clamp(64px,7vw,104px) 28px;
  background:linear-gradient(180deg,#DF7A55 0%,#E79C7F 34%,#EFC2B1 68%,#F8E8E0 100%)}
.ftr-sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.ftr-top{padding-bottom:clamp(40px,5vw,64px);border-bottom:1.5px solid rgb(14 14 14 / .85)}
/* Idea box: one giant sentence the visitor completes */
.idea-q{display:block;font:700 clamp(18px,1.6vw,22px)/1.3 var(--sans);letter-spacing:-.02em;margin-bottom:clamp(16px,2vw,28px)}
.idea-q span{color:var(--white)}
.idea-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px}
.idea-line{flex:1 1 520px;min-width:0;margin:0;font:800 clamp(28px,4.4vw,64px)/1.08 var(--sans);letter-spacing:-.05em}
.idea-pre{margin-right:.25em}
/* auto-growing field: the hidden copy (::after) sizes the box, so long ideas wrap onto the next line */
.idea-grow{display:inline-grid;vertical-align:top;width:100%;max-width:100%}
.idea-pre + .idea-grow{width:auto;min-width:min(100%,8em)}
.idea-grow::after{content:attr(data-grow) " ";visibility:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.idea-grow::after,.idea-grow textarea{grid-area:1/1;font:inherit;line-height:1.1;letter-spacing:inherit;padding:0 0 8px;border-bottom:3px solid transparent}
.idea-grow textarea{resize:none;overflow:hidden;background:transparent;border:0;border-bottom:3px solid var(--ink);border-radius:0;color:var(--ink);width:100%}
.idea-grow textarea::placeholder{color:#5A2A1A;opacity:.62;font-weight:600}
.idea-grow textarea:focus{outline:none;border-bottom-color:var(--white)}
.idea-row .btn{margin-bottom:8px}
@media (max-width:640px){.idea-row .btn{width:100%}.idea-line{font-size:clamp(26px,8vw,34px)}.idea-pre{display:block}.idea-pre + .idea-grow{width:100%}}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:clamp(36px,4vw,56px)}
.ftr h3{font:500 12px/1 var(--mono);color:#3A1A10;margin-bottom:14px;letter-spacing:0}
.ftr ul{display:flex;flex-direction:column}
.ftr li a,.ftr p a{display:inline-flex;min-height:30px;align-items:center;text-decoration:none;font-weight:700}
.ftr a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ftr address{font-style:normal;line-height:1.7;margin-bottom:10px;font-weight:700}
.ftr p{line-height:1.8;font-weight:700}
.ftr-legal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:22px;border-top:1px solid rgb(14 14 14 / .35);font-size:13px;font-weight:600}
.ftr-logo{display:block;width:74px;color:var(--ink)}
.ftr-links{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
@media (max-width:900px){.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.ftr-cols{grid-template-columns:minmax(0,1fr)}.ftr-links{margin-left:0}}

/* Cookie bar (DD: slim black bar bottom-left) */
.cookie{position:fixed;z-index:70;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right));max-width:620px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 14px 12px 20px;border-radius:14px;background:var(--ink);color:var(--white);font-size:14px;font-weight:500}
.cookie div{display:flex;gap:8px}
.cookie .btn-ghost{color:var(--white)}
.cookie .btn-ghost::before{background:var(--white)}
.cookie .btn-ghost:hover{color:var(--ink)}

/* Motion gates: only titles hide before JS reveals them */
html.js .reveal-title{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  html.js .reveal-title{visibility:visible}
  .ribbon-track{animation:none;flex-wrap:wrap;width:auto;padding-inline:24px}
  *,*::before,*::after{transition-duration:.01ms!important}}