/* ==========================================================================
   SKYBOUND SCALING - get-started.css
   The Get Started funnel: one page, one job - book the free strategy call.

   The page's argument is "you look average, we make you look like the
   authority", so the page performs it. The hero literally loads as the
   average version - flat grey, default serif, a beveled 2009 button - and a
   scanline sweeps down and re-renders it as the premium brand. That flip is
   the signature; everything after it is disciplined funnel theater.

   Staging: the page alternates dark and light stages. Dark carries the
   confrontation (truth, proof, the close), light carries the clarity (the
   shift, services, testimonials). The header rides the site's existing
   body.on-dark system; get-started.js flips it per stage.

   Interaction rules carried over from the rest of the site: nothing content-
   bearing hides behind hover, reduced motion gets the finished state, no JS
   gets the finished state, and the booking CTA is never more than one
   viewport away (sticky bar).

   Loaded by: /get-started.html only, after main.css (tokens, .cta-book,
   .mono, .rv, header/menu/footer all come from there).

   TABLE OF CONTENTS
   ------------------------------------------------------------------
   01  Stage shells (dark / light)
   02  Hero - average layer, scanline, premium layer
   03  Problem
   04  Shift (emphasis swap)
   05  Services ledger
   06  Proof - before/after slider
   07  Testimonial slots
   08  Why us
   09  Offer + booking chamber (#book)
   10  Urgency close
   11  Sticky bar
   12  Responsive
   13  Reduced motion / no-JS
   ------------------------------------------------------------------ */

/* ============ 01 STAGE SHELLS ============ */
.gs-main{overflow:clip}
.gs-main section{position:relative;padding:clamp(84px,13vh,168px) var(--pad)}

/* Dark stage: solid base first (the opacity guarantee), atmosphere on top. */
.gs-dark{
  background-color:#090B12;
  background-image:
    radial-gradient(92% 64% at 80% -12%, rgba(46,64,255,.17) 0%, transparent 60%),
    radial-gradient(70% 52% at 4% 110%, rgba(255,77,0,.08) 0%, transparent 62%),
    linear-gradient(180deg, #0B0D14 0%, #090B12 100%);
  color:#EAF0FF;
}
/* fine grain, same recipe as the footer card - depth without banding */
.gs-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:200px 200px;opacity:.05;mix-blend-mode:overlay;
}
.gs-dark > *{position:relative;z-index:1}

