/* ============================================================================
   KAPSHA CONCRETE & CONSTRUCTION — light theme
   Direction: "SPEC SHEET" — white paper, hairline structural rules, technical
   labels, and the logo's blue→cyan / gold→flame gradients used as accents.
   Typeface: DM Sans only, throughout.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --paper-2:#F5F7F9;
  --paper-3:#EDF1F4;
  --ink:#0B1116;
  --body:#48555F;
  --mute:#77848E;
  --line:#DFE5EA;
  --line-2:#C9D2D9;

  --blue:#1F6FD0;
  --cyan:#16BEE8;
  --gold:#FBB614;
  --flame:#F2670C;
  --ember:#EE3A20;

  --cool:linear-gradient(115deg,var(--blue),var(--cyan));
  --hot:linear-gradient(115deg,var(--gold),var(--ember));

  --f:'DM Sans',system-ui,-apple-system,sans-serif;

  --pad:clamp(20px,4.4vw,72px);
  --wrap:1400px;
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f);font-size:16.5px;line-height:1.65;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:#FFE1B0;color:var(--ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--line-2)}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.full{width:100%;padding-inline:var(--pad)}
section{padding-block:clamp(64px,8.4vw,128px);position:relative}
.tight{padding-block:clamp(44px,5.4vw,76px)}
.pt0{padding-top:0}
.pb0{padding-bottom:0 !important}
/* contact map flush to footer — no bottom gap */
section.pb0,.rk section.pb0,body.dark section.pb0{padding-bottom:0 !important}
.tinted{background:var(--paper-2)}
.bordered{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,h4{font-family:var(--f);color:var(--ink);margin:0 0 .5em;font-weight:700;letter-spacing:-.028em;line-height:1.06}
h1{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.85rem,3.7vw,3.1rem);font-weight:800}
h3{font-size:clamp(1.12rem,1.7vw,1.42rem);letter-spacing:-.018em}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:68ch;font-size:14px}
.lead{font-size:clamp(1.03rem,1.4vw,1.22rem);color:#3C4952;line-height:1.62}
strong{color:var(--ink);font-weight:600}
.big{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:800;letter-spacing:-.04em;line-height:.98}

.grad-cool{background:var(--cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-hot{background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}

.tag{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:11px;margin-bottom:18px;
}
.tag::before{content:"";width:24px;height:2px;background:var(--cool)}
.tag.hot{color:var(--flame)}
.tag.hot::before{background:var(--hot)}
.lbl{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:.86rem;font-weight:700;letter-spacing:.06em;
  padding:15px 27px;border:1px solid var(--line-2);border-radius:var(--r);
  background:transparent;color:var(--ink);overflow:hidden;isolation:isolate;
  transition:color .3s,border-color .3s,box-shadow .3s;
}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);transition:transform .4s cubic-bezier(.65,0,.35,1)}
.btn:hover::before{transform:translateY(0)}
.btn-hot{background:var(--hot);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(242,103,12,.24)}
.btn-hot::before{background:linear-gradient(115deg,#EE3A20,#FBB614)}
.btn-cool{background:var(--cool);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(31,111,208,.22)}
.btn-cool::before{background:linear-gradient(115deg,#16BEE8,#1F6FD0)}
.btn-line::before{background:var(--ink)}
.btn-line:hover{color:#fff;border-color:var(--ink)}
.btn .ar{transition:transform .3s}
.btn:hover .ar{transform:translateX(4px)}
.btn-sm{padding:10px 17px;font-size:.78rem}

/* ================================================================ LOADER == */
#loader{position:fixed;inset:0;z-index:9999;background:var(--paper);display:grid;place-items:center;padding:var(--pad)}
.ld{width:min(520px,100%)}
.ld-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:20px}
.ld-top img{width:clamp(140px,24vw,200px)}
.ld-pct{font-size:clamp(2.4rem,6vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:.85;color:var(--ink)}
.ld-pct sup{font-size:.85rem;font-weight:600;color:var(--mute);vertical-align:super}
.ld-rows{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.ld-row{display:grid;grid-template-columns:112px 1fr 74px;align-items:center;gap:13px;font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.ld-bar{height:4px;background:var(--paper-3);overflow:hidden;border-radius:99px}
.ld-bar i{display:block;height:100%;width:0;background:var(--cool);transition:width .1s linear}
.ld-row:nth-child(4) .ld-bar i,.ld-row:nth-child(6) .ld-bar i{background:var(--hot)}
.ld-val{text-align:right;color:var(--ink)}
.ld-status{margin-top:20px;font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);min-height:1.3em}
.curtain{position:fixed;inset:0;z-index:9998;display:flex;pointer-events:none}
.curtain i{flex:1;background:var(--paper-2);transition:transform .85s cubic-bezier(.76,0,.24,1)}
.curtain.up i{transform:translateY(-101%)}
.curtain i:nth-child(2){transition-delay:.05s}
.curtain i:nth-child(3){transition-delay:.1s}
.curtain i:nth-child(4){transition-delay:.15s}
.curtain i:nth-child(5){transition-delay:.2s}

/* ================================================================ HEADER == */
.topline{background:var(--ink);color:#C4CED6;font-size:.73rem;letter-spacing:.04em}
.topline .full{display:flex;justify-content:space-between;align-items:center;gap:18px;height:38px;overflow:hidden;white-space:nowrap}
.topline a:hover{color:#fff}
.topline .tl-r{display:flex;gap:20px;align-items:center}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);font-weight:600}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(22,190,232,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(22,190,232,0)}100%{box-shadow:0 0 0 0 rgba(22,190,232,0)}}
@media(max-width:900px){.topline .tl-l{display:none}.topline .full{justify-content:center}}

header.site{position:sticky;top:0;z-index:900;width:100%;background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s}
header.site.solid{background:rgba(255,255,255,.98);box-shadow:0 6px 26px rgba(11,17,22,.07)}
header.site .full{display:flex;align-items:center;justify-content:space-between;gap:24px;height:clamp(66px,6.4vw,82px)}
.logo img{height:clamp(34px,4vw,46px);width:auto}
.nav{display:flex;align-items:center;gap:clamp(12px,1.5vw,26px)}
.nav>div{position:relative}
.nav a.top{display:flex;align-items:center;gap:6px;font-size:.83rem;font-weight:600;color:#2C3941;padding:10px 0;transition:color .22s;position:relative}
.nav a.top::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--cool);transition:width .3s cubic-bezier(.65,0,.35,1)}
.nav a.top:hover,.nav a.top.on{color:var(--blue)}
.nav a.top:hover::after,.nav a.top.on::after{width:100%}
.nav .caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .25s}
.nav>div:hover .caret{transform:rotate(225deg) translateY(-2px)}
.drop{
  position:absolute;top:calc(100% + 8px);left:-16px;min-width:248px;background:#fff;z-index:1000;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 48px rgba(11,17,22,.13);
  padding:9px;display:grid;gap:1px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s,transform .26s,visibility .26s;
}
.nav>div:hover .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:9px 12px;font-size:.86rem;color:#39464F;border-radius:var(--r);transition:background .18s,color .18s,padding-left .18s}
.drop a:hover{background:var(--paper-2);color:var(--blue);padding-left:17px}
.hd-cta{display:flex;align-items:center;gap:12px}
.hd-phone{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--ink)}
.hd-phone svg{width:15px;height:15px;fill:var(--flame)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--hot);width:0}

.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);cursor:pointer;position:relative;z-index:960}
.burger i{position:absolute;left:11px;width:21px;height:1.7px;background:currentColor;transition:transform .3s,opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:26px}
.burger.x i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:950;background:#fff;overflow-y:auto;padding:96px var(--pad) 40px;clip-path:circle(0% at calc(100% - 44px) 58px);transition:clip-path .68s cubic-bezier(.76,0,.24,1)}
.drawer.open{clip-path:circle(155% at calc(100% - 44px) 58px)}
.drawer nav{display:grid;gap:0}
.drawer nav>a,.drawer .grp>button{
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  font-size:1.32rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);padding:15px 0;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  opacity:0;transform:translateY(18px);transition:opacity .45s,transform .45s;
}
.drawer.open nav>a,.drawer.open .grp>button{opacity:1;transform:none}
.drawer .grp>button .c{width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);transition:transform .28s}
.drawer .grp.open>button .c{transform:rotate(225deg)}
.drawer .sub{display:grid;max-height:0;overflow:hidden;transition:max-height .4s ease}
.drawer .grp.open .sub{max-height:640px}
.drawer .sub a{padding:11px 0 11px 16px;font-size:.95rem;color:var(--body);border-bottom:1px solid var(--line)}
.drawer-foot{margin-top:28px;display:grid;gap:7px;font-size:.9rem;color:var(--body)}
@media(max-width:1150px){.nav,.hd-phone{display:none}.burger{display:block}}
@media(min-width:1151px){.drawer{display:none}}

