/* ==========================================================================
   Be There — cold chain equipment
   Concept: the logo gradient is a thermometer. Cold blue → warm amber is the
   site's one recurring device (rulers, ticks, underlines), set against frost
   white and deep-night navy. Type: Archivo stretched wide for display,
   Instrument Sans for reading, JetBrains Mono for every number and unit.
   ========================================================================== */
:root{
  --bg:#EEF2F6; --paper:#FFFFFF; --plate:#D3DEE8;
  --ink:#0A1729; --ink-2:#3B4B60; --mute:#6F7F94;
  --line:rgba(10,23,41,.12); --line-2:rgba(10,23,41,.24);
  --accent:#0565A8;
  --night:#07111E; --night-2:#0C1A2C; --night-3:#12243A;
  --on-night:#EAF1F8; --on-night-2:#A6B6C9; --night-line:rgba(234,241,248,.14);
  --blue:#036EB7; --ice:#9AD4DF; --sun:#EED55C; --ember:#EE7F28; --navy:#0F3676;
  --thermal:linear-gradient(90deg,#036EB7 0%,#9AD4DF 38.7%,#EED55C 61%,#EE7F28 100%);

  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --t-hero:clamp(3.4rem,10.4vw,10.5rem);
  --t-1:clamp(2.5rem,5.6vw,5.4rem);
  --t-2:clamp(1.9rem,3.6vw,3.3rem);
  --t-3:clamp(1.25rem,1.7vw,1.55rem);
  --t-lead:clamp(1.06rem,1.25vw,1.22rem);

  --gutter:clamp(16px,4.2vw,64px);
  --wrap:1440px;
  --sec:clamp(80px,11vw,168px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --header-h:76px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1A2C; --paper:#122238; --plate:#1A2B42;
  --ink:#E8EFF7; --ink-2:#B3C1D2; --mute:#8090A5;
  --line:rgba(232,239,247,.12); --line-2:rgba(232,239,247,.24);
  --accent:#6BB8F0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1A2C; --paper:#122238; --plate:#1A2B42;
  --ink:#E8EFF7; --ink-2:#B3C1D2; --mute:#8090A5;
  --line:rgba(232,239,247,.12); --line-2:rgba(232,239,247,.24);
  --accent:#6BB8F0; color-scheme:dark}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 64px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:760;font-stretch:118%;letter-spacing:-.022em;line-height:1.02;text-wrap:balance}
h1{font-size:var(--t-1)} h2{font-size:var(--t-2)} h3{font-size:var(--t-3);letter-spacing:-.012em;line-height:1.15}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--ice);color:#07111E}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 14px}
.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* eyebrow with the thermal tick */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 .72rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--thermal);border-radius:2px;flex:none}
.on-night .eyebrow{color:var(--on-night-2)}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-2);max-width:38ch}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 24px 0 26px;border-radius:2px;font:600 .95rem/1 var(--f-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--thermal);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);z-index:1}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn-solid{background:var(--ink);color:var(--bg)}
.btn-light{background:var(--on-night);color:var(--night)}
.btn-line{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.on-night .btn-line{border-color:rgba(234,241,248,.32);color:var(--on-night)}
.on-night .btn-line:hover{border-color:var(--on-night)}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease)}
.link:hover{background-size:100% 1px}
.link svg{width:16px;height:16px;transition:transform .45s var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:env(safe-area-inset-top,0px);color:var(--ink);transition:transform .5s var(--ease),background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.site-head .bar{height:var(--header-h);display:flex;align-items:center;gap:28px}
.site-head.is-solid,.site-head.menu-open{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.site-head.is-hidden{transform:translateY(-100%)}
.has-hero .site-head:not(.is-solid):not(.menu-open){color:var(--on-night)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:58px;height:auto}
.brand .wm{display:grid;gap:5px}
.brand b{font:800 1.12rem/1 var(--f-display);font-stretch:125%;letter-spacing:.06em}
.brand small{font:600 .56rem/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;opacity:.62}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>a,.nav>button{position:relative;background:none;border:0;padding:10px 14px;font:500 .95rem/1 var(--f-body);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;opacity:.86;transition:opacity .3s}
.nav>a:hover,.nav>button:hover,.nav>a[aria-current="page"],.nav>button[aria-expanded="true"]{opacity:1}
.nav>a::after,.nav>button::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--thermal);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav>a:hover::after,.nav>a[aria-current="page"]::after,.nav>button:hover::after,.nav>button[aria-expanded="true"]::after{transform:scaleX(1)}
.nav>button svg{width:12px;height:12px;transition:transform .35s var(--ease)}
.nav>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.head-cta{margin-left:14px;height:44px;padding:0 18px 0 20px;font-size:.9rem}
.has-hero .site-head:not(.is-solid):not(.menu-open) .head-cta{background:var(--on-night);color:var(--night)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.menu-btn span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:25px}
.menu-open .menu-btn span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){top:21px;transform:rotate(-45deg)}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);color:var(--ink);box-shadow:0 1px 0 var(--line),0 40px 80px -40px rgba(7,17,30,.35);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s}
.mega.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .55s var(--ease),visibility 0s}
.mega .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,72px);padding-block:36px 44px}
.mega-list a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none}
.mega-list li:last-child a{border-bottom:1px solid var(--line)}
.mega-list b{font:700 1.35rem/1.1 var(--f-display);font-stretch:112%;letter-spacing:-.01em;transition:transform .45s var(--ease),color .3s}
.mega-list span{font:500 .78rem/1 var(--f-mono);color:var(--mute)}
.mega-list a:hover b,.mega-list a:focus-visible b{transform:translateX(10px)}
.mega-prev{position:relative;aspect-ratio:4/3;background:var(--plate);overflow:hidden;border-radius:3px;max-width:100%}
.mega-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s var(--ease),transform .9s var(--ease)}
.mega-prev img.on{opacity:1;transform:scale(1)}
.mega-prev .cap{position:absolute;left:16px;bottom:16px;z-index:2;font:600 .74rem/1 var(--f-mono);letter-spacing:.04em;background:rgba(7,17,30,.72);color:#EAF1F8;padding:9px 12px;border-radius:2px;backdrop-filter:blur(6px)}

/* mobile overlay */
.mnav{position:fixed;inset:0;z-index:55;background:var(--night);color:var(--on-night);padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:28px;overflow-y:auto;clip-path:circle(0 at calc(100% - 40px) 38px);visibility:hidden;transition:clip-path .7s var(--ease-io),visibility 0s .7s}
.mnav.open{clip-path:circle(150% at calc(100% - 40px) 38px);visibility:visible;transition:clip-path .7s var(--ease-io),visibility 0s}
.mnav a{text-decoration:none}
.mnav .big a{display:block;font:760 2.3rem/1.1 var(--f-display);font-stretch:118%;letter-spacing:-.02em;padding:6px 0}
.mnav .small{display:grid;gap:10px;border-top:1px solid var(--night-line);padding-top:22px}
.mnav .small a{display:flex;justify-content:space-between;gap:12px;font-size:1.02rem;color:var(--on-night-2)}
.mnav .small a span{font:500 .75rem/1.6 var(--f-mono);white-space:nowrap}
.menu-open-body .site-head{color:var(--on-night)!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
@media (max-width:980px){.nav,.head-cta{display:none}.menu-btn{display:block}.mega{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--night);color:var(--on-night);overflow:hidden;isolation:isolate;min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--header-h) + 72px)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;transform:scale(1.06);animation:heroZoom 2.6s var(--ease) both}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,17,30,.94) 0%,rgba(7,17,30,.78) 34%,rgba(7,17,30,.18) 70%,rgba(7,17,30,.35) 100%),linear-gradient(0deg,rgba(7,17,30,.96) 0%,rgba(7,17,30,0) 42%)}
@keyframes heroZoom{from{transform:scale(1.16)}to{transform:scale(1.06)}}
.hero-copy{display:grid;gap:30px;max-width:980px}
.hero h1{font-size:var(--t-hero);font-weight:800;font-stretch:125%;letter-spacing:-.045em;line-height:.88}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.hero h1 .ln>span{display:inline-block;animation:rise 1.15s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
.hero h1 .deg{position:relative}
.hero h1 .deg::after{content:"";position:absolute;left:.02em;right:.04em;bottom:-.13em;height:.055em;background:var(--thermal);transform-origin:left;animation:draw 1.3s .75s var(--ease) both}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .lead{color:var(--on-night-2);max-width:44ch;animation:fadeUp 1s .45s var(--ease) both}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp 1s .6s var(--ease) both}
.hero .eyebrow{animation:fadeUp 1s .05s var(--ease) both}

