/* ============================================================
   PMV DIGITAL MARKETING — v6
   Modeled on TERMINAL INDUSTRIES (terminal-industries.com)
   Awwwards Site of the Day 3 Sep 2025 — 7.68/10, DESIGN 7.95
   (also listed on the Awwwards Sites of the Month index for Sep 2025).
   Built by REJOUICE® + PROPAGANDE.
   Design language extracted with skillui --mode ultra.

   What we take: floating dark pill nav with segmented action buttons ·
   cinematic full-bleed hero with a giant scroll-revealed sentence and one
   accent-coloured word · client wall on a crosshair technical grid ·
   enormous centred sentence headings on white · numbered soft-grey cards ·
   an interactive value calculator answering into a dark notched panel.
   Terminal's acid lime #abff02 is re-pointed to PMV's cyan #22D3EE.
   ============================================================ */

:root{
  --ink:     #04141C;
  --ink-2:   #000000;
  --panel:   #08202B;
  --panel-2: #0C2C3A;

  --paper:   #FFFFFF;
  --soft:    #F3F5F4;
  --soft-2:  #E9EDEC;
  --line:    #E2E7E6;
  --line-d:  rgba(255,255,255,.14);

  --tx:      #071016;
  --tx-2:    #55605F;
  --tx-3:    #656D6B;

  --on-dark:   #FFFFFF;
  --on-dark-2: #A9B6B9;

  --acid:    #22D3EE;   /* PMV cyan — Terminal's accent role */
  --acid-d:  #0B7A93;   /* the same hue, dark enough for text on white */
  --acid-dd: #085D70;

  --wrap: 1180px;
  --gut:  clamp(20px, 4vw, 48px);
  --fs:   "Geist", "Helvetica Neue", Arial, sans-serif;
  --fm:   "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--tx);
  font-family:var(--fs); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.02; letter-spacing:-.035em }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.wide{ max-width:1500px }
.sr{ position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }
.skip{ position:absolute; left:-9999px; top:0; z-index:500; background:var(--acid); color:#04141C;
  padding:12px 18px; font:700 14px/1 var(--fm) }
.skip:focus{ left:10px; top:10px }
:focus-visible{ outline:3px solid var(--acid); outline-offset:3px; border-radius:6px }

.mono{ font-family:var(--fm); font-size:12px; font-weight:500; letter-spacing:.10em;
  text-transform:uppercase }

/* ============ FLOATING PILL NAV — Terminal's signature ============ */
.nav{ position:fixed; top:14px; left:0; right:0; z-index:300; padding-inline:var(--gut);
  pointer-events:none }
