/* ==========================================================================
   CLIXIO TECHNOLOGY — CORPORATE EDITION
   A restrained, typographic design system.
   Orange is an accent, not a wallpaper. Charcoal carries the weight.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* brand */
  --o:#F15A22;
  --o-dk:#D2450F;
  --o-dp:#A8330A;
  --o-lt:#FF7A45;
  --o-tint:#FEF3EE;
  --o-tint-2:#FBE2D6;

  /* "improved" green — only used for the 90-day deltas in the growth model */
  --gr:#1E9E56;
  --gr-tint:#EDF8F1;
  --gr-tint-2:#CFE9DA;

  /* neutrals */
  --ink:#0C0F13;
  --ink-2:#171B21;
  --ink-3:#232830;
  --body:#4B535E;
  --muted:#7B838F;
  --faint:#A9B0B9;

  --w:#FFFFFF;
  --paper:#F7F8F9;
  --paper-2:#EFF1F3;
  --line:#E3E6EA;
  --line-2:#CFD4DA;

  /* on dark */
  --on-k:#FFFFFF;
  --on-k-2:#C9CFD7;
  --on-k-3:#8F98A3;
  --on-k-line:rgba(255,255,255,.13);
  --on-k-line-2:rgba(255,255,255,.22);

  /* on orange */
  --on-o:#FFFFFF;
  --on-o-2:#FFE2D5;
  --on-o-line:rgba(255,255,255,.28);

  /* elevation — deliberately shallow */
  --sh-1:0 1px 2px rgba(12,15,19,.04);
  --sh-2:0 1px 3px rgba(12,15,19,.05),0 8px 20px -12px rgba(12,15,19,.14);
  --sh-3:0 2px 6px rgba(12,15,19,.05),0 22px 44px -22px rgba(12,15,19,.22);

  --r-xs:3px;
  --r-s:5px;
  --r:8px;
  --r-l:12px;

  --fd:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);

  --wrap:1200px;
  --gut:24px;
  --hdr:72px;
  /* height of the announcement strip above the header; nav.php raises it
     to the real height only when the strip is switched on in the admin */
  --util:0px;

  /* ambient background layer */
  --grid:rgba(12,15,19,.036);
  --grid-k:rgba(255,255,255,.05);
  --grid-o:rgba(255,255,255,.09);
  --grid-sz:64px;
  --wash-o:rgba(241,90,34,.07);
  --wash-k:rgba(12,15,19,.035);
}
@media (max-width:700px){:root{--grid-sz:44px}}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 24px)}
body{
  font-family:var(--fb);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--w);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4,h5{
  font-family:var(--fd);color:var(--ink);
  font-weight:800;line-height:1.1;letter-spacing:-.03em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.2vw,4.15rem);letter-spacing:-.042em;line-height:1.03}
h2{font-size:clamp(1.85rem,3.5vw,2.85rem);letter-spacing:-.038em;line-height:1.09}
h3{font-size:clamp(1.08rem,1.4vw,1.28rem);letter-spacing:-.024em;line-height:1.28}
h4{font-size:.95rem;font-weight:800;letter-spacing:-.012em}
p{color:var(--body);text-wrap:pretty}
b,strong{font-weight:700;color:var(--ink)}
small{font-size:.82em}

.lead{font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.62;color:var(--ink-3);font-weight:400}
.hl{color:var(--o)}
.mono{font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}

/* ------------------------------------------------------------------ layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
.band{position:relative;padding:clamp(68px,7.5vw,116px) 0;isolation:isolate;overflow:hidden}
.band--tight{padding:clamp(46px,5vw,72px) 0}

.band--w{background:var(--w)}
.band--p{background:var(--paper);border-block:1px solid var(--line)}
.band--k{background:var(--ink);color:var(--on-k-2)}
.band--o{background:var(--o);color:var(--on-o-2)}

/* ------------------------------------------------------------------ ambient background
   A quiet depth layer: a hairline grid that fades before it becomes a pattern,
   plus a soft off-centre wash. Pure CSS — no images, no repaint cost on scroll. */
.band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--grid-sz) var(--grid-sz);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 72%);
}

.band--w{
  background-image:
    radial-gradient(46% 42% at 88% 4%,var(--wash-o),transparent 62%),
    radial-gradient(40% 38% at 4% 96%,var(--wash-k),transparent 66%);
}
.band--p{
  background-image:
    radial-gradient(52% 46% at 6% 0%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(44% 40% at 96% 100%,var(--wash-o),transparent 64%);
}
.band--k{
  background-image:
    radial-gradient(50% 46% at 85% 0%,rgba(241,90,34,.14),transparent 62%),
    radial-gradient(45% 40% at 5% 100%,rgba(241,90,34,.07),transparent 66%);
}
.band--k::before{
  background-image:
    linear-gradient(var(--grid-k) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-k) 1px,transparent 1px);
}
.band--o{
  background-image:
    radial-gradient(60% 55% at 92% 6%,rgba(255,255,255,.16),transparent 62%),
    radial-gradient(50% 50% at 2% 100%,rgba(168,51,10,.28),transparent 66%);
}
.band--o::before{
  background-image:
    linear-gradient(var(--grid-o) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-o) 1px,transparent 1px);
}

/* opt-out for bands that should stay perfectly flat */
.band--flat::before{content:none}

.band--k h1,.band--k h2,.band--k h3,.band--k h4,.band--k b,.band--k strong{color:var(--on-k)}
.band--k p{color:var(--on-k-2)}
.band--k .hl{color:var(--o-lt)}
.band--k .lead{color:var(--on-k-2)}

.band--o h1,.band--o h2,.band--o h3,.band--o h4,.band--o b,.band--o strong{color:var(--on-o)}
.band--o p{color:var(--on-o-2)}
.band--o .lead{color:var(--on-o-2)}

/* ------------------------------------------------------------------ eyebrow */
.eb{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--o);margin-bottom:20px;
}
.band--k .eb{color:var(--o-lt)}
.band--o .eb{color:var(--on-o)}

/* ------------------------------------------------------------------ section head */
.head{max-width:760px;margin-bottom:clamp(38px,4.2vw,58px)}
.head p{margin-top:18px;font-size:1.02rem;max-width:62ch}
.head--c{margin-inline:auto;text-align:center}
.head--c .eb{justify-content:center}
.head--c p{margin-inline:auto}
.head--w{max-width:none;display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,5vw,72px);align-items:end}
.head--w p{margin-top:0}
@media (max-width:860px){
  .head--w{grid-template-columns:1fr;gap:18px;align-items:start}
  .head--w p{max-width:62ch}
}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fd);font-weight:700;font-size:.9rem;letter-spacing:-.008em;
  padding:12px 22px;border-radius:var(--r-s);border:1px solid transparent;
  cursor:pointer;transition:background .24s var(--e),color .24s var(--e),border-color .24s var(--e),transform .24s var(--e);
  white-space:nowrap;
}
.btn svg{flex:none;transition:transform .3s var(--e-out)}
.btn:hover svg{transform:translateX(3px)}

.btn--o{background:var(--o);color:#fff}
.btn--o:hover{background:var(--o-dk)}

.btn--k{background:var(--ink);color:#fff}
.btn--k:hover{background:var(--ink-3)}

.btn--line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--line:hover{border-color:var(--ink);background:var(--ink);color:#fff}

.btn--w{background:#fff;color:var(--ink)}
.btn--w:hover{background:var(--paper-2)}

.btn--ghost{background:transparent;color:#fff;border-color:var(--on-k-line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

.btn--ow{background:transparent;color:#fff;border-color:var(--on-o-line)}
.btn--ow:hover{background:rgba(255,255,255,.12);border-color:#fff}

.btn--sm{padding:9px 16px;font-size:.83rem}
.btn--lg{padding:15px 28px;font-size:.96rem}
.btn--full{width:100%}

/* text link with arrow */
.tl{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fd);font-weight:700;font-size:.88rem;color:var(--o);
  border-bottom:1px solid transparent;transition:border-color .22s var(--e)
}
.tl:hover{border-color:currentColor}
.tl svg{transition:transform .3s var(--e-out)}
.tl:hover svg{transform:translateX(3px)}
.band--k .tl{color:var(--o-lt)}

/* ------------------------------------------------------------------ utility bar */
.util{
  background:var(--ink);color:var(--on-k-3);
  height:var(--util);display:flex;align-items:center;
  font-size:.775rem;letter-spacing:.005em;
  position:relative;z-index:60;
}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.util__l{display:flex;align-items:center;gap:26px;min-width:0}
.util__l span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__l svg{color:var(--o-lt);flex:none}
.util__r{display:flex;align-items:center;gap:20px;flex:none}
.util__r a{color:var(--on-k-2);transition:color .2s var(--e)}
.util__r a:hover{color:#fff}
@media (max-width:900px){
  .util__l span:nth-child(n+2){display:none}
  .util__r a:nth-child(n+2){display:none}
}

/* ------------------------------------------------------------------ header */
.hdr{
  position:sticky;top:0;z-index:50;
  height:var(--hdr);background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--e),border-color .3s var(--e);
}
.hdr.is-stuck{box-shadow:var(--sh-1);border-color:var(--line-2)}
.hdr__in{display:flex;align-items:center;gap:28px;height:100%}

.brand{display:flex;align-items:center;flex:none}
/* Header logo — bumped ~13% (34px → 39px) so it reads properly in the bar. */
.brand img{height:39px;width:auto}
.ft .brand img{height:36px}

.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a{
  position:relative;padding:9px 13px;border-radius:var(--r-xs);
  font-family:var(--fd);font-weight:600;font-size:.875rem;letter-spacing:-.01em;
  color:var(--ink-3);transition:color .2s var(--e),background .2s var(--e);
}
.menu a:hover{color:var(--ink);background:var(--paper)}
.menu a.is-on{color:var(--o)}
.menu a.is-on::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--o);border-radius:2px;
}
.hdr__cta{flex:none}

.burg{display:none;width:40px;height:40px;align-items:center;justify-content:center;margin-left:auto;border:1px solid var(--line);border-radius:var(--r-xs)}
.burg i,.burg i::before,.burg i::after{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--e),opacity .2s}
.burg i::before,.burg i::after{content:"";position:absolute}
.burg i::before{transform:translateY(-6px)}
.burg i::after{transform:translateY(6px)}
.burg[aria-expanded="true"] i{background:transparent}
.burg[aria-expanded="true"] i::before{transform:rotate(45deg)}
.burg[aria-expanded="true"] i::after{transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:calc(var(--hdr) + var(--util)) 0 auto 0;z-index:49;
  background:#fff;border-bottom:1px solid var(--line);
  padding:14px var(--gut) 24px;display:none;flex-direction:column;gap:2px;
  max-height:calc(100vh - var(--hdr) - var(--util));overflow-y:auto;
  box-shadow:var(--sh-3);
}
.drawer.is-open{display:flex}
.drawer a{
  font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--ink);
  padding:13px 4px;border-bottom:1px solid var(--line);
}
.drawer a:last-child{border:none;margin-top:16px;justify-content:center}
.drawer .btn{border-bottom:none}

@media (max-width:1080px){
  .menu,.hdr__cta{display:none}
  .burg{display:flex;position:relative}
}

/* ------------------------------------------------------------------ a11y helper */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------------ ambient effects
   Utility-style effect primitives — drifting colour orbs, aurora sweep, glass
   surfaces, shimmer. Composited on the GPU (transform/opacity/filter only) so
   they cost nothing on scroll, and every one of them stops under reduced motion. */
.orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  filter:blur(90px);will-change:transform;
}
.orb--a{
  width:52vw;height:52vw;max-width:660px;max-height:660px;
  right:-10vw;top:-16vw;
  background:radial-gradient(circle,rgba(241,90,34,.72) 0%,rgba(241,90,34,0) 68%);
  animation:drift-a 26s ease-in-out infinite;
}
.orb--b{
  width:44vw;height:44vw;max-width:560px;max-height:560px;
  left:-12vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(255,122,69,.45) 0%,rgba(255,122,69,0) 70%);
  animation:drift-b 34s ease-in-out infinite;
}
.orb--c{
  width:36vw;height:36vw;max-width:460px;max-height:460px;
  left:38%;top:-14vw;
  background:radial-gradient(circle,rgba(120,150,255,.20) 0%,rgba(120,150,255,0) 70%);
  animation:drift-a 42s ease-in-out infinite reverse;
}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-5%,7%,0) scale(1.14)}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(7%,-6%,0) scale(1.1)}
}

