/* ==========================================================================
   IDLE SHARK
   Near-black, warm off-white, signature orange. Dark chapters open and close
   the page; the editorial middle runs on paper. Orange is rationed to
   interaction, emphasis and section markers.
   ========================================================================== */

/* ── tokens ────────────────────────────────────────────────────────────── */
:root{
  --ink-900:#0A0C0F;
  --ink-800:#0E1116;
  --ink-700:#141821;
  --ink-600:#1B202A;

  /* hero tonal set — graphite, not flat black */
  --h-base: #101114;
  --h-1:    #15171B;
  --h-2:    #1C1F24;
  --h-3:    #262A31;
  --ivory:  #F3F0EA;

  --paper:  #F3F1EC;
  --paper-2:#EBE8E1;
  --paper-3:#DDD9D0;

  --orange: #FA6400;
  --orange-2:#FF8124;

  --d-text: #F2F0EB;
  --d-mid:  #98A0AC;
  --d-low:  #626A76;
  --d-line: rgba(242,240,235,.13);
  --d-line2:rgba(242,240,235,.28);

  --p-text: #14171C;
  --p-mid:  #575E68;
  --p-low:  #8A9099;
  --p-line: rgba(20,23,28,.14);
  --p-line2:rgba(20,23,28,.3);

  /* resolved per chapter */
  --text:var(--p-text); --mid:var(--p-mid); --low:var(--p-low);
  --line:var(--p-line); --line2:var(--p-line2);

  --sans: "Inter Tight", system-ui, sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-hero:clamp(2.85rem, 7.8vw, 8.2rem);
  --t-1:   clamp(2.1rem, 5.1vw, 4.7rem);
  --t-2:   clamp(1.65rem, 3.1vw, 2.85rem);
  --t-3:   clamp(1.3rem, 2.3vw, 2.15rem);
  --t-4:   clamp(1.02rem, 1.3vw, 1.24rem);
  --t-body:clamp(.94rem, 1vw, 1.05rem);
  --t-lbl: clamp(.7rem, .7vw, .715rem);

  --wrapw:1600px;
  --pad:  clamp(20px, 5vw, 76px);
  --gap:  clamp(14px, 1.6vw, 26px);
  --sec:  clamp(5.5rem, 11vw, 12rem);
  --hdr-h:76px;

  --e: cubic-bezier(.19,1,.22,1);
  --e2:cubic-bezier(.4,0,.15,1);
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink-900)}
body{
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:1px}

.wrap{width:100%;max-width:var(--wrapw);margin-inline:auto;padding-inline:var(--pad)}

/* chapter theming */
.dark{
  background:var(--ink-900);
  --text:var(--d-text);--mid:var(--d-mid);--low:var(--d-low);
  --line:var(--d-line);--line2:var(--d-line2);
  color:var(--text);
}
.paper{background:var(--paper)}
.paper-2{background:var(--paper-2)}

.skip{
  position:fixed;top:8px;left:8px;z-index:600;padding:.7rem 1.1rem;
  background:var(--orange);color:#fff;
  font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  transform:translateY(-200%);transition:transform .3s var(--e);
}
.skip:focus{transform:translateY(0)}

.lbl{
  font:500 var(--t-lbl)/1 var(--mono);
  text-transform:uppercase;letter-spacing:.15em;color:var(--low);
  display:inline-flex;align-items:center;gap:.6rem;
}
.lbl i{display:block;width:clamp(18px,2.4vw,36px);height:1px;background:currentColor;opacity:.5}
.dot{width:5px;height:5px;background:var(--orange);flex:0 0 auto}

em{font-style:normal;font-family:var(--serif);font-weight:400;letter-spacing:-.012em}

/* chapter marker — the transition device between sections */
.chap{
  display:flex;align-items:center;gap:1.2rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem,6vw,5rem);
}
.chap .lbl:first-child{color:var(--orange)}
.chap i{flex:1;height:1px;background:var(--line)}

.grain{
  position:fixed;inset:0;z-index:500;pointer-events:none;opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px;
}

