/* ==================================================================
   secVision Networks  |  Fresh Digital house build
   Design system: LendCon house standard, secVision brand tokens.
   Architectural grotesque + spec sheet. Hairline grids, sharp corners,
   monochrome imagery revealing to colour on hover.
   Australian English. No em dashes.
   ================================================================== */

:root{
  --ink:#04294A;            /* secVision navy, the dark surface */
  --ink-2:#063B69;
  --ink-3:#0A4E85;
  --brand:#0A4E85;          /* secVision mid blue, the accent role */
  --brand-600:#083E69;
  --brand-tint:#E2EDF7;
  --accent:#FFC629;         /* secVision gold, the safety accent */
  --accent-2:#E9AF12;
  --paper:#F4F6F8;
  --paper-2:#E9EDF2;
  --white:#ffffff;
  --line:#DAE1E8;
  --line-dark:rgba(255,255,255,.13);
  --line-dark-2:rgba(255,255,255,.07);
  --muted:#66747F;
  --muted-2:#9BAAB6;
  --live:#3DD68C;

  /* aliases so the SOC console keeps its own language */
  --navy:#04294A;
  --gold:#FFC629;

  --display:"Archivo",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"DM Sans",system-ui,sans-serif;

  --maxw:min(1780px,94vw);
  --gutter:clamp(20px,4vw,72px);
  --sp:clamp(64px,6.4vw,120px);      /* section vertical rhythm */
  --sp-tight:clamp(30px,3.2vw,52px); /* bands and strips */
  --stack:clamp(26px,2.6vw,42px);    /* gap under a section head */
  --r:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
svg{flex:none}
p svg,li svg,span svg,a svg{max-width:1.4em;max-height:1.4em}
.btn svg,.card__ic svg,.cdetail svg,.ticks li svg,.footer__social svg,.nav__phone svg,
.vid__play svg,.price li svg,.dock a svg,.sector__go svg{max-width:none;max-height:none}
::selection{background:var(--accent);color:var(--ink)}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp)}
.section--tight{padding-block:var(--sp-tight)}
.section--navy{background:var(--ink);color:var(--paper)}
.section--navy2{background:var(--ink-2);color:var(--paper)}
.section--paper2{background:var(--paper-2)}
.section--white{background:var(--white)}
.section--navy .muted,.section--navy2 .muted{color:var(--muted-2)}

/* ---------------------------------------------------------------- type */
.eyebrow{
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand);
  display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.4rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brand);display:inline-block;flex:none}
.section--navy .eyebrow,.section--navy2 .eyebrow,.phero .eyebrow,.hero .eyebrow{color:var(--accent)}
.section--navy .eyebrow::before,.section--navy2 .eyebrow::before,.phero .eyebrow::before,.hero .eyebrow::before{background:var(--accent)}

.display{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.02em;text-transform:uppercase;margin:0}
h1.display{font-size:clamp(2.5rem,7vw,6rem)}
h2.display{font-size:clamp(2rem,5vw,4.2rem)}
h3.display{font-size:clamp(1.5rem,3vw,2.4rem)}
h4.display{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.01em}
.display--outline{color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.section--navy .display--outline,.section--navy2 .display--outline,.phero .display--outline,.hero .display--outline{-webkit-text-stroke-color:#fff}
.display .hi{color:var(--brand)}
.section--navy .display .hi,.section--navy2 .display .hi,.phero .display .hi,.hero .display .hi{color:var(--accent)}

.lede{font-size:clamp(1.08rem,1.7vw,1.35rem);line-height:1.52;color:var(--ink);max-width:66ch;margin:0}
.section--navy .lede,.section--navy2 .lede,.phero .lede,.hero .lede{color:#DDE5EC}
.prose{max-width:70ch}
.prose p{margin:0 0 1.2rem}
.prose p:last-child{margin-bottom:0}
.prose strong,.prose b{font-weight:650}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* ---------------------------------------------------------------- buttons */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:15px 26px;border-radius:var(--r);cursor:pointer;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn svg{width:15px;height:15px;transition:transform .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn--gold{--bg:var(--accent);--fg:var(--ink);--bd:var(--accent)}
.btn--gold:hover{--bg:var(--accent-2);--bd:var(--accent-2)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.section--navy .btn--ghost,.section--navy2 .btn--ghost,.phero .btn--ghost,.hero .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.42)}
.section--navy .btn--ghost:hover,.section--navy2 .btn--ghost:hover,.phero .btn--ghost:hover,.hero .btn--ghost:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--lg{padding:18px 32px;font-size:.82rem}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--stack);align-items:center}

.textlink{
  font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5em;color:var(--brand);
  border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .25s ease
}
.textlink svg{width:14px;height:14px}
.textlink:hover{gap:.9em}
.section--navy .textlink,.section--navy2 .textlink{color:var(--accent)}

/* ---------------------------------------------------------------- live chip */
.live{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--live)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);flex:none;
  box-shadow:0 0 0 0 rgba(61,214,140,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,214,140,.55)}70%{box-shadow:0 0 0 9px rgba(61,214,140,0)}100%{box-shadow:0 0 0 0 rgba(61,214,140,0)}}