/* aurora sweep — a slow band of brand light crossing a dark surface */
.aurora{
  position:absolute;inset:-40% -10%;z-index:1;pointer-events:none;
  background:conic-gradient(from 210deg at 50% 50%,
    rgba(241,90,34,0) 0deg,
    rgba(241,90,34,.16) 70deg,
    rgba(255,122,69,.05) 140deg,
    rgba(241,90,34,0) 220deg,
    rgba(241,90,34,0) 360deg);
  filter:blur(60px);opacity:.9;
  animation:spin 48s linear infinite;will-change:transform;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* glass surface */
.glass{
  background:rgba(18,21,26,.56);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.13);
}
@supports not (backdrop-filter:blur(2px)){
  .glass{background:rgba(12,15,19,.9)}
}

/* shimmer sweep for small badges */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  animation:sweep 5.5s ease-in-out infinite;
}
@keyframes sweep{0%{left:-120%}45%,100%{left:130%}}

@media (prefers-reduced-motion:reduce){
  .orb,.aurora,.shimmer::after{animation:none!important}
}

/* ------------------------------------------------------------------ typing headline
   The full sentence stays in the DOM inside the "ghost" so crawlers read it. The
   script splits it into one span per character; hidden characters keep their
   boxes, so the final line breaks are in place from frame one — the headline
   never re-wraps, grows or shifts while it types. */
.type{position:relative;display:block}
.type__ghost{display:block;visibility:hidden}
.type__out{position:absolute;inset:0;display:block}
/* the part that is never animated */
.type__fix{white-space:nowrap}

/* live typing: ghost becomes the real text, characters reveal in place */
.type--live .type__ghost{visibility:visible}
.type--live .ty{position:relative;visibility:hidden}
.type--live .ty.is-on{visibility:visible}
/* Caret rides on the current character and takes up no layout space.
   The offsets come from Manrope's own metrics (ascent 1.066em, cap height
   .72em), so the bar runs from the cap line down to the baseline — exactly the
   height of the letters beside it. */
.type--live .ty.is-cur::after{
  content:"";position:absolute;left:100%;top:.34em;
  width:3px;height:.74em;border-radius:2px;margin-left:.09em;
  background:var(--o);
  animation:caret 1.05s steps(1) infinite;
}
.hero--media .type--live .ty.is-cur::after{background:var(--o-lt);box-shadow:0 0 14px rgba(255,122,69,.8)}
.type__caret{
  display:inline-block;width:3px;height:.82em;border-radius:2px;
  background:var(--o);vertical-align:-.06em;margin-left:.09em;
  animation:caret 1.05s steps(1) infinite;
}
.hero--media .type__caret{background:var(--o-lt);box-shadow:0 0 14px rgba(255,122,69,.8)}
/* keep the orbs as a tint over photography, not a wash that hides it */
.hero--media .orb--a{opacity:.5}
.hero--media .orb--b{opacity:.45}
.hero--media .aurora{opacity:.55}
@keyframes caret{50%{opacity:0}}
html:not(.js) .type__ghost{visibility:visible}
html:not(.js) .type__out{display:none}
@media (prefers-reduced-motion:reduce){.type__caret,.type--live .ty.is-cur::after{animation:none}}

/* ------------------------------------------------------------------ hero */
/* Bottom padding so the hero never sits flush against whatever follows it —
   the marquee strip in particular. .hero--media and the contact page set
   their own value and still win. */
.hero{
  padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,72px);position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(52% 46% at 86% 2%,rgba(241,90,34,.09),transparent 62%),
    radial-gradient(42% 40% at 2% 42%,rgba(12,15,19,.042),transparent 66%),
    var(--w);
}
.hero::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;
  width:min(1200px,94vw);height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--grid-sz) var(--grid-sz);
  -webkit-mask-image:radial-gradient(ellipse 68% 62% at 62% 6%,#000 0%,transparent 74%);
  mask-image:radial-gradient(ellipse 68% 62% at 62% 6%,#000 0%,transparent 74%);
}
.hero__g{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,76px);align-items:start}
.hero__copy{max-width:640px}
.hero h1{margin-bottom:22px}
.hero__lead{max-width:56ch}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px}
.hero__ticks span{display:inline-flex;align-items:center;gap:8px;font-size:.845rem;font-weight:500;color:var(--ink-3)}
.hero__ticks svg{color:var(--o);flex:none}

/* hero side panel — data, not decoration */
.hpanel{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--w)}
.hpanel__h{
  padding:16px 22px;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.hpanel__h b{font-family:var(--fd);font-size:.88rem;letter-spacing:-.015em}
.hpanel__h span{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hpanel__rows{padding:6px 22px 18px}
.hpr{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.hpr:last-child{border-bottom:none}
.hpr__l{min-width:0}
.hpr__l b{display:block;font-family:var(--fd);font-size:.92rem;letter-spacing:-.018em;color:var(--ink)}
.hpr__l span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.hpr__v{display:flex;align-items:baseline;gap:8px;font-family:var(--fd);font-weight:800;letter-spacing:-.03em}
.hpr__v b{font-size:1.42rem;color:var(--ink)}
.hpr__v i{
  font-style:normal;font-size:.7rem;font-weight:700;color:var(--o);
  background:var(--o-tint);border:1px solid var(--o-tint-2);
  padding:2px 7px;border-radius:100px;letter-spacing:0;
}
.hpanel__f{
  padding:14px 22px;background:var(--ink);color:var(--on-k-3);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.78rem;
}
.hpanel__f b{color:#fff;font-family:var(--fd);font-size:.86rem;text-align:right}
@media (max-width:420px){
  .hpanel__f{flex-direction:column;align-items:flex-start;gap:4px}
  .hpanel__f b{text-align:left}
}

/* ------------------------------------------------------------------ hero carousel
   Full-bleed cross-fading photography behind the hero. The section carries a
   solid dark base and its own orb/aurora layer, so if every image fails to load
   the hero still reads as a deliberate dark panel rather than a broken one. */
.hero--media{
  padding-top:clamp(52px,6vw,88px);
  padding-bottom:clamp(30px,4vw,56px);
  background:
    radial-gradient(70% 60% at 78% 0%,#181B21 0%,transparent 62%),
    #08090B;
  color:var(--on-k-2);
}
.hero--media::before{content:none}
.hero--media::after{
  z-index:2;
  background-image:
    linear-gradient(var(--grid-k) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-k) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 70% 64% at 60% 4%,#000 0%,transparent 76%);
  mask-image:radial-gradient(ellipse 70% 64% at 60% 4%,#000 0%,transparent 76%);
}

.hcar{position:absolute;inset:0;z-index:0;overflow:hidden}
.hcar__s{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--e-out)}
.hcar__s.is-on{opacity:1}
.hcar__s img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.05);transition:transform 8.5s linear;
}
.hcar__s.is-on img{transform:scale(1.15)}

.hcar__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(8,9,11,.96) 0%,
      rgba(8,9,11,.90) 30%,
      rgba(8,9,11,.52) 58%,
      rgba(8,9,11,.70) 100%),
    linear-gradient(to top,rgba(8,9,11,.94) 0%,rgba(8,9,11,.10) 44%,rgba(8,9,11,.50) 100%);
}
@media (max-width:980px){
  .hcar__scrim{
    background:
      linear-gradient(rgba(8,9,11,.90),rgba(8,9,11,.93)),
      linear-gradient(to top,rgba(8,9,11,.98),rgba(8,9,11,.4));
  }
}

/* slide indicators double as progress bars */
.hcar__nav{
  display:flex;align-items:center;gap:9px;
  margin-top:clamp(26px,3vw,38px);
}
.hcar__d{
  width:40px;height:3px;border-radius:3px;padding:0;flex:none;
  background:rgba(255,255,255,.22);overflow:hidden;cursor:pointer;
  transition:background .25s var(--e);
}
.hcar__d:hover{background:rgba(255,255,255,.4)}
.hcar__d i{display:block;height:100%;width:0;background:var(--o);border-radius:3px}
.hcar__d.is-on i{width:100%;transition:width 6s linear}
.hcar__d.is-done i{width:100%;transition:none}
.hcar__cap{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-k-3);margin-left:6px;
}
@media (prefers-reduced-motion:reduce){
  .hcar__s{transition:none}
  .hcar__s img{transition:none;transform:none}
  .hcar__d.is-on i{transition:none}
}

