/* ============================================================
   PanelEase — shared stylesheet
   ============================================================ */
:root{
  --black:#050607;
  --panel:#0b0e10;
  --panel-2:#0e1113;
  --line:#1a2024;
  /* Brand inks, sampled from the PanelEase logo artwork. */
  --blue:#b0dfeb;        /* logo blue — primary accent */
  --blue-deep:#2f6b7e;   /* borders, hover edges */
  --orange:#e36422;      /* logo orange */
  --orange-lift:#f5814a; /* hover only */
  --white:#f4f6f6;
  --grey:#8a949a;
  --grey-dim:#5a646a;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:hidden has to be on both html and body: body's own overflow
   propagates to the viewport (root scroller) whenever html's is left at the
   default 'visible', which silently undoes body's clipping — a stray wide
   descendant (a min-width table, say) can then scroll the whole page
   sideways even though body itself never does. */
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden}
body{
  background:var(--black);color:var(--white);font-family:var(--body);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--orange);color:#000}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:#000;
  font-family:var(--mono);font-size:13px;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ---- nav ----
   Scoped to #nav on purpose: the footer uses a <nav> element too, and a bare
   `nav {}` selector here would pin it to the top of the viewport as well. */
/* Three-track grid — two equal outer tracks pin the logo and the right-side
   cluster to the edges, which centers .navlinks in the full bar width rather
   than in whatever space happens to be left over (what justify-content:
   space-between gave you). */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;
  padding:14px 28px;backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(5,6,7,.92),rgba(5,6,7,.55));
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
#nav.scrolled{border-color:var(--line);background:rgba(5,6,7,.94)}
.logo{display:flex;align-items:center;grid-column:1;justify-self:start}
.logo img{height:46px;width:auto;display:block;transition:opacity .2s}
.logo:hover img{opacity:.82}
@media(max-width:520px){.logo img{height:38px}}
.navlinks{display:flex;gap:28px;font-size:14px;color:var(--grey);font-weight:500;
  grid-column:2;justify-self:center}
.navlinks a{transition:color .2s}
.navlinks a:hover{color:var(--white)}
.navlinks a[aria-current="page"]{color:var(--white)}
/* Groups Contact us, Get a quote and the mobile toggle at the right edge —
   Contact us sits right beside the quote CTA instead of floating mid-bar. */
.navright{grid-column:3;justify-self:end;display:flex;align-items:center;gap:12px}
.navcta{font-family:var(--mono);font-size:12.5px;padding:9px 16px;border:1px solid var(--blue);
  color:var(--blue);border-radius:2px;transition:.2s;flex:none;white-space:nowrap}
.navcta:hover{background:var(--blue);color:#000}
.navcontact{font-family:var(--mono);font-size:12.5px;padding:9px 16px;border:1px solid var(--line);
  color:var(--grey);border-radius:2px;transition:.2s;flex:none;white-space:nowrap}
.navcontact:hover{border-color:var(--white);color:var(--white)}
@media(max-width:900px){.navlinks{display:none}.navcontact{display:none}}

/* ---- mobile nav ----
   Hidden entirely above 900px, where .navlinks already does the job. Below
   it, a hamburger toggles a dropdown anchored to #nav's own box (#nav is
   position:fixed, so this absolute child positions against it, not the
   viewport) — same link set as .navlinks, just stacked and tappable. */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;border:none;background:none;cursor:pointer;padding:0;flex:none}
.navtoggle span{display:block;width:22px;height:2px;background:var(--white);
  transition:transform .25s,opacity .25s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilenav{display:none;position:absolute;top:100%;left:0;right:0;
  background:rgba(5,6,7,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  flex-direction:column;padding:8px 28px 20px}
.mobilenav.open{display:flex}
.mobilenav a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--grey);
  font-size:15px;font-weight:500;transition:color .2s}
.mobilenav a:last-of-type{border-bottom:none}
.mobilenav a:hover{color:var(--white)}
.mobilenav a[aria-current="page"]{color:var(--white)}
.mobilenav a.mobilenav-cta{font-family:var(--mono);font-size:13px;color:var(--blue);
  text-align:center;border:1px solid var(--blue);border-radius:2px;margin-top:10px;padding:12px 0}
