/* ==========================================================================
   JC Websites — design system
   Structure, type and rhythm cloned from wizard-painting-qld.vercel.app:
   · Poppins used LIGHT, uppercase and wide-tracked for every heading
   · Hairline rules as the only divider — no boxes where a line will do
   · Alternating light "board" bands against full-dark .on-dark bands
   Colour is JC's own, not the reference's:
   · --ink #05070F  — the near-black the old site was built on
   · --cyan #22D3EE — the brand accent, taking the reference's --steel role
   · The slash motif (-22deg) is the angle for every button sweep
   ========================================================================== */

@font-face{font-family:'Poppins';src:url('../fonts/poppins-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#05070F;          /* JC near-black */
  --navy:#0B1220;
  --steel:#16324A;
  --cyan:#22D3EE;         /* accent on dark */
  --cyan-dp:#0E7490;      /* accent on light — passes contrast on --board */
  --slate:#5E6977;
  --mist:#9DB8C6;
  --pale:#CFDCE9;
  --board:#F3F6F9;        /* light section ground */
  --board-2:#E9EFF4;
  --paper:#FFFFFF;

  --bg:var(--paper);
  --fg:var(--ink);
  --muted:#5B6672;
  --line:rgba(5,7,15,.14);
  --line-soft:rgba(5,7,15,.08);
  --hair:1px;

  --pitch:-22deg;         /* the slash motif */
  --hdr:72px;
  --wrap:1240px;
  --gut:clamp(20px,5vw,56px);

  --r:4px;
  --r-lg:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(5,7,15,.05), 0 12px 34px -18px rgba(5,7,15,.30);
}
@media (min-width:900px){ :root{ --hdr:86px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;font-weight:400;line-height:1.75;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0}
[hidden]{display:none!important}
::selection{background:var(--cyan);color:var(--ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:1480px}
.wrap--read{max-width:56rem}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cyan);color:var(--ink);padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* --------------------------------------------------------------- type --- */
h1,h2,h3,h4{margin:0;font-weight:300;line-height:1.06;text-transform:uppercase;letter-spacing:.055em}
.d1{font-size:clamp(2.1rem,6vw,4.5rem);letter-spacing:.07em}
.d2{font-size:clamp(1.7rem,3.9vw,2.9rem);letter-spacing:.06em}
.d3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:.05em;font-weight:400}
.d4{font-size:clamp(.98rem,1.4vw,1.1rem);letter-spacing:.06em;font-weight:500}
h1 b,h2 b,h3 b{font-weight:600}
h1 em,h2 em{font-style:normal;color:var(--cyan-dp)}
.on-dark h1 em,.on-dark h2 em{color:var(--cyan)}

/* the wordmark treatment — every label on the site wears it */
.eyebrow{
  display:inline-flex;align-items:center;gap:.85em;
  font-size:.665rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.32em;line-height:1;color:var(--slate);margin:0 0 1.25rem;
}
.eyebrow::before{content:"";width:30px;height:var(--hair);background:currentColor;flex:none}
.eyebrow--center{justify-content:center}
.on-dark .eyebrow{color:var(--cyan)}

.lede{font-size:clamp(1rem,1.4vw,1.13rem);color:var(--muted);max-width:64ch;font-weight:300}
h1+.lede,h2+.lede,h3+.lede,h1+p,h2+p,h3+p{margin-top:1.15rem}
.on-dark .lede{color:rgba(255,255,255,.76)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.section{padding-block:clamp(60px,8.5vw,118px)}
.section--tight{padding-block:clamp(44px,5.5vw,76px)}
.section--board{background:var(--board)}
.section--board2{background:var(--board-2)}
.section__head{max-width:66ch;margin-bottom:clamp(30px,4vw,54px)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--split{max-width:none;display:grid;gap:1.2rem}
@media (min-width:900px){.section__head--split{grid-template-columns:minmax(0,1fr) minmax(0,26rem);align-items:end}
  .section__head--split>p{text-align:right;margin-bottom:0}}

.on-dark{background:var(--ink);color:#fff}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark p{color:rgba(255,255,255,.76)}
.on-dark a:not(.btn){color:#fff}
.on-dark--2{background:var(--navy)}

/* ------------------------------------------------------------- buttons --- */
.btn{
  white-space:nowrap;position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.65em;padding:1.05em 1.85em;border:var(--hair) solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:var(--paper);
  font-size:.715rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  line-height:1;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .32s var(--ease),border-color .32s var(--ease),background .32s var(--ease);
  -webkit-appearance:none;appearance:none;text-align:center;
}
.btn::after{ /* a sweep, raked to the slash motif */
  content:"";position:absolute;inset:-1px -34% -1px auto;width:0;
  background:var(--cyan);transform:skewX(var(--pitch));z-index:-1;
  transition:width .4s var(--ease);
}
.btn:hover{color:var(--ink)}
.btn:hover::after{width:170%}
.btn:focus-visible{outline:2px solid var(--cyan-dp);outline-offset:3px}
.btn--lg{padding:1.2em 2.2em;font-size:.75rem}
.btn--cyan{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.btn--cyan::after{background:var(--ink)}
.btn--cyan:hover{color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover{color:var(--paper);border-color:var(--ink)}
.on-dark .btn{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.on-dark .btn::after{background:#fff}
.on-dark .btn:hover{color:var(--ink)}
.on-dark .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.on-dark .btn--ghost::after{background:#fff}
.on-dark .btn--ghost:hover{color:var(--ink);border-color:#fff}
.btn svg{width:16px;height:16px;flex:none}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-row--center{justify-content:center}

/* -------------------------------------------------------------- brand --- */
/* Baseline for every inline icon. Without it an icon in a context that has no
   explicit rule renders at its natural size and swamps the block it sits in. */
svg[viewBox="0 0 24 24"]{width:16px;height:16px;flex:none}

.mark{display:block;width:100%;height:auto}
.mark .ac{stroke:var(--cyan-dp)}
.hdr .mark .ac,.ftr .mark .ac,.drawer .mark .ac,.on-dark .mark .ac{stroke:var(--cyan)}
.lockup{display:flex;flex-direction:column;align-items:flex-start;gap:.75em}
.lockup__mark{width:100%;max-width:78px}
.lockup__wm{display:block;line-height:1}
.lockup__wm b{display:block;font-weight:300;letter-spacing:.34em;font-size:clamp(1.35rem,3.4vw,2.1rem);text-indent:.34em;text-transform:uppercase}
.lockup__wm span{display:block;font-weight:400;letter-spacing:.42em;font-size:clamp(.55rem,1.2vw,.72rem);margin-top:.8em;text-indent:.42em;text-transform:uppercase;color:var(--cyan)}

/* ------------------------------------------------------------- header --- */
.hdr{position:fixed;inset:0 0 auto;z-index:90;height:var(--hdr);display:flex;align-items:center;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:var(--hair) solid transparent;color:#fff}
.hdr__in{display:flex;align-items:center;gap:clamp(14px,2.5vw,34px);width:100%}
.hdr.is-stuck,.hdr--solid{background:rgba(5,7,15,.96);border-bottom-color:rgba(255,255,255,.12)}
.hdr__brand{display:flex;align-items:center;flex:none}
/* Jai's supplied logo, keyed transparent. Sized by height so it always sits
   correctly in the bar; never hide it — it is the only brand element. */
.hdr__logo{display:block;width:auto;height:clamp(34px,4.4vw,42px)}
.hdr__nav{display:none;gap:clamp(12px,1.7vw,26px);margin-left:auto;align-items:center}
@media (min-width:1050px){.hdr__nav{display:flex}}
.hdr__nav a{position:relative;font-size:.685rem;font-weight:500;text-transform:uppercase;letter-spacing:.17em;padding:6px 0;opacity:.9}
.hdr__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:var(--hair);background:var(--cyan);transition:right .3s var(--ease)}
.hdr__nav a:hover{opacity:1}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{right:0}
.hdr__cta{display:none;padding:.9em 1.4em;font-size:.665rem}
@media (min-width:1050px){.hdr__cta{display:inline-flex;margin-left:8px}}

.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  margin-left:auto;cursor:pointer;padding:0 9px;flex:none}
/* Facebook roundel — shown at every width, so it is seen the moment the page opens */
.fbicon{display:block;width:1.25em;height:1.25em;flex:none;border-radius:50%}
.hdr__fb{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;flex:none;transition:transform .2s var(--ease)}
.hdr__fb .fbicon{width:30px;height:30px}
.hdr__fb:hover{transform:scale(1.08)}
.hdr__fb + .burger{margin-left:0}
@media (min-width:1050px){.hdr__fb{margin-left:0}}
.ftr__fb{display:inline-flex;align-items:center;gap:.6em}
.ftr__fb .fbicon{width:22px;height:22px}
@media (min-width:1050px){.burger{display:none}}
.burger span{display:block;height:var(--hair);background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:95;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:calc(var(--hdr) + 24px) var(--gut) 32px;
  transform:translateY(-101%);transition:transform .42s var(--ease);overflow-y:auto}
.drawer.is-open{transform:none}
.drawer nav{display:flex;flex-direction:column;gap:2px;align-content:safe center}
.drawer nav a{font-size:clamp(1.2rem,4.8vw,1.8rem);font-weight:300;text-transform:uppercase;letter-spacing:.08em;
  padding:.4em 0;border-bottom:var(--hair) solid rgba(255,255,255,.13)}
.drawer nav a[aria-current]{color:var(--cyan)}
.drawer__foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
html.is-locked{overflow:hidden}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;min-height:clamp(560px,92svh,880px);display:flex;align-items:flex-end;
  padding:calc(var(--hdr) + 40px) 0 clamp(38px,7vw,84px);overflow:hidden;isolation:isolate}
/* The hero background is a drifting wall of the real sites we've built —
   a stock desk photo said nothing about the work. */
.hero__wall{position:absolute;inset:-12% -10%;z-index:-2;display:grid;gap:12px;
  grid-template-columns:repeat(3,1fr);transform:rotate(-7deg) scale(1.16);transform-origin:center}
@media (min-width:700px){.hero__wall{grid-template-columns:repeat(4,1fr);gap:14px}}
@media (min-width:1100px){.hero__wall{grid-template-columns:repeat(6,1fr);gap:16px}}
/* The spacing lives on the images, NOT as grid `gap`. With a gap, half the
   column's height is not half its content, so translateY(-50%) drifts a little
   further out of register on every loop. */
.wall__col{display:block;will-change:transform;animation:wallUp 64s linear infinite}
.wall__col img{margin-bottom:16px}
.wall__col:nth-child(even){animation-name:wallDown;animation-duration:78s}
.wall__col:nth-child(3){animation-duration:92s}
.wall__col img{width:100%;height:auto;display:block;border-radius:6px;
  border:1px solid rgba(255,255,255,.09)}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.wall__col{animation:none}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
/* These two gradients MULTIPLY. At .9 and .9 the result is .99 — solid black,
   which is what hid the whole wall. Keep the vertical one light and let the
   horizontal one do the work behind the headline only. */
  background:linear-gradient(180deg,rgba(5,7,15,.40) 0%,rgba(5,7,15,.16) 34%,rgba(5,7,15,.46) 74%,rgba(5,7,15,.88) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,7,15,.90) 0%,rgba(5,7,15,.74) 34%,rgba(5,7,15,.30) 72%,rgba(5,7,15,.06) 100%)}
.hero__in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.hero h1{max-width:17ch}
.hero__sub{margin-top:1.35rem;max-width:56ch}
.hero__sub b{color:#fff;font-weight:500}
.hero .cta-row{margin-top:clamp(24px,3.4vw,38px)}
/* On a short window the hero was 819px tall in a 558px viewport, which put the
   primary CTA and the stat row below the fold. Tighten everything vertically
   rather than letting the one button that matters fall off the screen. */
@media (max-height:760px) and (min-width:700px){
  .hero{min-height:0;padding-top:calc(var(--hdr) + 20px);padding-bottom:clamp(24px,3vw,40px)}
  .hero .d1{font-size:clamp(1.8rem,4.2vw,2.9rem)}
  .hero__sub{margin-top:.9rem;font-size:.95rem}
  .hero .cta-row{margin-top:1.1rem}
  .stats{margin-top:1.1rem}
  .stats div{padding-block:.85rem}
  .stats dd{font-size:1.45rem}
  .stats dt{margin-top:.5em}
}
@media (max-height:600px){.hero .stats{display:none}}

/* --------------------------------------------------------------- stats --- */
.stats{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(28px,4vw,44px);
  border-top:var(--hair) solid rgba(255,255,255,.22)}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px) clamp(18px,2.4vw,26px) 0}
@media (min-width:760px){.stats div{border-right:var(--hair) solid rgba(255,255,255,.22)}
  .stats div:last-child{border-right:0}}
.stats dd{margin:0;font-size:clamp(1.5rem,3.2vw,2.15rem);font-weight:300;letter-spacing:.05em;color:#fff;line-height:1}
.stats dd .u{color:var(--cyan)}
.stats dt{font-size:.615rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-top:.9em}

/* --------------------------------------------------------------- strip --- */
.strip{border-bottom:var(--hair) solid var(--line);background:var(--paper)}
.strip__grid{display:grid;grid-template-columns:1fr;max-width:1480px;margin-inline:auto}
@media (min-width:640px){.strip__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.strip__grid{grid-template-columns:repeat(4,1fr)}}
.strip__item{padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,34px);border-top:var(--hair) solid var(--line)}
@media (min-width:640px){.strip__item{border-top:0;border-left:var(--hair) solid var(--line)}
  .strip__item:first-child{border-left:0}}
@media (min-width:640px) and (max-width:1039px){.strip__item:nth-child(3){border-left:0}
  .strip__item:nth-child(n+3){border-top:var(--hair) solid var(--line)}}
.strip__ic{display:block;color:var(--cyan-dp);margin-bottom:14px}
.strip__ic svg{width:24px;height:24px}
.strip__t{display:block;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.7em}
.strip__d{display:block;font-size:.885rem;color:var(--muted);line-height:1.65;font-weight:300}

/* -------------------------------------------------------------- ticker --- */
.ticker{background:var(--navy);border-block:var(--hair) solid rgba(255,255,255,.12);overflow:hidden;display:flex;align-items:center}
.ticker__lbl{display:none;flex:none;align-self:stretch;align-items:center;padding-inline:clamp(20px,3vw,30px);
  border-right:var(--hair) solid rgba(255,255,255,.12);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.22em;color:var(--cyan)}
@media (min-width:640px){.ticker__lbl{display:flex}}
.ticker__vp{overflow:hidden;flex:1}
.ticker__track{display:flex;align-items:center;white-space:nowrap;width:max-content;animation:slide 46s linear infinite}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}
.ticker__track a{display:inline-flex;align-items:center;gap:1.1em;padding:1.25em clamp(18px,2.4vw,26px);
  font-size:.78rem;font-weight:300;color:rgba(255,255,255,.6);transition:color .25s var(--ease)}
.ticker__track a::before{content:"";width:6px;height:6px;background:var(--cyan);flex:none}
.ticker__track a:hover{color:var(--cyan)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------------------------------------------- split --- */
.split{display:grid;gap:clamp(30px,4.5vw,68px);align-items:center}
@media (min-width:920px){.split{grid-template-columns:1fr 1fr}
  .split--flip>*:first-child{order:2}}
/* when one column is far taller, centring strands the short one in dead space */
.split--top{align-items:start}
@media (min-width:1000px){.split--top>*:first-child{position:sticky;top:calc(var(--hdr) + 40px)}}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__badge{position:absolute;left:16px;bottom:16px;background:rgba(5,7,15,.86);color:#fff;
  padding:.7em 1.1em;font-size:.61rem;text-transform:uppercase;letter-spacing:.2em;border-radius:var(--r)}

/* Facebook Page plugin — the iframe is injected by site.js at the box's width.
   The fallback link sits underneath, so it shows if Facebook is blocked. */
.fbembed{width:100%;max-width:500px;margin-inline:auto;
  background:var(--paper);border:var(--hair) solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
/* our own header replaces Facebook's name + follower count, which is cropped off the iframe */
.fbembed__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:var(--ink)}
.fbembed__logo{width:auto;height:34px}
.fbembed__follow{display:inline-flex;align-items:center;gap:.45em;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan)}
.fbembed__follow:hover{color:#fff}
.fbembed__vp{position:relative;height:580px;overflow:hidden}
.fbembed__vp iframe{position:relative;z-index:1;display:block;border:0;margin-inline:auto}
.fbembed__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5em;
  padding:2rem;text-align:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan-dp)}

.ticks{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:2rem;font-size:.945rem;font-weight:300}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:7px;
  border-left:1.5px solid var(--cyan-dp);border-bottom:1.5px solid var(--cyan-dp);transform:rotate(-45deg)}
.on-dark .ticks li::before{border-color:var(--cyan)}

/* ------------------------------------------------- numbered rule lists --- */
.nlist{list-style:none;margin:0;padding:0;border-top:var(--hair) solid var(--line)}
.on-dark .nlist{border-color:rgba(255,255,255,.18)}
.nlist li{display:grid;grid-template-columns:auto 1fr;gap:1.15rem 1.4rem;
  padding:1.15rem 0;border-bottom:var(--hair) solid var(--line)}
.on-dark .nlist li{border-color:rgba(255,255,255,.18)}
.nlist__n{font-size:.66rem;letter-spacing:.24em;color:var(--cyan-dp);padding-top:.45em}
.on-dark .nlist__n{color:var(--cyan)}
.nlist__t{display:block;font-size:1.02rem;font-weight:500;letter-spacing:.03em}
.nlist__d{display:block;font-size:.9rem;color:var(--muted);line-height:1.7;font-weight:300;margin-top:.4em}
.on-dark .nlist__d{color:rgba(255,255,255,.6)}
.nlist--muted .nlist__n{color:var(--slate);opacity:.55}
.nlist--muted .nlist__t{font-weight:300;color:var(--muted)}
.nlist--2{display:grid}
@media (min-width:820px){.nlist--2{grid-template-columns:1fr 1fr;column-gap:clamp(34px,4.5vw,64px);border-top:0}
  .nlist--2 li{border-top:var(--hair) solid var(--line)}
  .on-dark .nlist--2 li{border-top-color:rgba(255,255,255,.18)}}

/* ------------------------------------------------- feature cards ------ */
/* Bordered numbered cards. A ruled list of six-plus rows reads as a wall of
   text; these give each point its own object and scan far faster. */
.fcards{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr}
@media (min-width:680px){.fcards{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.fcards{grid-template-columns:repeat(3,1fr)}}
/* LIGHT is the default and `.on-dark` is the override — the same way the rest
   of this stylesheet works. Defaulting a component to dark puts white text on
   a white section the moment it is used outside an .on-dark band. */
.fcard{position:relative;padding:clamp(24px,2.8vw,34px);border-radius:var(--r-lg);
  background:var(--paper);border:var(--hair) solid var(--line);box-shadow:var(--shadow);overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .4s var(--ease)}
.on-dark .fcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11);box-shadow:none}
.fcard::before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;background:var(--cyan-dp);
  opacity:0;transition:opacity .35s var(--ease)}
.on-dark .fcard::before{background:var(--cyan)}
.fcard:hover{transform:translateY(-3px);border-color:var(--cyan-dp)}
.on-dark .fcard:hover{border-color:rgba(34,211,238,.42)}
.fcard:hover::before{opacity:1}
.fcard__n{display:block;font-size:.66rem;letter-spacing:.26em;color:var(--cyan-dp);margin-bottom:1.1rem}
.on-dark .fcard__n{color:var(--cyan)}
.fcard__t{font-size:1.02rem;font-weight:500;letter-spacing:.03em;line-height:1.4;
  text-transform:none;color:var(--ink)}
.on-dark .fcard__t{color:#fff}
.fcard__d{margin:.85rem 0 0;font-size:.9rem;font-weight:300;line-height:1.72;color:var(--muted)}
.on-dark .fcard__d{color:rgba(255,255,255,.62)}
/* title-only variant — shorter cards, four across */
@media (min-width:1060px){.fcards--tight{grid-template-columns:repeat(3,1fr)}}
.fcards--tight .fcard{padding:clamp(20px,2.2vw,26px)}
.fcards--tight .fcard__n{margin-bottom:.85rem}
.fcards--tight .fcard__t{font-size:.96rem;font-weight:400}

/* the sticky-head two-column section */
.stickycol{display:grid;gap:clamp(30px,4vw,60px)}
@media (min-width:1000px){.stickycol{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
  .stickycol__head{position:sticky;top:calc(var(--hdr) + 40px);align-self:start}}

/* ------------------------------------------------------------ services --- */
.svcs{display:grid;grid-template-columns:1fr}
.svc{position:relative;display:flex;min-height:clamp(380px,50vw,500px);overflow:hidden;isolation:isolate;color:#fff}
@media (min-width:820px){.svcs{grid-template-columns:1fr 1fr}}
/* The photo backgrounds here were unreadable murk — Jai's words: "what is the
   background I can't tell". Replaced with a drawn blueprint grid and an
   oversized ghost numeral: legible, obviously deliberate, zero image requests. */
.svc{background:var(--ink)}
.svc:nth-child(even){background:var(--navy)}
.svc__plan{position:absolute;inset:0;z-index:-2;overflow:hidden;
  background-image:
    linear-gradient(to right,rgba(34,211,238,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(34,211,238,.06) 1px,transparent 1px);
  background-size:46px 46px;background-position:center}
.svc__plan::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 18% 10%,rgba(34,211,238,.17) 0%,transparent 58%)}
.svc:nth-child(even) .svc__plan::after{
  background:radial-gradient(120% 90% at 82% 10%,rgba(34,211,238,.14) 0%,transparent 58%)}
.svc__ghost{position:absolute;right:-.05em;bottom:-.28em;font-size:clamp(10rem,24vw,18rem);
  font-weight:300;line-height:.8;letter-spacing:-.02em;color:rgba(255,255,255,.05);
  pointer-events:none;transition:color .5s var(--ease)}
.svc:hover .svc__ghost{color:rgba(34,211,238,.11)}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 0%,rgba(5,7,15,.40) 62%,rgba(5,7,15,.76) 100%)}
.svc__in{position:relative;width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(26px,3.4vw,48px)}
.svc__no{display:block;font-size:.615rem;text-transform:uppercase;letter-spacing:.3em;color:var(--cyan);margin-bottom:1.1em}
.svc h3{font-size:clamp(1.25rem,2.2vw,1.7rem);margin-bottom:.7em;overflow-wrap:break-word}
.svc__d{font-size:.925rem;line-height:1.7;color:rgba(255,255,255,.8);max-width:46ch;font-weight:300}
.svc__tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:1.3rem 0 0;padding:0}
.svc__tags li{font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;padding:.55em .9em;
  border:var(--hair) solid rgba(255,255,255,.32);border-radius:100px;color:rgba(255,255,255,.9)}