/* hero content on dark */
.hero--media h1,.hero--media h2,.hero--media h3,.hero--media b,.hero--media strong{color:#fff}
.hero--media p{color:var(--on-k-2)}
.hero--media .lead{color:#D5DAE1}
.hero--media .eb{color:var(--o-lt)}
.hero--media .hl{color:var(--o-lt)}
.hero--media .hero__ticks span{color:#C9CFD7}
.hero--media .hero__ticks svg{color:var(--o-lt)}
.hero--media .crumb{color:var(--on-k-3)}

/* glass data panel */
.hero--media .hpanel{
  background:rgba(18,21,26,.58);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
@supports not (backdrop-filter:blur(2px)){
  .hero--media .hpanel{background:rgba(12,15,19,.93)}
}
.hero--media .hpanel__h{background:rgba(255,255,255,.05);border-bottom-color:rgba(255,255,255,.1)}
.hero--media .hpanel__h b{color:#fff}
.hero--media .hpanel__h span{color:var(--on-k-3)}
.hero--media .hpr{border-bottom-color:rgba(255,255,255,.09)}
.hero--media .hpr__l b{color:#fff}
.hero--media .hpr__l span{color:var(--on-k-3)}
.hero--media .hpr__v b{color:#fff}
.hero--media .hpr__v i{background:rgba(241,90,34,.18);border-color:rgba(241,90,34,.42);color:var(--o-lt)}
.hero--media .hpanel__f{background:rgba(241,90,34,.16);border-top:1px solid rgba(255,255,255,.1);color:var(--on-k-2)}

/* stat rail */
.rail{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);margin-top:clamp(46px,5.5vw,76px);
}
.rail>div{padding:26px 22px;border-right:1px solid var(--line);text-align:center;display:flex;flex-direction:column;justify-content:center}
.rail>div:first-child{padding-left:22px}
.rail>div:last-child{border-right:none}
.rail b{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.6rem,2.5vw,2.15rem);letter-spacing:-.045em;color:var(--ink);line-height:1;
}
.rail span{display:block;margin-top:9px;font-size:.8rem;color:var(--muted);line-height:1.45}
@media (max-width:900px){
  .rail{grid-template-columns:repeat(2,1fr);gap:0}
  .rail>div{padding:22px 18px;border-bottom:1px solid var(--line)}
  .rail>div:first-child{padding-left:18px}
  .rail>div:nth-child(2n){border-right:none}
  .rail>div:last-child{grid-column:1/-1;border-bottom:none}
}
@media (max-width:980px){
  .hero__g{grid-template-columns:1fr}
  .hero__copy{max-width:none}
}

/* rail on the dark media hero */
.hero--media .rail{border-top-color:rgba(255,255,255,.14)}
.hero--media .rail>div{border-right-color:rgba(255,255,255,.14)}
.hero--media .rail b{color:#fff}
.hero--media .rail span{color:var(--on-k-3)}
@media (max-width:900px){
  .hero--media .rail>div{border-bottom-color:rgba(255,255,255,.14)}
}

/* mobile hero tuning */
@media (max-width:620px){
  .hero--media{padding-top:34px}
  .hero--media h1{font-size:clamp(2rem,8.6vw,2.7rem)}
  .hero__act .btn{width:100%}
  .hcar__d{width:32px}
  .hcar__cap{display:none}
}

/* ------------------------------------------------------------------ marquee rule */
.rule{background:var(--ink);color:var(--on-k-3);padding:13px 0;overflow:hidden;position:relative}
.rule__t{display:flex;width:max-content;animation:slide 34s linear infinite}
.rule__s{display:flex;align-items:center;gap:40px;padding-right:40px;flex:none}
.rule__s span{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:var(--fm);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
}
.rule__s span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--o);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
.rule:hover .rule__t{animation-play-state:paused}

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .28s var(--e),box-shadow .28s var(--e),transform .28s var(--e);
}
.card--lift:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
/* white card, orange step number — the only accent is the 01 / 02 / 03 index */
.card--tint .idx{color:var(--o)}
.band--k .card{background:var(--ink-2);border-color:var(--on-k-line)}
.band--k .card--lift:hover{border-color:var(--on-k-line-2);box-shadow:none}

.ico{
  width:40px;height:40px;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  background:var(--o-tint);color:var(--o);border:1px solid var(--o-tint-2);
  margin-bottom:20px;flex:none;
}
.band--k .ico{background:rgba(241,90,34,.14);border-color:rgba(241,90,34,.28);color:var(--o-lt)}
.band--o .ico{background:rgba(255,255,255,.16);border-color:var(--on-o-line);color:#fff}

.idx{
  display:block;font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.band--k .idx{color:var(--on-k-3)}
.band--o .idx{color:var(--on-o-2)}

.card h3{margin-bottom:11px}
.card p{font-size:.925rem;line-height:1.62}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tags span{
  font-size:.735rem;font-weight:600;color:var(--body);
  border:1px solid var(--line);background:var(--paper);
  padding:4px 10px;border-radius:100px;
}
.band--k .tags span{border-color:var(--on-k-line);background:rgba(255,255,255,.05);color:var(--on-k-2)}

/* generic grids */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,22px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,20px)}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ services grid */
.svcs{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,20px)}
.svc{grid-column:span 4}
.svc--h{grid-column:span 6}
.svc--f{grid-column:span 12}
@media (max-width:980px){.svc{grid-column:span 6}.svc--h{grid-column:span 6}}
@media (max-width:680px){.svc,.svc--h,.svc--f{grid-column:span 12}}

.svc--dark{background:var(--ink);border-color:var(--ink);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.svc--dark h3{color:#fff}
.svc--dark p{color:var(--on-k-3);max-width:60ch}
.svc--dark .idx{color:var(--o-lt)}
@media (max-width:680px){.svc--dark{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.band--k .proc{border-color:var(--on-k-line)}
.st{padding:34px 28px 0;border-right:1px solid var(--line);position:relative}
.band--k .st{border-color:var(--on-k-line)}
.st:first-child{padding-left:0}
.st:last-child{border-right:none}
.st::before{
  content:"";position:absolute;top:-1px;left:0;width:38px;height:3px;background:var(--o);
}
.st:first-child::before{left:0}
.st__ph{
  display:block;font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--o);margin-bottom:6px;
}
.st__dy{display:block;font-size:.78rem;color:var(--muted);margin-bottom:14px}
.band--k .st__dy{color:var(--on-k-3)}
.st h3{margin-bottom:10px}
.st p{font-size:.9rem;line-height:1.6}
@media (max-width:900px){
  .proc{grid-template-columns:1fr}
  .st{border-right:none;border-bottom:1px solid var(--line);padding:28px 0}
  .band--k .st{border-color:var(--on-k-line)}
  .st:last-child{border-bottom:none}
}

/* 6-step process (white label) */
.proc6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.band--k .proc6{background:var(--on-k-line);border-color:var(--on-k-line)}
.p6{background:var(--w);padding:clamp(24px,2.6vw,34px);position:relative;transition:background .28s var(--e)}
.band--k .p6{background:var(--ink)}
.p6:hover{background:var(--paper)}
.band--k .p6:hover{background:var(--ink-2)}
.p6__n{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;
  font-family:var(--fd);font-weight:800;font-size:.82rem;letter-spacing:-.02em;
  margin-bottom:18px;
}
.band--k .p6__n{background:var(--o)}
.p6 h3{margin-bottom:10px}
.p6 p{font-size:.9rem;line-height:1.62}
@media (max-width:900px){.proc6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.proc6{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ value list (numbered, editorial) */
.vlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.band--k .vlist{border-color:var(--on-k-line)}
.vl{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:clamp(26px,2.8vw,36px) clamp(20px,2.4vw,34px) clamp(26px,2.8vw,36px) 0;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
}
.band--k .vl{border-color:var(--on-k-line)}
.vl:nth-child(2n){padding-right:0;border-right:none;padding-left:clamp(20px,2.4vw,34px)}
.vl__n{
  font-family:var(--fd);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--o);line-height:1.4;
}
.vl h3{margin-bottom:10px}
.vl p{font-size:.93rem;line-height:1.64}
@media (max-width:820px){
  .vlist{grid-template-columns:1fr}
  .vl,.vl:nth-child(2n){padding:26px 0;border-right:none;padding-left:0}
}

/* ------------------------------------------------------------------ partner types */
.ptypes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
.pt{
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,2.6vw,34px);background:var(--w);position:relative;overflow:hidden;
  transition:border-color .28s var(--e),box-shadow .28s var(--e),transform .28s var(--e);
}
.pt:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.pt::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .38s var(--e-out)}
.pt:hover::before{transform:scaleX(1)}
.pt__n{
  font-family:var(--fd);font-weight:800;font-size:2.1rem;letter-spacing:-.05em;
  color:var(--paper-2);line-height:1;display:block;margin-bottom:16px;
}
.pt h3{margin-bottom:11px}
.pt p{font-size:.93rem}
@media (max-width:880px){.ptypes{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ split feature (text | facts) */
.split{display:grid;grid-template-columns:1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.facts{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.band--k .facts{border-color:var(--on-k-line)}
.fact{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:22px 24px;border-bottom:1px solid var(--line)}
.band--k .fact{border-color:var(--on-k-line)}
.fact:last-child{border-bottom:none}
.fact__k{font-family:var(--fd);font-weight:800;font-size:1.5rem;letter-spacing:-.045em;color:var(--o);line-height:1.15;min-width:78px}
.fact b{display:block;font-family:var(--fd);font-size:.95rem;letter-spacing:-.018em;color:var(--ink);margin-bottom:4px}
.band--k .fact b{color:#fff}
.fact p{font-size:.87rem;line-height:1.55}

/* ------------------------------------------------------------------ growth model */
.gm{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,36px)}
.gm__rows{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--w)}
.gmr{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2vw,28px);align-items:center;padding:20px clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line)}
.gmr:last-child{border-bottom:none}
.gmr:nth-child(odd){background:var(--paper)}
.gmc b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.04em;color:var(--body);line-height:1.05}
.gmc span{display:block;margin-top:6px;font-size:.79rem;color:var(--muted)}
.gmc--to b{color:var(--ink)}
.gmc--to small{font-size:.55em;font-weight:700;color:var(--o);letter-spacing:0;margin-left:6px}
.gma{display:flex;align-items:center;justify-content:center;color:var(--o);flex:none}
@media (max-width:600px){
  .gmr{grid-template-columns:1fr;gap:8px}
  .gma{justify-content:flex-start;transform:rotate(90deg);width:20px}
}
/* ── engine panel ──────────────────────────────────────────────────────
   Two stat cards either side of the engine ring. Each card carries a pill
   label that sits over its top edge; the "90 days in" card marks every
   improvement in green so the movement reads at a glance. */
.gme{background:none;border:none;border-radius:0;overflow:visible}
.gme__body{
  display:grid;grid-template-columns:1fr .84fr 1fr;
  gap:clamp(16px,2.2vw,30px);align-items:stretch;
}
.gme__side{
  position:relative;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--w);
  padding:clamp(26px,2.6vw,34px) clamp(18px,2vw,26px) clamp(14px,1.6vw,20px);
  box-shadow:var(--sh-1);
}
.gme__side--to{border-color:var(--o-tint-2)}
/* the pill label straddling the card's top edge */
.gme__k{
  position:absolute;top:0;left:clamp(18px,2vw,26px);transform:translateY(-50%);
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:var(--o);color:#fff;
  font-family:var(--fm);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(241,90,34,.8);
}

.gmv{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(12px,1.4vw,18px);
  padding:clamp(12px,1.4vw,16px) 0;border-bottom:1px solid var(--line);
}
.gmv:last-child{border-bottom:none;padding-bottom:2px}
.gmv__i{
  width:clamp(40px,3.6vw,48px);height:clamp(40px,3.6vw,48px);border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:var(--o-tint);color:var(--o);
}
.gmv__c{min-width:0}
.gmv b{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--fd);font-weight:800;font-size:clamp(1.3rem,2vw,1.75rem);
  letter-spacing:-.04em;line-height:1.05;color:var(--ink);
}
.gmv b em{
  display:inline-flex;align-items:center;gap:4px;
  font-style:normal;font-size:.5em;font-weight:700;letter-spacing:0;
  padding:4px 9px;border-radius:999px;
  background:var(--gr-tint);color:var(--gr);border:1px solid var(--gr-tint-2);
}
.gmv b em i{font-style:normal;font-size:.85em;line-height:1}
.gmv__c span{display:block;margin-top:5px;font-size:.79rem;color:var(--muted)}

/* ── the engine ring ── */
.gme__core{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,2vw,26px) 0;
  background:radial-gradient(58% 52% at 50% 46%,rgba(241,90,34,.08),transparent 70%);
}
.gme__net{position:relative;width:100%;max-width:300px;aspect-ratio:1/1;margin:0 auto;container-type:inline-size}
/* the dashed orbit the chips sit on */
.gme__net::before{
  content:"";position:absolute;inset:11%;border-radius:50%;
  border:1.5px dashed rgba(241,90,34,.34);
}
.gnd{
  position:absolute;left:50%;top:50%;
  width:clamp(42px,4.4vw,54px);height:clamp(42px,4.4vw,54px);
  margin:calc(clamp(42px,4.4vw,54px) / -2);
  border-radius:50%;display:grid;place-items:center;
  background:var(--o-tint);color:var(--o);border:1px solid var(--o-tint-2);
  box-shadow:0 8px 18px -12px rgba(12,15,19,.4);
  /* cqw = 1% of the ring's width, so the chips sit exactly on the dashed orbit */
  transform:rotate(var(--a)) translate(39cqw) rotate(calc(-1 * var(--a)));
  transform-origin:center;
}
.gme__net::before,.gnd{pointer-events:none}
.gme__orb{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40%;aspect-ratio:1/1;border-radius:50%;
  display:grid;place-items:center;padding:9%;
  background:var(--w);border:1px solid var(--line);
  box-shadow:0 0 0 10px rgba(241,90,34,.06),0 14px 34px -14px rgba(12,15,19,.22);
}
.gme__orb img{display:block;width:100%;height:auto;object-fit:contain}
.gme__name{
  margin-top:18px;font-family:var(--fm);font-size:.8rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--o);text-align:center;
}
.gme__sub{
  margin-top:7px;font-family:var(--fm);font-size:.69rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}
@media (max-width:900px){
  .gme__body{grid-template-columns:1fr;gap:clamp(26px,5vw,38px)}
  .gme__core{order:-1;padding:0 0 6px}
  .gme__net{max-width:250px}
}

/* One panel with a clear hierarchy: the profit figure is the headline, the two
   ratios sit beside it as supporting numbers. Dark panel — the same treatment
   as the "complete growth stack" card in Services (.svc--dark), so the two
   closing statements on the page read as one family. */
.gm__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(22px,3.4vw,52px);
  border:1px solid var(--ink);border-radius:var(--r-l);background:var(--ink);
  padding:clamp(24px,3vw,36px) clamp(24px,3.2vw,40px);
}
.gmf__hero{min-width:0}
.gmf__k{
  display:block;font-family:var(--fm);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--o-lt);
}
.gmf__v{
  display:block;margin-top:12px;font-family:var(--fd);font-weight:800;
  font-size:clamp(2.6rem,6vw,4.1rem);line-height:.94;letter-spacing:-.052em;
  color:#fff;
}
.gmf__side{display:flex;gap:clamp(26px,3.4vw,52px);flex:none}
.gmf__side>div{text-align:right}
.gmf__side span{
  display:block;font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-k-3);white-space:nowrap;
}
.gmf__side b{
  display:block;margin-top:9px;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.3rem,2vw,1.65rem);letter-spacing:-.042em;
  color:#fff;line-height:1;
}
.gmf__side b i{
  font-style:normal;font-family:var(--fm);font-weight:500;
  font-size:.6em;color:var(--on-k-3);margin-left:2px;
}
@media (max-width:640px){
  .gm__foot{align-items:flex-start}
  .gmf__side{width:100%;justify-content:space-between;gap:20px}
  .gmf__side>div{text-align:left}
}