/* thermal ruler — the signature control */
.thermo{margin-top:clamp(48px,7vw,96px);padding-bottom:clamp(28px,3.4vw,44px);animation:fadeUp 1s .8s var(--ease) both}
.thermo-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.readout{display:flex;align-items:baseline;gap:14px}
.readout{display:grid;gap:8px}
.readout b{font:500 clamp(2.2rem,3.6vw,3.3rem)/1 var(--f-mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.25em}
.readout b span{display:inline-block;min-width:4.6ch;text-align:right}
.readout b small{font-size:.42em;letter-spacing:0;color:var(--on-night-2)}
.readout>span{font:500 .68rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.active-lines{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:760px}
.active-lines a{font:500 .78rem/1 var(--f-body);text-decoration:none;padding:9px 12px;border-radius:999px;border:1px solid var(--night-line);color:var(--on-night-2);transition:all .35s var(--ease)}
.active-lines a.on{border-color:rgba(234,241,248,.5);color:var(--on-night);background:rgba(234,241,248,.08)}
.ruler{position:relative;height:64px;cursor:ew-resize;touch-action:none;outline-offset:6px}
.ruler .scale{position:absolute;left:0;right:0;top:20px;height:2px;background:var(--thermal);border-radius:2px;opacity:.95}
.ruler .ticks{position:absolute;inset:0}
.ruler .tk{position:absolute;top:24px;width:1px;height:8px;background:rgba(234,241,248,.32)}
.ruler .tk.maj{height:14px;background:rgba(234,241,248,.6)}
.ruler .lb{position:absolute;top:44px;transform:translateX(-50%);font:500 .7rem/1 var(--f-mono);color:var(--on-night-2)}
.ruler .lb:first-of-type{transform:none}
.ruler .marker{position:absolute;top:0;left:0;width:0;height:40px;will-change:transform}
.ruler .marker::before{content:"";position:absolute;left:-1px;top:2px;width:2px;height:36px;background:var(--on-night)}
.ruler .marker::after{content:"";position:absolute;left:-7px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--on-night);box-shadow:0 0 0 6px rgba(234,241,248,.14),0 0 24px rgba(154,212,223,.6)}
.ruler-hint{margin-top:8px;font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2);opacity:.7}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec)}
.sec-paper{background:var(--paper)}
.on-night{background:var(--night);color:var(--on-night)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.sec-head>div{display:grid;gap:22px}
.sec-head p{color:var(--ink-2);max-width:46ch}
.on-night .sec-head p{color:var(--on-night-2)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
.statement{font:500 clamp(1.7rem,3.3vw,3.05rem)/1.18 var(--f-display);font-stretch:108%;letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.statement em{font-style:normal;color:var(--mute)}

/* chain */
.chain{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.chain::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--thermal);opacity:.9}
.stop{position:relative;padding:44px clamp(14px,1.6vw,26px) 0 0;display:grid;align-content:start;gap:14px}
.stop::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--ink);transition:transform .45s var(--ease),background .3s}
.stop:hover::before{transform:scale(1.35);background:var(--ink)}
.stop .no{font:600 .75rem/1 var(--f-mono);color:var(--mute);letter-spacing:.1em}
.stop h3{font-size:clamp(1.6rem,2.4vw,2.3rem);font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em}
.stop .tr{font:500 .8rem/1 var(--f-mono);color:var(--ink-2)}
.stop p{color:var(--ink-2);font-size:.95rem;max-width:22ch}
.stop ul{display:grid;gap:10px;margin-top:10px}
.stop li a{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;text-decoration:none;font-weight:600;font-size:.92rem;line-height:1.3}
.stop li a .th{aspect-ratio:1;border-radius:2px;overflow:hidden;background:var(--plate)}
.stop li a .th img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.stop li a:hover .th img{transform:scale(1.1)}
.stop li a:hover span{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){
  .chain{grid-template-columns:1fr;gap:0;padding-left:34px}
  .chain::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,#036EB7,#9AD4DF 38.7%,#EED55C 61%,#EE7F28)}
  .stop{padding:0 0 44px 0}
  .stop::before{left:-34px;top:2px}
  .stop p{max-width:40ch}
}