.mobilenav a.mobilenav-cta:hover{background:var(--blue);color:#000}
@media(max-width:900px){.navtoggle{display:flex}}

/* ---- buttons ---- */
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:13px;padding:14px 22px;border-radius:2px;
  transition:.2s;cursor:pointer;border:1px solid;display:inline-block;text-align:center}
.btn-p{background:var(--orange);border-color:var(--orange);color:#000;font-weight:600}
.btn-p:hover{background:var(--orange-lift);box-shadow:0 0 30px rgba(227,100,34,.4)}
.btn-s{background:transparent;border-color:var(--line);color:var(--white)}
.btn-s:hover{border-color:var(--blue);color:var(--blue)}
/* Emphasis without taking orange, which is reserved for "get a quote" — this
   pulls weight for content links we actually want followed. */
.btn-b{background:rgba(176,223,235,.07);border-color:var(--blue);color:var(--blue);
  font-weight:600;font-size:14px;padding:17px 30px;letter-spacing:.3px}
.btn-b .arrow{display:inline-block;transition:transform .2s}
.btn-b:hover{background:var(--blue);color:#000;box-shadow:0 0 34px rgba(176,223,235,.26)}
.btn-b:hover .arrow{transform:translateX(4px)}

/* ---- hero (home) ---- */
/* align-items:start, not center — the video column is shorter than the text
   column, and centering dropped its top edge well below the headline.
   Height is content-driven on purpose: a min-height:100vh floor made the hero
   grow to swallow a tall or fullscreen window, hiding any hint of the page
   below. Top padding still has to clear the fixed nav (46px logo + 14px
   padding each side = 74px). */
header.hero{position:relative;display:grid;
  grid-template-columns:1.05fr 1fr;align-items:start;gap:28px;
  max-width:1180px;margin:0 auto;padding:112px 28px 84px}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.8vw,57px);
  line-height:1.03;letter-spacing:-2px;margin-bottom:24px}
h1 .o{color:var(--orange)}
h1 .t{color:var(--blue)}
/* max-width sized to clear the longest hand-broken line; the <br>s in the hero
   sub set the three-line rhythm, so the box must not re-wrap them */
.sub{font-size:18.5px;color:var(--grey);max-width:560px;margin-bottom:36px}
.sub b{color:var(--white);font-weight:600}
/* below this the forced breaks read as ragged — let it wrap naturally instead */
@media(max-width:620px){.sub br{display:none}}
@media(max-width:900px){header.hero{grid-template-columns:1fr;padding-top:96px;padding-bottom:64px;min-height:0}}

/* Credit line under the hero video. Reuses the short rule-then-mono-caps
   device the old eyebrow used at the top of the hero, so the Airtho
   attribution keeps that visual language instead of reading as a stray caption. */
.stage-col{display:flex;flex-direction:column;gap:14px}
/* Optical alignment: align-items:start matches the video to the h1's line box,
   but the glyphs sit ~0.162em below that box top (half-leading + the gap
   between ascender and cap height). Nudging by the same fraction of the
   headline's own clamped size keeps the edges level as the h1 scales.
   Two-column only — below 900px the hero stacks and there's nothing to align. */
@media(min-width:901px){.stage-col{margin-top:calc(clamp(36px,5.2vw,62px) * .162)}}
/* Inline flow, not flex: as a flex container each text node and the <b> would
   become its own item and break into columns when the line has to wrap. */
.stage-credit{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--grey-dim);line-height:1.7}
.stage-credit::before{content:"";display:inline-block;width:28px;height:1px;
  background:var(--blue-deep);vertical-align:middle;margin-right:10px}
.stage-credit b{color:var(--grey);font-weight:500}
@media(max-width:620px){.stage-credit{letter-spacing:1px}}
/* The global `a{color:inherit;text-decoration:none}` would leave these
   Airtho links invisible, so give them their own underline and hover. */
.stage-credit a{border-bottom:1px solid var(--blue-deep);transition:color .2s,border-color .2s}
.stage-credit a:hover,.stage-credit a:hover b{color:var(--blue)}
.stage-credit a:hover{border-color:var(--blue)}