/* ------------------------------------------------------------------ single deliverable
   One service presented as a full-width feature rather than a card in a grid. */
.deliverone{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);
  align-items:start;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,44px);
  box-shadow:var(--sh);
}
.deliverone__ico{
  display:grid;place-items:center;flex:none;
  width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);
  border-radius:var(--r-m,12px);
  background:var(--o-tint);color:var(--o);
}
.deliverone__b h3{
  font-family:var(--fd);font-weight:800;letter-spacing:-.028em;color:var(--ink);
  font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.2;
}
.deliverone__b p{
  margin-top:14px;max-width:70ch;font-size:clamp(.95rem,1.1vw,1.03rem);
  line-height:1.68;color:var(--body);
}
.deliverone__act{margin-top:24px}
@media (max-width:640px){
  .deliverone{grid-template-columns:1fr;gap:18px}
}

/* ------------------------------------------------------------------ inline calendar
   The Calendly embed on the contact page. The widget injects its own iframe
   into .cal__w, so the loading line sits behind it and is simply covered. */
.cal{
  position:relative;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh);overflow:hidden;
  /* A FLOOR while the widget loads — never a guess at its real height, or a
     shorter calendar leaves a blank band under itself. */
  min-height:520px;
  transition:min-height .3s var(--e);
}
.cal__load{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:.88rem;color:var(--muted);
}
.cal__w{position:relative;width:100%;min-height:520px}
.cal__w iframe{display:block;width:100%;min-height:520px;border:0}
.cal__alt{margin-top:14px;text-align:center;font-size:.85rem;color:var(--muted)}
.cal__alt a,.cal__fail a{color:var(--o);font-weight:600}
.cal__fail{padding:40px 20px;text-align:center;color:var(--muted);font-size:.9rem}

/* our own Calendly event header (Calendly's own block is hidden via
   hide_event_type_details=1) */
.calhd{padding:26px 26px 12px;text-align:center}
/* .calhd__t is the headline ("Discovery Call"); .calhd__n is the smaller
   "with <host>" line underneath it. */
.calhd__t{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.5rem,2.7vw,2.05rem);letter-spacing:-.038em;
  color:var(--ink);line-height:1.1;
}
.calhd__n{
  display:block;margin-top:8px;font-size:.92rem;font-weight:600;
  color:var(--muted);letter-spacing:-.005em;
}
.calhd__n b{font-weight:700;color:var(--body)}
.calhd__d{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  padding:5px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:.82rem;font-weight:600;color:var(--muted);
}
.calhd__d i{font-style:normal}
/* The iframe is sized from Calendly's own page_height message (app.v2.js);
   .is-sized drops the placeholder height and hides the cropped top padding so
   the calendar sits tight under the heading with no dead band above or below. */
.calhd__w{position:relative;width:100%;min-height:520px;overflow:hidden}
.calhd__w iframe{display:block;width:100%;min-height:520px;border:0}
.calhd__w.is-sized,.calhd__w.is-sized iframe{min-height:0}
@media (max-width:640px){
  .cal,.cal__w,.cal__w iframe{min-height:480px}
  .calhd{padding:20px 16px 10px}
  .calhd__w,.calhd__w iframe{min-height:480px}
  .calhd__w.is-sized,.calhd__w.is-sized iframe{min-height:0}
}