@media (prefers-reduced-motion:reduce){.live::before{animation:none}}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:80;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo img{height:36px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav__links a{font-size:.86rem;font-weight:500;opacity:.86;transition:opacity .2s,color .2s;white-space:nowrap;padding-block:6px}
.nav__links a:hover,.nav__links a[aria-current=page]{opacity:1;color:var(--brand)}
.nav__actions{display:flex;align-items:center;gap:14px}
.nav__phone{font-family:var(--mono);font-size:.84rem;font-weight:500;letter-spacing:.03em;
  display:flex;align-items:center;gap:.55em;white-space:nowrap}
.nav__phone .dot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none;
  box-shadow:0 0 0 0 rgba(61,214,140,.55);animation:pulse 2.4s infinite}
.nav .btn{padding:12px 20px;font-size:.72rem}

.has-sub{position:relative}
.has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{position:absolute;top:calc(100% + 14px);left:-18px;min-width:250px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;box-shadow:0 20px 44px -28px rgba(4,41,74,.5)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.sub a{display:block;padding:10px 14px;border-radius:3px;font-size:.88rem;opacity:.9}
.sub a:hover{background:var(--paper-2);color:var(--brand);opacity:1}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.burger span{width:24px;height:2px;background:currentColor;transition:.3s}
.mobile{position:fixed;inset:0;z-index:120;background:var(--ink);color:#fff;display:none;
  flex-direction:column;padding:26px var(--gutter);overflow-y:auto}
.mobile.open{display:flex}
.mobile__top{display:flex;justify-content:space-between;align-items:center}
.mobile__top img{height:34px}
.mobile__close{background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}
.mobile>ul{list-style:none;margin:7vh 0 0;padding:0;display:flex;flex-direction:column}
.mobile>ul>li>a{display:block;font-family:var(--display);text-transform:uppercase;font-weight:800;
  font-size:clamp(1.5rem,6vw,2.3rem);letter-spacing:-.01em;padding:10px 0;border-bottom:1px solid var(--line-dark)}
.mobile .sub-m{padding:8px 0 14px;display:flex;flex-direction:column;gap:6px}
.mobile .sub-m a{font-size:.94rem;color:var(--muted-2)}
.mobile .btnrow{margin-top:34px}
@media(max-width:1080px){.nav__links,.nav__phone{display:none}.burger{display:flex}}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(900px 520px at 82% 6%,rgba(91,176,232,.22),transparent 62%),
             radial-gradient(700px 460px at 6% 98%,rgba(255,198,41,.10),transparent 60%)}
.hero__grid{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%)}
.hero__in{max-width:var(--maxw);margin:0 auto;
  padding:clamp(80px,8.4vw,136px) var(--gutter) clamp(68px,7.4vw,112px);
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(48px,6vw,104px);align-items:center}
.hero h1{font-size:clamp(2.4rem,4.7vw,4.3rem)}
.hero h1 .out{color:transparent;-webkit-text-stroke:1.6px #fff;display:block}
.hero .lede{margin-top:26px;max-width:56ch}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(44px,5vw,68px);
  border-top:1px solid var(--line-dark)}
.hero__stat{padding:26px 22px;border-left:1px solid var(--line-dark)}
.hero__stat:first-child{border-left:0;padding-left:0}
.hero__stat .v{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);
  letter-spacing:-.02em;color:#fff;line-height:1}