/* ---- page hero (sub-pages) ---- */
header.pagehero{padding:150px 0 60px;border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 20% 0%,rgba(176,223,235,.07),transparent 60%)}
header.pagehero h1{font-size:clamp(32px,4.6vw,54px);max-width:900px}
header.pagehero .lead{color:var(--grey);max-width:620px;font-size:17px}
.crumbs{font-family:var(--mono);font-size:12px;color:var(--grey-dim);margin-bottom:18px}
.crumbs a:hover{color:var(--blue)}

/* ---- 3d stage ---- */
.stage-wrap{position:relative;height:520px;border:1px solid var(--line);border-radius:4px;
  background:radial-gradient(circle at 50% 40%,rgba(176,223,235,.06),transparent 60%),var(--panel);
  overflow:hidden}
/* pan-y, not none: a vertical swipe must still scroll the page, or a
   phone user who starts the gesture on the stage is stuck on it. */
/* Hero video sits at its native 16:9 rather than the 3D stage's fixed height,
   so a wide room never gets cropped into a near-square box. */
.stage-wrap.videoframe{height:auto;aspect-ratio:16/9}
.stage-video{width:100%;height:100%;display:block;object-fit:cover}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:13px;letter-spacing:1px;padding:14px 22px;
  background:var(--orange);color:#000;border:none;border-radius:2px;cursor:pointer;
  font-weight:600;z-index:2}
.video-play[hidden]{display:none}
@media(max-width:900px){.stage-wrap.videoframe{height:auto}}
.stage-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.stage-canvas:active{cursor:grabbing}
.stage-tag{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:11px;
  color:var(--grey);letter-spacing:1px}
.stage-tag .live{color:var(--blue)}
.stage-hint{position:absolute;bottom:14px;left:16px;font-family:var(--mono);
  font-size:11px;color:#4a5459;display:flex;gap:18px;flex-wrap:wrap;
  max-width:52%;pointer-events:none}
.schip{font-family:var(--mono);font-size:11px;color:var(--grey);border:1px solid var(--line);
  background:rgba(0,0,0,.55);padding:6px 11px;border-radius:2px;cursor:pointer;transition:.2s}
.schip:hover{border-color:var(--orange);color:var(--orange)}
.schip[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:rgba(176,223,235,.08)}
.stage-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;color:var(--grey);font-family:var(--mono);font-size:12px;
  text-align:center;padding:24px}
@media(max-width:900px){.stage-wrap{height:420px}.stage-hint{max-width:100%}}
/* three chips + the tag won't share one line on a narrow stage */
@media(max-width:620px){.stage-tag{display:none}}

/* ---- 3d stage: description panel docked beside the canvas ----
   Whichever chip is selected names and describes itself right where the
   reader is already looking, instead of sending them down the page to a
   separate section to correlate shape with copy. */
.stage-wrap.with-desc{display:flex;align-items:stretch;height:560px}
.stage-viewport{position:relative;flex:1 1 56%;min-width:0;height:100%}
.stage-desc{flex:1 1 44%;min-width:0;border-left:1px solid var(--line);
  padding:28px 30px;display:flex;flex-direction:column;justify-content:center;gap:10px;
  overflow-y:auto}
.stage-desc .sku{font-family:var(--mono);font-size:11.5px;color:var(--blue);letter-spacing:.5px}
.stage-desc .dname{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.4px;
  line-height:1.25}
.stage-desc .dbody{font-size:14.5px;line-height:1.6;color:var(--grey)}
.stage-desc .drole{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--orange)}
.stage-desc .drole[hidden]{display:none}
@media(max-width:900px){
  /* The side panel doesn't fit next to the viewport at this width, and — now
     that each chip group has its own accordion slot right after it (below)
     — there's nothing left for it to do here: showing the same description
     a second time, scrolled miles below the chip that opened it, is exactly
     what the accordion replaces. Hidden outright rather than reflowed. */
  .stage-wrap.with-desc{flex-direction:column;height:auto}
  .stage-viewport{height:420px;flex:none;border-radius:4px 4px 0 0}
  .stage-desc{display:none}
}

/* ---- 3d stage: per-group description accordion (mobile only) ----
   Below 900px the side panel is hidden (above) in favour of this: a
   collapsible slot right after each chipset. Tapping a chip opens its
   group's slot in place — right under the thumb that tapped it, not
   scrolled off past every other group — tapping that same chip again
   closes it, and opening a different group's chip closes whichever slot
   was open before, so at most one is ever showing. Undoes to nothing above
   900px, where the side panel already does this job. */