.svc__more{display:inline-flex;align-items:center;gap:.6em;margin-top:1.5rem;font-size:.655rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--cyan)}
.svc__more svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.svc:hover .svc__more svg{transform:translateX(6px)}

/* ---------------------------------------------------------------- work --- */
/* 6 columns so cards can span 2 (three up) or 3 (two up). The trailing cards
   widen when the count does not divide evenly, so the last row never leaves a
   hole on the right. */
.work{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr}
@media (min-width:620px){.work{grid-template-columns:repeat(2,1fr)}
  .shot--fill2{grid-column:1/-1}}
@media (min-width:1000px){.work{grid-template-columns:repeat(6,1fr)}
  .shot{grid-column:span 2}
  .shot--wide{grid-column:span 3}
  .shot--fill2{grid-column:span 2}
  .shot--wide.shot--fill2{grid-column:span 3}}
/* Each card is a designed object — panel, hover lift, footer rule — not a bare
   screenshot with a caption under it. Text never sits ON the screenshot. */
/* light by default, dark only inside .on-dark — see the note on .fcard */
.shot{display:flex;flex-direction:column;padding:clamp(12px,1.2vw,16px);border-radius:var(--r-lg);
  background:var(--paper);border:var(--hair) solid var(--line);box-shadow:var(--shadow);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .4s var(--ease)}