/* scroll progress */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:450;pointer-events:none}
.prog i{display:block;height:100%;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* ── load sequence ─────────────────────────────────────────────────────── */
.boot{display:none}
html.js .boot{
  display:flex;position:fixed;inset:0;z-index:550;background:var(--ink-900);
  flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  transition:transform 1s var(--e),opacity .5s .4s;
}
html.js:not(.booted) body{overflow:hidden}
.boot__mark{width:clamp(38px,5vw,54px);height:auto;opacity:0;
  animation:bm .8s .05s var(--e) forwards}
.boot__rule{display:block;width:clamp(110px,16vw,200px);height:1px;background:var(--d-line)}
.boot__rule i{display:block;height:100%;width:0;background:var(--orange);animation:br 1s .1s var(--e2) forwards}
@keyframes bm{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes br{to{width:100%}}
html.booted .boot{transform:translateY(-101%);opacity:0;pointer-events:none}

/* ── header ────────────────────────────────────────────────────────────── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:300;color:var(--d-text);
  border-bottom:1px solid transparent;
  transition:background .5s var(--e2),border-color .5s,transform .55s var(--e),color .4s;
}
.hdr__in{
  width:100%;max-width:var(--wrapw);margin-inline:auto;padding-inline:var(--pad);
  height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.hdr.is-stuck{background:rgba(10,12,15,.82);backdrop-filter:blur(16px);border-bottom-color:var(--d-line)}
.hdr.is-hidden{transform:translateY(-101%)}
.hdr.on-paper{color:var(--p-text)}
.hdr.on-paper.is-stuck{background:rgba(243,241,236,.86);border-bottom-color:var(--p-line)}
.hdr.on-paper .hdr__brand img{content:url("../img/logo.webp")}
.hdr.on-paper .btn--ghost{color:var(--p-text);border-color:var(--p-line2)}
.hdr.on-paper .btn--ghost::before{background:var(--ink-900)}
.hdr.on-paper .btn--ghost:hover{color:var(--paper);border-color:var(--ink-900)}
.hdr.on-paper .menubtn i b{background:var(--p-text)}
/* the menu is always dark, so the bar over it is too — whatever section the
   page was showing when it opened */
body.menu-open .hdr,body.menu-open .hdr.on-paper.is-stuck{
  background:var(--ink-900);border-bottom-color:transparent;color:var(--d-text);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.menu-open .hdr .hdr__brand img{content:url("../img/logo-light.png")}
body.menu-open .hdr .btn--ghost{color:var(--d-text);border-color:var(--d-line2)}
body.menu-open .hdr .btn--ghost::before{background:var(--d-text)}
body.menu-open .hdr .btn--ghost:hover{color:var(--ink-900);border-color:var(--d-text)}
body.menu-open .hdr .menubtn i b{background:var(--d-text)}

.hdr__brand img{width:clamp(94px,8vw,116px);height:auto}
.hdr__act{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem)}

.menubtn{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem 0}
.menubtn__t{font:500 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.14em}
.menubtn__t[data-close]{display:none}
.menubtn i{display:grid;gap:4px;width:18px}
.menubtn i b{display:block;height:1.4px;background:var(--d-text);transition:transform .45s var(--e)}
body.menu-open .menubtn__t[data-open]{display:none}
body.menu-open .menubtn__t[data-close]{display:block}
body.menu-open .menubtn i b:first-child{transform:translateY(2.7px) rotate(45deg)}
body.menu-open .menubtn i b:last-child{transform:translateY(-2.7px) rotate(-45deg)}

/* ── menu ──────────────────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:290;background:var(--ink-900);color:var(--d-text);
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--e);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  --low:var(--d-low);--line:var(--d-line);
}
.menu[hidden]{display:none}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__in{width:100%;max-width:var(--wrapw);margin:auto auto 0;
  padding:calc(var(--hdr-h) + clamp(1rem,4vh,3rem)) var(--pad) clamp(1.5rem,4vh,4rem)}
.menu__nav li{border-top:1px solid var(--d-line);overflow:hidden}
.menu__nav li:last-child{border-bottom:1px solid var(--d-line)}
.menu__nav a{
  display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.8rem);
  padding:clamp(.45rem,min(1.7vw,1.6vh),1.25rem) 0;
  font-size:clamp(2.1rem,min(7.2vw,7vh),4.8rem);font-weight:500;letter-spacing:-.04em;line-height:1.08;
  transform:translateY(110%);transition:transform .9s var(--e),color .35s;
}
body.menu-open .menu__nav a{transform:translateY(0)}
.menu__nav li:nth-child(1) a{transition-delay:.16s}
.menu__nav li:nth-child(2) a{transition-delay:.22s}
.menu__nav li:nth-child(3) a{transition-delay:.28s}
.menu__nav li:nth-child(4) a{transition-delay:.34s}
.menu__nav li:nth-child(5) a{transition-delay:.40s}
.menu__nav li:nth-child(6) a{transition-delay:.46s}
.menu__nav a em{font:500 var(--t-lbl)/1 var(--mono);font-style:normal;color:var(--d-low);letter-spacing:.14em}
.menu__nav a:hover{color:var(--orange)}
.menu__foot{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,5rem);margin-top:clamp(1.25rem,4vh,3.5rem);
  opacity:0;transform:translateY(12px);transition:opacity .6s .55s,transform .7s .55s var(--e);
}
body.menu-open .menu__foot{opacity:1;transform:none}
.menu__foot .lbl{display:flex;margin-bottom:.9rem}
.menu__mail{font-size:var(--t-4);font-weight:500}
.menu__mail:hover{color:var(--orange)}
.menu__soc{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.menu__soc a{font-size:.92rem;color:var(--d-mid);transition:color .3s}
.menu__soc a:hover{color:var(--orange)}

/* ── buttons & links ───────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 1.7rem;overflow:hidden;isolation:isolate;
  font-size:.86rem;font-weight:500;
  transition:color .45s var(--e2),border-color .45s var(--e2);
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn i{position:relative;z-index:2;width:15px;height:1px;background:currentColor;
  transition:width .45s var(--e)}
.btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover i{width:24px}
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);
  transition:transform .55s var(--e)}
.btn:hover::before{transform:translateY(0)}
.btn--sm{padding:.66rem 1.1rem;font-size:.8rem}
.btn--lg{padding:1.25rem 2.2rem;font-size:.92rem}
.btn--solid{background:var(--orange);color:#fff}
.btn--solid::before{background:var(--d-text)}
.btn--solid:hover{color:var(--ink-900)}
.btn--ghost{border:1px solid var(--d-line2);color:var(--d-text)}
.btn--ghost::before{background:var(--d-text)}
.btn--ghost:hover{color:var(--ink-900);border-color:var(--d-text)}
.btn:active{transform:scale(.985)}

.lnk{position:relative;display:inline-block;padding-bottom:.3rem;font-size:.88rem;font-weight:500}
.lnk::before,.lnk::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px}
.lnk::before{background:var(--line2)}
.lnk::after{background:var(--orange);transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--e)}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}

.go{
  display:inline-flex;align-items:center;gap:.5rem;
  font:500 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;
  transition:gap .45s var(--e),color .35s;
}
.go i{display:block;width:16px;height:1px;background:currentColor;transition:width .45s var(--e)}
a:hover .go{gap:.8rem;color:var(--orange)}
a:hover .go i{width:28px}

/* ── figures ───────────────────────────────────────────────────────────── */
.fig{position:relative;overflow:hidden;background:var(--ink-700)}
.paper .fig,.paper-2 .fig{background:var(--paper-3)}
.fig img{
  position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;
  translate:0 var(--py,0px);scale:var(--s,1.09);
  transition:scale 1.5s var(--e),clip-path 1.2s var(--e);
}
html.js .fig img{clip-path:inset(0 0 100% 0)}
html.js .fig.in img{clip-path:inset(0 0 0 0);--s:1}

/* ── reveal primitives ─────────────────────────────────────────────────── */
[data-reveal]{transition:opacity .9s var(--e2),transform 1s var(--e)}
html.js [data-reveal]{opacity:0;transform:translateY(22px)}
html.js [data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-d="4"]{transition-delay:.36s}

.ln{display:block;overflow:hidden;padding-bottom:.19em;margin-bottom:-.19em}
.ln>span{display:block;transition:transform 1.1s var(--e)}
html.js .ln>span{transform:translateY(125%)}
html.js [data-lines].in .ln>span{transform:translateY(0)}
[data-lines] .ln:nth-child(2)>span{transition-delay:.08s}
[data-lines] .ln:nth-child(3)>span{transition-delay:.16s}
[data-lines] .ln:nth-child(4)>span{transition-delay:.24s}

/* ══════════════ HERO ══════════════ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate;
  padding-top:calc(var(--hdr-h) + clamp(1.2rem,4vh,3rem));
  padding-bottom:clamp(1.4rem,3.5vh,2.6rem);
  overflow:hidden;background:var(--h-base);
}
/* the hero settles into the paper chapter below rather than butting against it */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:1;
  background:linear-gradient(to bottom,transparent,rgba(8,9,11,.85));
  pointer-events:none;
}

/* ── atmosphere: layered tone, no photograph ──────────────────────────── */
.atm{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atm span{position:absolute;display:block}
.atm__warm{
  top:-34%;right:-22%;width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(250,100,0,.16) 0%, rgba(190,86,20,.09) 34%, rgba(120,64,30,.03) 56%, transparent 72%);
  filter:blur(28px);
  opacity:0;transition:opacity 2s .35s var(--e);
  animation:drift 26s ease-in-out infinite alternate;
}
.atm__cool{
  left:-26%;bottom:-38%;width:88%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(96,116,150,.13) 0%, rgba(60,74,98,.06) 40%, transparent 70%);
  filter:blur(34px);
  opacity:0;transition:opacity 2s .5s var(--e);
  animation:drift2 32s ease-in-out infinite alternate;
}
.atm__grid{
  inset:0;
  background-image:
    linear-gradient(to right,rgba(242,240,235,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(242,240,235,.05) 1px,transparent 1px);
  background-size:clamp(56px,6vw,94px) clamp(56px,6vw,94px);
  -webkit-mask-image:radial-gradient(120% 90% at 62% 34%,#000 8%,transparent 68%);
          mask-image:radial-gradient(120% 90% at 62% 34%,#000 8%,transparent 68%);
  opacity:0;transition:opacity 1.8s .4s var(--e);
}
.atm__vig{
  inset:0;
  background:
    radial-gradient(130% 100% at 50% 42%,transparent 42%,rgba(6,7,9,.55) 100%),
    linear-gradient(to bottom,rgba(6,7,9,.5),transparent 26%);
}
html.booted .atm__warm,html.booted .atm__cool{opacity:1}
html.booted .atm__grid{opacity:1}
@keyframes drift{to{transform:translate3d(-4%,3%,0) scale(1.07)}}
@keyframes drift2{to{transform:translate3d(5%,-3%,0) scale(1.05)}}

/* ── registration frame ───────────────────────────────────────────────── */
.reg{position:absolute;inset:clamp(14px,2.2vw,30px);z-index:2;pointer-events:none}
.reg__c{
  position:absolute;width:13px;height:13px;
  border:0 solid rgba(242,240,235,.3);
  opacity:0;transition:opacity 1s 1.15s var(--e);
}
.reg__c--tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.reg__c--tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.reg__c--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.reg__c--br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.reg__t{
  position:absolute;top:50%;display:inline-flex;align-items:center;gap:.5rem;
  font:400 var(--t-lbl)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,240,235,.26);white-space:nowrap;
  opacity:0;transition:opacity 1s 1.3s var(--e);
}
.reg__t i{display:block;width:14px;height:1px;background:var(--orange);opacity:.8}
.reg__t--l{left:0;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;
  translate:-.55em 0}
.reg__t--r{right:0;transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  translate:.55em 0}
html.booted .reg__c,html.booted .reg__t{opacity:1}

/* ── layout ───────────────────────────────────────────────────────────── */
.hero__grid{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);row-gap:clamp(1.6rem,3vw,2.6rem);align-items:center;
}
.hero__copy{grid-column:1/7}
.hero__eyebrow{color:var(--d-mid);margin-bottom:clamp(1.2rem,2.6vw,2rem)}

.hero__title{
  font-size:var(--t-hero);font-weight:600;line-height:.9;letter-spacing:-.045em;
}
.hero__title em{font-size:1.07em}
.hero__title .ln--i{padding-left:.09em}

.hero__lede{
  color:var(--d-mid);max-width:38ch;font-size:var(--t-4);
  margin-top:clamp(1.4rem,2.8vw,2.2rem);
  padding-top:clamp(1.2rem,2.4vw,1.8rem);border-top:1px solid var(--d-line);
}
.hero__act{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.2rem,2.4vw,2.2rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}

/* ── CTA: compact, tactile, orange as the accent not the slab ─────────── */
.hcta{
  position:relative;display:inline-flex;align-items:center;gap:.9rem;
  padding:.95rem 1.5rem;overflow:hidden;isolation:isolate;
  background:var(--ivory);color:#15171B;
  font-size:.87rem;font-weight:500;letter-spacing:-.005em;
  transition:color .45s var(--e2);will-change:transform;
}
.hcta__fill{
  position:absolute;inset:0;z-index:-1;background:var(--orange);
  transform:translateY(101%);transition:transform .55s var(--e);
}
.hcta:hover{color:#fff}
.hcta:hover .hcta__fill{transform:translateY(0)}
.hcta__t{position:relative}
.hcta__a{
  position:relative;display:block;width:18px;height:1px;background:currentColor;
  transition:width .45s var(--e);
}
.hcta__a::after{
  content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.hcta:hover .hcta__a{width:28px}
.hcta:active{transform:scale(.985)}

/* ── product visual ───────────────────────────────────────────────────
   A single photograph, framed and left alone. No fake perspective, no
   second crop of the same shot floating in front of it — that is what made
   it read as a cut-out rather than a real product image. */
.show{grid-column:7/13;position:relative}

.panel{
  position:relative;overflow:hidden;background:var(--h-2);
  aspect-ratio:4/3;
  border:1px solid rgba(242,240,235,.08);
  box-shadow:0 34px 80px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35);
  /* scroll parallax and pointer depth share the translate channel */
  translate:var(--mx,0px) calc(var(--py,0px) + var(--my,0px));
}
.panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  scale:var(--s,1.06);transition:scale 1.6s var(--e);
}
html.js .panel{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--e)}
html.booted .panel{clip-path:inset(0 0 0 0);transition-delay:.5s}
html.booted .panel img{--s:1}