.nav-pill{
  pointer-events:auto; margin-inline:auto; max-width:1180px;
  display:flex; align-items:center; gap:8px;
  background:rgba(4,20,28,.72); backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:10px 10px 10px 18px;
  box-shadow:inset 0 1px rgba(255,255,255,.10), 0 20px 50px rgba(0,0,0,.30);
}
.nav-logo{ display:block; flex:0 0 auto; margin-right:6px }
.nav-logo img{ height:26px; width:auto }
.nav-links{ display:flex; align-items:center; gap:4px; margin-right:auto }
.nav-links a{
  font-size:14px; font-weight:500; color:#fff; text-decoration:none; opacity:.86;
  padding:9px 13px; border-radius:10px; transition:background .18s, opacity .18s;
}
.nav-links a:hover{ background:rgba(255,255,255,.10); opacity:1 }
.nav-acts{ display:flex; align-items:center; gap:8px }
.pbtn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--fm); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; border:0; cursor:pointer;
  padding:11px 15px; border-radius:11px; line-height:1.15;
  transition:transform .16s, background .16s, color .16s;
}
.pbtn:hover{ transform:translateY(-1px) }
.pbtn-acid{ background:var(--acid); color:#04141C }
.pbtn-acid:hover{ background:#5CE4F8 }
.pbtn-white{ background:#fff; color:#04141C }
.pbtn-white:hover{ background:#E9EDEC }
.pbtn-grey{ background:rgba(255,255,255,.16); color:#fff }
.pbtn-grey:hover{ background:rgba(255,255,255,.28) }
.pbtn-ic{ width:42px; height:42px; padding:0; border-radius:11px; background:rgba(255,255,255,.12);
  color:#fff }
.pbtn-ic svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8 }
.nav-toggle{ display:none }

/* ============ CINEMATIC HERO ============ */
.cine{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; background:var(--ink); color:#fff;
  padding-top:clamp(118px,15vh,160px); padding-bottom:clamp(34px,6vh,70px) }
.cine-bg{ position:absolute; inset:0 }
.cine-bg img{ width:100%; height:100%; object-fit:cover; object-position:100% 76%;
  transform:scale(1.6); transform-origin:100% 76% }
.cine-bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(1100px 620px at 50% 108%, rgba(34,211,238,.20), transparent 62%),
    linear-gradient(90deg, rgba(4,20,28,.96) 0%, rgba(4,20,28,.62) 24%, rgba(4,20,28,.50) 50%, rgba(4,20,28,.62) 76%, rgba(4,20,28,.96) 100%),
    linear-gradient(180deg, rgba(4,20,28,.92) 0%, rgba(4,20,28,.55) 30%, rgba(4,20,28,.88) 74%, rgba(4,20,28,.99) 100%) }
.cine-top{ text-align:center; padding-inline:var(--gut);
  margin-bottom:clamp(16px,2.6vh,30px) }
.cine-top .mono{ color:var(--acid) }
.cine-in{ position:relative }
.cine-line{
  font-size:clamp(34px,6.1vw,92px); font-weight:700; letter-spacing:-.045em; line-height:1.0;
  text-align:center; max-width:15ch; margin-inline:auto;
}
.cine-line .w{ display:inline-block; opacity:0; transform:translateY(28px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1) }
.cine-line.go .w{ opacity:1; transform:none }
.cine-line em{ font-style:normal; color:var(--acid) }
.no-js .cine-line .w{ opacity:1; transform:none }
.cine-sub{ margin:26px auto 0; max-width:58ch; text-align:center; font-size:clamp(15px,1.3vw,18px);
  color:var(--on-dark-2) }
.cine-cta{ display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap }
.cine-foot{ margin-top:clamp(34px,5vh,60px); border-top:1px solid var(--line-d);
  padding-top:18px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  color:var(--on-dark-2) }
.cine-foot b{ color:#fff; font-weight:600 }

/* big buttons (page body) */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  font-family:var(--fm); font-size:12.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:17px 28px; border-radius:13px; border:1px solid transparent;
  cursor:pointer; transition:transform .16s, background .16s, color .16s, border-color .16s;
}
.b:hover{ transform:translateY(-2px) }
.b-acid{ background:var(--acid); color:#04141C }
.b-acid:hover{ background:#5CE4F8 }
.b-dark{ background:var(--ink); color:#fff }
.b-dark:hover{ background:#0A2836 }
.b-line{ background:transparent; color:var(--tx); border-color:var(--line) }
.b-line:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.cine .b-line, .sec-dark .b-line, .startstrip .b-line, .cta .b-line{
  color:#fff; border-color:rgba(255,255,255,.42) }
.cine .b-line:hover, .sec-dark .b-line:hover, .startstrip .b-line:hover, .cta .b-line:hover{
  background:#fff; border-color:#fff; color:var(--ink) }
.bs{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px }

/* ============ sections ============ */
.sec{ padding:clamp(72px,9vw,140px) 0 }
.sec-soft{ background:var(--soft) }
.sec-dark{ background:var(--ink); color:#fff }
.sec-dark .mono{ color:var(--acid) }
.lbl{ display:flex; align-items:center; gap:10px; color:var(--acid-d) }
.sec-dark .lbl{ color:var(--acid) }
.lbl::before{ content:""; width:6px; height:6px; border-radius:999px; background:currentColor }

/* the enormous centred sentence — Terminal's move */
.bigline{
  font-size:clamp(30px,5.6vw,84px); font-weight:700; letter-spacing:-.04em; line-height:1.0;
  text-align:center; max-width:17ch; margin:26px auto 0;
}
.bigline em{ font-style:normal; color:var(--acid-d) }
.sec-dark .bigline em{ color:var(--acid) }
.blsub{ margin:26px auto 0; max-width:60ch; text-align:center; font-size:17px; color:var(--tx-2) }
.sec-dark .blsub{ color:var(--on-dark-2) }
.center{ text-align:center }
.center .lbl{ justify-content:center }

/* ============ CROSSHAIR CLIENT WALL ============ */
.gridwall{
  position:relative; margin-top:clamp(40px,5vw,70px);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.gw{
  position:relative; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0; text-decoration:none; display:block; background:var(--paper);
  transition:background .22s;
}
.gw:hover{ background:var(--soft) }
.gw-pic{ display:block; aspect-ratio:16/10; overflow:hidden; margin:14px }
.gw-pic img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  border-radius:6px; transition:transform .6s ease }
.gw:hover .gw-pic img{ transform:scale(1.05) }
.gw-b{ display:block; padding:0 18px 18px }
.gw-b .u{ display:block; font-family:var(--fm); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--acid-d) }
.gw-b .n{ display:block; font-size:16px; font-weight:600; color:var(--tx); margin-top:6px;
  letter-spacing:-.02em }
/* crosshairs at the grid intersections */
.gw::before{
  content:""; position:absolute; right:-4.5px; bottom:-4.5px; width:9px; height:9px;
  background:
    linear-gradient(var(--line),var(--line)) center/9px 1px no-repeat,
    linear-gradient(var(--line),var(--line)) center/1px 9px no-repeat;
  z-index:2;
}

/* ============ NUMBERED SOFT CARDS ============ */
.ncards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:clamp(40px,5vw,68px) }
.nc{
  background:var(--soft); border-radius:18px; padding:30px 28px 32px;
  display:flex; flex-direction:column; transition:background .22s, transform .22s;
}
.sec-soft .nc{ background:#fff }
.sec-dark .nc{ background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10) }
.nc:hover{ transform:translateY(-4px) }
.nc .k{ font-family:var(--fm); font-size:11.5px; font-weight:500; letter-spacing:.10em;
  text-transform:uppercase; color:var(--tx-3) }
.sec-dark .nc .k{ color:var(--acid) }
.nc h3{ font-size:22px; font-weight:600; margin-top:18px; letter-spacing:-.025em }
.nc p{ margin-top:12px; font-size:15px; color:var(--tx-2) }
.sec-dark .nc p{ color:var(--on-dark-2) }
.nc .sp{ flex:1 }
.nc .go{ margin-top:22px; font-family:var(--fm); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--acid-d); text-decoration:none;
  display:inline-flex; gap:8px; align-items:center; transition:gap .2s }
.sec-dark .nc .go{ color:var(--acid) }
.nc .go:hover{ gap:15px }

/* ============ THE CALCULATOR ============ */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px);
  margin-top:clamp(40px,5vw,68px); align-items:start }
.calc-in .mono{ color:var(--tx-3) }
.calc-in h3{ font-size:clamp(24px,2.8vw,36px); font-weight:600; margin-top:10px;
  letter-spacing:-.03em }
.cf{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; margin-top:30px }
.cf label{ display:block; font-size:14px; color:var(--tx-2); margin-bottom:6px }
.cf .fld{ display:flex; align-items:baseline; gap:6px; border-bottom:1px solid var(--line);
  padding-bottom:9px }
.cf .fld span{ color:var(--tx-3); font-size:17px }
.cf input{
  width:100%; border:0; background:transparent; font:600 21px/1.2 var(--fs); color:var(--tx);
  padding:0; letter-spacing:-.02em; -moz-appearance:textfield;
}
.cf input::-webkit-outer-spin-button,.cf input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cf input:focus{ outline:none }
.cf .fld:focus-within{ border-color:var(--acid-d) }
.cf .full{ grid-column:1/-1 }
.calc-note{ margin-top:26px; font-size:13.5px; color:var(--tx-3); max-width:56ch }

/* the answer panel — dark, tab-notched, Terminal's result card */
.ans{
  position:relative; background:linear-gradient(150deg, var(--panel) 0%, var(--ink) 62%, #06232E 100%);
  color:#fff; border-radius:20px; padding:clamp(26px,3vw,38px);
  box-shadow:inset 0 1px rgba(255,255,255,.10), 0 40px 80px rgba(4,20,28,.28);
  overflow:hidden;
}
.ans::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(520px 300px at 88% -6%, rgba(34,211,238,.24), transparent 62%) }
.ans > *{ position:relative }
.ans .tab{
  display:inline-block; font-family:var(--fm); font-size:11px; font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; background:var(--acid); color:#04141C; padding:7px 13px;
  border-radius:9px;
}
.ans h4{ font-size:clamp(17px,1.7vw,21px); font-weight:500; margin-top:20px; color:var(--on-dark-2);
  letter-spacing:-.02em }
.ans h4 b{ color:#fff; font-weight:600 }
.ans .big{ font-size:clamp(40px,5.4vw,68px); font-weight:700; letter-spacing:-.045em;
  line-height:1; margin-top:12px; color:var(--acid) }
.ans .rows{ margin-top:26px; border-top:1px solid var(--line-d) }
.ans .rows li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line-d); font-size:15px; color:var(--on-dark-2) }
.ans .rows li b{ color:#fff; font-weight:600; font-size:17px; letter-spacing:-.02em;
  white-space:nowrap }
.ans .ansnote{ display:block; margin-top:22px; font-size:13.5px; color:var(--on-dark-2) }
.ans .b{ margin-top:22px }

/* ============ PLANS ============ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(40px,5vw,68px);
  align-items:start }
.pl{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .22s, box-shadow .22s }
.sec-soft .pl{ background:#fff }
.pl:hover{ transform:translateY(-5px); box-shadow:0 26px 60px rgba(4,20,28,.12) }
.pl.hot{ background:var(--ink); color:#fff; border-color:var(--ink) }
.pl-hd{ padding:28px 28px 24px; border-bottom:1px solid var(--line); position:relative }
.pl.hot .pl-hd{ border-bottom-color:var(--line-d) }
.pl-hd .tag{ position:absolute; top:22px; right:24px; font-family:var(--fm); font-size:10px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--acid);
  color:#04141C; padding:5px 11px; border-radius:999px }
.pl-hd .k{ font-family:var(--fm); font-size:11px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--tx-3) }
.pl.hot .pl-hd .k{ color:var(--acid) }
.pl-hd h3{ font-size:24px; font-weight:600; margin-top:12px; letter-spacing:-.03em }
.pl-hd .pr{ margin-top:16px; font-size:clamp(38px,4vw,52px); font-weight:700; letter-spacing:-.045em;
  line-height:1 }
.pl-hd .pr small{ font-family:var(--fm); font-size:14px; font-weight:500; color:var(--tx-3) }
.pl.hot .pl-hd .pr small{ color:var(--on-dark-2) }
.pl-bd{ padding:24px 28px 30px; flex:1; display:flex; flex-direction:column }
.pl-bd li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; padding:9px 0 }
.pl.hot .pl-bd li{ color:#fff }
.pl-bd li .tk{ color:var(--acid-d); font-weight:700; flex:0 0 auto; font-size:13px; margin-top:3px }
.pl.hot .pl-bd li .tk{ color:var(--acid) }
.pl-bd .sp{ flex:1 }
.pl-bd .b{ width:100%; margin-top:22px }
.pl.hot .b-line{ color:#fff; border-color:rgba(255,255,255,.4) }
.pl.hot .b-line:hover{ background:#fff; color:var(--ink); border-color:#fff }
.fine{ margin-top:26px; font-size:13.5px; color:var(--tx-3); max-width:84ch }
.sec-dark .fine{ color:var(--on-dark-2) }

/* add-ons row */
.adds{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(36px,4vw,56px) }

/* ============ FAQ ============ */
.faq{ margin-top:clamp(36px,4vw,56px); display:grid; gap:12px; max-width:880px;
  margin-inline:auto }
.faq details{ background:var(--soft); border-radius:14px; overflow:hidden }
.sec-soft .faq details{ background:#fff }
.faq summary{ cursor:pointer; list-style:none; padding:20px 24px; font-size:17px; font-weight:600;
  letter-spacing:-.02em; display:flex; align-items:center; justify-content:space-between; gap:16px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--acid-d); font-size:22px; font-weight:600; line-height:1 }
.faq details[open] summary::after{ content:"\2013" }
.faq p{ padding:0 24px 22px; font-size:15.5px; color:var(--tx-2) }

/* ============ CTA ============ */
.cta{ background:var(--ink); color:#fff; position:relative; overflow:hidden }
.cta::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(760px 440px at 82% 6%, rgba(34,211,238,.20), transparent 62%) }
.cta .wrap{ position:relative }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start }
.fcard{ background:#fff; color:var(--tx); border-radius:20px; padding:clamp(26px,3vw,36px);
  box-shadow:0 40px 90px rgba(0,0,0,.35) }
.fcard h3{ font-size:21px; font-weight:600; letter-spacing:-.03em }
.fcard .fs{ font-size:14px; color:var(--tx-3); margin-top:8px }
.f label{ display:block; font-family:var(--fm); font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tx-3); margin:18px 0 7px }
.f input, .f textarea{ width:100%; background:var(--soft); border:1px solid var(--line);
  border-radius:11px; font:inherit; font-size:16px; padding:13px 15px; color:var(--tx) }
.f input:focus, .f textarea:focus{ outline:none; border-color:var(--acid-d); background:#fff }
.f input:user-invalid, .f textarea:user-invalid{ border-color:#E0524C }
.f textarea{ min-height:104px; resize:vertical }
.f .b{ width:100%; margin-top:20px }
.trust{ margin-top:28px; display:grid; gap:12px }
.trust li{ display:flex; gap:12px; align-items:center; font-size:15.5px; color:var(--on-dark-2) }
.trust .tk{ color:var(--acid); font-weight:700 }

/* ============ FOOTER (HOUSE FOOTER) ============ */
.site-footer{ background:var(--ink-2); color:#fff; padding:clamp(52px,6vw,88px) 0 30px }
.foot{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr 1.1fr; gap:34px }
.foot .wm{ font-family:var(--fm); font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase }
.foot .muted{ font-size:14.5px; color:var(--on-dark-2); margin-top:14px; max-width:34ch }
.foot h2{ font-family:var(--fm); font-size:11px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-dark-2); margin-bottom:15px }
.foot nav a, .foot-ada a{ display:block; font-size:14.5px; color:#DDE5E4; text-decoration:none;
  padding:5px 0 }
.foot nav a:hover, .foot-ada a:hover{ color:var(--acid) }
.foot-folder{ font-family:var(--fm); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--on-dark-2); margin-top:16px }
.foot-scans li{ display:flex; align-items:center; gap:10px; margin-top:8px }
.ada-pill{ font-family:var(--fm); font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px;
  background:rgba(34,211,238,.16); color:#7FE6F8; border:1px solid rgba(34,211,238,.42) }
.footer-legal{ display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:nowrap; white-space:nowrap; margin-top:clamp(36px,5vw,60px); padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; color:var(--on-dark-2) }
.footer-legal a{ color:#DDE5E4; text-decoration:underline; text-underline-offset:2px }
.footer-legal a:hover{ color:var(--acid) }
.footer-legal .legal a{ margin-right:16px }
.footer-legal .legal a:last-child{ margin-right:0 }

/* ============ reveal ============ */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto}
  .cine-line .w{opacity:1;transform:none;transition:none}
}
.no-js .rv{ opacity:1; transform:none }

/* ============================================================
   RESPONSIVE — verified at true 375px
   ============================================================ */
@media (max-width:1240px){
  .footer-legal{ flex-wrap:wrap; white-space:normal; gap:10px 22px }
}
@media (max-width:1080px){
  .gridwall{ grid-template-columns:repeat(3,1fr) }
  .ncards, .plans, .adds{ grid-template-columns:1fr }
  .pl.hot{ order:-1 }
  .calc, .cta-grid{ grid-template-columns:1fr }
  .foot{ grid-template-columns:1fr 1fr 1fr; gap:30px }
}
@media (max-width:900px){
  .nav-links{ display:none }
  .nav-pill{ padding:10px }
  .nav-logo{ margin-right:auto; margin-left:8px }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
    background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:11px; cursor:pointer;
    font:700 11px/1 var(--fm); letter-spacing:.08em; text-transform:uppercase; padding:12px 14px;
  }
  .nav.open .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; left:var(--gut); right:var(--gut); top:calc(100% + 8px);
    background:rgba(4,20,28,.96); backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:10px;
  }
  .nav.open .nav-links a{ padding:14px; font-size:16px }
  .nav-acts .pbtn-grey, .nav-acts .pbtn-white{ display:none }
}
@media (max-width:760px){
  .gridwall{ grid-template-columns:repeat(2,1fr) }
  .cf{ grid-template-columns:1fr }
  .cine-foot{ font-size:13px; gap:10px }
}
@media (max-width:560px){
  .gridwall{ grid-template-columns:1fr }
  .foot{ grid-template-columns:1fr; gap:26px }
  .foot .muted{ max-width:none }
  .bs, .cine-cta{ flex-direction:column }
  .b{ width:100% }
  .cine{ min-height:0 }
  .cine-in{ padding-bottom:40px }
  .cine-line{ max-width:none; text-align:left }
  .cine-sub{ text-align:left; margin-inline:0 }
  .bigline{ max-width:none }
}

/* ============ inner-page components ============ */
.prose{ max-width:74ch; margin-inline:auto; margin-top:clamp(30px,4vw,48px) }
.prose p{ font-size:17px; line-height:1.75; color:var(--tx-2); margin-bottom:20px }
.prose p:last-child{ margin-bottom:0 }
.prose h3{ font-size:22px; font-weight:600; letter-spacing:-.03em; color:var(--tx);
  margin:34px 0 14px }
.sec-dark .prose p{ color:var(--on-dark-2) }
.sec-dark .prose h3{ color:#fff }

.incl{ max-width:760px; margin:clamp(30px,4vw,48px) auto 0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:2px 26px }
.incl li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; padding:13px 0;
  border-bottom:1px solid var(--line) }
.incl li .tk{ color:var(--acid-d); font-weight:700; flex:0 0 auto; font-size:13px; margin-top:4px }
.sec-dark .incl li{ border-bottom-color:var(--line-d); color:#fff }
.sec-dark .incl li .tk{ color:var(--acid) }

.pricebox{ max-width:640px; margin:clamp(30px,4vw,48px) auto 0; text-align:center;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:clamp(28px,3.4vw,42px) }
.pricebox .mono{ color:var(--acid) }
.pricebox .pr{ font-size:clamp(48px,6vw,76px); font-weight:700; letter-spacing:-.045em;
  line-height:1; margin-top:14px }
.pricebox .pr small{ font-family:var(--fm); font-size:16px; font-weight:500;
  color:var(--on-dark-2); letter-spacing:0 }
.pricebox .note{ margin-top:16px; font-size:15px; color:var(--on-dark-2); max-width:52ch;
  margin-inline:auto }
.pricebox .bs{ justify-content:center }

/* industries — real site structure, links out to the six pages */
.inds{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:clamp(36px,4vw,56px) }
.ind{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--soft); border-radius:16px; padding:22px 24px; text-decoration:none;
  font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--tx);
  transition:background .2s, transform .2s }
.ind:hover{ background:var(--ink); color:#fff; transform:translateY(-3px) }
.ind .a{ font-family:var(--fm); font-size:15px; color:var(--acid-d) }
.ind:hover .a{ color:var(--acid) }

@media (max-width:820px){ .inds{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .incl{ grid-template-columns:1fr } .inds{ grid-template-columns:1fr } }

/* accessibility scan table — long routes must never force overflow */
.incl li{ min-width:0 }
.incl li span{ min-width:0; overflow-wrap:anywhere }
.scan .incl li{ display:grid; grid-template-columns:auto 1fr auto auto; gap:14px;
  align-items:baseline }
.scan .pg{ font-family:var(--fm); font-size:14px; color:var(--tx) }
.scan .ck{ font-size:14px; color:var(--tx-3); white-space:nowrap }
.scan .vi{ font-family:var(--fm); font-size:12px; font-weight:700; text-transform:uppercase;
  color:var(--acid-d); white-space:nowrap }
@media (max-width:620px){
  .scan .incl li{ grid-template-columns:auto 1fr; row-gap:4px }
  .scan .ck, .scan .vi{ grid-column:2 }
}

/* ============================================================
   HOME AS A SITE, NOT A LANDING PAGE
   Left-aligned two-column section heads, index rows, a compact
   price table and a company block — instead of seven identical
   centred marketing bands and a form.
   ============================================================ */
.hd2{ display:grid; grid-template-columns:210px 1fr; gap:clamp(24px,4vw,60px);
  align-items:start; border-top:1px solid var(--line); padding-top:26px }
.sec-dark .hd2{ border-top-color:var(--line-d) }
.hd2 h2{ font-size:clamp(26px,3.4vw,46px); font-weight:700; letter-spacing:-.035em;
  line-height:1.04; max-width:20ch }
.hd2 h2 em{ font-style:normal; color:var(--acid-d) }
.sec-dark .hd2 h2 em{ color:var(--acid) }
.hd2 .r{ display:grid; gap:16px }
.hd2 p{ font-size:16.5px; color:var(--tx-2); max-width:58ch }
.sec-dark .hd2 p{ color:var(--on-dark-2) }
.hd2 .more{ font-family:var(--fm); font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--acid-d); text-decoration:none; justify-self:start;
  display:inline-flex; gap:8px; align-items:center; transition:gap .2s }
.sec-dark .hd2 .more{ color:var(--acid) }
.hd2 .more:hover{ gap:15px }

/* index rows — the shape a site uses, not sales cards */
.idx{ margin-top:clamp(30px,4vw,52px); border-top:1px solid var(--line) }
.sec-dark .idx{ border-top-color:var(--line-d) }
.idx a{
  display:grid; grid-template-columns:56px 1.05fr 1.5fr auto 40px; gap:clamp(14px,2vw,28px);
  align-items:baseline; padding:24px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--tx); transition:background .2s, padding-left .2s;
}
.sec-dark .idx a{ border-bottom-color:var(--line-d); color:#fff }
.idx a:hover{ background:var(--soft); padding-left:12px }
.sec-dark .idx a:hover{ background:rgba(255,255,255,.05) }
.idx .n{ font-family:var(--fm); font-size:12px; color:var(--tx-3) }
.sec-dark .idx .n{ color:var(--acid) }
.idx .t{ font-size:clamp(19px,2vw,24px); font-weight:600; letter-spacing:-.03em }
.idx .d{ font-size:15px; color:var(--tx-2) }
.sec-dark .idx .d{ color:var(--on-dark-2) }
.idx .p{ font-family:var(--fm); font-size:14px; font-weight:700; white-space:nowrap }
.idx .g{ font-size:18px; color:var(--tx-3); text-align:right }
.idx a:hover .g{ color:var(--acid-d) }
.sec-dark .idx a:hover .g{ color:var(--acid) }

/* two-column plain link list */
.list2{ margin-top:clamp(28px,3.5vw,44px); display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,4vw,56px); border-top:1px solid var(--line) }
.list2 a{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line); text-decoration:none;
  font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--tx);
  transition:padding-left .2s, color .2s }