.chip-desc{display:none;margin:-8px 0 14px;padding:16px 16px 14px;
  border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.chip-desc.open{display:block}
.chip-desc .sku{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.5px;margin-bottom:6px}
.chip-desc .dname{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.3px;margin-bottom:8px}
.chip-desc .dbody{font-size:14px;line-height:1.55;color:var(--grey)}
.chip-desc .drole{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--orange);margin-top:8px}
.chip-desc .drole[hidden]{display:none}
@media(min-width:901px){.chip-desc{display:none!important}}

/* ---- ticker ---- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  background:var(--panel);white-space:nowrap;padding:14px 0}
.ticker-track{display:inline-block;animation:scroll 55s linear infinite;
  /* Lighter than --grey: at 13px mono on the panel background the standard
     body grey reads washed out against the blue and orange highlights. */
  font-family:var(--mono);font-size:13px;color:#c8d0d4}
.ticker-track span{margin:0 26px}
.ticker-track b{color:var(--blue);font-weight:500}
.ticker-track em{color:var(--orange);font-style:normal}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---- section shell ---- */
section{padding:104px 0;position:relative}
section.tight{padding-top:0}

/* Hairline between consecutive sections, so the eye registers a handoff
   instead of one uninterrupted scroll. It rides on a pseudo-element centred
   in the gap the padding already leaves, so nothing on the page moves.
   The 28px orange lead-in is the same accent tick as .eyebrow::before.
   .audsec is excluded — it draws its own full-bleed border-top. */
section + section:not(.audsec)::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:calc(100% - 56px);max-width:1124px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,
    var(--orange) 0 28px,var(--line) 28px,var(--line) 72%,transparent);
}
/* .tight has no top padding, so its gap is only the previous section's
   104px bottom padding — pull the line back to the middle of it. */
section + section.tight:not(.audsec)::before{top:-52px}
/* .audsec closes on 64px, not 104px, so a .tight section after one sits in a
   shallower gap (products.html, audiences.html). */
section.audsec + section.tight::before{top:-32px}
.sec-h{font-family:var(--disp);font-weight:600;font-size:clamp(27px,3.5vw,41px);
  letter-spacing:-1px;line-height:1.1;margin-bottom:16px;max-width:680px}
.sec-lead{color:var(--grey);max-width:560px;font-size:16px;margin-bottom:48px}
h3.sub-h{font-family:var(--disp);font-weight:600;font-size:28px;letter-spacing:-.7px;
  margin:0 0 18px}
.sec-divider{height:1px;margin:56px 0 40px;background:linear-gradient(90deg,
  var(--orange) 0 28px,var(--line) 28px,var(--line) 72%,transparent)}

/* ---- cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:1fr 1fr}
.card{border:1px solid var(--line);border-radius:4px;padding:32px 26px;background:var(--panel);
  transition:.25s;position:relative;overflow:hidden}
.card.hoverable:hover{border-color:var(--blue-deep);transform:translateY(-3px)}
.card .big{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:-.5px;
  margin-bottom:12px;line-height:1.15}
.card .big.t{color:var(--blue)}
.card .big.o{color:var(--orange)}
.card p{font-size:14.5px;color:var(--grey)}
.card .fine{font-family:var(--mono);font-size:11.5px;color:var(--grey-dim);margin-top:14px;
  padding-top:14px;border-top:1px dashed var(--line)}
.card .fine a{color:var(--blue)}
.card .fine a:hover{text-decoration:underline}
@media(max-width:820px){.cards,.cards.two{grid-template-columns:1fr}}

/* ---- outcomes list ---- */
.outcomes{display:grid;gap:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:40px 1fr 1.1fr;gap:24px;padding:26px 0;
  border-bottom:1px solid var(--line);align-items:baseline;transition:.2s}
.row:hover{background:linear-gradient(90deg,rgba(176,223,235,.04),transparent)}
.row .n{font-family:var(--mono);font-size:12px;color:var(--blue)}
.row .res{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.5px;line-height:1.25}
.row .why{font-size:14.5px;color:var(--grey)}
.row .why b{color:var(--blue);font-weight:600}
.row .why a{color:var(--blue)}
.row .why a:hover{text-decoration:underline}
@media(max-width:720px){.row{grid-template-columns:1fr;gap:8px}.row .n{display:none}}