.show__cap{margin-top:clamp(1rem,2vw,1.5rem);color:var(--d-low)}

/* ── base row ─────────────────────────────────────────────────────────── */
.hero__base{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;padding-top:clamp(1.2rem,2.4vw,2rem);border-top:1px solid var(--d-line);
}
.hero__index{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  font:400 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--d-low)}
.hero__index li{display:flex;align-items:center;gap:1.5rem}
.hero__index li:not(:last-child)::after{content:"";width:3px;height:3px;background:var(--d-low);opacity:.6}
.cue{display:flex;align-items:center;gap:.7rem;color:var(--d-low);transition:color .35s}
.cue:hover{color:var(--orange)}
.cue i{position:relative;display:block;width:1px;height:30px;background:var(--d-line2);overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--orange);
  animation:cue 2.2s var(--e2) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ── hero entrance ────────────────────────────────────────────────────── */
[data-hero]{transition:opacity .9s var(--e2),transform 1s var(--e)}
html.js [data-hero]{opacity:0;transform:translateY(18px)}
html.booted [data-hero]{opacity:1;transform:none}
html.js [data-hero="1"]{transition-delay:.28s}
html.js [data-hero="2"]{transition-delay:.60s}
html.js [data-hero="3"]{transition-delay:.70s}
html.js [data-hero="4"]{transition-delay:.44s}
html.js [data-hero="5"]{transition-delay:.86s}
/* the headline is sequenced with the load, not with the scroll observer —
   otherwise it plays out of sight behind the boot overlay */
html.js .hero__title .ln>span{transform:none}
.hero__title .ch{display:inline-block}
html.js .hero__title .ch{transform:translateY(115%);transition:transform 1s var(--e)}
html.booted .hero__title .ch{transform:translateY(0)}
html.js .hero__title .ln:nth-child(1)>span{transition-delay:.34s}
html.js .hero__title .ln:nth-child(2)>span{transition-delay:.42s}
html.js .hero__title .ln:nth-child(3)>span{transition-delay:.50s}

/* ══════════════ POSITIONING ══════════════ */
.stmt{padding-block:var(--sec)}
.stmt__h{font-size:var(--t-1);font-weight:500;line-height:1.03;letter-spacing:-.04em;max-width:16ch}
.stmt__sub{
  font-size:var(--t-1);font-weight:500;line-height:1.03;letter-spacing:-.04em;
  margin-top:.15em;padding-left:clamp(0px,6vw,7rem);
}
.stmt__sub em{color:var(--orange);font-size:1.06em}
.stmt__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  margin-top:clamp(3.5rem,8vw,7rem);row-gap:clamp(2.5rem,5vw,4rem);
}
.stmt__body{grid-column:1/6;color:var(--mid);font-size:var(--t-4)}
.pill{grid-column:7/13;display:grid;gap:0}
.pill li{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1.5rem;
  padding:1.2rem 0;border-top:1px solid var(--line);transition:border-color .5s;
}
.pill li:last-child{border-bottom:1px solid var(--line)}
.pill li:hover{border-top-color:var(--orange)}
.pill em{font-size:var(--t-4);color:var(--text)}
.pill p{color:var(--mid)}

/* ══════════════ SERVICES ══════════════ */
.svc{padding-block:var(--sec)}
.svc__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.svc__aside{grid-column:1/5}
.svc__stick{position:sticky;top:calc(var(--hdr-h) + 3rem)}
.svc__h{font-size:var(--t-2);font-weight:500;line-height:1.08;letter-spacing:-.035em;max-width:13ch}
.svc__h em{font-size:1.06em}
.svc__panel{
  margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:1rem;
  border-top:1px solid var(--line);min-height:7.5em;
}
.svc__panel-n{color:var(--orange);display:block;margin-bottom:.9rem}
.svc__panel-d{color:var(--mid);max-width:32ch;opacity:0;transform:translateY(8px);
  transition:opacity .4s,transform .55s var(--e)}
.svc__panel-d.on{opacity:1;transform:none}
.svc__note{color:var(--low);max-width:30ch;margin-top:1.4rem;font-size:.9rem}

.svc__list{grid-column:6/13}
.svc__row{border-top:1px solid var(--line)}
.svc__row:last-child{border-bottom:1px solid var(--line)}
.svc__row a{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1rem,2.6vw,2.4rem);
  padding:clamp(1.5rem,3.4vw,2.7rem) 0;transition:padding-left .65s var(--e);
}
.svc__row a::after{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e);
}
.svc__row a:hover::after{transform:scaleX(1)}
.svc__row a:hover{padding-left:clamp(.7rem,1.6vw,1.5rem)}
.svc__n{color:var(--low);transition:color .4s}
.svc__row a:hover .svc__n{color:var(--orange)}
.svc__t{font-size:var(--t-3);font-weight:500;letter-spacing:-.03em}
.svc__tag{color:var(--low);transition:opacity .4s,transform .55s var(--e)}
.svc__row a:hover .svc__tag{opacity:0;transform:translateX(12px)}
.svc__d{display:none}

/* ══════════════ WORK ══════════════ */
.work{padding-block:var(--sec)}
.work__h{
  font-size:var(--t-1);font-weight:500;line-height:1.02;letter-spacing:-.04em;
  margin-bottom:clamp(3rem,7vw,6rem);
}
.work__h em{color:var(--orange);font-size:1.06em}

.work__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.work__idx{grid-column:1/3}
.work__idx-stick{position:sticky;top:calc(var(--hdr-h) + 4rem)}
.work__idx ol{display:grid;gap:.8rem}
.work__idx li{
  display:flex;gap:.8rem;align-items:baseline;
  font:400 var(--t-lbl)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--d-low);
  transition:color .45s var(--e2),transform .6s var(--e);
}
.work__idx li em{font-family:var(--mono);font-style:normal;color:inherit}
/* the project in view takes the accent, and steps forward a little */
.work__idx li.on{color:var(--orange);transform:translateX(7px)}
.work__idx-bar{margin-top:1.6rem;height:1px;background:var(--d-line);overflow:hidden}
.work__idx-bar i{
  display:block;height:100%;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:left;
}

.work__stack{
  grid-column:4/13;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
  column-gap:var(--gap);row-gap:clamp(4rem,9vw,8rem);
}
.cs a,.cs__in{display:block}
.cs__head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:.9rem;margin-bottom:1.1rem;border-bottom:1px solid var(--d-line);
  transition:border-color .5s;
}
.cs a:hover .cs__head{border-bottom-color:var(--orange)}
.cs__live{color:var(--orange)}
.cs__meta{padding-top:1.1rem;display:grid;gap:.35rem}
.cs__meta h3{font-size:var(--t-3);font-weight:500;letter-spacing:-.03em;
  transition:transform .65s var(--e)}
.cs a:hover .cs__meta h3{transform:translateX(10px)}
.cs__meta p{color:var(--d-mid);font-size:.95rem}
.cs__meta .go{margin-top:.8rem;color:var(--d-text)}
.cs a:hover .fig img{--s:1.045}

.cs--wide{grid-column:1/10}
.cs--wide .fig{aspect-ratio:16/9}
.cs--tall{grid-column:1/6}
.cs--tall .fig{aspect-ratio:4/3}
.cs--narrow{grid-column:6/10;margin-top:clamp(2rem,7vw,6rem)}
.cs--narrow .fig{aspect-ratio:4/5}
.cs--mid{grid-column:2/8}
.cs--mid .fig{aspect-ratio:4/3}

.work__more{margin-top:clamp(4rem,8vw,7rem)}