.list2 a:hover{ padding-left:10px; color:var(--acid-d) }
.list2 a span{ font-family:var(--fm); font-size:13px; color:var(--tx-3) }

/* compact price table */
.ptab{ margin-top:clamp(28px,3.5vw,44px); width:100%; border-collapse:collapse; font-size:16px }
.ptab th, .ptab td{ text-align:left; padding:16px 14px; border-bottom:1px solid var(--line) }
.ptab thead th{ font-family:var(--fm); font-size:11.5px; font-weight:500; letter-spacing:.10em;
  text-transform:uppercase; color:var(--tx-3); border-bottom:1px solid var(--line) }
.ptab td:first-child{ font-weight:600; letter-spacing:-.02em }
.ptab .pr{ font-family:var(--fm); font-weight:700; white-space:nowrap }
.ptab tbody tr:hover{ background:var(--soft) }
.ptab a{ font-family:var(--fm); font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--acid-d); text-decoration:none; white-space:nowrap }
.tabwrap{ overflow-x:auto }

/* company block — the furniture a website has and a landing page never does */
.company{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(24px,4vw,56px);
  margin-top:clamp(30px,4vw,48px) }
.company h3{ font-size:12px; font-family:var(--fm); font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tx-3); margin-bottom:16px }
.company p{ font-size:16.5px; color:var(--tx-2); line-height:1.75 }
.company nav a{ display:block; padding:8px 0; font-size:16px; color:var(--tx);
  text-decoration:none; border-bottom:1px solid var(--line) }