.on-dark .shot{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);box-shadow:none}
.shot:hover{transform:translateY(-4px);border-color:var(--cyan-dp)}
.on-dark .shot:hover{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.05)}
.shot .frame{border-radius:6px;box-shadow:none}
.shot__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1rem .25rem .9rem}
.shot__txt{min-width:0}
.shot__t{display:block;font-size:.985rem;font-weight:500;line-height:1.35;letter-spacing:.015em;
  color:var(--ink);transition:color .25s var(--ease)}
.on-dark .shot__t{color:#fff}
.shot:hover .shot__t{color:var(--cyan-dp)}
.on-dark .shot:hover .shot__t{color:var(--cyan)}
.shot__d{display:block;font-size:.79rem;color:var(--muted);margin-top:.4em;line-height:1.55;font-weight:300}
.on-dark .shot__d{color:rgba(255,255,255,.55)}
.shot__go{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:var(--hair) solid var(--line);color:var(--cyan-dp);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.on-dark .shot__go{border-color:rgba(255,255,255,.22);color:var(--cyan)}
.shot__go svg{width:14px;height:14px}
.shot:hover .shot__go{background:var(--cyan);border-color:var(--cyan);color:var(--ink);transform:translateX(3px)}
.shot__foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.8rem .25rem 0;border-top:var(--hair) solid var(--line-soft)}
.on-dark .shot__foot{border-top-color:rgba(255,255,255,.10)}
.shot__label{flex:none;font-size:.55rem;text-transform:uppercase;letter-spacing:.18em;
  padding:.42em .8em;border:var(--hair) solid var(--line);border-radius:100px;color:var(--muted)}
.on-dark .shot__label{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.62)}
.shot__label--demo{border-color:var(--cyan-dp);color:var(--cyan-dp)}
.on-dark .shot__label--demo{border-color:var(--cyan);color:var(--cyan)}
.shot__dom{font-size:.66rem;letter-spacing:.04em;color:var(--slate);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.on-dark .shot__dom{color:rgba(255,255,255,.38)}

/* --------------------------------------------------- browser frames --- */
/* A real screenshot in a real browser window beats a stock laptop photo.
   The shots are tall (900x1688), so the frame crops to a window and the page
   scrolls inside it on hover. */
.frame{display:block;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow)}
.section--board .frame,.section--board2 .frame{border-color:var(--line)}
.frame__bar{display:flex;align-items:center;gap:7px;padding:.62em .85em;background:#11161F;
  border-bottom:1px solid rgba(255,255,255,.09)}