/* ══════════════ SECTORS ══════════════ */
.sect{padding-block:var(--sec)}
.sect__head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  align-items:end;margin-bottom:clamp(3rem,7vw,5.5rem);row-gap:1rem;
}
.sect__h{grid-column:1/8;font-size:var(--t-1);font-weight:500;letter-spacing:-.04em;line-height:1.03}
.sect__h em{font-size:1.06em}
.sect__p{grid-column:9/13;color:var(--mid)}
.sect__list{border-top:1px solid var(--line)}
.sect__list li{
  position:relative;display:grid;
  grid-template-columns:minmax(0,4rem) minmax(0,7fr) minmax(0,9fr);
  gap:clamp(1rem,2.6vw,2.4rem);align-items:baseline;
  padding:clamp(1.4rem,3vw,2.3rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left .65s var(--e);
}
.sect__list li::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e);
}
.sect__list li:hover::after{transform:scaleX(1)}
.sect__list li:hover{padding-left:clamp(.7rem,1.6vw,1.5rem)}
.sect__list .lbl{transition:color .4s}
.sect__list li:hover .lbl{color:var(--orange)}
.sect__list h3{font-size:var(--t-3);font-weight:500;letter-spacing:-.03em}
.sect__list p{color:var(--mid);font-size:.96rem;max-width:46ch}

/* ══════════════ TECHNOLOGY ══════════════ */
.tech{padding-block:var(--sec)}
.tech__head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
  align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem);row-gap:1.2rem;
}
.tech__h{grid-column:1/7;font-size:var(--t-2);font-weight:500;line-height:1.08;letter-spacing:-.035em}
.tech__h em{font-size:1.06em}
.tech__read{
  grid-column:8/13;color:var(--mid);min-height:3.2em;font-size:var(--t-4);
  transition:opacity .35s;
}
.tech__read.swap{opacity:0}
.tech__list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.tech__list li{
  display:flex;align-items:baseline;gap:.9rem;cursor:default;
  padding:clamp(1.1rem,2.2vw,1.7rem) 0;border-bottom:1px solid var(--line);
  font-size:var(--t-4);font-weight:500;letter-spacing:-.02em;
  transition:color .4s,padding-left .5s var(--e);
}
.tech__list li em{font:400 var(--t-lbl)/1 var(--mono);font-style:normal;
  color:var(--low);letter-spacing:.14em;transition:color .4s}
.tech__list li:hover,.tech__list li.on{color:var(--orange);padding-left:.5rem}
.tech__list li:hover em,.tech__list li.on em{color:var(--orange)}
/* on pointer devices the readout carries the copy; on touch it lives inline */
.tech__d{display:none}

/* ══════════════ ABOUT ══════════════ */
.abt{position:relative;padding-block:var(--sec);overflow:hidden}
.abt__mark{
  position:absolute;right:-4%;top:50%;width:min(46%,520px);height:auto;
  translate:0 calc(-50% + var(--py,0px));opacity:.05;pointer-events:none;
}
.abt__h{
  position:relative;font-size:var(--t-1);font-weight:500;line-height:1.02;letter-spacing:-.042em;
}
.abt__h em{color:var(--orange);font-size:1.06em}
.abt__h .ln--i{padding-left:.08em}
.abt__grid{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);row-gap:1.4rem;margin-top:clamp(3rem,7vw,5.5rem);
}
.abt__grid p{grid-column:span 4;color:var(--d-mid)}
.quote{
  grid-column:9/13;padding-left:1.4rem;border-left:1px solid var(--orange);
  font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.34;
  letter-spacing:-.01em;color:var(--d-text);
}

/* ══════════════ CTA ══════════════ */
.cta{padding-block:clamp(5rem,11vw,11rem)}
.cta__h{
  font-size:var(--t-1);font-weight:500;line-height:1.02;letter-spacing:-.042em;
  margin-bottom:clamp(2.5rem,6vw,5rem);
}
.cta__h em{color:var(--orange);font-size:1.06em}
.cta__row{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);align-items:end;
  justify-content:space-between;padding-top:clamp(1.4rem,3vw,2.4rem);
  border-top:1px solid var(--d-line);
}
.cta__p{color:var(--d-mid);max-width:32ch;font-size:var(--t-4)}
.cta__act{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.cta__mail{
  display:inline-block;margin-top:clamp(2.5rem,5vw,4rem);
  font:400 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
  color:var(--d-mid);padding-bottom:5px;border-bottom:1px solid var(--d-line2);
  transition:color .35s,border-color .35s;
}
.cta__mail:hover{color:var(--orange);border-color:var(--orange)}

/* ══════════════ FOOTER ══════════════ */
.foot{padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--d-line)}
.foot .lbl{margin-bottom:1.1rem}
.foot__top{
  display:flex;flex-wrap:wrap;gap:1.2rem 3rem;align-items:baseline;
  padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--d-line);
}
.foot__brand img{width:clamp(118px,11vw,146px)}
.foot__tag{color:var(--d-mid);font-size:var(--t-4)}
.foot__tag em{color:var(--d-text)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem var(--gap);
  padding-block:clamp(2.5rem,5vw,4rem)}
.foot__cols ul{display:grid;gap:.5rem}
.foot__cols a{color:var(--d-mid);font-size:.94rem;transition:color .3s}
.foot__cols a:hover{color:var(--orange)}
.foot__base{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.6rem;border-top:1px solid var(--d-line);
}
.foot__base p{color:var(--d-low);font-size:.82rem}
.foot__end{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem}
.foot__cc{
  font:500 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--d-mid);padding-bottom:3px;border-bottom:1px solid var(--d-line2);
  transition:color .3s,border-color .3s;
}
.foot__cc:hover{color:var(--orange);border-color:var(--orange)}
.foot__up{
  display:inline-flex;align-items:center;gap:.55rem;
  font:500 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--d-mid);transition:color .3s;
}
.foot__up i{display:block;width:1px;height:12px;background:currentColor;transition:height .4s var(--e)}
.foot__up:hover{color:var(--orange)}
.foot__up:hover i{height:20px}

/* ── scroll-read statements: words light as the block passes ──────────── */
[data-read] .wd{display:inline-block;opacity:.14;transition:opacity .55s var(--e2)}
[data-read] .wd.lit{opacity:1}
[data-read].read-static .wd{opacity:1}
[data-read] em .wd{color:var(--orange)}

/* ── hero exit choreography ───────────────────────────────────────────── */
.hero{--exit:0}
.hero__copy{
  translate:0 calc(var(--exit) * -72px);
  opacity:calc(1 - var(--exit) * 1.25);
}
.hero .show{
  translate:0 calc(var(--exit) * 46px);
  scale:calc(1 - var(--exit) * .07);
}
.hero__base{opacity:calc(1 - var(--exit) * 1.8)}
.atm{opacity:calc(1 - var(--exit) * .6)}

/* ── case studies drift in and settle ─────────────────────────────────── */
.cs{--enter:0;--dir:1}
.cs--tall,.cs--mid{--dir:-1}
.cs{
  translate:calc(var(--dir) * var(--enter) * 40px) calc(var(--enter) * 56px);
  opacity:calc(1 - var(--enter) * .7);
}

/* ── chapter rules draw across on reveal ──────────────────────────────── */
.chap i{transform-origin:left;transform:scaleX(0);transition:transform 1.1s .12s var(--e)}
.chap.in i{transform:scaleX(1)}

/* ── kinetic ribbon ───────────────────────────────────────────────────── */
.mq{
  position:relative;overflow:hidden;background:var(--ink-900);
  border-block:1px solid var(--d-line);
  padding:clamp(1rem,2.2vw,1.6rem) 0;
}
.mq__track{display:flex;width:max-content;will-change:transform}
.mq__track>span{
  display:inline-flex;align-items:center;gap:clamp(1.3rem,3vw,2.6rem);
  padding-right:clamp(1.3rem,3vw,2.6rem);white-space:nowrap;
  font-size:clamp(1.15rem,2.7vw,2.1rem);font-weight:500;letter-spacing:-.03em;
  color:var(--d-text);
}
.mq__track i{
  display:block;width:6px;height:6px;background:var(--orange);flex:0 0 auto;
  rotate:45deg;
}
/* the wordmark carries the brand colour; the disciplines stay white */
.mq__track b{font-weight:inherit;color:var(--orange)}

/* ══════════════ INNER PAGES ══════════════ */