/* product index */
.index{border-bottom:1px solid var(--line)}
.index a{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,300px) 56px;gap:24px;align-items:center;padding:30px 0;border-top:1px solid var(--line);text-decoration:none}
.index a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--thermal);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.index a:hover::before,.index a:focus-visible::before{transform:scaleX(1)}
.index .t{font:500 .82rem/1.3 var(--f-mono);color:var(--mute)}
.index .n{font:760 clamp(1.5rem,2.5vw,2.45rem)/1.04 var(--f-display);font-stretch:116%;letter-spacing:-.025em;transition:transform .6s var(--ease)}
.index .k{color:var(--ink-2);font-size:.95rem}
.index .ar{justify-self:end;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:all .45s var(--ease)}
.index .ar svg{width:18px;height:18px;transform:rotate(-45deg);transition:transform .45s var(--ease)}
.index a:hover .n{transform:translateX(18px)}
.index a:hover .ar{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.index a:hover .ar svg{transform:none}
.index .thumb{display:none}
.floater{position:fixed;left:0;top:0;z-index:40;width:clamp(260px,24vw,380px);aspect-ratio:4/3;pointer-events:none;border-radius:3px;overflow:hidden;background:var(--plate);opacity:0;transform:translate3d(-50%,-50%,0) scale(.86);transition:opacity .35s var(--ease),scale .35s var(--ease);box-shadow:0 30px 60px -30px rgba(7,17,30,.5)}
.floater.on{opacity:1}
.floater img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.floater img.on{opacity:1}
@media (hover:none),(max-width:900px){
  .floater{display:none}
  .index a{grid-template-columns:84px minmax(0,1fr) 40px;gap:16px;padding:18px 0}
  .index .thumb{display:block;aspect-ratio:1;border-radius:2px;overflow:hidden;background:var(--plate);grid-row:span 2}
  .index .thumb img{width:100%;height:100%;object-fit:cover}
  .index .t{grid-column:2;order:3;font-size:.72rem}
  .index .n{grid-column:2;font-size:1.3rem}
  .index .k{display:none}
  .index .ar{grid-column:3;grid-row:1/span 2;width:40px;height:40px}
  .index a:hover .n{transform:none}
}

/* figures */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.fig{display:grid;gap:14px;align-content:start;padding-top:22px;border-top:1px solid var(--night-line);position:relative}
.fig::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--thermal)}
.fig b{font:600 clamp(2.4rem,4.8vw,4.6rem)/.95 var(--f-mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fig b small{font-size:.32em;letter-spacing:0;margin-left:.35em;color:var(--on-night-2);font-weight:500;vertical-align:.9em}
.fig p{color:var(--on-night-2);font-size:.95rem;max-width:24ch}
@media (max-width:900px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media (max-width:420px){.fig b{font-size:2.1rem}}

/* factory */
.factory{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,110px);align-items:start}
.reasons{display:grid;gap:0;margin-top:44px}
.reasons li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.reasons li:last-child{border-bottom:1px solid var(--line)}
.reasons h3{font-size:1.15rem;font-stretch:110%}
.reasons p{color:var(--ink-2);font-size:.97rem}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);align-items:start}
.photos figure{margin:0}
.photos figure:nth-child(2){margin-top:clamp(48px,9vw,140px)}
.photos .ph{overflow:hidden;border-radius:3px;background:var(--plate)}
.photos img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--ease)}
.photos figure:hover img{transform:scale(1.04)}
.photos figcaption{margin-top:12px;font:500 .74rem/1.45 var(--f-mono);color:var(--mute)}
@media (max-width:980px){.factory{grid-template-columns:1fr}.reasons li{grid-template-columns:1fr;gap:6px}}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:12px;align-content:start;padding-top:26px;border-top:1px solid var(--line-2);position:relative}
.steps li::before{content:"0" counter(s);font:600 .78rem/1 var(--f-mono);color:var(--mute)}
.steps li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--thermal);transition:width 1s var(--ease)}
.steps.in li::after{width:100%}
.steps li:nth-child(2)::after{transition-delay:.12s}.steps li:nth-child(3)::after{transition-delay:.24s}.steps li:nth-child(4)::after{transition-delay:.36s}.steps li:nth-child(5)::after{transition-delay:.48s}
.steps h3{font-size:1.2rem;font-stretch:112%}
.steps p{color:var(--ink-2);font-size:.95rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:36px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* inquiry */
.inq{position:relative;overflow:hidden;isolation:isolate}
.inq::before{content:"";position:absolute;width:70vw;height:70vw;max-width:980px;max-height:980px;right:-22vw;top:-30vw;z-index:-1;background:radial-gradient(closest-side,rgba(3,110,183,.42),rgba(3,110,183,0) 70%);filter:blur(10px)}
.inq::after{content:"";position:absolute;width:50vw;height:50vw;max-width:700px;max-height:700px;right:6vw;bottom:-28vw;z-index:-1;background:radial-gradient(closest-side,rgba(238,127,40,.22),rgba(238,127,40,0) 70%)}
.inq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.inq h2{font-size:clamp(2.2rem,4.1vw,4rem);font-stretch:122%;letter-spacing:-.035em;line-height:1}
.contacts{display:grid;gap:0;margin-top:44px;border-top:1px solid var(--night-line)}
.contacts div{display:grid;grid-template-columns:140px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--night-line)}
.contacts span{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.contacts b{font-weight:500;overflow-wrap:anywhere;user-select:all}
.copy{background:none;border:1px solid var(--night-line);color:var(--on-night-2);font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 10px;border-radius:2px;cursor:pointer;transition:all .3s}
.copy:hover{color:var(--on-night);border-color:var(--on-night-2)}
@media (max-width:980px){.inq-grid{grid-template-columns:1fr}}
@media (max-width:520px){.contacts div{grid-template-columns:1fr auto}.contacts span{grid-column:1/-1}}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.form .full{grid-column:1/-1}
.field{position:relative;display:grid;min-width:0}
.field label{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.field input,.field select,.field textarea{font:400 1.05rem/1.4 var(--f-body);color:inherit;background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:8px 0 12px;width:100%;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%237d8ea3' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:12px;padding-right:22px;cursor:pointer}
.field select option{color:#0A1729;background:#fff}
.field textarea{min-height:120px;resize:vertical}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--thermal);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none}
.field.err input{border-color:#E5484D}
.on-night .field label{color:var(--on-night-2)}
.on-night .field input,.on-night .field select,.on-night .field textarea{border-color:rgba(234,241,248,.26)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.form-note{font-size:.88rem;color:var(--mute);max-width:40ch}
.on-night .form-note{color:var(--on-night-2)}
.form-ok{grid-column:1/-1;font-size:.95rem;padding:16px 18px;border-left:2px solid var(--ice);background:rgba(154,212,223,.08)}

/* ---------- footer ---------- */
.foot{background:var(--night-2);color:var(--on-night);padding-top:clamp(64px,8vw,120px);overflow:hidden}
.foot-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.foot h4{font:600 .72rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-2);margin-bottom:18px}
.foot ul{display:grid;gap:10px}
.foot a{text-decoration:none;color:var(--on-night);opacity:.86;transition:opacity .3s}
.foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot p{color:var(--on-night-2);max-width:34ch}
.foot .brand img{width:72px}
.wordmark{display:block;margin-top:clamp(56px,8vw,120px);width:100%;height:auto;overflow:visible;user-select:none}
.wordmark text{font-family:var(--f-display);font-weight:800;font-stretch:125%;font-size:200px;letter-spacing:-6px}
.wordmark .solid{fill:var(--on-night);transition:opacity 1.1s var(--ease)}
.wordmark:hover .solid{opacity:0}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--night-line);font-size:.82rem;color:var(--on-night-2);position:relative;z-index:2;background:var(--night-2)}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols>div:first-child{grid-column:1/-1}}