.company nav a:hover{ color:var(--acid-d) }

/* slim start strip instead of a home-page form */
.startstrip{ background:var(--ink); color:#fff }
.startstrip .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding-block:clamp(34px,4.5vw,56px) }
.startstrip h2{ font-size:clamp(22px,2.8vw,36px); font-weight:700; letter-spacing:-.035em;
  max-width:22ch }
.startstrip h2 em{ font-style:normal; color:var(--acid) }
.startstrip .bs{ margin-top:0 }

/* calculator teaser strip */
.toolstrip{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; background:var(--soft); border-radius:20px;
  padding:clamp(24px,3vw,36px); margin-top:clamp(28px,3.5vw,44px) }
.toolstrip .t{ font-size:clamp(19px,2.2vw,26px); font-weight:600; letter-spacing:-.03em;
  max-width:30ch }
.toolstrip .d{ font-size:15px; color:var(--tx-2); margin-top:8px; max-width:52ch }

@media (max-width:900px){
  .hd2{ grid-template-columns:1fr; gap:16px }
  .idx a{ grid-template-columns:40px 1fr auto; row-gap:6px }
  .idx .d{ grid-column:2/-1 }
  .company{ grid-template-columns:1fr 1fr }
}
@media (max-width:620px){
  .list2{ grid-template-columns:1fr }
  .company{ grid-template-columns:1fr }
  .idx a{ grid-template-columns:34px 1fr; }
  .idx .p, .idx .g{ grid-column:2 }
  .idx .g{ text-align:left }
}