/* ── page hero ────────────────────────────────────────────────────────── */
.phero{
  position:relative;overflow:hidden;background:var(--h-base);
  padding-top:calc(var(--hdr-h) + clamp(4rem,11vw,9rem));
  padding-bottom:clamp(3.5rem,9vw,7rem);
}
.phero__lbl{color:var(--d-mid);margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.phero__h{
  position:relative;font-size:var(--t-1);font-weight:600;
  line-height:1.02;letter-spacing:-.042em;max-width:20ch;
}
.phero__h em{color:var(--orange);font-size:1.06em}
.phero__h--sm{font-size:var(--t-2);max-width:24ch}
.phero__lede{
  position:relative;margin-top:clamp(1.2rem,2.4vw,1.8rem);
  color:var(--d-mid);font-size:var(--t-4);max-width:46ch;
}
.phero--sm{padding-bottom:clamp(2.5rem,6vw,4.5rem)}

/* ── services page ────────────────────────────────────────────────────── */
.sdets{padding-block:var(--sec)}
.sdet{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--line);
}
.sdet:first-of-type{border-top:0;padding-top:clamp(2rem,4vw,3rem)}
.sdet--alt .sdet__copy{order:2}
.sdet--alt .sdet__fig{order:1}
.sdet__h{font-size:var(--t-2);font-weight:500;letter-spacing:-.035em;margin:1.2rem 0 .5rem}
.sdet__sub{
  font-family:var(--serif);font-style:italic;color:var(--orange);
  font-size:var(--t-4);line-height:1.3;margin-bottom:1rem;max-width:46ch;
}
.sdet__d{color:var(--mid);font-size:var(--t-4);max-width:40ch}
.sdet__lbl{margin-top:clamp(1.4rem,3vw,2.2rem);color:var(--low)}
.sdet__list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem clamp(1rem,2vw,2rem);margin:.9rem 0 clamp(1.4rem,3vw,2.2rem);
}
.sdet__list li{
  display:flex;gap:.6rem;color:var(--mid);font-size:.94rem;line-height:1.45;
}
.sdet__list li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;margin-top:.55em;
  background:var(--orange);rotate:45deg;
}
/* the promise each discipline is actually accountable for */
.sdet__out{
  display:grid;gap:.35rem;padding:clamp(.9rem,1.8vw,1.2rem) 0
    clamp(1.2rem,2.4vw,1.6rem);
  border-top:1px solid var(--line);color:var(--text);max-width:44ch;
}
.sdet__out .lbl{color:var(--orange)}
/* the creatives are finished brand collateral — shown whole, never cropped */
.sdet__fig{background:transparent}
.sdet__fig img{width:100%;height:auto;display:block}

/* ── I.D.E.L. framework — the index column carries a letter, not a number ── */
.sect__list--idel .idel__k{
  font-size:var(--t-3);line-height:1;color:var(--orange);letter-spacing:.02em;
}

/* ── work page ────────────────────────────────────────────────────────── */
.wks{padding-block:var(--sec)}
.wks__grid{display:grid;gap:clamp(4rem,10vw,9rem)}
.wk a,.wk .cs__wrap{display:block}
.wk__head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:.9rem;margin-bottom:1.2rem;border-bottom:1px solid var(--d-line);
  transition:border-color .5s;
}
.wk a:hover .wk__head{border-bottom-color:var(--orange)}
.wk__fig{aspect-ratio:16/9;background:var(--h-2)}
.wk__meta{padding-top:1.3rem;display:grid;gap:.35rem}
.wk__meta h2{font-size:var(--t-2);font-weight:500;letter-spacing:-.035em;
  transition:transform .65s var(--e)}
.wk a:hover .wk__meta h2{transform:translateX(10px)}
.wk__meta p{color:var(--d-mid);font-size:var(--t-4)}
.wk__meta .go{margin-top:.9rem;color:var(--d-text)}

/* ── blog ─────────────────────────────────────────────────────────────── */
.posts-sec{padding-block:var(--sec)}
.bl__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(2.5rem,5vw,5rem);align-items:start;
}
.bl__main{min-width:0}
.bl__clear{margin-left:auto;color:var(--mid)}
.bl__clear:hover{color:var(--orange)}

/* cards */
.cards{list-style:none;display:grid;gap:clamp(2rem,4vw,3.2rem)}
.card__in{
  display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:clamp(1.2rem,2.6vw,2.2rem);align-items:start;
}
.card__fig{aspect-ratio:4/3}
.card__fig img{transition:scale 1.5s var(--e),clip-path 1.2s var(--e)}
.card__in:hover .card__fig img{--s:1.05}
.card__body{display:block;min-width:0}
.card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:.9rem}
.card__cat{
  display:inline-block;padding:.38rem .6rem;
  font:500 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--orange);border:1px solid currentColor;
}
.card__t{
  display:block;font-size:var(--t-3);font-weight:500;letter-spacing:-.03em;line-height:1.15;
  transition:color .35s;
}
.card__in:hover .card__t{color:var(--orange)}
.card__x{display:block;color:var(--mid);font-size:.96rem;max-width:56ch;margin-top:.6rem}
.card .go{margin-top:1.1rem;color:var(--low)}

/* pagination */
.pgn{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--line);
}
.pgn__step{font:500 var(--t-lbl)/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--mid);transition:color .3s}
.pgn__step:hover{color:var(--orange)}
.pgn__step.is-off{color:var(--low);opacity:.5}
.pgn__nums{display:flex;gap:.3rem}
.pgn__n,.pgn__gap{
  display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;padding-inline:.5rem;
  font:500 .82rem/1 var(--mono);color:var(--mid);transition:color .3s,background .3s;
}
a.pgn__n:hover{color:var(--orange)}
.pgn__n.is-on{background:var(--text);color:var(--paper)}

/* sidebar */
.side{display:grid;gap:clamp(1.8rem,3vw,2.4rem);position:sticky;top:calc(var(--hdr-h) + 2rem)}
.side__box{padding-top:1.1rem;border-top:1px solid var(--line)}
.side__box .lbl{margin-bottom:1rem}
.side__search{display:flex;gap:.5rem}
.side__go{
  flex:0 0 auto;width:2.9rem;border:1px solid var(--line2);background:var(--text);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .3s;
}
.side__go i{position:relative;display:block;width:16px;height:1px;background:var(--paper)}
.side__go i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--paper);border-right:1px solid var(--paper);transform:rotate(45deg)}
.side__go:hover{background:var(--orange)}
.side__cats{list-style:none;display:grid}
.side__cats a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--line);color:var(--mid);font-size:.92rem;
  transition:color .3s,padding-left .5s var(--e);
}
.side__cats a b{font:500 .72rem/1 var(--mono);color:var(--low)}
.side__cats a:hover,.side__cats a[aria-current]{color:var(--text);padding-left:.5rem}
.side__cats a[aria-current]{color:var(--orange)}
.side__recent{list-style:none;display:grid;gap:.9rem}
.side__recent a{display:grid;grid-template-columns:4.4rem minmax(0,1fr);gap:.9rem;align-items:center}
.side__thumb{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper-3)}
.side__thumb img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--e)}
.side__recent a:hover .side__thumb img{scale:1.06}
.side__thumb--blank{background:linear-gradient(135deg,var(--paper-3),var(--paper-2))}
.side__rt{display:block;min-width:0}
.side__rtt{display:block;font-size:.92rem;font-weight:500;letter-spacing:-.015em;line-height:1.3;transition:color .3s}
.side__recent a:hover .side__rtt{color:var(--orange)}
.side__rtd{display:block;margin-top:.3rem;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--low)}
.side__cta{padding:clamp(1.4rem,2.4vw,1.8rem);background:var(--ink-800)}
.side__cta .lbl{color:var(--orange);margin-bottom:.9rem}
.side__ctah{font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.side__ctap{color:var(--d-mid);font-size:.9rem;margin:.9rem 0 1.3rem}
.side__wa{display:block;margin-top:1rem;font-size:.85rem;color:var(--d-mid);transition:color .3s}
.side__wa:hover{color:var(--orange)}

/* fields (comments, search) */
.fld{
  display:block;width:100%;padding:.8rem .95rem;font:inherit;font-size:.94rem;color:var(--text);
  background:#fff;border:1px solid var(--line2);border-radius:0;-webkit-appearance:none;appearance:none;
}
.fld:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.fld--ta{resize:vertical;line-height:1.6;min-height:8rem}

/* holding state — an honest empty shelf beats fabricated articles */
.post-empty{padding-block:clamp(1rem,3vw,2.5rem)}
.post-empty__h{
  font-size:var(--t-1);font-weight:500;line-height:1.03;letter-spacing:-.04em;
  max-width:18ch;
}
.post-empty__h em{color:var(--orange);font-size:1.06em}
.post-empty__p{
  color:var(--mid);font-size:var(--t-4);
  margin-top:clamp(1.2rem,2.4vw,1.8rem);max-width:46ch;
}
.post-empty__act{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem clamp(1.4rem,3vw,2.4rem);
  margin-top:clamp(1.8rem,3.6vw,2.6rem);
}

/* ── company record ───────────────────────────────────────────────────── */
.reg-sec{padding-block:clamp(3.5rem,8vw,6rem)}
.reg-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(1.6rem,3vw,2.6rem);
}
.reg-grid dt{margin-bottom:.7rem}
.reg-grid dd{font-size:var(--t-4);line-height:1.5}