.hero__stat .v .u{color:var(--accent)}
.hero__stat .l{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-top:10px}
@media(max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr 1fr}
  .hero__stat{border-left:0;border-top:1px solid var(--line-dark);padding:22px 0}
  .hero__stat:first-child,.hero__stat:nth-child(2){border-top:0}
}

/* SOC console card, kept per client request */
.console{background:rgba(255,255,255,.045);border:1px solid var(--line-dark);border-radius:8px;
  overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.console__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;background:rgba(0,0,0,.24);border-bottom:1px solid var(--line-dark-2);
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.console__feed{position:relative;aspect-ratio:16/9;background:#02182C;overflow:hidden}
.console__feed img{width:100%;height:100%;object-fit:cover;opacity:.82;filter:saturate(.7) contrast(1.05)}
.console__scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)}
.console__box{position:absolute;left:14%;top:36%;width:26%;height:46%;border:2px solid var(--gold);border-radius:3px;
  box-shadow:0 0 0 9999px rgba(2,24,44,.14) inset;animation:track 7s ease-in-out infinite alternate}
@keyframes track{0%{transform:translate(0,0)}100%{transform:translate(120%,-14%)}}
@media (prefers-reduced-motion:reduce){.console__box{animation:none}}
.console__box span{position:absolute;top:-24px;left:0;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.console__log{padding:16px 18px 18px;font-family:var(--mono);font-size:.74rem;line-height:1.9;color:#A9C4DA}
.console__log div{display:flex;gap:12px}
.console__log b{color:var(--gold);font-weight:500;flex:none}
.console__log .ok{color:var(--live)}

/* ---------------------------------------------------------------- spec rows */
.spec-rows{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--navy .spec-rows,.section--navy2 .spec-rows{border-color:var(--line-dark)}
.spec-rows .i{padding:20px 0}
.spec-rows .l{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.section--navy .spec-rows .l,.section--navy2 .spec-rows .l{color:var(--muted-2)}
.spec-rows .v{font-family:var(--display);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:-.01em}
@media(max-width:560px){.spec-rows{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- section head */
.head{max-width:72ch;margin-bottom:var(--stack)}
.head .lede{margin-top:16px}

/* ---------------------------------------------------------------- hairline grids */
.grid{display:grid;gap:1px;background:var(--line)}
.section--navy .grid,.section--navy2 .grid{background:var(--line-dark)}
.grid-2{grid-template-columns:repeat(2,1fr)}
/* 6 and 12 track bases so a short final row stretches to fill rather than
   leaving blank cells beside a lone card. */
.grid-3{grid-template-columns:repeat(6,1fr)}
.grid-3>*{grid-column:span 2}
.grid-3>:last-child:nth-child(3n+1){grid-column:span 6}
.grid-3>:nth-last-child(2):nth-child(3n+1),
.grid-3>:nth-last-child(2):nth-child(3n+1)~*{grid-column:span 3}
.grid-4{grid-template-columns:repeat(12,1fr)}
.grid-4>*{grid-column:span 3}
.grid-4>:last-child:nth-child(4n+1){grid-column:span 12}
.grid-4>:nth-last-child(2):nth-child(4n+1),
.grid-4>:nth-last-child(2):nth-child(4n+1)~*{grid-column:span 6}
.grid-4>:nth-last-child(3):nth-child(4n+1),
.grid-4>:nth-last-child(3):nth-child(4n+1)~*{grid-column:span 4}

.card{background:var(--paper);padding:clamp(26px,2.2vw,36px) clamp(24px,2vw,32px);display:flex;flex-direction:column;transition:background .3s ease}
.section--white .card{background:var(--white)}
.section--paper2 .card{background:var(--paper-2)}
.section--navy .card{background:var(--ink)}
.section--navy2 .card{background:var(--ink-2)}
.card:hover{background:var(--white)}
.section--white .card:hover{background:var(--paper)}
.section--navy .card:hover,.section--navy2 .card:hover{background:var(--ink-3)}
.card h3,.card h4{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 11px;line-height:1.06}
.card h3{font-size:1.3rem}
.card h4{font-size:1.06rem}
.card p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}
.section--navy .card p,.section--navy2 .card p{color:var(--muted-2)}
.card__ic{width:40px;height:40px;color:var(--brand);margin-bottom:20px;display:grid;place-items:center}
.card__ic svg{width:24px;height:24px}
.section--navy .card__ic,.section--navy2 .card__ic{color:var(--accent)}
.card a.textlink{margin-top:20px;align-self:flex-start}
.card img{border-radius:var(--r);filter:grayscale(1) contrast(1.04);transition:filter .45s ease}
.card:hover img{filter:grayscale(0) contrast(1.02)}

/* image cards */
.tile{position:relative;display:flex;flex-direction:column;background:var(--paper);overflow:hidden;color:inherit;transition:background .3s ease}
.section--white .tile{background:var(--white)}
.section--paper2 .tile{background:var(--paper-2)}
.tile:hover{background:var(--white)}
.tile__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .45s ease,transform .55s ease}
.tile:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.045)}
.tile__body{padding:clamp(22px,1.9vw,30px) clamp(22px,1.8vw,28px);display:flex;flex-direction:column;flex:1}
.tile__body h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.2rem;
  line-height:1.06;letter-spacing:-.01em;margin:0 0 10px;transition:color .2s}
.tile:hover .tile__body h3{color:var(--brand)}
.tile__body p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.52}
.tile__go{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:9px}
.tile__go svg{width:14px;height:14px;transition:transform .3s ease}
.tile:hover .tile__go svg{transform:translateX(4px)}

