/* ==========================================================================
   Knepper Contracting LLC — build 03
   The page is the signal path of a job. Concept in every heading. A crafted
   object in the hero (a live patch panel), the client's own mascot and van,
   sticker badges, and one continuous cable ground whose packets advance
   with scroll. Palette is his van wrap: deep indigo, lime, cyan, violet,
   gold, coral.
   ========================================================================== */

:root{
  --ink:#0A0E24;--ink-2:#10163A;--ink-3:#181F4A;
  --hair:rgba(238,242,255,.10);--line:rgba(168,255,62,.18);
  --lime:#A8FF3E;--cyan:#00E5FF;--violet:#B36BFF;--gold:#FFC53E;--coral:#FF6B4A;--mint:#4ADE9B;
  --on:#EEF2FF;--on-soft:rgba(238,242,255,.74);--on-faint:rgba(238,242,255,.62);
  --display:'Barlow Condensed',ui-sans-serif,system-ui,'Arial Narrow',sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1280px;--gut:clamp(20px,5vw,56px);--sec:clamp(72px,9vw,150px);--r:6px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:.96;letter-spacing:-.01em;text-transform:uppercase}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:200;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:var(--r)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
main,.tick,.ftr{position:relative;z-index:1}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;padding:13px 24px;border-radius:var(--r);text-decoration:none;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s}
.btn--big{padding:17px 32px;font-size:13.5px}.btn--sm{padding:10px 16px;font-size:11.5px}
.btn--lime{background:var(--lime);color:#08210A}
.btn--lime:hover{transform:translateY(-2px);box-shadow:0 12px 34px -10px rgba(168,255,62,.75)}
.btn--wire{border-color:rgba(238,242,255,.3);color:var(--on)}
.btn--wire:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.arrow{transition:transform .35s var(--ease)}.btn:hover .arrow{transform:translateX(4px)}
.tlink{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(168,255,62,.4)}

/* ── heads ───────────────────────────────────────────────────────────── */
.kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--lime);margin:0 0 18px}
.h2{font-size:clamp(2rem,4.8vw,3.6rem);margin:0 0 16px}
.h2--xl{font-size:clamp(2.8rem,8vw,6.4rem);letter-spacing:-.02em;line-height:.9}
.sub{margin:0;color:var(--on-soft);font-size:1.04rem;max-width:60ch}
.shead{max-width:66ch;margin-bottom:52px}.shead--c{margin-inline:auto;text-align:center}

/* ── reveal ──────────────────────────────────────────────────────────── */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.07s}[data-rv-d="2"]{transition-delay:.14s}[data-rv-d="3"]{transition-delay:.21s}[data-rv-d="4"]{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  .tick__row,.cursor,.eyebrow__led,.ru__ports i,.panel__ports i,.sticker{animation:none!important}
  html{scroll-behavior:auto}
}

/* ══ THE GROUND ══════════════════════════════════════════════════════ */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--ink)}
/* the real galaxy swirl from the wrap, not a blurred circle */
.ground__swirl{position:absolute;inset:-22%;background:url("/assets/brand/swirl.jpg") center/cover no-repeat;opacity:.34;filter:blur(34px) saturate(1.45) contrast(1.1);mix-blend-mode:screen;will-change:transform}
.grid{position:absolute;inset:0;opacity:.24;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 85%)}
.lines{position:absolute;inset:-10% 0;width:100%;height:120%;will-change:transform}
.ln{fill:none;stroke:rgba(238,242,255,.22);stroke-width:1.5}
.pk{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:18 470;filter:drop-shadow(0 0 8px currentColor)}

/* ══ HEADER ══════════════════════════════════════════════════════════ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.hdr.stuck{background:rgba(10,14,36,.88);backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.hdr__logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.hdr__mark{width:58px;height:auto;border-radius:4px;mask-image:radial-gradient(ellipse at 50% 50%,#000 58%,transparent 100%)}
.hdr__name{font-family:var(--display);font-weight:800;font-size:1.1rem;text-transform:uppercase;line-height:1;display:flex;flex-direction:column;gap:3px}
.hdr__name i{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--lime);text-transform:uppercase}
.hdr__nav{display:none;align-items:center;gap:26px}
.hdr__nav a{text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-soft);transition:color .3s}
.hdr__nav a:hover,.hdr__nav a:focus-visible{color:var(--lime)}
.hdr__nav a.btn--lime,.hdr__nav a.btn--lime:hover{color:#08210A}
.hdr__nav a.btn--wire,.hdr__nav a.btn--wire:hover{color:var(--on)}
/* the burger's own display rule MUST come before the ≥1040px media query
   that hides it — two same-specificity rules for the same property resolve
   by source order, so a later unconditional `display:grid` always beat the
   earlier media-queried `display:none`, leaving the icon showing next to
   the full desktop nav on every inner page. That was the standing bug;
   fixed by ordering, not specificity, so nothing else has to change. */