/* ── contact page ─────────────────────────────────────────────────────── */
.ctc{padding-block:var(--sec)}
.ctc__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem)}
.ctc__big{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1.2rem,2.6vw,2rem) 0;border-bottom:1px solid var(--line);
  font-size:clamp(1.3rem,3.2vw,2.4rem);font-weight:500;letter-spacing:-.035em;
  transition:color .4s,padding-left .6s var(--e);
}
.ctc__big:first-of-type{border-top:1px solid var(--line)}
.ctc__big i{
  flex:0 0 auto;position:relative;display:block;width:22px;height:1px;background:currentColor;
  transition:width .45s var(--e);
}
.ctc__big i::after{
  content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}
.ctc__big:hover{color:var(--orange);padding-left:clamp(.5rem,1.4vw,1.2rem)}
.ctc__big:hover i{width:36px}
.ctc__note{color:var(--mid);max-width:46ch;margin-top:clamp(1.6rem,3vw,2.4rem)}
.ctc__aside{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem);align-content:start}
.ctc__card{padding-top:1.1rem;border-top:1px solid var(--line)}
.ctc__card .lbl{margin-bottom:1rem}
.ctc__card address{font-style:normal;color:var(--mid);line-height:1.7}
.ctc__dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;color:var(--mid);font-size:.94rem}
.ctc__dl dt{color:var(--low)}
.ctc__soc{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.ctc__soc a{color:var(--mid);transition:color .3s}
.ctc__soc a:hover{color:var(--orange)}
.ctc__direct{list-style:none;display:grid}
.ctc__direct a{
  display:grid;gap:.45rem;padding:.95rem 0;border-bottom:1px solid var(--line);
  font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;letter-spacing:-.02em;transition:color .3s;
}
.ctc__direct li:first-child a{padding-top:0}
.ctc__card .ctc__direct .lbl{margin:0}
.ctc__direct a:hover{color:var(--orange)}
#enquiry{scroll-margin-top:calc(var(--hdr-h) - 2rem)}

/* contact form — editorial underlined fields on paper; errors get their own
   red so they never read as the orange focus state */
.enq{--err:#B3261E;position:relative}
.enq__intro{color:var(--mid);max-width:52ch;font-size:var(--t-4);line-height:1.6;margin-bottom:clamp(2rem,4vw,3rem)}
.enq__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(1.4rem,3vw,2.6rem)}
.enq__f{position:relative;min-width:0;margin:0 0 clamp(1.5rem,2.8vw,2.1rem);padding:0;border:0}
.enq__lab{
  display:flex;align-items:baseline;gap:.5rem;padding:0;margin-bottom:.2rem;
  font:500 var(--t-lbl)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mid);
}
.enq__lab b{color:var(--orange);font-weight:500}
.enq__lab span{color:var(--low);text-transform:none;letter-spacing:.02em}
.enq__in{
  display:block;width:100%;padding:.7rem 0 .75rem;
  font:inherit;font-size:clamp(1.05rem,1.3vw,1.2rem);letter-spacing:-.01em;color:var(--text);
  background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;
  -webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s;
}
.enq__in::placeholder{color:var(--low);opacity:1}
.enq__in:focus,.enq__in:focus-visible{outline:none;border-bottom-color:var(--orange);box-shadow:0 1px 0 var(--orange)}
.enq__ta{resize:vertical;min-height:9.5rem;line-height:1.55}
.enq__f.is-bad .enq__in{border-bottom-color:var(--err);box-shadow:0 1px 0 var(--err)}
.enq__err{margin-top:.5rem;font-size:.84rem;color:var(--err)}
.enq__err:empty{display:none}
.enq__alert{
  margin-bottom:clamp(1.5rem,2.8vw,2.1rem);padding:.9rem 1.1rem;
  border-left:2px solid var(--err);background:var(--paper-2);font-size:.92rem;
}
.enq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.enq__set .enq__lab{margin-bottom:.9rem}
.enq__chips{display:flex;flex-wrap:wrap;gap:.55rem}
.enq__chip{position:relative;cursor:pointer}
.enq__chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.enq__chip span{
  display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.05rem;
  border:1px solid var(--line2);font-size:.88rem;line-height:1.2;
  transition:background .3s,color .3s,border-color .3s;
}
.enq__chip span::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--line2);
  transition:background .3s;
}
.enq__chip:hover span{border-color:var(--text)}
.enq__chip input:checked+span{background:var(--p-text);border-color:var(--p-text);color:var(--paper)}
.enq__chip input:checked+span::before{background:var(--orange)}
.enq__chip input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}

.enq__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;
  padding-top:clamp(1.4rem,2.6vw,2rem);border-top:1px solid var(--line);
}
.enq__legal{max-width:36ch;font-size:.86rem;line-height:1.55;color:var(--mid)}
.enq__legal a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line2);transition:color .3s}
.enq__legal a:hover{color:var(--orange)}
.enq__send [data-busy]{display:none}
.enq__send.is-busy{pointer-events:none;opacity:.7}
.enq__send.is-busy [data-idle]{display:none}
.enq__send.is-busy [data-busy]{display:inline}

.enq__done{padding-block:clamp(.5rem,2vw,1.5rem);outline:none}
.enq__tick{
  position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--orange);margin-bottom:clamp(1.4rem,2.6vw,2rem);
}
.enq__tick::after{
  content:"";width:19px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:translateY(-2px) rotate(-45deg);
}
.enq__dh{font-size:var(--t-2);font-weight:500;line-height:1.06;letter-spacing:-.035em;max-width:16ch}
.enq__dh em{color:var(--orange);font-size:1.06em}
.enq__dp{color:var(--mid);font-size:var(--t-4);line-height:1.6;max-width:44ch;margin-top:1.1rem}
.enq__dact{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:clamp(1.6rem,3vw,2.3rem)}

@media (max-width:760px){
  .enq__row{grid-template-columns:minmax(0,1fr)}
  .enq__foot{flex-direction:column;align-items:stretch}
  .enq__send{width:100%}
}
@media (max-width:560px){
  /* two even columns read as a set; free-wrapping pills left one per line */
  .enq__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .enq__chip{display:flex}
  .enq__chip span{width:100%;padding:.7rem .75rem;font-size:.84rem}
}

/* ── floating contact buttons ─────────────────────────────────────────────
   Call and WhatsApp on every page. They pop in once the load sequence is
   done, step up above the cookie banner while it is open, and step aside
   for the menu — and on phones while the keyboard is up for the form. */
.fab{
  position:fixed;z-index:280;
  right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  transition:transform .7s var(--e),opacity .35s,visibility .35s;
}
body.cc-on .fab{transform:translateY(calc(-1 * var(--cc-h,0px)))}
body.menu-open .fab{opacity:0;visibility:hidden}
.fab__btn{
  position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  color:#fff;box-shadow:0 14px 30px -10px rgba(10,12,15,.55),0 2px 6px rgba(10,12,15,.18);
  animation:fab-in .8s cubic-bezier(.34,1.56,.64,1) 1.7s backwards;
  transition:transform .4s var(--e);
}
.fab__btn--wa{background:#25D366}
.fab__btn--call{
  background:var(--ink-700);animation-delay:1.85s;
  box-shadow:inset 0 0 0 1px rgba(242,240,235,.14),0 14px 30px -10px rgba(10,12,15,.55),0 2px 6px rgba(10,12,15,.18);
}
.fab__btn svg{display:block}
.fab__btn:hover{transform:scale(1.07)}
.fab__btn:active{transform:scale(.96)}
/* three soft rings after the pop, then still — nothing loops forever */
.fab__btn--wa::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#25D366;opacity:0;
  animation:fab-ring 2.2s ease-out 2.7s 3 backwards;
}
.fab__tip{
  position:absolute;right:calc(100% + 12px);top:50%;translate:6px -50%;
  padding:.55rem .8rem;white-space:nowrap;pointer-events:none;opacity:0;
  background:var(--ink-900);color:var(--d-text);font:500 .72rem/1 var(--mono);letter-spacing:.06em;
  box-shadow:0 8px 20px -8px rgba(10,12,15,.5);
  transition:opacity .25s,translate .4s var(--e);
}
@media (hover:hover){
  .fab__btn:hover .fab__tip,.fab__btn:focus-visible .fab__tip{opacity:1;translate:0 -50%}
}
@keyframes fab-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fab-ring{from{transform:scale(1);opacity:.45}to{transform:scale(1.8);opacity:0}}
@media (max-width:900px){
  body:has(.enq__in:focus) .fab,body.fab-clear .fab{opacity:0;visibility:hidden}
}
@media (max-width:560px){
  .fab{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));gap:10px}
  .fab__btn{width:52px;height:52px}
}