/* sector rows */
.sectors{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.sector{display:grid;grid-template-columns:74px 1.3fr 2fr auto;gap:30px;align-items:center;
  background:var(--paper);padding:28px var(--gutter);transition:background .3s ease,color .3s ease}
.section--white .sector{background:var(--white)}
.sector:hover{background:var(--ink);color:#fff}
.sector__no{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.sector:hover .sector__no{color:var(--accent)}
.sector__name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.35rem,2.6vw,2.1rem);letter-spacing:-.02em;line-height:1}
.sector__desc{color:var(--muted);font-size:.95rem}
.sector:hover .sector__desc{color:var(--muted-2)}
.sector__go{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.sector__go svg{width:14px;height:14px}
@media(max-width:820px){.sector{grid-template-columns:1fr;gap:10px;padding-block:24px}.sector__go{display:none}}

/* ---------------------------------------------------------------- lists */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:.98rem;line-height:1.58}
.ticks li svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--brand)}
.section--navy .ticks li svg,.section--navy2 .ticks li svg,.hero .ticks li svg{color:var(--accent)}
.ticks--2{grid-template-columns:repeat(2,1fr);gap:14px 36px}
.ticks b{font-weight:650}

.steps{display:grid;grid-template-columns:repeat(4,1fr)}
.steps .step{padding:clamp(26px,2.2vw,36px) clamp(22px,2vw,30px) clamp(26px,2.2vw,36px) 0;border-top:1px solid var(--line)}
.section--navy .steps .step,.section--navy2 .steps .step{border-top-color:var(--line-dark)}
.steps .step:first-child{border-top-color:var(--brand)}
.section--navy .steps .step:first-child,.section--navy2 .steps .step:first-child{border-top-color:var(--accent)}
.step__n{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;color:var(--brand);margin-bottom:16px}
.section--navy .step__n,.section--navy2 .step__n{color:var(--accent)}
.step h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.24rem;letter-spacing:-.01em;margin:0 0 11px;line-height:1.05}
.step p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.56}
.section--navy .step p,.section--navy2 .step p{color:var(--muted-2)}

.detail{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.section--navy .detail,.section--navy2 .detail{background:var(--line-dark)}
.detail__row{background:var(--paper);padding:clamp(24px,2vw,32px) clamp(24px,2vw,30px)}
.section--white .detail__row{background:var(--white)}
.section--paper2 .detail__row{background:var(--paper-2)}
.section--navy .detail__row{background:var(--ink)}
.section--navy2 .detail__row{background:var(--ink-2)}
.detail__row h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.06rem;letter-spacing:-.01em;margin:0 0 11px;line-height:1.1}
.detail__row p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.58}
.section--navy .detail__row p,.section--navy2 .detail__row p{color:var(--muted-2)}
@media(max-width:760px){.detail{grid-template-columns:1fr}}