.frame__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.frame__bar i:first-child{background:#FF5F57}
.frame__bar i:nth-child(2){background:#FEBC2E}
.frame__bar i:nth-child(3){background:#28C840}
.frame__bar span{margin-left:.5em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.62rem;letter-spacing:.06em;color:rgba(255,255,255,.42)}
/* these are spans inside <a>/<figure>, so display:block is load-bearing —
   aspect-ratio does nothing on an inline box and the viewport collapses */
/* 16:10 exactly matches the 1280x800 capture, so the whole homepage fold sits
   in the window with nothing cropped away. A gentle zoom on hover instead of
   the old scroll — there is nothing below the fold to scroll to now. */
.frame__vp{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--board)}
.frame__vp img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.1s var(--ease)}
.frame:hover .frame__vp img,.frame:focus-visible .frame__vp img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.frame__vp img{transition:none}
  .frame:hover .frame__vp img{transform:none}}

/* ------------------------------------------------- feature bands ------ */
/* Full-bleed row per featured build: the client's OWN hero photograph behind,
   a number + rule, the name, the copy and a circular arrow — the format Jai
   asked for. The browser frame sits alongside so the site itself is still on
   show. Type stays JC's (Poppins light, uppercase) rather than the reference's
   serif, so the page still reads as one design system. */