/* ── legal pages ──────────────────────────────────────────────────────── */
.lg{padding-block:clamp(3.5rem,8vw,6rem)}
.lg__grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
/* a grid item defaults to min-width:auto, which lets the wide policy table
   push the page sideways instead of scrolling inside its own wrapper */
.lg__aside,.lg__body{min-width:0}
.lg__stick{position:sticky;top:calc(var(--hdr-h) + 2.5rem)}
.lg__toc{display:grid;gap:.55rem;margin-top:1rem;counter-reset:toc}
.lg__toc a{
  display:block;font-size:.88rem;line-height:1.4;color:var(--mid);
  padding-left:.8rem;border-left:1px solid var(--line);
  transition:color .3s,border-color .3s;
}
.lg__toc a:hover{color:var(--orange);border-left-color:var(--orange)}
.lg__other{margin-top:2rem}
.lg__toc--alt{margin-top:1rem}

.lg__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1.2rem clamp(1.2rem,2.4vw,2rem);
  padding:clamp(1.4rem,2.6vw,2rem);background:var(--paper-2);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.lg__meta dt{margin-bottom:.5rem}
.lg__meta dd{font-size:.95rem;line-height:1.5;word-break:break-word}

.lg__sec{margin-bottom:clamp(2.5rem,5vw,4rem);scroll-margin-top:calc(var(--hdr-h) + 2rem)}
.lg__h2{
  display:flex;gap:1rem;align-items:baseline;
  font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:600;letter-spacing:-.025em;
  padding-bottom:.9rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line);
}
.lg__h2 .lbl{flex:0 0 auto;color:var(--orange)}
.lg__h3{
  font-size:var(--t-4);font-weight:600;letter-spacing:-.02em;
  margin:1.6rem 0 .8rem;
}
.lg__body p{color:var(--mid);margin-bottom:1rem;max-width:72ch}
.lg__list{display:grid;gap:.7rem;margin:0 0 1.2rem;max-width:72ch}
.lg__list li{
  display:flex;gap:.75rem;color:var(--mid);line-height:1.6;
}
.lg__list li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;margin-top:.62em;
  background:var(--orange);rotate:45deg;
}
.lg__body a{color:var(--p-text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line2);transition:color .3s,text-decoration-color .3s}
.lg__body a:hover{color:var(--orange);text-decoration-color:var(--orange)}

.lg__tablewrap{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--line)}
.lg__table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.92rem}
.lg__table th,.lg__table td{
  text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;
}
.lg__table th{
  font:500 var(--t-lbl)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--low);background:var(--paper-2);
}
.lg__table td{color:var(--mid)}
.lg__table tr:last-child td{border-bottom:0}

/* ── footer: fourth column carries the registered office ──────────────── */
.foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.foot__reg address{font-style:normal;color:var(--d-mid);font-size:.94rem;line-height:1.7}
.foot__no{margin-top:.9rem;color:var(--d-low);font-size:.84rem;line-height:1.6}

/* ── cookie consent ───────────────────────────────────────────────────────
   The Cookies Policy commits to specific behaviour, so the banner implements
   it literally: both choices carry equal visual weight (an ICO requirement —
   "Accept" must not be styled more invitingly than "Reject"), non-essential
   cookies stay off until an explicit opt-in, and the choice is stored for a
   year in `cookie_consent_status`, exactly as the policy's own table says. */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:520;
  background:var(--ink-900);color:var(--d-text);
  border-top:1px solid var(--d-line);
  transform:translateY(101%);
  transition:transform .7s var(--e);
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;
}
.cc[hidden]{display:none}
body.cc-on .cc{transform:translateY(0)}
.cc__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2.4vw,2.4rem);
}
.cc__txt{max-width:62ch;color:var(--d-mid);font-size:.94rem;line-height:1.6}
.cc__txt b{display:block;color:var(--d-text);font-weight:500;margin-bottom:.3rem;
  font-size:var(--t-4);letter-spacing:-.015em}
.cc__txt a{color:var(--d-text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--d-line2);transition:color .3s,text-decoration-color .3s}
.cc__txt a:hover{color:var(--orange);text-decoration-color:var(--orange)}
.cc__act{display:flex;flex-wrap:wrap;gap:.7rem;flex:0 0 auto}
/* identical treatment on both buttons — neither is made the easier choice */
.cc__btn{
  position:relative;overflow:hidden;isolation:isolate;
  padding:.85rem 1.4rem;min-width:11.5rem;text-align:center;
  border:1px solid var(--d-line2);color:var(--d-text);
  font-size:.85rem;font-weight:500;
  transition:color .4s var(--e2),border-color .4s var(--e2);
}
.cc__btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--d-text);
  transform:translateY(101%);transition:transform .5s var(--e);
}
.cc__btn:hover{color:var(--ink-900);border-color:var(--d-text)}
.cc__btn:hover::before{transform:translateY(0)}

@media (max-width:760px){
  .cc__in{flex-direction:column;align-items:stretch}
  .cc__act{width:100%}
  .cc__btn{flex:1 1 0;min-width:0}
}

/* ── article ──────────────────────────────────────────────────────────── */
.art__hero{
  position:relative;overflow:hidden;background:var(--h-base);
  padding-top:calc(var(--hdr-h) + clamp(3.5rem,9vw,7rem));
  padding-bottom:clamp(3rem,7vw,5.5rem);
}
.art__meta{position:relative;color:var(--d-mid);margin-bottom:clamp(1.2rem,2.6vw,2rem);flex-wrap:wrap}
.art__t{
  position:relative;font-size:var(--t-1);font-weight:600;
  line-height:1.04;letter-spacing:-.042em;max-width:20ch;
}
.art__x{
  position:relative;margin-top:clamp(1.1rem,2.2vw,1.6rem);
  color:var(--d-mid);font-size:var(--t-4);max-width:52ch;
}
.art__body{padding-block:clamp(3rem,7vw,5.5rem)}
.art__col{max-width:64ch}
.art__col p{color:var(--mid);margin-bottom:1.15rem;font-size:var(--t-4);line-height:1.75}
.art__h2{
  font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600;letter-spacing:-.025em;
  color:var(--text);margin:clamp(2rem,4vw,2.8rem) 0 .9rem;
}
.art__nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line);
  margin-top:clamp(3rem,6vw,4.5rem);
}
.art__prev,.art__next{
  display:block;background:var(--paper);padding:clamp(1.2rem,2.4vw,1.8rem);
  transition:background .4s var(--e2);
}
.art__prev:hover,.art__next:hover{background:var(--paper-2)}
.art__next{text-align:right}
.art__nav-t{
  display:block;margin-top:.6rem;font-size:var(--t-4);font-weight:500;
  letter-spacing:-.02em;color:var(--text);
}
.art__back{margin-top:clamp(2rem,4vw,3rem)}
.art__cat{color:inherit;transition:color .3s}
.art__cat:hover{color:var(--orange)}
.art__cover{aspect-ratio:16/9;margin-bottom:clamp(2rem,4vw,3rem)}
.art__col a{color:var(--text);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.2em;transition:color .3s}
.art__col a:hover{color:var(--orange)}
.art__h3{
  font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:600;letter-spacing:-.02em;
  color:var(--text);margin:clamp(1.6rem,3vw,2.2rem) 0 .7rem;
}
.art__ul,.art__ol{margin:0 0 1.15rem 1.2rem;color:var(--mid);font-size:var(--t-4);line-height:1.7}
.art__ul li,.art__ol li{margin-bottom:.4rem;padding-left:.3rem}
.art__ul li::marker{color:var(--orange)}
.art__ol li::marker{color:var(--orange);font-family:var(--mono);font-size:.85em}
.art__q{
  margin:clamp(1.6rem,3vw,2.4rem) 0;padding:.4rem 0 .4rem clamp(1.2rem,2.4vw,1.8rem);
  border-left:2px solid var(--orange);
}
.art__q p{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.35;color:var(--text);margin:0}
.art__fig{margin:clamp(1.6rem,3vw,2.4rem) 0}
.art__fig img{display:block;width:100%;height:auto;background:var(--paper-3)}
.art__fig figcaption{margin-top:.7rem;font:500 .7rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--low)}

/* share */
.share{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.4rem;border-top:1px solid var(--line);
}
.share .lbl{margin-right:.4rem}
.share__a{
  font-size:.88rem;font-weight:500;color:var(--mid);padding-bottom:.2rem;
  border-bottom:1px solid var(--line2);transition:color .3s,border-color .3s;
}
.share__a:hover{color:var(--orange);border-color:var(--orange)}

