/* ==========================================================================
   GSKordeven Orbit 7.0 - the 3D components
   --------------------------------------------------------------------------
   1. Extruded shield (hero + about)
   2. Tilt panels          [data-tilt]
   3. Flip tiles           .flip-tile      (signal strip, service cards)
   4. Service carousel     .csc-carousel   (how we work)
   5. Step deck            .step-deck      (the four steps, draggable)
   6. Cinematic reel       .reel           (about us)
   7. Courier form stage   .courier        (contact)
   8. 3D charts            .chart3d        (statistics)

   No libraries. Everything below degrades to a readable flat layout when the
   visitor has "reduce motion" switched on.
   ========================================================================== */

/* ============ 1. EXTRUDED SHIELD ============ */
.shield-stage{
  position:relative;display:grid;place-items:center;
  min-height:470px;perspective:1200px;perspective-origin:50% 44%;
}
.shield-glow{
  position:absolute;width:min(340px,76%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(57,170,255,.26),rgba(132,96,217,.14) 52%,transparent 70%);
  filter:blur(14px);animation:glowPulse 5s ease-in-out infinite alternate;
}
@keyframes glowPulse{to{transform:scale(1.14);opacity:.72}}
.shield-extrude{
  position:relative;width:min(320px,72vw);aspect-ratio:1;
  transform-style:preserve-3d;
  animation:shieldSpin 22s cubic-bezier(.42,0,.58,1) infinite;
  will-change:transform;
}
@keyframes shieldSpin{
  0%{transform:rotateX(8deg) rotateY(-17deg)}
  50%{transform:rotateX(-4deg) rotateY(17deg)}
  100%{transform:rotateX(8deg) rotateY(-17deg)}
}
.shield-extrude.is-paused{animation-play-state:paused}
.shield-extrude img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transform:translateZ(calc(var(--i) * -1.5px));
  opacity:calc(1 - var(--i) * .055);pointer-events:none;
}
.shield-extrude img:first-child{opacity:1;filter:drop-shadow(0 16px 32px rgba(11,52,110,.55))}
.shield-floor{
  position:absolute;bottom:34px;width:260px;height:38px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(57,170,255,.28),transparent 72%);filter:blur(11px);
}
.shield-orbit{position:absolute;border:1.5px solid rgba(57,170,255,.36);border-radius:50%;pointer-events:none}
.shield-orbit::after{
  content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 14px rgba(98,215,255,.9);
}
.shield-orbit.o1{width:min(430px,94%);aspect-ratio:1;animation:orbit1 17s linear infinite}
.shield-orbit.o2{width:min(340px,74%);aspect-ratio:1;border-color:rgba(132,96,217,.4);animation:orbit2 12s linear infinite reverse}
.shield-orbit.o2::after{background:var(--purple-2);box-shadow:0 0 14px rgba(178,155,255,.9)}
@keyframes orbit1{from{transform:rotateX(74deg) rotateZ(0)}to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes orbit2{from{transform:rotateX(66deg) rotateZ(0)}to{transform:rotateX(66deg) rotateZ(360deg)}}

/* ============ 2. TILT PANELS ============ */
.tilt-scene{perspective:1100px}
.tilt-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(120,200,255,.16),transparent 46%);
  opacity:0;transition:opacity .3s ease;
}
[data-tilt]:hover .tilt-glare{opacity:1}

/* ============ 3. FLIP TILES ============ */
/* Used for the four tiles under the hero, the four service cards, and the
   panels on the About and Services pages. The flip is on the X axis, so a card
   turns top-over-bottom rather than sideways.

   Every element inside the button is a <span>, because a <button> may only
   contain phrasing content. They therefore need explicit block layout: a span
   left as display:inline ignores min-height, and the whole tile collapses. */
.tile-grid{display:grid;gap:20px}
.tile-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile-grid.services{grid-template-columns:repeat(2,minmax(0,1fr))}

.flip-tile{
  display:block;width:100%;
  position:relative;perspective:1500px;
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;
}
.flip-tile-inner{
  /* Both faces sit in the same grid cell, so the tile sizes itself to whichever
     face is taller. That keeps the 3D flip working at every width without
     having to guess a fixed height, and nothing can be clipped or overflow. */
  display:grid;position:relative;width:100%;
  min-height:var(--tile-h,230px);
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.85,.25,1);
  will-change:transform;
}
.flip-tile.is-flipped .flip-tile-inner{transform:rotateX(180deg)}