/* The four install steps, nested inside one of the .row steps. Spans the parent
   row's grid so the detail runs full width rather than squeezing into the .why
   column, and stays a real <ol> — the order is the install sequence. */
.substeps{grid-column:1/-1;list-style:none;counter-reset:s;display:grid;
  grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px;padding-top:22px;
  border-top:1px dashed var(--line)}
.substeps li{counter-increment:s;font-size:13.5px;color:var(--grey);line-height:1.6}
.substeps li::before{content:"Step " counter(s);display:block;font-family:var(--mono);
  font-size:11px;letter-spacing:1px;color:var(--blue);margin-bottom:7px}
.substeps li b{color:var(--white);font-weight:600;display:block;margin-bottom:3px}
@media(max-width:820px){.substeps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.substeps{grid-template-columns:1fr}}

/* ---- audience grid ----
   Two-up, and the role is the headline. Identification comes first: a visitor
   has to find themselves before the benefit means anything. */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.acard{border:1px solid var(--line);border-radius:4px;padding:36px 34px;background:var(--panel);
  transition:.25s;display:flex;flex-direction:column}
.acard:hover{border-color:var(--orange);background:var(--panel-2)}
.acard .who{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.3vw,27px);
  letter-spacing:-.7px;line-height:1.12;color:var(--white);margin-bottom:14px}
.acard .win{font-size:16px;color:var(--grey);max-width:38ch}
.acard .go{display:inline-flex;align-items:center;gap:12px;margin-top:auto;padding-top:30px;
  font-family:var(--mono);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--blue);transition:color .2s}
.acard .go .arrow{font-size:26px;line-height:0.8;transition:transform .2s}
.acard:hover .go{color:var(--orange)}
.acard:hover .go .arrow{transform:translateX(9px)}
@media(max-width:620px){.aud{grid-template-columns:1fr}.acard{padding:30px 26px}}

/* ---- offer block ---- */
.offer{border:1px solid var(--blue-deep);border-radius:6px;padding:56px 48px;
  background:linear-gradient(135deg,rgba(176,223,235,.07),rgba(227,100,34,.04)),var(--panel);
  text-align:center;position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(176,223,235,.12),transparent 55%)}
.offer > *{position:relative}
.offer .badge{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px}
.offer h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.6vw,40px);
  letter-spacing:-1px;margin-bottom:20px}
.offer em{color:var(--blue);font-style:normal}
.offer p{color:var(--grey);max-width:580px;margin:0 auto 32px;font-size:16px}
.offer p b{color:var(--white);font-weight:600}
@media(max-width:600px){.offer{padding:40px 24px}}

/* ---- spec tables ---- */
.tablecard{border:1px solid var(--line);border-radius:4px;overflow-x:auto;background:var(--panel)}
table.spec{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
table.spec caption{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--blue);padding:18px 20px 0}
table.spec th,table.spec td{padding:13px 20px;border-bottom:1px solid var(--line);
  color:var(--grey);text-align:left;vertical-align:top}
table.spec thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--white);background:rgba(255,255,255,.02);font-weight:500}
table.spec th[scope="row"]{color:var(--white);font-family:var(--mono);font-size:12.5px;
  width:230px;background:rgba(255,255,255,.015);font-weight:400}
table.spec tbody tr:last-child th,table.spec tbody tr:last-child td{border-bottom:none}
table.spec td b{color:var(--white);font-weight:600}
/* Visually hidden, still read aloud — a bare ✓/✕ glyph tells a screen reader
   nothing useful about whether a service is in scope. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Inclusion matrix (kit vs turnkey). Unlike the data tables, this one is scanned
   down two columns, so the marks are centred and colour-coded to match the
   blue/orange the .tag chips and the "Take the kit / turnkey" cards already use. */
table.spec.compare{min-width:560px}
table.spec.compare th[scope="row"]{width:auto;font-family:var(--body);font-size:15px;
  font-weight:500;color:var(--white);padding:16px 22px;background:none;vertical-align:middle}
table.spec.compare thead th{font-family:var(--disp);font-size:16.5px;font-weight:600;
  letter-spacing:-.3px;text-transform:none;padding:16px 22px}