.band{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  padding-block:clamp(46px,6.5vw,88px)}
.band__bg{position:absolute;inset:0;z-index:-2}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,7,15,.93) 0%,rgba(5,7,15,.80) 42%,rgba(5,7,15,.48) 100%)}
.band+.band{border-top:var(--hair) solid rgba(255,255,255,.10)}
.band__in{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
@media (min-width:960px){
  .band__in{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
  .band--flip .band__txt{order:2}
  .band--flip::before{background:linear-gradient(270deg,rgba(5,7,15,.93) 0%,rgba(5,7,15,.80) 42%,rgba(5,7,15,.48) 100%)}
}
.band__n{display:flex;align-items:center;gap:1.1rem;font-size:.8rem;letter-spacing:.24em;
  color:var(--cyan);margin-bottom:1.5rem}
.band__n i{display:block;width:clamp(38px,5vw,64px);height:var(--hair);background:currentColor;opacity:.55}
.band h2,.band h3{font-size:clamp(1.55rem,3.3vw,2.5rem);color:#fff}
.band__d{margin-top:1.15rem;font-size:1rem;font-weight:300;line-height:1.75;
  color:rgba(255,255,255,.75);max-width:46ch}
.band__spec{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.55rem;max-width:46ch}
.band__spec li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;font-size:.85rem;font-weight:300;
  color:rgba(255,255,255,.62);padding-top:.7rem;border-top:var(--hair) solid rgba(255,255,255,.14)}
.band__spec b{font-weight:500;color:rgba(255,255,255,.9);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.18em;padding-top:.3em;white-space:nowrap}
.band__foot{display:flex;align-items:center;gap:1.2rem;margin-top:2rem;flex-wrap:wrap}
.band__go{flex:none;width:58px;height:58px;border:var(--hair) solid rgba(255,255,255,.42);
  border-radius:50%;display:inline-grid;place-items:center;color:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.band__go svg{width:19px;height:19px}
.band__go:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.band__url{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.6);
  word-break:break-word}
.band:hover .band__url{color:var(--cyan)}
.band .frame{box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}

/* Same band design at a reduced scale — this list is meant to grow, so the
   full-size treatment would make the page endless. */
.band--sm{padding-block:clamp(24px,2.8vw,40px)}
.band--sm .band__in{gap:clamp(18px,2.6vw,38px);align-items:center}
/* The frame drives the row height, so capping it is what actually makes these
   compact — shrinking type alone barely moved the needle. */
.band--sm .band__media{display:block;width:100%;max-width:430px}
@media (min-width:960px){
  .band--sm .band__in{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}
  .band--sm:not(.band--flip) .band__media{margin-left:auto}
  .band--sm.band--flip .band__media{margin-right:auto}
}
.band--sm .band__n{font-size:.7rem;margin-bottom:.9rem}
.band--sm h2,.band--sm h3{font-size:clamp(1.1rem,2.1vw,1.55rem)}
.band--sm .band__d{margin-top:.7rem;font-size:.88rem;max-width:42ch}
.band--sm .band__spec{margin-top:1rem;gap:.35rem}
.band--sm .band__spec li{font-size:.78rem;padding-top:.5rem}
.band--sm .band__spec li:nth-child(n+2){display:none}
.band--sm .band__foot{margin-top:1.2rem;gap:.9rem}
.band--sm .band__go{width:44px;height:44px}
.band--sm .band__go svg{width:15px;height:15px}
.band--sm .band__url{font-size:.66rem}
.band--sm .frame{box-shadow:0 16px 40px -20px rgba(0,0,0,.8)}
.band--sm .frame__bar{padding:.5em .7em}
.band--sm .frame__bar i{width:7px;height:7px}
.band--sm .frame__bar span{font-size:.56rem}

/* the divider between the featured run and the longer list */
.band__break{padding-block:clamp(44px,6vw,78px) clamp(20px,2.6vw,32px)}
.band__break h2{color:#fff}

/* ------------------------------------------------------- view more ---- */
.viewmore{display:block;background:var(--navy);border-block:var(--hair) solid rgba(255,255,255,.12);
  padding-block:clamp(34px,4.6vw,64px);transition:background .35s var(--ease)}
.viewmore:hover{background:#0F1A2B}
.viewmore__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,48px)}
.viewmore__txt{min-width:0}
.viewmore__t{display:block;font-size:clamp(1.5rem,3.6vw,2.6rem);font-weight:300;text-transform:uppercase;
  letter-spacing:.055em;line-height:1.05;color:#fff;transition:color .3s var(--ease)}
.viewmore:hover .viewmore__t{color:var(--cyan)}
.viewmore__d{display:block;margin-top:.85rem;font-size:.95rem;font-weight:300;
  color:rgba(255,255,255,.6);max-width:46ch}
.viewmore .band__n{margin-bottom:1.1rem}
.viewmore .band__go{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  border:var(--hair) solid rgba(255,255,255,.42);color:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.viewmore .band__go svg{width:21px;height:21px}
.viewmore:hover .band__go{background:var(--cyan);border-color:var(--cyan);color:var(--ink);transform:translateX(5px)}

/* the alternating feature rows on /work and the home page */
.feat{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
@media (min-width:960px){.feat{grid-template-columns:1fr 1fr}
  .feat--flip>*:first-child{order:2}}
.feat+.feat{margin-top:clamp(48px,7vw,96px)}
.feat__media{display:block}
.feat__n{display:block;font-size:.66rem;letter-spacing:.26em;color:var(--cyan);margin-bottom:1em}
.feat h3{font-size:clamp(1.5rem,3.2vw,2.3rem)}
.feat__tag{margin-top:1rem;font-size:.95rem;font-weight:300}
.feat__url{display:inline-flex;align-items:center;gap:.6em;margin-top:1.6rem;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--cyan)}
.feat__url svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.feat__url:hover svg{transform:translate(3px,-3px)}

/* -------------------------------------------------------------- pricing -- */
/* Two defined panels joined by a "+", because these are not alternatives —
   you pay both. Flat text on flat black read as unfinished. */
.price{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,26px)}
@media (min-width:820px){.price{grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px)}}
.price__col{position:relative;border-radius:var(--r-lg);padding:clamp(26px,3.2vw,40px);
  background:rgba(255,255,255,.04);border:var(--hair) solid rgba(255,255,255,.12);overflow:hidden}
.section--board .price__col,.section--board2 .price__col{background:var(--paper);border-color:var(--line);
  box-shadow:var(--shadow)}
.price__col::before{content:"";position:absolute;top:0;left:0;width:72px;height:3px;background:var(--cyan)}
.section--board .price__col::before{background:var(--cyan-dp)}
.price__plus{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--ink);
  border:var(--hair) solid rgba(255,255,255,.24);color:var(--cyan);
  font-size:1.2rem;font-weight:300;line-height:1;align-items:center;justify-content:center;z-index:2}
@media (min-width:820px){.price__plus{display:flex}}
.price__lbl{display:block;font-size:.645rem;text-transform:uppercase;letter-spacing:.24em;color:var(--cyan)}
.section--board .price__lbl{color:var(--cyan-dp)}
.price__fig{display:flex;align-items:baseline;gap:.6rem;margin-top:1rem}
.price__n{font-size:clamp(2.6rem,6.5vw,3.9rem);font-weight:300;letter-spacing:.04em;line-height:1;color:#fff}
.section--board .price__n{color:var(--ink)}
.price__u{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.5)}
.section--board .price__u{color:var(--slate)}
.price__rule{border:0;height:var(--hair);background:rgba(255,255,255,.14);margin:1.7rem 0 1.4rem}
.section--board .price__rule{background:var(--line)}
/* inclusions get ticks, not numbers — they are a list, not a sequence */
.ticks--price{margin-top:0;gap:0}
.ticks--price li{padding-block:.72rem;border-top:var(--hair) solid rgba(255,255,255,.09);
  font-size:.925rem;line-height:1.6}
.ticks--price li:first-child{border-top:0;padding-top:0}
.ticks--price li:last-child{padding-bottom:0}
.section--board .ticks--price li{border-top-color:var(--line-soft)}
.price__sum{margin-top:clamp(20px,2.6vw,30px);font-size:.93rem;font-weight:300;line-height:1.75;
  color:rgba(255,255,255,.62);max-width:72ch}
.price__sum b{color:#fff;font-weight:500}
.section--board .price__sum{color:var(--muted)}
.section--board .price__sum b{color:var(--ink)}

/* --------------------------------------------------------------- steps --- */
.steps{display:grid;gap:0;grid-template-columns:1fr;border-top:var(--hair) solid var(--line);counter-reset:st}
@media (min-width:700px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(3,1fr)}}
.on-dark .steps{border-color:rgba(255,255,255,.2)}
.step{padding:clamp(24px,3vw,34px) clamp(18px,2.2vw,30px) clamp(26px,3vw,38px);
  border-bottom:var(--hair) solid var(--line);position:relative;counter-increment:st}
.on-dark .step{border-color:rgba(255,255,255,.2)}
@media (min-width:700px){.step{border-left:var(--hair) solid var(--line)}
  .on-dark .step{border-left-color:rgba(255,255,255,.2)}
  .step:nth-child(odd){border-left:0}}
@media (min-width:1040px){.step{border-left:var(--hair) solid var(--line)}
  .on-dark .step{border-left-color:rgba(255,255,255,.2)}
  .step:nth-child(odd){border-left:var(--hair) solid var(--line)}
  .on-dark .step:nth-child(odd){border-left-color:rgba(255,255,255,.2)}
  .step:nth-child(3n+1){border-left:0}}
.step::before{content:"0" counter(st);display:block;font-size:.65rem;letter-spacing:.28em;
  color:var(--cyan-dp);margin-bottom:1.1em}
.on-dark .step::before{color:var(--cyan)}
.step h3{font-size:1.02rem;font-weight:400;letter-spacing:.05em;margin-bottom:.75em}
.step p{font-size:.885rem;color:var(--muted);line-height:1.7;font-weight:300}
.on-dark .step p{color:rgba(255,255,255,.6)}
.step.is-now::before{color:var(--cyan)}
.step.is-now h3{color:var(--cyan-dp)}
.on-dark .step.is-now h3{color:var(--cyan)}

/* -------------------------------------------------------------- quotes --- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:760px){.grid--2{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--paper);border:var(--hair) solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:1rem}
.quote__stars{color:var(--cyan-dp);letter-spacing:.22em;font-size:.9rem;line-height:1}
.quote__body{margin:0;font-size:clamp(1rem,1.5vw,1.12rem);font-weight:300;line-height:1.68;color:var(--fg)}
.quote__by{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--fg);margin-top:auto}
.quote__src{display:block;font-size:.66rem;letter-spacing:.14em;color:var(--muted);margin-top:.6em;text-transform:none}

/* --------------------------------------------------- review wall ------ */
/* THREE columns, not four. At four the columns were 267px wide and the cards
   560px tall — every quote became a thin ribbon of text with a void under it.
   The lead quote spans the full width as a banner, which leaves exactly six
   cells (5 reviews + the showcase) to fill two clean rows of three. */
.revwall{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:1fr;align-items:stretch}
@media (min-width:700px){.revwall{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.revwall{grid-template-columns:repeat(3,1fr)}}
.rev{position:relative;display:flex;flex-direction:column;gap:1rem;
  padding:clamp(22px,2.8vw,32px) clamp(22px,2.8vw,32px) clamp(22px,2.8vw,30px);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .45s var(--ease)}
.rev:hover{border-color:rgba(34,211,238,.42);background:rgba(34,211,238,.05);transform:translateY(-3px)}
.rev::before{content:"\201C";position:absolute;right:.28em;top:-.16em;
  font-size:8rem;line-height:1;color:rgba(34,211,238,.10);pointer-events:none}
.rev__stars{display:flex;gap:3px;color:var(--cyan)}
.rev__stars svg{width:14px;height:14px}
.rev blockquote{margin:0;font-size:.95rem;font-weight:300;line-height:1.72;
  color:rgba(255,255,255,.78);text-transform:none}
.rev figcaption{margin-top:auto;display:flex;align-items:center;gap:.85rem;
  padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12)}
.rev .av{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid rgba(34,211,238,.45);color:var(--cyan);font-size:.95rem;font-weight:500}
.rev .nm{display:block;font-size:.87rem;font-weight:500;color:#fff}
.rev .mt{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(255,255,255,.42);margin-top:.3em}
/* the first one runs wide and large — a wall of equal boxes is what was boring */
/* The lead quote is a full-width banner: quote left, attribution right, so it
   reads as a pull-quote rather than an oversized card with dead space. */
.rev--lead{grid-column:1/-1}
.rev--lead blockquote{font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.45;color:#fff;max-width:52ch}
.rev--lead figcaption{margin-top:1.6rem}
.rev--lead .av{width:46px;height:46px;font-size:1.1rem}
@media (min-width:900px){
  .rev--lead{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;column-gap:clamp(32px,5vw,72px);row-gap:1rem}
  .rev--lead .rev__stars{grid-column:1}
  .rev--lead blockquote{grid-column:1;grid-row:2}
  .rev--lead figcaption{grid-column:2;grid-row:1/span 2;margin-top:0;
    padding-left:clamp(28px,4vw,56px);border-left:var(--hair) solid rgba(255,255,255,.14)}
}

/* The showcase cell: a recent build, deliberately NOT presented as the
   reviewer's own site — only TintX's can honestly be named that. */
.rev--show{padding:0;gap:0;grid-column:auto}
.rev--show::before{display:none}
.rev--show .frame{border-radius:var(--r-lg) var(--r-lg) 0 0;border:0;
  border-bottom:var(--hair) solid rgba(255,255,255,.12);box-shadow:none}
.rev--show .rev__in{display:flex;flex-direction:column;gap:.45rem;padding:clamp(20px,2.4vw,28px)}
.rev__eyebrow{font-size:.6rem;text-transform:uppercase;letter-spacing:.24em;color:var(--cyan)}
.rev__showt{font-size:1.15rem;font-weight:500;color:#fff;letter-spacing:.02em;margin-top:.3rem}
.rev__showd{font-size:.9rem;font-weight:300;color:rgba(255,255,255,.6);line-height:1.6}
.rev--show .rev__built{margin-top:.7rem}
.rev__built{display:inline-flex;align-items:center;gap:.5em;font-size:.58rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--cyan)}
.rev__built svg{width:13px;height:13px;flex:none}

/* the oversized lead review */
.lead-quote{max-width:52rem}
.lead-quote blockquote{margin:0;font-size:clamp(1.25rem,3.1vw,2rem);font-weight:300;line-height:1.32;
  letter-spacing:.01em;text-transform:none}
.lead-quote figcaption{display:flex;align-items:center;gap:1rem;margin-top:1.8rem}
.lead-quote .av{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r);
  border:var(--hair) solid var(--cyan-dp);color:var(--cyan-dp);font-size:1.05rem;font-weight:500}
.lead-quote .nm{display:block;font-size:.9rem;font-weight:500}
.lead-quote .mt{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-top:.35em}
.rating{display:flex;align-items:center;gap:1.15rem}
.rating__n{font-size:clamp(2.2rem,5vw,3rem);font-weight:300;line-height:1;letter-spacing:.03em}
.rating__bar{width:1px;height:44px;background:var(--line)}
.rating p{font-size:.83rem;color:var(--muted);max-width:12rem;line-height:1.6;font-weight:300;margin:0}
.on-dark .rating__bar{background:rgba(255,255,255,.22)}
.on-dark .rating__n{color:#fff}
.on-dark .rating p{color:rgba(255,255,255,.6)}
.rating__stars{display:flex;gap:3px;color:var(--cyan-dp);margin-top:.55rem}
.on-dark .rating__stars{color:var(--cyan)}
.rating__stars svg{width:14px;height:14px}

/* ----------------------------------------------------------------- faq --- */
.faq{border-top:var(--hair) solid var(--line)}
.on-dark .faq{border-color:rgba(255,255,255,.2)}
.faq__item{border-bottom:var(--hair) solid var(--line)}
.on-dark .faq__item{border-color:rgba(255,255,255,.2)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:1.3em 0;cursor:pointer;text-align:left;font-size:clamp(.96rem,1.5vw,1.09rem);font-weight:400;letter-spacing:.02em}
.faq__q .pm{position:relative;width:15px;height:15px;flex:none;color:var(--cyan-dp)}
.on-dark .faq__q .pm{color:var(--cyan)}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:currentColor;transition:transform .3s var(--ease)}
.faq__q .pm::before{inset:7px 0 auto;height:1.5px}
.faq__q .pm::after{inset:0 7px auto;width:1.5px;height:15px}
.faq__q[aria-expanded="true"] .pm::after{transform:scaleY(0)}
.faq__a{overflow:hidden;height:0;transition:height .34s var(--ease)}
.faq__a>div{padding-bottom:1.5em}
.faq__a p{color:var(--muted);font-size:.945rem;font-weight:300;max-width:78ch}
.on-dark .faq__a p{color:rgba(255,255,255,.74)}

/* ------------------------------------------------------------ cta band --- */
.ctaband{position:relative;padding-block:clamp(64px,9vw,120px);overflow:hidden;isolation:isolate;text-align:center}
.ctaband__bg{position:absolute;inset:0;z-index:-2}
.ctaband__bg img{width:100%;height:100%;object-fit:cover}
.ctaband::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,7,15,.88)}
.ctaband h2{margin-bottom:.55em}
.ctaband p{max-width:56ch;margin-inline:auto}
.ctaband .cta-row{margin-top:clamp(26px,3.4vw,38px)}
.ctaband__note{margin-top:1.5rem;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.45)}