/* ------------------------------------------------------------------ comparison table */
.cmp{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--w)}
.band--k .cmp{border-color:var(--on-k-line);background:var(--ink-2)}
.cmp table{font-size:.92rem}
.cmp th,.cmp td{padding:16px clamp(16px,2vw,26px);text-align:left;border-bottom:1px solid var(--line)}
.band--k .cmp th,.band--k .cmp td{border-color:var(--on-k-line)}
.cmp thead th{
  font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--muted);background:var(--paper);
}
.band--k .cmp thead th{background:var(--ink-3);color:var(--on-k-3)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp td:first-child{font-weight:600;color:var(--ink)}
.band--k .cmp td:first-child{color:#fff}
.cmp td:nth-child(2){color:var(--ink);font-weight:600;background:var(--o-tint)}
.band--k .cmp td:nth-child(2){background:rgba(241,90,34,.1);color:#fff}
/* The Clixio column carries the same light tint all the way up, header
   included — no solid orange block. */
.cmp thead th:nth-child(2){background:var(--o-tint);color:var(--o)}
.band--k .cmp thead th:nth-child(2){background:rgba(241,90,34,.1);color:var(--o-lt)}
.cmp td:last-child{color:var(--muted)}
@media (max-width:640px){.cmp{overflow-x:auto}.cmp table{min-width:560px}}

/* ------------------------------------------------------------------ testimonials */
.tsts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
@media (max-width:960px){.tsts{grid-template-columns:1fr}}
.tst{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;
  transition:border-color .28s var(--e),box-shadow .28s var(--e),transform .28s var(--e);
}
.tst:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tst__s{color:var(--o);font-size:.9rem;letter-spacing:.14em;margin-bottom:16px}
.tst__x{font-size:.95rem;line-height:1.66;color:var(--ink-3);flex:1}
.tst__k{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0;padding:16px 0;border-block:1px solid var(--line)}
.tst__k b{display:block;font-family:var(--fd);font-weight:800;font-size:1.22rem;letter-spacing:-.04em;color:var(--o);line-height:1}
.tst__k span{display:block;margin-top:5px;font-size:.755rem;color:var(--muted)}
.tst__w{display:flex;align-items:center;gap:13px}
.tst__w img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none;border:1px solid var(--line)}
.tst__w b{display:block;font-family:var(--fd);font-size:.9rem;letter-spacing:-.018em;color:var(--ink)}
/* Client names stay private — only the name itself (.tst__nb) is blurred, so
   "Dr." and the credential still read clearly. The full name stays in the
   markup for screen readers and search engines. */
.tst__n{
  -webkit-user-select:none;user-select:none;
  pointer-events:none;cursor:default;
}
/* an <i>, not a <span>, so the ".tst__w span{display:block}" rule below can
   never push the name onto its own line — not even from a stale cached CSS. */
.tst__nb{
  display:inline;font-style:normal;
  filter:blur(4.5px);
}
@media (prefers-reduced-motion:no-preference){
  .tst__nb{transition:filter .3s var(--e)}
}
/* only the city line, never anything inside the <b> */
.tst__w>div>span{display:block;font-size:.775rem;color:var(--muted);margin-top:1px}

/* ------------------------------------------------------------------ founder */
/* Copy on the left, the "16 years" card on the right. */
.fnd{display:grid;grid-template-columns:1fr .78fr;gap:clamp(32px,5vw,72px);align-items:center;margin-bottom:clamp(46px,5vw,72px)}
@media (max-width:900px){.fnd{grid-template-columns:1fr}}
.fnd__card{
  border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(26px,3vw,38px);
  background:var(--paper);
}
.fnd__mono{
  font-family:var(--fd);font-weight:800;font-size:clamp(3rem,6vw,4.6rem);
  letter-spacing:-.06em;color:var(--ink);line-height:.9;
}
.fnd__mono small{display:block;font-size:.2em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px;font-family:var(--fm)}
.fnd__div{height:1px;background:var(--line);margin:26px 0}
.fnd__list{display:grid;gap:13px}
.fnd__list div{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:var(--body)}
.fnd__list svg{color:var(--o);flex:none;margin-top:4px}
.fnd__q{
  font-family:var(--fd);font-weight:700;font-size:clamp(1.05rem,1.55vw,1.32rem);
  line-height:1.44;letter-spacing:-.022em;color:var(--ink);
  border-left:3px solid var(--o);padding-left:22px;margin:24px 0;
}
.fnd__id{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.fnd__id b{display:block;font-family:var(--fd);font-size:1rem;letter-spacing:-.02em;color:var(--ink)}
.fnd__id span{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}
.li{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--ink);border:1px solid var(--line-2);padding:8px 15px;border-radius:var(--r-s);transition:border-color .22s var(--e),color .22s var(--e)}
.li:hover{border-color:var(--o);color:var(--o)}

/* ------------------------------------------------------------------ engagement panel */
.eng{display:grid;grid-template-columns:1fr .78fr;gap:clamp(32px,5vw,68px);align-items:center}
@media (max-width:900px){.eng{grid-template-columns:1fr}}
.eng__l{display:grid;gap:2px;margin-top:32px}
.eng__i{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.eng__i:last-child{border-bottom:none}
.eng__i>span{font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;color:var(--o);padding-top:3px}
.eng__i b{display:block;font-family:var(--fd);font-size:.98rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.eng__i p{font-size:.885rem}
.eng__p{background:var(--ink);border-radius:var(--r-l);padding:clamp(28px,3vw,38px);color:var(--on-k-2)}
.eng__p h3{color:#fff;margin-bottom:12px;font-size:clamp(1.15rem,1.7vw,1.4rem)}
.eng__p p{color:var(--on-k-3);font-size:.92rem}
.eng__p hr{border:none;height:1px;background:var(--on-k-line);margin:24px 0}
.eng__c{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.eng__c span{font-size:.82rem;color:var(--on-k-3)}
.eng__c b{font-family:var(--fd);font-size:.88rem;color:var(--o-lt)}
.eng__bar{height:5px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden}
.eng__bar i{display:block;height:100%;width:0;background:var(--o);border-radius:100px;transition:width 1.4s var(--e-out)}

/* ------------------------------------------------------------------ CTA */
.cta{text-align:center}
.cta .eb{justify-content:center}
.cta h2{max-width:24ch;margin-inline:auto}
.cta p{max-width:60ch;margin:20px auto 0;font-size:1.02rem}
.cta__act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.cta__p{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;margin-top:32px}
.cta__p div{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:500}
.cta__p svg{flex:none;opacity:.9}

/* ------------------------------------------------------------------ FAQ */
.faq{border-top:1px solid var(--line);max-width:880px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:-.022em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--o);border-bottom:2px solid var(--o);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 40px 24px 0;font-size:.93rem;line-height:1.68}

/* ------------------------------------------------------------------ footer */
.ft{
  background:
    radial-gradient(46% 60% at 88% 0%,rgba(241,90,34,.10),transparent 62%),
    var(--ink);
  color:var(--on-k-3);padding:clamp(56px,6vw,84px) 0 0;
  position:relative;overflow:hidden;isolation:isolate;
}
.ft::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid-k) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-k) 1px,transparent 1px);
  background-size:var(--grid-sz) var(--grid-sz);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 72%);
}
.ft__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,3.5vw,52px);padding-bottom:clamp(40px,4.5vw,60px)}
@media (max-width:900px){.ft__g{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__g{grid-template-columns:1fr}}
.ft__a{font-size:.875rem;color:var(--on-k-3);margin-top:20px;max-width:38ch;line-height:1.62}
.ft h4{color:#fff;margin-bottom:18px;font-size:.75rem;font-family:var(--fm);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--on-k-3)}
.ft ul{display:grid;gap:11px}
.ft ul li{font-size:.885rem;color:var(--on-k-2)}
.ft ul a{transition:color .2s var(--e)}
.ft ul a:hover{color:var(--o-lt)}
.ft__so{display:flex;gap:9px;margin-top:24px}
.ft__so a{
  width:36px;height:36px;border-radius:var(--r-xs);border:1px solid var(--on-k-line);
  display:flex;align-items:center;justify-content:center;color:var(--on-k-2);
  transition:border-color .22s var(--e),color .22s var(--e),background .22s var(--e);
}
.ft__so a:hover{border-color:var(--o);color:#fff;background:var(--o)}
.ft__b{
  border-top:1px solid var(--on-k-line);padding:22px 0;
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.8rem;color:var(--on-k-3);
}
.ft__b a:hover{color:#fff}

/* ------------------------------------------------------------------ back to top */
.top{
  position:fixed;right:22px;bottom:22px;z-index:40;
  width:42px;height:42px;border-radius:var(--r-s);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--e),transform .3s var(--e),visibility .3s,background .22s;
  box-shadow:var(--sh-3);
}
.top.is-on{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--o)}

/* ------------------------------------------------------------------ page header (inner pages) */
.phead{background:var(--paper);border-bottom:1px solid var(--line);padding:clamp(40px,5vw,72px) 0 clamp(46px,5.5vw,80px)}
.crumb{display:flex;align-items:center;gap:9px;font-size:.79rem;color:var(--muted);margin-bottom:24px}
.crumb a:hover{color:var(--o)}
.crumb svg{opacity:.5}
.phead h1{font-size:clamp(2.1rem,4.4vw,3.5rem);margin-bottom:20px;max-width:17ch}
.phead .lead{max-width:60ch}
.phead__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ------------------------------------------------------------------ forms */
.fwrap{
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(26px,3vw,40px);box-shadow:var(--sh-2);
}
.fwrap>h3{margin-bottom:8px;font-size:clamp(1.15rem,1.7vw,1.4rem)}
.fwrap>p.fsub{font-size:.9rem;margin-bottom:26px}

/* ---- the booking calendar sitting in the form card (contact page) ----
   The calendar bleeds to the card edges so it reads as one panel: heading and
   footnote keep the card padding, the calendar itself spans edge to edge. */
.fwrap--cal{padding-bottom:clamp(6px,1vw,12px);overflow:hidden}
.fwrap--cal>p.fsub{margin-bottom:clamp(18px,2vw,24px)}
.fwrap--cal .cal{
  margin-inline:calc(-1 * clamp(26px,3vw,40px));
  border-inline:none;border-radius:0;box-shadow:none;
  min-height:520px;
}
.fwrap--cal .cal__w,
.fwrap--cal .cal__w iframe,
.fwrap--cal .calhd__w,
.fwrap--cal .calhd__w iframe{min-height:520px}
/* once the real height arrives, nothing keeps a floor under it */
.fwrap--cal .calhd__w.is-sized,
.fwrap--cal .calhd__w.is-sized iframe{min-height:0}
.fwrap--cal .cal:has(.calhd__w.is-sized){min-height:0}
.fwrap--cal .cal__alt{margin-top:14px;margin-bottom:0}
/* between these widths the card is narrow enough that Calendly stacks the
   calendar above the time list, which needs noticeably more height */
@media (min-width:921px) and (max-width:1179px){
  .fwrap--cal .cal,
  .fwrap--cal .cal__w,.fwrap--cal .cal__w iframe,
  .fwrap--cal .calhd__w,.fwrap--cal .calhd__w iframe{min-height:520px}
  .fwrap--cal .calhd__w.is-sized,.fwrap--cal .calhd__w.is-sized iframe{min-height:0}
}
@media (max-width:640px){
  .fwrap--cal .cal,
  .fwrap--cal .cal__w,.fwrap--cal .cal__w iframe,
  .fwrap--cal .calhd__w,.fwrap--cal .calhd__w iframe{min-height:480px}
  .fwrap--cal .calhd__w.is-sized,.fwrap--cal .calhd__w.is-sized iframe{min-height:0}
}

.form{display:grid;gap:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.frow{grid-template-columns:1fr}}

.fld{display:grid;gap:7px;min-width:0}
.fld label{
  font-family:var(--fd);font-size:.79rem;font-weight:700;letter-spacing:-.005em;color:var(--ink);
  display:flex;align-items:center;gap:6px;
}
.fld label i{font-style:normal;color:var(--o);font-size:.9em}
.fld label span{font-weight:500;color:var(--muted);font-size:.94em}

.fld input,.fld select,.fld textarea{
  font-family:var(--fb);font-size:.93rem;color:var(--ink);
  background:var(--w);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:12px 14px;width:100%;
  transition:border-color .2s var(--e),box-shadow .2s var(--e),background .2s var(--e);
  appearance:none;-webkit-appearance:none;
}
.fld textarea{resize:vertical;min-height:118px;line-height:1.6}
.fld select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237B838F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer;
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--muted)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--o);box-shadow:0 0 0 3px rgba(241,90,34,.12);
}
.fld input:user-invalid,.fld textarea:user-invalid,.fld select:user-invalid{border-color:#C6392B}
.fld .err{font-size:.76rem;color:#C6392B;display:none}
.fld input:user-invalid ~ .err,.fld textarea:user-invalid ~ .err,.fld select:user-invalid ~ .err{display:block}

.fcheck{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin-top:2px}
.fcheck input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border:1px solid var(--line-2);border-radius:var(--r-xs);
  background:var(--w);cursor:pointer;margin-top:2px;flex:none;
  transition:background .18s var(--e),border-color .18s var(--e);
}
.fcheck input:checked{
  background:var(--o) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--o);
}
.fcheck input:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.fcheck label{font-size:.83rem;color:var(--body);line-height:1.55;cursor:pointer}
.fcheck a{color:var(--o);font-weight:600}

.fnote{font-size:.79rem;color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:2px}
.fnote svg{color:var(--o);flex:none}
.fnote a{color:var(--o);font-weight:600}
/* Plain sentence variant — the flex layout above is for the icon + label form. */
.fnote--text{display:block;line-height:1.6;margin-top:4px}

/* ------------------------------------------------------------------ address + geolocation
   The address input sits full width; the detect button lives on its own row
   underneath, with the status line beside it. */
.geo{display:grid;gap:11px}
.geo input{width:100%}

.geo__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.geo__btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 15px 8px 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--w),var(--paper));
  color:var(--ink);font:600 .8rem/1 inherit;white-space:nowrap;
  box-shadow:0 1px 2px rgba(12,15,19,.05);
  transition:border-color .22s var(--e),box-shadow .22s var(--e),transform .22s var(--e),color .22s var(--e);
}
.geo__btn:hover{
  border-color:var(--o);color:var(--o-dk);
  box-shadow:0 3px 12px -4px rgba(228,87,46,.45);
  transform:translateY(-1px);
}
.geo__btn:active{transform:translateY(0)}
.geo__btn:focus-visible{outline:2px solid var(--o);outline-offset:2px}