table.spec.compare thead th.kit,table.spec.compare thead th.turn{color:var(--blue)}
table.spec.compare thead th.kit,table.spec.compare thead th.turn,
table.spec.compare td{text-align:center;width:180px}
table.spec.compare td{font-size:18px;line-height:1;vertical-align:middle;padding:16px 22px}
/* Same code as the .applies matrix on specs.html: blue reads "included",
   orange reads "not". Meaning belongs to the mark, not to the column. */
table.spec.compare td.yes{color:var(--blue);font-weight:600}
table.spec.compare td.no{color:var(--orange);font-weight:600}
table.spec.compare tbody tr:hover th[scope="row"]{color:var(--white)}
table.spec.compare tbody tr:hover{background:rgba(255,255,255,.02)}
@media(max-width:620px){
  table.spec.compare thead th{font-size:14px;padding:14px}
  table.spec.compare th[scope="row"]{font-size:14px;padding:14px}
  table.spec.compare thead th.kit,table.spec.compare thead th.turn,
  table.spec.compare td{width:120px}
}

/* Three-way comparison (stick-built / typical IMP / PanelEase). table.spec
   already handles the chrome; this only sets the column rhythm and lifts the
   PanelEase column out of the other two so the eye lands there first. */
table.spec.three{min-width:760px}
table.spec.three th[scope="row"]{width:190px}
table.spec.three thead th{font-family:var(--disp);font-size:15.5px;font-weight:600;
  letter-spacing:-.3px;text-transform:none}
table.spec.three thead th.pe{color:var(--blue)}
table.spec.three td{width:auto}
table.spec.three td.pe{background:rgba(176,223,235,.045);color:var(--white)}
table.spec.three td.pe b{color:var(--blue);font-weight:600}
table.spec.three tbody tr:hover td:not(.pe){background:rgba(255,255,255,.02)}

.tnote{font-family:var(--mono);font-size:12px;color:var(--grey-dim);margin-top:14px;line-height:1.7}

/* ---- stat strip ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.stats.two{grid-template-columns:repeat(2,1fr)}
.stat{background:var(--panel);padding:28px 24px}
.stat .v{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-1px;
  color:var(--blue);line-height:1;margin-bottom:10px}
.stat .v.o{color:var(--orange)}
.stat .l{font-size:13.5px;color:var(--grey)}
@media(max-width:820px){.stats,.stats.two{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.stats,.stats.two{grid-template-columns:1fr}}

/* ---- audience detail sections ---- */
.audsec{border-top:1px solid var(--line);padding:64px 0}
.audsec:first-of-type{border-top:none;padding-top:0}
.audsec h2{font-family:var(--disp);font-weight:600;font-size:clamp(25px,3.2vw,34px);
  letter-spacing:-.8px;margin-bottom:16px;max-width:660px}
.audsec > .wrap > p.intro{color:var(--grey);font-size:16px;max-width:600px;margin-bottom:34px}
.plist{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:28px}
.plist .p{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;padding:22px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.plist .p .q{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.4px;line-height:1.3}
.plist .p .a{font-size:14.5px;color:var(--grey)}
.plist .p .a b{color:var(--white);font-weight:600}
@media(max-width:720px){.plist .p{grid-template-columns:1fr;gap:8px}}

/* ---- form ---- */
.formgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
@media(max-width:900px){.formgrid{grid-template-columns:1fr;gap:40px}}
form.lead{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--grey)}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{
  background:var(--panel);border:1px solid var(--line);border-radius:2px;color:var(--white);
  font-family:var(--body);font-size:15px;padding:13px 14px;width:100%;transition:border-color .2s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#28323a}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),
                   linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select option{background:var(--panel);color:var(--white)}
.field .help{font-size:12.5px;color:var(--grey-dim)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--orange)}
.field .errmsg{font-family:var(--mono);font-size:11.5px;color:var(--orange);display:none}
.field.err .errmsg{display:block}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.two-up{grid-template-columns:1fr}}

/* ---- options checklist (contact form) ----
   A <fieldset> so the group has one accessible name, but stripped of the default
   border and inline-block sizing so it inherits the .field grid rhythm. */