.burger{background:none;border:1px solid var(--hair);border-radius:var(--r);width:44px;height:40px;display:grid;place-items:center;cursor:pointer;position:relative;z-index:61}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:18px;height:2px;background:var(--on);transition:transform .3s var(--ease),opacity .2s}
.burger span::before{transform:translateY(-6px)}.burger span::after{transform:translateY(4px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(0) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(0) rotate(-45deg)}
@media (min-width:1040px){.hdr__nav{display:flex}.burger{display:none}}
.hdr__nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:4px;padding:18px var(--gut) 26px;background:rgba(10,14,36,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);max-height:calc(100svh - 64px);overflow-y:auto}
.hdr__nav.open a{padding:10px 0;font-size:14px}
body.nav-open{overflow:hidden}

/* ══ 01 · UPLINK ═════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:130px 0 90px;overflow:hidden}
.hero__grid{display:grid;gap:44px;align-items:center}
@media (min-width:1000px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:40px}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:8px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(168,255,62,.06);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.eyebrow__led{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:blip 2s ease-in-out infinite}
@keyframes blip{50%{opacity:.35}}
.hero__h1{font-size:clamp(3.4rem,11.5vw,9.6rem);line-height:.86;margin:0 0 24px;letter-spacing:-.025em}
.hero__h1 .w{display:block;opacity:0;transform:translateY(.3em);animation:up .9s var(--ease) forwards}
.hero__h1 .w:nth-child(1){animation-delay:.1s}.hero__h1 .w:nth-child(2){animation-delay:.22s}.hero__h1 .w:nth-child(3){animation-delay:.34s}
.w--dim{color:var(--on-faint)}
.w--sig{background:linear-gradient(100deg,var(--lime),var(--cyan) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes up{to{opacity:1;transform:none}}
.cursor{display:inline-block;width:.07em;height:.78em;background:var(--lime);margin-left:.06em;vertical-align:baseline;animation:blink 1.05s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero__sub{max-width:56ch;font-size:clamp(1rem,1.6vw,1.18rem);color:var(--on-soft);margin:0 0 32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
/* the readout strip, Gas Station style */
.readout{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:rgba(238,242,255,.03);max-width:560px}
.readout div{padding:12px 14px;border-right:1px solid var(--hair)}.readout div:last-child{border-right:0}
.readout span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--on-faint);text-transform:uppercase}
.readout b{display:block;font-family:var(--mono);font-size:14px;font-weight:500;margin-top:4px;color:var(--on)}

/* the stage: Mojo + the patch panel + stickers */
.hero__stage{position:relative;min-height:520px;display:grid;place-items:center}
/* photo-stage variant (careers + service pages): cap the frame so a tall
   portrait photo can't push the h1 below the fold */