/* floating WhatsApp */
.wa{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 14px;border-radius:999px;background:#128C4B;color:#fff;text-decoration:none;font:600 .9rem/1 var(--f-body);box-shadow:0 14px 30px -12px rgba(7,17,30,.55);transition:transform .4s var(--ease)}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:22px;height:22px}
@media (max-width:560px){.wa span{display:none}.wa{width:52px;padding:0;justify-content:center}}

/* ---------- inner pages ---------- */
.page-top{padding-top:calc(var(--header-h) + clamp(40px,6vw,88px))}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font:500 .74rem/1 var(--f-mono);letter-spacing:.06em;color:var(--mute);margin-bottom:28px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}

.p-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,5vw,96px);align-items:center}
.p-hero h1{font-size:clamp(2.5rem,5.2vw,5.2rem);font-stretch:120%;letter-spacing:-.035em;line-height:.96}
.p-hero .copy-col{display:grid;gap:26px}
.p-hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.plate{position:relative;aspect-ratio:3/2;border-radius:3px;overflow:hidden;background:var(--plate);max-width:100%}
.plate img{width:100%;height:100%;object-fit:cover;animation:plateIn 1.4s var(--ease) both}
@keyframes plateIn{from{transform:scale(1.08);opacity:.001}to{transform:none;opacity:1}}
.plate .tag{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;font:600 .74rem/1 var(--f-mono);letter-spacing:.06em;background:rgba(7,17,30,.74);color:#EAF1F8;padding:10px 12px;border-radius:2px;backdrop-filter:blur(6px)}
.plate .tag i{width:22px;height:2px;background:var(--thermal)}
@media (max-width:900px){.p-hero{grid-template-columns:1fr}.p-hero .plate{order:-1}}

.range{display:grid;gap:10px;max-width:460px}
.range-track{position:relative;height:8px;border-radius:4px;background:var(--line)}
.range-bar{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--thermal);background-size:var(--bs) 100%;background-position:var(--bp) 0;transform-origin:left;animation:draw 1.2s .3s var(--ease) both}
.range-zero{position:absolute;top:-5px;bottom:-5px;width:1px;background:var(--ink-2)}
.range-lbl{display:flex;justify-content:space-between;font:500 .7rem/1 var(--f-mono);color:var(--mute)}