/* readable accents on ink: the brand blue and orange, lifted for contrast */
.gs-dark{--acl:#8B99FF;--aco:#FF7A3D}

/* dark-stage buttons: paper pill so the site's fill/arrow choreography holds */
.gs-dark .cta-book{--cta-bg:#fff;--cta-fg:var(--ink);--cta-fill:var(--blue);--cta-token:rgba(10,10,12,.10);border-color:#fff}
.gs-dark .cta-book.is-accent{--cta-bg:var(--orange);--cta-fg:#fff;--cta-fill:var(--blue);--cta-token:rgba(255,255,255,.22);border-color:var(--orange)}

/* shared type */
.gs-kicker{
  display:block;margin-bottom:clamp(16px,2.4vh,26px);
  color:rgba(10,10,12,.6);
}
.gs-dark .gs-kicker{color:rgba(234,240,255,.62)}
.gs-h2{
  margin:0 0 clamp(18px,3vh,30px);
  font-weight:900;font-variation-settings:'wdth' 120;
  font-size:clamp(30px,4.6vw,64px);
  line-height:.96;letter-spacing:-.03em;text-transform:uppercase;
}
.gs-body{
  max-width:62ch;
  font-size:clamp(16px,1.25vw,19px);line-height:1.65;
  color:rgba(10,10,12,.74);
}
.gs-body p + p{margin-top:1.1em}
.gs-dark .gs-body{color:rgba(234,240,255,.76)}
.gs-cta-row{margin-top:clamp(30px,4.5vh,48px);display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.gs-micro{margin-top:14px;color:rgba(234,240,255,.55)}

/* ============ 02 HERO ============ */
.gs-hero{
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:calc(var(--header-h) + clamp(28px,5vh,64px));
}

/* --- the average layer: the "before" the whole pitch is about.
   Hidden by default; get-started.js reveals it only when it can also run the
   transformation, so no-JS and reduced-motion users land on the finished
   brand. Everything in it is aria-hidden duplicate content. --- */
.gs-hero-avg{
  display:none;
  position:absolute;inset:0;z-index:3;
  background:#E9E7E2;
  color:#4A4A48;
  padding:calc(var(--header-h) + 60px) var(--pad) 60px;
}
.gs-anim .gs-hero-avg{display:block}
.gs-avg-eyebrow{font-family:Verdana,Arial,sans-serif;font-size:10px;letter-spacing:.02em;color:#8A8A86;text-transform:uppercase;margin:0 0 18px}
.gs-avg-head{
  font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:clamp(24px,3.6vw,44px);line-height:1.18;letter-spacing:0;
  color:#3C3C3A;max-width:26ch;margin:0 0 16px;
}
.gs-avg-sub{font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#6E6E6A;max-width:60ch;margin:0 0 22px}
.gs-avg-btn{
  display:inline-block;padding:9px 18px;
  font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;color:#3A3A38;
  background:linear-gradient(180deg,#F2F1EE 0%,#D8D6D0 100%);
  border:1px solid #A9A7A0;border-radius:3px;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.18);
}

/* the scanline that re-renders the page */
.gs-scan{
  display:none;
  position:absolute;left:0;right:0;top:0;height:2px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, var(--blue) 18%, #9FB0FF 50%, var(--blue) 82%, transparent 100%);
  box-shadow:0 0 24px 4px rgba(70,92,255,.55), 0 0 80px 12px rgba(46,64,255,.25);
}
.gs-anim .gs-scan{display:block}

/* --- the premium layer --- */
.gs-hero-pro{position:relative;z-index:4;width:100%}
.gs-anim .gs-hero-pro{clip-path:inset(0 0 100% 0)}
.gs-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(234,240,255,.62);
}
.gs-eyebrow::before{content:"";width:26px;height:1px;background:var(--acl);flex:none}
.gs-display{
  margin:clamp(18px,3vh,30px) 0 0;
  text-transform:uppercase;
}
.gs-display .gs-l1{
  display:block;
  font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(34px,5.8vw,92px);
  line-height:.94;letter-spacing:-.035em;
  max-width:16.5ch;
}
.gs-display .gs-l1 em{font-style:normal;color:var(--acl)}
.gs-display .gs-l2{
  display:block;margin-top:clamp(12px,1.8vh,20px);
  font-weight:600;font-variation-settings:'wdth' 104;
  font-size:clamp(15px,1.7vw,26px);
  line-height:1.25;letter-spacing:.01em;
  color:rgba(234,240,255,.44);
  max-width:44ch;
}
.gs-hero .gs-body{margin-top:clamp(20px,3vh,32px);max-width:58ch}

/* ============ 03 PROBLEM ============ */
.gs-problem{padding-top:clamp(40px,7vh,90px)}
.gs-problem .gs-h2{max-width:14ch}
.gs-fix{
  margin:clamp(30px,5vh,52px) 0 0;
  font-weight:900;font-variation-settings:'wdth' 120;
  font-size:clamp(28px,4.4vw,64px);
  line-height:1;letter-spacing:-.03em;text-transform:uppercase;
}
.gs-fix b{font-weight:900;color:var(--aco)}
.gs-avg-word{color:rgba(234,240,255,.42)}

/* ============ 04 SHIFT ============ */
.gs-shift{background:transparent}
.gs-shift-title{
  margin:0;
  font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(30px,5vw,78px);
  line-height:1;letter-spacing:-.035em;text-transform:uppercase;
}
.gs-shift-title .gs-shift-a{display:block;color:var(--ink)}
.gs-shift-title .gs-shift-b{display:block;margin-top:.18em}
.gs-shift-title .gs-shift-b em{font-style:normal;color:var(--blue)}
.gs-shift .gs-body{margin-top:clamp(28px,4.5vh,46px)}
.gs-shift-rule{height:1px;background:var(--line);margin-bottom:clamp(28px,4.5vh,46px)}

/* ============ 05 SERVICES LEDGER ============ */
.gs-svc-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-bottom:clamp(26px,4vh,44px);
}
.gs-svc-head .gs-h2{margin:0}
.gs-svc-count{color:rgba(10,10,12,.6);flex:none}
.gs-svc{
  --ac:var(--blue);
  display:grid;grid-template-columns:clamp(64px,7vw,110px) minmax(0,.9fr) minmax(0,1.1fr);
  align-items:baseline;column-gap:clamp(18px,2.6vw,44px);
  padding:clamp(20px,3.2vh,34px) 0;
  border-top:1px solid var(--line);
}
.gs-svc:nth-child(even){--ac:var(--orange)}
.gs-svc:last-of-type{border-bottom:1px solid var(--line)}
.gs-svc-num{
  font-weight:900;font-variation-settings:'wdth' 125;
  font-size:clamp(30px,3.4vw,56px);line-height:.8;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:1px rgba(10,20,40,.30);
}
.gs-svc-name{
  margin:0;display:flex;align-items:center;gap:12px;
  font-weight:800;font-variation-settings:'wdth' 116;
  font-size:clamp(20px,2.3vw,34px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;
}
.gs-svc-name::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.gs-svc-out{margin:0;max-width:52ch;font-size:clamp(14px,1.1vw,17px);line-height:1.6;color:rgba(10,10,12,.7)}

/* ============ 06 PROOF - BEFORE/AFTER ============ */
.gs-proof-sub{margin:0 0 clamp(26px,4vh,44px);color:rgba(234,240,255,.62)}
.gs-ba{--pos:50%;max-width:1080px}
.gs-ba-frame{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
  border-radius:clamp(14px,1.6vw,22px);
  border:1px solid rgba(238,242,247,.14);
  background:#10131C;
  box-shadow:0 60px 120px -50px rgba(46,64,255,.35), 0 24px 50px -28px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.08);
  cursor:ew-resize;touch-action:none;
}
.gs-ba-frame:has(.gs-ba-range:focus-visible){outline:2px solid var(--acl);outline-offset:4px}
.gs-ba-half{position:absolute;inset:0}
/* the BEFORE half sits on top, clipped at the handle */
.gs-ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.gs-ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:4;width:0;pointer-events:none;
}
.gs-ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.45)}
.gs-ba-grip{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:5px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  font-weight:900;font-size:13px;letter-spacing:0;
}
.gs-ba-grip::before,.gs-ba-grip::after{content:"";width:0;height:0;border-style:solid}
.gs-ba-grip::before{border-width:5px 7px 5px 0;border-color:transparent var(--ink) transparent transparent}
.gs-ba-grip::after{border-width:5px 0 5px 7px;border-color:transparent transparent transparent var(--ink)}
.gs-ba-range{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;
}
.no-js .gs-ba-range{display:none}
.gs-ba-chip{
  position:absolute;top:14px;z-index:3;
  padding:7px 12px;border-radius:999px;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.gs-ba-chip-before{left:14px;background:rgba(233,231,226,.92);color:#55544F}
.gs-ba-chip-after{right:14px;background:rgba(10,10,12,.78);color:#fff;border:1px solid rgba(255,255,255,.25)}

/* --- CSS-drawn placeholder mocks: abstract site skeletons, no fake data.
   The BEFORE half is a dated flat document; the AFTER half is the brand's
   dark premium language. Real client screenshots drop into .gs-ba-half. --- */
.gs-mock{position:absolute;inset:0;padding:5% 6%}
.gs-mock-before{background:#E9E7E2}
.gs-mock-before .m-bar{background:#C9C6BE;border-radius:2px}
.gs-mock-before .m-nav{display:flex;gap:2.4%;align-items:center;height:6%;margin-bottom:6%}
.gs-mock-before .m-nav .m-bar{height:38%;width:9%}
.gs-mock-before .m-nav .m-logo{width:14%;height:56%;background:#B4B1A8}
.gs-mock-before .m-hero{width:64%;height:9%;background:#A8A59C;margin-bottom:3.4%}
.gs-mock-before .m-line{height:3.2%;margin-bottom:2.2%}
.gs-mock-before .m-line.w1{width:82%}.gs-mock-before .m-line.w2{width:74%}.gs-mock-before .m-line.w3{width:78%}.gs-mock-before .m-line.w4{width:52%}
.gs-mock-before .m-img{
  position:absolute;right:6%;top:22%;width:30%;height:34%;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #B7B4AB calc(50% - 1px), #B7B4AB calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left,  transparent calc(50% - 1px), #B7B4AB calc(50% - 1px), #B7B4AB calc(50% + 1px), transparent calc(50% + 1px)),
    #DCDAD3;
  border:1px solid #B7B4AB;
}
.gs-mock-before .m-btn{
  width:18%;height:6.4%;margin-top:4%;
  background:linear-gradient(180deg,#F2F1EE 0%,#D0CEC7 100%);
  border:1px solid #A9A7A0;border-radius:3px;
}
.gs-mock-before .m-link{height:2.6%;width:26%;background:#3D5FBF;opacity:.55;margin-top:5%;border-radius:1px}

.gs-mock-after{
  background:
    radial-gradient(80% 60% at 78% 0%, rgba(46,64,255,.30) 0%, transparent 60%),
    radial-gradient(50% 40% at 8% 100%, rgba(255,77,0,.14) 0%, transparent 60%),
    linear-gradient(165deg,#12151F 0%,#0A0C13 100%);
}
.gs-mock-after .m-bar{background:rgba(255,255,255,.92);border-radius:99px}
.gs-mock-after .m-nav{display:flex;gap:2.4%;align-items:center;height:6%;margin-bottom:7%}
.gs-mock-after .m-nav .m-logo{width:11%;height:44%;background:#fff;border-radius:99px}
.gs-mock-after .m-nav .m-bar{height:26%;width:7%;opacity:.5}
.gs-mock-after .m-nav .m-pill{margin-left:auto;width:12%;height:66%;background:var(--orange);border-radius:99px}
.gs-mock-after .m-head{width:56%;height:8.4%;margin-bottom:3%;background:#fff;border-radius:99px}
.gs-mock-after .m-head.h2{width:42%}
.gs-mock-after .m-line{height:2.6%;margin-top:2.6%;opacity:.4}
.gs-mock-after .m-line.w1{width:44%}.gs-mock-after .m-line.w2{width:38%}
.gs-mock-after .m-cta{width:20%;height:7%;margin-top:5%;background:var(--blue);border-radius:99px;box-shadow:0 10px 34px rgba(46,64,255,.5)}
.gs-mock-after .m-glass{
  position:absolute;right:6%;top:18%;width:32%;height:46%;
  border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.gs-mock-after .m-dot{position:absolute;right:10%;bottom:16%;width:10px;height:10px;border-radius:50%;background:var(--orange)}

.gs-ba-note{margin:14px 0 0;color:rgba(234,240,255,.42)}
.gs-proof-cap{
  margin:clamp(24px,4vh,40px) 0 0;max-width:46ch;
  font-size:clamp(17px,1.5vw,22px);line-height:1.5;font-weight:600;
  color:rgba(234,240,255,.85);
}

/* ============ 07 TESTIMONIAL SLOTS ============ */
.gs-tstm-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(26px,4vh,44px);
}
.gs-tstm{
  position:relative;min-height:clamp(180px,24vh,250px);
  border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(228,234,242,.55) 100%);
  padding:22px 24px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.gs-tstm::before{
  content:"\201C";position:absolute;top:-6px;left:14px;
  font-weight:900;font-size:120px;line-height:1;color:rgba(10,20,40,.08);
}
.gs-tstm-slot{color:rgba(10,10,12,.45)}
.gs-precta{
  margin:clamp(40px,6vh,64px) 0 0;text-align:center;
  font-weight:900;font-variation-settings:'wdth' 120;
  font-size:clamp(26px,3.8vw,54px);letter-spacing:-.03em;line-height:1;text-transform:uppercase;
}
.gs-tstm-wrap .gs-cta-row{justify-content:center}

/* ============ 08 WHY US ============ */
.gs-why .gs-body{max-width:66ch}
.gs-pull{
  margin:clamp(30px,5vh,52px) 0 0;
  font-weight:900;font-variation-settings:'wdth' 118;
  font-size:clamp(26px,3.8vw,56px);
  line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;
  max-width:22ch;
}
.gs-pull em{font-style:normal;color:var(--blue)}

/* ============ 09 OFFER + BOOKING (#book) ============ */
.gs-book{scroll-margin-top:60px}
.gs-book-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(36px,4.5vw,84px);row-gap:44px;
  align-items:start;
}
.gs-checks{list-style:none;margin:clamp(24px,4vh,38px) 0 0;display:flex;flex-direction:column;gap:16px;max-width:56ch}
.gs-checks li{display:flex;align-items:flex-start;gap:14px;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:rgba(234,240,255,.85)}
.gs-checks .ck{
  flex:none;width:26px;height:26px;margin-top:1px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;
  box-shadow:0 6px 18px rgba(46,64,255,.45);
}
.gs-embed{
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(238,242,247,.16);
  background:#fff;
  box-shadow:0 60px 120px -48px rgba(46,64,255,.4), 0 24px 56px -28px rgba(0,0,0,.55);
}
.gs-embed iframe{display:block;width:100%;height:clamp(560px,72vh,720px);border:0}

/* ============ 10 URGENCY CLOSE ============
   The close runs the same stripe-flow chamber as the home page manifesto:
   identical CSS gradient underneath (the paint-behind and the no-WebGL
   fallback) and the identical shader on top, via the shared flow-field.js.
   Everything in here is set light explicitly rather than inherited, because
   the type sits over a moving field and this is the last thing a visitor
   reads before booking. */
.gs-close{
  /* byte-identical to #manifesto's field, so the two chambers match */
  background:
    radial-gradient(92% 72% at 80% 6%,  rgba(34,48,254,.20) 0%, rgba(34,48,254,0) 58%),
    radial-gradient(74% 60% at 10% 92%, rgba(27,47,216,.15) 0%, rgba(27,47,216,0) 60%),
    linear-gradient(180deg,#05070D 0%,#070A14 38%,#0A0F1F 74%,#060810 100%);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
/* the shader canvas, matching #man-flow's treatment */
#gs-flow{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s ease;
}
#gs-flow.is-live{opacity:1}
/* A soft scrim between the field and the words. The shader's own vignette
   dims the edges, not the middle, and the copy sits in the middle - this is
   what guarantees the close reads at full contrast on every frame. */
.gs-close::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 58% at 50% 50%, rgba(3,5,14,.72) 0%, rgba(3,5,14,.34) 55%, rgba(3,5,14,0) 100%);
}
.gs-close > *{position:relative;z-index:2}
/* The atmosphere is the exception to the rule above. It has to stay absolute:
   this file loads after main.css, so `.gs-close > *` was winning the tie on
   specificity and turning .man-atmo relative, which collapsed it to zero
   height. A zero-height canvas never intersects, so the shader's observer
   never fired and the field silently never started. */
.gs-close .man-atmo{position:absolute;inset:0;z-index:0}
/* the grain layer must clear the shader, not sit under it */
.gs-close::after{z-index:3}

.gs-close .gs-h2{
  margin-inline:auto;max-width:19ch;
  font-size:clamp(32px,5.4vw,84px);
  color:#fff;
  text-shadow:0 2px 30px rgba(3,5,14,.55);
}
.gs-close .gs-body{
  margin-inline:auto;text-align:center;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 18px rgba(3,5,14,.6);
}
.gs-close .gs-micro{color:rgba(255,255,255,.78)}
.gs-close .gs-cta-row{justify-content:center}
.gs-cta-xl{padding:21px 26px 21px 40px;font-size:14px}
.gs-cta-xl .cta-token{width:38px;height:38px}

/* ============ 11 STICKY BAR ============ */
.gs-bar{
  position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;
  transform:translate(-50%,140%);
  display:flex;align-items:center;gap:18px;
  width:min(660px, calc(100% - 28px));
  padding:10px 10px 10px 24px;
  border-radius:999px;
  background:rgba(12,14,22,.88);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(238,242,247,.14);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.gs-bar.is-on{transform:translate(-50%,0)}
.gs-bar-text{margin:0;flex:1;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;color:#EAF0FF}
.gs-bar .cta-book{--cta-bg:var(--orange);--cta-fg:#fff;--cta-fill:var(--blue);--cta-token:rgba(255,255,255,.22);border-color:var(--orange);flex:none;padding:12px 14px 12px 22px;font-size:11px}

/* ============ 12 RESPONSIVE ============ */
@media (max-width:980px){
  .gs-book-grid{grid-template-columns:1fr}
  .gs-svc{grid-template-columns:clamp(52px,8vw,80px) minmax(0,1fr);row-gap:10px}
  .gs-svc-out{grid-column:2}
}
@media (max-width:640px){
  .gs-tstm-grid{grid-template-columns:1fr}
  .gs-display .gs-l1{font-size:clamp(30px,10vw,48px)}
  .gs-shift-title{font-size:clamp(26px,8vw,44px)}
  .gs-bar{gap:12px;padding-left:18px}
  .gs-bar-text{font-size:11px}
  /* long CTA labels may wrap on narrow screens instead of overflowing */
  .gs-main .cta-book{white-space:normal;text-align:left;line-height:1.35}
  .gs-main .cta-book .cta-token{flex:none}
}

/* ============ 13 REDUCED MOTION / NO-JS ============
   The average hero layer, the scanline, and the sticky bar's slide are all
   gated behind JS classes, so without JS the page is simply the finished
   premium page. Reduced motion keeps the slider usable but kills easing. */
@media (prefers-reduced-motion:reduce){
  .gs-bar{transition:none}
  .gs-hero-avg,.gs-scan{display:none!important}
  .gs-hero-pro{clip-path:none!important}
}