.footcontact{ margin-top:18px; display:grid; gap:6px }
.footcontact a{ font-family:var(--fm); font-size:14px; color:#fff; text-decoration:none;
  overflow-wrap:anywhere }
.footcontact a:hover{ color:var(--acid) }

/* the price table stacks on a phone — an overflow-x table still widens the
   mobile layout viewport, which is what mob-audit's iw!=375 was catching */
.tabwrap{ max-width:100% }
@media (max-width:720px){
  .ptab, .ptab tbody, .ptab tr, .ptab td{ display:block; width:100% } /* ptab stacks */
  .ptab thead{ display:none }
  .ptab tr{ border-bottom:1px solid var(--line); padding:16px 0 }
  .ptab td{ border:0; padding:4px 0; display:grid; grid-template-columns:104px 1fr; gap:12px;
    align-items:baseline }
  .ptab td::before{ content:attr(data-l); font-family:var(--fm); font-size:11px;
    letter-spacing:.09em; text-transform:uppercase; color:var(--tx-3) }
  .ptab td:first-child{ font-size:19px; letter-spacing:-.03em; padding-bottom:8px }
  .ptab tbody tr:hover{ background:transparent }
}

/* ============================================================
   HOME = a short entry point. Not a billboard, not a scroll of
   every section. Services / work / pricing / calculator / about
   / contact each have their own page — home just routes there.
   ============================================================ */