.keyfigs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin-top:clamp(56px,7vw,104px)}
.keyfigs div{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line-2);align-content:start}
.keyfigs b{font:600 clamp(1.7rem,3vw,2.8rem)/1 var(--f-mono);letter-spacing:-.045em;white-space:nowrap}
.keyfigs b small{font-size:.42em;letter-spacing:0;font-weight:500;color:var(--mute);margin-left:.3em}
.keyfigs span{font-size:.92rem;color:var(--ink-2)}
@media (max-width:760px){.keyfigs{grid-template-columns:1fr 1fr;row-gap:28px}}

.subnav{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--line);transition:top .5s var(--ease)}
.hide-head .subnav{top:env(safe-area-inset-top,0px)}
.subnav .wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a:not(.btn){position:relative;flex:none;text-decoration:none;font:500 .88rem/1 var(--f-body);padding:18px 14px;color:var(--ink-2);transition:color .3s}
.subnav a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--thermal);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.subnav a.on,.subnav a:hover{color:var(--ink)}
.subnav a.on::after{transform:scaleX(1)}
.subnav .sp{flex:1}
.subnav .btn{height:40px;font-size:.85rem;padding:0 16px;flex:none}
.subnav .btn::after{height:2px}
@media (max-width:640px){.subnav .btn{display:none}}