.optfield{border:0;padding:0;margin:0;min-width:0}
.optfield legend{font-family:var(--mono);font-size:11.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--grey);padding:0;margin-bottom:8px}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.optgrid{grid-template-columns:1fr}}
/* Scoped to .optfield, not bare .opt — these are <label>s inside a .field, so
   they inherit the uppercase mono treatment from `.field label` unless a rule of
   equal specificity overrides it further down the sheet. */
.optfield .opt{display:flex;align-items:center;gap:11px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:12px 14px;transition:border-color .2s,color .2s;
  font-family:var(--body);font-size:14.5px;letter-spacing:0;text-transform:none;
  color:var(--grey)}
.optfield .opt:hover{border-color:#28323a;color:var(--white)}
/* `.field input` sets width:100%, which would stretch the box across the row. */
.optfield .opt input{width:15px;height:15px;flex:none;margin:0;padding:0;
  accent-color:var(--blue);cursor:pointer}
.optfield .opt:has(input:checked){border-color:var(--blue);color:var(--white)}
.optfield .opt:focus-within{border-color:var(--blue)}
/* Cap-only options, hidden by site.js when the application is a wall alone.
   display:none has to beat the display:flex above, hence the same scoping. */
.optfield .opt[hidden]{display:none}
form.lead button{width:100%;font-size:14px;padding:16px 22px}
.formnote{font-family:var(--mono);font-size:12px;color:var(--grey-dim);line-height:1.7}
.formstatus{display:none;border:1px solid var(--blue-deep);border-radius:3px;
  background:rgba(176,223,235,.07);padding:18px 20px;font-size:14.5px;color:var(--white)}
.formstatus.on{display:block}
.formstatus b{color:var(--blue)}

.aside-block{border:1px solid var(--line);border-radius:4px;background:var(--panel);padding:30px 28px}
.aside-block + .aside-block{margin-top:18px}
.aside-block h3{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.4px;margin-bottom:14px}
.aside-block p{color:var(--grey);font-size:14.5px}
.aside-block p + p{margin-top:12px}
.contactlist{display:grid;gap:14px;margin-top:6px}
.contactlist .ci{display:grid;gap:3px}
.contactlist .ci .cl{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--grey-dim)}
.contactlist .ci a,.contactlist .ci span{font-family:var(--disp);font-size:18px;font-weight:600;
  letter-spacing:-.3px;color:var(--white)}
.contactlist .ci a:hover{color:var(--blue)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.fgrid h2{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.5px;margin-bottom:12px}
.fgrid p{color:var(--grey);font-size:15px;max-width:400px}
.fgrid p a{color:var(--white);border-bottom:1px solid var(--blue-deep);transition:color .2s,border-color .2s}
.fgrid p a:hover{color:var(--blue);border-color:var(--blue)}
.flogo{display:inline-block;margin-bottom:22px}
.flogo img{height:58px;width:auto;display:block}
.fnav{position:static;display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--grey);
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.fnav a:hover{color:var(--white)}
.fmeta{font-family:var(--mono);font-size:12px;color:var(--grey-dim);margin-top:18px;
  display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
.fmeta a:hover{color:var(--blue)}
.fdisclaim{font-family:var(--mono);font-size:11.5px;color:#414a4f;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--line);line-height:1.75;max-width:820px}
@media(max-width:720px){.fgrid{grid-template-columns:1fr}.fgrid > div:last-child{text-align:left!important}}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .ticker-track{animation:none}
}

/* ---- extrusion stage: too many parts for floating chips, so the
       selector becomes a labelled bar beneath the canvas ---- */
.stage-bar{border:1px solid var(--line);border-top:none;border-radius:0 0 4px 4px;
  background:var(--panel);padding:16px 18px;display:grid;gap:12px}
.chipset{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chipset .setlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--grey-dim);width:96px;flex:none}
@media(max-width:640px){.chipset .setlabel{width:100%}}
.stage-wrap.docked{border-radius:4px 4px 0 0}

/* ---- key advantages: horizontal vs vertical package, split in half ---- */
.advsplit{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.adv-half{padding:32px 34px}
.adv-half:first-child{border-right:1px solid var(--line)}
.adv-tag{font-family:var(--mono);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:24px}
.adv-tag.t{color:var(--blue)}
.adv-tag.o{color:var(--orange)}
.adv-item{margin-bottom:26px}
.adv-item:last-child{margin-bottom:0}
.adv-item h3{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.3px;margin-bottom:8px;color:var(--white)}
.adv-item p{font-size:14.5px;color:var(--grey);line-height:1.55;margin-bottom:6px}
.adv-item p:last-child{margin-bottom:0}
@media(max-width:760px){
  .advsplit{grid-template-columns:1fr}
  .adv-half:first-child{border-right:none;border-bottom:1px solid var(--line)}
}
.adv-full{border:1px solid var(--line);border-radius:4px;padding:32px 34px;margin-top:24px}
.adv-full-h{font-size:clamp(22px,2.4vw,28px)!important}
.adv-full p strong{color:var(--white)}

/* ---- placeholder figures awaiting real data ---- */
/* ---- applicability matrix (specs) ---- */
/* Heading and marks share one fixed, centred column — a left-aligned heading
   over a wide auto-width column reads as belonging to the row label instead.
   Selectors are qualified with `table.spec` on purpose: the shared
   `table.spec th,table.spec td{text-align:left}` outranks a bare `.applies td`
   and silently won, which left every mark hugging the left edge. */
table.spec.applies th[scope="row"]{width:auto}
table.spec.applies thead th:not(:first-child),
table.spec.applies tbody td{text-align:center;width:190px}
table.spec.applies tbody td{font-size:16px;vertical-align:middle}
table.spec.applies .yes{color:var(--blue);font-weight:600}
table.spec.applies .no{color:var(--orange);font-weight:600;opacity:1}
@media(max-width:620px){
  table.spec.applies thead th:not(:first-child),
  table.spec.applies tbody td{width:110px}
}
.applies th[scope="row"] a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--line)}
.applies th[scope="row"] a:hover{border-bottom-color:var(--blue);color:var(--blue)}