/* home banner */
.banner{ position:relative; overflow:hidden; background:var(--ink); color:#fff;
  padding-top:clamp(112px,13vh,142px); padding-bottom:clamp(44px,6vh,72px) }
.banner-bg{ position:absolute; inset:0 }
.banner-bg img{ width:100%; height:100%; object-fit:cover; object-position:100% 74%;
  transform:scale(1.5); transform-origin:100% 74% }
.banner-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(4,20,28,.97) 0%, rgba(4,20,28,.90) 46%,
    rgba(4,20,28,.62) 72%, rgba(4,20,28,.80) 100%) }
.banner .wrap{ position:relative }
.banner h1{ font-size:clamp(28px,3.6vw,50px); font-weight:700; letter-spacing:-.035em;
  line-height:1.06; max-width:19ch; margin-top:16px }
.banner h1 em{ font-style:normal; color:var(--acid) }
.banner .lede{ margin-top:18px; font-size:clamp(15.5px,1.25vw,18px); color:var(--on-dark-2);
  max-width:56ch }
.banner .meta{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line-d);
  display:flex; gap:clamp(16px,3vw,44px); flex-wrap:wrap; color:var(--on-dark-2) }
.banner .meta b{ color:#fff; font-weight:600 }

/* the six doors into the site */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-top:clamp(28px,3.5vw,44px) }
.door{ display:flex; flex-direction:column; background:var(--soft); border-radius:18px;
  padding:26px 26px 24px; text-decoration:none; color:var(--tx);
  transition:background .2s, transform .2s }