.figure{overflow:hidden;background:var(--paper-2);border-radius:var(--r);width:100%}
.figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .6s ease,transform .9s ease}
.figure:hover img{filter:grayscale(0) contrast(1);transform:scale(1.03)}
.figure figcaption{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:14px 2px 0}
.section--navy .figure figcaption,.section--navy2 .figure figcaption{color:var(--muted-2)}
.figure--tall img{aspect-ratio:3/4}
.figure--wide img{aspect-ratio:16/10}

.quote{border-left:2px solid var(--accent);padding:4px 0 4px 28px}
.quote p{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.06;letter-spacing:-.02em;margin:0}
.quote cite{display:block;margin-top:20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;font-style:normal;color:var(--muted)}
.section--navy .quote cite,.section--navy2 .quote cite{color:var(--muted-2)}

.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.testi{background:var(--paper);padding:clamp(28px,2.4vw,38px) clamp(26px,2.2vw,34px);display:flex;flex-direction:column;transition:background .3s ease}
.section--white .testi{background:var(--white)}
.testi:hover{background:var(--white)}
.section--white .testi:hover{background:var(--paper)}
.testi__mark{font-family:var(--display);font-weight:800;font-size:44px;line-height:.7;color:var(--accent);margin-bottom:20px}
.testi p{margin:0 0 28px;font-size:1rem;line-height:1.68;color:var(--ink)}
.testi cite{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);font-style:normal;display:block}
.testi .tn{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1rem;letter-spacing:-.01em}
.testi .tr{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);margin-top:5px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr)}
.kpi{padding:30px 26px;border-left:1px solid var(--line)}
.kpi:first-child{border-left:0;padding-left:0}
.section--navy .kpi,.section--navy2 .kpi{border-left-color:var(--line-dark)}
.kpi .v{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.02em}
.kpi .l{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.section--navy .kpi .l,.section--navy2 .kpi .l{color:var(--muted-2)}
@media(max-width:900px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{border-left:0;border-top:1px solid var(--line);padding:24px 0}
  .kpi:first-child,.kpi:nth-child(2){border-top:0}
  .section--navy .kpi,.section--navy2 .kpi{border-top-color:var(--line-dark)}
}

/* client marquee */
.clients{background:var(--ink);color:var(--paper);padding-block:34px;overflow:hidden}
.clients__lbl{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-2);text-align:center;margin-bottom:28px}
.marquee{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:64px;padding-right:64px;animation:scroll 40s linear infinite;flex:0 0 auto}
.clients:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
.marquee__track .logo{height:38px;width:auto;filter:brightness(0) invert(1);opacity:.7;transition:opacity .3s;flex:0 0 auto}
.marquee__track .logo:hover{opacity:1}
.marquee__track .logo-txt{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.25rem;
  letter-spacing:.02em;opacity:.5;white-space:nowrap;flex:0 0 auto}

.logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,54px);justify-content:center}
.logos img{height:clamp(28px,3.6vw,42px);width:auto;object-fit:contain;opacity:.55;filter:grayscale(1);transition:opacity .3s,filter .3s}
.logos img:hover{opacity:1;filter:none}
.logos span{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.6vw,1.3rem);opacity:.5}
.section--navy .logos img,.section--navy2 .logos img{filter:brightness(0) invert(1);opacity:.66}
.section--navy .logos img:hover,.section--navy2 .logos img:hover{opacity:1}