/* ================================================================== HERO == */
.hero{position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.85fr);gap:clamp(28px,3.6vw,58px);align-items:center;padding-block:clamp(52px,6.4vw,92px)}
@media(max-width:1080px){.hero-in{grid-template-columns:1fr}}
.hero-art{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 70px rgba(11,17,22,.16)}
.hero-art img{width:100%;height:clamp(320px,42vw,560px);object-fit:cover;will-change:transform}
#pour{position:absolute;inset:0;pointer-events:none}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.02em}
.hero h1 .ln>b{display:block;font-weight:800;transform:translateY(103%);opacity:0}
.reveal-on .hero h1 .ln>b{animation:up .95s cubic-bezier(.16,1,.3,1) forwards}
.reveal-on .hero h1 .ln:nth-child(2)>b{animation-delay:.09s}
.reveal-on .hero h1 .ln:nth-child(3)>b{animation-delay:.18s}
@keyframes up{to{transform:translateY(0);opacity:1}}
.hero-sub,.hero-act,.hero-chips{opacity:0;transform:translateY(14px)}
.reveal-on .hero-sub{animation:fadeup .75s .5s cubic-bezier(.16,1,.3,1) forwards}
.reveal-on .hero-act{animation:fadeup .75s .62s cubic-bezier(.16,1,.3,1) forwards}
.reveal-on .hero-chips{animation:fadeup .75s .74s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fadeup{to{opacity:1;transform:none}}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.hero-chips i{font-style:normal;font-size:.74rem;font-weight:600;letter-spacing:.06em;padding:7px 12px;border:1px solid var(--line-2);border-radius:99px;color:#39464F;background:#fff}

/* live batch console (light) */
.console{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:0 20px 50px rgba(11,17,22,.09)}
.console-hd{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:15px}
.console-hd b{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.console-hd .live{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.console-hd .live::before{background:var(--blue);box-shadow:0 0 0 0 rgba(31,111,208,.6)}
.gpick{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}
.gpick button{font-size:.74rem;font-weight:700;padding:7px 11px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);color:var(--body);cursor:pointer;transition:.2s}
.gpick button:hover{border-color:var(--line-2);color:var(--ink)}
.gpick button.on{background:var(--cool);border-color:transparent;color:#fff}
.mixrow{display:grid;grid-template-columns:92px 1fr 72px;align-items:center;gap:11px;margin-bottom:8px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mixbar{height:6px;background:var(--paper-3);border-radius:99px;overflow:hidden}
.mixbar i{display:block;height:100%;width:0;background:var(--cool);transition:width .8s cubic-bezier(.16,1,.3,1)}
.mixrow.hot .mixbar i{background:var(--hot)}
.mixval{text-align:right;color:var(--ink);font-weight:700;font-size:.75rem;letter-spacing:0}
.console-ft{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);margin-top:15px;padding-top:15px}
.dial{display:flex;align-items:center;gap:12px}
.dial svg{width:54px;height:54px;flex:none;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:5}
.dial .trk{stroke:var(--paper-3)}
.dial .val{stroke:url(#gcool);stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.dial b{display:block;font-size:1.4rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.dial small,.console-ft small{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block}

/* ticker */
.ticker{border-bottom:1px solid var(--line);background:#fff;overflow:hidden}
.ticker-in{display:flex;width:max-content;animation:slide 36s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker-in span{display:flex;align-items:center;gap:12px;padding:12px 24px;white-space:nowrap;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ticker-in span::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.metrics div{padding:clamp(24px,3vw,40px) var(--pad);border-right:1px solid var(--line);position:relative;overflow:hidden}
.metrics div:last-child{border-right:0}
.metrics div::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--hot);transition:width .8s cubic-bezier(.16,1,.3,1)}
.metrics div:hover::after{width:100%}
.metrics b{display:block;font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.metrics small{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-top:8px;display:block}
@media(max-width:820px){.metrics{grid-template-columns:1fr 1fr}.metrics div:nth-child(2n){border-right:0}.metrics div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ================================================================ BLOCKS == */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,74px);align-items:center}
.two.top{align-items:start}
.two.w-l{grid-template-columns:1.15fr .85fr}
@media(max-width:960px){.two,.two.w-l{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card{background:#fff;padding:clamp(24px,2.9vw,36px);position:relative;transition:background .3s,transform .3s}
.card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--cool);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.card:hover{background:var(--paper-2)}
.card:hover::before{transform:scaleX(1)}
.card .ix{display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--flame);margin-bottom:12px}
.card p{margin-bottom:0;font-size:.96rem}
.card p+.btn{margin-top:18px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .32s,transform .32s;display:flex;flex-direction:column}
.tile:hover{box-shadow:0 18px 44px rgba(11,17,22,.1);transform:translateY(-3px)}
.tile .th{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.tile .th img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.tile:hover .th img{transform:scale(1.06)}
.tile .tb{padding:22px;flex:1;display:flex;flex-direction:column}
.tile .tb p{font-size:.93rem;margin-bottom:14px}
.tile .meta{margin-top:auto;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}

.plants{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.plants{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.plants{grid-template-columns:1fr}}
.plant{background:#fff;padding:clamp(26px,2.4vw,32px);position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.plant:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(0,0,0,.1);border-color:rgba(242,103,12,.35)}
.plant .idx{position:absolute;right:18px;top:14px;font-size:2.4rem;font-weight:800;letter-spacing:-.05em;color:var(--paper-3);line-height:1;z-index:0}
.plant .lbl{position:relative;z-index:1;max-width:70%}
.plant h3{margin-top:6px;font-size:1.25rem;line-height:1.25;position:relative;z-index:1;max-width:75%}
.plant .addr{font-size:.9rem;line-height:1.55;margin:10px 0 16px;color:var(--body);max-width:38ch}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.chips i{font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.03em;padding:5px 11px;border:1px solid var(--line);border-radius:99px;color:var(--body);background:var(--paper-2)}
.plant .call{margin-top:auto;font-size:.82rem;font-weight:700;color:var(--flame);display:inline-flex;gap:7px;align-items:center;transition:gap .25s}
.plant .call:hover{gap:13px}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
.tbl th,.tbl td{padding:14px 15px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{font-size:.69rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);background:var(--paper-2)}
.tbl td:first-child{font-weight:700;color:var(--ink)}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:#F7FAFD}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}

/* forms */
.f{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f .w{grid-column:1/-1}
label.fl{display:grid;gap:7px;font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
input,select,textarea{
  width:100%;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--ink);padding:12px 13px;font-family:var(--f);font-size:.95rem;transition:border-color .22s,box-shadow .22s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,208,.13)}
@media(max-width:680px){.f{grid-template-columns:1fr}}
.note{font-size:.85rem;color:var(--mute)}
.alert{padding:13px 16px;border-radius:var(--r);font-size:.92rem;margin-bottom:18px}
.alert.ok{background:#E8F7EE;border:1px solid #B6E3C7;color:#1B6B3A}
.alert.err{background:#FDECEA;border:1px solid #F5C3BC;color:#A32316}

/* calculators */
.calcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;scroll-margin-top:120px}
.calc h3{display:flex;align-items:center;gap:10px}
.calc h3 .n{font-size:.68rem;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--cool);padding:4px 8px;border-radius:99px}
.cin{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.cin .w{grid-column:1/-1}
.cout{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.cout div{background:var(--paper-2);padding:15px}
.cout b{display:block;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1.05}
.cout small{display:block;margin-top:5px;font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.trucks{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;min-height:24px}
.trucks i{width:28px;height:20px;border-radius:2px;background:var(--paper-3);border:1px solid var(--line-2);position:relative;transform:scale(0);animation:pop .38s cubic-bezier(.34,1.56,.64,1) forwards}
.trucks i::after{content:"";position:absolute;inset:3px;background:var(--cool);border-radius:1px}
@keyframes pop{to{transform:scale(1)}}

/* map */
.mapwrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,2.2vw,30px)}
.mapwrap svg{width:100%;height:auto;display:block}
.node{cursor:pointer}
.node circle.hit{fill:transparent}
.node .dot{fill:var(--blue);transition:r .3s}
.node .ring{fill:none;stroke:var(--blue);stroke-width:1;opacity:.45;transform-origin:center;transform-box:fill-box;animation:pulse 2.6s ease-out infinite}
.node:nth-of-type(2n) .ring{animation-delay:.7s}
.node:nth-of-type(3n) .ring{animation-delay:1.3s}
@keyframes pulse{0%{transform:scale(.4);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.node.hot .dot{fill:var(--flame)}
.node.hot .ring{stroke:var(--flame)}
.node:hover .dot{r:7}
.node text{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--mute);font-family:var(--f)}
.node:hover text{fill:var(--ink)}
.map-info{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;min-height:72px}
.map-info b{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.map-info span{font-size:.86rem;color:var(--body)}

/* flow */
.flow{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4.4vw,64px);align-items:start}
@media(max-width:960px){.flow{grid-template-columns:1fr}}
.flow-stick{position:sticky;top:clamp(96px,12vw,140px)}
.flow-num{font-size:clamp(4.6rem,13vw,9.5rem);font-weight:800;letter-spacing:-.06em;line-height:.82;background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.flow-steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.flow-step{background:#fff;padding:clamp(22px,2.7vw,34px);transition:background .3s}
.flow-step.on{background:var(--paper-2)}
.flow-step p{margin:0;font-size:.96rem}

/* marquee */
.mq{overflow:hidden;border-block:1px solid var(--line);background:var(--paper-2)}
.mq-in{display:flex;width:max-content;animation:slide 42s linear infinite}
.mq-in b{font-size:clamp(2.2rem,5.6vw,4.6rem);font-weight:800;letter-spacing:-.04em;padding:20px 30px;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--line-2)}
.mq-in b:nth-child(2n){-webkit-text-stroke:0;background:var(--hot);-webkit-background-clip:text;background-clip:text}

/* accordion (FAQ) */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:16px;align-items:center;transition:background .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--paper-2)}
.acc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);flex:none;transition:transform .25s}
.acc details[open] summary::after{transform:rotate(225deg)}
.acc .ab{padding:0 22px 20px;font-size:.96rem}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gal a{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--paper-3)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.gal a:hover img{transform:scale(1.07)}
.galtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.galtabs button{font-size:.8rem;font-weight:700;padding:9px 16px;border:1px solid var(--line-2);border-radius:99px;background:#fff;color:var(--body);cursor:pointer;transition:.2s}
.galtabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* page hero */
.phero{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:clamp(40px,5.2vw,76px);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 130% at 88% 8%,rgba(31,111,208,.09),transparent 62%),radial-gradient(50% 110% at 4% 100%,rgba(242,103,12,.07),transparent 60%)}
.phero .wrap{position:relative;z-index:2}
.crumb{font-size:.75rem;font-weight:600;color:var(--mute);margin-bottom:14px}
.crumb a:hover{color:var(--blue)}

/* CTA band */
.band{background:var(--ink);color:#C4CED6;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--cool)}
.band h2{color:#fff}
.band p{color:#9BA9B4}
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.band .btn-line{border-color:rgba(255,255,255,.3);color:#fff}
.band .btn-line::before{background:#fff}
.band .btn-line:hover{color:var(--ink);border-color:#fff}

/* reveal */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
[data-rv].in{opacity:1;transform:none}

/* footer */
footer.site{background:var(--ink);color:#9BA9B4;font-size:.94rem}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,3.2vw,50px);padding-block:clamp(48px,6vw,82px)}
@media(max-width:980px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft-top{grid-template-columns:1fr}}
.ft-top img.fl{width:210px;margin-bottom:18px}
footer h4{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer ul a{transition:color .2s,padding-left .2s}
footer ul a:hover{color:var(--cyan);padding-left:5px}
footer p{color:#9BA9B4}
.ft-seo{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;font-size:.76rem;line-height:2;color:#5D6B76}
.ft-legal{border-top:1px solid rgba(255,255,255,.1);padding-block:18px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.76rem;color:#6C7A85}

/* floating */
.fab{position:fixed;right:16px;bottom:16px;z-index:800;display:grid;gap:10px}
.fab a{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;box-shadow:0 10px 28px rgba(11,17,22,.25);transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.fab a:hover{transform:scale(1.09) rotate(-6deg)}
.fab .wa{background:#25D366}
.fab .ph{background:var(--hot)}
.fab svg{width:24px;height:24px;fill:#fff}
.totop{position:fixed;left:16px;bottom:16px;z-index:800;width:42px;height:42px;display:grid;place-items:center;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.totop.on{opacity:1;pointer-events:auto}
.totop svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2}

/* utility */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:680px){.grid-2{grid-template-columns:1fr}}
.center{text-align:center}
.narrow{max-width:62ch}
.sechd{max-width:64ch;margin-bottom:clamp(30px,3.6vw,48px)}
.sechd.center{margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  [data-rv]{opacity:1;transform:none}
  .hero h1 .ln>b,.hero-sub,.hero-act,.hero-chips{transform:none;opacity:1}
}

/* ============================================================================
   HOMEPAGE REDESIGN — "corporate scale" composition. Scoped .hm-  DM Sans.
   ========================================================================== */

/* ---- full-bleed hero --------------------------------------------------- */
.hm-hero{position:relative;min-height:min(880px,93vh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#0B1116;border-bottom:0}
.hm-hero-img{position:absolute;inset:0;z-index:0}
.hm-hero-img img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.06)}
.hm-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(178deg,rgba(11,17,22,.42) 0%,rgba(11,17,22,.12) 30%,rgba(11,17,22,.28) 58%,rgba(11,17,22,.82) 100%)}
.hm-hero-side{position:absolute;top:50%;right:clamp(14px,2.4vw,34px);z-index:3;transform:rotate(90deg) translateX(50%);transform-origin:right center;font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
@media(max-width:1100px){.hm-hero-side{display:none}}
.hm-hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(46px,6vw,86px)}
.hm-eyebrow{display:inline-flex;align-items:center;gap:13px;font-size:.73rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff;margin-bottom:26px}
.hm-eyebrow::before{content:"";width:34px;height:2px;background:var(--hot)}
.hm-hero h1{color:#fff;font-size:clamp(2.7rem,6.4vw,6.1rem);line-height:.99;letter-spacing:-.04em;font-weight:800;max-width:16ch;margin:0 0 .5em}
.hm-hero h1 .ln{display:block;overflow:hidden}
.hm-hero h1 .ln>b{display:block;font-weight:800;transform:translateY(104%)}
.reveal-on .hm-hero h1 .ln>b{animation:up 1.05s cubic-bezier(.16,1,.3,1) forwards}
.reveal-on .hm-hero h1 .ln:nth-child(2)>b{animation-delay:.1s}
.reveal-on .hm-hero h1 .ln:nth-child(3)>b{animation-delay:.2s}
.hm-hero-sub{max-width:56ch;color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.45vw,1.32rem);line-height:1.55;margin:0 0 32px;opacity:0;transform:translateY(16px)}
.reveal-on .hm-hero-sub{animation:fadeup .8s .48s cubic-bezier(.16,1,.3,1) forwards}
.hm-hero-act{display:flex;flex-wrap:wrap;gap:13px;opacity:0;transform:translateY(16px)}
.reveal-on .hm-hero-act{animation:fadeup .8s .62s cubic-bezier(.16,1,.3,1) forwards}
.hm-hero-act .btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);color:#fff;backdrop-filter:blur(6px)}
.hm-hero-act .btn-glass::before{background:#fff}
.hm-hero-act .btn-glass:hover{color:var(--ink)}

/* docked credibility bar */
.hm-hero-bar{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);background:rgba(11,17,22,.34);backdrop-filter:blur(10px)}
.hm-hero-bar .full{display:grid;grid-template-columns:repeat(4,1fr)}
.hm-hero-bar div{padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,24px);border-right:1px solid rgba(255,255,255,.13)}
.hm-hero-bar div:last-child{border-right:0}
.hm-hero-bar b{display:block;color:#fff;font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:800;letter-spacing:-.035em;line-height:1}
.hm-hero-bar small{display:block;margin-top:7px;font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media(max-width:720px){.hm-hero-bar .full{grid-template-columns:1fr 1fr}.hm-hero-bar div:nth-child(2){border-right:0}.hm-hero-bar div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}}

/* ---- editorial statement ---------------------------------------------- */
.hm-statement{padding-block:clamp(70px,9vw,140px)}
.hm-statement .full{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
@media(max-width:960px){.hm-statement .full{grid-template-columns:1fr;align-items:start;gap:30px}}
.hm-statement h2{font-size:clamp(1.8rem,3.9vw,3.3rem);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:0;max-width:20ch}
.hm-statement h2 em{font-style:normal;background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-statement .col p{margin:0 0 1em;color:var(--body)}
.hm-statement .col p:last-of-type{margin-bottom:20px}

/* ---- solutions: large image tiles ------------------------------------- */
.hm-sol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.hm-sol{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hm-sol{grid-template-columns:1fr}}
.hm-card{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:#0B1116;min-height:clamp(340px,34vw,440px);isolation:isolate}
.hm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .5s}
.hm-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,22,.15),rgba(11,17,22,.86));z-index:1}
.hm-card:hover img{transform:scale(1.07);opacity:.82}
.hm-card-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.4vw,32px);color:#fff}
.hm-card .no{position:absolute;top:clamp(20px,2.2vw,28px);left:clamp(22px,2.4vw,32px);z-index:2;font-size:.72rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.7)}
.hm-card h3{color:#fff;font-size:clamp(1.35rem,2vw,1.7rem);margin:0 0 10px;letter-spacing:-.02em}
.hm-card p{color:rgba(255,255,255,.82);font-size:.94rem;margin:0 0 16px;max-width:34ch}
.hm-card .go{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.hm-card .go span{transition:transform .3s}
.hm-card:hover .go span{transform:translateX(5px)}
.hm-card .go::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--hot);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1);z-index:2}
.hm-card:hover .go::before{transform:scaleX(1)}

/* ---- dark impact band -------------------------------------------------- */
.hm-band{background:var(--ink);color:#9BA9B4;position:relative;overflow:hidden}
.hm-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 88% 6%,rgba(31,111,208,.16),transparent 60%),radial-gradient(60% 120% at 6% 100%,rgba(242,103,12,.12),transparent 58%)}
.hm-band .full{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,74px);align-items:center;padding-block:clamp(60px,7.5vw,110px)}
@media(max-width:960px){.hm-band .full{grid-template-columns:1fr;gap:34px}}
.hm-band h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.03em;margin:0 0 16px;max-width:16ch}
.hm-band .lead{color:#AEB9C2;margin:0}
.hm-nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden}
.hm-nums div{background:var(--ink);padding:clamp(24px,3vw,38px)}
.hm-nums b{display:block;color:#fff;font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.hm-nums b .u{background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-nums small{display:block;margin-top:10px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A97A1}

/* ---- capability split with bleed image -------------------------------- */
.hm-split{position:relative;overflow:hidden}
.hm-split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,72px);align-items:center}
@media(max-width:960px){.hm-split .wrap{grid-template-columns:1fr}}
.hm-split-img{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(360px,40vw,540px)}
.hm-split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-check{display:grid;gap:0;margin:26px 0 30px;border-top:1px solid var(--line)}
.hm-check div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.hm-check .k{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);flex:none;margin-top:2px}
.hm-check .k svg{width:13px;height:13px;stroke:var(--flame);fill:none;stroke-width:2.4}
.hm-check b{color:var(--ink);font-weight:700;display:block;font-size:1rem}
.hm-check span{font-size:.92rem;color:var(--body)}

/* ---- coverage feature -------------------------------------------------- */
.hm-cov .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.4vw,68px);align-items:center}
@media(max-width:960px){.hm-cov .wrap{grid-template-columns:1fr}}

/* ---- grade console / calculators teaser ------------------------------- */
.hm-tools .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,66px);align-items:center}
@media(max-width:960px){.hm-tools .wrap{grid-template-columns:1fr}}

/* ---- insights ---------------------------------------------------------- */
.hm-quote{border-left:3px solid var(--flame);padding:6px 0 6px 24px;margin:0}
.hm-quote p{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.01em;margin:0 0 14px}
.hm-quote cite{font-style:normal;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* ============================================================================
   HOMEPAGE v2 — "RICH & LIVELY", colour-blocked. Scoped .cl / .cl-  DM Sans.
   ========================================================================== */
:root{
  --t-blue:#EAF3FB; --t-cyan:#E6F8FC; --t-cream:#FFF6E4; --t-flame:#FFF0E7; --t-mint:#E9F8F0;
  --g-main:linear-gradient(120deg,#1F6FD0 0%,#1E93D6 46%,#16BEE8 100%);
  --g-warm:linear-gradient(120deg,#FBB614 0%,#F2670C 62%,#EE3A20 100%);
  --g-rich:linear-gradient(120deg,#154A9E 0%,#1F6FD0 40%,#16BEE8 100%);
}
.cl{--r:16px}
.cl .btn{border-radius:11px}
.cl section{padding-block:clamp(58px,7vw,108px)}
.cl .sechd h2{letter-spacing:-.03em}
.bg-blue{background:var(--t-blue)}
.bg-cyan{background:var(--t-cyan)}
.bg-cream{background:var(--t-cream)}
.bg-flame{background:var(--t-flame)}
.bg-mint{background:var(--t-mint)}

/* ---- hero -------------------------------------------------------------- */
.cl-hero{position:relative;overflow:hidden;background:#07223f;min-height:min(820px,90vh);display:flex;flex-direction:column;justify-content:center}
.cl-hero-img{position:absolute;inset:0;z-index:0}
.cl-hero-img img{width:100%;height:100%;object-fit:cover}
.cl-hero-img::after{content:"";position:absolute;inset:0;background:
  linear-gradient(107deg,rgba(8,32,62,.95) 0%,rgba(17,74,140,.86) 38%,rgba(22,150,214,.5) 74%,rgba(22,190,232,.34) 100%)}
.cl-hero-img::before{content:"";position:absolute;top:-20%;right:-10%;width:60%;height:80%;z-index:1;
  background:radial-gradient(circle,rgba(251,182,20,.28),transparent 62%);pointer-events:none}
.cl-hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(48px,6vw,74px)}
.cl-pill{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);padding:8px 15px;border-radius:999px;margin-bottom:24px;backdrop-filter:blur(6px)}
.cl-pill b{background:var(--g-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,5.6rem);line-height:1.0;letter-spacing:-.04em;font-weight:800;max-width:17ch;margin:0 0 .46em}
.cl-hero h1 .w{background:var(--g-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-hero h1 .ln{display:block;overflow:hidden}
.cl-hero h1 .ln>b{display:block;font-weight:800;transform:translateY(105%)}
.reveal-on .cl-hero h1 .ln>b{animation:up 1s cubic-bezier(.16,1,.3,1) forwards}
.reveal-on .cl-hero h1 .ln:nth-child(2)>b{animation-delay:.09s}
.reveal-on .cl-hero h1 .ln:nth-child(3)>b{animation-delay:.18s}
.cl-hero-sub{max-width:54ch;color:rgba(255,255,255,.92);font-size:clamp(1.04rem,1.4vw,1.28rem);line-height:1.55;margin:0 0 30px}
.cl-hero-act{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:34px}
.cl-hero-act .btn-glass{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.36);color:#fff;backdrop-filter:blur(6px);border-radius:11px}
.cl-hero-act .btn-glass::before{background:#fff}
.cl-hero-act .btn-glass:hover{color:var(--ink)}
.cl-grades{display:flex;flex-wrap:wrap;gap:8px}
.cl-grades i{font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#fff;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.cl-grades i:nth-child(3n+1){background:linear-gradient(120deg,rgba(31,111,208,.5),rgba(22,190,232,.5));border-color:transparent}
.cl-grades i:nth-child(3n+2){background:linear-gradient(120deg,rgba(251,182,20,.42),rgba(242,103,12,.42));border-color:transparent}

/* overlapping stat ribbon */
.cl-ribbon{position:relative;z-index:5;margin-top:-46px}
.cl-ribbon .full{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.cl-ribbon{margin-top:-30px}.cl-ribbon .full{grid-template-columns:1fr 1fr}}
.cl-stat{background:#fff;border-radius:16px;padding:22px 22px;box-shadow:0 18px 44px rgba(11,40,80,.14);position:relative;overflow:hidden}
.cl-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.cl-stat:nth-child(1)::before{background:var(--g-main)}
.cl-stat:nth-child(2)::before{background:var(--g-warm)}
.cl-stat:nth-child(3)::before{background:linear-gradient(180deg,#16BEE8,#1F6FD0)}
.cl-stat:nth-child(4)::before{background:linear-gradient(180deg,#FBB614,#EE3A20)}
.cl-stat b{display:block;font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.cl-stat small{display:block;margin-top:7px;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}

/* ---- solution cards (colour-themed) ----------------------------------- */
.cl-sol{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1040px){.cl-sol{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cl-sol{grid-template-columns:1fr}}
.cl-scard{background:#fff;border-radius:18px;padding:26px 24px 24px;position:relative;overflow:hidden;transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s;display:flex;flex-direction:column}
.cl-scard::before{content:"";position:absolute;top:0;left:0;right:0;height:5px}
.cl-scard.c1::before{background:var(--g-main)} .cl-scard.c2::before{background:var(--g-warm)}
.cl-scard.c3::before{background:linear-gradient(120deg,#16BEE8,#1F6FD0)} .cl-scard.c4::before{background:linear-gradient(120deg,#FBB614,#EE3A20)}
.cl-scard:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(11,40,80,.14)}
.cl-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;color:#fff}
.cl-scard.c1 .cl-ic{background:var(--g-main)} .cl-scard.c2 .cl-ic{background:var(--g-warm)}
.cl-scard.c3 .cl-ic{background:linear-gradient(120deg,#16BEE8,#1F6FD0)} .cl-scard.c4 .cl-ic{background:linear-gradient(120deg,#FBB614,#EE3A20)}
.cl-ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.9}
.cl-scard h3{font-size:1.24rem;margin:0 0 9px;letter-spacing:-.02em}
.cl-scard p{font-size:.93rem;margin:0 0 16px;color:var(--body)}
.cl-scard .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.cl-scard.c2 .go,.cl-scard.c4 .go{color:var(--flame)}
.cl-scard .go span{transition:transform .3s}.cl-scard:hover .go span{transform:translateX(5px)}

/* ---- full gradient positioning panel ---------------------------------- */
.cl-panel-wrap{padding-block:clamp(30px,4vw,60px)}
.cl-panel{position:relative;overflow:hidden;border-radius:26px;background:var(--g-rich);color:#fff;padding:clamp(38px,5vw,72px);display:grid;grid-template-columns:1.3fr .7fr;gap:34px;align-items:center}
@media(max-width:820px){.cl-panel{grid-template-columns:1fr;text-align:left}}
.cl-panel::before{content:"";position:absolute;inset:0;background:
  radial-gradient(40% 120% at 92% 0%,rgba(251,182,20,.34),transparent 60%),
  radial-gradient(40% 120% at 0% 100%,rgba(238,58,32,.28),transparent 55%)}
.cl-panel::after{content:"";position:absolute;right:-40px;bottom:-40px;width:260px;height:260px;border:2px solid rgba(255,255,255,.16);border-radius:50%}
.cl-panel>*{position:relative;z-index:2}
.cl-panel h2{color:#fff;font-size:clamp(1.7rem,3.4vw,3rem);letter-spacing:-.03em;margin:0 0 12px;line-height:1.08}
.cl-panel h2 em{font-style:normal;background:var(--g-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-panel p{color:rgba(255,255,255,.9);margin:0;max-width:52ch}
.cl-panel .btn{background:#fff;color:var(--blue);border-color:#fff}
.cl-panel .btn::before{background:var(--ink)}
.cl-panel .btn:hover{color:#fff}

/* ---- capability with colour badges ------------------------------------ */
.cl-cap .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,66px);align-items:center}
@media(max-width:960px){.cl-cap .wrap{grid-template-columns:1fr}}
.cl-cap-img{border-radius:20px;overflow:hidden;min-height:clamp(340px,38vw,500px);position:relative;box-shadow:0 24px 60px rgba(11,40,80,.16)}
.cl-cap-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-steps{display:grid;gap:14px;margin:24px 0 30px}
.cl-step{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 6px 20px rgba(11,40,80,.06)}
.cl-step .n{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem;flex:none}
.cl-step:nth-child(1) .n{background:var(--g-main)} .cl-step:nth-child(2) .n{background:var(--g-warm)}
.cl-step:nth-child(3) .n{background:linear-gradient(120deg,#16BEE8,#1F6FD0)} .cl-step:nth-child(4) .n{background:linear-gradient(120deg,#FBB614,#EE3A20)}
.cl-step b{display:block;color:var(--ink);font-size:1.02rem}
.cl-step span{font-size:.9rem;color:var(--body)}

/* ---- gradient numbers band -------------------------------------------- */
.cl-nums{background:var(--g-rich);position:relative;overflow:hidden;color:#fff}
.cl-nums::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 130% at 85% 0%,rgba(251,182,20,.26),transparent 58%)}
.cl-nums .wrap{position:relative;z-index:2}
.cl-nums .sechd h2,.cl-nums .tag{color:#fff}
.cl-nums .tag::before{background:var(--g-warm)}
.cl-numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media(max-width:760px){.cl-numgrid{grid-template-columns:1fr 1fr}}
.cl-num{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:26px 22px;backdrop-filter:blur(4px)}
.cl-num b{display:block;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.cl-num b .u{background:var(--g-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-num small{display:block;margin-top:9px;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.82)}

/* ---- grade badges ------------------------------------------------------ */
.cl-grid-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.cl-gcard{background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(11,40,80,.06);transition:transform .28s}
.cl-gcard:hover{transform:translateY(-4px)}
.cl-gbadge{display:inline-block;font-weight:800;font-size:.9rem;letter-spacing:.02em;color:#fff;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.cl-gcard:nth-child(4n+1) .cl-gbadge{background:var(--g-main)} .cl-gcard:nth-child(4n+2) .cl-gbadge{background:var(--g-warm)}
.cl-gcard:nth-child(4n+3) .cl-gbadge{background:linear-gradient(120deg,#16BEE8,#1F6FD0)} .cl-gcard:nth-child(4n) .cl-gbadge{background:linear-gradient(120deg,#FBB614,#EE3A20)}
.cl-gcard .st{font-size:1.15rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cl-gcard .ap{font-size:.85rem;color:var(--body);margin-top:4px}

/* ---- rounded console/map/cards on homepage ---------------------------- */
.cl .console,.cl .mapwrap,.cl .tile,.cl .card{border-radius:18px}
.cl .tile .th img{border-radius:0}
.cl .gpick button{border-radius:9px}
.cl .console{box-shadow:0 18px 44px rgba(11,40,80,.1);border-color:#E4EDF4}

/* ---- lively curing badges --------------------------------------------- */
.cl-cure{display:grid;gap:14px;margin-top:8px}
.cl-cure div{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(242,103,12,.08)}
.cl-cure .n{width:40px;height:40px;border-radius:12px;background:var(--g-warm);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.cl-cure b{display:block;color:var(--ink)} .cl-cure span{font-size:.9rem;color:var(--body)}

.cl-quote{background:#fff;border-radius:20px;padding:30px;box-shadow:0 16px 44px rgba(11,40,80,.1);position:relative;overflow:hidden}
.cl-quote::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:var(--g-warm)}
.cl-quote p{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.01em;margin:0 0 16px}
.cl-quote cite{font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* CMS page prose */
.prose{font-size:1.02rem;line-height:1.7;color:var(--body)}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:1.6em 0 .5em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.15rem,1.8vw,1.4rem);margin:1.5em 0 .4em;color:var(--ink)}
.prose p{margin:0 0 1.1em;max-width:70ch}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.3em;max-width:70ch}
.prose li{margin-bottom:.6em;padding-left:.3em}
.prose li::marker{color:var(--flame);font-weight:700}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink);font-weight:700}
.prose img{border-radius:12px;margin:1.5em 0}

/* hero background video */
.cl-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
@media (prefers-reduced-motion:reduce){
  .cl-hero-video{display:none}
  .cl-hero-img{background:#07223f url(../img/hero-poster.webp) center/cover no-repeat}
}

/* ============================================================================
   HOMEPAGE v3 — clean video hero + big-company header refinements
   ========================================================================== */

/* clean video hero — no overlay, video shown clearly */
.cl-hero{min-height:0;height:clamp(440px,62vh,760px);background:#07223f}
.cl-hero .cl-hero-img::after{display:none}      /* remove the blue wash */
.cl-hero .cl-hero-img::before{display:none}      /* remove the warm glow */
.cl-hero-video{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.cl-hero{height:clamp(300px,52vh,460px)}}

/* stat ribbon sits cleanly under the video, not overlapping text */
.cl-ribbon{margin-top:-40px}
@media(max-width:760px){.cl-ribbon{margin-top:-24px}}

/* ---- big-company header ------------------------------------------------ */
.topline{background:linear-gradient(90deg,#0B1116,#12212f);font-size:.75rem}
.topline .full{height:42px}
.topline .live{color:var(--cyan)}
header.site .full{height:clamp(74px,7vw,92px)}
.logo img{height:clamp(38px,4.4vw,52px)}
.nav{gap:clamp(14px,1.7vw,30px)}
.nav a.top{font-size:.88rem;font-weight:600;padding:14px 0}
.nav a.top::after{height:2px;background:var(--g-warm)}
.hd-phone{padding-right:18px;margin-right:4px;border-right:1px solid var(--line);font-size:.92rem}
.hd-phone small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
header.site .hd-cta .btn-hot{border-radius:11px;padding:13px 22px;box-shadow:0 8px 20px rgba(242,103,12,.26)}
header.site.solid{box-shadow:0 8px 30px rgba(11,40,80,.09)}

/* header phone: icon + stacked label/number */
.hd-phone{display:flex;align-items:center;gap:10px}
.hd-phone svg{width:30px;height:30px;fill:none;stroke:var(--flame);stroke-width:1.6;background:var(--t-flame);border-radius:9px;padding:6px}
.hd-phone span{display:flex;flex-direction:column;line-height:1.15;font-weight:700;color:var(--ink)}

/* ============================================================================
   HOMEPAGE v4 — CLEAN CORPORATE (UltraTech/ACC style). Scoped .co-  DM Sans.
   Restraint: white space, structured grids, hairline rules, one blue + one
   amber accent used sparingly, strong type, real photography. Minimal gradient.
   ========================================================================== */
:root{
  --co-blue:#0E4C92; --co-blue2:#1F6FD0; --co-amber:#F2670C;
  --co-ink:#12181D; --co-body:#4A555E; --co-mute:#8793A8; --co-line:#E4E9EE;
  --co-paper:#F6F8FA; --co-paper2:#EFF3F6;
}
.co{--r:4px;color:var(--co-body)}
.co section{padding-block:clamp(64px,8vw,120px)}
.co .wrap{max-width:1400px}
.co .full{padding-inline:clamp(20px,4.4vw,64px)}
.co h2{color:var(--co-ink);font-weight:700;letter-spacing:-.025em;line-height:1.1;font-size:clamp(1.85rem,3.6vw,3rem)}
.co h3{color:var(--co-ink);font-weight:700;letter-spacing:-.015em}
.co .lead{font-size:clamp(1.05rem,1.4vw,1.24rem);line-height:1.6;color:#3B4650}
.co .ey{display:inline-flex;align-items:center;gap:11px;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--co-blue2);margin-bottom:20px}
.co .ey::before{content:"";width:28px;height:2px;background:var(--co-amber)}
.co .co-hd{max-width:64ch;margin-bottom:clamp(34px,4vw,56px)}
.co .co-hd.center{margin-inline:auto;text-align:center}
.co .btn{border-radius:3px;font-weight:600}
.co .btn-solid{background:var(--co-blue);color:#fff;border-color:var(--co-blue)}
.co .btn-solid::before{background:var(--co-amber)}
.co .btn-solid:hover{color:#fff;border-color:var(--co-amber)}
.co .btn-amber{background:var(--co-amber);color:#fff;border-color:var(--co-amber)}
.co .btn-amber::before{background:var(--co-ink)}
.co .btn-out{background:transparent;border-color:var(--co-line);color:var(--co-ink)}
.co .btn-out::before{background:var(--co-ink)}
.co .btn-out:hover{color:#fff;border-color:var(--co-ink)}

/* clean video hero, no text; a thin accent strip below */
.co-hero{position:relative;height:clamp(460px,64vh,780px);overflow:hidden;background:#0a1a2b}
.co-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co-accent{height:5px;background:linear-gradient(90deg,var(--co-blue) 0%,var(--co-blue2) 50%,var(--co-amber) 100%)}

/* stat strip — clean, bordered, corporate */
.co-stats{background:#fff;border-bottom:1px solid var(--co-line)}
.co-stats .full{display:grid;grid-template-columns:repeat(4,1fr)}
.co-stats div{padding:clamp(28px,3.4vw,46px) clamp(18px,2vw,34px);border-right:1px solid var(--co-line)}
.co-stats div:last-child{border-right:0}
.co-stats b{display:block;font-size:clamp(2rem,3.6vw,3.1rem);font-weight:700;letter-spacing:-.04em;color:var(--co-ink);line-height:1}
.co-stats b em{font-style:normal;color:var(--co-amber)}
.co-stats small{display:block;margin-top:9px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--co-mute)}
@media(max-width:760px){.co-stats .full{grid-template-columns:1fr 1fr}.co-stats div:nth-child(2){border-right:0}.co-stats div:nth-child(-n+2){border-bottom:1px solid var(--co-line)}}

/* intro: two column, editorial */
.co-intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
@media(max-width:900px){.co-intro .wrap{grid-template-columns:1fr;gap:30px}}
.co-intro-img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r)}
.co-intro-img img{width:100%;height:100%;object-fit:cover}
.co-intro-img .badge{position:absolute;left:0;bottom:0;background:var(--co-blue);color:#fff;padding:18px 24px;max-width:70%}
.co-intro-img .badge b{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.co-intro-img .badge small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.co-intro ul.ticks{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:12px}
.co-intro ul.ticks li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.98rem}
.co-intro ul.ticks svg{width:20px;height:20px;fill:none;stroke:var(--co-amber);stroke-width:2.4;margin-top:2px}

/* product grid — clean cards, image top, hairline */
.co-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--co-line);border:1px solid var(--co-line)}
@media(max-width:900px){.co-prods{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.co-prods{grid-template-columns:1fr}}
.co-prod{background:#fff;display:flex;flex-direction:column;transition:box-shadow .3s}
.co-prod:hover{box-shadow:0 14px 34px rgba(14,76,146,.1);z-index:2}
.co-prod .im{aspect-ratio:16/10;overflow:hidden;background:var(--co-paper2)}
.co-prod .im img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.co-prod:hover .im img{transform:scale(1.05)}
.co-prod .bd{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.co-prod h3{font-size:1.2rem;margin:0 0 9px}
.co-prod p{font-size:.93rem;margin:0 0 18px;color:var(--co-body)}
.co-prod .go{margin-top:auto;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--co-blue2);display:inline-flex;gap:8px;align-items:center}
.co-prod .go span{transition:transform .3s}.co-prod:hover .go span{transform:translateX(5px)}

/* capabilities: numbered, restrained */
.co-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--co-line);border:1px solid var(--co-line)}
@media(max-width:900px){.co-caps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.co-caps{grid-template-columns:1fr}}
.co-cap{background:#fff;padding:clamp(26px,2.8vw,38px)}
.co-cap .n{font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--co-amber);margin-bottom:16px;display:block}
.co-cap h3{font-size:1.14rem;margin:0 0 10px}
.co-cap p{font-size:.92rem;margin:0;color:var(--co-body)}

/* dark quality band */
.co-band{background:var(--co-ink);color:#AEB9C2;position:relative}
.co-band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:center}
@media(max-width:900px){.co-band .wrap{grid-template-columns:1fr}}
.co-band h2{color:#fff}
.co-band .ey{color:#5AA9F0}
.co-band-img{aspect-ratio:5/4;overflow:hidden;border-radius:var(--r)}
.co-band-img img{width:100%;height:100%;object-fit:cover}
.co-band ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.co-band ul li{background:var(--co-ink);padding:18px 20px}
.co-band ul b{color:#fff;display:block;font-size:1.02rem;margin-bottom:3px}
.co-band ul span{font-size:.9rem}

/* grades table clean */
.co-tbl{width:100%;border-collapse:collapse;background:#fff;font-size:.96rem}
.co-tbl th,.co-tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--co-line)}
.co-tbl th{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--co-mute);background:var(--co-paper)}
.co-tbl td:first-child{font-weight:700;color:var(--co-blue);font-size:1.05rem}
.co-tbl tbody tr:hover{background:var(--co-paper)}
.co-tblwrap{border:1px solid var(--co-line);border-radius:var(--r);overflow:hidden;overflow-x:auto}

/* coverage split */
.co-cov .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:center}
@media(max-width:900px){.co-cov .wrap{grid-template-columns:1fr}}
.co-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.co-chips i{font-style:normal;font-size:.8rem;font-weight:600;padding:7px 13px;border:1px solid var(--co-line);border-radius:3px;color:var(--co-body);background:#fff}

/* CTA strip */
.co-cta{background:var(--co-blue);color:#fff;position:relative;overflow:hidden}
.co-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border:40px solid rgba(255,255,255,.06);border-radius:50%}
.co-cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;position:relative;z-index:2}
.co-cta h2{color:#fff}
.co-cta p{color:rgba(255,255,255,.85);margin:6px 0 0}
.co-cta .btn-amber{border-color:var(--co-amber)}
.co-cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.co-cta .btn-ghost::before{background:#fff}
.co-cta .btn-ghost:hover{color:var(--co-blue)}

/* ============================================================================
   HOMEPAGE v5 — DARK PREMIUM EDITORIAL (RSY Korea18 direction). Scoped .rk-
   Charcoal ground, video hero with corner labels, marquee, oversized stats
   with italic accents, horizontal-scroll industries, refined product grid.
   DM Sans throughout.
   ========================================================================== */
:root{
  /* light theme (converted from dark editorial) */
  --rk-bg:#FFFFFF; --rk-bg2:#F5F7F9; --rk-card:#FFFFFF; --rk-line:#DFE5EA;
  --rk-ink:#0B1116; --rk-body:#48555F; --rk-mute:#77848E;
  --rk-accent:#F2670C; --rk-accent2:#16BEE8;
}
.rk{background:var(--rk-bg);color:var(--rk-body);--r:6px}
.rk section{padding-block:clamp(70px,9vw,140px);position:relative}
.rk .wrap{max-width:1400px}
.rk .full{padding-inline:clamp(20px,4.6vw,70px)}
.rk h2{color:var(--rk-ink);font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2.1rem,5vw,4.2rem)}
.rk h2 em,.rk .it{font-style:italic;font-weight:500;color:var(--rk-accent)}
.rk h3{color:var(--rk-ink);font-weight:600;letter-spacing:-.01em}
.rk p{color:var(--rk-body)}
.rk .kicker{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--rk-mute);margin-bottom:26px}
.rk .kicker::before{content:"";width:32px;height:1px;background:var(--rk-accent)}
.rk .btn{border-radius:3px}
.rk .btn-accent{background:var(--rk-accent);color:#fff;border-color:var(--rk-accent)}
.rk .btn-accent::before{background:#fff}
.rk .btn-accent:hover{color:var(--rk-accent)}
.rk .btn-wire{background:transparent;border-color:var(--rk-line);color:var(--rk-ink)}
.rk .btn-wire::before{background:var(--rk-ink)}
.rk .btn-wire:hover{color:var(--rk-bg)}

/* ---- hero: full-bleed video with corner labels ------------------------ */
.rk-hero{height:100vh;min-height:620px;max-height:960px;position:relative;overflow:hidden;background:#05080a}
.rk-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66}
.rk-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,15,18,.55) 0%,rgba(12,15,18,.15) 40%,rgba(12,15,18,.85) 100%)}
.rk-hero-grid{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(90px,11vw,150px) clamp(20px,4.6vw,70px) clamp(40px,5vw,70px)}
.rk-hero-top{max-width:1400px;margin-inline:auto;width:100%}
.rk-hero-name{font-size:clamp(.72rem,1vw,.82rem);font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.rk-hero-labels{max-width:1400px;margin-inline:auto;width:100%;display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.rk-hero-labels .lab small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:7px}
.rk-hero-labels .lab b{display:block;color:#fff;font-size:clamp(1rem,1.5vw,1.35rem);font-weight:600;letter-spacing:-.01em}
.rk-hero-labels .lab b em{font-style:italic;color:var(--rk-accent);font-weight:500}
.rk-hero-labels .scrolln{justify-self:end;text-align:right;color:rgba(255,255,255,.6);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
@media(max-width:760px){.rk-hero-labels{grid-template-columns:1fr 1fr;gap:20px}.rk-hero-labels .scrolln{display:none}}

/* ---- marquee ticker --------------------------------------------------- */
.rk-marq{background:var(--rk-accent);overflow:hidden;white-space:nowrap;padding:15px 0;border-block:1px solid rgba(0,0,0,.1)}
.rk-marq .run{display:inline-block;animation:rkscroll 34s linear infinite;font-weight:600;color:#fff;font-size:.94rem;letter-spacing:.02em}
.rk-marq .run span{margin:0 6px;opacity:.7}
@keyframes rkscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rk-marq .run{animation:none}}

/* ---- oversized stats -------------------------------------------------- */
.rk-scale .wrap{position:relative;z-index:2}
.rk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rk-line);border:1px solid var(--rk-line);margin-top:clamp(34px,4vw,58px)}
@media(max-width:820px){.rk-stats{grid-template-columns:1fr 1fr}}
.rk-stat{background:var(--rk-bg);padding:clamp(30px,3.4vw,52px) clamp(22px,2.4vw,38px)}
.rk-stat b{display:block;font-size:clamp(3rem,7vw,6rem);font-weight:700;letter-spacing:-.05em;color:var(--rk-ink);line-height:.9}
.rk-stat b em{font-style:normal;color:var(--rk-accent)}
.rk-stat small{display:block;margin-top:18px;font-size:.9rem;line-height:1.5;color:var(--rk-body);max-width:26ch}

/* ---- industries horizontal scroll ------------------------------------- */
.rk-ind{background:var(--rk-bg2);border-block:1px solid var(--rk-line)}
.rk-ind-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,26vw,360px);gap:20px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rk-ind-scroll::-webkit-scrollbar{height:3px}.rk-ind-scroll::-webkit-scrollbar-thumb{background:var(--rk-line)}
.rk-indcard{position:relative;scroll-snap-align:start;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--rk-card);isolation:isolate}
.rk-indcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .4s}
.rk-indcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,15,18,.1),rgba(12,15,18,.92));z-index:1}
.rk-indcard:hover img{transform:scale(1.06);opacity:.75}
.rk-indcard .in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.rk-indcard .no{position:absolute;top:22px;left:26px;z-index:2;font-size:.8rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.6)}
.rk-indcard h3{color:#fff;font-size:1.3rem;margin:0 0 8px}
.rk-indcard p{font-size:.9rem;margin:0;color:rgba(255,255,255,.78)}
.rk-drag{margin-top:20px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rk-mute)}

/* ---- product series list ---------------------------------------------- */
.rk-prods{border-top:1px solid var(--rk-line)}
.rk-prod{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(18px,3vw,48px);align-items:center;
  padding:clamp(24px,3vw,42px) 0;border-bottom:1px solid var(--rk-line);transition:padding-left .35s,background .35s}
.rk-prod:hover{background:var(--rk-bg2);padding-left:18px}
.rk-prod .sr{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--rk-accent)}
.rk-prod h3{font-size:clamp(1.3rem,2.4vw,2rem);margin:0}
.rk-prod p{margin:0;max-width:46ch;font-size:.94rem}
.rk-prod .go{color:var(--rk-ink);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;display:inline-flex;gap:9px}
.rk-prod .go span{color:var(--rk-accent);transition:transform .3s}.rk-prod:hover .go span{transform:translateX(6px)}
@media(max-width:820px){.rk-prod{grid-template-columns:auto 1fr;gap:12px}.rk-prod p{grid-column:1/-1}.rk-prod .go{grid-column:1/-1}}

/* ---- why: 2-col numbered ---------------------------------------------- */
.rk-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rk-line);border:1px solid var(--rk-line);margin-top:clamp(34px,4vw,56px)}
@media(max-width:820px){.rk-why-grid{grid-template-columns:1fr}}
.rk-why{background:var(--rk-bg);padding:clamp(28px,3vw,44px)}
.rk-why .ic{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rk-line);border-radius:8px;margin-bottom:20px;color:var(--rk-accent);font-weight:700;font-size:.8rem;letter-spacing:.1em}
.rk-why h3{font-size:1.16rem;margin:0 0 10px}
.rk-why p{font-size:.93rem;margin:0}

/* ---- split feature (quality) ------------------------------------------ */
.rk-split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
@media(max-width:900px){.rk-split .wrap{grid-template-columns:1fr}}
.rk-split-img{aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;border:1px solid var(--rk-line)}
.rk-split-img img{width:100%;height:100%;object-fit:cover}
.rk-ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:1px;background:var(--rk-line);border:1px solid var(--rk-line)}
.rk-ticks li{background:var(--rk-bg);padding:18px 20px}
.rk-ticks b{color:var(--rk-ink);display:block;margin-bottom:3px}
.rk-ticks span{font-size:.9rem}

/* ---- grades table dark ------------------------------------------------ */
.rk-tblwrap{border:1px solid var(--rk-line);border-radius:var(--r);overflow:hidden;overflow-x:auto;margin-top:clamp(30px,4vw,50px)}
.rk-tbl{width:100%;border-collapse:collapse;font-size:.96rem;background:var(--rk-bg)}
.rk-tbl th,.rk-tbl td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--rk-line)}
.rk-tbl th{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rk-mute);background:var(--rk-bg2)}
.rk-tbl td{color:var(--rk-body)}
.rk-tbl td:first-child{color:var(--rk-accent);font-weight:700;font-size:1.05rem}
.rk-tbl tbody tr:hover{background:var(--rk-bg2)}

/* ---- coverage --------------------------------------------------------- */
.rk-cov .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:center}
@media(max-width:900px){.rk-cov .wrap{grid-template-columns:1fr}}
.rk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}
.rk-chips i{font-style:normal;font-size:.8rem;font-weight:600;padding:8px 14px;border:1px solid var(--rk-line);border-radius:3px;color:var(--rk-body)}
.rk-mapbox{border:1px solid var(--rk-line);border-radius:var(--r);background:var(--rk-bg2);padding:10px;position:relative}
.rk-mapbox .map-info{color:var(--rk-body)}

/* ---- CTA -------------------------------------------------------------- */
.rk-cta{background:var(--rk-bg2);border-top:1px solid var(--rk-line)}
.rk-cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}

/* ---- console tweaks for dark ------------------------------------------ */
.rk .console{background:var(--rk-card);border:1px solid var(--rk-line);border-radius:var(--r);color:var(--rk-body)}
.rk .console-hd b,.rk .console *{color:var(--rk-ink)}
.rk .console small{color:var(--rk-mute)}
.rk .gpick button{background:var(--rk-bg);border:1px solid var(--rk-line);color:var(--rk-body)}
.rk .gpick button.on{background:var(--rk-accent);color:#fff;border-color:var(--rk-accent)}
.rk .mixrow .bar{background:var(--rk-line)}
.rk .loader{background:var(--rk-bg)}

/* section heading block */
.rk-hd{max-width:66ch;margin-bottom:clamp(20px,2.4vw,36px)}
.rk-hd.center{margin-inline:auto;text-align:center}
.rk-hd p{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.6;margin:18px 0 0}

/* ============================================================================
   PREMIUM + INTERACTIVE LAYER for the dark theme (.rk). Gradient depth, glow,
   grain, aurora, spotlight cards, animated marquee/borders, cursor response.
   ========================================================================== */

/* layered gradient ground instead of flat charcoal */
.rk{background:
  radial-gradient(120% 80% at 80% -10%, rgba(242,103,12,.05), transparent 55%),
  radial-gradient(90% 70% at 0% 8%, rgba(22,190,232,.05), transparent 50%),
  linear-gradient(180deg,#FFFFFF 0%,#F5F7F9 40%,#FFFFFF 100%);
  background-attachment:fixed}
/* subtle film grain overlay for depth */
.rk::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.rk>*{position:relative;z-index:2}

/* ---- hero: aurora glow + gradient scrim + slow zoom -------------------- */
.rk-hero{background:#05080a}
.rk-hero video{animation:rkzoom 26s ease-in-out infinite alternate}
@keyframes rkzoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.rk-hero::after{background:
  radial-gradient(80% 60% at 50% 120%, rgba(242,103,12,.22), transparent 60%),
  linear-gradient(180deg,rgba(11,14,17,.62) 0%,rgba(11,14,17,.12) 38%,rgba(11,14,17,.92) 100%)}
.rk-hero-aurora{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:
    radial-gradient(30% 40% at 22% 30%, rgba(22,190,232,.5), transparent 60%),
    radial-gradient(28% 38% at 78% 62%, rgba(242,103,12,.45), transparent 60%);
  animation:rkaurora 16s ease-in-out infinite alternate;filter:blur(30px)}
@keyframes rkaurora{
  0%{transform:translate3d(-4%,-2%,0) scale(1)}
  100%{transform:translate3d(5%,3%,0) scale(1.15)}}
.rk-hero-name{background:linear-gradient(90deg,#fff,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-hero-scroll{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);width:22px;height:36px;border:1.5px solid rgba(255,255,255,.35);border-radius:12px;display:grid;justify-items:center;padding-top:7px}
.rk-hero-scroll::after{content:"";width:3px;height:8px;border-radius:2px;background:var(--rk-accent);animation:rkscrolldot 1.6s ease-in-out infinite}
@keyframes rkscrolldot{0%,100%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}}

/* gradient accents on headings */
.rk h2 em,.rk .it{background:linear-gradient(100deg,var(--rk-accent),#FBB614);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block;padding-right:.14em;margin-right:-.1em}
.rk .kicker::before{background:linear-gradient(90deg,var(--rk-accent),transparent)}

/* ---- marquee: gradient fill + edge fade ------------------------------- */
.rk-marq{background:linear-gradient(90deg,#F2670C,#FB8C1E 50%,#F2670C);position:relative}
.rk-marq::before,.rk-marq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.rk-marq::before{left:0;background:linear-gradient(90deg,#F2670C,transparent)}
.rk-marq::after{right:0;background:linear-gradient(270deg,#F2670C,transparent)}

/* ---- stat cards: spotlight + gradient border + count glow ------------- */
.rk-stat{position:relative;overflow:hidden;--mx:50%;--my:50%;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.rk-stat::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(180px circle at var(--mx) var(--my), rgba(242,103,12,.16), transparent 70%)}
.rk-stat:hover::before{opacity:1}
.rk-stat:hover{transform:translateY(-4px)}
.rk-stat b{background:linear-gradient(180deg,#0B1116,#48555F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-stat b em{-webkit-text-fill-color:var(--rk-accent)}

/* ---- industry cards: spotlight sheen + gradient underline ------------- */
.rk-indcard{--mx:50%;--my:50%}
.rk-indcard::before{content:"";position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(200px circle at var(--mx) var(--my), rgba(22,190,232,.22), transparent 65%)}
.rk-indcard:hover::before{opacity:1}
.rk-indcard .in::after{content:"";display:block;height:3px;width:0;margin-top:16px;border-radius:2px;
  background:linear-gradient(90deg,var(--rk-accent),#FBB614);transition:width .5s cubic-bezier(.65,0,.35,1)}
.rk-indcard:hover .in::after{width:56px}

/* ---- product rows: gradient wash on hover + moving edge --------------- */
.rk-prod{position:relative;overflow:hidden}
.rk-prod::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;transform:scaleY(0);transform-origin:top;
  background:linear-gradient(180deg,var(--rk-accent),#FBB614);transition:transform .4s}
.rk-prod:hover::before{transform:scaleY(1)}
.rk-prod:hover{background:linear-gradient(90deg,rgba(242,103,12,.06),transparent 70%)}
.rk-prod h3{transition:color .3s,transform .4s}
.rk-prod:hover h3{background:linear-gradient(90deg,#0B1116,var(--rk-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- why cards: gradient border reveal + spotlight -------------------- */
.rk-why{position:relative;overflow:hidden;--mx:50%;--my:50%}
.rk-why::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(242,103,12,.12), transparent 65%)}
.rk-why:hover::before{opacity:1}
.rk-why .ic{background:linear-gradient(135deg,rgba(242,103,12,.16),rgba(22,190,232,.1));border-color:transparent;color:var(--rk-accent)}
.rk-why:hover .ic{box-shadow:0 0 0 1px rgba(242,103,12,.4),0 8px 24px rgba(242,103,12,.15)}

/* ---- split feature glow ---------------------------------------------- */
.rk-split-img{position:relative}
.rk-split-img::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  background:linear-gradient(135deg,rgba(22,190,232,.12),transparent 40%,rgba(242,103,12,.14))}
.rk-split-img{box-shadow:0 24px 56px rgba(11,17,22,.12)}

/* ---- CTA: gradient panel + glow -------------------------------------- */
.rk-cta{background:
  radial-gradient(60% 120% at 100% 0%, rgba(242,103,12,.08), transparent 55%),
  radial-gradient(50% 120% at 0% 100%, rgba(22,190,232,.06), transparent 55%),
  linear-gradient(180deg,#F5F7F9,#EDF1F4);border-top:1px solid var(--rk-line)}
.rk-cta .btn-accent{box-shadow:0 10px 30px rgba(242,103,12,.32)}

/* buttons get a gradient */
.rk .btn-accent{background:linear-gradient(120deg,#F2670C,#FB8C1E);border:0}
.rk .btn-accent::before{background:#fff}

/* gradient accent strip helper */
.rk-accent-line{height:1px;background:linear-gradient(90deg,transparent,var(--rk-accent),transparent);opacity:.5}

/* map glow */
.rk-mapbox{background:
  radial-gradient(60% 80% at 70% 20%, rgba(242,103,12,.06), transparent 60%),var(--rk-bg2)}
.rk-mapbox #plantMap .node{filter:drop-shadow(0 0 6px rgba(242,103,12,.5))}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .rk-hero video,.rk-hero-aurora,.rk-hero-scroll::after{animation:none}
}

/* ---- distinctive scale section (asymmetric, not a 4-box grid) ---------- */
.rk-scale-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:900px){.rk-scale-grid{grid-template-columns:1fr;gap:40px}}

/* oversized lead stat under the intro copy */
.rk-hero-stat{display:flex;align-items:center;gap:24px;margin-top:36px;padding-top:34px;border-top:1px solid var(--rk-line)}
.rk-hero-stat b{font-size:clamp(4.4rem,9vw,7.5rem);font-weight:700;letter-spacing:-.06em;line-height:.8;
  background:linear-gradient(160deg,#0B1116 30%,#5A666F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.rk-hero-stat b em{font-style:normal;-webkit-text-fill-color:var(--rk-accent)}
.rk-hero-stat>span{font-size:1rem;line-height:1.5;color:var(--rk-body);font-weight:500}

/* right column: metric rows with animated gradient bars */
.rk-scale-side{display:grid;gap:1px;background:var(--rk-line);border:1px solid var(--rk-line);border-radius:var(--r);overflow:hidden}
.rk-metric{background:var(--rk-bg);padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);position:relative;overflow:hidden;--mx:50%;--my:50%}
.rk-metric::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(242,103,12,.12),transparent 65%)}
.rk-metric:hover::after{opacity:1}
.rk-metric-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.rk-metric-n{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.04em;color:var(--rk-ink);line-height:1}
.rk-metric-n em{font-style:normal;color:var(--rk-accent)}
.rk-metric-lbl{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rk-mute)}
.rk-metric-bar{height:4px;border-radius:3px;background:rgba(11,17,22,.08);overflow:hidden;margin-bottom:14px}
.rk-metric-bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--rk-accent),#FBB614);transition:width 1.3s cubic-bezier(.16,1,.3,1)}
.rk-metric[data-rv].in .rk-metric-bar i{width:var(--w)}
.rk-metric p{margin:0;font-size:.9rem;color:var(--rk-body)}

/* ---- full-bleed autoplay carousel (Who we supply) --------------------- */
.rk-supply{overflow:hidden}
.rk-carousel{position:relative;margin-top:clamp(30px,4vw,50px)}
.rk-car-viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rk-car-track{display:flex;gap:22px;padding:6px clamp(20px,4.6vw,70px);will-change:transform;list-style:none;margin:0}
.rk-car-track.anim{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.rk-car-track .rk-indcard{flex:0 0 clamp(300px,30vw,420px);aspect-ratio:4/5;margin:0}
/* hide any scrollbar entirely */
.rk-car-viewport::-webkit-scrollbar{display:none}
.rk-car-viewport{scrollbar-width:none;-ms-overflow-style:none}

.rk-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-size:1.15rem;
  background:rgba(18,23,27,.72);border:1px solid var(--rk-line);color:#fff;backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s,transform .25s}
.rk-car-btn:hover{background:var(--rk-accent);border-color:var(--rk-accent);transform:translateY(-50%) scale(1.06)}
.rk-car-btn.prev{left:clamp(12px,2vw,34px)}
.rk-car-btn.next{right:clamp(12px,2vw,34px)}
@media(max-width:640px){.rk-car-btn{width:44px;height:44px}}

.rk-car-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.rk-car-dots button{width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--rk-line);transition:width .3s,background .3s}
.rk-car-dots button.on{width:26px;border-radius:5px;background:linear-gradient(90deg,var(--rk-accent),#FBB614)}

/* ---- quality assurance — editorial, not text-left/photo-right --------- */
.rk-qa-head{max-width:80%;margin-bottom:clamp(34px,4.5vw,60px)}
.rk-qa-head h2{font-size:clamp(2.1rem,5.2vw,4.4rem)}
@media(max-width:700px){.rk-qa-head{max-width:100%}}

.rk-qa-body{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,4vw,64px);align-items:center;margin-bottom:clamp(30px,4vw,56px)}
@media(max-width:860px){.rk-qa-body{grid-template-columns:1fr;gap:34px}}

.rk-qa-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 26px 60px rgba(11,17,22,.13)}
.rk-qa-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.rk-qa-media:hover img{transform:scale(1.05)}
.rk-qa-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(22,190,232,.14),transparent 45%,rgba(242,103,12,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* floating stat card overlapping the image */
.rk-qa-float{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:16px;
  background:rgba(11,14,17,.72);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12);border-top-right-radius:14px;padding:20px 26px 20px 22px}
.rk-qa-float b{font-size:clamp(2.6rem,4.6vw,3.8rem);font-weight:700;letter-spacing:-.05em;line-height:.85;
  background:linear-gradient(160deg,#fff,#8b969e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-qa-float>span{font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.8);font-weight:500}

.rk-qa-lead{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.65;color:var(--rk-body);margin:0 0 26px}
.rk-qa-copy .btn{white-space:nowrap}

/* numbered assurance band — 3 across, gradient hairline separators */
.rk-qa-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:linear-gradient(90deg,var(--rk-line),var(--rk-line));
  border:1px solid var(--rk-line);border-radius:var(--r);overflow:hidden}
@media(max-width:760px){.rk-qa-band{grid-template-columns:1fr}}
.rk-qa-item{background:var(--rk-bg);padding:clamp(24px,2.8vw,36px);display:grid;grid-template-columns:auto 1fr;gap:18px;
  align-items:start;position:relative;overflow:hidden;--mx:50%;--my:50%;transition:background .3s}
.rk-qa-item::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(242,103,12,.1),transparent 65%)}
.rk-qa-item:hover::after{opacity:1}
.rk-qa-item:hover{background:var(--rk-bg2)}
.rk-qa-n{font-size:1.1rem;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(160deg,var(--rk-accent),#FBB614);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-qa-item b{display:block;color:var(--rk-ink);font-size:1.06rem;margin-bottom:6px}
.rk-qa-item span{font-size:.92rem;color:var(--rk-body);line-height:1.5}

/* ---- "our edge" — interactive accordion + image panel ----------------- */
.rk-edge-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:stretch}
@media(max-width:900px){.rk-edge-grid{grid-template-columns:1fr;gap:26px}}

.rk-edge-list{display:flex;flex-direction:column;border-top:1px solid var(--rk-line)}
.rk-edge-row{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;text-align:left;
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rk-line);cursor:pointer;
  padding:clamp(18px,2.2vw,26px) 6px;color:var(--rk-body);transition:padding-left .35s,background .35s}
.rk-edge-row:hover,.rk-edge-row.on{padding-left:20px;background:linear-gradient(90deg,rgba(242,103,12,.07),transparent 75%)}
.rk-edge-n{font-size:.82rem;font-weight:700;letter-spacing:.14em;color:var(--rk-mute);transition:color .3s}
.rk-edge-row.on .rk-edge-n{background:linear-gradient(160deg,var(--rk-accent),#FBB614);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-edge-txt b{display:block;font-size:clamp(1.1rem,1.7vw,1.5rem);color:var(--rk-ink);font-weight:600;letter-spacing:-.01em;transition:color .3s}
.rk-edge-row.on .rk-edge-txt b{background:linear-gradient(90deg,#0B1116,var(--rk-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-edge-desc{display:block;max-height:0;overflow:hidden;opacity:0;font-size:.94rem;line-height:1.55;color:var(--rk-body);
  transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s,margin-top .4s}
.rk-edge-row.on .rk-edge-desc{max-height:120px;opacity:1;margin-top:9px}
.rk-edge-ar{color:var(--rk-accent);font-size:1.1rem;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.rk-edge-row.on .rk-edge-ar{opacity:1;transform:translateX(0)}

.rk-edge-media{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;background:var(--rk-bg2);
  border:1px solid var(--rk-line);box-shadow:0 26px 60px rgba(11,17,22,.12)}
@media(max-width:900px){.rk-edge-media{min-height:280px;order:-1}}
.rk-edge-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rk-edge-media img.on{opacity:.9;transform:scale(1)}
.rk-edge-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(11,14,17,.25),transparent 45%,rgba(11,14,17,.65));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rk-edge-badge{position:absolute;left:22px;bottom:20px;z-index:2;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;
  letter-spacing:-.05em;color:#fff;line-height:1;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.rk-edge-badge span{background:linear-gradient(160deg,var(--rk-accent),#FBB614);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-edge-badge i{font-style:normal;font-size:1.1rem;font-weight:600;color:rgba(255,255,255,.75);letter-spacing:.05em}

/* ---- global fix: italic gradient-clipped text must not clip its edge --- */
/* italic letters lean past the box; background-clip:text then crops them.
   give any such element right padding + compensating negative margin. */
.rk h2 em, .rk .it,
.rk-hero-labels .lab b em,
.rk-metric-n em,
.rk-hero-stat b em,
.rk-qa-n,
.rk-edge-badge span,
.rk-edge-row.on .rk-edge-txt b,
.rk-edge-row.on .rk-edge-n{
  display:inline-block;
  padding-right:.12em;
  margin-right:-.08em;
}
/* the accent word specifically (e.g. "Kapsha", "scale", "performs") gets a
   touch more room since the terminal letters (a, e, s) slant most */
.rk h2 em{padding-right:.16em;margin-right:-.12em}

/* ============================================================================
   SITE-WIDE DARK PREMIUM THEME — applies to every page (inner pages inherit
   automatically). Restyles body, header, shared components (phero, sechd,
   cards, tiles, plants, tables, forms, accordion, ctaband) to match the
   homepage's dark editorial look. Scoped under body.dark.
   ========================================================================== */
body.dark{
  /* converted to light theme */
  --paper:#FFFFFF; --paper-2:#F5F7F9; --paper-3:#EDF1F4;
  --ink:#0B1116; --body:#48555F; --mute:#77848E;
  --line:#DFE5EA; --line-2:#C9D2D9;
  background:
    radial-gradient(120% 80% at 82% -8%, rgba(242,103,12,.05), transparent 55%),
    radial-gradient(90% 70% at 0% 6%, rgba(22,190,232,.05), transparent 50%),
    var(--paper);
  background-attachment:fixed;color:var(--body);
}
body.dark ::selection{background:rgba(242,103,12,.32);color:#fff}
body.dark ::-webkit-scrollbar-track{background:#F5F7F9}
body.dark ::-webkit-scrollbar-thumb{background:#C9D2D9}
body.dark ::-webkit-scrollbar-thumb:hover{background:var(--flame)}
body.dark strong{color:var(--ink)}
body.dark .lead{color:#48555F}
body.dark .tinted{background:var(--paper-2)}
body.dark .bordered{border-color:var(--line)}

/* film grain like the homepage */
body.dark::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.dark main,body.dark footer.site{position:relative;z-index:1}
body.dark header.site{z-index:900}

/* ---- header on dark --------------------------------------------------- */
body.dark .topline{background:linear-gradient(90deg,#0B1116,#12181D)}
body.dark header.site{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body.dark header.site.solid{background:rgba(255,255,255,.98);box-shadow:0 10px 40px rgba(11,17,22,.10)}
body.dark .nav a.top{color:#48555F}
body.dark .nav a.top:hover,body.dark .nav a.top.on{color:#0B1116}
/* dropdowns (.drop desktop, .sub mobile) */
body.dark .drop{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 30px 70px rgba(11,17,22,.14)}
body.dark .drop a{color:var(--body)}
body.dark .drop a:hover{background:rgba(242,103,12,.1);color:#0B1116}
body.dark .sub a{color:#48555F}
body.dark .hd-phone span{color:#0B1116}
body.dark .hd-phone small{color:var(--mute)}
body.dark .hd-phone svg{background:rgba(242,103,12,.16)}
body.dark .burger i{background:#0B1116}
body.dark .caret{border-color:#48555F}

/* ---- inner-page hero (phero) — premium dark ---------------------------- */
body.dark .phero{background:linear-gradient(180deg,#F5F7F9,#EDF1F4);border-bottom:1px solid var(--line);
  padding-block:clamp(64px,8vw,120px);overflow:hidden}
body.dark .phero::after{background:
  radial-gradient(45% 120% at 88% 0%, rgba(242,103,12,.14), transparent 60%),
  radial-gradient(40% 120% at 4% 100%, rgba(22,190,232,.1), transparent 58%)}
body.dark .phero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(30% 50% at 20% 30%,rgba(22,190,232,.4),transparent 60%),radial-gradient(28% 46% at 82% 60%,rgba(242,103,12,.34),transparent 60%);
  filter:blur(40px);animation:rkaurora 18s ease-in-out infinite alternate}
body.dark .phero h1{color:#0B1116;font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-.04em}
body.dark .phero h1 .grad-cool,body.dark .phero h1 .grad-hot{
  background:linear-gradient(100deg,var(--flame),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding-right:.14em;margin-right:-.1em}
body.dark .phero .lead{color:#48555F}
body.dark .crumb{color:var(--mute)}
body.dark .crumb a:hover{color:var(--flame)}
body.dark .tag{color:var(--mute)}
body.dark .tag::before{background:linear-gradient(90deg,var(--flame),transparent)}

/* ---- section headings ------------------------------------------------- */
body.dark .sechd h2,body.dark h1,body.dark h2,body.dark h3,body.dark h4{color:var(--ink)}
body.dark .grad-cool,body.dark .grad-hot{
  background:linear-gradient(100deg,var(--flame),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding-right:.14em;margin-right:-.1em}

/* ---- cards (grid) ----------------------------------------------------- */
body.dark .cards{background:var(--line);border-color:var(--line)}
body.dark .card{background:var(--paper);--mx:50%;--my:50%}
body.dark .card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(242,103,12,.1),transparent 65%)}
body.dark .card:hover{background:var(--paper-2)}
body.dark .card:hover::after{opacity:1}
body.dark .card .ix{color:var(--flame)}
body.dark .card h3{color:#0B1116}

/* ---- tiles (image cards) ---------------------------------------------- */
body.dark .tile{background:var(--paper-3);border-color:var(--line)}
body.dark .tile:hover{box-shadow:0 20px 46px rgba(11,17,22,.12);transform:translateY(-5px)}
body.dark .tile .th{background:#EDF1F4}
body.dark .tile .tb h3{color:#0B1116}
body.dark .tile .meta{color:var(--mute)}

/* ---- plant cards ------------------------------------------------------ */
body.dark .plants{background:transparent;border:0}
body.dark .plant{background:var(--rk-card,#FFFFFF);border:1px solid var(--rk-line,#DFE5EA);--mx:50%;--my:50%}
body.dark .plant::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;border-radius:14px;
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(242,103,12,.12),transparent 65%)}
body.dark .plant:hover{background:var(--rk-card,#FFFFFF);border-color:rgba(242,103,12,.4)}
body.dark .plant:hover::after{opacity:1}
body.dark .plant .idx{color:rgba(11,17,22,.07)}
body.dark .plant h3{color:#0B1116}
body.dark .plant .addr{color:var(--rk-body,#48555F)}
body.dark .chips i{border-color:rgba(11,17,22,.14);background:rgba(11,17,22,.03);color:var(--rk-body,#48555F)}
body.dark .plant .call{color:var(--flame)}

/* ---- chips ------------------------------------------------------------ */
body.dark .chips i{border-color:var(--line);color:var(--body)}

/* ---- tables ----------------------------------------------------------- */
body.dark .tblwrap{border-color:var(--line)}
body.dark .tbl{background:var(--paper)}
body.dark .tbl th{background:var(--paper-2);color:var(--mute);border-color:var(--line)}
body.dark .tbl td{color:var(--body);border-color:var(--line)}
body.dark .tbl td:first-child{color:var(--flame)}
body.dark .tbl tbody tr:hover{background:var(--paper-2)}

/* ---- forms ------------------------------------------------------------ */
body.dark input,body.dark select,body.dark textarea{
  background:#FFFFFF;border-color:var(--line);color:var(--ink)}
body.dark input::placeholder,body.dark textarea::placeholder{color:var(--mute)}
body.dark input:focus,body.dark select:focus,body.dark textarea:focus{
  border-color:var(--flame);box-shadow:0 0 0 3px rgba(242,103,12,.15)}
body.dark label,body.dark .lbl{color:var(--body)}
body.dark .field span,body.dark form label>span{color:var(--mute)}
body.dark .alert.ok{background:rgba(22,190,232,.12);border-color:rgba(22,190,232,.45);color:#0B6E8C}
body.dark .alert.err{background:rgba(238,58,32,.10);border-color:rgba(238,58,32,.38);color:#B02411}

/* ---- accordion (FAQ) -------------------------------------------------- */
body.dark .acc{background:var(--paper);border-color:var(--line)}
body.dark .acc details{border-color:var(--line)}
body.dark .acc summary{color:#0B1116}
body.dark .acc summary:hover{background:var(--paper-2)}
body.dark .acc summary::after{border-color:var(--flame)}
body.dark .acc .ab{color:var(--body)}

/* ---- buttons on dark -------------------------------------------------- */
body.dark .btn-line{border-color:var(--line-2);color:var(--ink)}
body.dark .btn-line::before{background:var(--ink)}
body.dark .btn-line:hover{color:var(--paper)}
body.dark .btn-hot{background:linear-gradient(120deg,#F2670C,#FB8C1E);border:0;box-shadow:0 8px 24px rgba(242,103,12,.28)}
body.dark .btn-cool{background:linear-gradient(120deg,var(--blue),var(--cyan));border:0}

/* ---- ctaband ---------------------------------------------------------- */
body.dark .ctaband,body.dark section.tinted.bordered.tight{background:
  radial-gradient(60% 120% at 100% 0%, rgba(242,103,12,.10), transparent 55%),
  radial-gradient(50% 120% at 0% 100%, rgba(22,190,232,.07), transparent 55%),
  linear-gradient(180deg,#F5F7F9,#EDF1F4);border-color:var(--line)}

/* ---- map / console on dark (already themed in .rk, mirror for inner) --- */
body.dark .mapwrap{background:var(--paper-2);border:1px solid var(--line);border-radius:6px}
body.dark .map-info{color:var(--body)}
body.dark .console{background:var(--paper-3);border:1px solid var(--line)}
body.dark .console *{color:var(--ink)}
body.dark .console small{color:var(--mute)}
body.dark .gpick button{background:var(--paper);border:1px solid var(--line);color:var(--body)}
body.dark .gpick button.on{background:var(--flame);color:#fff;border-color:var(--flame)}
body.dark .loader{background:#FFFFFF}

/* calculators + calc cards on dark */
body.dark .calc,body.dark .calccard{background:var(--paper);border-color:var(--line)}
body.dark .calc h3,body.dark .calccard h3{color:#0B1116}
body.dark .calc-out,body.dark .out{background:var(--paper-2);border-color:var(--line)}

/* ---- premium inner-page hero (works site-wide on dark) ---------------- */
body.dark .kicker{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:24px}
body.dark .kicker::before{content:"";width:32px;height:1px;background:linear-gradient(90deg,var(--flame),transparent)}
body.dark .phero{position:relative}
body.dark .phero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(28% 50% at 18% 34%,rgba(22,190,232,.4),transparent 60%),
            radial-gradient(26% 46% at 84% 62%,rgba(242,103,12,.36),transparent 60%);
  filter:blur(42px);animation:rkaurora 18s ease-in-out infinite alternate}
body.dark .phero .wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){body.dark .phero-glow{animation:none}}

/* ---- CMS page prose on dark ------------------------------------------- */
body.dark .prose{color:#48555F}
body.dark .prose h2,body.dark .prose h3{color:#0B1116}
body.dark .prose strong{color:#0B1116}
body.dark .prose a{color:var(--flame)}
body.dark .prose li::marker{color:var(--flame)}
body.dark .prose blockquote{border-color:var(--flame);color:#0B1116}

/* section alternating bg helpers used across inner pages */
body.dark section.tinted{background:var(--paper-2)}

/* "two column" inner layouts and asides */
body.dark aside .card,body.dark .two aside{color:var(--body)}
body.dark .note{color:var(--mute)}
body.dark .lbl{color:var(--mute)}

/* galtabs (project/gallery filters) on dark */
body.dark .galtabs button{background:var(--paper);border:1px solid var(--line);color:var(--body)}
body.dark .galtabs button.on,body.dark .galtabs button:hover{background:var(--flame);color:#fff;border-color:var(--flame)}

/* gallery images border */
body.dark .gal a{border:1px solid var(--line)}

/* ============================================================================
   DARK THEME — fix components that used var(--ink) as a BACKGROUND.
   On body.dark, --ink becomes near-white (correct for text) but wrong as a
   background. Pin these to an explicit dark surface.
   ========================================================================== */
body.dark .topline{background:linear-gradient(90deg,#0B1116,#12181D);color:#C7D0D7}
body.dark .band{background:
  radial-gradient(60% 130% at 100% 0%, rgba(242,103,12,.16), transparent 55%),
  radial-gradient(50% 130% at 0% 100%, rgba(22,190,232,.1), transparent 55%),
  linear-gradient(180deg,#11171C,#0C1013);color:#AEBAC3;border-top:1px solid var(--line)}
body.dark .band::before{background:linear-gradient(90deg,var(--flame),var(--gold))}
body.dark .band h2{color:#fff}
body.dark footer.site{background:#0B1116;border-top:1px solid var(--line);color:#C7D0D7}
body.dark footer.site h4{color:#fff}
body.dark footer.site a{color:#9BA9B4}
body.dark footer.site a:hover{color:var(--flame)}
body.dark footer.site .ft-bot,body.dark footer.site .ft-seo{border-color:var(--line)}
body.dark .galtabs button.on{background:var(--flame);border-color:var(--flame);color:#fff}
/* footer light logo already suits dark; ensure it isn't dimmed */
body.dark footer.site .fl{opacity:1}

/* ============================================================================
   CALCULATOR PAGES (individual) + HUB — dark premium
   ========================================================================== */
/* individual page: calculator + guidance sidebar */
.rk-calc-wrap{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(26px,3vw,48px);align-items:start}
@media(max-width:900px){.rk-calc-wrap{grid-template-columns:1fr}}
.rk-calc .calc{background:var(--rk-card);border:1px solid var(--rk-line);border-radius:var(--r);padding:clamp(24px,3vw,40px);position:relative;overflow:hidden}
.rk-calc .calc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--rk-accent),#FBB614)}
.rk-calc-hd{display:flex;align-items:center;gap:18px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--rk-line)}
.rk-calc-ic{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(135deg,rgba(242,103,12,.18),rgba(22,190,232,.1));color:var(--rk-accent)}
.rk-calc-ic svg{width:28px;height:28px}
.rk-calc-hd h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:0;color:var(--rk-ink)}
.rk-calc-hd .note{margin:4px 0 0;color:var(--rk-body);font-size:.94rem}

/* inputs / outputs inside dark calc */
.rk-calc .cin{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.rk-calc .cin .fl{display:flex;flex-direction:column;gap:7px;font-size:.82rem;font-weight:600;color:var(--rk-mute);letter-spacing:.02em}
.rk-calc .cin .fl.w{grid-column:1/-1}
.rk-calc .cin input,.rk-calc .cin select{background:#FFFFFF;border:1px solid var(--rk-line);color:var(--rk-ink);
  border-radius:8px;padding:12px 14px;font-size:1rem;font-weight:600}
.rk-calc .cin input:focus,.rk-calc .cin select:focus{border-color:var(--rk-accent);box-shadow:0 0 0 3px rgba(242,103,12,.15);outline:none}
.rk-calc .cout{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--rk-line);
  border:1px solid var(--rk-line);border-radius:10px;overflow:hidden}
.rk-calc .cout>div{background:var(--rk-bg);padding:18px 16px;text-align:center}
.rk-calc .cout b{display:block;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(160deg,#0B1116,#5A666F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-calc .cout small{display:block;margin-top:8px;font-size:.72rem;color:var(--rk-mute);letter-spacing:.02em}
.rk-calc-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.rk-calc .trucks{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.rk-calc .trucks i{width:26px;height:16px;border-radius:3px;background:linear-gradient(135deg,var(--rk-accent),#FBB614);opacity:.9}

/* guidance sidebar */
.rk-calc-side{display:grid;gap:18px;position:sticky;top:100px}
@media(max-width:900px){.rk-calc-side{position:static}}
.rk-calc-guide{background:var(--rk-bg2);border:1px solid var(--rk-line);border-radius:var(--r);padding:26px}
.rk-calc-guide ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:14px}
.rk-calc-guide li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.92rem;line-height:1.5;color:var(--rk-body)}
.rk-calc-guide svg{width:18px;height:18px;fill:none;stroke:var(--rk-accent);stroke-width:2.6;margin-top:3px}
.rk-calc-help{background:linear-gradient(160deg,rgba(242,103,12,.12),rgba(22,190,232,.06));border:1px solid var(--rk-line);border-radius:var(--r);padding:26px}
.rk-calc-help b{color:var(--rk-ink);font-size:1.1rem;display:block;margin-bottom:8px}
.rk-calc-help p{font-size:.92rem;margin:0 0 16px}

/* calculator grid (hub + "other tools") */
.rk-calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rk-line);border:1px solid var(--rk-line);border-radius:var(--r);overflow:hidden}
.rk-calc-grid.big{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.rk-calc-grid,.rk-calc-grid.big{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rk-calc-grid,.rk-calc-grid.big{grid-template-columns:1fr}}
.rk-calc-card{background:var(--rk-bg);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:background .3s;--mx:50%;--my:50%}
.rk-calc-card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(220px circle at var(--mx) var(--my),rgba(242,103,12,.1),transparent 65%)}
.rk-calc-card:hover{background:var(--rk-bg2)}
.rk-calc-card:hover::after{opacity:1}
.rk-calc-card-n{font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--rk-mute)}
.rk-calc-card-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--rk-line);color:var(--rk-accent);margin-bottom:4px}
.rk-calc-card-ic svg{width:24px;height:24px}
.rk-calc-card b{color:var(--rk-ink);font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.rk-calc-card>span:not([class]){font-size:.9rem;color:var(--rk-body);line-height:1.5}
.rk-calc-card-go{margin-top:auto;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rk-accent);display:inline-flex;gap:8px;align-items:center}
.rk-calc-card-go span{transition:transform .3s}.rk-calc-card:hover .rk-calc-card-go span{transform:translateX(5px)}

/* facts block on hub */
.rk-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rk-line);border:1px solid var(--rk-line);border-radius:var(--r);overflow:hidden}
.rk-facts>div{background:var(--rk-bg);padding:clamp(22px,2.6vw,32px)}
.rk-facts b{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.04em;color:var(--rk-ink);line-height:1}
.rk-facts b em{font-style:normal;color:var(--rk-accent)}
.rk-facts span{display:block;margin-top:8px;font-size:.82rem;color:var(--rk-body)}

/* ============================================================================
   CMS COMPANY PAGES (page.php) — image-rich layout: hero w/ image, content
   with figure aside, gallery strip. Dark premium.
   ========================================================================== */
.rk-page-hero{padding-block:clamp(50px,6vw,96px);border-bottom:1px solid var(--rk-line);position:relative;overflow:hidden;
  background:linear-gradient(180deg,#F5F7F9,#EDF1F4)}
.rk-page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(26% 60% at 12% 30%,rgba(22,190,232,.32),transparent 60%),
            radial-gradient(24% 54% at 92% 68%,rgba(242,103,12,.3),transparent 60%);filter:blur(46px)}
.rk-page-hero .wrap{position:relative;z-index:2}
.rk-page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){.rk-page-hero-grid{grid-template-columns:1fr;gap:30px}}
.rk-page-hero h1{color:var(--rk-ink);font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.04em;margin:0 0 18px}
.rk-page-hero h1 .grad-cool,.rk-page-hero h1 .grad-hot,.rk-page-hero h1 span{
  background:linear-gradient(100deg,var(--rk-accent),#FBB614);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.08em}
.rk-page-hero .lead{color:var(--rk-body);font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.6;max-width:52ch}
.rk-page-hero-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.rk-page-hero-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--rk-line);
  box-shadow:0 26px 60px rgba(11,17,22,.13)}
.rk-page-hero-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.rk-page-hero-media:hover img{transform:scale(1.05)}
.rk-page-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(22,190,232,.12),transparent 45%,rgba(242,103,12,.16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rk-page-hero-stat{position:absolute;left:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:2px;
  background:rgba(11,14,17,.74);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12);border-top-right-radius:14px;padding:16px 22px}
.rk-page-hero-stat b{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(160deg,#fff,#8b969e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-page-hero-stat span{font-size:.78rem;color:rgba(255,255,255,.8);font-weight:500}
/* legal pages: centered narrow, no image */
.rk-page-hero.legal .rk-page-hero-grid{grid-template-columns:1fr;max-width:820px}

/* content + aside */
.rk-page-cols{display:grid;grid-template-columns:1fr 340px;gap:clamp(34px,4.5vw,72px);align-items:start}
@media(max-width:1000px){.rk-page-cols{grid-template-columns:1fr}}
.rk-page-body.legal .rk-page-cols{grid-template-columns:1fr;max-width:820px}
.rk-page-cols .prose{max-width:none}
/* images inside prose content get framed */
.rk-page-cols .prose img{border-radius:var(--r);border:1px solid var(--rk-line);margin:1.6em 0}
.rk-page-aside{position:sticky;top:100px;display:grid;gap:22px}
@media(max-width:1000px){.rk-page-aside{position:static}}
.rk-page-figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--rk-line);aspect-ratio:4/5;box-shadow:0 20px 46px rgba(11,17,22,.11)}
.rk-page-figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.rk-page-figure:hover img{transform:scale(1.06)}
.rk-page-card{background:linear-gradient(160deg,rgba(242,103,12,.12),rgba(22,190,232,.06));border:1px solid var(--rk-line);
  border-radius:var(--r);padding:26px}
.rk-page-card b{display:block;color:var(--rk-ink);font-size:1.15rem;margin-bottom:8px}
.rk-page-card p{font-size:.92rem;color:var(--rk-body);margin:0 0 16px}
.rk-page-mail{display:block;margin-top:12px;font-size:.86rem;color:var(--rk-accent);word-break:break-all}

/* gallery strip — mosaic */
.rk-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.rk-gal-grid{grid-template-columns:1fr 1fr}}
.rk-gal-item{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--rk-line);aspect-ratio:1;display:block}
.rk-gal-item.wide{grid-column:span 2;aspect-ratio:2}
@media(max-width:760px){.rk-gal-item.wide{grid-column:span 2;aspect-ratio:2}}
.rk-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .3s;opacity:.86}
.rk-gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,14,17,.5));pointer-events:none;opacity:0;transition:opacity .3s}
.rk-gal-item:hover img{transform:scale(1.08);opacity:1}
.rk-gal-item:hover::after{opacity:1}

/* ============================================================================
   GALLERY page — clean masonry-style photo grid (images only)
   ========================================================================== */
.rk-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(24px,3vw,40px)}
@media(max-width:1000px){.rk-gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.rk-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.rk-gallery{grid-template-columns:1fr}}
.rk-gallery-item{position:relative;display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--rk-line);
  aspect-ratio:1;background:var(--rk-bg2)}
.rk-gallery-item img{width:100%;height:100%;object-fit:cover;opacity:.9;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .3s}
.rk-gallery-item::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(180deg,transparent 45%,rgba(11,14,17,.75))}
.rk-gallery-item:hover img{transform:scale(1.07);opacity:1}
.rk-gallery-item:hover::after{opacity:1}
.rk-gallery-cap{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-size:.9rem;font-weight:600;
  letter-spacing:-.01em;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
  text-shadow:0 2px 12px rgba(0,0,0,.6);max-width:85%}
.rk-gallery-item:hover .rk-gallery-cap{opacity:1;transform:translateY(0)}
.rk-gallery-play{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;color:#fff;
  background:rgba(242,103,12,.9);box-shadow:0 8px 30px rgba(242,103,12,.4);transition:transform .3s}
.rk-gallery-item.video:hover .rk-gallery-play{transform:translate(-50%,-50%) scale(1.12)}
/* filtering: hidden items */
.rk-gallery-item.hide{display:none}

/* ============================================================================
   LIGHTBOX — full-screen image viewer for galleries
   ========================================================================== */
.lb{position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:rgba(6,8,10,.94);backdrop-filter:blur(8px);padding:clamp(20px,5vw,64px)}
.lb.on{display:grid;animation:lbfade .25s ease}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lb-stage{margin:0;max-width:min(1100px,92vw);max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-stage img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:6px;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 120px rgba(0,0,0,.7);animation:lbpop .3s cubic-bezier(.16,1,.3,1)}
@keyframes lbpop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.lb-stage figcaption{color:#C7D0D7;font-size:.95rem;font-weight:500;text-align:center}
.lb-x{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:1.7rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.lb-x:hover{background:var(--flame);border-color:var(--flame);transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:2rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s;z-index:2}
.lb-nav:hover{background:var(--flame);border-color:var(--flame)}
.lb-prev{left:clamp(12px,2.5vw,32px)}
.lb-next{right:clamp(12px,2.5vw,32px)}
.lb-nav:hover.lb-prev{transform:translateY(-50%) translateX(-3px)}
.lb-nav:hover.lb-next{transform:translateY(-50%) translateX(3px)}
.lb-count{position:absolute;bottom:clamp(16px,3vw,30px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.62);font-size:.82rem;letter-spacing:.1em;font-weight:600}
@media(max-width:600px){.lb-nav{width:44px;height:44px;font-size:1.6rem}}

/* ============================================================================
   ENQUIRY FORMS — clean card, rounded inputs, heading + subtext
   ========================================================================== */
.enq-form{background:var(--rk-card,#161C21);border:1px solid var(--rk-line,#242C33);border-radius:16px;
  padding:clamp(24px,3vw,40px);position:relative;overflow:hidden}
.enq-form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--flame),var(--gold))}
.enq-head{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--rk-line,#242C33)}
.enq-head h2{color:var(--rk-ink);font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;margin:0 0 8px}
.enq-head p{color:var(--rk-body,#98A4AD);font-size:.98rem;line-height:1.55;margin:0;max-width:52ch}

.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.enq-grid{grid-template-columns:1fr}}
.enq-form .fl{display:grid;gap:8px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rk-mute,#8793A8)}
.enq-form .fl i{color:var(--flame);font-style:normal}
.enq-form .fl.w{grid-column:1/-1}
.enq-form input,.enq-form select,.enq-form textarea{
  width:100%;background:#FFFFFF;border:1px solid var(--rk-line,#DFE5EA);border-radius:11px;
  color:#0B1116;padding:13px 15px;font-family:var(--f);font-size:.96rem;font-weight:500;
  letter-spacing:0;text-transform:none;transition:border-color .22s,box-shadow .22s,background .22s}
.enq-form input::placeholder,.enq-form textarea::placeholder{color:#8A96A0;font-weight:400}
.enq-form input:focus,.enq-form select:focus,.enq-form textarea:focus{
  outline:none;border-color:var(--flame);background:#FFFFFF;box-shadow:0 0 0 3px rgba(242,103,12,.16)}
.enq-form textarea{resize:vertical;min-height:110px}
.enq-form select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238793A8' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
/* date input calendar icon — dark glyph on the white field */
.enq-form input[type=date]::-webkit-calendar-picker-indicator{filter:none;opacity:.65;cursor:pointer}

.enq-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.enq-actions .btn{border-radius:11px}
.enq-note{font-size:.86rem;color:var(--rk-mute,#8793A8);margin:16px 0 0;line-height:1.5}

/* alerts inside the dark form area */
.enq-form + .alert,.alert{border-radius:11px}

/* ============================================================================
   PROJECTS page — image project cards
   ========================================================================== */
.rk-proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(24px,3vw,40px)}
@media(max-width:1000px){.rk-proj-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rk-proj-grid{grid-template-columns:1fr}}
.rk-proj-card{display:flex;flex-direction:column;background:var(--rk-card);border:1px solid var(--rk-line);
  border-radius:14px;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.rk-proj-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(11,17,22,.13);border-color:rgba(242,103,12,.4)}
.rk-proj-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--rk-bg2)}
.rk-proj-img img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .3s}
.rk-proj-card:hover .rk-proj-img img{transform:scale(1.08);opacity:1}
.rk-proj-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(11,14,17,.72))}
.rk-proj-tag{position:absolute;top:14px;left:14px;z-index:2;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;padding:7px 12px;border-radius:6px;
  background:linear-gradient(120deg,rgba(242,103,12,.92),rgba(251,140,30,.92));box-shadow:0 6px 18px rgba(242,103,12,.3)}
.rk-proj-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.rk-proj-body h3{color:var(--rk-ink);font-size:1.28rem;letter-spacing:-.01em;margin:0 0 10px;line-height:1.2}
.rk-proj-body p{color:var(--rk-body);font-size:.93rem;line-height:1.55;margin:0 0 16px}
.rk-proj-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.rk-proj-meta span{font-size:.74rem;font-weight:600;color:var(--rk-body);padding:5px 10px;border:1px solid var(--rk-line);border-radius:20px}
.rk-proj-go{margin-top:auto;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rk-accent);display:inline-flex;gap:8px;align-items:center}
.rk-proj-go span{transition:transform .3s}.rk-proj-card:hover .rk-proj-go span{transform:translateX(5px)}

/* projects filter tabs reuse galtabs; ensure dark pill style */
.rk .galtabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,2.4vw,32px)}
.rk .galtabs a{font-size:.85rem;font-weight:600;padding:9px 18px;border-radius:30px;border:1px solid var(--rk-line);
  color:var(--rk-body);transition:all .25s}
.rk .galtabs a:hover{color:var(--rk-ink);border-color:var(--rk-accent)}
.rk .galtabs a.on{background:linear-gradient(120deg,var(--rk-accent),#FBB614);color:#fff;border-color:transparent}

/* ============================================================================
   RATE CALCULATOR (rate-calculator.php)
   ========================================================================== */
.rate-alert{padding:14px 18px;border-radius:11px;margin-bottom:22px;font-size:.95rem}
.rate-alert.ok{background:rgba(22,190,232,.12);border:1px solid rgba(22,190,232,.45);color:#0B6E8C}
.rate-alert.err{background:rgba(238,58,32,.10);border:1px solid rgba(238,58,32,.38);color:#B02411}
.rate-calc{display:grid;gap:22px}
.rate-client{display:grid;grid-template-columns:2fr 2fr 1fr;gap:16px;background:var(--rk-card);border:1px solid var(--rk-line);border-radius:14px;padding:22px 24px}
@media(max-width:700px){.rate-client{grid-template-columns:1fr}}
.rate-client .fl,.rate-side .fl{display:grid;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rk-mute)}
.rate-client .fl i,.rate-side .fl i{color:var(--rk-accent);font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;font-size:.72rem}
.rate-calc input,.rate-calc select{background:#FFFFFF;border:1px solid var(--rk-line);border-radius:10px;color:#0B1116;height:46px;padding:0 13px;font-size:.95rem;font-weight:600;font-family:var(--f);width:100%;line-height:normal;-webkit-appearance:none;appearance:none}
/* keep inputs dark even when the browser autofills them */
.rate-calc input:-webkit-autofill,
.rate-calc input:-webkit-autofill:hover,
.rate-calc input:-webkit-autofill:focus,
.rate-calc select:-webkit-autofill{
  -webkit-text-fill-color:#0B1116;
  -webkit-box-shadow:0 0 0 40px #FFFFFF inset;
  box-shadow:0 0 0 40px #FFFFFF inset;
  caret-color:#0B1116;
  transition:background-color 9999s ease-in-out 0s;
}
.rate-calc select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238793A8' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.rate-calc input:focus,.rate-calc select:focus{outline:none;border-color:var(--rk-accent);box-shadow:0 0 0 3px rgba(242,103,12,.15)}
/* align each field: label rows stretch so inputs bottom-align across the row */
.rate-client-2 .fl{align-content:start}
.rate-client-2 .fl .cap{display:block;position:relative;height:20px;margin-bottom:8px;line-height:20px}
.rate-client-2 .fl .cap i{position:absolute;left:0;top:20px;line-height:1;white-space:nowrap}
.rate-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
@media(max-width:860px){.rate-grid{grid-template-columns:1fr}}
.rate-panel{background:var(--rk-card);border:1px solid var(--rk-line);border-radius:14px;padding:22px 24px}
.rate-panel h3{display:flex;align-items:center;gap:12px;color:var(--rk-ink);font-size:1.1rem;margin:0 0 18px}
.rate-panel h3 small{color:var(--rk-mute);font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.rate-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;font-size:.8rem;font-weight:700;
  background:linear-gradient(135deg,rgba(242,103,12,.2),rgba(22,190,232,.1));color:var(--rk-accent);border:1px solid var(--rk-line)}
.rate-side{display:grid;gap:22px;align-content:start}
.rate-side .fl{margin-bottom:14px}
/* material table */
.rate-tbl{display:grid;gap:1px;background:var(--rk-line);border:1px solid var(--rk-line);border-radius:10px;overflow:hidden}
.rate-tr{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:10px;align-items:center;background:var(--rk-bg);padding:10px 14px}
.rate-tr.rate-hd{background:var(--rk-bg2);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rk-mute)}
.rate-tr input{height:38px;padding:0 10px;font-size:.9rem}
.rate-item{font-size:.9rem;color:var(--rk-body);font-weight:600}
.rate-amt{font-weight:700;color:var(--rk-ink);text-align:right;font-variant-numeric:tabular-nums}
.rate-tr.rate-total{background:var(--rk-bg2);font-weight:700}
.rate-tr.rate-total span:first-child{color:var(--rk-accent);text-transform:uppercase;font-size:.74rem;letter-spacing:.08em}
.rate-line{display:flex;justify-content:space-between;align-items:center;padding:14px 0 0;margin-top:6px;border-top:1px solid var(--rk-line)}
.rate-line span{font-size:.82rem;color:var(--rk-mute);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.rate-line b{color:var(--rk-accent);font-size:1.2rem}
/* result block */
.rate-result{background:linear-gradient(160deg,rgba(242,103,12,.1),rgba(22,190,232,.05));border:1px solid var(--rk-line);border-radius:14px;padding:24px 28px;display:grid;gap:2px;max-width:520px;margin-left:auto}
.rate-res-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:.95rem;color:var(--rk-body)}
.rate-res-row b{color:var(--rk-ink);font-variant-numeric:tabular-nums}
.rate-res-row.big{border-top:1px solid var(--rk-line);margin-top:6px;padding-top:14px;font-weight:700}
.rate-res-row.big span{color:var(--rk-ink)}.rate-res-row.big b{font-size:1.3rem}
.rate-res-row.final{border-top:2px solid var(--rk-accent);margin-top:8px;padding-top:14px}
.rate-res-row.final span{color:var(--rk-ink);font-weight:700;font-size:1.05rem}
.rate-res-row.final b{font-size:1.8rem;background:linear-gradient(120deg,var(--rk-accent),#FBB614);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rate-actions{display:flex;gap:12px;flex-wrap:wrap}
.rate-actions .btn{border-radius:11px}
/* rate calc: auto-calculated field (admix qty) */
.rate-auto{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rk-accent);
  background:rgba(242,103,12,.12);border:1px solid rgba(242,103,12,.3);padding:2px 6px;border-radius:5px;vertical-align:middle;margin-left:6px}
.rate-calc input[readonly]{background:#F5F7F9;color:var(--rk-accent);cursor:not-allowed;border-style:dashed}

/* ============================================================================
   OUR STORY — animated vertical timeline
   ========================================================================== */
.rk-tl-sec{background:var(--rk-bg2);border-block:1px solid var(--rk-line)}
.rk-hd.center{text-align:center}
.rk-hd.center .kicker{justify-content:center}
.rk-tl{position:relative;max-width:960px;margin:clamp(30px,4vw,56px) auto 0;padding:10px 0}
.rk-tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--rk-line) 6%,var(--rk-line) 94%,transparent)}
.rk-tl::after{content:"";position:absolute;left:50%;top:0;width:2px;transform:translateX(-50%);
  height:var(--tl-progress,0%);background:linear-gradient(180deg,var(--rk-accent),#FBB614);
  box-shadow:0 0 16px rgba(242,103,12,.5);transition:height .3s ease-out}
@media(max-width:720px){.rk-tl::before,.rk-tl::after{left:26px}}
.rk-tl-item{position:relative;width:50%;padding:0 44px 40px 0;box-sizing:border-box}
.rk-tl-item:nth-child(even){margin-left:50%;padding:0 0 40px 44px}
@media(max-width:720px){.rk-tl-item,.rk-tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 34px 62px}}
.rk-tl-dot{position:absolute;top:0;right:-27px;width:54px;height:54px;border-radius:50%;z-index:2;
  display:grid;place-items:center;background:var(--rk-bg);border:1px solid var(--rk-line);
  color:var(--rk-accent);transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}
.rk-tl-item:nth-child(even) .rk-tl-dot{right:auto;left:-27px}
@media(max-width:720px){.rk-tl-item .rk-tl-dot,.rk-tl-item:nth-child(even) .rk-tl-dot{left:0;right:auto}}
.rk-tl-dot svg{width:24px;height:24px}
.rk-tl-item.in .rk-tl-dot{border-color:var(--rk-accent);box-shadow:0 0 0 6px rgba(242,103,12,.1),0 10px 30px rgba(242,103,12,.2);
  background:linear-gradient(135deg,rgba(242,103,12,.2),rgba(22,190,232,.1))}
.rk-tl-card{background:var(--rk-card);border:1px solid var(--rk-line);border-radius:14px;padding:24px 26px;
  position:relative;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}
.rk-tl-item:hover .rk-tl-card{transform:translateY(-4px);border-color:rgba(242,103,12,.4);box-shadow:0 18px 40px rgba(11,17,22,.11)}
.rk-tl-card::before{content:"";position:absolute;top:18px;width:14px;height:14px;background:var(--rk-card);
  border:1px solid var(--rk-line);border-left:0;border-bottom:0;transform:rotate(45deg)}
.rk-tl-item .rk-tl-card::before{right:-8px}
.rk-tl-item:nth-child(even) .rk-tl-card::before{left:-8px;transform:rotate(225deg)}
@media(max-width:720px){.rk-tl-item .rk-tl-card::before,.rk-tl-item:nth-child(even) .rk-tl-card::before{left:-8px;right:auto;transform:rotate(225deg)}}
.rk-tl-year{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.12em;margin-bottom:10px;
  background:linear-gradient(120deg,var(--rk-accent),#FBB614);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.1em}
.rk-tl-card h3{color:var(--rk-ink);font-size:1.2rem;margin:0 0 8px;letter-spacing:-.01em}
.rk-tl-card p{color:var(--rk-body);font-size:.93rem;line-height:1.55;margin:0}
.rk-tl-item{opacity:0;transform:translateY(24px)}
.rk-tl-item.in{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.rk-tl-item{opacity:1;transform:none}}

/* ============================================================================
   CMS PAGE — key-numbers stats band + richer prose
   ========================================================================== */
.rk-page-stats{padding:clamp(30px,4vw,52px) 0;border-bottom:1px solid var(--rk-line);
  background:linear-gradient(180deg,var(--rk-bg2),transparent)}
.rk-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rk-line);
  border:1px solid var(--rk-line);border-radius:16px;overflow:hidden}
.rk-stats-row:has(.rk-stat:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.rk-stats-row{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.rk-stats-row{grid-template-columns:1fr}}
.rk-stat{background:var(--rk-bg);padding:clamp(24px,3vw,38px) clamp(18px,2vw,28px);text-align:center;position:relative;overflow:hidden}
.rk-stat::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:2px;
  background:linear-gradient(90deg,var(--rk-accent),#FBB614)}
.rk-page-stats .rk-stat b{display:block;font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(160deg,#0B1116,#5A666F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rk-stat span{display:block;margin-top:10px;font-size:.86rem;color:var(--rk-body);font-weight:500}

/* richer prose lists on company pages (checkmark bullets) */
.rk-page-cols .prose ul{list-style:none;padding:0;margin:1.2em 0;display:grid;gap:12px}
.rk-page-cols .prose ul li{position:relative;padding-left:32px;line-height:1.55;color:var(--rk-body)}
.rk-page-cols .prose ul li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:6px;
  background:linear-gradient(135deg,rgba(242,103,12,.2),rgba(22,190,232,.1));border:1px solid var(--rk-line)}
.rk-page-cols .prose ul li::after{content:"";position:absolute;left:6px;top:8px;width:7px;height:4px;
  border-left:2px solid var(--rk-accent);border-bottom:2px solid var(--rk-accent);transform:rotate(-45deg)}
.rk-page-cols .prose ul li strong{color:var(--rk-ink)}
.rk-page-cols .prose h3{margin-top:1.6em;color:var(--rk-ink)}

/* rate calc: expanded client grid + whatsapp button */
.rate-client-2{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.rate-client-2{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.rate-client-2{grid-template-columns:1fr}}
.rate-client-2 .fl.wide{grid-column:1/-1}
.btn.btn-wa{background:#25D366;border:0;color:#fff}
.btn.btn-wa:hover{background:#1eb958}
.btn.btn-wa span{color:#fff}

/* footer social icons */
.ft-social{display:flex;gap:12px;margin-top:18px}
.ft-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);color:#C4CDD5;transition:all .25s}
.ft-social a:hover{background:linear-gradient(135deg,var(--flame,#F2670C),#FBB614);border-color:transparent;color:#fff;transform:translateY(-3px)}
.ft-social svg{width:19px;height:19px}

/* ============================================================================
   GLOBAL: all paragraph / lead text at 14px (client request)
   ========================================================================== */
p,
.lead,
.co .lead,
.rk-qa-lead,
.rk-page-hero .lead,
.rk-page-cols .prose p,
.prose p,
.rk-tl-card p,
.rk-proj-body p,
.rk-stat span,
.rk-hd p,
.phero .lead,
body.dark .lead{
  font-size:14px !important;
}
/* keep tiny meta labels as-is (don't blow them up) */
.kicker,.lbl,.rk-proj-tag,.rk-tl-year,.rate-auto{font-size:inherit}

/* contact map — full width, no border */
.mapfull{width:100%;line-height:0}
.mapfull iframe{width:100%;display:block;border:0}

/* ============================================================================
   MOBILE / RESPONSIVE FIX PACK   —  appended last on purpose.
   Nothing above this line was deleted; these rules win by cascade order.

   Bugs this fixes, with the cause:
   1) The header "Call us 24x7" block reappeared on phones.
      Cause: line ~753 `.hd-phone{display:flex}` sits AFTER the
      `@media(max-width:1150px){.hd-phone{display:none}}` rule at line ~188.
      Same specificity, later in file, so it won. Re-hidden here with
      `header.site .hd-phone` (higher specificity + last in file).
   2) Drawer menu invisible (white text on white panel).
      Cause: `.drawer{background:#fff}` is hard-coded, while the links use
      `color:var(--ink)` which body.dark redefines to #F4F6F7. No
      `body.dark .drawer` override existed. Added below.
   3) Top line clipped the email address.
      Cause: `.topline .full{white-space:nowrap;overflow:hidden}`.
   4) Floating WhatsApp / call buttons sat under the mobile browser toolbar
      and covered the first calculator field.
   ========================================================================== */

/* --- 1. header row on tablet + phone: logo, quote, burger ---------------- */
@media(max-width:1150px){
  header.site .nav,
  header.site .hd-phone{display:none}
  header.site .burger{display:block}
}
@media(max-width:700px){
  header.site .full{height:64px;gap:10px}
  .logo img{height:34px}
  .hd-cta{gap:8px}
  header.site .hd-cta .btn-hot{padding:11px 15px;font-size:.78rem;border-radius:10px;box-shadow:none}
}
@media(max-width:430px){
  /* no room for the pill next to the burger — it lives in the drawer instead */
  header.site .hd-cta .btn-hot{display:none}
}

/* --- 2. top line: wrap instead of clipping ------------------------------- */
@media(max-width:900px){
  .topline .full{
    height:auto;min-height:36px;padding-block:7px;
    white-space:normal;flex-wrap:wrap;justify-content:center;gap:3px 14px;
  }
  .topline .tl-r{flex-wrap:wrap;justify-content:center;gap:3px 14px;font-size:.7rem}
}
@media(max-width:560px){
  .topline .tl-r a[href^="mailto"]{display:none}
}

/* --- 3. drawer under the dark theme -------------------------------------- */
.drawer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
body.dark .drawer{background:linear-gradient(180deg,#FFFFFF 0%,#F5F7F9 100%)}
body.dark .drawer nav>a,
body.dark .drawer .grp>button{color:#0B1116;border-bottom-color:rgba(11,17,22,.10)}
body.dark .drawer .grp>button .c{border-right-color:var(--flame);border-bottom-color:var(--flame)}
body.dark .drawer .sub a{color:#48555F;border-bottom-color:rgba(11,17,22,.06)}
body.dark .drawer .sub{border-left:2px solid rgba(242,103,12,.4);padding-left:2px}
body.dark .drawer-foot{color:#48555F}
body.dark .drawer-foot a:active{color:var(--flame)}
@media(max-width:700px){
  .drawer{padding-top:88px}
  .drawer nav>a,.drawer .grp>button{font-size:1.18rem;padding:14px 0}
}

/* quote button inside the drawer (markup added to includes/header.php) */
.drawer-cta{
  display:block;margin:24px 0 4px;padding:15px;text-align:center;border-radius:12px;
  font-size:1rem;font-weight:700;letter-spacing:-.01em;background:var(--hot);color:#fff;
}
body.dark .drawer-cta{color:#0B1116}

/* --- 4. floating buttons clear of the mobile browser toolbar ------------- */
@media(max-width:900px){
  .fab{right:12px;bottom:calc(76px + env(safe-area-inset-bottom));gap:10px}
  .fab a{width:46px;height:46px}
  .fab svg{width:21px;height:21px}
  .totop{left:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
  body.locked .fab,body.locked .totop{display:none}
}

/* --- 5. inputs: stop iOS zooming in on focus (needs >=16px) -------------- */
@media(max-width:900px){
  input,select,textarea{font-size:16px}
  .rate-calc input,.rate-calc select{font-size:16px;height:48px}
  .rate-calc .rate-tr input{height:42px}
}

/* --- 6. rate calculator table on phones ---------------------------------- */
/* `.rate-cell` wraps the qty/rate inputs. display:contents keeps the desktop
   4-column grid exactly as it was; on phones it becomes a labelled block. */
.rate-cell{display:contents}
@media(max-width:620px){
  .rate-panel{padding:18px 16px}
  .rate-cell{display:block}
  .rate-cell::before{
    content:attr(data-l);display:block;margin-bottom:5px;
    font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rk-mute);
  }
  .rate-tr{grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .rate-tr.rate-hd{display:none}
  .rate-tr .rate-item{grid-column:1/-1}
  .rate-tr>.rate-amt{grid-column:1/-1;text-align:right;padding-top:2px}
  .rate-tr.rate-total{grid-template-columns:1fr auto;gap:8px}
  .rate-tr.rate-total span:nth-child(2),
  .rate-tr.rate-total span:nth-child(3){display:none}
  .rate-tr.rate-total>.rate-amt{grid-column:auto}
  .rate-result{max-width:100%;margin-left:0;padding:20px 18px}
  .rate-client,.rate-client-2{padding:18px 16px}
}

/* --- 7. general small-screen guards -------------------------------------- */
@media(max-width:700px){
  iframe,video{max-width:100%}
  .ft-legal{flex-wrap:wrap;gap:12px}
  .ft-top img.fl{width:170px}
  .band .wrap,.rk-cta .wrap{gap:22px}
}

/* ============================================================================
   FIX PACK 2 — sideways page drag + missing close (X) button
   ========================================================================== */

/* --- 8. close button + the "first tap does nothing" bug -------------------

   Two separate problems, one section.

   (a) MISSING CLOSE. `header.site` is position:sticky with z-index:900, which
       makes it a stacking context, so `.burger{z-index:960}` is scoped INSIDE
       the header and can never rise above 900 at page level. `.drawer` is a
       root-level sibling at z-index:950, so the drawer covered the whole
       header, burger included — the `.burger.x` X animation was running the
       whole time, just painted underneath. Rather than fight the stacking
       order, the drawer now carries its own close button, sitting exactly
       where the burger was.

   (b) FIRST TAP IGNORED. The drawer is always in the DOM; when closed it is
       only hidden by `clip-path:circle(0% at calc(100% - 44px) 58px)`. That
       origin point is the burger's own position, so the closed drawer was
       still swallowing the tap that landed there. The tap opened nothing, and
       the next one toggled it — which reads as "the first click doesn't
       work". `pointer-events` now follows the open state, so a closed drawer
       cannot intercept anything.
   -------------------------------------------------------------------------- */
.drawer{
  pointer-events:none;visibility:hidden;
  transition:clip-path .68s cubic-bezier(.76,0,.24,1),visibility 0s linear .68s;
}
.drawer.open{
  pointer-events:auto;visibility:visible;
  transition:clip-path .68s cubic-bezier(.76,0,.24,1),visibility 0s;
}

/* close button — same spot the burger occupies, so the thumb doesn't move */
.drawer-close{
  position:absolute;top:46px;right:var(--pad);
  width:44px;height:44px;display:none;place-items:center;
  background:rgba(242,103,12,.12);border:1px solid rgba(242,103,12,.55);
  border-radius:var(--r);color:var(--flame);cursor:pointer;padding:0;z-index:5;
}
.drawer.open .drawer-close{display:grid}
.drawer-close::before,.drawer-close::after{
  content:"";position:absolute;left:11px;width:21px;height:1.7px;background:currentColor;border-radius:2px;
}
.drawer-close::before{transform:rotate(45deg)}
.drawer-close::after{transform:rotate(-45deg)}
.drawer-close:active{background:rgba(242,103,12,.24)}
@media(max-width:700px){
  .drawer-close{top:42px}
}

/* --- 9. no more sideways drag -------------------------------------------
   `overflow-x:clip` (not `hidden`) is deliberate: `hidden` on <html> turns it
   into a scroll container, which silently kills `position:sticky` on the
   header. `clip` stops the panning without creating a scroll container.
   The existing `body{overflow-x:hidden}` on line 39 stays as the fallback
   for Safari below 16. ------------------------------------------------------ */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* the drawer is a full-viewport fixed panel with overflow-y:auto, so its
   overflow-x resolves to auto — any wide child there drags like the page */
.drawer{overflow-x:hidden;overscroll-behavior:contain}

/* belt and braces: the known wide offenders on narrow screens */
@media(max-width:700px){
  main,footer.site{overflow-x:clip}
  .wrap,.full{max-width:100%}
  /* NOTE: `overflow-wrap:break-word`, never `anywhere`. `anywhere` also
     shrinks an element's min-content width to a single character, which
     lets table columns collapse into vertical letter stacks instead of
     scrolling. Only prose gets this, never td/th/li/.btn. */
  h1,h2,h3,.lead,p{overflow-wrap:break-word}
  .crumb{flex-wrap:wrap;row-gap:4px}
  .rk-marq{max-width:100%}
}

/* --- 10. data tables scroll sideways instead of squashing ----------------
   `.rk-tblwrap` / `.co-tblwrap` / `.tblwrap` already have overflow-x:auto,
   but a table with no min-width will always shrink to fit its container
   rather than trigger that scrollbar. The min-width is what makes the
   wrapper actually scroll. --------------------------------------------------- */
@media(max-width:820px){
  .rk-tblwrap,.co-tblwrap,.tblwrap{-webkit-overflow-scrolling:touch}
  .rk-tbl,.co-tbl,.tbl{min-width:640px}
  .rk-tbl th,.rk-tbl td,.co-tbl th,.co-tbl td,.tbl th,.tbl td{
    padding:13px 15px;white-space:normal;overflow-wrap:normal;word-break:normal;
  }
  .rk-tbl td .btn,.co-tbl td .btn,.tbl td .btn{white-space:nowrap;padding:9px 16px;font-size:.8rem}
}

/* ============================================================================
   FIX PACK 3 — sections that stayed two-column on phones
   Cause: the column count was written as an INLINE style attribute in the PHP
   (index.php, calculators.php, services.php). Inline styles outrank every
   stylesheet rule short of !important, so no media query could unstack them.
   Those inline styles are now replaced by these classes.
   ========================================================================== */
.rk-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:center}
@media(max-width:900px){
  .rk-2col{grid-template-columns:1fr;gap:34px;align-items:start}
}
.cards-2{grid-template-columns:1fr 1fr}
@media(max-width:760px){
  .cards-2{grid-template-columns:1fr}
}

/* --- 11. remaining two-up blocks that get too tight on a phone ----------- */
@media(max-width:520px){
  .console-ft{grid-template-columns:1fr;gap:16px}
  .cin{grid-template-columns:1fr}
  .rk-facts{grid-template-columns:1fr}
  .hm-nums{grid-template-columns:1fr}
}
@media(max-width:420px){
  .mixrow{grid-template-columns:78px 1fr 58px;gap:9px}
  .gpick button{padding:7px 9px;font-size:.7rem}
}

/* the batch console panel itself */
@media(max-width:700px){
  .console{padding:16px}
  .console-hd{gap:10px}
  .console-hd b{font-size:.66rem;letter-spacing:.12em}
}

/* horizontal card scrollers: let them bleed to the screen edge so the last
   card doesn't look clipped, and keep the snap behaviour */
@media(max-width:700px){
  .rk-ind-scroll{
    grid-auto-columns:78vw;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    scroll-padding-left:var(--pad);
  }
}

/* ============================================================================
   FIX PACK 4 — light-theme contrast sweep
   Cause: the palette variables were flipped from the original dark editorial
   theme to light (--rk-bg #FFFFFF, --rk-card #FFFFFF), but a large block of
   component CSS still carried hard-coded `color:#fff`, white-to-grey clipped
   gradients, and dark-surface greys. Those became white-on-white (invisible)
   or near-invisible text. Fixed in place above; this pack covers the leftovers
   that are cleaner as overrides.
   ========================================================================== */

/* --- A. prose headings were inheriting the 4.2rem section-heading size ---
   `.rk h2` (line ~894) and `.prose h2` (line ~705) have identical specificity,
   so `.rk h2` won by being later in the file. Article headings inside a CMS
   page column were rendering at display size and overrunning the column. */
.rk .prose h2,
.rk-page-cols .prose h2{
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.18;letter-spacing:-.02em;
  color:var(--rk-ink);margin:1.6em 0 .5em;
}
.rk .prose h2:first-child,.rk-page-cols .prose h2:first-child{margin-top:0}
.rk .prose h3,
.rk-page-cols .prose h3{
  font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.3;letter-spacing:-.012em;
  color:var(--rk-ink);
}
.rk .prose h2 em,.rk .prose h3 em,
.rk-page-cols .prose h2 em,.rk-page-cols .prose h3 em{
  font-style:italic;font-weight:600;
  background:linear-gradient(100deg,var(--rk-accent),#FBB614);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:inline-block;padding-right:.12em;margin-right:-.1em;
}
.rk .prose strong,.rk-page-cols .prose strong{color:var(--rk-ink);font-weight:700}
.rk .prose p,.rk-page-cols .prose p{color:var(--rk-body)}

/* --- B. safety net: any clipped-gradient text must never be pure white on a
   light surface. If a gradient fails to paint (older Safari, print, forced
   colours), `color:transparent` leaves nothing behind — give it a fallback. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .rk h2 em,.rk .it,.rk-stat b,.rk-hero-stat b,.rk-calc .cout b,
  .rk-page-stats .rk-stat b,.rate-res-row.final b,.rk-tl-year,.rk-qa-n{
    background:none !important;color:var(--rk-accent) !important;
    -webkit-text-fill-color:var(--rk-accent) !important;
  }
}

/* --- C. drawer quote button: orange gradient pill needs white text ------- */
body.dark .drawer-cta{color:#fff}

/* --- D. footer fine print + rules on the dark footer --------------------- */
body.dark footer.site .ft-bot,
body.dark footer.site .ft-seo,
body.dark footer.site .ft-legal{border-color:rgba(255,255,255,.12)}
body.dark footer.site .ft-seo{color:#78868F}
body.dark footer.site .ft-legal{color:#8B98A2}

/* --- E. print: never ship an invisible heading to paper ------------------ */
@media print{
  *{-webkit-text-fill-color:#000 !important;color:#000 !important;
    background:transparent !important;box-shadow:none !important}
}