.door:hover{ background:var(--ink); color:#fff; transform:translateY(-4px) }
.door .k{ font-family:var(--fm); font-size:11.5px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--tx-3) }
.door:hover .k{ color:var(--acid) }
.door h2{ font-size:23px; font-weight:600; letter-spacing:-.03em; margin-top:14px }
.door p{ font-size:15px; color:var(--tx-2); margin-top:10px; flex:1 }
.door:hover p{ color:var(--on-dark-2) }
.door .g{ margin-top:20px; font-family:var(--fm); font-size:11.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--acid-d) }
.door:hover .g{ color:var(--acid) }

/* slim recent-work strip */
.recent{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:clamp(26px,3vw,40px) }
.rw{ display:block; text-decoration:none; border-radius:14px; overflow:hidden;
  background:var(--soft-2); transition:transform .2s }
.rw:hover{ transform:translateY(-4px) }
.rw span.i{ display:block; aspect-ratio:16/10; overflow:hidden }
.rw img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.rw span.n{ display:block; padding:14px 16px 16px; font-size:15px; font-weight:600;
  color:var(--tx); letter-spacing:-.02em }

/* contact row */
.crow{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);
  margin-top:clamp(26px,3vw,40px) }
.crow h3{ font-family:var(--fm); font-size:11.5px; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tx-3); margin-bottom:12px }
.crow a{ display:block; font-size:17px; color:var(--tx); text-decoration:none; padding:6px 0;
  overflow-wrap:anywhere }
.crow a:hover{ color:var(--acid-d) }
.crow p{ font-size:16px; color:var(--tx-2) }

@media (max-width:900px){
  .doors{ grid-template-columns:repeat(2,1fr) }
  .recent{ grid-template-columns:repeat(2,1fr) }
  .crow{ grid-template-columns:1fr 1fr }
}
@media (max-width:600px){
  .doors, .recent{ grid-template-columns:1fr }
  .crow{ grid-template-columns:1fr }
  .banner h1{ max-width:none }
}