.hero__stage .glass{width:100%;aspect-ratio:5/4;max-height:520px;overflow:hidden}
.hero__stage .glass img{width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.mojo{border-radius:14px;mask-image:radial-gradient(ellipse at 50% 55%,#000 42%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 42%,transparent 72%)}
.mojo--hero{position:absolute;left:-6%;bottom:-4%;width:min(64%,420px);height:auto;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.panel{position:relative;z-index:2;width:min(100%,420px);margin-left:auto;background:linear-gradient(180deg,#1A2050,#0E1338);border:1px solid rgba(238,242,255,.16);border-radius:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);padding:16px 18px 14px;transform:rotate(-2deg);transition:transform .6s var(--ease)}
.panel:hover{transform:rotate(0)}
.panel__ears{position:absolute;inset:14px -8px auto -8px;display:flex;justify-content:space-between;pointer-events:none}
.panel__ears i{width:8px;height:60px;background:#222a5e;border:1px solid rgba(238,242,255,.14);border-radius:2px}
.panel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.panel__plate{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--on-faint);border:1px solid var(--hair);padding:5px 8px;border-radius:3px}
.panel__kc{font-family:var(--display);font-weight:900;font-size:1.2rem;background:linear-gradient(135deg,var(--gold) 0 48%,var(--cyan) 52% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel__ports{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;padding:10px;background:#070A1E;border-radius:6px;border:1px solid rgba(238,242,255,.08)}
.panel__ports i{aspect-ratio:1/1.15;border-radius:2px;background:#151b45;border:1px solid rgba(238,242,255,.10);position:relative}
.panel__ports i::after{content:"";position:absolute;left:50%;top:-4px;width:4px;height:4px;border-radius:50%;transform:translateX(-50%);background:#2a3270;transition:background .3s,box-shadow .3s}
.panel__ports i.on::after{background:var(--lime);box-shadow:0 0 8px var(--lime)}
.panel__ports i.busy::after{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.panel__lcd{margin-top:12px;background:#0B1A16;border:1px solid rgba(168,255,62,.28);border-radius:6px;padding:10px 12px;font-family:var(--mono);color:var(--lime);box-shadow:inset 0 0 30px rgba(168,255,62,.08)}
.lcd__row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;padding:3px 0}
.lcd__row span{color:rgba(168,255,62,.55)}
.lcd__row--big b{font-size:1.15rem;font-weight:700}
.lcd__row b.ok{color:var(--lime)}.lcd__row b.fail{color:var(--coral)}
.lcd__bar{height:4px;background:rgba(168,255,62,.15);border-radius:2px;margin-top:8px;overflow:hidden}
.lcd__bar i{display:block;height:100%;width:0;background:var(--lime);transition:width .35s linear}
.panel__foot{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--on-faint)}
/* stickers */
.sticker{position:absolute;z-index:3;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:1;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .4s var(--ease)}
.sticker small{font-family:var(--mono);font-size:9px;letter-spacing:.14em;font-weight:500;opacity:.8}
.sticker--plate{right:-4px;top:-8px;background:#F4F1E6;color:#1A1A1A;padding:10px 16px;border:3px solid #1A1A1A;border-radius:6px;font-size:1.25rem;transform:rotate(6deg);letter-spacing:.02em}
.sticker--plate small{color:#1A1A1A;letter-spacing:.24em}
.sticker--round{left:36%;top:8%;width:86px;height:86px;border-radius:50%;background:var(--gold);color:#3A2A08;justify-content:center;font-size:1.5rem;transform:rotate(-8deg);animation:float 5.5s ease-in-out infinite}
.sticker--tag{right:6%;bottom:6%;background:var(--violet);color:#150A2A;padding:12px 16px;border-radius:999px;font-size:1.3rem;transform:rotate(-4deg);animation:float 6.5s ease-in-out infinite 1s}
@keyframes float{50%{transform:translateY(-8px) rotate(var(--rr,-6deg))}}
.hero__stage:hover .sticker{transform:rotate(0) scale(1.04)}
.hero__down{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;width:22px;height:38px;border:1px solid var(--hair);border-radius:12px;display:grid;place-items:start center;padding-top:7px}
.hero__down span{width:3px;height:7px;border-radius:2px;background:var(--lime);animation:sd 1.9s ease-in-out infinite}
@keyframes sd{50%{transform:translateY(11px);opacity:.25}}
@media (max-width:999px){.hero__stage{min-height:460px;margin-top:20px}.mojo--hero{width:min(58%,360px)}}

/* ══ 02 · TICKER ═════════════════════════════════════════════════════ */
.tick{background:var(--lime);color:#08210A;overflow:hidden;padding:13px 0}
.tick__row{display:flex;gap:26px;align-items:center;width:max-content;animation:slide 38s linear infinite}
.tick__row span{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,2.2vw,1.5rem);white-space:nowrap}
.tick__row i{font-size:.5em;opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══ 03 · THESIS — three full-bleed colour panels ════════════════════ */
.thesis{display:grid;grid-template-columns:1fr}
@media (min-width:860px){.thesis{grid-template-columns:repeat(3,1fr)}}
.thesis__panel{position:relative;background:var(--c);color:#0A0E24;padding:clamp(48px,7vw,96px) clamp(24px,4vw,56px);min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.thesis__who{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;opacity:.7}
.thesis__do{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.9;margin:0;letter-spacing:-.02em}
.thesis__do em{font-style:italic;display:block}
.thesis__panel--us{color:#08210A}
.mojo--point{position:absolute;right:-6%;top:-8%;width:52%;height:auto;opacity:.95;transform:rotate(8deg);mask-image:radial-gradient(ellipse at 50% 50%,#000 46%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 46%,transparent 74%)}
.thesis__note{padding:52px var(--gut) 0}
.thesis__note p{max-width:72ch;margin:0 auto;font-size:1.08rem;color:var(--on-soft);text-align:center}

/* ══ 04 · THE TRUCK ══════════════════════════════════════════════════ */
.truck{position:relative;padding:var(--sec) 0 0;overflow:hidden}
.truck__img{position:relative;margin:0 0 -60px;mask-image:linear-gradient(to bottom,#000 55%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.truck__img img{width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center}
.truck__copy{position:relative;padding:40px 0 var(--sec);max-width:820px}
.truck__copy p{color:var(--on-soft);font-size:1.06rem;margin:0 0 18px}
.truck__slogan{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.4rem);color:var(--on)!important;margin-top:28px!important;line-height:1.05}
.truck__slogan em{font-style:italic;color:var(--lime)}

/* ══ 05 · THE RACK ═══════════════════════════════════════════════════ */
.rack{padding:var(--sec) 0}
.rack__frame{position:relative;padding:14px 28px;display:flex;flex-direction:column;gap:10px}
.rack__rail{position:absolute;top:0;bottom:0;width:16px;background:repeating-linear-gradient(to bottom,#1c2455 0 10px,#0E1338 10px 22px);border-inline:1px solid rgba(238,242,255,.14)}
.rack__rail--l{left:0}.rack__rail--r{right:0}
.ru{display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:center;padding:20px 22px;background:linear-gradient(180deg,rgba(24,31,74,.85),rgba(14,19,56,.9));border:1px solid rgba(238,242,255,.12);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .45s var(--ease),border-color .45s}
@media (min-width:860px){.ru{grid-template-columns:auto 1fr auto}}
.ru:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.ru__ports{display:grid;grid-template-columns:repeat(6,14px);gap:5px}
.ru__ports i{width:14px;height:16px;border-radius:2px;background:#0B1030;border:1px solid rgba(238,242,255,.12);position:relative}
.ru__ports i::after{content:"";position:absolute;left:50%;top:-4px;width:4px;height:4px;border-radius:50%;transform:translateX(-50%);background:var(--c);box-shadow:0 0 7px var(--c);animation:led 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.25s)}
.ru__ports i:nth-child(2)::after{--i:1}.ru__ports i:nth-child(3)::after{--i:2}.ru__ports i:nth-child(4)::after{--i:3}.ru__ports i:nth-child(5)::after{--i:4}.ru__ports i:nth-child(6)::after{--i:5}
@keyframes led{50%{opacity:.25}}
.ru__u{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--c);display:block;margin-bottom:6px}
.ru h3{font-size:1.7rem;margin:0 0 6px}
.ru p{margin:0;color:var(--on-soft);font-size:.95rem;max-width:60ch}
.ru__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ru__tags li{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--c);padding:6px 10px;border:1px dashed color-mix(in srgb,var(--c) 45%,transparent);border-radius:3px}
.rack__more{margin:34px 0 0;color:var(--on-soft)}.rack__more .mono{font-size:10.5px;letter-spacing:.16em;color:var(--lime);margin-right:10px}

/* ══ 06 · THE JOB PATH ═══════════════════════════════════════════════ */
.path{padding:var(--sec) 0}
.path__stage{position:relative}
.path__cable{display:block;width:100%;height:160px}
.path__ln{fill:none;stroke:rgba(238,242,255,.22);stroke-width:2}
.path__pk{fill:none;stroke:var(--lime);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--lime))}
.path__stops{list-style:none;margin:-26px auto 0;padding:0;display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:900px){.path__stops{grid-template-columns:repeat(5,1fr);gap:18px}}
.stop{text-align:center;padding:0 8px}
.stop__n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);border:2px solid var(--lime);color:var(--lime);font-family:var(--mono);font-size:12px;font-weight:700;margin-bottom:16px;box-shadow:0 0 0 6px var(--ink)}
.stop h3{font-size:1.25rem;margin:0 0 8px}
.stop p{margin:0;font-size:.9rem;color:var(--on-soft)}

/* ══ 07 · MARKETS ════════════════════════════════════════════════════ */
.mkt{padding:var(--sec) 0 0}
.mkt__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr}
@media (min-width:900px){.mkt__row{grid-template-columns:repeat(5,1fr)}}
.mkt__row li{background:var(--c);color:#07100A;padding:46px 22px 44px;display:flex;flex-direction:column;gap:8px;min-height:230px;justify-content:flex-end;mask-image:radial-gradient(120% 26px at 50% 100%,transparent 99%,#000 100%);-webkit-mask-image:radial-gradient(120% 26px at 50% 100%,transparent 99%,#000 100%)}
.mkt__row b{font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.1rem);text-transform:uppercase;line-height:.98}
.mkt__row i{font-style:normal;font-size:.84rem;opacity:.74;padding-bottom:12px}

/* ══ 08 · SPEC SHEET ═════════════════════════════════════════════════ */
.spec{padding:var(--sec) 0}
.spec__in{display:grid;gap:44px}
@media (min-width:960px){.spec__in{grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}}
.spec__copy .sub{margin-bottom:26px}
.spec__table{border-top:2px solid var(--on);padding-top:6px}
.spec__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;padding:14px 0 14px 16px;border-bottom:1px solid var(--hair);border-left:3px solid var(--c,transparent);font-family:var(--mono);font-size:14px}
.spec__row span:first-child{font-weight:700;color:var(--on)}
.spec__row span{color:var(--on-soft)}
.spec__row--head{border-left-color:transparent;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-faint);padding-left:16px}
.spec__row--head span{color:var(--on-faint)}
.spec__foot{margin:14px 0 0 16px;font-size:10.5px;letter-spacing:.1em;color:var(--on-faint)}

/* ══ 09 · CREDENTIALS ════════════════════════════════════════════════ */
.cred{padding:var(--sec) 0}
.cred__in{display:grid;gap:40px}
@media (min-width:960px){.cred__in{grid-template-columns:1fr 1fr;gap:70px;align-items:start}.cred .shead{margin-bottom:0}}
.cred__strip{display:flex;flex-direction:column}
.cred__row{display:flex;align-items:baseline;gap:14px;padding:20px 0;border-bottom:1px solid var(--hair)}.cred__row:first-child{border-top:1px solid var(--hair)}
.cred__k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-faint);white-space:nowrap}
.cred__dots{flex:1;height:1px;background-image:radial-gradient(circle,rgba(238,242,255,.35) 1px,transparent 1px);background-size:6px 1px;background-repeat:repeat-x;align-self:center}
.cred__v{font-family:var(--mono);font-size:clamp(1.05rem,2vw,1.4rem);font-weight:700;color:var(--lime);white-space:nowrap}

/* ══ 10 · DUE DILIGENCE ══════════════════════════════════════════════ */
.check{padding:var(--sec) 0;background:linear-gradient(180deg,rgba(16,22,58,.7),rgba(10,14,36,.2))}
.check__in{display:grid;gap:40px}
@media (min-width:960px){.check__in{grid-template-columns:.8fr 1.2fr;gap:70px}}
.check__list{list-style:none;margin:0;padding:0;counter-reset:c}
.check__list li{counter-increment:c;display:grid;grid-template-columns:auto 1fr;gap:6px 20px;padding:20px 0;border-bottom:1px solid var(--hair)}
.check__list li::before{content:counter(c,decimal-leading-zero);grid-row:1/3;font-family:var(--display);font-weight:900;font-size:2.4rem;line-height:1;color:var(--gold)}
.check__list b{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;font-weight:800}
.check__list span{color:var(--on-soft);font-size:.95rem}

/* ══ 11 · VALUES — stickers ══════════════════════════════════════════ */
.vals{padding:var(--sec) 0}
.vals__row{list-style:none;margin:0;padding:20px 0;display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.val{background:var(--c);color:#0A0E24;padding:26px 30px;border-radius:14px;transform:rotate(var(--r));min-width:200px;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.4);transition:transform .45s var(--ease)}
.val:hover{transform:rotate(0) scale(1.04)}
.val small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.val b{font-family:var(--display);font-weight:900;font-size:1.9rem;text-transform:uppercase;line-height:.95}

/* ══ 12 · PROOF ══════════════════════════════════════════════════════ */
.proof{padding:var(--sec) 0}
.proof__in{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.proof__in{grid-template-columns:auto 1fr;gap:64px}}
.proof__big{margin:0;text-align:center}
.proof__big b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(7rem,18vw,13rem);line-height:.82;background:linear-gradient(120deg,var(--gold),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.stars{display:block;color:var(--gold);letter-spacing:.18em;font-size:1.4rem;margin-top:10px}
.proof__copy .sub{margin-bottom:24px}

/* ══ 13 · COVERAGE ═══════════════════════════════════════════════════ */
.cov{padding:var(--sec) 0}
.cov__in{display:grid;gap:36px}
@media (min-width:960px){.cov__in{grid-template-columns:1fr 1fr;gap:70px;align-items:center}}
.cov__pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.cov__pills li{padding:16px 26px;border-radius:999px;background:rgba(238,242,255,.06);font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.3rem;letter-spacing:.02em}
.cov__ask{background:var(--lime)!important;color:#08210A}.cov__ask a{text-decoration:none}

/* ══ 14 · GCs & IT ═══════════════════════════════════════════════════ */
.gc{padding:var(--sec) 0;background:linear-gradient(180deg,rgba(16,22,58,.2),rgba(16,22,58,.7))}
.gc__cols{display:grid;gap:30px;margin-top:40px}
@media (min-width:860px){.gc__cols{grid-template-columns:repeat(3,1fr);gap:40px}}
.gc__cols h3{font-size:1.4rem;margin:0 0 10px;padding-top:16px;border-top:2px solid var(--lime)}
.gc__cols p{margin:0;color:var(--on-soft);font-size:.96rem}

/* ══ 15 · FAQ ════════════════════════════════════════════════════════ */
.faq{padding:var(--sec) 0}
.faq__in{display:grid;gap:36px}
@media (min-width:940px){.faq__in{grid-template-columns:.6fr 1.4fr;gap:64px;align-items:start}}
.faq .shead{margin-bottom:0}
.qa{border-top:1px solid var(--hair)}.qa:last-child{border-bottom:1px solid var(--hair)}
.qa summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-family:var(--display);font-size:1.25rem;text-transform:uppercase;transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--body);font-size:1.4rem;color:var(--lime);transition:transform .35s var(--ease)}
.qa[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa summary:hover{color:var(--lime)}
.qa p{margin:0 0 22px;color:var(--on-soft);font-size:.97rem;max-width:66ch}

/* ══ 16 · BOOK ═══════════════════════════════════════════════════════ */
.book{padding:var(--sec) 0;position:relative;overflow:hidden}
.book::before{content:"";position:absolute;left:50%;top:-30%;width:80vw;height:80vw;transform:translateX(-50%);background:radial-gradient(circle,rgba(168,255,62,.14),transparent 66%);filter:blur(80px);pointer-events:none}
.book__in{display:grid;gap:44px;position:relative}
@media (min-width:1000px){.book__in{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}}
.book__h{font-size:clamp(3rem,8vw,6.5rem);margin:0 0 18px;line-height:.88}
.book__copy p{color:var(--on-soft);margin:0 0 24px;font-size:1.05rem}
.book__lines{display:flex;flex-direction:column}
.bigline{display:flex;flex-direction:column;gap:5px;padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding-left .35s var(--ease)}
a.bigline:hover{padding-left:12px}
.bigline span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-faint)}
.bigline b{font-family:var(--display);font-size:1.35rem;text-transform:uppercase;color:var(--on);line-height:1.15}
.lead{background:rgba(16,22,58,.75);backdrop-filter:blur(10px);border:1px solid var(--hair);border-radius:10px;padding:26px}
.lead__grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.lead__grid{grid-template-columns:1fr 1fr}.f--wide{grid-column:1/-1}}
.f{display:flex;flex-direction:column;gap:6px}
.f>span,.f legend{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-faint)}
.f input,.f select,.f textarea{width:100%;background:#0A0E24;border:1px solid rgba(238,242,255,.18);border-radius:var(--r);color:var(--on);padding:12px 14px;font:inherit;font-size:15px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(168,255,62,.18)}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--lime) 50%),linear-gradient(135deg,var(--lime) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.lead__svc{border:1px solid rgba(238,242,255,.18);border-radius:var(--r);padding:12px 14px 6px;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.lead__svc legend{padding:0 6px}
.lead__svc label{font-size:14px;display:inline-flex;gap:8px;align-items:center;margin-bottom:6px}
.lead__svc input{width:auto;accent-color:var(--lime)}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.lead__btn{width:100%;margin-top:18px}
.lead__msg{margin:14px 0 0;font-size:12px;letter-spacing:.06em;color:var(--lime);min-height:1.2em}
.lead__msg.err{color:var(--coral)}
.lead__fine{margin:10px 0 0;font-size:10.5px;letter-spacing:.1em;color:var(--on-faint);text-align:center}

/* ══ FOOTER ══════════════════════════════════════════════════════════ */
.ftr{background:rgba(7,10,26,.92);backdrop-filter:blur(10px);border-top:1px solid var(--hair);padding:64px 0 30px}
.ftr__grid{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.ftr__logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.15rem;text-transform:uppercase;margin:0 0 14px}
.ftr__logo img{width:56px;height:auto;border-radius:4px;mask-image:radial-gradient(ellipse at 50% 50%,#000 58%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 58%,transparent 100%)}
.ftr__p{color:var(--on-faint);font-size:.9rem;margin:0 0 10px;max-width:36ch}
.ftr__lic{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.ftr h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--lime);margin:0 0 14px;text-transform:uppercase;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ftr a{color:var(--on-soft);text-decoration:none;font-size:.9rem;transition:color .3s}.ftr a:hover{color:var(--lime)}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:46px;padding-top:22px;border-top:1px solid var(--hair)}
.ftr__bottom p{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--on-faint);text-transform:uppercase}

/* ══════════════════════════════════════════════════════════════════════
   BUILD 04 ADDITIONS — the raised bar. Real photographs, a pointer-lit
   dark room, glass glare, drifting marks, a photo trail, the service-area
   map, stamps on the credentials, a fanning spec deck, count-ups.
   Hooks match the ported engine (js/effects.js, js/ground3d.js): the
   markup carries [data-fx="frames"], .spot, .glass[data-tilt], .drift,
   .trail[data-trail], .map, .icard>.stamp, .fan>.idx and [data-countup].
   Palette stays Knepper's: navy/ink, lime, cyan, gold, violet, coral.
   ══════════════════════════════════════════════════════════════════════ */

/* NOTE: css/rooms.css (loaded after this file) already ships the shared
   engine primitives — .cta-row, .spot, .glass+[data-tilt], .drift,
   .trail, .atlas/.map/.town, .icard/.stamp, .fan/.idx — matching
   js/effects.js exactly. What follows adds only what rooms.css doesn't
   cover (the homepage's own room layouts and photo frames) plus a
   handful of higher-specificity accents layered on top of the shared
   primitives, so this file never fights rooms.css for the same rule. */

/* ── generic framed job photo (not in rooms.css) ──────────────────────── */
.shot{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--hair);box-shadow:0 30px 70px -32px rgba(0,0,0,.75);background:#070A1E}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(0deg,rgba(7,10,26,.92),transparent);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-soft)}

/* ── hero: framed field photo beside the panel ──────────────────────── */
.hero__frame{position:absolute;right:2%;bottom:6%;width:min(46%,300px);aspect-ratio:4/3;z-index:2;transform:rotate(4deg);box-shadow:0 26px 60px -20px rgba(0,0,0,.8);border:6px solid #F4F1E6}
.hero__frame figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#1A1A1A;background:#F4F1E6}
@media (max-width:999px){.hero__frame{display:none}}

/* ── the closet: layout for .spot's own two/three-column room ────────── */
.spot__grid{position:relative;z-index:3;display:grid;gap:clamp(28px,4vw,54px)}
@media (min-width:960px){.spot__grid{grid-template-columns:1fr .8fr .8fr;align-items:center}}
.spot .shot{aspect-ratio:4/3}

/* ── the work — a contact-sheet room ──────────────────────────────────── */
.work{padding:var(--sec) 0}
.work__row{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:720px){.work__row{grid-template-columns:repeat(4,1fr)}}
.frame{position:relative;text-decoration:none;color:inherit;display:block}
.frame .shot{aspect-ratio:4/5}
.frame span{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-faint)}
.frame span b{color:var(--lime)}
.frame p{margin:4px 0 0;font-size:.82rem;color:var(--on-soft);line-height:1.35}

/* ── before / after — three named rooms, each using rooms.css's .ba pair ─ */
.transform{padding:var(--sec) 0}
.pairs{display:grid;gap:28px;margin-top:36px;grid-template-columns:1fr}
@media (min-width:860px){.pairs{grid-template-columns:repeat(3,1fr)}}
.pair h3{font-size:1.1rem;margin:0 0 10px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pair .ba figure{aspect-ratio:3/4}
.pair .ba img{height:100%}

/* ── range — the service-area map room (box/pins/routes are rooms.css's) ─ */
.range{padding:var(--sec) 0}
.atlas{margin-top:36px}
.map .map__pin--wa circle{fill:var(--violet)}
.map .map__route--wa{stroke:var(--violet)}
.map__pin tspan.sub{fill:var(--on-faint);font-weight:500;font-size:9px}
.town--wa b{color:var(--violet)}
.towns__note{margin:14px 4px 0;font-size:.82rem;color:var(--on-faint)}

/* ── the crew room ─────────────────────────────────────────────────────── */
.crew{padding:var(--sec) 0}
.crew__grid{display:grid;gap:16px;margin-top:36px;grid-template-columns:1fr;list-style:none;padding:0}
@media (min-width:760px){.crew__grid{grid-template-columns:repeat(3,1fr)}.crew__grid .shot:first-child{grid-column:1/3;grid-row:1/3}}
.crew .shot{aspect-ratio:1/1}
/* the spanning first tile used to inherit the natural (portrait) height of
   its own photo across both rows — correct proportions, but tall enough to
   run past one full screen on a big display. Cap it like every other
   single image on the site (rule: nothing exceeds ~70vh). */
@media (min-width:760px){
  .crew .shot:first-child{aspect-ratio:auto;height:100%;max-height:70vh}
  /* capping the height (above) without also letting the width shrink to
     match would crop this one back down — same fix as everywhere else on
     the site: contain, not cover, once a box stops matching the photo */
  .crew .shot:first-child img{object-fit:contain;background:#070A1E}
}
.crew .shot{position:relative;overflow:hidden}
.crew .shot img{transition:transform .6s var(--ease)}
.crew .shot:hover img,.crew .shot:focus-within img{transform:scale(1.06)}

/* ── credentials: layout only — the icard/stamp look is rooms.css's ──── */
.cred{padding:var(--sec) 0}
.cred__in{display:grid;gap:40px}
@media (min-width:960px){.cred__in{grid-template-columns:1fr 1fr;gap:70px;align-items:center}.cred .shead{margin-bottom:0}}
.icard{transform:rotate(-.6deg)}

/* ── spec sheet: layout only — the fan/idx card look is rooms.css's ──── */
.spec{padding:var(--sec) 0}
.spec__in{display:grid;gap:44px}
@media (min-width:960px){.spec__in{grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}}
.deck{position:relative}
.fan .idx{border-left:4px solid var(--c,var(--lime))}
.fan .idx i{color:var(--c,var(--lime))}
.spec__foot{margin:18px 0 0;font-size:10.5px;letter-spacing:.1em;color:var(--on-faint)}

/* ── spec sheet, homepage variant: full-bleed data band instead of the
   copy-left/card-right split (a real table first, so the numbers are
   readable without a hover/tap interaction), the six index cards
   below it as a plain horizontal strip rather than a stacked fan ──── */
.spec--band{background:var(--ink-2)}
.spec--band .shead{margin-bottom:40px}
.spec--band .spec__table{margin-top:0}
.spec__strip{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.spec__strip{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.spec__strip{grid-template-columns:repeat(6,1fr)}}
.spec__strip .idx{position:static;left:auto;top:auto;width:auto;margin-left:0;transform:none;transition:transform .3s var(--ease),border-color .3s}
.spec__strip .idx:hover{transform:translateY(-4px)}

/* ── due-diligence: the before photo ──────────────────────────────────── */
.check__shot{margin-top:32px;max-width:420px}
.check__shot .shot{aspect-ratio:4/3}

/* ── the lineage — John's portrait + count-ups ────────────────────────── */
.about{padding:var(--sec) 0}
.about__in{display:grid;gap:44px}
@media (min-width:960px){.about__in{grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}}
.about__shot{aspect-ratio:4/5;max-width:420px}
.about__stats{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (min-width:560px){.about__stats{grid-template-columns:repeat(4,1fr)}}
.about__stats b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,4.4vw,3rem);line-height:1;background:linear-gradient(120deg,var(--gold),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.about__stats span{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-faint)}

/* ── mkt band hosting .drift: keep the list above the drift canvas ──── */
.drift .mkt__row{position:relative;z-index:1}

/* ── last call: the close band (the .trail look itself is rooms.css's) ── */
.close{padding:var(--sec) 0;text-align:center}
.close__h{font-size:clamp(2.4rem,6vw,4.6rem);max-width:18ch;margin:0 auto 20px;line-height:.95}
.close__h em{font-style:italic;color:var(--lime)}
.close .cta-row{justify-content:center}

/* ── count-up numbers ──────────────────────────────────────────────────── */
[data-countup]{font-variant-numeric:tabular-nums}

/* ── split-line mask reveal (closet / work / last headings, js/site.js) ──
   Only ever built when GSAP + ScrollTrigger loaded and motion is allowed;
   with neither, the heading stays a plain, whole, already-visible line. */
.ln-mask{display:block;overflow:hidden}
.ln-mask .mline{display:block;will-change:transform}

/* ══════════════════════════════════════════════════════════════════════
   BUILD 06 — universal additions (every page, homepage included): gradient
   headline text, an underline-grow link, a card-hover language (lift + a
   glowing hairline on the leading edge + the photo scaling in an unmoved
   frame), a portrait frame sized to what a phone actually shot, a
   click-to-expand lightbox, and a before/after comparison slider.
   ══════════════════════════════════════════════════════════════════════ */

/* gradient headline text + the homepage's own lime-italic recipe ──────── */
.gr{background:linear-gradient(100deg,var(--lime),var(--cyan) 60%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.gr2{background:linear-gradient(120deg,var(--gold),var(--lime));-webkit-background-clip:text;
  background-clip:text;color:transparent;font-style:normal}

/* underline-grow link — inline text links outside .btn/.tlink ─────────── */
.ulink{color:var(--lime);text-decoration:none;background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .35s var(--ease),color .3s;padding-bottom:1px}
.ulink:hover,.ulink:focus-visible{background-size:100% 1px;color:var(--on)}

/* card hover language — lift, a glowing hairline on the leading (top)
   edge, and the photo scaling inside an unmoved frame. Opt in with class
   "liftcard" on any card-like wrapper: .band, .shot, .split__media,
   .icard, .nap__media, .lineage__media, .portrait … ─────────────────── */
.liftcard{position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.liftcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--c,var(--lime)),transparent);
  transform:scaleX(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.liftcard:hover,.liftcard:focus-within{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.liftcard:hover::before,.liftcard:focus-within::before{transform:scaleX(1)}
.liftcard img{transition:transform .6s var(--ease)}
.liftcard:hover img,.liftcard:focus-within img{transform:scale(1.06)}
a.band.liftcard,.band.liftcard{display:block}
.shot.liftcard,.band.liftcard,.split__media.liftcard,.icard.liftcard,.portrait.liftcard,
.nap__media.liftcard,.lineage__media.liftcard{position:relative;overflow:hidden}

/* a portrait photo frame sized to what a phone actually shot — caps at
   ~70vh so nothing exceeds one screen (verify rule 6 of the brief) ────── */
.portrait{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);aspect-ratio:3/4;max-height:70vh;max-width:440px}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait--wide{aspect-ratio:4/3;max-width:640px}
.duo{display:grid;gap:20px;grid-template-columns:1fr;margin-top:36px}
@media (min-width:640px){.duo{grid-template-columns:1fr 1fr}}
.duo .portrait{max-width:none;margin:0 auto}

/* click-to-expand lightbox — any [data-lightbox] image (the monitor-wall
   tiles opt in automatically) opens full frame in an overlay. Cards stay
   tight where that is the right look; the whole photo is one click away. */
[data-lightbox]{cursor:zoom-in}
.lbx{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:6vh 4vw;background:rgba(4,6,16,.92);backdrop-filter:blur(6px)}
.lbx.open{display:flex}
.lbx__img{max-width:100%;max-height:88vh;border-radius:8px;box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
  border:1px solid var(--hair)}
.lbx__cap{position:absolute;left:0;right:0;bottom:4vh;text-align:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-soft)}
.lbx__x{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(238,242,255,.08);border:1px solid var(--hair);color:var(--on);font-size:20px;
  line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.lbx__x:hover,.lbx__x:focus-visible{background:var(--lime);color:#08210A;border-color:var(--lime);transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.lbx__x:hover{transform:none}}

/* before/after comparison slider — a real interactive feature for the
   confirmed TV-mount pair, not a 168px strip. Square frame so a landscape
   "before" and a portrait "after" crop by the same, moderate amount
   either side. No JS: the handle sits at 50%, still draggable via the
   native range input underneath, which needs no script to work. ──────── */
.tvcompare{position:relative;max-width:520px;margin:0 auto}
.tvcompare__frame{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  border:1px solid var(--hair);box-shadow:0 40px 90px -40px rgba(0,0,0,.85);background:#070A1E;
  touch-action:pan-y}
.tvcompare__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-select:none;user-select:none;pointer-events:none}
.tvcompare__before{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.tvcompare__line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;
  background:var(--lime);box-shadow:0 0 10px rgba(168,255,62,.8);pointer-events:none;z-index:2}
.tvcompare__handle{position:absolute;top:50%;left:var(--x,50%);width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:var(--lime);color:#08210A;display:grid;place-items:center;z-index:3;
  box-shadow:0 10px 24px rgba(0,0,0,.5);border:0;cursor:ew-resize;font-family:var(--mono);font-size:13px}
.tvcompare__handle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tvcompare__tag{position:absolute;top:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(5,8,28,.78);color:var(--on);padding:6px 10px;border-radius:4px;
  border:1px solid var(--hair)}
.tvcompare__tag--b{left:14px}.tvcompare__tag--a{right:14px;color:var(--lime);border-color:rgba(168,255,62,.4)}
.tvcompare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
.tvcompare__hint{margin:16px 0 0;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-faint)}
@media (pointer:coarse){.tvcompare__hint{display:none}}

/* ══ MOBILE BAR ══════════════════════════════════════════════════════ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;padding:10px;background:rgba(10,14,36,.94);backdrop-filter:blur(12px);border-top:1px solid var(--hair)}
.mbar .btn{flex:1}
@media (min-width:800px){.mbar{display:none}}
@media (max-width:799px){body{padding-bottom:70px}}