/* -------------------------------------------------------- page banner --- */
.pbanner{position:relative;padding:calc(var(--hdr) + clamp(52px,8vw,96px)) 0 clamp(46px,7vw,88px);
  overflow:hidden;isolation:isolate}
.pbanner__bg{position:absolute;inset:0;z-index:-2}
.pbanner__bg img{width:100%;height:100%;object-fit:cover}
.pbanner::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,7,15,.90) 0%,rgba(5,7,15,.72) 55%,rgba(5,7,15,.94) 100%)}
.pbanner h1{margin-bottom:.5em;max-width:20ch}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.6em;margin:0 0 1.6rem;padding:0;
  font-size:.635rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.6)}
.crumbs a:hover{color:var(--cyan)}

/* --------------------------------------------------------------- areas --- */
.areas{display:grid;gap:0;grid-template-columns:1fr;border-top:var(--hair) solid var(--line)}
@media (min-width:560px){.areas{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.areas{grid-template-columns:repeat(3,1fr)}}
.on-dark .areas{border-color:rgba(255,255,255,.18)}
.area{padding:clamp(20px,2.4vw,28px) clamp(16px,2vw,26px);border-bottom:var(--hair) solid var(--line)}
.on-dark .area{border-bottom-color:rgba(255,255,255,.18)}
@media (min-width:560px){.area{border-left:var(--hair) solid var(--line)}
  .on-dark .area{border-left-color:rgba(255,255,255,.18)}
  .area:nth-child(odd){border-left:0}}
@media (min-width:960px){.area{border-left:var(--hair) solid var(--line)}
  .area:nth-child(odd){border-left:var(--hair) solid var(--line)}
  .on-dark .area:nth-child(odd){border-left-color:rgba(255,255,255,.18)}
  .area:nth-child(3n+1){border-left:0}}
.area h3{font-size:.985rem;font-weight:400;letter-spacing:.09em;margin-bottom:.55em}
.area p{font-size:.83rem;color:var(--muted);font-weight:300;line-height:1.6}
.on-dark .area p{color:rgba(255,255,255,.58)}

/* the city link rows */
.citygrid{display:grid;grid-template-columns:1fr;border-top:0}
@media (min-width:640px){.citygrid{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3.5vw,48px)}}
@media (min-width:1040px){.citygrid{grid-template-columns:repeat(4,1fr)}}
.cityrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 0;border-top:var(--hair) solid var(--line)}
.on-dark .cityrow{border-top-color:rgba(255,255,255,.18)}
.cityrow__t{display:block;font-size:.95rem;font-weight:500;transition:color .25s var(--ease)}
.cityrow:hover .cityrow__t{color:var(--cyan)}
.cityrow__a{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.18em;color:var(--slate);margin-top:.4em}
.on-dark .cityrow__a{color:rgba(255,255,255,.36)}
.cityrow svg{width:16px;height:16px;flex:none;color:var(--cyan);transition:transform .3s var(--ease)}
.cityrow:hover svg{transform:translateX(5px)}