.geo__pin{
  display:grid;place-items:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--o-tint);color:var(--o);
  transition:background .22s var(--e);
}
.geo__btn:hover .geo__pin{background:var(--o);color:#fff}

.geo__note{
  font-size:.78rem;color:var(--muted);line-height:1.45;
  display:inline-flex;align-items:center;gap:6px;
}
.geo__note.is-ok{color:var(--ok,#1F7A4D)}
.geo__note.is-ok::before{
  content:"";flex:none;width:13px;height:13px;border-radius:50%;
  background:var(--ok,#1F7A4D) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.geo__note.is-bad{color:#C6392B}

/* Detecting… */
[data-geo].is-busy .geo__btn{pointer-events:none;color:var(--muted)}
[data-geo].is-busy .geo__pin{background:var(--paper-2)}
[data-geo].is-busy .geo__pin svg{animation:geospin .9s linear infinite;transform-origin:50% 50%}
@keyframes geospin{to{transform:rotate(360deg)}}

@media (max-width:520px){
  .geo__btn{width:100%;justify-content:center}
  .geo__note{width:100%}
}

.fok{
  display:none;gap:14px;align-items:flex-start;
  background:var(--o-tint);border:1px solid var(--o-tint-2);border-radius:var(--r);
  padding:18px 20px;
}
.fok.is-on{display:grid;grid-template-columns:auto 1fr}
.fok svg{color:var(--o);margin-top:2px}
.fok b{display:block;font-family:var(--fd);font-size:.95rem;color:var(--ink);margin-bottom:3px}
.fok p{font-size:.86rem}

.ferr{
  display:none;gap:14px;align-items:flex-start;
  background:#FDF2F1;border:1px solid #F3D4D0;border-radius:var(--r);
  padding:18px 20px;margin-bottom:20px;
}
.ferr.is-on{display:grid;grid-template-columns:auto 1fr}
.ferr svg{color:#C6392B;margin-top:2px}
.ferr b{display:block;font-family:var(--fd);font-size:.95rem;color:var(--ink);margin-bottom:3px}
.ferr p{font-size:.86rem}
.ferr a{color:#C6392B;font-weight:600}

/* contact detail cards */
.cinfo{display:grid;gap:2px}
.ci{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:none}
.ci__i{
  width:38px;height:38px;border-radius:var(--r-s);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--o-tint);border:1px solid var(--o-tint-2);color:var(--o);
}
.ci b{display:block;font-family:var(--fd);font-size:.95rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.ci p{font-size:.885rem;line-height:1.6}
.ci a{color:var(--o);font-weight:600}
.ci a:hover{text-decoration:underline}

.cgrid{display:grid;grid-template-columns:1fr .84fr;gap:clamp(28px,4vw,56px);align-items:start}
/* the calendar needs more room than the old form did, so it gets the wider column */
.cgrid--cal{grid-template-columns:1.32fr .68fr;gap:clamp(26px,3vw,44px)}
@media (max-width:920px){.cgrid,.cgrid--cal{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ reveal */
.rv{opacity:0;transform:translateY(14px)}
.js .rv{transition:opacity .62s var(--e-out),transform .62s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.07s}
.rv-2{transition-delay:.14s}
.rv-3{transition-delay:.21s}
.rv-4{transition-delay:.28s}
html:not(.js) .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}}

/* ------------------------------------------------------------------ print */
@media print{
  .util,.hdr,.drawer,.top,.rule,.wlstrip{display:none!important}
  .band{padding:24px 0;break-inside:avoid}
  .rv{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   BOOKING MODAL — Calendly-style popup enquiry form
   Injected by app.v2.js on first open. Two-pane: event detail rail + form.
   ========================================================================== */
.bkm{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  visibility:hidden;opacity:0;
  transition:opacity .26s var(--e),visibility 0s linear .26s;
}
.bkm.is-on{visibility:visible;opacity:1;transition:opacity .26s var(--e)}

.bkm__veil{
  position:absolute;inset:0;
  background:rgba(12,15,19,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}

.bkm__box{
  position:relative;
  width:100%;max-width:940px;max-height:calc(100vh - 48px);
  display:grid;grid-template-columns:320px 1fr;
  background:var(--w);
  border-radius:var(--r-l);
  box-shadow:0 40px 90px -30px rgba(12,15,19,.55);
  overflow:hidden;
  transform:translateY(16px) scale(.985);
  transition:transform .34s var(--e-out);
}
.bkm.is-on .bkm__box{transform:none}
@media (prefers-reduced-motion:reduce){
  .bkm,.bkm__box{transition:none}
}

/* ------------------------------------------------------------ close */
.bkm__x{
  position:absolute;top:12px;right:12px;z-index:4;
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--w);color:var(--body);cursor:pointer;
  transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e);
}
.bkm__x:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.bkm__x:focus-visible{outline:2px solid var(--o);outline-offset:2px}

/* ------------------------------------------------------------ left rail */
.bkm__side{
  background:var(--ink);color:var(--on-k);
  padding:34px 30px;
  display:flex;flex-direction:column;gap:22px;
  position:relative;overflow:hidden;
}
.bkm__side::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--grid-k) 1px,transparent 1px) 0 0/var(--grid-sz) var(--grid-sz),
    linear-gradient(90deg,var(--grid-k) 1px,transparent 1px) 0 0/var(--grid-sz) var(--grid-sz),
    radial-gradient(60% 50% at 20% 0%,var(--wash-o),transparent 70%);
}
.bkm__side>*{position:relative;z-index:1}

.bkm__eb{
  font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--o-lt);display:flex;align-items:center;gap:8px;
}

.bkm__side h2{
  font-family:var(--fd);font-weight:800;line-height:1.2;
  font-size:1.5rem;color:#fff;letter-spacing:-.015em;
}
.bkm__side>p{font-size:.87rem;color:var(--on-k-2);line-height:1.6}

.bkm__meta{list-style:none;display:grid;gap:11px;margin-top:2px}
.bkm__meta li{
  display:flex;align-items:center;gap:10px;
  font-size:.85rem;color:var(--on-k-2);font-weight:500;
}
.bkm__meta svg{color:var(--o-lt);flex:none}

.bkm__tl{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--on-k-line);
  display:grid;gap:12px;
}
.bkm__tl b{
  font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-k-3);font-weight:500;
}
.bkm__tl ol{list-style:none;display:grid;gap:9px;counter-reset:bkstep}
.bkm__tl li{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;
  font-size:.82rem;color:var(--on-k-2);
}
.bkm__tl li::before{
  counter-increment:bkstep;content:counter(bkstep,decimal-leading-zero);
  font-family:var(--fm);font-size:.68rem;color:var(--o-lt);
}
.bkm__tl li span{color:var(--on-k-3);font-family:var(--fm);font-size:.72rem;white-space:nowrap}

/* ------------------------------------------------------------ right pane */
.bkm__main{
  display:flex;flex-direction:column;min-width:0;
  background:var(--w);
}

.bkm__form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.bkm__prog{height:3px;background:var(--paper-2);flex:none}
.bkm__prog i{
  display:block;height:100%;width:50%;background:var(--o);
  transition:width .35s var(--e-out);
}

.bkm__hd{
  padding:22px 58px 0 30px;flex:none;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.bkm__hd h3{font-family:var(--fd);font-size:1.08rem;color:var(--ink);letter-spacing:-.01em}
.bkm__hd em{
  font-style:normal;font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}

.bkm__scroll{
  padding:18px 30px 26px;
  overflow-y:auto;flex:1 1 auto;
  overscroll-behavior:contain;
}

.bkm__step{display:none;gap:16px}
.bkm__step.is-on{display:grid}

.bkm__foot{
  flex:none;padding:16px 30px;
  border-top:1px solid var(--line);background:var(--paper);
  display:flex;align-items:center;gap:12px;justify-content:space-between;
}
.bkm__foot .btn{flex:none}
.bkm__back{
  background:none;border:0;cursor:pointer;padding:8px 2px;
  font-family:var(--fb);font-size:.85rem;font-weight:600;color:var(--body);
  display:inline-flex;align-items:center;gap:7px;
  transition:color .2s var(--e);
}
.bkm__back:hover{color:var(--ink)}
.bkm__back:focus-visible{outline:2px solid var(--o);outline-offset:3px}
.bkm__back[hidden]{display:none}
.bkm__spacer{flex:1 1 auto}

.bkm__trust{
  font-size:.76rem;color:var(--muted);
  display:flex;align-items:center;gap:7px;
}
.bkm__trust svg{color:var(--o);flex:none}

/* ------------------------------------------------------------ done state */
.bkm__done{display:none;padding:52px 34px;text-align:center}
.bkm__done.is-on{display:block}
.bkm__done .bkm__tick{
  width:56px;height:56px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--o-tint);color:var(--o);
}
.bkm__done h3{font-family:var(--fd);font-size:1.35rem;color:var(--ink);margin-bottom:10px}
.bkm__done p{font-size:.92rem;max-width:42ch;margin:0 auto 8px}
.bkm__done .bkm__ref{
  font-family:var(--fm);font-size:.78rem;color:var(--muted);margin-top:18px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width:860px){
  .bkm{padding:0;align-items:stretch}
  .bkm__box{
    max-width:none;max-height:none;height:100%;border-radius:0;
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
  }
  .bkm__side{padding:22px 22px 20px;gap:12px}
  .bkm__side h2{font-size:1.22rem}
  .bkm__side>p{display:none}
  .bkm__tl{display:none}
  .bkm__meta li{font-size:.8rem}
  .bkm__meta{grid-template-columns:1fr;gap:8px}
  .bkm__hd,.bkm__scroll,.bkm__foot{padding-inline:22px}
  .bkm__main{min-height:0}
}
@media (max-width:560px){
  .bkm__trust{display:none}
  .bkm__foot .btn{flex:1 1 auto;justify-content:center}
  .bkm__side .bkm__meta li:nth-child(3){display:none}
}

/* Modal reuses .fld / .frow / .fcheck from the page form. Tighten for the panel.
   Validation styling is gated on .was-tried instead of :user-invalid alone —
   submitting step 1 flips :user-invalid on the whole form, which would otherwise
   paint step 2 red before the visitor has even seen it. */
.bkm__step .fld input:user-invalid,
.bkm__step .fld select:user-invalid,
.bkm__step .fld textarea:user-invalid{border-color:var(--line)}
.bkm__step .fld input:user-invalid ~ .err,
.bkm__step .fld select:user-invalid ~ .err,
.bkm__step .fld textarea:user-invalid ~ .err{display:none}

.bkm__step.was-tried .fld input:user-invalid,
.bkm__step.was-tried .fld select:user-invalid,
.bkm__step.was-tried .fld textarea:user-invalid{border-color:#C6392B}
.bkm__step.was-tried .fld input:user-invalid ~ .err,
.bkm__step.was-tried .fld select:user-invalid ~ .err,
.bkm__step.was-tried .fld textarea:user-invalid ~ .err{display:block}

.bkm__step .frow{gap:14px}
.bkm__step .fld textarea{min-height:96px}

/* ==========================================================================
   WHITE LABEL — EDITORIAL EDITION
   A page-scoped layer. Same palette (orange accent, charcoal weight, paper
   ground); different architecture: magazine section rules, hanging numerals,
   hairline columns, no card soup. Nothing here leaks to other pages.
   ========================================================================== */
[data-page="white-label.php"]{
  --wl-hair:var(--line);
  --wl-ink:var(--ink);
}
/* the ambient grid is dropped here — the editorial layout wants clean paper */
[data-page="white-label.php"] .band::before{content:none}
[data-page="white-label.php"] .band{padding:clamp(64px,8vw,124px) 0}
[data-page="white-label.php"] .split{align-items:start;grid-template-columns:1fr 1.06fr;gap:clamp(30px,5vw,80px)}
[data-page="white-label.php"] .split>div:first-child{position:sticky;top:calc(var(--hdr) + 40px)}
@media (max-width:900px){[data-page="white-label.php"] .split{grid-template-columns:1fr}[data-page="white-label.php"] .split>div:first-child{position:static}}

/* ------------------------------------------------------------------ wl hero */
.wlh{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px);
  background:
    radial-gradient(46% 44% at 92% 0%,rgba(241,90,34,.075),transparent 62%),
    radial-gradient(38% 36% at 0% 88%,rgba(12,15,19,.035),transparent 66%),
    var(--w);
}
.wlh .crumb{margin-bottom:clamp(28px,3.6vw,44px)}

/* the masthead rule: mono index left, section name, live status right */
.wlh__mast{
  display:flex;align-items:flex-end;gap:18px;
  padding-bottom:14px;border-bottom:1px solid var(--wl-ink);
  margin-bottom:clamp(26px,3.4vw,42px);
}
.wlh__mast em{
  font-style:normal;font-family:var(--fm);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--o);
}
.wlh__mast b{
  font-family:var(--fm);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.wlh__mast i{
  font-style:normal;margin-left:auto;font-family:var(--fm);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
@media (max-width:620px){.wlh__mast i{display:none}}

.wlh h1{
  font-size:clamp(2.6rem,6.4vw,5rem);line-height:.98;letter-spacing:-.045em;
  max-width:15ch;margin-bottom:clamp(28px,3.4vw,44px);
}
.wlh__g{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,68px);align-items:start;
}
.wlh__l{position:relative;padding-top:26px;border-top:1px solid var(--wl-hair)}
.wlh__l .lead{max-width:46ch}
.wlh__l>p{margin-top:16px;max-width:52ch;font-size:.96rem}
.wlh__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.wlticks{display:grid;gap:9px;margin-top:30px}
.wlticks span{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--fm);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.wlticks span::before{
  content:"";width:6px;height:6px;background:var(--o);flex:none;
  transform:rotate(45deg);
}
@media (max-width:900px){.wlh__g{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ ledger
   The hero's right column: a ruled statement of account, not a boxed card. */
.wlled{padding-top:26px;border-top:1px solid var(--wl-ink)}
.wlled__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.wlled__h b{color:var(--ink);font-family:var(--fd);font-size:.92rem;letter-spacing:-.02em;text-transform:none}
.wlled__r{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:17px 0;border-bottom:1px solid var(--wl-hair);
}
.wlled__r b{display:block;font-family:var(--fd);font-size:.94rem;letter-spacing:-.02em;color:var(--ink)}
.wlled__r span{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.wlled__x{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o);
}
.wlled__x::before{content:"";width:20px;height:1px;background:var(--o);flex:none}
.wlled__f{
  margin-top:22px;padding:20px 22px;background:var(--o-tint);
  border:1px solid var(--o-tint-2);border-radius:var(--r);
}
.wlled__f span{
  display:block;font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o-dp);margin-bottom:6px;
}
.wlled__f b{font-family:var(--fd);font-size:1.02rem;letter-spacing:-.026em;color:var(--ink)}

/* ------------------------------------------------------------------ light strip */
.wlstrip{
  background:var(--paper);border-block:1px solid var(--line);
  padding:15px 0;overflow:hidden;position:relative;
}
.wlstrip__t{display:flex;width:max-content;animation:slide 40s linear infinite}
.wlstrip__s{display:flex;align-items:center;gap:46px;padding-right:46px;flex:none}
.wlstrip__s span{
  display:inline-flex;align-items:center;gap:13px;white-space:nowrap;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);
}
.wlstrip__s span::before{content:"";width:5px;height:5px;background:var(--o);transform:rotate(45deg);flex:none}
.wlstrip:hover .wlstrip__t{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.wlstrip__t{animation:none}}

/* ------------------------------------------------------------------ section rule */
.wlkick{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:13px;border-bottom:1px solid var(--wl-ink);
  margin-bottom:clamp(30px,3.8vw,50px);
}
.wlkick em{
  font-style:normal;font-family:var(--fm);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;color:var(--o);
}
.wlkick b{
  font-family:var(--fm);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.wlkick i{
  font-style:normal;margin-left:auto;font-family:var(--fm);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
@media (max-width:640px){.wlkick i{display:none}}

/* headline + standfirst, magazine style */
.wlhd{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(26px,5vw,72px);align-items:end;margin-bottom:clamp(34px,4.4vw,60px)}
.wlhd h2{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.02;letter-spacing:-.042em}
.wlhd p{font-size:1rem;max-width:54ch}
.wlhd--s{grid-template-columns:1fr;max-width:660px}
.wlhd--s h2{font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.06}
.wlhd--c{grid-template-columns:1fr;text-align:center;max-width:none}
.wlhd--c h2{max-width:22ch;margin-inline:auto}
.wlhd--c p{margin-inline:auto;margin-top:18px}
@media (max-width:880px){.wlhd{grid-template-columns:1fr;align-items:start;gap:18px}}

/* ------------------------------------------------------------------ ruled list */
.wlnum{border-top:1px solid var(--wl-hair)}
.wlni{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,30px);
  padding:clamp(20px,2.4vw,26px) 0;border-bottom:1px solid var(--wl-hair);
  align-items:start;transition:background .3s var(--e);
}
.wlni__n{
  font-family:var(--fd);font-weight:800;font-size:1.5rem;line-height:1;
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.1px var(--faint);
  min-width:2.4ch;transition:-webkit-text-stroke-color .3s var(--e),color .3s var(--e);
}
.wlni:hover .wlni__n{-webkit-text-stroke-color:var(--o)}
.wlni b{display:block;font-family:var(--fd);font-size:1rem;letter-spacing:-.024em;color:var(--ink);margin-bottom:5px}
.wlni p{font-size:.9rem;line-height:1.6;max-width:60ch}

/* ------------------------------------------------------------------ partner columns */
.wlparts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--wl-ink)}
.wlpt{
  position:relative;padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,34px) clamp(30px,3.2vw,44px) 0;
  border-right:1px solid var(--wl-hair);
}
.wlpt+.wlpt{padding-left:clamp(22px,2.4vw,34px)}
.wlpt:last-child{border-right:none;padding-right:0}
.wlpt::before{
  content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--o);
  transition:width .55s var(--e-out);
}
.wlpt:hover::before{width:100%}
.wlpt__n{
  display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(2.4rem,3.6vw,3.1rem);line-height:.9;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.3px var(--faint);
  margin-bottom:22px;transition:-webkit-text-stroke-color .35s var(--e);
}
.wlpt:hover .wlpt__n{-webkit-text-stroke-color:var(--o)}
.wlpt h3{font-size:clamp(1.15rem,1.6vw,1.38rem);letter-spacing:-.03em;margin-bottom:12px}
.wlpt p{font-size:.93rem;line-height:1.64;max-width:38ch}
.wlmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--fm);font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.wlmeta i{font-style:normal;color:var(--o-lt)}
@media (max-width:880px){
  .wlparts{grid-template-columns:1fr}
  .wlpt,.wlpt+.wlpt{padding:26px 0 30px;border-right:none;border-bottom:1px solid var(--wl-hair)}
  .wlpt:last-child{border-bottom:none}
}