.flip-face{
  grid-area:1/1;
  display:flex;flex-direction:column;
  padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(46,56,71,.97),rgba(30,36,45,.98));
  box-shadow:var(--shadow-2);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
}
.flip-face.back{
  transform:rotateX(180deg);
  background:linear-gradient(150deg,rgba(40,52,78,.98),rgba(28,32,44,.99));
  border-color:rgba(98,215,255,.42);
}
.flip-tile:hover .flip-face.front,
.flip-tile:focus-visible .flip-face.front{border-color:rgba(98,215,255,.6);box-shadow:var(--shadow-3),var(--glow)}
.flip-tile:focus-visible{outline:none}
.flip-tile:focus-visible .flip-face{outline:3px solid var(--focus);outline-offset:-3px}
/* the top edge catches a brand-coloured light */
.flip-face::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.flip-face.back::before{background:linear-gradient(90deg,var(--purple),var(--cyan))}

.tile-title{
  display:block;margin:0 0 10px;
  color:#fff;font-size:1.18rem;font-weight:800;letter-spacing:-.015em;line-height:1.3;
}
.tile-text{display:block;margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.tile-list{display:block;margin:0}
.tile-list-item{
  display:block;position:relative;
  margin:0 0 8px;padding-left:20px;
  color:var(--muted);font-size:.92rem;line-height:1.55;
}
.tile-list-item:last-child{margin-bottom:0}
.tile-list-item::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
}
.tile-hint{
  display:flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:16px;
  color:var(--cyan);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
/* Both faces share a cell, so a tile is as tall as its taller face. On a plain
   card the front is a short line and the back a list, which used to leave a big
   empty block above the hint. Centring the content on those faces spreads the
   space evenly instead of pooling it in one place. */
.flip-face:not(:has(.tile-art)){justify-content:center}
.flip-face:not(:has(.tile-art)) .tile-hint{margin-top:22px}
.tile-hint::before{content:"";width:16px;height:1px;background:var(--cyan)}
.tile-art{
  display:block;width:100%;height:132px;object-fit:contain;
  padding:10px;margin:0 0 14px;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(34,42,53,.6);
}

/* ============ 4. SERVICE CAROUSEL (how we work) ============ */
.csc-carousel{
  position:relative;height:440px;
  perspective:1500px;perspective-origin:50% 44%;
  user-select:none;touch-action:pan-y;
  /* Cards on the far side of the cylinder swing out well past the stage. On a
     narrow phone that pushed the page sideways, so the stage clips them.
     overflow-x:clip is used rather than hidden: it clips without turning the
     stage into a scroll container, which would swallow the drag gesture. */
  overflow-x:clip;
}
.csc-ring{
  position:absolute;inset:0;margin:auto;
  width:310px;height:390px;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.23,1,.32,1);
  will-change:transform;
}
.csc-carousel.dragging .csc-ring{transition:none}
.csc-card{
  position:absolute;inset:0;
  border-radius:18px;transform-style:preserve-3d;
  cursor:pointer;opacity:.5;
  transition:opacity .4s ease;
}
.csc-card.is-active{opacity:1}
.csc-card:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:18px}
/* the card body flips top-over-bottom when the front card is clicked */
.csc-flip{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.2,.85,.25,1);
}
.csc-card.is-flipped .csc-flip{transform:rotateX(180deg)}
.csc-face{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:26px 24px;border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(45,56,74,.97),rgba(26,31,40,.99));
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
}
.csc-face.back{
  transform:rotateX(180deg);
  background:linear-gradient(165deg,rgba(38,50,80,.98),rgba(22,27,38,.99));
  border-color:rgba(98,215,255,.5);
}
.csc-card.is-active .csc-face{border-color:rgba(98,215,255,.5);box-shadow:0 0 0 1px rgba(98,215,255,.2),0 40px 90px -30px rgba(57,170,255,.45)}
.csc-face::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.csc-num{
  font:800 .72rem/1 var(--mono);letter-spacing:.2em;color:var(--cyan);
  text-transform:uppercase;margin-bottom:16px;
}
.csc-card h3{margin:0 0 10px;font-size:1.28rem;color:#fff}
.csc-card p{margin:0;color:var(--muted);font-size:.9rem}
.csc-card .csc-lede{margin-bottom:14px}
.csc-tag{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  font:700 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--purple-2);
}
.csc-steps-btn{
  margin-top:14px;width:100%;justify-content:center;
}
.csc-glow{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:420px;height:56px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(57,170,255,.3),transparent 70%);filter:blur(14px);
}
.csc-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.c-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(57,170,255,.08);color:var(--text);
  cursor:pointer;font-size:18px;transition:.25s;
}
.c-btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);box-shadow:var(--glow)}
.c-dots{display:flex;gap:9px}
.c-dot{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.22);transition:.25s;
}
.c-dot.on{background:var(--cyan);width:26px;border-radius:999px;box-shadow:var(--glow)}
.csc-hint{
  text-align:center;margin-top:14px;color:var(--muted-2);
  font:700 .68rem/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}