/* ---------------------------------------------------------------- tables & pricing */
.spec{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--white);border:1px solid var(--line)}
.spec caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brand);padding:0 0 12px}
.spec th{background:var(--ink);color:#fff;text-align:left;padding:14px 18px;
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
.spec td{padding:14px 18px;border-bottom:1px solid var(--line)}
.spec tr:last-child td{border-bottom:none}
.spec .price{font-family:var(--display);font-weight:800;color:var(--ink);white-space:nowrap}
.spec .model{font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.tablewrap{overflow-x:auto}

.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.price{background:var(--paper);padding:clamp(26px,2.2vw,36px) clamp(24px,2vw,32px);position:relative;transition:background .3s ease}
.section--white .price{background:var(--white)}
.section--paper2 .price{background:var(--paper-2)}
.price:hover{background:var(--white)}
.section--white .price:hover{background:var(--paper)}
.price--best{background:var(--white);box-shadow:inset 0 3px 0 var(--accent)}
.price--best::after{content:"Most popular";position:absolute;top:24px;right:28px;font-family:var(--mono);
  font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;background:var(--accent);color:var(--ink);padding:5px 10px;border-radius:100px}
.price h3{margin:0 0 5px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.2rem;letter-spacing:-.01em}
.price .model{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.05em}
.price .amt{font-family:var(--display);font-weight:800;font-size:2.6rem;letter-spacing:-.03em;color:var(--ink);margin:22px 0 2px;line-height:1}
.price .per{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.price ul{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.price li{display:flex;gap:11px;font-size:.92rem;color:var(--muted)}
.price li svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--brand)}

/* ---------------------------------------------------------------- videos */
.videos{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
.videos>*{grid-column:span 2}
.videos>:last-child:nth-child(3n+1){grid-column:span 6}
.videos>:nth-last-child(2):nth-child(3n+1),
.videos>:nth-last-child(2):nth-child(3n+1)~*{grid-column:span 3}
/* with a full-width feature card leading, the remainder shifts by one */
.videos>.vid--feature~:last-child:nth-child(3n+2){grid-column:span 6}
.videos>.vid--feature~:nth-last-child(2):nth-child(3n+2),
.videos>.vid--feature~:nth-last-child(2):nth-child(3n+2)~*{grid-column:span 3}
.section--navy .videos,.section--navy2 .videos{background:var(--line-dark)}
.vid{background:var(--paper);display:flex;flex-direction:column;transition:background .3s ease}
.section--white .vid{background:var(--white)}
.section--paper2 .vid{background:var(--paper-2)}
.section--navy .vid{background:var(--ink)}
.vid:hover{background:var(--white)}
.section--white .vid:hover{background:var(--paper)}
.section--navy .vid:hover{background:var(--ink-3)}
.vid__thumb{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;cursor:pointer;border:0;padding:0;width:100%;display:block}
.vid__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .45s ease,transform .55s ease}
.vid:hover .vid__thumb img{filter:grayscale(0) contrast(1.02);transform:scale(1.04)}
.vid__play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(4,25,45,.5),rgba(4,25,45,.05))}
.vid__play span{width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;transition:transform .25s ease}
.vid__play svg{width:21px;height:21px;margin-left:3px}
.vid:hover .vid__play span{transform:scale(1.08)}
.vid__body{padding:clamp(20px,1.8vw,28px) clamp(20px,1.7vw,26px)}
.vid__meta{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:11px}
.section--navy .vid__meta{color:var(--accent)}
.vid__body h3{margin:0 0 9px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.04rem;line-height:1.1;letter-spacing:-.01em}
.vid__body p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.52}
.section--navy .vid__body p{color:var(--muted-2)}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vid--feature{grid-column:span 6}
.vid--feature .vid__thumb{aspect-ratio:21/9}
.vid--feature .vid__body h3{font-size:1.5rem}

/* Facebook's page plugin renders at 500px max, so the right column is sized to
   that rather than left as a fluid column with dead space inside it. Both columns
   stretch to equal height and the CTAs are pinned to the bottom of the left column
   so they finish level with the feed instead of floating in a gap. */
.feeds{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,500px);
  gap:clamp(30px,3.6vw,60px);align-items:center}
.feeds>*{display:flex;flex-direction:column;min-width:0;justify-content:center}
.feeds .videos{grid-template-columns:repeat(2,minmax(0,1fr))}
.feeds .videos>*{grid-column:auto!important}
.feeds .vid--feature{grid-column:auto!important}
.feeds .btnrow{margin-top:var(--stack);margin-bottom:0}
.feeds .feedhead{justify-content:space-between;gap:20px}
/* Facebook's plugin is far taller than the column beside it, which left a large
   void under the left column. Capped so the two columns finish close to level. */