.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(24px,3vw,34px)}
.pills span{font-size:.63rem;text-transform:uppercase;letter-spacing:.16em;padding:.6em 1em;
  border:var(--hair) solid var(--line);border-radius:100px;color:var(--muted)}
.on-dark .pills span{border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.8)}

/* the scrolling city marquee */
.marquee{position:relative;margin-block:clamp(40px,6vw,64px);padding-block:1.4rem;
  border-block:var(--hair) solid rgba(255,255,255,.14);overflow:hidden}
.marquee__track{display:flex;align-items:center;gap:2.5rem;white-space:nowrap;width:max-content;
  animation:slide 52s linear infinite}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
.marquee span.c{font-size:clamp(1.5rem,3.6vw,2.4rem);font-weight:300;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(255,255,255,.42)}
.marquee span.dot{width:6px;height:6px;background:var(--cyan);flex:none;opacity:.6}

/* ------------------------------------------------------------- infolist -- */
.infolist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1.05rem}
.infolist li{display:flex;gap:.95rem;align-items:flex-start}
.infolist .ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:var(--hair) solid var(--line);color:var(--cyan-dp)}
.on-dark .infolist .ic{border-color:rgba(255,255,255,.24);color:var(--cyan)}
.infolist .ic svg{width:17px;height:17px}
.infolist .k{display:block;font-size:.605rem;text-transform:uppercase;letter-spacing:.22em;color:var(--slate);margin-bottom:.35em}
.on-dark .infolist .k{color:var(--cyan)}
.infolist .v{display:block;font-size:.99rem;font-weight:400;letter-spacing:.01em;word-break:break-word}
a.v:hover{color:var(--cyan-dp)}
.on-dark a.v:hover{color:var(--cyan)}

/* ---------------------------------------------------------------- form --- */
.formwrap{display:grid;gap:clamp(30px,4vw,54px);align-items:start}
@media (min-width:1000px){.formwrap{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.aside{background:var(--board);border:var(--hair) solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);position:sticky;top:calc(var(--hdr) + 20px)}
.aside h3{font-size:1.02rem;font-weight:400;letter-spacing:.08em}

.qf{margin-top:2rem}
.qf__step{border:var(--hair) solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);margin-bottom:16px;background:var(--paper)}
.qf__hd{display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.4rem}
.qf__n{flex:none;font-size:.62rem;letter-spacing:.24em;color:var(--cyan-dp)}
.qf__hd h3{font-size:.99rem;font-weight:500;letter-spacing:.09em}
.qf__hint{display:block;font-size:.78rem;color:var(--muted);font-weight:300;margin:-.7rem 0 1.3rem;line-height:1.6}