/* comments */
.cmt{margin-top:clamp(3rem,6vw,4.5rem);scroll-margin-top:calc(var(--hdr-h) + 1.5rem)}
.cmt .chap{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.cmt__none{color:var(--mid);font-size:.96rem}
.cmt__list{list-style:none;display:grid;gap:1.4rem}
.cmt__item{padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.cmt__who{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:.5rem}
.cmt__who b{font-weight:600;letter-spacing:-.01em}
.cmt__txt{color:var(--mid);font-size:.96rem;line-height:1.7;max-width:64ch}
.cmt__form{margin-top:clamp(2rem,4vw,3rem)}
.cmt__form .lbl{margin-bottom:1.2rem}
.cmt__f{max-width:40rem}
.cmt__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cmt__lab{display:block;margin-bottom:1rem;font-size:.86rem;color:var(--mid)}
.cmt__lab .fld{margin-top:.45rem}
.cmt__hint{color:var(--low)}
.cmt__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cmt__f .btn{margin-top:.4rem}
.cmt__ok,.cmt__err{
  margin:0 0 1.2rem;padding:.8rem 1rem;font-size:.9rem;
  border-left:2px solid var(--orange);background:var(--paper-2);max-width:40rem;
}
.cmt__ok{border-left-color:#2F8F4E}

/* ══════════════ RESPONSIVE ══════════════ */

@media (max-width:1180px){
  .hero__copy{grid-column:1/7}
  .show{grid-column:7/13}
  .stmt__body{grid-column:1/7}
  .pill{grid-column:7/13}
  .svc__aside{grid-column:1/-1}
  .svc__stick{position:static}
  .svc__panel{display:none}
  .svc__list{grid-column:1/-1;margin-top:clamp(2rem,4vw,3rem)}
  .svc__d{display:block;grid-column:2/-1;color:var(--mid);max-width:54ch;margin-top:.45rem}
  .svc__row a{row-gap:.2rem}
  .work__idx{display:none}
  .work__stack{grid-column:1/-1;grid-template-columns:repeat(12,minmax(0,1fr))}
  .cs--wide{grid-column:1/13}
  .cs--tall{grid-column:1/8}
  .cs--narrow{grid-column:8/13}
  .cs--mid{grid-column:1/9}
  .sect__h{grid-column:1/9}
  .sect__p{grid-column:1/9}
  .sect__list li{grid-template-columns:minmax(0,3.5rem) minmax(0,1fr);row-gap:.4rem}
  .sect__list p{grid-column:2/-1}
  .tech__h,.tech__read{grid-column:1/-1}
  .tech__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,3rem)}
  .abt__grid p{grid-column:span 6}
  .quote{grid-column:1/9;margin-top:1rem}
  .abt__mark{width:56%;opacity:.04}
  .lg__grid{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
  .ctc__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  :root{--hdr-h:64px}
  /* mobile is its own composition: the headline owns the top, the product
     panel bleeds off the right edge as a cropped, angled fragment */
  .hero{min-height:auto;padding-bottom:clamp(3.5rem,11vw,6rem)}
  .hero__grid{row-gap:clamp(2rem,6vw,3rem)}
  .hero__copy{grid-column:1/-1}
  .hero__title{font-size:clamp(2.9rem,13.5vw,5.4rem)}
  .hero__lede{max-width:36ch}
  .hero__act{gap:1.4rem 1.8rem}

  .show{grid-column:1/-1}
  .panel{box-shadow:0 22px 50px rgba(0,0,0,.5)}

  .reg__t{display:none}
  .hero__base{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .cue{display:none}
  .stmt__h{max-width:100%}
  .stmt__sub{padding-left:0;margin-top:.5em}
  .stmt__body,.pill{grid-column:1/-1}
  .pill li{grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:1rem}

  .work__stack{row-gap:clamp(3rem,9vw,4.5rem)}
  .cs--wide,.cs--tall,.cs--narrow,.cs--mid{grid-column:1/-1;margin-top:0}
  .cs--wide .fig{aspect-ratio:3/2}   /* keep the panorama readable, don't over-crop */
  .cs--narrow .fig{aspect-ratio:4/5}

  .abt__grid p{grid-column:1/-1;max-width:56ch}
  .quote{grid-column:1/-1;margin-top:.6rem}
  .abt__mark{width:78%;right:-16%;opacity:.045}

  .cta__row{flex-direction:column;align-items:stretch}
  .cta__act{width:100%}

  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* inner pages */
  .phero__h{max-width:100%}
  .sdet,.sdet--alt .sdet__copy,.sdet--alt .sdet__fig{grid-template-columns:1fr;order:0}
  .sdet{gap:2rem}
  .sdet__fig{max-width:520px}
  .wk__fig{aspect-ratio:4/3}
  .bl__grid{grid-template-columns:1fr}
  .side{position:static}
  .card__in{grid-template-columns:1fr;gap:1rem}
  .card__fig{aspect-ratio:16/9;max-width:34rem}
  .cmt__row{grid-template-columns:1fr}
  .ctc__grid{grid-template-columns:1fr}
  .lg__grid{grid-template-columns:1fr;gap:2rem}
  .lg__stick{position:static}
  .lg__toc{grid-template-columns:1fr}
}

@media (max-width:560px){
  :root{--sec:clamp(4rem,15vw,6rem)}
  .chap{margin-bottom:2rem}
  .hero__index{gap:.35rem 1rem}
  .hero__index li{gap:0}
  .hero__index li:not(:last-child)::after{display:none}
  /* the connecting rule strands itself once the caption wraps */
  .show__cap{flex-wrap:wrap;gap:.35rem .7rem}
  .show__cap i{display:none}
  .svc__row a{grid-template-columns:auto minmax(0,1fr)}
  .svc__tag{display:none}
  .sect__list li{grid-template-columns:1fr;gap:.3rem}
  .sect__list p,.sect__list h3{grid-column:1/-1}
  .tech__list{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr;gap:2rem}
  .foot__base{flex-direction:column;align-items:flex-start}
  .cta__act{flex-direction:column;align-items:stretch}
  .cta__act .lnk{align-self:flex-start}
  .sdet__list{grid-template-columns:1fr}
  .lg__meta{grid-template-columns:1fr}
}

/* touch: there is no hover, so the technology copy lives inline instead of
   in the readout, and the case studies keep their hover treatment off */
@media (hover:none){
  .tech__read{display:none}
  .tech__list{grid-template-columns:1fr}
  .tech__list li{
    display:grid;grid-template-columns:minmax(0,2.6rem) minmax(0,1fr);
    row-gap:.35rem;align-items:baseline;
  }
  .tech__list li:hover{color:inherit;padding-left:0}
  .tech__list li:hover em{color:var(--low)}
  .tech__list li span{font-size:var(--t-4);font-weight:500}
  .tech__d{
    display:block;grid-column:2/-1;color:var(--mid);
    font-size:.95rem;font-weight:400;letter-spacing:0;max-width:48ch;
  }
}

/* ── mobile performance ───────────────────────────────────────────────────
   Phones pay for blur, backdrop-filter and full-screen composited overlays on
   every single scroll frame. The look survives without them; the frame rate
   does not survive with them. */
@media (max-width:900px){
  /* backdrop-filter re-blurs the region behind the bar on every frame */
  .hdr.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(16,17,20,.96)}
  .hdr.on-paper.is-stuck{background:rgba(243,241,236,.97)}

  /* a large blurred element that also animates is re-rasterised continuously;
     the radial gradients are already soft enough on their own */
  .atm__warm,.atm__cool{filter:none;animation:none}

  /* a fixed, full-viewport texture forces a composited layer for the whole
     page — barely visible at this size, expensive at every scroll step */
  .grain{display:none}

  /* wide-radius shadows are the most expensive paint in the hero */
  .panel{box-shadow:0 18px 40px rgba(0,0,0,.5)}

  .hero__copy,.hero .show,.cs,.panel,.prog i,
  .btn,.hcta,.hero__title .ch{will-change:auto}
}

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html.js [data-reveal],html.js .ln>span{opacity:1!important;transform:none!important}
  html.js .fig img{clip-path:none!important;--s:1!important;--py:0px!important}
  html.js [data-hero]{opacity:1!important;transform:none!important}
  html.js .hero__title .ch{transform:none!important}
  [data-read] .wd{opacity:1!important}
  .hero__copy,.hero .show,.hero__base,.atm{translate:none!important;scale:none!important;opacity:1!important}
  .cs{translate:none!important;opacity:1!important}
  .chap i{transform:scaleX(1)!important}
  .mq__track{transform:none!important}
  html.js .panel{clip-path:none!important}
  html.js .panel img{scale:1!important}
  .panel{translate:none!important}
  .atm__warm,.atm__cool,.atm__grid{opacity:1!important;animation:none!important}
  .reg__c,.reg__t{opacity:1!important}
  .boot,.grain{display:none!important}
}