.fbwrap{overflow:hidden;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);width:100%;max-height:var(--fb-h,560px)}
.fbfeed{height:var(--fb-h,560px)}
.fbfeed{border:0;overflow:hidden;width:100%;background:transparent;display:block}
.feedhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:22px;min-height:38px}
.feedhead h3{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.35rem;letter-spacing:-.01em}

/* ---------------------------------------------------------------- faq */
.faq{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.faq details{background:var(--paper)}
.section--white .faq details{background:var(--white)}
.section--paper2 .faq details{background:var(--paper-2)}
.faq summary{cursor:pointer;list-style:none;padding:clamp(20px,1.7vw,26px) clamp(22px,1.9vw,30px);font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:1rem;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--brand);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{color:var(--brand)}
.faq p{margin:0;padding:0 clamp(22px,1.9vw,30px) clamp(22px,1.9vw,28px);color:var(--muted);font-size:.96rem;line-height:1.66;max-width:82ch}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.section--navy .field label,.section--navy2 .field label{color:var(--muted-2)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--white);color:var(--ink);width:100%;transition:border .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.section--navy .field input,.section--navy .field select,.section--navy .field textarea,
.section--navy2 .field input,.section--navy2 .field select,.section--navy2 .field textarea{
  background:rgba(255,255,255,.06);border-color:var(--line-dark);color:#fff}
.section--navy .field input::placeholder,.section--navy2 .field input::placeholder,
.section--navy .field textarea::placeholder,.section--navy2 .field textarea::placeholder{color:#7E96AC}
.section--navy .field input:focus,.section--navy2 .field input:focus,
.section--navy .field textarea:focus,.section--navy2 .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,198,41,.18)}
.formmsg{font-family:var(--mono);font-size:.8rem;margin:0;color:var(--muted);line-height:1.6}
.formmsg.ok{color:#1D8A5B}.formmsg.err{color:#C0392B}
.section--navy .formmsg,.section--navy2 .formmsg{color:var(--muted-2)}
.section--navy .formmsg.ok,.section--navy2 .formmsg.ok{color:var(--live)}
.section--navy .formmsg.err,.section--navy2 .formmsg.err{color:#FF9A8B}

.cdetails{display:grid;margin-top:34px;border-top:1px solid var(--line-dark)}
.cdetail{display:flex;gap:16px;padding:20px 0;align-items:flex-start;border-bottom:1px solid var(--line-dark)}
.cdetail svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:4px}
.cdetail .k{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.cdetail .v{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.06rem;letter-spacing:-.01em;color:#fff;line-height:1.32}
.cdetail .v a:hover{color:var(--accent)}
.cdetail .v .small{font-family:var(--body);font-weight:400;text-transform:none;font-size:.86rem;letter-spacing:0;color:var(--muted-2)}

/* ---------------------------------------------------------------- page hero */
.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;
  padding:calc(var(--sp) + 42px) 0 calc(var(--sp) + 6px)}
.phero__img{position:absolute;inset:0;z-index:-2}
.phero__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.5);transform:scale(1.03)}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,25,45,.6) 0%,rgba(4,25,45,.8) 58%,rgba(4,25,45,.95) 100%)}
.phero__in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.phero h1{font-size:clamp(2.4rem,6.4vw,5.2rem);max-width:18ch}
.phero .lede{margin-top:1.4rem;max-width:56ch}
.crumb{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.5rem}
.crumb a:hover{color:#fff}

/* ---------------------------------------------------------------- layout */
/* Splits pair a tall text column with something short (a stat band, a pull quote,
   a figure). Left as-is that dumps a large void under the short side. Children
   stretch, and short components centre inside their column so the whitespace sits
   evenly above and below instead of collapsing into a hole at the bottom. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,86px);align-items:center}
.split>*{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.split--top>*{justify-content:flex-start}
.split--top>*:last-child{justify-content:center}

/* a 1x4 stat strip is far shorter than the copy beside it: go 2x2 inside a split */
.split .kpis{grid-template-columns:repeat(2,1fr);align-content:center}
.split .kpi{border-left:1px solid var(--line);padding:clamp(20px,1.8vw,28px) clamp(18px,1.6vw,26px)}
.split .kpi:nth-child(odd){border-left:0;padding-left:0}
.split .kpi:nth-child(n+3){border-top:1px solid var(--line);margin-top:2px}
.section--navy .split .kpi,.section--navy2 .split .kpi{border-color:var(--line-dark)}
.split .quote,.split .figure{align-self:center}
.split .spec-rows{align-self:center}
.split--top{align-items:start}
.split--wide{grid-template-columns:.86fr 1.14fr}

/* ---------------------------------------------------------------- CTA band */
.ctaband{background:var(--brand);color:#fff}
.ctaband__in{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}
.ctaband .display{color:#fff}
.ctaband .lede{color:rgba(255,255,255,.88);max-width:54ch}
.ctaband .eyebrow{color:var(--accent)}
.ctaband .eyebrow::before{background:var(--accent)}
.ctaband .btn{--bg:#fff;--fg:var(--brand);--bd:#fff}
.ctaband .btn:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.ctaband .btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.5)}
.ctaband .btn--ghost:hover{--bg:#fff;--fg:var(--brand);--bd:#fff}
@media(max-width:820px){.ctaband__in{grid-template-columns:1fr;gap:26px}}

/* ---------------------------------------------------------------- dock */
.dock{position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:70;display:flex;flex-direction:column;gap:12px}
.dock a{display:flex;align-items:center;height:56px;width:56px;border-radius:100px;overflow:hidden;white-space:nowrap;
  background:var(--brand);color:#fff;box-shadow:0 10px 30px rgba(4,25,45,.28);
  transition:width .32s cubic-bezier(.2,.7,.2,1),background .25s,transform .25s}
.dock a .ic{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center}
.dock a .lbl{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;padding-right:24px;opacity:0;transition:opacity .25s}
.dock a svg{width:20px;height:20px}
.dock a.email{background:var(--ink)}
.dock a:hover{width:206px;transform:translateY(-2px)}
.dock a:hover .lbl{opacity:1}
@media(max-width:940px){.dock a:hover{width:56px}.dock a:hover .lbl{opacity:0}}

/* ---------------------------------------------------------------- footer */
.footer{background:var(--ink);color:var(--paper);padding-top:clamp(52px,6.5vw,88px)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:52px;border-bottom:1px solid var(--line-dark)}
.footer__logo img{height:42px;margin-bottom:20px}
.footer p{color:var(--muted-2);font-size:.92rem;line-height:1.6;margin:0 0 20px;max-width:38ch}
.footer h4{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 18px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer li a{font-size:.94rem;opacity:.86}
.footer li a:hover{opacity:1;color:var(--accent)}
.footer__social{display:flex;gap:10px;margin-top:4px}
.footer__social a{width:40px;height:40px;border:1px solid var(--line-dark);border-radius:var(--r);
  display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
.footer__social a:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.footer__social svg{width:18px;height:18px}
.footer__badges{display:flex;gap:18px;align-items:center;margin-top:24px;flex-wrap:wrap}
.footer__badges img{height:62px;width:auto;object-fit:contain}
.footer__bar{display:flex;justify-content:space-between;align-items:center;padding:24px 0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted-2);flex-wrap:wrap;gap:12px}
.footer__bar a:hover{color:#fff}
@media(max-width:820px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.section--navy :focus-visible,.hero :focus-visible,.phero :focus-visible{outline-color:var(--accent)}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1080px){
  .grid-4,.grid-4>*{grid-template-columns:repeat(2,1fr);grid-column:auto}
  .steps{grid-template-columns:repeat(2,1fr)}
  .feeds{grid-template-columns:1fr}
}
@media(max-width:900px){
  .grid-3,.videos,.prices,.testis{grid-template-columns:repeat(2,1fr)}
  .grid-3>*,.grid-4>*,.videos>*{grid-column:auto}
  .vid--feature{grid-column:span 2}
}
@media(max-width:760px){
  body{font-size:16px}
  .split,.split--wide{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4,.videos,.prices,.testis,.steps{grid-template-columns:1fr}
  .grid-3>*,.grid-4>*,.videos>*{grid-column:auto}
  .feeds .videos{grid-template-columns:1fr}
  .vid--feature{grid-column:span 1}
  .ticks--2{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .spec-rows{grid-template-columns:1fr}
}
@media print{.nav,.mobile,.dock,.ctaband,.footer__social{display:none}}