/* ============ 5. STEP DECK ============ */
/* Opens over the carousel when "See the four steps" is pressed. The cards can
   be dragged sideways and clicked to bring one forward. */
.step-deck{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(14,17,22,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.step-deck.open{display:grid;grid-template-rows:auto 1fr auto;animation:deckIn .35s ease}
@keyframes deckIn{from{opacity:0}to{opacity:1}}
.step-deck-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(var(--max),calc(100% - 44px));margin:26px auto 0;
}
.step-deck-head h3{margin:0;font-size:1.3rem;color:#fff}
.step-deck-head .eyebrow{margin-bottom:4px}
.deck-close{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(57,170,255,.10);color:#fff;
  font-size:20px;cursor:pointer;transition:.2s;
}
.deck-close:hover{border-color:var(--cyan);color:var(--cyan)}
.deck-fan{
  position:relative;align-self:center;
  height:420px;perspective:1600px;perspective-origin:50% 42%;
  touch-action:pan-y;
}
.deck-fan-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s ease-out}
.deck-card{
  position:absolute;left:50%;top:24px;width:256px;height:348px;margin-left:-128px;
  border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(44,56,78,.97),rgba(22,27,37,.99));
  box-shadow:0 50px 90px -50px #000;
  transform-origin:50% 150%;
  transition:transform .7s cubic-bezier(.2,.85,.25,1),box-shadow .5s,border-color .4s;
  cursor:pointer;padding:26px 24px;display:flex;flex-direction:column;
}
.deck-card:hover,.deck-card.is-centre{border-color:rgba(98,215,255,.55)}
.deck-card.is-open{z-index:60;box-shadow:0 40px 90px -30px rgba(57,170,255,.5)}
.deck-card:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.deck-card h4{margin:0 0 10px;font-size:1.25rem;color:#fff}
.deck-card p{margin:0;color:var(--muted);font-size:.9rem}
.deck-card .deck-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:.86rem}
.deck-hint{
  text-align:center;padding:0 0 26px;color:var(--muted-2);
  font:700 .68rem/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}

/* ============ 6. CINEMATIC REEL ============ */
.reel{position:relative;overflow:hidden;border-radius:var(--radius);background:#12151b}
.reel canvas{display:block;width:100%;height:100%}
.reel-grade{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,transparent 30%,rgba(9,12,17,.6) 100%),
             linear-gradient(180deg,rgba(9,12,17,.35),transparent 30%,rgba(9,12,17,.55));
}
.reel.is-bg{position:absolute;inset:0;border-radius:0;z-index:0}
.reel.blurred canvas{filter:blur(9px) saturate(1.1);transform:scale(1.08)}
.reel-stage{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line)}
.reel-stage>.reel{position:absolute;inset:0;border-radius:0}
.reel-content{
  position:relative;z-index:2;padding:52px 44px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:40px;align-items:start;
}
.reel-content>.eyebrow,.reel-content>h2{grid-column:1/-1}
.reel-content h2{margin:14px 0 18px;max-width:22ch;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.14}
.reel-copy{margin:0 0 16px;color:var(--muted);font-size:1rem;max-width:62ch}
.reel-copy:last-child{margin-bottom:0}

/* The caption on its own meant nothing, so the five areas are listed in full
   and the caption simply points at whichever one is on screen. */
.reel-legend{
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(20,25,33,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.reel-legend-title{
  margin:0 0 14px;color:#fff;font-size:.92rem;font-weight:800;line-height:1.4;
}
.reel-legend-list{margin:0;padding:0 0 0 1.3em;counter-reset:reel}
.reel-legend-list li{
  margin-bottom:7px;color:var(--muted);font-size:.9rem;line-height:1.5;
}
.reel-legend-list li::marker{color:var(--cyan);font-weight:700}
.reel-now{
  display:flex;flex-direction:column;gap:5px;
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);
}
.reel-now-label{
  color:var(--muted-2);font-size:.66rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
}
.reel-label{
  margin:0;color:var(--cyan);
  font:700 .82rem/1.3 var(--mono);letter-spacing:.08em;
}
.reel-ticks{display:flex;gap:6px;margin-top:14px}
.reel-ticks i{
  display:block;width:100%;max-width:34px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.2);transition:background .3s ease;
}
.reel-ticks i.on{background:linear-gradient(90deg,var(--cyan),var(--purple-2))}

/* ============ 7. COURIER FORM STAGE ============ */
/* The courier band is the top row and the form the bottom one, so the page
   never opens on an empty panel: the animation is what you see first, and the
   form then rises over the top of it.

   The form is a normal grid item rather than an absolutely positioned overlay,
   so the stage grows with it. That is what stops the form ever needing its own
   scrollbar: a taller step simply pushes the page down. */