.spec-wrap{overflow-x:auto;border-top:2px solid var(--ink)}
table.spec{width:100%;min-width:820px;border-collapse:collapse;font-size:.95rem}
table.spec th,table.spec td{text-align:left;padding:18px 18px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.spec thead th{font:600 .7rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:16px;padding-bottom:16px}
table.spec td{font-family:var(--f-mono);font-size:.88rem;letter-spacing:-.01em;color:var(--ink-2)}
table.spec td:first-child{font:650 1rem/1.35 var(--f-body);color:var(--ink);padding-left:0}
table.spec tbody tr{transition:background-color .3s}
table.spec tbody tr:hover{background:color-mix(in srgb,var(--ice) 16%,transparent)}
.note{margin-top:16px;font-size:.84rem;color:var(--mute)}

.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.feat div{display:grid;gap:10px;padding:28px 0;border-top:1px solid var(--line)}
.feat h3{font-size:1.2rem;font-stretch:112%;display:flex;gap:12px;align-items:baseline}
.feat h3::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--thermal);transform:translateY(-2px)}
.feat p{color:var(--ink-2);font-size:.98rem;max-width:44ch}
@media (max-width:760px){.feat{grid-template-columns:1fr}}

.apps{display:flex;flex-wrap:wrap;gap:10px}
.apps li{font-size:.95rem;padding:11px 16px;border:1px solid var(--line-2);border-radius:999px;transition:all .35s var(--ease)}
.apps li:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}

.two-col{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:start}
.two-col>div:first-child{display:grid;gap:22px;position:sticky;top:calc(var(--header-h) + 90px)}
@media (max-width:900px){.two-col{grid-template-columns:1fr}.two-col>div:first-child{position:static}}

.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:20px;align-items:center;padding:24px 0;font:650 1.1rem/1.35 var(--f-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);transition:all .4s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .ans{padding:0 48px 26px 0;color:var(--ink-2);max-width:62ch}
.faq details[open] .ans{animation:fadeUp .5s var(--ease)}

.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.gallery figure{margin:0;display:grid;gap:10px}
.gallery .ph{overflow:hidden;border-radius:3px;background:var(--plate)}
.gallery img{aspect-ratio:1;width:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{font:500 .78rem/1.3 var(--f-mono);color:var(--ink-2)}
@media (max-width:860px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cards (products page + related) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.card{display:grid;gap:18px;text-decoration:none;align-content:start}
.card .ph{position:relative;overflow:hidden;border-radius:3px;background:var(--plate);aspect-ratio:3/2}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card .ph .tag{position:absolute;left:14px;top:14px;font:600 .7rem/1 var(--f-mono);letter-spacing:.06em;background:rgba(7,17,30,.72);color:#EAF1F8;padding:8px 10px;border-radius:2px;backdrop-filter:blur(6px)}
.card .meta{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:start}
.card h3{font-size:clamp(1.25rem,1.6vw,1.5rem);font-stretch:114%}
.card p{grid-column:1;color:var(--ink-2);font-size:.93rem}
.card .ar{grid-row:1/span 2;grid-column:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:all .45s var(--ease)}
.card .ar svg{width:16px;height:16px;transform:rotate(-45deg);transition:transform .45s var(--ease)}
.card:hover .ar{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.card:hover .ar svg{transform:none}
.card.wide{grid-column:1/-1;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center}
.card.wide .ph{aspect-ratio:16/9}
.card.wide h3{font-size:clamp(1.8rem,3.2vw,3rem);font-stretch:120%}
.card.wide .meta{gap:18px;grid-template-columns:1fr}
.card.wide .meta .ar{grid-row:auto;grid-column:1;margin-top:8px}
.card.wide p:not(.eyebrow){max-width:44ch}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}.card.wide{grid-template-columns:1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* about */
.banner{position:relative;min-height:clamp(520px,78svh,860px);display:flex;align-items:flex-end;color:var(--on-night);background:var(--night);overflow:hidden;isolation:isolate;padding-bottom:clamp(48px,6vw,96px)}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:heroZoom 2.6s var(--ease) both}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,17,30,.92) 0%,rgba(7,17,30,.35) 55%,rgba(7,17,30,.25) 100%)}
.banner h1{font-size:var(--t-hero);font-stretch:125%;font-weight:800;letter-spacing:-.045em;line-height:.88}
.banner h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.banner h1 .ln>span{display:inline-block;animation:rise 1.15s var(--ease) both}
.banner h1 .ln:nth-child(2)>span{animation-delay:.12s}
.banner .lead{color:var(--on-night-2);margin-top:28px;max-width:46ch}
.prose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(24px,4vw,64px);color:var(--ink-2);font-size:1.06rem}
@media (max-width:760px){.prose{grid-template-columns:1fr}}