/* ------------------------------------------------------------------ process grid */
.wlproc{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(24px,3.4vw,52px);row-gap:0;
}
.wlp{
  padding:clamp(22px,2.6vw,32px) 0 clamp(26px,3vw,38px);
  border-top:1px solid var(--wl-hair);position:relative;
}
.wlp::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--ink);
  transition:width .55s var(--e-out);
}
.wlp:hover::before{width:100%}
.wlp__n{
  display:block;font-family:var(--fm);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;color:var(--muted);margin-bottom:16px;
  transition:color .3s var(--e);
}
.wlp:hover .wlp__n{color:var(--o)}
.wlp h3{font-size:1.1rem;letter-spacing:-.026em;margin-bottom:10px}
.wlp p{font-size:.9rem;line-height:1.62}
@media (max-width:900px){.wlproc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.wlproc{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ value rows */
.wlval{border-top:1px solid var(--wl-ink)}
.wlv{
  display:grid;grid-template-columns:clamp(74px,10vw,150px) 1fr;
  gap:clamp(18px,3vw,44px);align-items:start;
  padding:clamp(26px,3.2vw,42px) 0;border-bottom:1px solid var(--wl-hair);
}
.wlv__n{
  font-family:var(--fd);font-weight:800;line-height:.86;letter-spacing:-.055em;
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  color:transparent;-webkit-text-stroke:1.4px var(--faint);
  transition:-webkit-text-stroke-color .35s var(--e);
}
.wlv:hover .wlv__n{-webkit-text-stroke-color:var(--o)}
.wlv h3{font-size:clamp(1.18rem,1.9vw,1.5rem);letter-spacing:-.03em;margin-bottom:11px}
.wlv p{font-size:.97rem;line-height:1.68;max-width:76ch}
@media (max-width:640px){
  .wlv{grid-template-columns:1fr;gap:12px}
  .wlv__n{font-size:2.1rem}
}

/* ------------------------------------------------------------------ feature block */
.wlfeat{
  position:relative;background:var(--w);border:1px solid var(--line);
  padding:clamp(30px,4vw,58px);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(22px,3.4vw,44px);align-items:center;
}
.wlfeat::before,.wlfeat::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.wlfeat::before{top:-1px;left:-1px;border-top:2px solid var(--o);border-left:2px solid var(--o)}
.wlfeat::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--o);border-right:2px solid var(--o)}
.wlfeat__ico{
  display:grid;place-items:center;flex:none;
  width:clamp(52px,5vw,62px);height:clamp(52px,5vw,62px);
  border:1px solid var(--o-tint-2);background:var(--o-tint);color:var(--o);border-radius:var(--r-s);
}
.wlfeat__b h3{font-size:clamp(1.3rem,2.3vw,1.85rem);letter-spacing:-.032em;line-height:1.16}
.wlfeat__b p{margin-top:14px;max-width:66ch;font-size:.98rem;line-height:1.68}
@media (max-width:900px){
  .wlfeat{grid-template-columns:1fr;gap:20px;align-items:start}
}

/* ------------------------------------------------------------------ comparison */
.wlcmp{overflow-x:auto}
.wlcmp table{width:100%;font-size:.94rem;min-width:600px}
.wlcmp thead th{
  padding:0 clamp(14px,2vw,24px) 14px;text-align:left;
  font-family:var(--fm);font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--wl-ink);
}
.wlcmp thead th:first-child{padding-left:0}
.wlcmp thead th:nth-child(2){color:var(--o)}
.wlcmp td{padding:18px clamp(14px,2vw,24px);border-bottom:1px solid var(--wl-hair);vertical-align:top}
.wlcmp td:first-child{padding-left:0;font-family:var(--fd);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.wlcmp td:nth-child(2){background:var(--o-tint);color:var(--ink);font-weight:600}
.wlcmp td:last-child{color:var(--muted)}
.wlcmp tbody tr:last-child td{border-bottom:1px solid var(--wl-ink)}
.wlnote{margin-top:20px;font-size:.88rem;color:var(--muted);text-align:center}

/* ------------------------------------------------------------------ faq */
.wlfaq{border-top:1px solid var(--wl-ink);max-width:900px;margin-inline:auto}
.wlfaq details{border-bottom:1px solid var(--wl-hair)}
.wlfaq summary{
  list-style:none;cursor:pointer;position:relative;
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,24px);align-items:start;
  padding:24px 0;font-family:var(--fd);font-weight:700;
  font-size:clamp(1rem,1.35vw,1.14rem);letter-spacing:-.026em;color:var(--ink);
  transition:color .22s var(--e);
}
.wlfaq summary:hover{color:var(--o)}
.wlfaq summary::-webkit-details-marker{display:none}
.wlfaq summary em{
  font-style:normal;font-family:var(--fm);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;color:var(--o);padding-top:.4em;
}
.wlfaq__pm{position:relative;width:13px;height:13px;flex:none;margin-top:.42em}
.wlfaq__pm::before,.wlfaq__pm::after{
  content:"";position:absolute;left:0;top:6px;width:13px;height:1.5px;background:var(--o);
  transition:transform .3s var(--e);
}
.wlfaq__pm::after{transform:rotate(90deg)}
.wlfaq details[open] .wlfaq__pm::after{transform:rotate(0)}
.wlfaq p{
  padding:0 34px 26px calc(clamp(14px,2vw,24px) + 3.4ch);
  font-size:.95rem;line-height:1.7;max-width:82ch;
}
@media (max-width:600px){.wlfaq p{padding-left:0}}

/* ------------------------------------------------------------------ closing panel */
.wlend{
  position:relative;overflow:hidden;text-align:center;
  background:var(--ink);border-radius:var(--r-l);
  padding:clamp(42px,6vw,86px) clamp(22px,4vw,64px);
  background-image:
    radial-gradient(48% 60% at 88% 0%,rgba(241,90,34,.20),transparent 62%),
    radial-gradient(44% 54% at 6% 100%,rgba(241,90,34,.10),transparent 66%);
}
.wlend__k{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--o-lt);margin-bottom:22px;
}
.wlend__k::before,.wlend__k::after{content:"";width:26px;height:1px;background:rgba(255,122,69,.5)}
.wlend h2{
  color:#fff;font-size:clamp(1.9rem,4vw,3.05rem);line-height:1.04;
  letter-spacing:-.042em;max-width:20ch;margin-inline:auto;
}
.wlend h2 .hl{color:var(--o-lt)}
.wlend>p{color:var(--on-k-2);max-width:58ch;margin:22px auto 0;font-size:1rem}
.wlend__act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.wlend__p{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;
  margin-top:36px;padding-top:26px;border-top:1px solid var(--on-k-line);
}
.wlend__p span{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-k-3);
}
.wlend__p span::before{content:"";width:5px;height:5px;background:var(--o-lt);transform:rotate(45deg);flex:none}