/* ---- install gallery ---- */
/* ---- scope, service by service (solutions) ---- */
.svcs{display:grid;gap:0;border-top:1px solid var(--line);margin-top:30px}
.svc{display:grid;grid-template-columns:270px 1fr 250px;gap:30px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line)}
.svc h3{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:-.4px;
  color:var(--white);line-height:1.25}
.svc p{font-size:14.5px;color:var(--grey)}
.tag{display:inline-block;margin-top:10px;padding:4px 9px;border-radius:3px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase}
.tag.both{color:var(--blue);border:1px solid var(--blue-deep)}
.tag.turnkey{color:var(--orange);border:1px solid var(--orange)}
.svc-pts{display:flex;flex-wrap:wrap;gap:7px;align-content:start}
.svc-pts span{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--grey-dim);
  border:1px solid var(--line);border-radius:3px;padding:5px 9px}
@media(max-width:900px){.svc{grid-template-columns:1fr;gap:14px}}

/* ---- kit vs turnkey advantage lists ---- */
.wins{list-style:none;margin-top:16px;display:grid;gap:11px}
.wins li{position:relative;padding-left:19px;font-size:14px;color:var(--grey);line-height:1.6}
.wins li::before{content:"→";position:absolute;left:0;color:var(--blue-deep)}
.wins b{color:var(--white);font-weight:600}

/* ---- product tabs ---- */
/* Docks directly under the fixed #nav: 14px padding + 46px logo + 14px. */
.tabbar{position:sticky;top:74px;z-index:40;background:rgba(5,6,7,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
@media(max-width:520px){.tabbar{top:66px}}
/* scrollable at any width: the audiences bar carries four tabs, which overflow
   well before the phone breakpoint */
.tabs{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;white-space:nowrap}
.tab{display:flex;align-items:center;gap:10px;padding:20px 26px 18px;cursor:pointer;
  font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.3px;
  color:var(--grey);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.tab .tnum{font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:1px;
  color:#3a4046}
.tab:hover{color:var(--white)}
.tab[aria-selected="true"]{color:var(--white);border-bottom-color:var(--orange)}
.tab[aria-selected="true"] .tnum{color:var(--orange)}
.tab:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
/* Panels only collapse once JS is confirmed — see the head script on products.html. */
.js .tabpanel[hidden]{display:none}
@media(max-width:620px){
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{padding:16px 18px 14px;font-size:18px;white-space:nowrap}
}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:28px}
.shot{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel)}
.shot img{display:block;width:100%;height:240px;object-fit:cover}