/* products hero */
.ph-hero h1{font-size:var(--t-1);font-stretch:122%;letter-spacing:-.04em;line-height:.95;max-width:14ch}

/* reveal */
.js [data-reveal].pre{opacity:0;transform:translateY(28px)}
.js [data-reveal]{transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js [data-reveal-delay="1"]{transition-delay:.08s}.js [data-reveal-delay="2"]{transition-delay:.16s}.js [data-reveal-delay="3"]{transition-delay:.24s}.js [data-reveal-delay="4"]{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal].pre{opacity:1;transform:none}
}
table.spec tbody th{text-align:left;font:650 1rem/1.35 var(--f-body);color:var(--ink);padding:18px 18px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;min-width:180px}

/* hero mobile + WhatsApp visibility */
.wa{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.wa.show{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s}
.wa.show:hover{transform:translateY(-3px)}
.eyebrow .opt{display:contents}
@media (max-width:700px){
  .hero::before{background:linear-gradient(180deg,rgba(7,17,30,.4) 0%,rgba(7,17,30,.78) 42%,rgba(7,17,30,.95) 100%)}
  .hero-media img{object-position:72% 30%}
  .hero .eyebrow .opt{display:none}
  .active-lines{justify-content:flex-start}
  .thermo-top{flex-direction:column;align-items:stretch}
}

@media (max-width:700px){
  .spec-wrap{border-top:0;overflow:visible}
  table.spec{min-width:0}
  table.spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.spec,table.spec tbody,table.spec tr,table.spec th,table.spec td{display:block}
  table.spec tr{border-top:2px solid var(--ink);padding:6px 0 10px;margin-bottom:22px}
  table.spec tbody th{padding:12px 0 8px;border:0;font-size:1.1rem;min-width:0}
  table.spec td{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
  table.spec td::before{content:attr(data-label);font:500 .68rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  table.spec tbody tr:hover{background:none}
  .note .sw{display:none}
}

.site-head.mega-on{background:var(--bg)!important;color:var(--ink)!important;box-shadow:0 1px 0 var(--line)}
.has-hero .site-head.mega-on .head-cta{background:var(--ink);color:var(--bg)}
.floater{width:clamp(240px,21vw,320px)}
.index a .k{transition:opacity .35s var(--ease)}
.index.hovering a .k{opacity:.35}
.index.hovering a:hover .k{opacity:0}

.contacts b a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.contacts b a:hover{background-size:100% 1px}
.contacts b.addr{font-size:.92rem;line-height:1.5;color:var(--on-night-2);user-select:text}
@media (max-width:520px){.form{grid-template-columns:1fr}}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-ok.err{border-left-color:#E5484D}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px)}
.post{display:grid;gap:18px;align-content:start;text-decoration:none}
.post .ph{overflow:hidden;border-radius:3px;background:var(--plate);aspect-ratio:3/2}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.post:hover .ph img{transform:scale(1.05)}
.post .pm{display:grid;gap:10px;align-content:start}
.post .pk{display:flex;gap:14px;font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.post .pk span:first-child{color:var(--accent)}
.post h3{font-size:clamp(1.2rem,1.5vw,1.42rem);font-stretch:112%;line-height:1.18;transition:color .3s}
.post .pd{color:var(--ink-2);font-size:.95rem}
.post .link{margin-top:4px;width:max-content}
.post:hover .link{background-size:100% 1px}
.post:hover .link svg{transform:translateX(3px)}
.post.wide{grid-column:1/-1;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;padding-bottom:clamp(20px,3vw,40px);border-bottom:1px solid var(--line)}
.post.wide h3{font-size:clamp(1.8rem,3.2vw,3rem);font-stretch:118%;letter-spacing:-.03em;line-height:1.02}
.post.wide .pd{font-size:var(--t-lead);max-width:42ch}
.post.wide .pm{gap:16px}
.post[hidden]{display:none!important}
@media (max-width:980px){.posts{grid-template-columns:1fr 1fr}.post.wide{grid-template-columns:1fr}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(32px,4vw,56px)}
.chip{border:1px solid var(--line-2);background:none;border-radius:999px;padding:10px 16px;font:500 .9rem/1 var(--f-body);cursor:pointer;color:var(--ink-2);transition:all .3s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;background:var(--thermal);transform:scaleX(0);transform-origin:left}
.post-head .wrap{display:grid;gap:22px;max-width:1100px;margin-inline:0}
.post-head{padding-bottom:clamp(36px,5vw,64px)}
.post-head .wrap{margin-inline:auto;max-width:var(--wrap)}
.post-head h1{font-size:clamp(2.2rem,4.8vw,4.6rem);font-stretch:118%;letter-spacing:-.035em;line-height:1;max-width:20ch}
.post-head .lead{max-width:52ch}
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.78rem;color:var(--mute);letter-spacing:.02em}
.byline span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--thermal);margin-right:22px;transform:translateY(-2px)}
.post-hero{margin:0 0 clamp(48px,6vw,96px);border-radius:3px;overflow:hidden;background:var(--plate);aspect-ratio:21/9;max-width:100%}
.post-hero img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.post-hero{aspect-ratio:3/2}}
.post-grid{display:grid;grid-template-columns:260px minmax(0,720px);justify-content:space-between;gap:clamp(32px,6vw,120px);padding-bottom:var(--sec)}
.post-grid>*{min-width:0}
.toc{position:sticky;top:calc(var(--header-h) + 32px);align-self:start;display:grid;gap:16px}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:2px;border-left:1px solid var(--line-2)}
.toc li{counter-increment:t}
.toc a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;color:var(--ink-2);font-size:.9rem;line-height:1.35;transition:all .3s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--accent);font-weight:600}
.toc-cta{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);text-decoration:none}
.toc-cta img{width:64px;height:64px;object-fit:cover;border-radius:2px}
.toc-cta small{display:block;font:500 .68rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.toc-cta b{font-size:.92rem;line-height:1.3}
.toc-cta:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.post-grid{grid-template-columns:1fr}.toc{position:static;order:-1}.toc ol{display:none}.toc>.eyebrow{display:none}.toc-cta{margin-top:0;border-top:0;padding-top:0}}
.article-body{font-size:1.08rem;line-height:1.75;color:var(--ink-2)}
.article-body>*+*{margin-top:1.15em}
.article-body h2{font-size:clamp(1.6rem,2.4vw,2.1rem);font-stretch:114%;color:var(--ink);margin-top:2.4em;line-height:1.1;scroll-margin-top:calc(var(--header-h) + 32px)}
.article-body h2+*{margin-top:.9em}
.article-body h3{font-size:1.22rem;color:var(--ink);margin-top:1.8em;font-stretch:108%}
.article-body h3+p{margin-top:.5em}
.article-body b,.article-body strong{color:var(--ink);font-weight:650}
.article-body ul,.article-body ol{padding-left:1.25em;display:grid;gap:.5em}
.article-body ul{list-style:none;padding-left:0}
.article-body ul li{position:relative;padding-left:24px}
.article-body ul li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:2px;background:var(--thermal)}
.article-body ol{list-style:decimal}
.article-body ol li::marker{font-family:var(--f-mono);font-size:.85em;color:var(--mute)}
.article-body .tbl{overflow-x:auto;border-top:2px solid var(--ink)}
.article-body table{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem;line-height:1.45}
.article-body thead th{font:600 .68rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:left;padding:12px 16px 12px 0;white-space:nowrap}
.article-body td{padding:12px 16px 12px 0;border-top:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.article-body td:first-child{color:var(--ink);font-weight:600}
.callout{background:var(--paper);border:1px solid var(--line);border-left:3px solid transparent;border-image:var(--thermal) 1;border-image-width:0 0 0 3px;padding:20px 22px;display:grid;gap:6px}
.callout b{font:600 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.callout p{margin:0}
.post-faq{margin-top:3em}
.post-faq .faq{margin-top:1em}
.post-faq summary{font-size:1.02rem}
.post-cta{margin-top:3.2em;background:var(--night);color:var(--on-night);border-radius:4px;padding:clamp(24px,3vw,40px);display:grid;gap:22px;position:relative;overflow:hidden;isolation:isolate}
.post-cta::before{content:"";position:absolute;right:-20%;top:-60%;width:70%;height:180%;background:radial-gradient(closest-side,rgba(3,110,183,.45),transparent 70%);z-index:-1}
.post-cta h3{font-size:clamp(1.5rem,2.4vw,2rem);font-stretch:116%;color:var(--on-night);margin-top:10px}
.post-cta p{color:var(--on-night-2);margin-top:6px}
.post-cta .ctas{display:flex;flex-wrap:wrap;gap:12px}
.post-cta .btn-line{border-color:rgba(234,241,248,.32);color:var(--on-night)}

.posts-index{grid-template-columns:repeat(6,minmax(0,1fr))}
.posts-index .post{grid-column:span 2}
.posts-index .post.wide{grid-column:1/-1}
.posts-index .post:nth-child(2),.posts-index .post:nth-child(3){grid-column:span 3}
@media (max-width:980px){.posts-index{grid-template-columns:1fr 1fr}.posts-index .post,.posts-index .post:nth-child(2),.posts-index .post:nth-child(3){grid-column:auto}}
@media (max-width:600px){.posts-index{grid-template-columns:1fr}}