.courier{
  display:grid;grid-template-rows:300px auto;
  position:relative;overflow-x:clip;
  perspective:1400px;
  border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(32,39,50,.85),rgba(20,24,32,.95));
}
.courier-band{grid-row:1;position:relative;z-index:0}
.courier-floor{position:absolute;left:0;right:0;bottom:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(120,170,255,.35),transparent)}
.courier-floor::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,rgba(98,215,255,.07),transparent)}
.suit{position:absolute;bottom:-4px;left:0;width:190px;height:300px;transform:translateX(-240px);transition:transform 2.4s cubic-bezier(.4,0,.35,1);cursor:pointer}
.suit-shadow{position:absolute;bottom:-10px;left:0;width:190px;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);filter:blur(6px);transform:translateX(-240px);transition:transform 2.4s cubic-bezier(.4,0,.35,1)}
.suit.walking .leg-a{animation:legA .62s ease-in-out infinite;transform-box:view-box;transform-origin:94px 152px}
.suit.walking .leg-b{animation:legB .62s ease-in-out infinite;transform-box:view-box;transform-origin:105px 152px}
.suit.walking .arm-a{animation:armA .62s ease-in-out infinite;transform-box:view-box;transform-origin:72px 78px}
.suit.walking .body-g{animation:bob .31s ease-in-out infinite}
@keyframes legA{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
@keyframes legB{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
@keyframes armA{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.case-lid{transform-box:view-box;transform-origin:52px 146px;transition:transform .55s cubic-bezier(.3,1.4,.4,1)}
.suit.open .case-lid{transform:rotate(-118deg)}
.case-glow{opacity:0;transition:opacity .4s}
.suit.open .case-glow{opacity:1}
/* the form panel itself springs up out of the case in 3D */
.courier-panel{
  grid-row:2;z-index:1;
  width:100%;padding:0 26px 28px;
  /* pulled up so the form overlaps the case the courier just opened */
  margin-top:-104px;
  transform:translateY(-120px) rotateX(-70deg) scale(.62);
  transform-origin:50% 0;
  opacity:0;pointer-events:none;
  transition:transform .85s cubic-bezier(.2,1.2,.35,1),opacity .45s ease;
}
.courier.revealed .courier-panel{transform:none;opacity:1;pointer-events:auto}
.courier-replay{display:flex;justify-content:center;margin-top:18px}
/* Without JavaScript, or with reduced motion, the form is simply there. */
.no-js .courier .courier-panel,
.courier.static .courier-panel{transform:none;opacity:1;pointer-events:auto}
.no-js .courier,.courier.static{grid-template-rows:auto;perspective:none}
.no-js .courier .courier-panel,.courier.static .courier-panel{margin-top:0;padding:26px}
.no-js .courier .suit,.no-js .courier .suit-shadow,.no-js .courier .courier-floor,
.courier.static .suit,.courier.static .suit-shadow,.courier.static .courier-floor{display:none}

/* the enquiry form inside the panel */
.form-shell{
  padding:30px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(40,50,70,.98),rgba(22,27,38,.99));
  box-shadow:0 40px 80px -40px rgba(57,170,255,.45);
}
.form-shell h2{margin:0 0 8px;font-size:1.3rem}
.form-intro{margin:0 0 20px;color:var(--muted);font-size:.92rem}
.form-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.form-progress span{height:5px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .3s ease}
.form-progress span.active{background:linear-gradient(90deg,var(--blue),var(--purple))}
.form-progress-label{margin:0 0 20px;color:var(--muted-2);font-size:.78rem;font-weight:700;letter-spacing:.04em}
.form-step{display:none}
.form-step.active{display:block;animation:stepIn .35s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.form-step>h3{margin:0 0 16px;font-size:1.05rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{min-width:0}
.field.full{grid-column:1/-1}
.field>label,.fieldset-title{display:block;margin-bottom:6px;color:var(--text);font-size:.85rem;font-weight:750}
.field .req{color:var(--danger)}
.field input,.field textarea,.field select{
  width:100%;padding:12px 13px;border:1px solid rgba(116,161,211,.5);border-radius:var(--radius-sm);
  background:#252b35;color:var(--text);font:inherit;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(98,215,255,.16)}
.field-help{display:block;margin-top:5px;color:var(--muted-2);font-size:.77rem}
.field-error{display:none;margin-top:5px;color:var(--danger);font-size:.78rem;font-weight:650}
.field.invalid .field-error{display:block}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--danger);background:var(--danger-soft)}
fieldset{margin:0;padding:0;border:0}
label.check-option{
  display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:11px;
  margin:0;padding:13px 14px;border:1px solid rgba(111,164,222,.35);border-radius:var(--radius-sm);
  background:rgba(44,55,69,.7);color:#edf1f6;font-size:.86rem;font-weight:600;line-height:1.45;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
label.check-option:hover{border-color:rgba(99,190,255,.7);background:rgba(53,67,83,.92)}
label.check-option:has(input:checked){border-color:var(--cyan);background:rgba(45,137,219,.2)}
label.check-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
label.check-option input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;margin:1px 0 0;padding:0;
  border:1.5px solid #92a7bd;border-radius:5px;background:#252b34;
  display:grid;place-content:center;cursor:pointer;transition:background .15s,border-color .15s;
}
label.check-option input[type="checkbox"]::before{
  content:"";width:10px;height:6px;border-left:2.5px solid #07121d;border-bottom:2.5px solid #07121d;
  transform:rotate(-45deg) scale(0);transform-origin:center;transition:transform .14s ease;
}
label.check-option input[type="checkbox"]:checked{border-color:var(--cyan);background:linear-gradient(135deg,var(--cyan),var(--blue))}
label.check-option input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1)}
.check-text{display:block;min-width:0}
.check-text strong{display:block;margin-bottom:2px;color:#fff;font-size:.88rem}
.conditional{display:none}
.conditional.show{display:block}
.policy-confirmation{border-color:rgba(98,215,255,.5);background:linear-gradient(135deg,rgba(40,129,236,.16),rgba(126,84,220,.12))}
.privacy-field.invalid label.policy-confirmation{border-color:var(--danger);background:var(--danger-soft)}
.form-warning{
  margin:20px 0 0;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid rgba(132,96,217,.4);border-left:4px solid var(--purple);
  background:rgba(113,77,225,.14);color:#ded6ff;font-size:.84rem;
}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.form-actions .spacer{flex:1}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ 8. STATISTICS DECK AND 3D CHARTS ============ */
.stats-deck-wrap{position:relative}
/* The perspective sits on the deck itself. A preserve-3d ancestor would stop
   overflow:hidden clipping, and the incoming slide would slide out past the
   edge of the page. */
/* Every slide sits in the same grid cell, so the deck sizes itself to whichever
   slide is tallest. Stacking them absolutely meant a long slide had to scroll
   inside the card on a narrow phone; now the card is simply tall enough and
   nothing scrolls. The perspective lives here rather than on a preserve-3d
   ancestor, so overflow:hidden still clips the incoming slide. */
.stats-deck{
  display:grid;position:relative;min-height:640px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(44,55,74,.97),rgba(24,28,36,.98));
  box-shadow:var(--shadow-2);
  overflow:hidden;perspective:1500px;
}
.home-statistics .stats-deck{min-height:610px}
.stat-slide{
  grid-area:1/1;display:flex;flex-direction:column;
  padding:32px;
  opacity:0;pointer-events:none;
  transform:translate3d(40px,0,-120px) rotateY(9deg);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.stat-slide.active{opacity:1;pointer-events:auto;transform:none}
.stat-slide.leaving{opacity:0;transform:translate3d(-40px,0,-120px) rotateY(-9deg)}
.stat-kicker{margin:0;color:var(--cyan);font-size:.73rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.stat-chart{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:270px;margin:18px 0 14px;
}
.stat-title{margin:4px 0 8px;font-size:1.28rem;max-width:34ch}
.stat-explain{margin:0;color:var(--muted);max-width:62ch;font-size:.96rem}
.stat-badge{
  display:flex;align-items:center;gap:13px;margin-top:14px;padding:12px 15px;
  border:1px solid rgba(157,125,229,.32);border-radius:var(--radius-sm);background:rgba(132,96,217,.14);
}
.stat-badge strong{color:#fff;font-size:1.45rem;font-weight:800;line-height:1}
.stat-badge span{color:var(--muted);font-size:.84rem}
.stat-source{
  margin:auto 0 0;padding-top:15px;border-top:1px solid var(--line-soft);
  color:var(--muted-2);font-size:.79rem;
}
.stat-source a{display:inline-flex;align-items:center;gap:5px;color:var(--cyan);font-weight:700;text-decoration:none}
.stat-source a::after{content:"\2192"}
.stat-source a:hover{text-decoration:underline}
.stat-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px}
.stat-dots{display:flex;flex-wrap:wrap;gap:7px}
.stat-dot{
  width:10px;height:10px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.24);cursor:pointer;transition:.22s ease;
}
.stat-dot:hover{background:rgba(255,255,255,.45)}
.stat-dot.active{width:26px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--purple));box-shadow:var(--glow)}
.stat-buttons{display:flex;gap:8px}
.stat-buttons button{
  padding:9px 14px;border:1px solid var(--line);border-radius:8px;
  background:rgba(53,69,86,.78);color:var(--text-2);
  font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.stat-buttons button:hover{border-color:var(--cyan);color:#fff;background:rgba(57,170,255,.16)}

.chart3d{
  position:relative;width:100%;
  perspective:1000px;perspective-origin:50% 46%;
  display:flex;align-items:center;justify-content:center;
}

/* Everything below sits square on to the viewer. The depth comes from the
   shading across each pipe, not from tipping the chart onto an angle. */

/* --- 8a. the ring --- */
.ring3d{position:relative;width:min(260px,74%);aspect-ratio:1}
.ring3d svg{display:block;width:100%;height:100%;overflow:visible}
.ring3d-track{
  fill:none;stroke:rgba(120,150,190,.20);
  stroke-linecap:round;
}
.ring3d-fill{
  fill:none;stroke-linecap:round;
  stroke-dasharray:var(--dash,0) 100;
  transition:stroke-dasharray 1.5s cubic-bezier(.25,.8,.3,1);
  animation:pipePulse 3.4s ease-in-out infinite;
}
/* the specular line that makes the pipe look round and wet */
.ring3d-sheen{
  fill:none;stroke:rgba(255,255,255,.5);stroke-linecap:round;
  stroke-dasharray:var(--dash,0) 100;
  transition:stroke-dasharray 1.5s cubic-bezier(.25,.8,.3,1);
  animation:sheenPulse 3.4s ease-in-out infinite;
}
@keyframes pipePulse{0%,100%{opacity:.94}50%{opacity:1}}
@keyframes sheenPulse{0%,100%{opacity:.34}50%{opacity:.62}}
.ring3d-readout{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;
}
.ring3d-readout b{
  display:block;font-size:2.7rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:#fff;
  text-shadow:0 0 22px rgba(98,215,255,.45);
}
.ring3d-readout span{display:block;margin-top:6px;color:var(--muted);font-size:.78rem}

/* --- 8b. upright pipes --- */
.bars3d{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(16px,5vw,48px);width:100%;height:280px;
}
.bar3d{display:flex;flex-direction:column;align-items:center;width:clamp(38px,10%,56px);height:100%}
.bar3d-value{
  margin-bottom:10px;color:#fff;font-size:1.05rem;font-weight:800;white-space:nowrap;
}
.bar3d-track{
  position:relative;flex:1;width:100%;
  border-radius:999px;background:rgba(120,150,190,.18);
  display:flex;align-items:flex-end;overflow:hidden;
}
.bar3d-fill{
  width:100%;height:var(--h,0%);border-radius:999px;
  /* dark, bright, dark across the width: a cylinder lit from the front */
  background:linear-gradient(90deg,#1b4f8c 0%,#4fc3ff 32%,#9ae8ff 48%,#6b7ce0 72%,#2a1d63 100%);
  box-shadow:0 0 20px rgba(79,195,255,.42),inset 0 2px 0 rgba(255,255,255,.4);
  transition:height 1.3s cubic-bezier(.25,.8,.3,1);
  animation:pipePulse 3.4s ease-in-out infinite;
}
.bar3d-label{margin-top:14px;color:var(--muted);font-size:.82rem;text-align:center}

/* --- 8c. lying pipes --- */
.slabs3d{display:grid;gap:24px;width:100%}
.slab3d-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px}
.slab3d-head span{color:var(--muted);font-size:.88rem}
.slab3d-head b{color:#fff;font-size:1.05rem;font-weight:800}
.slab3d-track{
  position:relative;height:26px;border-radius:999px;
  background:rgba(120,150,190,.18);overflow:hidden;
}
.slab3d-fill{
  position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);border-radius:999px;
  /* dark, bright, dark down the height: the same cylinder, lying down */
  background:linear-gradient(180deg,#1b4f8c 0%,#4fc3ff 30%,#9ae8ff 46%,#6b7ce0 74%,#2a1d63 100%);
  box-shadow:0 0 20px rgba(79,195,255,.4),inset 2px 0 0 rgba(255,255,255,.35);
  transition:width 1.3s cubic-bezier(.25,.8,.3,1);
  animation:pipePulse 3.4s ease-in-out infinite;
}

/* --- 8d. two counts compared --- */
.compare3d{display:grid;gap:28px;width:100%}
.compare3d .slab3d-head b{font-size:1.6rem}
.compare3d .slab3d-track{height:36px}
.compare3d .slab3d-fill.is-new{
  background:linear-gradient(180deg,#2b1f6d 0%,#7d63e8 30%,#c3b4ff 46%,#5f8fe6 74%,#12315e 100%);
  box-shadow:0 0 22px rgba(146,120,240,.45),inset 2px 0 0 rgba(255,255,255,.35);
}

/* charts hold still for anyone who asked for less motion */
@media(prefers-reduced-motion:reduce){
  .ring3d-fill,.ring3d-sheen,.bar3d-fill,.slab3d-fill{transition:none;animation:none}
  .shield-extrude,.shield-orbit,.shield-glow{animation:none!important}
  .shield-extrude{transform:rotateX(4deg) rotateY(-10deg)}
  .flip-tile-inner,.csc-flip,.csc-ring,.deck-card,.courier-panel{transition:none!important}
  .courier-panel{transform:none;opacity:1;pointer-events:auto;margin-top:0;padding:26px}
  .courier{grid-template-rows:auto;perspective:none}
  .courier .suit,.courier .suit-shadow,.courier-floor{display:none}
  .reel canvas{filter:none}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .tile-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .shield-stage{min-height:420px;order:-1}
  .tile-grid.services{grid-template-columns:1fr}
  .reel-content{padding:40px 28px;grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
  .shield-stage{min-height:330px}
  .shield-extrude{width:min(230px,64vw)}
  .shield-orbit.o1{width:min(300px,86%)}
  .shield-orbit.o2{width:min(238px,68%)}
  .shield-glow{width:min(250px,70%)}
  .tile-grid,.tile-grid.four,.tile-grid.three,.tile-grid.two,.tile-grid.services{grid-template-columns:1fr}
  .flip-tile-inner{min-height:200px}
  .flip-face{padding:22px}
  .tile-art{height:150px}
  .csc-carousel{height:420px}
  .csc-ring{width:min(250px,72vw);height:370px}
  .csc-face{padding:22px 20px}
  .deck-fan{height:400px}
  .deck-card{width:212px;margin-left:-106px;height:330px;padding:22px 20px}
  .courier{grid-template-rows:auto;perspective:none}
  .courier .suit,.courier .suit-shadow,.courier-band{display:none}
  .courier-panel{transform:none;opacity:1;pointer-events:auto;padding:0;margin-top:0}
  .form-shell{padding:20px}
  .form-grid{grid-template-columns:1fr}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .spacer{display:none}
  .form-actions .btn{width:100%}
  .reel-content{padding:30px 20px;grid-template-columns:1fr;gap:24px}
  .reel-legend{padding:18px 18px}
  .bars3d{gap:14px;height:240px}
  .ring3d-readout b{font-size:2.2rem}
  .slab3d-track{height:22px}
  .compare3d .slab3d-track{height:30px}
  .stats-deck,.home-statistics .stats-deck{min-height:680px}
  .stat-slide{padding:24px}
  .stat-chart{min-height:230px}
  .stat-controls{flex-direction:column;align-items:stretch}
  .stat-buttons{flex-wrap:wrap}
  .stat-buttons button{flex:1 1 auto}
}

@media(max-width:400px){
  .csc-ring{width:min(220px,74vw);height:360px}
  .csc-face{padding:20px 18px}
  .csc-card h3{font-size:1.14rem}
}

/* ============ 9. THE 404 CABLE SCENE ============ */
.e404{text-align:center}
.e404-code{
  margin:0;font:900 clamp(74px,15vw,180px)/0.9 var(--mono);letter-spacing:-.04em;
  background:linear-gradient(92deg,var(--cyan),var(--blue) 45%,var(--purple-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(98,215,255,.4));
  transition:filter .5s ease;
}
.e404.dead .e404-code{filter:grayscale(1) brightness(.4)}
.e404-title{margin:6px 0 8px;font-size:clamp(1.5rem,3vw,2.2rem)}
.e404-sub{margin:0 auto;max-width:56ch;color:var(--muted);transition:color .5s ease}
.e404.dead .e404-sub{color:var(--muted-2)}
.e404-stage{position:relative;width:100%;height:340px;margin:6px 0 4px}
.e404-stage svg,.e404-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.e404-stage canvas{pointer-events:none}
.wire{fill:none;stroke:#1e3a5f;stroke-width:9;stroke-linecap:round}
.wire-live{
  fill:none;stroke:url(#cscWire);stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(98,215,255,.85));
}
.wire-dead{stroke:#3a4557!important;filter:none!important}
.wire-end{fill:#9db2c9;cursor:grab}
.wire-end:active{cursor:grabbing}
.wire-end:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wire-end.hot{fill:var(--cyan);filter:drop-shadow(0 0 12px var(--cyan))}
.rat-body{fill:#2b3646;stroke:#46566d;stroke-width:2}
.rat-ear{fill:#3a4759}
.rat-leg{fill:#46566d}
.rat-jaw{fill:#46566d;transform-box:fill-box;transform-origin:left center}
.rat.chomp .rat-jaw{animation:ratChomp .16s ease-in-out infinite}
@keyframes ratChomp{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg)}}
.rat-eye{fill:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan))}
.rat-tail{fill:none;stroke:#46566d;stroke-width:4;stroke-linecap:round}
.rat .rat-leg{transform-box:fill-box;transform-origin:top center;animation:ratScurry .22s ease-in-out infinite alternate}
.rat .rat-leg:nth-of-type(even){animation-delay:.11s}
@keyframes ratScurry{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.e404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}
@media(max-width:640px){
  .e404-stage{height:230px}
  .e404-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .rat .rat-leg,.rat.chomp .rat-jaw{animation:none}
}

/* ============ 10. QUESTIONS ============ */
/* Built on <details>, so every answer is real text in the page: search engines
   and anyone without JavaScript read the whole thing. The name attribute makes
   the group behave as an accordion natively, with no script at all. */
.faq-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:44px;align-items:start}
.faq-group+.faq-group{margin-top:40px}
.faq-group{scroll-margin-top:calc(var(--header-h) + 20px)}
.faq-group-title{
  margin:0 0 16px;font-size:.76rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);
}
.faq-item{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(44,53,67,.9),rgba(30,36,45,.94));
  margin-bottom:12px;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.faq-item:hover{border-color:rgba(98,215,255,.4)}
.faq-item[open]{
  border-color:rgba(98,215,255,.5);
  box-shadow:var(--shadow-2);
  transform:translateY(-1px);
}
.faq-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:19px 22px;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--radius)}
.faq-q{color:#fff;font-size:1.02rem;font-weight:750;line-height:1.45}
.faq-item[open] .faq-q{color:var(--cyan)}
/* a plus that becomes a minus */
.faq-mark{position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:3px}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;
  background:var(--cyan);transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.faq-mark::after{transform:rotate(90deg)}
.faq-item[open] .faq-mark::after{transform:rotate(0)}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.65;max-width:70ch}
.faq-item[open] .faq-a{animation:faqOpen .3s ease}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-side{position:sticky;top:calc(var(--header-h) + 20px)}
.faq-side .contact-point a{color:var(--cyan)}

@media(max-width:960px){
  .faq-layout{grid-template-columns:1fr;gap:34px}
  .faq-side{position:static}
}
@media(max-width:640px){
  .faq-item summary{padding:16px 18px;gap:14px}
  .faq-q{font-size:.96rem}
  .faq-a{padding:0 18px 18px}
}
@media(prefers-reduced-motion:reduce){
  .faq-item,.faq-mark::before,.faq-mark::after{transition:none}
  .faq-item[open] .faq-a{animation:none}
}
/* the services call to action now carries two buttons */
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}
@media(max-width:640px){.cta-actions{width:100%}.cta-actions .btn{width:100%}}

/* ============ SHIELD STAGE BACKDROP ============
   --------------------------------------------------------------------------
   The same glass-tower photograph as the home page hero, blurred, behind the
   shield on the About page. It ties the two pages together without repeating
   the picture sharply, and it stops that panel reading as a flat dark square.

   Two details worth keeping if this is ever edited:

     - The blur lives on a ::before rather than on the stage itself. A filter
       on the stage would blur the shield, the glow and the orbit rings too.
     - The ::before is inset by a negative amount so it overhangs the panel on
       every side. A blur samples pixels from beyond each edge, and when there
       are none it fades to transparent, leaving a pale halo around the border.
       Overhanging pushes that artefact outside the visible area, which the
       overflow:hidden then clips away.
   ------------------------------------------------------------------------ */

.shield-stage.has-backdrop{
  overflow:hidden;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-soft);
}

.shield-stage.has-backdrop::before{
  content:"";
  position:absolute;
  inset:-32px;                 /* overhang, so the blur has pixels to sample */
  background:url("../images/hero-city.jpg") center 45% / cover no-repeat;
  /* Dimmed hard. This sits behind a logo, so it has to stay a texture rather
     than become a picture competing with the mark in front of it. */
  filter:blur(9px) saturate(.8) brightness(.42);
  z-index:0;
  pointer-events:none;
}

/*
 * Lift the shield, its glow and the orbit rings above the backdrop.
 *
 * Only z-index is set here, deliberately. The glow is positioned absolutely
 * and the extrude relatively, and rewriting either would knock the shield off
 * centre; z-index alone applies to both without touching their layout.
 */
.shield-stage.has-backdrop > *{z-index:1}