.fields{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:620px){.fields{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--slate)}
.req{color:#B4483A}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.94rem;font-weight:300;color:var(--fg);background:var(--paper);
  border:var(--hair) solid var(--line);border-radius:var(--r);padding:.86em 1em;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6672' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;background-size:17px;padding-right:2.7em}
.field textarea{min-height:132px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--cyan-dp);box-shadow:0 0 0 3px rgba(14,116,144,.15)}
.field__hint{font-size:.755rem;color:var(--muted);line-height:1.55;font-weight:300}
.field .err{font-size:.75rem;color:#B4483A;font-weight:300}
.field input.is-bad,.field select.is-bad,.field textarea.is-bad{border-color:#B4483A}

.tickgrid{display:grid;gap:9px;grid-template-columns:1fr}
@media (min-width:520px){.tickgrid{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.tickgrid--3{grid-template-columns:repeat(3,1fr)}}
.tick{position:relative;display:flex;align-items:flex-start;gap:.75rem;padding:.85em 1em;
  border:var(--hair) solid var(--line);border-radius:var(--r);cursor:pointer;transition:.2s var(--ease);background:var(--paper)}
.tick:hover{border-color:var(--slate)}
.tick input{position:absolute;opacity:0;width:1px;height:1px}
.tick__box{flex:none;width:19px;height:19px;margin-top:.12em;border:1.4px solid var(--line);border-radius:3px;
  display:grid;place-items:center;transition:.2s var(--ease)}
.tick__box::after{content:"";width:9px;height:5px;border-left:1.7px solid var(--ink);border-bottom:1.7px solid var(--ink);
  transform:rotate(-45deg) scale(.4);opacity:0;transition:.2s var(--ease);margin-top:-2px}
.tick input:checked~.tick__box{background:var(--cyan);border-color:var(--cyan)}
.tick input:checked~.tick__box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.tick input:focus-visible~.tick__box{box-shadow:0 0 0 3px rgba(14,116,144,.25)}
.tick:has(input:checked){border-color:var(--cyan-dp);background:#F7FCFD}
.tick__t{display:block;font-size:.875rem;font-weight:400;line-height:1.4}
.tick__d{display:block;font-size:.735rem;color:var(--muted);margin-top:.28em;line-height:1.5;font-weight:300}
.tick--radio .tick__box{border-radius:50%}
.tick--radio .tick__box::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--ink);transform:scale(.3);margin:0}
.tick--radio input:checked~.tick__box::after{transform:scale(1)}

fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}

.qsum{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,2.8vw,30px);margin-top:20px}
.qsum h3{font-size:.72rem;font-weight:500;letter-spacing:.24em;color:var(--cyan);margin-bottom:1.1rem}
.qsum__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.qsum__list li{display:grid;gap:.25rem .9rem;padding-bottom:.75rem;border-bottom:var(--hair) solid rgba(255,255,255,.16)}
@media (min-width:520px){.qsum__list li{grid-template-columns:minmax(112px,.36fr) 1fr;align-items:baseline}}
.qsum__list li:last-child{border-bottom:0;padding-bottom:0}
.qsum__k{font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--cyan)}
.qsum__v{font-size:.895rem;font-weight:300;color:#fff;line-height:1.6}
.qsum__empty{font-size:.865rem;color:rgba(255,255,255,.6);font-weight:300}

.form__submit{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.form__note{font-size:.775rem;color:var(--muted);max-width:44ch;line-height:1.6;font-weight:300}
.formmsg{margin-top:18px;padding:1.05em 1.2em;border-radius:var(--r);font-size:.895rem;line-height:1.6;font-weight:300}
.formmsg.is-ok{background:#EEF7F9;border:var(--hair) solid #A9D3DD;color:#0B5566}
.formmsg.is-err{background:#FBEEEC;border:var(--hair) solid #E3BDB6;color:#8A2E22}

/* --------------------------------------------------------------- prose --- */
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.15rem,2.1vw,1.5rem);letter-spacing:.05em;margin:2.6rem 0 1rem}
.prose h3{font-size:clamp(1rem,1.7vw,1.18rem);letter-spacing:.05em;font-weight:400;margin:2rem 0 .8rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{font-size:1rem;font-weight:300;line-height:1.85;color:var(--muted)}
.prose strong{color:var(--fg);font-weight:500}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;display:grid;gap:.55rem}
.prose a{color:var(--cyan-dp);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose blockquote{margin:1.8rem 0;padding-left:1.4rem;border-left:2px solid var(--cyan-dp);
  font-size:1.06rem;font-weight:300;line-height:1.7;color:var(--fg)}
.on-dark .prose p,.on-dark .prose li{color:rgba(255,255,255,.74)}
.on-dark .prose strong{color:#fff}
.on-dark .prose a{color:var(--cyan)}
.on-dark .prose a:hover{color:#fff}
.on-dark .prose blockquote{border-left-color:var(--cyan);color:#fff}

/* ---------------------------------------------------------------- blog --- */
.posts{display:grid;gap:clamp(20px,2.6vw,32px);grid-template-columns:1fr}
@media (min-width:700px){.posts{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;background:var(--paper);border:var(--hair) solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .3s var(--ease),transform .4s var(--ease)}
.post:hover{border-color:var(--cyan-dp);transform:translateY(-3px)}
.post__img{aspect-ratio:16/9;object-fit:cover;width:100%}
.post__in{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1;gap:.9rem}
.post__meta{display:flex;flex-wrap:wrap;gap:.5em 1.1em;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--slate)}
.post__meta .cat{color:var(--cyan-dp)}
.post h2,.post h3,.post__t{font-size:1.04rem;font-weight:400;letter-spacing:.02em;line-height:1.35;
  text-transform:none;display:block;margin:0}
.post p{font-size:.87rem;color:var(--muted);font-weight:300;line-height:1.7;margin:0}
.post__more{margin-top:auto;padding-top:.4rem;font-size:.64rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--cyan-dp);display:inline-flex;align-items:center;gap:.55em}
.post__more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.post:hover .post__more svg{transform:translateX(4px)}

.takeaways{background:var(--board);border-left:2px solid var(--cyan-dp);border-radius:0 var(--r) var(--r) 0;
  padding:clamp(20px,2.6vw,30px);margin-bottom:2.4rem}
.takeaways h2{margin:0 0 1rem;font-size:.66rem;letter-spacing:.24em;color:var(--cyan-dp)}
.takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.takeaways li{position:relative;padding-left:1.8rem;font-size:.92rem;font-weight:300;line-height:1.7;color:var(--muted)}
.takeaways li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:6px;
  border-left:1.5px solid var(--cyan-dp);border-bottom:1.5px solid var(--cyan-dp);transform:rotate(-45deg)}

.postbar{display:flex;flex-wrap:wrap;gap:.6em 1.4em;padding-bottom:1.6rem;margin-bottom:2rem;
  border-bottom:var(--hair) solid var(--line);font-size:.63rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--slate)}
.postbar .cat{color:var(--cyan-dp)}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:2.4rem;padding-top:1.8rem;border-top:var(--hair) solid var(--line)}
.tagrow span{font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;padding:.55em .95em;
  border:var(--hair) solid var(--line);border-radius:100px;color:var(--muted)}

/* -------------------------------------------------------------- tables --- */
.tbl-scroll{overflow-x:auto;margin-top:1.6rem}
.tbl{width:100%;border-collapse:collapse;min-width:40rem;text-align:left}
.tbl th,.tbl td{padding:.95rem .8rem;vertical-align:top}
.tbl thead th{font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);border-block:var(--hair) solid var(--line)}
.tbl tbody tr{border-bottom:var(--hair) solid var(--line-soft)}
.tbl tbody th{font-size:.92rem;font-weight:500}
.tbl tbody td{font-size:.88rem;color:var(--muted);font-weight:300}
.tbl a{display:inline-flex;align-items:center;gap:.45em}
.tbl a:hover{color:var(--cyan-dp)}
.tbl .dom{display:block;font-size:.68rem;color:var(--slate);font-weight:300;margin-top:.3em}
.badge{display:inline-block;font-size:.55rem;text-transform:uppercase;letter-spacing:.16em;
  padding:.3em .6em;border:var(--hair) solid var(--cyan-dp);color:var(--cyan-dp);border-radius:2px;margin-left:.5em}

/* -------------------------------------------------------------- footer --- */
.ftr{background:var(--ink);color:#fff;padding-block:clamp(50px,7vw,86px) 0;border-top:var(--hair) solid rgba(255,255,255,.12)}
.ftr__grid{display:grid;gap:clamp(30px,4vw,52px);grid-template-columns:1fr}
@media (min-width:700px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.ftr__grid{grid-template-columns:1.5fr 1fr 1fr 1.15fr}}
.ftr__logo{display:block;width:auto;height:clamp(46px,5vw,58px);margin-bottom:1.5rem}
.ftr p{font-size:.885rem;color:rgba(255,255,255,.68);max-width:42ch;font-weight:300;line-height:1.75}
.ftr h4{font-size:.635rem;font-weight:500;letter-spacing:.26em;color:var(--cyan);margin-bottom:1.2rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ftr li{font-size:.885rem;color:rgba(255,255,255,.72);font-weight:300}
.ftr a:hover{color:var(--cyan)}
.ftr__contact{display:grid;gap:.5rem;margin-top:1.4rem}
.ftr__contact a{font-size:.885rem;color:rgba(255,255,255,.72);word-break:break-word}
.ftr__contact span{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.35)}
.ftr__bot{margin-top:clamp(38px,5vw,62px);padding:26px 0;border-top:var(--hair) solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between}
.ftr__bot span,.ftr__bot a{font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.42)}
.ftr__bot a:hover{color:var(--cyan)}

/* ------------------------------------------------------------- callbar --- */
.callbar{position:fixed;inset:auto 0 0;z-index:80;display:grid;grid-template-columns:1fr 1fr;
  background:var(--ink);border-top:var(--hair) solid rgba(255,255,255,.16)}
@media (min-width:1050px){.callbar{display:none}}
body{padding-bottom:56px}
@media (min-width:1050px){body{padding-bottom:0}}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.6em;padding:1.1em;color:#fff;
  font-size:.665rem;text-transform:uppercase;letter-spacing:.2em}
.callbar a+a{border-left:var(--hair) solid rgba(255,255,255,.16);background:var(--cyan);color:var(--ink)}
.callbar svg{width:16px;height:16px}

/* --------------------------------------------------------------- misc --- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.note{background:var(--board);border-left:2px solid var(--cyan-dp);padding:clamp(18px,2.2vw,26px);
  border-radius:0 var(--r) var(--r) 0;font-size:.9rem;color:var(--muted);font-weight:300;line-height:1.75}
.note b{color:var(--ink);font-weight:500}
.on-dark .note{background:rgba(255,255,255,.06);border-left-color:var(--cyan);color:rgba(255,255,255,.78)}
.on-dark .note b{color:#fff}

.anchor{scroll-margin-top:calc(var(--hdr) + 24px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-sm{margin-top:clamp(20px,2.6vw,30px)}
.mt-md{margin-top:clamp(34px,4.5vw,56px)}
.mt-lg{margin-top:clamp(48px,6.5vw,84px)}