/* ==========================================================================
   BLOG — index, cards, article
   Same tokens as the rest of the site: paper ground, hairline rules, orange
   used as an accent only. Nothing here is loaded conditionally, so a post
   page and the marketing pages share one stylesheet and one cache entry.
   ========================================================================== */

/* ------------------------------------------------------------- announce bar */
.abar{
  background:var(--ink);color:var(--on-k-2);position:relative;z-index:60;
  font-size:.83rem;padding:11px 0;
}
.abar__in{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center}
.abar a{
  display:inline-flex;align-items:center;gap:6px;color:var(--o-lt);
  font-weight:700;border-bottom:1px solid transparent;
}
.abar a:hover{border-color:currentColor}
@media (max-width:600px){.abar{font-size:.78rem;padding:9px 0}.abar__in{gap:8px}}

/* ------------------------------------------------------------------ hero */
.bhero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(38px,5vw,68px) 0 clamp(30px,3.6vw,48px);
  background:
    radial-gradient(44% 42% at 92% 0%,rgba(241,90,34,.08),transparent 62%),
    var(--w);
  border-bottom:1px solid var(--line);
}
.bhero__g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,64px);align-items:end}
.bhero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);letter-spacing:-.042em;line-height:1.02;max-width:16ch}
.bhero .lead{max-width:52ch}
@media (max-width:880px){.bhero__g{grid-template-columns:1fr;align-items:start;gap:20px}}

.bsearch{
  display:flex;align-items:center;gap:10px;margin-top:22px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--w);
  padding:7px 8px 7px 14px;max-width:460px;
  transition:border-color .2s var(--e),box-shadow .2s var(--e);
}
.bsearch:focus-within{border-color:var(--line-2);box-shadow:var(--sh-1)}
.bsearch svg{color:var(--muted);flex:none}
.bsearch input{
  flex:1 1 auto;min-width:0;border:0;outline:none;background:none;
  font:inherit;font-size:.92rem;color:var(--ink);padding:6px 0;
}
.bsearch input::placeholder{color:var(--faint)}

.btags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,34px)}
.btags a{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border:1px solid var(--line);border-radius:100px;
  background:var(--w);font-size:.8rem;font-weight:600;color:var(--body);
  transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e);
}
.btags a:hover{border-color:var(--line-2);color:var(--ink)}
.btags a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.btags i{font-style:normal;font-family:var(--fm);font-size:.68rem;color:var(--muted)}
.btags a.is-on i{color:var(--on-k-3)}

/* ------------------------------------------------------------------ meta row */
.bmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.bmeta span+span::before{content:"·";margin-right:9px;color:var(--line-2)}
.bmeta__k{color:var(--o)}

/* ------------------------------------------------------------------ featured */
.bfeat{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,46px);
  align-items:center;background:var(--w);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;margin-bottom:clamp(26px,3.4vw,44px);
  transition:border-color .3s var(--e),box-shadow .3s var(--e);
}
.bfeat:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.bfeat__img{display:block;position:relative;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.bfeat__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-out)}
.bfeat:hover .bfeat__img img{transform:scale(1.03)}
.bfeat__b{padding:clamp(22px,3vw,40px) clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0}
.bfeat h2{font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.035em;line-height:1.1}
.bfeat h2 a{transition:color .2s var(--e)}
.bfeat h2 a:hover{color:var(--o)}
.bfeat p{margin:14px 0 20px;font-size:.98rem;line-height:1.66;max-width:56ch}
@media (max-width:820px){
  .bfeat{grid-template-columns:1fr}
  .bfeat__b{padding:24px}
}

/* ------------------------------------------------------------------ grid */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.9vw,24px)}
@media (max-width:1000px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.bgrid{grid-template-columns:1fr}}

.bcard{
  display:flex;flex-direction:column;background:var(--w);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  transition:border-color .28s var(--e),box-shadow .28s var(--e),transform .28s var(--e);
}
.bcard:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.bcard__img{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--paper-2),var(--paper));
}
.bcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-out)}
.bcard:hover .bcard__img img{transform:scale(1.04)}
.bcard__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--fd);font-weight:800;font-size:3rem;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.4px var(--line-2);
}
.bcard__b{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1 1 auto}
.bcard__b .bmeta{margin-bottom:11px}
.bcard h3{font-size:1.08rem;letter-spacing:-.026em;line-height:1.3}
.bcard h3 a{transition:color .2s var(--e)}
.bcard h3 a:hover{color:var(--o)}
.bcard p{margin-top:10px;font-size:.9rem;line-height:1.6;flex:1 1 auto}
.bcard__f{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}

/* ------------------------------------------------------------------ paging */
.bpage{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(30px,4vw,52px)}
.bpage a{
  min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--w);
  font-family:var(--fd);font-weight:700;font-size:.86rem;color:var(--body);
  transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e);
}
.bpage a:hover{border-color:var(--line-2);color:var(--ink)}
.bpage a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.bpage__x{font-weight:600}

/* ------------------------------------------------------------------ empty */
.bempty{
  text-align:center;max-width:56ch;margin-inline:auto;
  padding:clamp(34px,5vw,72px) 0;
}
.bempty .eb{justify-content:center}
.bempty h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.bempty p{margin:14px auto 24px}

/* ------------------------------------------------------------------ article */
.pvbar{
  background:var(--o-tint);border-bottom:1px solid var(--o-tint-2);
  color:var(--o-dp);font-size:.84rem;font-weight:600;text-align:center;padding:10px 16px;
}
.pvbar a{color:var(--o);border-bottom:1px solid currentColor}

.post__hd{
  padding:clamp(34px,4.6vw,64px) 0 clamp(22px,3vw,36px);
  background:
    radial-gradient(42% 46% at 88% 0%,rgba(241,90,34,.075),transparent 62%),
    var(--w);
}
.post__hd h1{font-size:clamp(2.05rem,4.4vw,3.4rem);letter-spacing:-.042em;line-height:1.04;max-width:20ch}
.post__lead{margin-top:20px;max-width:60ch}
.post__meta{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.post__meta span+span::before{content:"·";margin-right:9px;color:var(--line-2)}

.post__cover{margin:0 0 clamp(24px,3.4vw,44px);border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line)}
.post__cover img{width:100%;height:auto;display:block;max-height:560px;object-fit:cover}
.post__cover figcaption{
  padding:11px 16px;background:var(--paper);border-top:1px solid var(--line);
  font-size:.8rem;color:var(--muted);text-align:center;
}

.post__g{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;padding-bottom:clamp(30px,4vw,60px)}
.post__rail{position:sticky;top:calc(var(--hdr) + 28px)}
.post__share{display:flex;flex-direction:column;align-items:center;gap:10px}
.post__share span{
  font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px;
}
.post__share a,.post__copy{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:var(--w);color:var(--body);
  transition:border-color .2s var(--e),color .2s var(--e),transform .2s var(--e);
}
.post__share a:hover,.post__copy:hover{border-color:var(--o);color:var(--o);transform:translateY(-1px)}
.post__copy.is-done{border-color:var(--gr);color:var(--gr)}
@media (max-width:820px){
  .post__g{grid-template-columns:1fr}
  .post__rail{position:static;margin-bottom:8px}
  .post__share{flex-direction:row;justify-content:flex-start}
  .post__share span{margin:0 4px 0 0;align-self:center}
}

/* the article itself — the one place long-form type rules apply */
.post__body{max-width:74ch;font-size:1.045rem;line-height:1.75;color:var(--ink-3)}
.post__body>*+*{margin-top:1.15em}
.post__body h2{font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.032em;margin-top:1.9em;line-height:1.16}
.post__body h3{font-size:clamp(1.12rem,1.7vw,1.32rem);letter-spacing:-.026em;margin-top:1.7em}
.post__body h4{font-size:1.02rem;margin-top:1.5em}
.post__body p{color:var(--ink-3)}
.post__body a{color:var(--o);font-weight:600;border-bottom:1px solid var(--o-tint-2);transition:border-color .2s var(--e)}
.post__body a:hover{border-color:var(--o)}
/* buttons inside the article keep their own colours */
.post__body .btn,.post__body .btn:hover{border-bottom:0}
.post__body .btn--o,.post__body .btn--o:hover{color:#fff}
.post__body .btn--line{color:var(--ink)}
.post__body .btn--line:hover{color:#fff}
.post__body ul,.post__body ol{padding-left:1.35em}
.post__body ul li{list-style:disc}
.post__body ol li{list-style:decimal}
.post__body li{margin-top:.5em;padding-left:.2em}
.post__body li::marker{color:var(--o)}
.post__body blockquote{
  margin-block:1.6em;padding:4px 0 4px 22px;border-left:2px solid var(--o);
  font-family:var(--fd);font-size:1.14rem;line-height:1.5;letter-spacing:-.02em;color:var(--ink);
}
.post__body blockquote p{color:inherit;font:inherit}
.post__body img{border-radius:var(--r);border:1px solid var(--line);margin-block:1.6em;width:100%;height:auto}
.post__body figure{margin-block:1.8em}
.post__body figure img{margin:0}
.post__body figcaption{margin-top:9px;font-size:.83rem;color:var(--muted);text-align:center}
.post__body pre{
  background:var(--ink);color:#E8ECF1;border-radius:var(--r);
  padding:18px 20px;overflow-x:auto;font-family:var(--fm);font-size:.85rem;line-height:1.6;
}
.post__body code{font-family:var(--fm);font-size:.88em;background:var(--paper-2);padding:2px 6px;border-radius:var(--r-xs);color:var(--ink)}
.post__body pre code{background:none;padding:0;color:inherit}
.post__body hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}
.post__body table{margin-block:1.8em;font-size:.94rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.post__body th,.post__body td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.post__body th{background:var(--paper);font-family:var(--fm);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:500}
.post__body tr:last-child td{border-bottom:none}
.post__body iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:var(--r);border:1px solid var(--line);margin-block:1.8em}

.post__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line)}
.post__tags a{
  padding:5px 12px;border:1px solid var(--line);border-radius:100px;
  font-size:.78rem;font-weight:600;color:var(--body);background:var(--paper);
  transition:border-color .2s var(--e),color .2s var(--e);
}
.post__tags a:hover{border-color:var(--o);color:var(--o)}

.post__cta{
  margin-top:2.4em;padding:clamp(22px,2.6vw,32px);
  background:var(--ink);border-radius:var(--r-l);
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  background-image:radial-gradient(50% 70% at 90% 0%,rgba(241,90,34,.18),transparent 64%);
}
.post__cta b{display:block;font-family:var(--fd);font-size:1.15rem;letter-spacing:-.028em;color:#fff}
.post__cta p{margin-top:8px;font-size:.93rem;color:var(--on-k-2)}
@media (max-width:640px){.post__cta{grid-template-columns:1fr}}

.post__nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:clamp(30px,4vw,58px)}
.post__nx{
  display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--w);transition:border-color .24s var(--e),box-shadow .24s var(--e);
}
.post__nx:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.post__nx span{
  display:block;font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--o);margin-bottom:8px;
}
.post__nx b{font-family:var(--fd);font-size:.98rem;letter-spacing:-.024em;color:var(--ink);line-height:1.35}
.post__nx--n{text-align:right}
@media (max-width:640px){.post__nav{grid-template-columns:1fr}.post__nx--n{text-align:left}}