/* ============================================================
   GRIDPOINT DIGITAL SOLUTIONS: global theme layer
   White and navy with orange accents (official logo palette).
   Loaded last on every page, so it overrides the page styles.
   Dark sections (hero, footer, client voices, final CTA) switch
   back to dark tokens locally through .gp-dark rules below.
   ============================================================ */

/* ---------- Fonts: self-hosted, latin subset, variable weight ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 900;font-display:swap;src:url('ASSETS/fonts/archivo-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('ASSETS/fonts/manrope-latin.woff2') format('woff2')}
/* old font names used in page styles now map to the self-hosted files (no Google Fonts request) */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600 900;font-display:swap;src:url('ASSETS/fonts/archivo-latin.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300 500;font-display:swap;src:url('ASSETS/fonts/manrope-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url('ASSETS/fonts/manrope-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('ASSETS/fonts/instrumentserif-latin.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --gp-navy:#011134;
  --gp-navy-2:#0A1F4D;
  --gp-navy-3:#12306E;
  --gp-royal:#0036E6;
  --gp-blue:#0095FE;
  --gp-cyan:#01EAFE;
  --gp-orange:#FE8B03;
  --gp-orange-deep:#FE5900;
  --gp-orange-text:#B4470A;        /* orange that passes AA on white AND on the tinted chips (#FFF1E2, #F4F7FD) */
  --gp-bg:#FFFFFF;
  --gp-bg-soft:#F4F7FC;
  --gp-line:#E1E7F2;
  --gp-text:#0B1B3F;
  --gp-text-2:#46536E;
  --gp-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --gp-body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --gp-serif:'Instrument Serif',Georgia,serif;
  --gp-ease:cubic-bezier(.22,1,.36,1);

  /* page tokens used by every page's own CSS, flipped to the light theme */
  --deep-space:#FFFFFF !important;
  --white:var(--gp-text) !important;
  --muted-blue:var(--gp-text-2) !important;
  --muted-ink:#5B6782 !important;
  --card-dark:#FFFFFF !important;
  --card-border:var(--gp-line) !important;
  --cobalt-shade:#DDE5F3 !important;
  --klein-blue:var(--gp-royal) !important;
  --amber-gold:var(--gp-orange-text) !important;
  --light-bg:var(--gp-bg-soft) !important;
  --light-card:#FFFFFF !important;
  --light-border:var(--gp-line) !important;
  --mild-gold:#FFF4E6 !important;
  --mild-gold-card:#FFE9CF !important;
  --font-head:var(--gp-display) !important;
  --font-body:var(--gp-body) !important;
  --text-primary:var(--gp-text) !important;
  --text-secondary:var(--gp-text-2) !important;
  --text-muted:#5F6B85 !important;
  --accent:var(--gp-orange-text) !important;
}

/* Dark sections: restore dark tokens inside them */
#hero,#footer,footer,#testimonials,#cta-final,.gp-dark,.case-card:has(.case-overlay),.article-hero,#cs-hero,#cookieBanner,.svc-section,.ai-visual,#sv-hero,.ph,.gp-cta,.hpin{
  --deep-space:var(--gp-navy) !important;
  --white:#FFFFFF !important;
  --muted-blue:#C9D6F0 !important;
  --muted-ink:#9FB0D0 !important;
  --card-dark:var(--gp-navy-2) !important;
  --card-border:rgba(255,255,255,.12) !important;
  --amber-gold:var(--gp-orange) !important;
  --text-primary:#FFFFFF !important;
  --text-secondary:#C9D6F0 !important;
  --text-muted:#9FB0D0 !important;
  --accent:var(--gp-orange) !important;
  --gp-text:#FFFFFF;
  --gp-text-2:#C9D6F0;
  color:#FFFFFF;
}

/* ---------- Base ---------- */
html,body{background:var(--gp-bg) !important;color:var(--gp-text)}
body{font-family:var(--gp-body);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased}
main,article,aside,section,.section,.section-dark,.bg-deep,.bg-dark,.trust-bar,#trust-bar{background-color:transparent !important;background-image:none !important}
section,header,footer,#hero,main{position:relative;z-index:1}
p,li{color:inherit}
::selection{background:var(--gp-orange);color:var(--gp-navy)}

h1,h2,h3,h4,.h2,.section-title,.hero-h1{font-family:var(--gp-display) !important;color:var(--gp-text);font-style:normal}
h1,h2{font-weight:800;letter-spacing:-.03em;line-height:1.02}
h2{font-size:clamp(32px,4.4vw,58px)}
h3{font-weight:700;letter-spacing:-.01em}
h2 em,h2 i,h1 em{font-family:var(--gp-serif) !important;font-style:italic;font-weight:400;color:var(--gp-royal);letter-spacing:-.01em}
.gp-dark h2 em,#testimonials h2 em,#cta-final h2 em,#hero h1 em{color:var(--gp-orange)}

/* Section rhythm: alternate soft tint behind every second section for structure */
main > section:nth-of-type(even):where(:not(#hero):not(#testimonials):not(#cta-final)),
body > section:nth-of-type(even):where(:not(#hero):not(#testimonials):not(#cta-final)){background:var(--gp-bg-soft) !important}

/* Cards */
.card,.feature-card,.case-card,.service-card,.pricing-card,[class*="card"]:not([class*="card-wrap"]):not(.stack-card):not([class*="ecard"]):not(.rs-card):not(.fx-card):not(.hpin-card):not(.pw-card):not(.ind-card){
  background-color:#FFFFFF;
  border-color:var(--gp-line) !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(1,17,52,.04),0 12px 32px -18px rgba(1,17,52,.18);
  color:var(--gp-text);
}
[class*="card"]:not([class*="ecard"]):not(.rs-card):not(.fx-card):not(.hpin-card):not(.pw-card):not(.ind-card):hover{border-color:#C8D3EA !important}
.gp-dark [class*="card"],#footer [class*="card"],#cta-final [class*="card"],.ph [class*="card"]{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12) !important;box-shadow:none;color:#fff}

/* ---------- Background bubbles (kept, recoloured for white) ---------- */
body::before{
  content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 12% 22%, rgba(0,149,254,.10), transparent 60%),
    radial-gradient(42vw 42vw at 88% 30%, rgba(254,139,3,.08), transparent 60%),
    radial-gradient(46vw 46vw at 55% 85%, rgba(0,54,230,.07), transparent 60%);
  filter:blur(40px);
  animation:gp-aurora 32s ease-in-out infinite alternate;
}
body::after{content:none !important}
@keyframes gp-aurora{
  0%  {transform:translate(0,0) scale(1)}
  50% {transform:translate(3%,-2%) scale(1.06)}
  100%{transform:translate(-3%,2%) scale(1.03)}
}

/* ---------- Navigation: white bar, navy links ---------- */
#navbar,#navbar.scrolled,#navbar:not(.scrolled),.navbar{background:rgba(255,255,255,.94) !important;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--gp-line) !important}
#navbar.scrolled{box-shadow:0 10px 30px -18px rgba(1,17,52,.25) !important;border:1px solid var(--gp-line) !important}
.nav-links a{color:var(--gp-text) !important;font-family:var(--gp-body);font-weight:600}
.nav-links a:hover{color:var(--gp-royal) !important;background:rgba(0,54,230,.06) !important}
.nav-links a.active{color:var(--gp-royal) !important;background:rgba(0,54,230,.08) !important;border-color:transparent !important;box-shadow:none !important}
.hamburger span,.nav-toggle span,.menu-toggle span{background:var(--gp-text) !important}
.mobile-menu{background:#FFFFFF !important}
.mobile-menu .nav-links a{color:var(--gp-text) !important;border-bottom-color:var(--gp-line) !important}
.theme-toggle{display:none !important}
.lang-switcher button,.lang-btn,[class*="lang"] > button{color:var(--gp-text) !important;border-color:var(--gp-line) !important;background:#fff !important}

/* ---------- Buttons ---------- */
.btn-gold,.btn-blue{
  background:linear-gradient(135deg,var(--gp-orange),var(--gp-orange-deep)) !important;
  color:var(--gp-navy) !important;border:0 !important;border-radius:999px !important;
  font-family:var(--gp-body) !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;font-size:15px !important;
  box-shadow:0 10px 24px -12px rgba(254,89,0,.6);
  transition:transform .25s var(--gp-ease),box-shadow .25s var(--gp-ease) !important;
}
.btn-gold::before,.btn-blue::before,.btn-ghost::before{display:none !important}
.btn-gold:hover,.btn-blue:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(254,89,0,.7);color:var(--gp-navy) !important}
.btn-ghost{
  background:transparent !important;color:var(--gp-text) !important;border:1.5px solid rgba(1,17,52,.25) !important;border-radius:999px !important;
  font-family:var(--gp-body) !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;font-size:15px !important;
  transition:transform .25s var(--gp-ease),border-color .25s,background .25s !important;
}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--gp-navy) !important;background:rgba(1,17,52,.04) !important}
#hero .btn-ghost,.gp-dark .btn-ghost,#footer .btn-ghost,#cta-final .btn-ghost,#testimonials .btn-ghost{color:#fff !important;border-color:rgba(255,255,255,.45) !important}
#hero .btn-ghost:hover,.gp-dark .btn-ghost:hover,#cta-final .btn-ghost:hover{background:rgba(255,255,255,.1) !important;border-color:#fff !important}

/* ---------- Eyebrows and small labels ---------- */
.eyebrow,.section-eyebrow,.section-label,.label,.tag{font-family:var(--gp-body) !important;letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:700;color:var(--gp-orange-text)}
.gp-dark .eyebrow,#hero .eyebrow,#testimonials .eyebrow,#cta-final .eyebrow{color:var(--gp-orange)}

/* ---------- Hero (homepage): normal, clean, film visible ---------- */
#hero{background:var(--gp-navy) !important;min-height:100svh;display:flex;align-items:center}
#hero .hero-content{position:relative;z-index:3;padding-top:calc(var(--nav-h,72px) + 40px);padding-bottom:110px}
#hero .hero-content::before,#hero .hero-content::after{content:none !important}
#hero .hero-grid-mesh,#hero .hero-spotlight{display:none !important}
.hero-eyebrow{font-family:var(--gp-body) !important;font-size:13px !important;letter-spacing:.16em !important;text-transform:uppercase;font-weight:700;color:var(--gp-orange) !important;display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.hero-h1{
  font-family:var(--gp-display) !important;font-weight:800 !important;color:#fff !important;
  font-size:clamp(40px,5.6vw,84px) !important;line-height:1 !important;letter-spacing:-.035em !important;
  margin-bottom:22px;
}
.hero-h1 span{font-style:normal;background:none !important;-webkit-text-fill-color:currentColor !important;color:var(--gp-orange) !important;animation:none !important}
.hero-h1 em{font-family:var(--gp-serif) !important;font-style:italic;font-weight:400;color:var(--gp-orange) !important;letter-spacing:-.01em}
.hero-sub{font-family:var(--gp-body) !important;font-size:clamp(16px,1.4vw,19px) !important;line-height:1.6;color:rgba(255,255,255,.86) !important;max-width:56ch;margin-bottom:32px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-tilt-inner{transform:none !important}
/* rotating headline */
.gp-rot{display:block;position:relative}
.gp-rot-item{display:block}
.gp-rot .ch{display:inline-block;transform:translateY(105%);opacity:0;transition:transform .7s var(--gp-ease),opacity .5s;transition-delay:calc(var(--d)*18ms)}
.gp-rot-line{display:block;overflow:hidden;padding-bottom:.08em}
.gp-rot-item.on .ch{transform:none;opacity:1}
.gp-rot-item.out .ch{transform:translateY(-105%);opacity:0;transition-delay:calc(var(--d)*10ms)}
.gp-rot-item:not(.on){position:absolute;inset:0}
/* scroll cue */
.hero-scroll{position:absolute !important;bottom:28px;left:50%;transform:translateX(-50%);z-index:4;width:28px;height:46px;border:1.5px solid rgba(255,255,255,.5) !important;border-radius:20px;display:block !important;background:none !important}
.hero-scroll > *{display:none !important}
.hero-scroll::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--gp-orange);animation:gp-wheel 1.8s var(--gp-ease) infinite}
@keyframes gp-wheel{0%{transform:translateY(0);opacity:1}80%{transform:translateY(16px);opacity:0}100%{opacity:0}}
.hero-overlay-bottom{display:none !important}
.hero-poster{display:none}
video{filter:none}

/* ---------- Footer: navy ---------- */
#footer,footer{background:var(--gp-navy) !important;color:#fff}
#footer a,footer a{color:#C9D6F0}
#footer a:hover,footer a:hover{color:#fff}
.footer-wordmark text,.footer-wordmark{fill:rgba(255,255,255,.06) !important;color:rgba(255,255,255,.06) !important}
#cta-final{background:var(--gp-navy) !important}

/* ---------- Back to top ---------- */
#gp-scroll-top{background:var(--gp-navy) !important;border:1px solid rgba(255,255,255,.15) !important;box-shadow:0 12px 30px -12px rgba(1,17,52,.5) !important}
#gp-scroll-top svg,#gp-scroll-top path,#gp-scroll-top polyline{stroke:#fff !important;color:#fff !important}
#gp-scroll-top:hover{background:var(--gp-royal) !important}

/* ---------- Forms ---------- */
input,textarea,select{background:#FFFFFF !important;color:var(--gp-text) !important;border:1px solid #CBD5E6 !important}
input::placeholder,textarea::placeholder{color:#7A8499 !important}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gp-royal) !important;outline-offset:1px;border-color:var(--gp-royal) !important}
:focus-visible{outline:2px solid var(--gp-royal);outline-offset:2px}

/* ---------- Scroll progress and cursor ---------- */
.gp-scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--gp-orange),var(--gp-orange-deep));z-index:9998;transition:width .1s linear}
.gp-cursor{display:none !important}
body,a,button,input,textarea,select{cursor:auto}
a,button{cursor:pointer}

/* Scroll-reveal */
.gp-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--gp-ease),transform .8s var(--gp-ease)}
.gp-reveal.gp-in{opacity:1;transform:none}


/* ---------- Mobile ---------- */
@media (max-width:640px){
  .hero-h1{font-size:clamp(36px,10.5vw,52px) !important}
  #hero .hero-content{padding-bottom:90px}
  .hero-ctas .btn-gold,.hero-ctas .btn-ghost{width:100%;justify-content:center}
  section{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px}
  .hero-scroll{display:none !important}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  .gp-reveal{opacity:1;transform:none;transition:none}
  .gp-rot .ch{transition:none}
  .hero-scroll::after{animation:none}
}

/* foreground colour as RGB, for converted tints and borders */
:root{--gp-fg-rgb:11,27,63}
#hero,#footer,footer,#testimonials,#cta-final,.gp-dark,.case-card:has(.case-overlay),.article-hero,#cs-hero,#cookieBanner,.svc-section,.ai-visual,#sv-hero,.ph,.gp-cta,.hpin{--gp-fg-rgb:255,255,255}

/* Case study photo cards: photo with dark overlay, white text */
.case-card:has(.case-overlay){background-color:var(--gp-navy) !important;border:0 !important}
.case-card .case-name{color:#fff !important}

/* ---------- Client voices: 3D card stack (homepage) ---------- */
#testimonials.voices{background:var(--gp-navy) !important;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.voices-grid{display:grid;gap:48px;align-items:center}
@media (min-width:960px){.voices-grid{grid-template-columns:.85fr 1.15fr;gap:80px}}
.voices-head .h2{color:#fff !important;margin:14px 0 16px;max-width:16ch}
.voices-sub{color:#C9D6F0;margin-bottom:28px;font-size:17px}
.stack-ctrl{display:flex;gap:10px}
.stack-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.stack-btn:hover{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy)}
.stack-progress{margin-top:22px;width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}
.stack-progress i{display:block;height:100%;background:var(--gp-orange);transform-origin:0 50%;transform:scaleX(0)}
.stack{position:relative;height:400px;perspective:1400px}
.stack-card{
  position:absolute;inset:0;margin:0;padding:clamp(26px,4vw,44px);border-radius:26px;
  background:#FFFFFF;color:var(--gp-navy);display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  transition:transform .8s var(--gp-ease),opacity .8s var(--gp-ease),filter .8s;transform-origin:50% 100%;
}
.stack-stars{color:var(--gp-orange);letter-spacing:.2em;font-size:18px;margin:0}
.stack-card blockquote{margin:0;font-family:var(--gp-display);font-weight:700;font-size:clamp(19px,2vw,26px);line-height:1.3;letter-spacing:-.015em;color:var(--gp-navy)}
.stack-card figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--gp-line);padding-top:16px}
.stack-card figcaption strong{font-size:16px;color:var(--gp-navy)}
.stack-card figcaption span{font-size:14px;color:var(--gp-orange-text);font-weight:600}
/* without JS, or with reduced motion before JS runs: list the cards */
html:not(.gp-stack-on) .stack{height:auto;display:grid;gap:14px}
html:not(.gp-stack-on) .stack-card{position:relative}
@media (max-width:640px){.stack{height:460px}.stack-card blockquote{font-size:18px}}

/* Photo headers on articles and case studies: white text on the dark photo */
.article-hero,#cs-hero{background-color:var(--gp-navy) !important}
.article-hero h1,#cs-hero h1{color:#fff !important}

/* ---------- Contrast fixes found by the automated scan ---------- */
#cookieBanner{background:var(--gp-navy) !important;border-top:1px solid rgba(255,255,255,.12) !important}
#cookieBanner .cookie-text strong{color:#fff !important}
#cookieBanner .cookie-text a{color:var(--gp-orange) !important}
/* white text on solid coloured pills and badges */
[class*="badge-"],.related-card-badge,.article-cat-tag,.filter-pill.active,.filter-btn.active,.s-nav-pill.active,.chat-bubble.user .chat-text,.btn-primary{color:#fff !important}
.filter-pill.active,.filter-btn.active,.s-nav-pill.active{background:var(--gp-royal) !important;border-color:var(--gp-royal) !important}
.btn-primary{background:var(--gp-royal) !important}
/* orange labels: use the readable orange on white */
.related-read,.related-cat,.related-card-arrow,.exp-year,.tier-ideal,.seo-abbr,.founder-read-btn{color:var(--gp-orange-text) !important}
.founder-read-btn{border-color:rgba(194,80,10,.35) !important;background:#FFF4E6 !important}
.check-yes-featured{color:var(--gp-royal) !important}
.channel-badge{color:#157A3E !important}
.kpi-value{filter:saturate(1.1) brightness(.85)}
.signature{color:#5F6B85 !important;opacity:1 !important}
.vr-info-name{color:var(--gp-text) !important}
.footer-bottom p,.footer-bottom-links a,.footer-bottom a{color:#9FB0D0 !important}
.stack-card figcaption{flex-direction:row !important;align-items:center;gap:14px !important}
.stack-card figcaption > div:last-child{display:flex;flex-direction:column;gap:2px}
.stack-logo{flex:0 0 auto;height:48px;min-width:48px;max-width:120px;padding:6px;border-radius:12px;border:1px solid var(--gp-line);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stack-logo img{max-height:36px;max-width:100%;width:auto;object-fit:contain}

/* ---------- Recognition: verified numbers as seals, client names marquee ---------- */
#recognition{padding:clamp(72px,9vw,120px) 0 clamp(56px,7vw,90px);background:#fff !important}
.recog-head{text-align:center;max-width:720px;margin:0 auto 48px}
.recog-head .eyebrow{justify-content:center}
.recog-head h2{margin:12px 0 14px}
.recog-head p{color:var(--gp-text-2);font-size:17px;line-height:1.6}
.seals{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:1080px}
.seal{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:14px;
  background:radial-gradient(circle at 50% 35%,#fff 0 58%,var(--gp-bg-soft) 59%);
  border:6px solid var(--gp-navy);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--gp-orange),0 18px 40px -22px rgba(1,17,52,.45);
  transition:transform .35s var(--gp-ease)}
.seal:hover{transform:translateY(-6px) rotate(-2deg)}
.seal-stars{color:var(--gp-orange);font-size:11px;letter-spacing:.18em}
.seal strong{font-family:var(--gp-display);font-weight:900;font-size:clamp(28px,3.2vw,44px);line-height:1;color:var(--gp-navy);letter-spacing:-.03em}
.seal span:last-child{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gp-text-2);max-width:12ch;line-height:1.3}
.clients-marquee{margin-top:64px;display:flex;overflow:hidden;border-top:1px solid var(--gp-line);border-bottom:1px solid var(--gp-line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{list-style:none;margin:0;padding:22px 0;display:flex;flex:0 0 auto;width:max-content !important;max-width:none !important;min-width:max-content;gap:56px;padding-right:56px;animation:gp-clients 40s linear infinite}
.clients-marquee:hover .clients-track{animation-play-state:paused}
.clients-track a{font-family:var(--gp-display);font-weight:800;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:rgba(1,17,52,.55);white-space:nowrap;text-decoration:none;transition:color .25s}
.clients-track a:hover{color:var(--gp-navy)}
@keyframes gp-clients{to{transform:translateX(-100%)}}
@media (max-width:900px){.seals{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.seals{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.seal:last-child{grid-column:1/-1;width:50%;justify-self:center}}
@media (prefers-reduced-motion: reduce){.clients-track{animation:none}.clients-marquee{flex-wrap:wrap}}

/* ================= Card system (Excel-style: white, rounded, quiet shadow) ================= */
/* Pricing tiers: white cards, featured tier in navy */
.pricing-card,.pricing-card.tier-1,.pricing-card.tier-2,.pricing-card.tier-4{
  background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:24px !important;
  box-shadow:0 1px 2px rgba(1,17,52,.04),0 18px 40px -24px rgba(1,17,52,.25) !important;color:var(--gp-text)}
.pricing-card:hover{transform:translateY(-6px) !important;border-color:#C8D3EA !important;box-shadow:0 24px 50px -24px rgba(1,17,52,.3) !important}
.pricing-card::before{display:none !important}
.pricing-card.featured{
  background:var(--gp-navy) !important;border:2px solid var(--gp-orange) !important;
  --white:#fff;--muted-blue:#C9D6F0;--text-primary:#fff;--text-secondary:#C9D6F0;--gp-fg-rgb:255,255,255;color:#fff}
.pricing-card .tier-name,.pricing-card .pricing-name{color:var(--gp-text) !important;text-shadow:none !important}
.pricing-card.featured .tier-name,.pricing-card.featured .pricing-name{color:#fff !important}
.pricing-card .tier-badge,.pricing-card .pricing-tier{background:var(--gp-bg-soft) !important;color:var(--gp-royal) !important;border:1px solid var(--gp-line) !important;font-family:var(--gp-body) !important}
.pricing-card.featured .tier-badge,.pricing-card.featured .pricing-tier{background:rgba(254,139,3,.15) !important;color:var(--gp-orange) !important;border-color:rgba(254,139,3,.4) !important}
.pricing-card .tier-ideal{color:var(--gp-orange-text) !important}
.pricing-card.featured .tier-ideal,.pricing-card.featured .tier-ideal{color:var(--gp-orange) !important}
.pricing-card .tier-desc,.pricing-card .tier-features li,.pricing-card p,.pricing-card li{color:var(--gp-text-2) !important}
.pricing-card.featured .tier-desc,.pricing-card.featured .tier-features li,.pricing-card.featured p,.pricing-card.featured li{color:#DCE5F7 !important}
.pricing-card .price-range,.pricing-card .tier-price,.pricing-card .pricing-price{color:var(--gp-text) !important}
.pricing-card.featured .price-range,.pricing-card.featured .tier-price,.pricing-card.featured .pricing-price{color:#fff !important}
.pricing-card .tier-divider,.pricing-card .pricing-divider{border-color:var(--gp-line) !important;background:var(--gp-line) !important}
.pricing-card.featured .tier-divider,.pricing-card.featured .pricing-divider{border-color:rgba(255,255,255,.15) !important;background:rgba(255,255,255,.15) !important}
.pricing-card .tier-cta,.pricing-card .btn-ghost,.pricing-card .btn-gold{border-radius:999px !important}
.pricing-card .tier-cta{background:#fff !important;color:var(--gp-navy) !important;border:1.5px solid rgba(1,17,52,.25) !important;font-weight:700 !important;text-align:center}
.pricing-card .tier-cta:hover{border-color:var(--gp-navy) !important;background:var(--gp-bg-soft) !important}
.pricing-card.featured .tier-cta,.pricing-card.featured .tier-cta{background:linear-gradient(135deg,var(--gp-orange),var(--gp-orange-deep)) !important;color:var(--gp-navy) !important;border:0 !important}
.pricing-card .check{background:rgba(0,54,230,.1) !important}
.pricing-card .check-icon{fill:var(--gp-royal) !important}
.pricing-card.featured .check{background:rgba(254,139,3,.2) !important}
.pricing-card.featured .check-icon{fill:var(--gp-orange) !important}

/* Work page case cards: white card, photo on top, navy text */
.case-card:has(.case-info){background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:24px !important;overflow:hidden;box-shadow:0 18px 40px -26px rgba(1,17,52,.3) !important}
.case-card:has(.case-info) .case-img-wrap{background:var(--gp-bg-soft)}
.case-card:has(.case-info) .case-info{background:#fff !important;color:var(--gp-text)}
.case-card:has(.case-info) h3{color:var(--gp-text) !important}
.case-card:has(.case-info) .case-industry-tag{color:var(--gp-orange-text) !important}
.case-card:has(.case-info) .case-url,.case-card:has(.case-info) .case-work-done{color:var(--gp-text-2) !important}
.case-card:has(.case-info) .case-testimonial{background:var(--gp-bg-soft) !important;border:1px solid var(--gp-line) !important;color:var(--gp-text-2) !important;border-radius:16px}
.case-card:has(.case-info) .case-testimonial-author{color:var(--gp-orange-text) !important}
.case-card:has(.case-info) [class*="stat"],.case-card:has(.case-info) .case-stat{background:#FFF4E6 !important;color:var(--gp-orange-text) !important;border-color:rgba(194,80,10,.25) !important}
.case-card:has(.case-info) .btn-ghost,.case-card:has(.case-info) a:not(.btn-gold){color:var(--gp-navy) !important}
.case-card:has(.case-info):hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(1,17,52,.35) !important}

/* Tier labels as small pills */
.pricing-card .pricing-tier,.pricing-card .tier-badge{display:inline-flex !important;width:auto !important;align-self:flex-start;padding:5px 12px !important;border-radius:999px !important;font-size:11px !important;letter-spacing:.14em;font-weight:700}

/* ---------- Sliding words band under the hero (Excel-style) ---------- */
.gp-band{position:relative;z-index:2;display:flex;overflow:hidden;background:var(--gp-orange);border-top:1px solid rgba(1,17,52,.1);border-bottom:1px solid rgba(1,17,52,.1)}
.gp-band-track{display:flex;flex:0 0 auto;align-items:center;gap:28px;padding:18px 28px 18px 0;min-width:max-content;animation:gp-band 36s linear infinite}
.gp-band span{font-family:var(--gp-display);font-weight:800;font-size:clamp(18px,2vw,26px);letter-spacing:-.02em;color:var(--gp-navy);white-space:nowrap}
.gp-band i{font-style:normal;color:var(--gp-navy);opacity:.55;font-size:14px}
@keyframes gp-band{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){.gp-band-track{animation:none}}

.footer-wordmark{display:none !important}

/* Pricing: three cards (Optimise, Grow featured, Get Your Quote) */
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;max-width:1140px;margin-left:auto !important;margin-right:auto !important;gap:24px !important;align-items:stretch}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr !important;max-width:560px}}
.pricing-card.featured{transform:translateY(-10px)}
.pricing-card.featured:hover{transform:translateY(-16px) !important}
.pricing-card.featured .popular-ribbon,.pricing-card.featured .pricing-badge{background:var(--gp-orange) !important;color:var(--gp-navy) !important}
.pricing-card.featured .tier-desc,.pricing-card.featured .pricing-desc,.pricing-card.featured .price-note,.pricing-card.featured .pricing-feature{color:#DCE5F7 !important}
.pricing-card.featured .price-range em{color:var(--gp-orange) !important}
.pricing-card .price-range em{color:var(--gp-orange-text) !important}
.pricing-quote .price-range,.pricing-quote .pricing-range{font-size:clamp(26px,2.6vw,34px) !important}
.pricing-card .tier-cta,.pricing-card .btn-gold,.pricing-card .btn-ghost{margin-top:auto}
.pricing-card.pricing-quote .tier-cta{background:linear-gradient(135deg,var(--gp-orange),var(--gp-orange-deep)) !important;border:0 !important}
.compare-table .featured-col{background:rgba(0,54,230,.06) !important;color:var(--gp-royal) !important}
.pricing-card .btn-ghost,.pricing-card .btn-gold{width:100%;justify-content:center}
.pricing-card.featured .btn-ghost{background:linear-gradient(135deg,var(--gp-orange),var(--gp-orange-deep)) !important;color:var(--gp-navy) !important;border:0 !important}

/* ---------- Footer wordmark: letter rise + orange pop on hover ---------- */
.gp-mark{display:flex;justify-content:center;gap:0;margin:32px auto 0;padding:.14em 0 18px;text-decoration:none;line-height:.8;
  font-family:var(--gp-display);font-weight:900;font-size:min(calc((100vw - 32px)/7.4),250px);letter-spacing:-.045em;user-select:none}
.gp-mark span{display:inline-block;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);
  transition:color .3s,-webkit-text-stroke-color .3s,transform .55s cubic-bezier(.34,1.8,.5,1),opacity .6s;
  transition-delay:0s}
.gp-mark.pre span{opacity:0;transform:translateY(60%)}
.gp-mark.in span{transition-delay:calc(var(--i)*45ms)}
.gp-mark span:hover,.gp-mark span.pop{color:var(--gp-orange);-webkit-text-stroke-color:var(--gp-orange);transform:translateY(-14%) scale(1.06);transition-delay:0s !important;
  text-shadow:0 18px 40px rgba(254,139,3,.35)}
.gp-mark:hover span:not(:hover){-webkit-text-stroke-color:rgba(255,255,255,.28)}
@media (prefers-reduced-motion: reduce){.gp-mark span{transition:color .2s}.gp-mark span:hover{transform:none}}
/* The wordmark fills the screen edge to edge. The width is set by initFitMark in
   gridpoint-enhance.js, which measures the real letters rather than guessing an
   advance width, so it lands on the full width at any size. */
html body #footer .gp-mark{width:100%;max-width:none;padding-left:0;padding-right:0}
@media (max-width:760px){
  /* it was a faint, half-width smudge on a phone: heavier ink, full bleed,
     and room underneath so the letters are never clipped by the page edge */
  html body #footer .gp-mark{margin-top:26px;padding:.16em 0 26px;line-height:.82}
  html body #footer .gp-mark span{-webkit-text-stroke-width:2.2px;
    -webkit-text-stroke-color:rgba(255,255,255,.5)}
  html body #footer .gp-mark span.pop,html body #footer .gp-mark span:active{
    color:var(--gp-orange);-webkit-text-stroke-color:var(--gp-orange)}
  /* The assistant, WhatsApp and back-to-top are fixed to the bottom of the
     screen, so the last stretch of the page always sits underneath them. Leave
     that much room below the wordmark and it is never half covered. */
  html body #footer .gp-mark{margin-bottom:86px}
  /* and the language rail is fixed to the left edge, so inset the footer text
     clear of it rather than letting the tab sit on the first letter */
  html body #footer .container{padding-left:44px !important;padding-right:24px !important}
}

/* ================= Homepage rebuild (session 3) ================= */
/* Stack section (shared by homepage and work page) */
.tech-header{text-align:center;margin-bottom:64px}
.tech-header .eyebrow{color:var(--amber-gold)}
.tech-header .eyebrow::before{background:var(--amber-gold)}
.tech-header .h2{color:var(--white)}
.tech-header p{color:var(--muted-blue);margin-top:12px;font-size:17px}
.tech-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.tech-item{
  --accent-rgb:0,47,167;
  background:var(--card-dark);
  border:1px solid rgba(var(--accent-rgb),.25);
  border-radius:var(--r-md);padding:24px 16px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  transition:border-color .25s,transform .25s,box-shadow .25s,background .25s;
  cursor:default;position:relative;overflow:hidden;
}
.tech-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:rgb(var(--accent-rgb));opacity:0;transition:opacity .25s;
}
.tech-item:hover::before{opacity:1}
.tech-item:hover{
  border-color:rgba(var(--accent-rgb),.7);
  transform:translateY(-5px);
  box-shadow:0 14px 40px rgba(var(--accent-rgb),.25);
  background:rgba(var(--accent-rgb),.07);
}
.tech-icon{
  width:52px;height:52px;border-radius:14px;
  background:rgba(var(--accent-rgb),.15);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;transition:background .25s,transform .25s;
}
.tech-icon img{width:30px;height:30px;object-fit:contain;display:block}
.tech-item:hover .tech-icon{background:rgba(var(--accent-rgb),.25);transform:scale(1.1)}
.tech-name{
  font-family:var(--font-head);font-size:12px;font-weight:800;
  color:var(--white);text-align:center;letter-spacing:.04em;
}
@media(max-width:900px){.tech-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:400px){.tech-grid{grid-template-columns:repeat(2,1fr)}}

.tech-item{background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:16px !important}
.tech-icon img[style*="invert"]{filter:none !important}
.tech-name{color:var(--gp-text) !important}
.tech-more{text-align:center;margin-top:36px}

/* Proven in real numbers (Excel "proven on the ground") */
.proven{padding:clamp(80px,10vw,140px) 0 clamp(40px,6vw,70px);background:#fff !important;text-align:center}
.proven .eyebrow{justify-content:center}
.proven h2{margin:14px auto 0;max-width:18ch}
.proven-row{list-style:none;margin:clamp(40px,6vw,80px) auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1200px;border-top:1px solid var(--gp-line)}
.proven-row li{padding:clamp(24px,3vw,40px) 12px 0;border-left:1px solid var(--gp-line)}
.proven-row li:first-child{border-left:0}
.proven-row strong{display:inline-flex;align-items:flex-start;font-family:var(--gp-display);font-weight:900;font-size:clamp(56px,8.4vw,124px);line-height:.9;letter-spacing:-.05em;color:var(--gp-navy);font-variant-numeric:tabular-nums}
.proven-row sup{font-size:.42em;color:var(--gp-orange);margin-left:.04em;top:0;line-height:1}
.proven-row span:not(.count){display:block;margin-top:12px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gp-text-2)}
.proven .clients-marquee{margin-top:clamp(48px,6vw,80px)}
@media (max-width:760px){.proven-row{grid-template-columns:repeat(2,minmax(0,1fr))}.proven-row li:nth-child(3){border-left:0}.proven-row li{padding-bottom:24px}}

/* What we build: bold rows with a cover photo that follows the cursor (Excel "who we protect") */
.svc-section{background:var(--gp-navy) !important;padding:clamp(90px,10vw,150px) 0 !important;overflow:hidden}
.svc-section .services-header{text-align:left;max-width:900px;margin:0 0 clamp(36px,5vw,64px)}
.svc-section .svc-problems span{color:#C9D6F0 !important}
.svc-section .services-header p{color:#C9D6F0}
.svc-rows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.svc-rows a{display:grid;grid-template-columns:56px minmax(0,1.15fr) minmax(0,1fr) 52px;align-items:center;gap:28px;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;position:relative}
.svc-thumb{display:none}
.svc-num{font-family:var(--gp-display);font-weight:800;font-size:14px;color:var(--gp-orange);letter-spacing:.1em}
.svc-name{font-family:var(--gp-display);font-weight:900;font-size:clamp(26px,3.4vw,50px);line-height:1;letter-spacing:-.035em;color:#fff;transition:color .3s,transform .5s var(--gp-ease)}
.svc-desc{font-size:15px;line-height:1.6;color:#AFC0E0;transition:color .3s}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.svc-tags span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#DCE5F7}
.svc-go{justify-self:end;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:20px;transition:background .3s,color .3s,transform .5s var(--gp-ease)}
.svc-rows a:hover .svc-name,.svc-rows a:focus-visible .svc-name,.svc-rows li.is-active .svc-name{color:var(--gp-orange);transform:translateX(12px)}
.svc-rows a:hover .svc-desc{color:#fff}
.svc-rows a:hover .svc-go,.svc-rows li.is-active .svc-go{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy);transform:rotate(45deg)}
.svc-peek{position:fixed;left:0;top:0;width:340px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;pointer-events:none;z-index:40;opacity:0;transition:opacity .35s var(--gp-ease);box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}
.svc-peek.on{opacity:1}
.svc-peek img{width:100%;height:100%;object-fit:cover}
.svc-hint{margin-top:22px;font-size:14px;color:#AFC0E0}
.svc-hint .hint-touch{display:none}
@media (max-width:1023px),(hover:none){
  .svc-peek{display:none}.svc-hint .hint-hover{display:none}.svc-hint .hint-touch{display:inline}
  .svc-rows a{grid-template-columns:minmax(0,1fr) 42px;grid-template-areas:"num num" "name go" "desc desc" "img img";gap:8px 14px}
  .svc-num{grid-area:num}.svc-name{grid-area:name}.svc-go{grid-area:go;width:42px;height:42px}.svc-desc{grid-area:desc}
  .svc-thumb{grid-area:img;display:block;aspect-ratio:2/1;border-radius:16px;overflow:hidden;margin-top:10px}
  .svc-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5);transform:scale(1.08);transition:filter .7s var(--gp-ease),transform 1.2s var(--gp-ease)}
  .svc-rows li.is-active .svc-thumb img{filter:none;transform:none}
}

/* Verified outcomes: full-page stacking cards */
.cases-stack{display:block !important}
.cases-stack .case-card{position:sticky !important;top:calc(var(--nav-h,72px) + 24px + var(--si,0)*14px);display:block !important;width:100% !important;height:min(calc(100vh - var(--nav-h,72px) - 60px),760px) !important;min-height:460px;margin:0 0 7vh !important;border-radius:28px !important;overflow:hidden;box-shadow:0 -20px 60px -30px rgba(1,17,52,.45) !important;transform-origin:50% 0;transition:transform .2s linear,filter .2s linear}
.cases-stack .case-card:last-child{margin-bottom:0 !important}
.cases-stack .case-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.cases-stack .case-overlay{position:absolute;inset:auto 0 0 0;padding:clamp(28px,4vw,56px) !important;background:linear-gradient(0deg,rgba(1,17,52,.95) 0%,rgba(1,17,52,.75) 45%,rgba(1,17,52,0) 100%) !important}
.cases-stack .case-name{font-size:clamp(34px,5vw,72px) !important;line-height:1;letter-spacing:-.04em;font-weight:900 !important;font-family:var(--gp-display) !important;margin:10px 0 18px}
.cases-stack .case-industry{color:var(--gp-orange) !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.cases-stack .case-stat{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.2) !important;color:#fff !important;font-size:15px !important;padding:8px 14px !important;border-radius:999px}
@media (max-width:640px){.cases-stack .case-card{height:78vh !important;min-height:420px}}

/* Our story: text centred, both founders centred below */
#about-preview .about-grid{display:flex !important;flex-direction:column;align-items:center;text-align:center}
#about-preview .about-content{order:-1;max-width:760px;margin:0 auto}
#about-preview .about-content .eyebrow{justify-content:center}
#about-preview .about-content p{margin-left:auto;margin-right:auto}
#about-preview .about-visual{margin:0 auto;justify-content:center;max-width:760px !important}
#about-preview .founder-card{transition:transform .5s var(--gp-ease),box-shadow .5s var(--gp-ease)}
#about-preview .founder-card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 30px 60px -30px rgba(1,17,52,.45)}
#about-preview .founder-card:nth-child(2):hover{transform:translateY(-10px) rotate(1deg)}
#about-preview .founder-img img{transition:transform 1s var(--gp-ease)}
#about-preview .founder-card:hover .founder-img img{transform:scale(1.05)}

/* Nav over a dark hero: transparent with white links until you scroll, then the white pill */
html.gp-over-dark #navbar:not(.scrolled){background:transparent !important;border-color:transparent !important;box-shadow:none !important;backdrop-filter:none;-webkit-backdrop-filter:none}
html.gp-over-dark #navbar:not(.scrolled) .nav-links a{color:#fff !important}
html.gp-over-dark #navbar:not(.scrolled) .nav-links a:hover,html.gp-over-dark #navbar:not(.scrolled) .nav-links a.active{background:rgba(255,255,255,.12) !important;color:#fff !important}
html.gp-over-dark #navbar:not(.scrolled) .lang-btn{background:rgba(255,255,255,.1) !important;color:#fff !important;border-color:rgba(255,255,255,.3) !important}
html.gp-over-dark #navbar:not(.scrolled) .hamburger span,html.gp-over-dark #navbar:not(.scrolled) .nav-hamburger span{background:#fff !important}
html.gp-over-dark #navbar:not(.scrolled) .nav-hamburger{border-color:rgba(255,255,255,.3) !important;background:transparent !important}
.svc-peek{opacity:0 !important}
.svc-peek.on{opacity:1 !important}
.svc-section .svc-problems{justify-content:flex-start !important;text-align:left !important;align-items:flex-start}

/* ================= Motion kit (Chiella patterns) ================= */
/* Full-screen menu */
.gm-open{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 20px;margin-left:10px;border-radius:999px;border:1.5px solid rgba(1,17,52,.2);background:#fff;color:var(--gp-navy);font:700 14px/1 var(--gp-body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.gm-open i{position:relative;width:18px;height:10px}
.gm-open i::before,.gm-open i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--gp-ease)}
.gm-open i::before{top:0}.gm-open i::after{bottom:0;left:6px}
.gm-open:hover{background:var(--gp-navy);color:#fff;border-color:var(--gp-navy)}
.gm-open:hover i::after{left:0}
html.gp-over-dark #navbar:not(.scrolled) .gm-open{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.nav-hamburger,.hamburger{display:none !important}
@media (max-width:900px){.gm-open{height:40px;padding:0 14px}.gm-open span{display:none}}
#gpMenu{position:fixed;inset:0;z-index:3000;display:grid;grid-template-columns:1.15fr .85fr;background:var(--gp-navy);transform:translateY(-100%);transition:transform .7s cubic-bezier(.76,0,.24,1);pointer-events:none;visibility:hidden}
#gpMenu.open{transform:none;pointer-events:auto;visibility:visible}
#gpMenu .gm-left{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:90px 8vw 60px}
#gpMenu .gm-left>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
#gpMenu.open .gm-left>img{animation:gm-kb 12s ease-in-out infinite alternate}
@keyframes gm-kb{to{transform:scale(1.2)}}
#gpMenu .gm-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,17,52,.92),rgba(1,17,52,.7))}
#gpMenu .gm-list{position:relative;display:flex;flex-direction:column;gap:6px}
#gpMenu .gm-list a{display:block;color:#fff;text-decoration:none;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s var(--gp-ease),color .25s}
#gpMenu.open .gm-list a{opacity:1;transform:none;transition-delay:calc(.25s + var(--d)*70ms)}
#gpMenu .gm-list a span{font-family:var(--gp-display);font-weight:900;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.035em}
#gpMenu .gm-list a small{display:block;margin:2px 0 8px;font:700 12px/1 var(--gp-body);letter-spacing:.2em;text-transform:uppercase;color:#AFC0E0}
#gpMenu .gm-list a:hover span,#gpMenu .gm-list a:focus-visible span{color:var(--gp-orange)}
#gpMenu .gm-cta{position:relative;align-self:flex-start;margin-top:36px;opacity:0;transform:translateY(20px);transition:opacity .5s .7s,transform .6s .7s}
#gpMenu.open .gm-cta{opacity:1;transform:none}
#gpMenu .gm-right{display:flex;flex-direction:column;justify-content:center;padding:60px 7vw;color:#fff}
#gpMenu .gm-logo{width:200px;height:auto;margin-bottom:40px}
#gpMenu .gm-label{font:700 12px/1 var(--gp-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gp-orange);margin:22px 0 10px}
#gpMenu .gm-big{font-family:var(--gp-display);font-weight:800;font-size:clamp(24px,2.4vw,34px);color:#fff;text-decoration:none}
#gpMenu .gm-text{display:block;color:#DCE5F7;font-size:17px;margin:0 0 8px;text-decoration:none}
#gpMenu .gm-close{position:absolute;top:22px;right:26px;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .25s,transform .4s var(--gp-ease)}
#gpMenu .gm-close:hover{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy);transform:rotate(90deg)}
@media (max-width:860px){#gpMenu{grid-template-columns:1fr;overflow-y:auto}#gpMenu .gm-left{padding:96px 24px 20px}#gpMenu .gm-left>img,#gpMenu .gm-veil{display:none}#gpMenu .gm-right{padding:20px 24px 48px}#gpMenu .gm-list a{border-bottom:1px solid rgba(255,255,255,.1);padding:10px 0}#gpMenu .gm-cta{width:100%;justify-content:center}#gpMenu .gm-close{background:var(--gp-orange);color:var(--gp-navy);border-color:var(--gp-orange)}}

/* Scroll-sliding panels (How it works) */
.hz{overflow:hidden}
.hz-track{display:flex;gap:24px;padding:10px 6vw 30px;will-change:transform}
.hz-panel{position:relative;flex:0 0 min(76vw,440px);height:min(62vh,560px);min-height:420px;border-radius:24px;overflow:hidden;background:var(--gp-navy);color:#fff;isolation:isolate}
.hz-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--gp-ease)}
.hz-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,17,52,.25) 0%,rgba(1,17,52,.55) 45%,rgba(1,17,52,.95) 100%)}
.hz-panel:hover img{transform:scale(1.06)}
.hz-panel .hz-in{position:absolute;left:0;right:0;bottom:0;padding:32px}
.hz-panel .hz-no{display:block;font-family:var(--gp-display);font-weight:900;font-size:clamp(64px,7vw,96px);line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--gp-orange);margin-bottom:14px}
.hz-panel .step-title{font-family:var(--gp-display) !important;font-weight:800 !important;font-size:clamp(24px,2.4vw,32px) !important;color:#fff !important;margin-bottom:10px !important}
.hz-panel .step-desc{color:#DCE5F7 !important;font-size:16px !important;line-height:1.55 !important}
.hz-static .hz-track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none !important}
.hz-static .hz-panel{scroll-snap-align:start}
@media (max-width:640px){.hz-panel{flex-basis:78vw;height:auto;aspect-ratio:3/4;min-height:0}}

/* Card deck (Numbers that don't lie) */
.deck-wrap{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(32px,5vw,72px);align-items:center}
.deck-wrap .vr-header{text-align:left !important;margin:0 !important}
.deck-wrap .vr-header .eyebrow{justify-content:flex-start}
.deck-dots{display:flex;gap:8px;margin-top:28px}
.deck-dots button{width:34px;height:4px;border-radius:4px;border:0;background:rgba(1,17,52,.15);cursor:pointer;padding:0;transition:background .3s,width .3s}
.deck-dots button.on{background:var(--gp-orange);width:54px}
.gp-deck{position:relative;height:clamp(340px,40vw,500px);perspective:1600px}
.gp-deck .vr-panel{position:absolute !important;inset:0 !important;flex:none !important;border-radius:22px !important;overflow:hidden;background:#fff;border:1px solid var(--gp-line) !important;box-shadow:0 30px 70px -30px rgba(1,17,52,.45);transform-origin:50% 120%;transition:transform .85s cubic-bezier(.22,.75,.2,1),opacity .6s !important;cursor:pointer}
.gp-deck .vr-panel .vr-panel-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.gp-deck .vr-panel-shadow,.gp-deck .vr-panel-vtag,.gp-deck .vr-panel-icon{display:none !important}
.gp-deck .vr-panel .vr-panel-info{position:absolute;left:0;right:0;bottom:0;opacity:1 !important;transform:none !important;pointer-events:auto !important;padding:18px 22px;background:linear-gradient(0deg,#fff 60%,rgba(255,255,255,0));display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gp-deck .vr-info-name{color:var(--gp-navy) !important;font-family:var(--gp-display);font-weight:800;font-size:20px}
.gp-deck .vr-info-cta{margin-left:auto}
@media (max-width:860px){.deck-wrap{grid-template-columns:1fr}.gp-deck{height:clamp(320px,90vw,460px)}}

/* Card fan (Work page portfolio) */
.fan-section{padding:clamp(60px,8vw,110px) 0 clamp(40px,6vw,80px);text-align:center;overflow:hidden}
.fan-stage{position:relative;height:clamp(380px,58vh,560px);margin-top:20px}
.fan-card{position:absolute;top:50%;left:50%;width:clamp(170px,21vw,250px);aspect-ratio:2/3;border-radius:18px;overflow:hidden;background:var(--gp-navy);box-shadow:0 30px 60px -24px rgba(1,17,52,.5);transition:transform .55s cubic-bezier(.3,.9,.3,1),opacity .45s;text-decoration:none;color:#fff;opacity:0}
.fan-card img{width:100%;height:100%;object-fit:cover}
.fan-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,17,52,0) 45%,rgba(1,17,52,.9))}
.fan-card .fc-cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;text-align:left}
.fan-card .fc-cap strong{display:block;font-family:var(--gp-display);font-weight:800;font-size:18px;line-height:1.1}
.fan-card .fc-cap span{display:block;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gp-orange)}
@media (hover:hover){.fan-card.is-center:hover{transform:translate(-50%,-50%) translateY(-2.5rem) scale(1.08) !important}}
.fan-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px}
.fan-controls>button{width:50px;height:50px;border-radius:50%;border:1px solid var(--gp-line);background:#fff;color:var(--gp-navy);font-size:22px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(1,17,52,.3)}
.fan-controls>button:hover{background:var(--gp-navy);color:#fff}
.fan-dots{display:flex;gap:7px}
.fan-dots button{width:8px;height:8px;border-radius:8px;border:0;padding:0;background:rgba(1,17,52,.2);cursor:pointer;transition:width .3s,background .3s}
.fan-dots button.on{width:24px;background:var(--gp-orange)}

/* Expanding pop cards (About: what makes us different) */
.pop-row{display:flex !important;gap:14px;height:440px;grid-template-columns:none !important}
.pop-row>*{flex:1;min-width:0;position:relative;overflow:hidden;border-radius:20px !important;transition:flex .6s cubic-bezier(.2,.8,.2,1),background .4s !important;cursor:default}
.pop-row:hover>*{flex:.62}
.pop-row>*:hover{flex:2.6}
.pop-row>* .pop-label{position:absolute;left:22px;bottom:24px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--gp-display);font-weight:800;font-size:22px;color:var(--gp-navy);transition:opacity .3s;white-space:nowrap}
.pop-row>* .pop-body{opacity:0;transform:translateY(16px);transition:opacity .4s .05s,transform .4s .05s}
.pop-row>*:hover .pop-body,.pop-row>*:focus-within .pop-body{opacity:1;transform:none}
.pop-row>*:hover .pop-label{opacity:0}
.pop-row>*:hover{background:var(--gp-navy) !important;--white:#fff;--muted-blue:#C9D6F0;--gp-fg-rgb:255,255,255}
.pop-row>*:hover h3,.pop-row>*:hover .h3{color:#fff !important}
.pop-row>*:hover p{color:#DCE5F7 !important}
@media (max-width:820px){.pop-row{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.pop-row>*{flex:0 0 80vw !important;scroll-snap-align:start}.pop-row>* .pop-body{opacity:1;transform:none}.pop-row>* .pop-label{display:none}}

/* Crossfade gallery (case studies) */
.cn{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--gp-navy);box-shadow:0 30px 70px -30px rgba(1,17,52,.45)}
.cn-shot{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.cn-shot.on{opacity:1}
.cn-shot img{width:100%;height:100%;object-fit:cover}
.cn-shot.on img{animation:cn-drift 9s ease-out both}
@keyframes cn-drift{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.cn-rail{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:2}
.cn-rail button{width:4px;height:44px;border:0;padding:0;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden;cursor:pointer}
.cn-rail button i{display:block;width:100%;height:100%;background:var(--gp-orange);transform:scaleY(0);transform-origin:top}
.cn-rail button.run i{transition:transform 5s linear;transform:scaleY(1)}

/* 3D reel (Insights) */
.reel-section{padding:clamp(40px,6vw,80px) 0;overflow:hidden}
.rl{position:relative;height:clamp(300px,40vw,460px);perspective:1400px;transform-style:preserve-3d}
.rl-item{position:absolute;top:50%;left:50%;width:min(64vw,560px);aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--gp-navy);transition:transform .8s cubic-bezier(.22,.75,.2,1),opacity .6s,filter .6s;text-decoration:none;color:#fff;box-shadow:0 30px 60px -30px rgba(1,17,52,.5)}
.rl-item img,.rl-item .rl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.rl-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,17,52,0) 40%,rgba(1,17,52,.92))}
.rl-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.rl-cap span{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gp-orange);margin-bottom:6px}
.rl-cap strong{display:block;font-family:var(--gp-display);font-weight:800;font-size:clamp(18px,2vw,26px);line-height:1.15}
.rl-controls{display:flex;justify-content:center;gap:14px;margin-top:18px}
.rl-controls button{width:50px;height:50px;border-radius:50%;border:1px solid var(--gp-line);background:#fff;color:var(--gp-navy);font-size:22px;cursor:pointer}
.rl-controls button:hover{background:var(--gp-navy);color:#fff}
@media (prefers-reduced-motion: reduce){#gpMenu,#gpMenu .gm-list a,.fan-card,.rl-item,.gp-deck .vr-panel{transition:none !important}.cn-shot.on img{animation:none}}
.gp-deck{overflow:visible !important;display:block !important;border:0 !important;background:none !important;margin:0 auto;width:100%}
.gp-deck .vr-panel{inset:6% 4% !important}
.pop-row>* .pop-label{white-space:normal !important;max-height:calc(100% - 110px);font-size:19px;line-height:1.1;overflow:hidden}

/* AI-driven growth: dark live console with a workflow pulse */
.ai-visual{background:linear-gradient(160deg,#0A1F4D,#011134) !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:26px !important;box-shadow:0 40px 90px -40px rgba(1,17,52,.7) !important;padding:24px !important}
.ai-visual .ai-visual-title{color:#fff !important}
.ai-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:18px 0 20px;padding:16px 10px 12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.ai-flow::before{content:"";position:absolute;left:12%;right:12%;top:31px;height:2px;background:rgba(255,255,255,.12)}
.ai-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ai-node i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 var(--gp-display);font-style:normal;background:#12306E;color:#fff;border:2px solid rgba(255,255,255,.2);animation:ai-lit 5s infinite}
.ai-node:nth-child(2) i{animation-delay:1s}.ai-node:nth-child(3) i{animation-delay:2s}.ai-node:nth-child(4) i{animation-delay:3s}.ai-node:nth-child(5) i{animation-delay:4s}
.ai-node span{font-size:11px;font-weight:700;letter-spacing:.04em;color:#AFC0E0;line-height:1.2}
@keyframes ai-lit{0%,14%{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy);box-shadow:0 0 0 6px rgba(254,139,3,.18)}22%,100%{background:#12306E;border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}}
.ai-pulse{position:absolute;top:26px;left:12%;width:12px;height:12px;border-radius:50%;background:var(--gp-orange);box-shadow:0 0 16px 4px rgba(254,139,3,.6);animation:ai-run 5s linear infinite;z-index:2}
@keyframes ai-run{0%{left:12%}80%{left:86%}100%{left:86%;opacity:0}}
.ai-visual .chat-bubble:not(.user) .chat-text{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.12) !important;color:#DCE5F7 !important}
.ai-visual .ai-metric{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.1) !important}
.ai-visual .ai-metric-val{color:var(--gp-orange) !important}
.ai-visual .ai-metric-label{color:#AFC0E0 !important}
.chat-msg-in{animation:ai-in .45s var(--gp-ease)}
@keyframes ai-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:560px){.ai-node span{font-size:10px}.ai-visual{padding:16px !important}}
@media (prefers-reduced-motion: reduce){.ai-node i,.ai-pulse{animation:none}.ai-pulse{display:none}}
.fan-card,.rl-item,.hz-panel{background-color:var(--gp-navy) !important;border:0 !important}
.related-cat[class*="badge-"],.related-card-badge[class*="badge-"]{color:#fff !important}
.fan-card .fc-cap span{color:var(--gp-orange) !important}
.gp-deck{height:clamp(340px,40vw,500px) !important;min-height:340px}
@media (max-width:860px){.gp-deck{height:clamp(360px,100vw,480px) !important}}
.gp-deck .vr-panel{height:auto !important;width:auto !important;min-width:0 !important}
@media (max-width:768px){
  .gp-deck .vr-panel,.gp-deck .vr-panel.vr-active{display:block !important;padding:0 !important;background:linear-gradient(160deg,#12306E,#011134) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:22px !important}
  .gp-deck .vr-panel .vr-panel-icon{display:grid !important;place-items:center;position:absolute !important;top:26px !important;left:26px !important;width:72px !important;height:72px !important;border-radius:20px !important;font:900 30px/1 var(--gp-display) !important;background:var(--gp-orange) !important;color:var(--gp-navy) !important;border:0 !important}
  .gp-deck .vr-panel .vr-panel-info{position:absolute !important;left:0;right:0;bottom:0;padding:24px 26px 26px !important;background:transparent !important;display:flex !important;flex-direction:column !important;align-items:flex-start;gap:10px !important}
  .gp-deck .vr-panel .vr-info-name{color:#fff !important;font-size:28px !important;line-height:1.1}
  .gp-deck .vr-panel .vr-info-tag{color:#fff !important;background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.2) !important}
  .gp-deck .vr-panel .vr-info-cta{margin-left:0 !important}
}

/* Service page photo headers: white text on the dark photo */
#sv-hero{background-color:var(--gp-navy) !important}
#sv-hero h1,#sv-hero .h1{color:#fff !important}
#sv-hero h1 em,#sv-hero h1 span{color:var(--gp-orange) !important}
/* Contact: booking band instead of an empty frame */
#booking-embed{background:var(--gp-navy) !important;border:0 !important;--white:#fff;--muted-blue:#C9D6F0;--gp-fg-rgb:255,255,255}
#booking-embed h2{color:#fff !important}
#booking-embed p{color:#C9D6F0 !important}
#booking-embed .container>div:last-child{border:0 !important;background:none !important}

/* ============================================================
   v4 (owner review vs Excel Security): Excel type scale, centred
   hero with frame line, stat cards, stacking cards, results slider
   ============================================================ */

/* Header: menu button only (the page links live in the full-screen menu) */
#navbar .nav-links,#navbar .nav-hamburger{display:none !important}
.gm-open span{display:inline !important}

/* Section titles at Excel's scale (64px desktop, 32px phone); emphasis words orange */
:where(section) h2:where(:not(.founder-name):not([class*="card"] h2)),.section-title{font-size:clamp(32px,4.45vw,64px) !important;line-height:1.02 !important;letter-spacing:-.028em !important;font-weight:800 !important}
section h2 em,.section-title em{font-family:var(--gp-serif) !important;font-style:italic !important;font-weight:400 !important;letter-spacing:-.01em !important;color:var(--gp-orange-text) !important}
.gp-dark h2 em,#hero h2 em,#testimonials h2 em,#cta-final h2 em,#footer h2 em,#sv-hero h1 em,.ph h1 em{color:var(--gp-orange) !important}
.eyebrow{font-size:13px !important;letter-spacing:.2em !important;font-weight:800 !important}

@keyframes gp-live{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.dot-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3DDC84;animation:gp-live 2s infinite;flex:0 0 8px}

/* ---------- Hero: centred, frame line with a travelling orange light ---------- */
#hero.hx{justify-content:center;text-align:center}
#hero.hx .hero-overlay{background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(1,17,52,.42) 0%,rgba(1,17,52,.72) 70%,rgba(1,17,52,.9) 100%),linear-gradient(180deg,rgba(1,17,52,.55) 0%,rgba(1,17,52,.2) 35%,rgba(1,17,52,.85) 100%) !important;opacity:1 !important}
#hero.hx .hero-overlay-bottom{display:none !important}
#hero.hx .hero-content{display:flex;justify-content:center;width:100%;padding-top:calc(var(--nav-h,72px) + 56px);padding-bottom:130px}
.hx-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hx-mark{width:58px;height:auto;margin-bottom:22px;filter:drop-shadow(0 8px 24px rgba(254,139,3,.35))}
#hero.hx .hero-eyebrow{justify-content:center;margin-bottom:0 !important}
#hero.hx .hero-h1{font-size:clamp(40px,6.9vw,106px) !important;line-height:.94 !important;letter-spacing:-.042em !important;text-align:center;margin:22px 0 26px !important;color:#fff !important}
#hero.hx .hero-sub{max-width:64ch;margin:0 auto 36px !important;text-align:center;color:rgba(255,255,255,.84) !important;font-size:clamp(16px,1.35vw,19px) !important;line-height:1.65}
#hero.hx .hero-sub strong{color:#fff}
#hero.hx .hero-ctas{justify-content:center;flex-wrap:wrap;gap:12px}
#hero.hx .hero-ctas .btn-ghost{display:inline-flex;align-items:center;gap:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,.06) !important}
.hx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:32px 0 0;padding:0}
.hx-chips li{padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:rgba(255,255,255,.9);font:600 13px/1 var(--gp-body)}
.hx-badge{position:absolute;z-index:3;right:clamp(28px,3vw,48px);bottom:clamp(28px,3vw,44px);display:flex;align-items:center;gap:10px;margin:0;padding:10px 16px;border-radius:999px;background:rgba(1,17,52,.6);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:rgba(255,255,255,.85);font:600 12.5px/1 var(--gp-body)}
.hx-frame{--fi:clamp(10px,1.6vw,22px);position:absolute;z-index:2;left:var(--fi);top:var(--fi);width:calc(100% - var(--fi)*2);height:calc(100% - var(--fi)*2);overflow:visible;pointer-events:none;fill:none}
.hx-frame rect{width:calc(100% - 2px);height:calc(100% - 2px);stroke:rgba(254,139,3,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.hx-frame .hx-run{stroke:var(--gp-orange);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:9 91;animation:hx-run 11s linear infinite;filter:drop-shadow(0 0 6px rgba(254,139,3,.9))}
@keyframes hx-run{to{stroke-dashoffset:-100}}
#hero.hx .hero-scroll{bottom:clamp(30px,3.4vw,46px)}
@media (max-width:760px){
  #hero.hx .hero-content{padding-top:calc(var(--nav-h,64px) + 36px);padding-bottom:110px}
  #hero.hx .hero-h1{font-size:clamp(36px,10.4vw,52px) !important}
  .hx-mark{width:46px;margin-bottom:16px}
  .hx-chips li{font-size:12px;padding:8px 12px}
  .hx-badge{display:none}
  .hx-frame rect{rx:20px;ry:20px}
}
@media (prefers-reduced-motion:reduce){.hx-frame .hx-run{animation:none;stroke-dasharray:none;stroke:rgba(254,139,3,.45);stroke-width:1;filter:none}.dot-live{animation:none}}

/* ---------- Sliding words band: Excel boldness ---------- */
.gp-band span{font-weight:900 !important;text-transform:uppercase;font-size:clamp(20px,2.4vw,32px) !important;letter-spacing:-.01em !important}
.gp-band i{font-size:18px !important;opacity:.8 !important}
.gp-band-track{padding-top:20px !important;padding-bottom:20px !important}

/* ---------- Proven: four white stat cards, big numbers ---------- */
#trust-bar.proven{background:var(--gp-bg-soft) !important}
.proven h2{max-width:20ch}
.proven-row{border-top:0 !important;gap:14px !important;max-width:1200px}
.proven-row li{background:#fff;border:0 !important;border-radius:22px;padding:clamp(28px,3vw,42px) 16px !important;box-shadow:0 1px 0 rgba(1,17,52,.04),0 24px 48px -30px rgba(1,17,52,.35);transition:transform .5s var(--gp-ease),box-shadow .5s var(--gp-ease)}
.proven-row li:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(1,17,52,.04),0 34px 60px -30px rgba(1,17,52,.45)}
.proven-row strong{font-size:clamp(50px,6.6vw,96px) !important}
.proven-row sup{color:var(--gp-orange-deep) !important}
.proven-row .pl{font-size:13.5px !important;letter-spacing:.06em !important}

/* ---------- Stacking cards (Excel "Pick a service"): text left, photo right ---------- */
#services.xs{background:var(--gp-bg-soft) !important;padding:clamp(80px,10vw,140px) 0 !important}
.xs-head{max-width:900px;margin:0 0 clamp(40px,5vw,64px)}
.xs-head .svc-problems{display:flex;flex-wrap:wrap;gap:6px 14px;margin:18px 0 8px}
.xs-head .svc-problems span{font:700 clamp(17px,1.6vw,22px)/1.3 var(--gp-display);color:var(--gp-text-2)}
.xs-head .svc-problems span:not(:last-child)::after{content:"/";margin-left:14px;color:var(--gp-orange-deep)}
.xs-lead,.rs-head p,.pw .process-header p{font-size:clamp(16px,1.35vw,18px) !important;line-height:1.7 !important;color:var(--gp-text-2) !important;max-width:58ch}
.xs-more{text-align:center;margin-top:48px}
.ecards{display:grid}
.ecard{position:sticky;top:calc(96px + var(--i) * 14px);display:grid;min-height:440px;margin-bottom:28px;border-radius:28px;overflow:hidden;background:var(--gp-navy);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.06);box-shadow:0 -24px 60px -30px rgba(1,17,52,.55)}
.ecard:last-child{margin-bottom:0}
.ecard:nth-child(3n+2){background:var(--gp-navy-2)}
.ecard:nth-child(3n){background:#07142F}
.ecard-in{padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ecard-num{display:block;font:800 13px/1.3 var(--gp-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gp-orange);margin-bottom:14px}
.ecard h3{font:800 clamp(28px,3.4vw,50px)/1 var(--gp-display) !important;letter-spacing:-.03em;color:#fff !important;margin:0}
.ecard p{color:rgba(255,255,255,.8);margin:14px 0 18px;max-width:46ch;font-size:clamp(15px,1.2vw,17px);line-height:1.6}
.ecard-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 26px;padding:0}
.ecard-tags li{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font:700 11px/1.2 var(--gp-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.ecard-go{display:inline-flex;align-items:center;gap:12px;font-weight:800;color:var(--gp-orange)}
.ecard-go i{font-style:normal;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--gp-orange);color:var(--gp-navy);transition:transform .45s var(--gp-ease)}
.ecard:hover .ecard-go i,.ecard:focus-visible .ecard-go i{transform:translateX(6px) rotate(-45deg)}
.ecard-img{position:relative;min-height:240px;overflow:hidden}
.ecard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--gp-ease)}
.ecard:hover .ecard-img img{transform:scale(1.05)}
@media (min-width:900px){.ecard{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
@media (max-width:719px){.ecard{top:calc(78px + var(--i) * 8px);min-height:0;margin-bottom:20px;border-radius:22px}.ecard-img{min-height:190px}.ecard-in{padding:26px 22px}}

/* Verified outcomes: the same stack on navy with white case cards */
#work.xw{background:var(--gp-navy) !important;padding:clamp(80px,10vw,140px) 0 !important}
#work.xw .work-header{margin-bottom:clamp(40px,5vw,64px)}
#work.xw .work-stat-num{color:var(--gp-orange) !important}
.xw .ecase,.xw .ecase:nth-child(n){background:#fff;color:var(--gp-text);border-color:transparent;box-shadow:0 -24px 60px -30px rgba(0,0,0,.7)}
.xw .ecase h3{color:var(--gp-navy) !important}
.xw .ecase .ecard-num{color:var(--gp-orange-text)}
.xw .ecase .ecard-go{color:var(--gp-orange-text)}
.ekpi{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:10px;width:100%;max-width:460px}
.ekpi li{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--gp-line)}
.ekpi b{font:900 clamp(28px,3vw,44px)/1 var(--gp-display);letter-spacing:-.03em;color:var(--gp-orange-deep)}
.ekpi span{font-weight:700;color:var(--gp-text-2);font-size:15px}
.xw .ecase .ecard-img{background:var(--gp-bg-soft)}

/* ---------- Numbers that don't lie: bright navy result cards with arrows ---------- */
#verified-results.rs{background:#fff !important;padding:clamp(80px,10vw,140px) 0 !important}
.rs-grid{display:grid;gap:40px;align-items:center}
@media (min-width:1024px){.rs-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr)}}
.rs-head p{margin:18px 0 30px}
.rs-nav{display:flex;align-items:center;gap:14px}
.rs-btn{width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(1,17,52,.2);background:#fff;color:var(--gp-navy);font-size:22px;line-height:1;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--gp-ease)}
.rs-btn:hover,.rs-btn:focus-visible{background:var(--gp-orange);border-color:var(--gp-orange);transform:translateY(-2px)}
.rs-count{font:800 14px var(--gp-display);letter-spacing:.12em;min-width:84px;text-align:center;color:var(--gp-navy)}
.rs-viewport{display:grid;grid-auto-flow:column;grid-auto-columns:min(540px,88%);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 4px 34px;overscroll-behavior-x:contain;outline:none}
.rs-viewport::-webkit-scrollbar{display:none}
.rs-card{scroll-snap-align:start;display:flex;flex-direction:column;background:radial-gradient(90% 60% at 100% 0%,rgba(0,54,230,.45),transparent 60%),linear-gradient(160deg,var(--gp-navy-2),var(--gp-navy));color:#fff;border-radius:26px;padding:clamp(24px,3vw,36px);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -34px rgba(1,17,52,.6);transition:transform .5s var(--gp-ease)}
.rs-card:hover{transform:translateY(-6px)}
.rs-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.rs-tag{padding:7px 12px;border-radius:999px;background:var(--gp-orange);color:var(--gp-navy);font:800 11px/1 var(--gp-body);letter-spacing:.1em;text-transform:uppercase}
.rs-no{font:800 13px var(--gp-display);letter-spacing:.12em;color:rgba(255,255,255,.6)}
.rs-card h3{font:800 clamp(26px,2.6vw,38px)/1.05 var(--gp-display) !important;color:#fff !important;letter-spacing:-.02em;margin:0}
.rs-sub{color:rgba(255,255,255,.75);font-size:14.5px;margin:8px 0 20px}
.rs-kpis{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.rs-kpis li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.rs-kpis b{font:900 clamp(28px,3vw,42px)/1 var(--gp-display);color:var(--gp-orange);letter-spacing:-.03em;min-width:4.4ch}
.rs-kpis strong{display:block;color:#fff;font-weight:800;font-size:15px}
.rs-kpis span{display:block;color:rgba(255,255,255,.78);font-size:13.5px;margin-top:2px}
.rs-kpis em{display:block;font-style:normal;color:rgba(255,255,255,.55);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.rs-open{margin-top:auto;align-self:flex-start;border:0;border-radius:999px;padding:14px 22px;background:var(--gp-orange);color:var(--gp-navy);font:800 14px var(--gp-body);cursor:pointer;transition:transform .3s var(--gp-ease),background .3s}
.rs-open:hover,.rs-open:focus-visible{background:#fff;transform:translateY(-2px)}
#verified-results .vr-footer{text-align:center;margin-top:24px}
#verified-results .vr-footer p{color:var(--gp-text-2) !important;font-weight:600}

/* ---------- AI section on navy, glass feature cards ---------- */
#ai-spotlight.gp-dark{background:radial-gradient(60% 80% at 90% 10%,rgba(0,54,230,.35),transparent 60%),var(--gp-navy) !important;padding:clamp(80px,10vw,140px) 0 !important}
#ai-spotlight .body-lg{color:rgba(255,255,255,.82) !important;font-size:clamp(16px,1.35vw,18px) !important;line-height:1.7}
#ai-spotlight .ai-feature{position:relative;display:flex;gap:16px;align-items:flex-start;padding:22px 24px !important;border-radius:18px !important;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important;box-shadow:none !important;transition:transform .45s var(--gp-ease),background .45s,border-color .45s}
#ai-spotlight .ai-feature:hover{transform:translateX(8px);background:rgba(254,139,3,.08) !important;border-color:rgba(254,139,3,.5) !important}
#ai-spotlight .ai-feature-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--gp-orange) !important;color:var(--gp-navy) !important;flex:0 0 50px;font-size:0}
#ai-spotlight .ai-feature-icon svg{width:24px;height:24px}
#ai-spotlight .ai-feature-text strong{display:block;color:#fff !important;font:800 clamp(17px,1.4vw,20px)/1.25 var(--gp-display) !important;margin-bottom:6px}
#ai-spotlight .ai-feature-text span{color:rgba(255,255,255,.78) !important;font-size:15px;line-height:1.6}
.ai-feature-no{position:absolute;right:18px;top:16px;font:800 12px var(--gp-display);letter-spacing:.14em;color:rgba(255,255,255,.35)}
#ai-spotlight .btn-blue{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border:0 !important;box-shadow:0 14px 34px -14px rgba(254,139,3,.7) !important}
#ai-spotlight .ai-visual{box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08) !important}
#ai-spotlight .ai-metric-val{font-size:clamp(26px,2.4vw,34px) !important;font-weight:900 !important;color:var(--gp-orange) !important}

/* ---------- How it works: five numbered steps on a rail that fills as you scroll ---------- */
#process.pw{background:var(--gp-bg-soft) !important;padding:clamp(80px,10vw,140px) 0 !important}
.pw .process-header{text-align:center;max-width:960px;margin:0 auto clamp(48px,6vw,84px)}
.pw .process-header p{margin:18px auto 0}
.pw-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:18px}
.pw-rail{display:none}
.pw-step{position:relative;background:#fff;border-radius:22px;padding:30px 24px 30px;border:1px solid var(--gp-line);box-shadow:0 20px 40px -32px rgba(1,17,52,.35);transition:transform .5s var(--gp-ease),box-shadow .5s,border-color .5s}
.pw-no{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;border:3px solid var(--gp-line);font:900 22px/1 var(--gp-display);color:var(--gp-navy);margin-bottom:20px;transition:background .5s,border-color .5s,box-shadow .5s,color .5s}
.pw-step.on{border-color:rgba(254,139,3,.55)}
.pw-step.on .pw-no{background:var(--gp-orange);border-color:var(--gp-orange);box-shadow:0 0 0 8px rgba(254,139,3,.16)}
.pw-step:hover{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(1,17,52,.4)}
.pw-step h3{font:800 clamp(20px,1.6vw,24px)/1.15 var(--gp-display) !important;color:var(--gp-navy) !important;margin:0 0 10px}
.pw-step p{color:var(--gp-text-2);font-size:15px;line-height:1.6;margin:0}
.pw-cta{text-align:center;margin-top:48px}
@media (min-width:1024px){
  .pw-steps{grid-template-columns:repeat(5,minmax(0,1fr));padding-top:32px}
  .pw-rail{display:block;position:absolute;left:24px;right:24px;top:30px;height:4px;border-radius:4px;background:var(--gp-line);z-index:1}
  .pw-rail i{position:absolute;inset:0;border-radius:4px;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--gp-orange),var(--gp-orange-deep))}
  .pw-step{padding-top:52px}
  .pw-no{position:absolute;top:-32px;left:24px;z-index:2;margin:0}
}

/* ---------- Our story: big type, principles, bold founder cards ---------- */
#about-preview.st{background:#fff !important;padding:clamp(80px,10vw,140px) 0 !important;text-align:left}
#about-preview.st .eyebrow{justify-content:flex-start !important}
.st-grid{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
@media (min-width:1024px){.st-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.st-copy h2{margin:14px 0 24px}
.st-copy p{font-size:clamp(16px,1.35vw,18px);line-height:1.75;color:var(--gp-text-2);margin:0 0 16px;max-width:58ch}
.st-copy .st-lead{font-size:clamp(18px,1.6vw,22px);color:var(--gp-text);font-weight:600;line-height:1.55}
.st-copy p strong{color:var(--gp-navy)}
.st-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 32px;padding:0}
.st-facts strong{display:inline-block;padding:13px 18px;border-radius:14px;background:var(--gp-navy);color:#fff;font:800 16px/1 var(--gp-display);transition:transform .35s var(--gp-ease)}
.st-facts li:nth-child(2) strong{background:var(--gp-orange);color:var(--gp-navy)}
.st-facts li:hover strong{transform:translateY(-3px) rotate(-1.5deg)}
.st-founders{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.fx-card{position:relative;display:block;border-radius:26px !important;overflow:hidden;aspect-ratio:3/4.1;background:var(--gp-navy) !important;cursor:pointer;isolation:isolate;padding:0 !important;border:0 !important;box-shadow:0 40px 80px -40px rgba(1,17,52,.6) !important;transition:transform .6s var(--gp-ease),box-shadow .6s !important}
.fx-card:nth-child(2){margin-top:56px}
.fx-img{position:absolute;inset:0;z-index:-2}
.fx-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1.2s var(--gp-ease)}
.fx-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,17,52,0) 38%,rgba(1,17,52,.94) 100%)}
.fx-card:hover,.fx-card:focus-visible{transform:translateY(-8px);box-shadow:0 50px 90px -40px rgba(1,17,52,.7) !important}
.fx-card:hover .fx-img img{transform:scale(1.06)}
.fx-yrs{position:absolute;top:16px;left:16px;padding:10px 14px;border-radius:14px;background:var(--gp-orange);color:var(--gp-navy);font:800 11px/1.2 var(--gp-body);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 12px 30px -12px rgba(254,139,3,.7)}
.fx-yrs b{display:block;font:900 28px/1 var(--gp-display);letter-spacing:-.02em;margin-bottom:2px}
.fx-info{position:absolute;left:20px;right:20px;bottom:20px;color:#fff;text-align:left}
.fx-info .founder-role{color:var(--gp-orange) !important;font:800 12px/1 var(--gp-body) !important;letter-spacing:.16em !important;text-transform:uppercase}
.fx-info .founder-name{font:800 clamp(22px,2.1vw,30px)/1.05 var(--gp-display) !important;color:#fff !important;margin:8px 0 12px;letter-spacing:-.02em}
.fx-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 14px;padding:0}
.fx-tags li{font:700 11px/1.2 var(--gp-body);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.fx-info .founder-read-btn{display:inline-flex;gap:8px;align-items:center;font:800 14px var(--gp-body);color:#fff !important;background:none !important;border:0 !important;border-bottom:2px solid var(--gp-orange) !important;border-radius:0 !important;padding:0 0 4px !important}
@media (max-width:600px){.st-founders{grid-template-columns:1fr}.fx-card:nth-child(2){margin-top:0}.fx-card{aspect-ratio:4/4.6}}
#hero.hx .hero-h1{max-width:none !important;font-size:clamp(40px,6.1vw,92px) !important;margin:18px 0 22px !important}
#hero.hx .hero-content{padding-top:calc(var(--nav-h,72px) + 30px);padding-bottom:110px}
.hx-mark{width:52px;margin-bottom:16px}
#hero.hx .hero-sub{margin-bottom:30px !important}
.hx-chips{margin-top:26px}
.xs-head .svc-problems{justify-content:flex-start !important;align-items:flex-start !important;flex-direction:row !important;gap:6px 34px !important}
.xs-head .svc-problems span:not(:last-child)::after{position:absolute;right:-22px;margin:0;opacity:1;font-weight:700}
@media (max-width:700px){.xs-head .svc-problems{flex-direction:column !important;gap:4px !important}}
#hero.hx .hero-content{max-width:1320px !important;margin:0 auto}
.hx-inner{width:100%}
#hero.hx{min-height:max(100svh,640px)}

.xw .ekpi span{color:#46536E !important}
.xw .ekpi li{border-bottom-color:#E1E7F2 !important}
@media (min-width:1024px){#ai-spotlight h2,.st-copy h2{font-size:clamp(32px,3.7vw,56px) !important}}
.rs-kpis b{min-width:5.2ch}
#work.xw .work-meta-label{font-family:var(--gp-body) !important;color:rgba(255,255,255,.7) !important;letter-spacing:.12em}
@media (max-width:560px){.rs-kpis li{grid-template-columns:1fr;gap:6px}.rs-kpis b{min-width:0}}

/* ---------- Page heroes (Excel pattern): photo, navy fade from the left, frame line, breadcrumb ---------- */
section.ph{position:relative;isolation:isolate;overflow:hidden;background:var(--gp-navy) !important;min-height:min(860px,94svh);display:flex !important;align-items:center;padding:clamp(150px,15vw,190px) 0 clamp(70px,8vw,110px) !important}
section.ph > .container{position:relative;z-index:3;width:100%}
.ph-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ph-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;transform:scale(1.06);animation:ph-drift 24s ease-in-out infinite alternate}
@keyframes ph-drift{to{transform:scale(1.14) translate(-1.5%,-1%)}}
.ph-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(1,17,52,.97) 0%,rgba(1,17,52,.9) 34%,rgba(1,17,52,.5) 66%,rgba(1,17,52,.28) 100%),linear-gradient(0deg,rgba(1,17,52,.85) 0%,rgba(1,17,52,0) 38%)}
section.ph .hx-frame{z-index:2}
.ph-crumbs{position:absolute;z-index:3;top:calc(var(--nav-h,72px) + 44px);left:50%;transform:translateX(-50%);width:min(100% - 80px,var(--container,1200px) - 80px);display:flex;gap:10px;align-items:center;font:600 13px/1 var(--gp-body);color:rgba(255,255,255,.7)}
.ph-crumbs a{color:rgba(255,255,255,.85) !important;text-decoration:none}
.ph-crumbs a:hover{color:var(--gp-orange) !important}
.ph-crumbs [aria-current]{color:var(--gp-orange)}
.ph .hero-bg-grad,.ph .hero-bg-grid,.ph .work-hero-bg,.ph .services-hero-bg,.ph::before,.ph::after{display:none !important}
.ph h1,.ph .h1{color:#fff !important;font-size:clamp(40px,5.6vw,84px) !important;line-height:.98 !important;letter-spacing:-.035em !important;font-weight:800 !important;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.ph h1 span,.ph .h1 span{color:var(--gp-orange) !important;-webkit-text-fill-color:var(--gp-orange) !important;background:none !important}
.ph h1 em{font-family:var(--gp-serif) !important;font-style:italic !important;font-weight:400 !important;color:var(--gp-orange) !important}
.ph p{color:rgba(255,255,255,.86) !important;font-size:clamp(16px,1.4vw,19px) !important;line-height:1.65;max-width:58ch}
.ph .eyebrow{color:var(--gp-orange) !important}
.ph .btn-ghost{color:#fff !important;border-color:rgba(255,255,255,.45) !important;background:rgba(255,255,255,.06) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ph .filter-btn,.ph .s-nav-pill{background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.2) !important;color:#fff !important;backdrop-filter:blur(8px)}
.ph .filter-btn.active,.ph .s-nav-pill.active,.ph .filter-btn:hover,.ph .s-nav-pill:hover{background:var(--gp-orange) !important;border-color:var(--gp-orange) !important;color:var(--gp-navy) !important}
#contact-hero.ph .ph-veil{background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(1,17,52,.6),rgba(1,17,52,.92))}
#contact-hero.ph .ph-crumbs{justify-content:center}
.ph .hero-stat strong{color:var(--gp-orange) !important}
.ph .hero-stat span,.ph .response-note{color:rgba(255,255,255,.8) !important}
@media (max-width:760px){
  section.ph{min-height:0;padding:clamp(130px,34vw,150px) 0 70px !important}
  .ph-crumbs{top:calc(var(--nav-h,64px) + 26px);width:calc(100% - 40px)}
  .ph-veil{background:linear-gradient(180deg,rgba(1,17,52,.7) 0%,rgba(1,17,52,.88) 45%,rgba(1,17,52,.97) 100%)}
  .ph h1,.ph .h1{font-size:clamp(34px,9.6vw,48px) !important}
}
@media (prefers-reduced-motion:reduce){.ph-bg img{animation:none}}

/* Service page heroes: same fade and frame over the new photos */
#sv-hero .sv-hero-overlay{background:linear-gradient(90deg,rgba(1,17,52,.97) 0%,rgba(1,17,52,.88) 36%,rgba(1,17,52,.45) 68%,rgba(1,17,52,.22) 100%) !important;opacity:1 !important}
#sv-hero .sv-hero-img img{object-position:70% 50%}
#sv-hero{isolation:isolate}
#sv-hero .hx-frame{z-index:2}
#sv-hero .container{position:relative;z-index:3}

/* ---------- Closing CTA on every page: one bold navy card that stands out ---------- */
section.gp-cta{background:#fff !important;padding:clamp(60px,8vw,110px) 0 !important;text-align:center}
section.gp-cta::before,section.gp-cta::after{display:none !important}
section.gp-cta > .container{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:clamp(52px,7vw,100px) clamp(24px,5vw,80px) !important;background:radial-gradient(70% 90% at 100% 0%,rgba(0,54,230,.5),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(254,139,3,.25),transparent 60%),var(--gp-navy);box-shadow:0 50px 100px -50px rgba(1,17,52,.65);max-width:min(1200px,calc(100% - 40px))}
section.gp-cta > .container::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%)}
.gp-cta h2,.gp-cta .h2{color:#fff !important;margin-left:auto;margin-right:auto}
.gp-cta h2 em,.gp-cta h2 > span:not([style]){color:var(--gp-orange) !important}
.gp-cta p{color:rgba(255,255,255,.84) !important;margin-left:auto;margin-right:auto}
.gp-cta .eyebrow{color:var(--gp-orange) !important;justify-content:center}
.gp-cta [class*="inner"],.gp-cta .cta-box,.gp-cta [class*="-box"]{background:transparent !important;border:0 !important;box-shadow:none !important}
.gp-cta .btn-primary,.gp-cta .btn-gold{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border-color:var(--gp-orange) !important}
.gp-cta .btn-ghost,.gp-cta .btn-outline{color:#fff !important;border-color:rgba(255,255,255,.45) !important;background:transparent !important}
.gp-cta [class*="btns"],.gp-cta .cta-actions{justify-content:center}
.gp-cta input{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.25) !important;color:#fff !important}
.gp-cta input::placeholder{color:rgba(255,255,255,.6) !important}
.ph [class*="card"]{background-color:rgba(1,17,52,.6) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ph [class*="card"] h3,.ph [class*="name"]{color:#fff !important}

/* ---------- Pricing cards: bolder, interactive "What's included" ---------- */
.pricing-card{position:relative;border-radius:26px !important;padding:clamp(28px,3vw,40px) !important;transition:transform .5s var(--gp-ease),box-shadow .5s var(--gp-ease),border-color .5s !important}
.pricing-card:hover{transform:translateY(-10px);box-shadow:0 44px 80px -40px rgba(1,17,52,.45) !important;border-color:rgba(254,139,3,.6) !important}
.pricing-card.featured{box-shadow:0 0 0 2px var(--gp-orange),0 50px 90px -40px rgba(1,17,52,.7) !important}
.pricing-card.featured:hover{box-shadow:0 0 0 2px var(--gp-orange),0 60px 100px -40px rgba(254,139,3,.45) !important}
.pricing-card .tier-name{font:900 clamp(30px,2.6vw,40px)/1 var(--gp-display) !important;letter-spacing:-.03em !important}
.pricing-card .tier-ideal{font-family:var(--gp-body) !important;font-weight:800 !important;letter-spacing:.12em !important;font-size:11.5px !important}
.pricing-card .price-range{font:900 clamp(40px,3.6vw,56px)/1 var(--gp-display) !important;letter-spacing:-.035em !important}
.pricing-card .price-range em{font:italic 400 .5em var(--gp-serif) !important;letter-spacing:0 !important;margin-right:4px}
.pricing-card .price-note{font-family:var(--gp-body) !important;font-size:13px !important;font-weight:600;opacity:.85}
.pricing-card .tier-features::before{content:"What's included";display:block;font:800 12px/1 var(--gp-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gp-orange-text);margin:0 0 12px}
.pricing-card.featured .tier-features::before{color:var(--gp-orange)}
.pricing-card .tier-features li{padding:9px 10px !important;margin:0 -10px;border-radius:12px;transition:background .3s,transform .3s var(--gp-ease)}
.pricing-card .tier-features li:hover{background:rgba(254,139,3,.09);transform:translateX(4px)}
.pricing-card .check{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border:0 !important}
.pricing-card .tier-cta{transition:transform .35s var(--gp-ease),box-shadow .35s !important}
.pricing-card .tier-cta:hover{transform:translateY(-2px)}
.pricing-card .tier-badge{font-family:var(--gp-body) !important;font-weight:800 !important}

/* ---------- FAQ on every page: clear white cards, orange when open ---------- */
.faq-item,.sv-faq-item,.pfaq-item{background:#fff;border:1px solid var(--gp-line) !important;border-radius:18px;margin-bottom:12px;padding:0 24px;box-shadow:0 14px 30px -26px rgba(1,17,52,.35);transition:border-color .3s,box-shadow .3s,transform .3s var(--gp-ease)}
.faq-item:first-child{border-top:1px solid var(--gp-line) !important}
.faq-item:hover,.sv-faq-item:hover,.pfaq-item:hover{border-color:rgba(254,139,3,.55) !important;transform:translateY(-2px)}
.faq-item.open,.sv-faq-item.open,.pfaq-item.open{border-color:var(--gp-orange) !important;box-shadow:0 26px 50px -30px rgba(254,139,3,.5)}
.faq-question,.faq-q,.sv-faq-q,.pfaq-q{font-family:var(--gp-display) !important;font-weight:800 !important;font-size:17px !important;line-height:1.35 !important;color:var(--gp-navy) !important;padding:22px 0 !important}
.faq-question:hover,.faq-q:hover,.sv-faq-q:hover,.pfaq-q:hover{color:var(--gp-navy) !important}
.faq-chevron,.sv-faq-icon,.pfaq-icon{width:38px !important;height:38px !important;border-radius:50% !important;background:var(--gp-bg-soft) !important;border:0 !important;display:grid !important;place-items:center;flex:0 0 38px;color:var(--gp-navy) !important;transition:background .3s,transform .4s var(--gp-ease) !important}
.faq-item.open .faq-chevron,.sv-faq-item.open .sv-faq-icon,.pfaq-item.open .pfaq-icon{background:var(--gp-orange) !important;color:var(--gp-navy) !important}
.faq-answer,.faq-a,.sv-faq-a,.pfaq-a{color:var(--gp-text-2) !important;font-size:16px !important;line-height:1.7 !important}
.faq-grid h2,.faq-sticky h2,.sv-faq-header h2{font-size:clamp(32px,3.4vw,52px) !important}
.gp-dark .faq-item,.gp-dark .sv-faq-item,.gp-dark .pfaq-item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12) !important}
.gp-dark .faq-question,.gp-dark .faq-q,.gp-dark .sv-faq-q,.gp-dark .pfaq-q{color:#fff !important}
html body section .faq-grid h2,html body section .faq-sticky h2,html body section .sv-faq-header h2{font-size:clamp(30px,3.2vw,48px) !important}
html body .pricing-card.featured .check,html body .pricing-card .check{background:var(--gp-orange) !important;color:var(--gp-navy) !important}
.faq-section .faq-grid{max-width:1200px}
.faq-sticky .btn-primary,.faq-sticky a[class*="btn"]{background:var(--gp-navy) !important;border-color:var(--gp-navy) !important;color:#fff !important;border-radius:999px !important}
.pricing-card .check-icon{fill:none !important;color:var(--gp-navy) !important}

/* ---------- Promo popup: brand navy card, white text, orange accents ---------- */
#gp-promo-overlay{--gp-fg-rgb:255,255,255;background:rgba(1,17,52,.72) !important}
#gp-promo-card{background:radial-gradient(80% 60% at 100% 0%,rgba(0,54,230,.45),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(254,139,3,.22),transparent 60%),var(--gp-navy) !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:28px !important;box-shadow:0 50px 100px -30px rgba(0,0,0,.7) !important;padding:52px 40px 40px !important}
#gp-promo-card::before{display:none !important}
#gp-promo-card h2{font-family:var(--gp-display) !important;font-size:clamp(28px,4vw,40px) !important;line-height:1.05 !important;letter-spacing:-.03em !important;color:#fff !important}
#gp-promo-card h2 *{color:inherit}
#gp-promo-card h2 .gp-promo-gold{font-family:var(--gp-serif);font-style:italic;font-weight:400;color:var(--gp-orange) !important}
#gp-promo-card p.gp-promo-sub{font-family:var(--gp-body) !important;color:rgba(255,255,255,.84) !important;font-size:16px !important}
.gp-promo-eyebrow{background:rgba(254,139,3,.14) !important;border-color:rgba(254,139,3,.45) !important;color:var(--gp-orange) !important;font-family:var(--gp-body) !important;font-weight:800 !important}
.gp-promo-eyebrow .gp-pulse{background:#3DDC84 !important;box-shadow:0 0 10px #3DDC84 !important}
.gp-promo-cta{background:var(--gp-orange) !important;color:var(--gp-navy) !important;font-family:var(--gp-body) !important;box-shadow:0 18px 40px -16px rgba(254,139,3,.8) !important}
.gp-promo-cta:hover{background:#fff !important}
.gp-promo-cta-secondary{color:rgba(255,255,255,.8) !important}
.gp-promo-cta-secondary:hover{color:var(--gp-orange) !important}
.gp-promo-trust,.gp-promo-trust *{color:rgba(255,255,255,.72) !important}
.gp-promo-close{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.25) !important;color:#fff !important;font-size:24px !important;width:40px !important;height:40px !important}
.gp-promo-close:hover{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border-color:var(--gp-orange) !important}

/* Logo seats inside the hero frame line (Excel): header drops below the frame while over a hero */
html.gp-over-dark #navbar:not(.scrolled){margin-top:clamp(18px,2vw,28px)}
html.gp-over-dark #navbar:not(.scrolled) .nav-inner{align-items:center}
#nav-logo-img{height:46px !important;width:auto !important;max-width:none !important;display:block}
.nav-logo{display:flex !important;align-items:center}
@media (max-width:760px){
  html.gp-over-dark #navbar:not(.scrolled){margin-top:14px}
  #nav-logo-img{height:36px !important}
  html.gp-over-dark #navbar:not(.scrolled) .nav-inner{padding:0 24px !important}
}

/* ---------- Hero headline: Excel letter-rise slides ---------- */
.gp-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#hero.hx .hr-h1{font-size:clamp(40px,7.2vw,108px) !important;line-height:.94 !important;width:100%}
.hr-stage{display:grid;justify-items:center}
.hr-item{grid-area:1/1;visibility:hidden}
.hr-item.on,.hr-item.out{visibility:visible}
.hr-row{display:block;white-space:nowrap}
.hr-o{font-weight:inherit;color:var(--gp-orange)}
.hr-item .w{display:inline-block;white-space:nowrap}
.hr-item .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(8deg);transition:opacity .5s,transform .8s var(--gp-ease);transition-delay:calc(var(--d) * 24ms)}
.hr-item.on .ch{opacity:1;transform:none}
.hr-item.out .ch{opacity:0;transform:translateY(-.3em);transition-delay:calc(var(--d) * 8ms)}
.hr-item.now .ch{transition:none}
#hero.hx .hr-h1 span{color:#fff !important;-webkit-text-fill-color:#fff !important}
#hero.hx .hr-h1 .hr-o,#hero.hx .hr-h1 .hr-o span{color:var(--gp-orange) !important;-webkit-text-fill-color:var(--gp-orange) !important}
.no-gsap .gs-hidden,.no-gsap .gs,.no-gsap .hero-eyebrow,.no-gsap .hero-h1,.no-gsap .hero-sub,.no-gsap .hero-ctas{opacity:1 !important;transform:none !important;visibility:visible !important}
.gp-promo-close{left:auto !important;right:16px !important;top:16px !important}

/* ---------- Header logo placement (owner): far left on inner pages so it never
     sits over the hero copy; the homepage keeps the centred bar ---------- */
/* Round 18 (owner): the homepage bar now matches every inner page. The
   `:not(.gp-home)` exclusion used to keep the homepage on a centred,
   container-width bar while the inner pages ran edge to edge. The owner wants
   one header everywhere: logo hard left, Book a Free Call and MENU hard right. */
html.gp-over-dark #navbar:not(.scrolled) .nav-inner{max-width:none !important;padding-left:clamp(20px,2.4vw,40px) !important;padding-right:clamp(20px,2.4vw,40px) !important}
html.gp-over-dark #navbar:not(.scrolled) .nav-logo{margin-right:auto}
@media (max-width:760px){html.gp-over-dark #navbar:not(.scrolled) .nav-inner{padding-left:16px !important;padding-right:16px !important}}

/* ============================================================
   Batch 1: pinned number stepper + why-choose tiles and photo rail
   (mechanism measured on scnsoft.com, rebuilt in GridPoint colours)
   ============================================================ */
.gp-steps{--hh:84px;position:relative;background:#fff !important;padding:0 !important}
.gp-steps-pane{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));overflow:hidden;transition:background-color 1s ease-in-out;background:#F4F7FD}
.gp-steps-head{padding-top:clamp(28px,3.4vw,54px)}
.gp-steps-head h2{margin:12px 0 0}
.gp-tally{display:flex;flex-wrap:wrap;align-items:center;margin-top:18px;min-height:34px}
.gp-tally-item{margin:0;font:700 0/1 var(--gp-body);opacity:0;visibility:hidden;color:var(--gp-text-2);white-space:nowrap;transition:font-size .6s ease-in-out,margin .6s ease-in-out,opacity .6s ease-in-out,visibility .6s}
.gp-tally-item.on{font-size:16px;margin-right:36px;opacity:1;visibility:visible}
.gp-tally-item mark{background:none;color:var(--c,var(--gp-orange));font-weight:900;font-family:var(--gp-display)}
.gp-steps-slides{position:relative;height:calc(100% - 0px)}
.gp-step{position:absolute;left:0;right:0;top:100%;height:100%;visibility:hidden;transition:top 1s ease-out,visibility 1s}
.gp-step.is-on{top:0;visibility:visible;transition:top 1s cubic-bezier(.21,.69,.39,.96),visibility 1s}
.gp-step.is-back{transition-duration:.45s;transition-timing-function:ease-in-out}
.gp-step-in{display:grid;gap:clamp(24px,4vw,64px);align-items:center;height:100%;max-width:1240px;margin:0 auto;padding:0 40px clamp(20px,4vw,60px)}
@media (min-width:1024px){.gp-step-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.gp-step-media{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(1,17,52,.5);opacity:0;transform:translateY(200px);transition:opacity .8s ease,transform 1s cubic-bezier(.21,.69,.39,.96)}
.gp-step-media img{display:block;width:100%;height:100%;max-height:44vh;object-fit:cover}
.gp-step-copy{opacity:0;transform:translateY(450px);transition:opacity .8s ease,transform 1s cubic-bezier(.21,.69,.39,.96)}
.gp-step.is-on .gp-step-media,.gp-step.is-on .gp-step-copy{opacity:1;transform:none}
.gp-step.is-past .gp-step-media{opacity:0;transform:translateX(-150%)}
.gp-step.is-past .gp-step-copy{opacity:0;transform:translateX(150%)}
.gp-step-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px;margin:0 0 14px}
.gp-step-num{background:var(--c,var(--gp-orange));color:#fff;font:900 clamp(38px,4.6vw,72px)/1 var(--gp-display);letter-spacing:-.04em;padding:14px 20px;border-radius:18px;box-shadow:0 20px 40px -20px rgba(1,17,52,.45)}
.gp-step-cap{font:800 clamp(28px,3.4vw,52px)/1.02 var(--gp-display);letter-spacing:-.03em;color:var(--gp-navy)}
.gp-step-copy p{font-size:clamp(15px,1.25vw,17.5px);line-height:1.68;color:var(--gp-text-2);max-width:52ch;margin:0 0 22px}
.gp-step-cta{display:inline-flex;align-items:center;gap:10px;font:800 15px var(--gp-body);color:var(--gp-navy);border:1.5px solid rgba(1,17,52,.25);border-radius:999px;padding:13px 22px;transition:background .3s,color .3s,border-color .3s,transform .3s var(--gp-ease)}
.gp-step-cta:hover{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy);transform:translateY(-2px)}
.gp-steps-after{padding:clamp(48px,6vw,80px) 40px clamp(60px,8vw,110px)}
.gp-steps-lead{font-size:clamp(16px,1.35vw,18px);line-height:1.7;color:var(--gp-text-2);max-width:62ch;margin:0 0 40px}
/* Phones: the stepper runs here too (owner: he could not see it, because it
   used to flatten to a plain stack below 900px). The pane still has to fit
   inside one screen, so the photo, the number and the copy are all scaled to
   the viewport rather than to a desktop column. Reduced motion and browsers
   without overflow-x:clip still fall back to the stack below. */
@media (max-width:900px){
  /* the heading block was taking 262px of a 772px pane, a third of the pinned
     screen, which left the panel content 161px short of fitting */
  html body .gp-steps-head{padding-top:14px}
  html body .gp-steps-head h2,
  html body .gp-steps-head .h2{font-size:clamp(20px,5.2vw,28px) !important;line-height:1.1 !important;margin:6px 0 0 !important}
  html body .gp-steps-head .eyebrow{margin-bottom:4px}
  html body .gp-tally{display:none}
  /* the media row takes whatever height is left over (minmax(0,1fr), so it
     can also shrink to nothing) and the copy row sizes to its content. The
     panel therefore fills the pinned screen exactly at any phone size and
     can never overflow it, instead of relying on a guessed vh cap. */
  .gp-step-in{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:stretch;padding:0 20px 14px;gap:14px}
  .gp-step-media{min-height:0;height:100%;margin:0}
  .gp-step-media img{max-height:none;height:100%;width:100%;object-fit:cover}
  html body .gp-step-num{font-size:clamp(28px,7.4vw,38px);padding:7px 12px;border-radius:13px}
  html body .gp-step-cap{font-size:clamp(19px,4.8vw,26px)}
  html body .gp-step-h{margin:0 0 9px;gap:0 12px}
  html body .gp-step-copy p{font-size:14.5px;line-height:1.5;margin:0 0 12px;max-width:44ch}
  html body .gp-step-cta{padding:9px 15px;font-size:13.5px}
  .gp-steps-after{padding:32px 20px 60px}
  /* the outgoing panel throws its halves sideways; on a narrow screen that
     would widen the page, and the pane clips rather than scrolls */
  .gp-steps-pane{overflow:clip}
}
html.gp-nosteps .gp-steps{height:auto !important}
html.gp-nosteps .gp-steps-pane{position:static;height:auto}
html.gp-nosteps .gp-step{position:static;height:auto;visibility:visible;padding:26px 0;border-top:1px solid var(--gp-line)}
html.gp-nosteps .gp-step-media,html.gp-nosteps .gp-step-copy{opacity:1;transform:none}
html.gp-nosteps .gp-tally{display:none}

/* Why choose: number tiles with a details panel + photo rail with arrows */
.wc{background:var(--gp-bg-soft) !important;padding:clamp(70px,9vw,120px) 0 !important}
.wc h2{margin:12px 0 clamp(32px,4vw,52px)}
.wc-grid{display:grid;gap:18px}
@media (min-width:1024px){.wc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);grid-template-rows:auto auto}.wc-rail{grid-row:1}.wc-nav{grid-column:2}}
.wc-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wc-tile{position:relative;background:var(--tint,#F4F7FD);border-radius:20px;padding:clamp(22px,2.4vw,32px);min-height:150px;display:flex;flex-direction:column;justify-content:center;transition:transform .45s var(--gp-ease),box-shadow .45s}
.wc-tile:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(1,17,52,.4)}
.wc-tile-n{font:900 clamp(30px,3.2vw,44px)/1 var(--gp-display);letter-spacing:-.035em;color:var(--gp-navy)}
.wc-tile-c{margin-top:6px;font-size:15px;font-weight:600;color:var(--gp-text-2)}
.wc-more{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--gp-navy);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(1,17,52,.5);transition:background .3s,transform .3s var(--gp-ease)}
.wc-more span{font-size:0}
.wc-more::after{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translate(-1px,1px)}
.wc-more:hover,.wc-more[aria-expanded="true"]{background:var(--gp-orange);transform:rotate(45deg)}
.wc-pop{position:absolute;inset:0;z-index:3;background:var(--gp-navy);color:#fff;border-radius:20px;padding:22px 24px;overflow:auto;box-shadow:0 30px 60px -28px rgba(1,17,52,.7)}
.wc-pop strong{display:block;font:900 30px/1 var(--gp-display);color:var(--gp-orange)}
.wc-pop > span{display:block;font-weight:700;margin:4px 0 10px}
.wc-pop p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.85)}
.wc-close{position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.wc-rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px;outline:none}
.wc-rail::-webkit-scrollbar{display:none}
.wc-shot{margin:0;scroll-snap-align:start;border-radius:20px;overflow:hidden;aspect-ratio:16/11}
.wc-shot img{width:100%;height:100%;object-fit:cover;display:block}
.wc-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:4px}
.wc-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(1,17,52,.2);background:#fff;color:var(--gp-navy);font-size:20px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--gp-ease)}
.wc-arrow:hover{background:var(--gp-orange);border-color:var(--gp-orange);transform:translateY(-2px)}
@media (max-width:1023px){.wc-rail{grid-auto-columns:88%}.wc-nav{justify-content:center}}
@media (max-width:520px){.wc-tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gp-step,.gp-step-media,.gp-step-copy,.wc-tile{transition:none !important}}
/* the pane's own header takes space, so the slides get what is left */
.gp-steps-pane{display:flex;flex-direction:column}
.gp-steps-head{flex:0 0 auto}
.gp-steps-slides{flex:1 1 auto;min-height:0}
.gp-step-in{padding-top:8px}
.gp-steps-more{background:#fff !important;padding:clamp(48px,6vw,80px) 0 clamp(60px,8vw,110px) !important}
.gp-steps-more .gp-steps-after{padding:0 40px}
@media (max-width:900px){.gp-steps-more .gp-steps-after{padding:0 20px}}
/* overflow-x:hidden on body turns it into a scroll container and kills position:sticky.
   clip stops sideways scroll without that side effect. */
html,body{overflow-x:clip !important}
body{overflow-y:visible !important}
.gp-step.is-past{visibility:hidden}
@media (min-width:1024px){
  .wc-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto auto;align-items:start}
  .wc-tiles{grid-column:1;grid-row:1 / span 2}
  .wc-rail{grid-column:2;grid-row:1;grid-auto-columns:100%}
  .wc-nav{grid-column:2;grid-row:2;margin-top:14px}
  .wc-shot{aspect-ratio:4/3}
}
.wc-pop{inset:0 0 auto 0;height:auto;min-height:100%;z-index:6;overflow:visible}
.wc-tile{min-height:168px}

/* ============================================================
   Batch 2: How we work. Step rail (Droids "step by step" behaviour)
   and the what-goes-wrong / what-we-do table (ScienceSoft pattern)
   ============================================================ */
#hww-steps.hw{background:#fff !important;padding:clamp(70px,9vw,120px) 0 !important}
.hw-head{max-width:860px;margin-bottom:clamp(40px,5vw,64px)}
.hw-head h2{margin:12px 0 18px}
.hw-lead{font-size:clamp(16px,1.35vw,18px);line-height:1.7;color:var(--gp-text-2)}
.hw-steps{list-style:none;margin:0;padding:0;position:relative}
.hw-rail{position:absolute;left:29px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--gp-line)}
.hw-rail i{position:absolute;left:0;right:0;top:0;height:100%;border-radius:3px;transform-origin:top;transform:scaleY(var(--p,0));background:linear-gradient(180deg,var(--gp-orange),var(--gp-orange-deep));transition:transform .2s linear}
.hw-step{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);gap:clamp(18px,2.4vw,34px);padding:0 0 clamp(30px,4vw,52px)}
.hw-step-side{position:relative;z-index:2}
.hw-step-no{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#fff;border:3px solid var(--gp-line);font:900 19px/1 var(--gp-display);color:var(--gp-navy);transition:background .45s var(--gp-ease),border-color .45s,color .45s,box-shadow .45s,transform .45s var(--gp-ease)}
.hw-step.on .hw-step-no{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy);box-shadow:0 0 0 8px rgba(254,139,3,.16);transform:scale(1.04)}
.hw-step-body{padding-top:4px;opacity:.45;transform:translateY(14px);transition:opacity .6s var(--gp-ease),transform .6s var(--gp-ease)}
.hw-step.on .hw-step-body{opacity:1;transform:none}
.hw-step-body h3{font:800 clamp(24px,2.5vw,34px)/1.1 var(--gp-display) !important;color:var(--gp-navy) !important;letter-spacing:-.028em;margin:0}
.hw-step-meta{margin:6px 0 12px;font:800 12.5px/1 var(--gp-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gp-orange-text)}
.hw-step-body > p{margin:0 0 14px;font-size:clamp(15px,1.25vw,17px);line-height:1.7;color:var(--gp-text-2);max-width:62ch}
.hw-step-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hw-step-list li{position:relative;padding-left:26px;font-size:15px;color:var(--gp-text);font-weight:600}
.hw-step-list li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:12px;border-radius:4px;background:var(--gp-orange)}
@media (max-width:700px){
  .hw-step{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .hw-rail{left:21px}
  .hw-step-no{width:44px;height:44px;font-size:15px;border-width:2px}
  .hw-step-body{opacity:1;transform:none}
}

/* what usually happens / how GridPoint works */
#hww-compare{background:var(--gp-bg-soft) !important;padding:clamp(70px,9vw,120px) 0 !important}
#hww-compare h2{margin:12px 0 16px}
.ct-lead{font-size:clamp(16px,1.35vw,18px);line-height:1.7;color:var(--gp-text-2);max-width:62ch;margin:0 0 clamp(30px,4vw,48px)}
.ct-table{display:grid;gap:14px}
.ct-head,.ct-row{display:grid;gap:14px;align-items:stretch}
@media (min-width:860px){.ct-head,.ct-row{grid-template-columns:210px minmax(0,1fr) minmax(0,1fr)}}
.ct-head{font:800 14px/1.3 var(--gp-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gp-text-2)}
.ct-head .ct-good{position:relative;color:var(--gp-navy)}
.ct-ribbon{position:absolute;top:-30px;left:0;background:var(--gp-navy);color:#fff;font:800 11px/1 var(--gp-body);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:8px 8px 0 0}
.ct-row .ct-crit{display:flex;align-items:center;background:#E8EEFA;border-radius:16px;padding:20px;font:800 17px/1.25 var(--gp-display);color:var(--gp-navy)}
.ct-row .ct-bad,.ct-row .ct-good{background:#fff;border-radius:16px;padding:22px;border:1px solid var(--gp-line);display:flex;gap:14px;align-items:flex-start}
.ct-row .ct-good{border-color:rgba(254,139,3,.5);box-shadow:0 20px 40px -32px rgba(254,139,3,.5)}
.ct-row p{margin:0;font-size:15.5px;line-height:1.65;color:var(--gp-text-2)}
.ct-row .ct-good p{color:var(--gp-text)}
.ct-ico{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:900 17px/1 var(--gp-body)}
.ct-ico-bad{background:#FDE7E7;color:#B3261E}
.ct-ico-good{background:var(--gp-orange);color:var(--gp-navy)}
@media (max-width:859px){
  .ct-head{display:none}
  .ct-row{gap:10px;padding-bottom:14px}
  .ct-row .ct-bad::before{content:"What usually happens";display:block;font:800 11px/1 var(--gp-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gp-text-2);margin-bottom:8px}
  .ct-row .ct-good::before{content:"How GridPoint works";display:block;font:800 11px/1 var(--gp-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gp-orange-text);margin-bottom:8px}
  .ct-row .ct-bad,.ct-row .ct-good{display:block}
  .ct-ico{display:none}
}
/* desktop: steps alternate around a centre line (Droids "step by step" shape) */
@media (min-width:1024px){
  .hw-steps{padding-top:8px}
  .hw-rail{left:50%;transform:translateX(-50%)}
  .hw-step{grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);gap:0;align-items:start;padding-bottom:clamp(36px,4vw,64px)}
  .hw-step-side{grid-column:2;display:flex;justify-content:center}
  .hw-step-body{grid-column:1;text-align:right;padding-right:clamp(24px,3vw,48px)}
  .hw-step:nth-child(even) .hw-step-body{grid-column:3;text-align:left;padding-right:0;padding-left:clamp(24px,3vw,48px)}
  .hw-step .hw-step-list li{padding-left:0;padding-right:26px}
  .hw-step .hw-step-list li::before{left:auto;right:0}
  .hw-step:nth-child(even) .hw-step-list li{padding-left:26px;padding-right:0}
  .hw-step:nth-child(even) .hw-step-list li::before{left:0;right:auto}
  .hw-step-body > p,.hw-step-meta{margin-left:auto}
  .hw-step:nth-child(even) .hw-step-body > p{margin-left:0;margin-right:auto}
  .hw-step-body{opacity:.4;transform:translateY(20px)}
}

/* ============================================================
   Batch 3: pricing. Symptom cards, engagement models, risk table
   ============================================================ */
.pw-when{background:#fff !important;padding:clamp(60px,7vw,100px) 0 clamp(50px,6vw,84px) !important}
.pw-when-head{max-width:820px;margin-bottom:clamp(32px,4vw,48px)}
.pw-when-head h2{margin:12px 0 16px}
.pw-when-head p,.pm-head p{font-size:clamp(16px,1.35vw,18px);line-height:1.7;color:var(--gp-text-2);max-width:66ch}
.pw-cards{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.pw-cards{grid-template-columns:1fr 1fr}}
.pw-card{position:relative;background:#fff;border:1px solid var(--gp-line);border-radius:18px;padding:30px 26px 26px;overflow:hidden;transition:transform .45s var(--gp-ease),box-shadow .45s,border-color .45s}
.pw-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--gp-orange)}
.pw-card:nth-child(2)::before{background:var(--gp-royal)}
.pw-card:nth-child(3)::before{background:var(--gp-navy)}
.pw-card:nth-child(4)::before{background:var(--gp-orange-deep)}
.pw-card:hover{transform:translateY(-6px);box-shadow:0 30px 55px -34px rgba(1,17,52,.45);border-color:rgba(254,139,3,.5)}
.pw-card h3{font:800 clamp(19px,1.7vw,23px)/1.2 var(--gp-display) !important;color:var(--gp-navy) !important;margin:0 0 10px;letter-spacing:-.02em}
.pw-card p{margin:0;font-size:15.5px;line-height:1.65;color:var(--gp-text-2)}
.pw-quote{margin:clamp(32px,4vw,52px) 0 0;padding:clamp(28px,3.4vw,44px);border-radius:22px;background:var(--gp-bg-soft);border-left:5px solid var(--gp-orange)}
.pw-quote p{margin:0 0 20px;font:400 clamp(18px,1.9vw,26px)/1.45 var(--gp-serif);font-style:italic;color:var(--gp-navy);max-width:70ch}
.pw-quote footer{display:flex;align-items:center;gap:14px}
.pw-quote img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.pw-quote span{display:flex;flex-direction:column;font-size:14px;color:var(--gp-text-2)}
.pw-quote strong{color:var(--gp-navy);font-size:15.5px}

.pm{background:var(--gp-bg-soft) !important;padding:clamp(70px,9vw,120px) 0 !important}
.pm-head{max-width:860px;margin-bottom:clamp(32px,4vw,52px)}
.pm-head h2{margin:12px 0 16px}
.pm-list{display:grid;gap:16px}
.pm-row{display:grid;gap:clamp(18px,3vw,44px);background:#fff;border:1px solid var(--gp-line);border-radius:22px;padding:clamp(26px,3vw,40px);transition:border-color .4s,box-shadow .4s,transform .4s var(--gp-ease)}
.pm-row:hover{border-color:rgba(254,139,3,.55);box-shadow:0 30px 55px -36px rgba(1,17,52,.4);transform:translateY(-3px)}
@media (min-width:900px){.pm-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.pm-no{display:inline-block;font:900 13px/1 var(--gp-display);letter-spacing:.14em;color:var(--gp-orange-text);margin-bottom:10px}
.pm-row h3{font:800 clamp(22px,2.2vw,30px)/1.1 var(--gp-display) !important;color:var(--gp-navy) !important;margin:0;letter-spacing:-.025em}
.pm-lead{margin:8px 0 0;font-size:15px;color:var(--gp-text-2);font-weight:600}
.pm-when{margin:0 0 16px;font-size:15.5px;line-height:1.7;color:var(--gp-text-2)}
.pm-when strong,.pm-best strong{color:var(--gp-navy)}
.pm-best{margin:0 0 8px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.pm-body ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pm-body li{position:relative;padding-left:24px;font-size:15px;color:var(--gp-text-2)}
.pm-body li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--gp-orange)}
.pr-risks{background:#fff !important;padding:clamp(70px,9vw,120px) 0 !important}
.pr-risks h2{margin:12px 0 16px}

/* ============================================================
   Batch 4: industries, two tiers (ScienceSoft pattern)
   ============================================================ */
.ind{background:#fff !important;padding:clamp(70px,9vw,120px) 0 !important}
.ind-head{max-width:840px;margin-bottom:clamp(30px,4vw,46px)}
.ind-head h2{margin:12px 0 16px}
.ind-head p{font-size:clamp(16px,1.35vw,18px);line-height:1.7;color:var(--gp-text-2)}
.ind-tier{font:800 12.5px/1 var(--gp-body) !important;letter-spacing:.16em;text-transform:uppercase;color:var(--gp-orange-text) !important;margin:clamp(26px,3vw,38px) 0 16px}
.ind-focus-grid{display:grid;gap:16px}
@media (min-width:900px){.ind-focus-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ind-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.ind-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.ind-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ind-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 44px 22px 22px;background:#fff;border:1px solid var(--gp-line);border-radius:18px;text-decoration:none;transition:transform .4s var(--gp-ease),box-shadow .4s,border-color .4s}
.ind-card:hover{transform:translateY(-5px);border-color:rgba(254,139,3,.6);box-shadow:0 26px 48px -32px rgba(1,17,52,.42)}
.ind-card strong{font:800 16.5px/1.25 var(--gp-display);color:var(--gp-navy);letter-spacing:-.01em}
.ind-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(254,139,3,.12);color:var(--gp-navy);flex:0 0 52px}
.ind-ico svg{width:26px;height:26px}
.ind-go{position:absolute;top:18px;right:18px;color:var(--gp-orange-text);font-size:15px;transition:transform .35s var(--gp-ease)}
.ind-card:hover .ind-go{transform:translate(3px,-3px)}
.ind-focus{padding:clamp(24px,2.6vw,32px) 44px clamp(24px,2.6vw,32px) clamp(24px,2.6vw,32px);background:var(--gp-bg-soft);border-color:transparent}
.ind-focus .ind-ico{width:58px;height:58px;background:var(--gp-orange);color:var(--gp-navy)}
.ind-focus .ind-body{display:flex;flex-direction:column;gap:10px}
.ind-focus strong{font-size:clamp(20px,1.9vw,25px)}
.ind-text{font-size:15px;line-height:1.65;color:var(--gp-text-2)}
.ind-focus em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--gp-orange-text)}

/* ============================================================
   Batch 5: pinned sideways scroller (ThoughtWorks mechanic, 1:1 with scroll)
   ============================================================ */
.hpin{position:relative;background:var(--gp-navy) !important}
.hpin-sticky{position:sticky;top:var(--hh,84px);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.2vw,30px);padding:clamp(30px,4vw,54px) 0;height:calc(100vh - var(--hh,84px));overflow:hidden}
.hpin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hpin-head h2{color:#fff !important;margin:10px 0 0}
.hpin-head .eyebrow{color:var(--gp-orange) !important}
.hpin-all{flex:0 0 auto}
.hpin-wrap{overflow:hidden;margin-left:max(20px,calc((100vw - 1240px) / 2 + 20px))}
.hpin-track{display:flex;gap:24px;list-style:none;margin:0;padding:0;width:max-content;will-change:transform}
.hpin-card{flex:0 0 min(560px,82vw)}
.hpin-card > a{position:relative;display:block;height:clamp(330px,42vh,460px);border-radius:22px;overflow:hidden;text-decoration:none;background:var(--gp-navy-2);isolation:isolate}
.hpin-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--gp-ease)}
.hpin-card > a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,17,52,.15) 30%,rgba(1,17,52,.94) 100%)}
.hpin-card:hover img{transform:scale(1.05)}
.hpin-panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,30px)}
.hpin-tag{font:800 11px/1 var(--gp-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gp-orange)}
.hpin-title{font:800 clamp(21px,2vw,28px)/1.15 var(--gp-display);letter-spacing:-.025em;color:#fff}
.hpin-body{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.8);max-width:46ch}
.hpin-go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:800 14px var(--gp-body);color:var(--gp-orange)}
.hpin-card:hover .hpin-go i{transform:translateX(4px)}
.hpin-go i{font-style:normal;transition:transform .35s var(--gp-ease)}
.hpin-bars{display:flex;gap:8px}
.hpin-bars i{width:26px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);transition:background .35s}
.hpin-bars i.on{background:var(--gp-orange)}
@media (max-width:760px){
  .hpin-sticky{height:calc(100svh - var(--hh,72px));padding:22px 0}
  .hpin-wrap{margin-left:20px}
  .hpin-card{flex:0 0 84vw}
  .hpin-card > a{height:58vh}
  .hpin-all{display:none}
}
html.gp-nopin .hpin-sticky{position:static;height:auto}
html.gp-nopin .hpin-wrap{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
html.gp-nopin .hpin-track{transform:none !important}
html.gp-nopin .hpin-card{scroll-snap-align:start}

/* ============================================================
   Batch 6: client card stack (AI/works mechanic, GridPoint colours)
   ============================================================ */
.cstack{background:radial-gradient(70% 60% at 100% 0%,rgba(0,54,230,.4),transparent 60%),var(--gp-navy) !important;padding:clamp(70px,9vw,120px) 0 !important}
.cstack-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,44px)}
.cstack-head h2{color:#fff !important;margin:10px 0 0}
.cstack-head .eyebrow{color:var(--gp-orange) !important}
.cstack-nav{display:flex;gap:10px}
.cstack-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:19px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--gp-ease)}
.cstack-arrow:hover{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy);transform:translateY(-2px)}
.cstack-view{position:relative;height:clamp(520px,44vw,600px);perspective:none}
.cstack-stack{position:relative;height:clamp(460px,38vw,520px)}
.cstack-card{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px rgba(0,0,0,.65);will-change:transform,opacity;transform-origin:50% 0}
.cstack-card:nth-child(2){background:#E8EEFA}
.cstack-card:nth-child(3){background:#DCE5F5}
.cstack-img{border-radius:18px;overflow:hidden;background:var(--gp-bg-soft)}
.cstack-img img{width:100%;height:100%;object-fit:cover;display:block}
.cstack-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,2vw,28px) clamp(10px,1.6vw,22px)}
.cstack-meta{margin:0 0 8px;font:800 11.5px/1 var(--gp-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gp-orange-text)}
.cstack-card h3{font:800 clamp(24px,2.4vw,34px)/1.05 var(--gp-display) !important;color:var(--gp-navy) !important;margin:0 0 12px;letter-spacing:-.03em}
.cstack-text{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--gp-text-2);max-width:44ch}
.cstack-num{display:flex;align-items:baseline;gap:12px;margin:0 0 4px}
.cstack-num b{font:900 clamp(44px,5vw,74px)/1 var(--gp-display);letter-spacing:-.05em;color:var(--gp-navy)}
.cstack-num span{font-weight:700;color:var(--gp-text-2);font-size:15px}
.cstack-src{margin:0 0 18px;font-size:12.5px;color:var(--gp-text-2);opacity:.85}
.cstack-go{display:inline-flex;align-items:center;gap:9px;font:800 15px var(--gp-body);color:var(--gp-navy);align-self:flex-start;border-bottom:2px solid var(--gp-orange);padding-bottom:3px}
.cstack-go i{font-style:normal;transition:transform .3s var(--gp-ease)}
.cstack-go:hover i{transform:translateX(4px)}
.cstack-dots{display:flex;gap:8px;margin-top:18px}
.cstack-dots i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);transition:background .3s}
.cstack-dots i.on{background:var(--gp-orange)}
@media (max-width:820px){
  .cstack-view{height:auto}
  .cstack-stack{height:clamp(600px,120vw,760px)}
  .cstack-card{grid-template-columns:1fr;grid-template-rows:200px 1fr;padding:12px;border-radius:20px}
  .cstack-body{padding:8px 10px 14px}
  .cstack-text{display:none}
}
@media (prefers-reduced-motion:reduce){.cstack-card{transition:none !important}}
/* the theme forces section/article backgrounds transparent, so these need the same weight */
section.cstack.gp-dark{background:radial-gradient(70% 60% at 100% 0%,rgba(0,54,230,.4),transparent 60%),var(--gp-navy) !important}
article.cstack-card{background-color:#fff !important}
article.cstack-card:nth-child(2){background-color:#E8EEFA !important}
article.cstack-card:nth-child(3){background-color:#DCE5F5 !important}
section.hpin{background:var(--gp-navy) !important}
section.ind,section.pw-when,section.pr-risks,section.hw{background:#fff !important}
section.pm,section.wc{background:var(--gp-bg-soft) !important}
section.gp-steps-more{background:#fff !important}
/* cards sit inside a dark section, so reset the inherited light-on-dark tokens */
article.cstack-card{--gp-text:#0B1B3F;--gp-text-2:#46536E;--gp-fg-rgb:11,27,63;color:#0B1B3F}
article.cstack-card .cstack-text,article.cstack-card .cstack-num span,article.cstack-card .cstack-src{color:#46536E !important}
article.cstack-card .cstack-go{color:var(--gp-navy) !important}

/* ============================================================
   Batch 7: Work page, full-viewport stacking case cards
   ============================================================ */
.cases-full{display:block !important;gap:0 !important;grid-template-columns:none !important}
.cases-full .case-card{position:sticky;top:calc(var(--nav-h,72px) + 14px);height:calc(100vh - var(--nav-h,72px) - 34px);min-height:520px;display:grid !important;grid-template-columns:1fr;border-radius:26px;overflow:hidden;margin:0 0 26px;background-color:#fff !important;border:1px solid var(--gp-line);box-shadow:0 -22px 50px -30px rgba(1,17,52,.5);transform-origin:50% 0;will-change:transform,filter}
.cases-full .case-card.span-2{grid-column:auto}
.cases-full .case-card.is-dim{opacity:.3}
@media (min-width:1000px){.cases-full .case-card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.cases-full .case-img-wrap{position:relative;overflow:hidden;height:100%;min-height:200px;background:var(--gp-bg-soft)}
.cases-full .case-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--gp-ease)}
.cases-full .case-card:hover .case-img-wrap img{transform:scale(1.04)}
.cases-full .case-info{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(22px,3.4vw,54px);overflow:auto}
.cases-full .case-industry-tag{font:800 11.5px/1.3 var(--gp-body) !important;letter-spacing:.14em;text-transform:uppercase;color:var(--gp-orange-text) !important}
.cases-full .case-info .h3{font:800 clamp(26px,3vw,46px)/1.02 var(--gp-display) !important;letter-spacing:-.035em;color:var(--gp-navy) !important;margin:0}
.cases-full .case-url{font-size:13.5px;color:var(--gp-text-2);word-break:break-all}
.cases-full .case-work-done{font-size:13.5px;line-height:1.6;color:var(--gp-text-2)}
.cases-full .case-results{display:flex;flex-wrap:wrap;gap:8px}
.cases-full .result-chip{background:#FFF4E8 !important;color:var(--gp-orange-text) !important;border:1px solid rgba(254,139,3,.35) !important;font:800 13px/1 var(--gp-body);padding:9px 13px;border-radius:999px}
.cases-full .case-testimonial{font-size:14.5px;line-height:1.6;color:var(--gp-text-2);border-left:3px solid var(--gp-orange);padding-left:14px}
.cases-full .case-testimonial-author{margin-top:6px;font-weight:700;color:var(--gp-navy)}
.cases-full .case-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:999px){
  .cases-full .case-card{grid-template-rows:38% 1fr;height:calc(100svh - var(--nav-h,64px) - 24px)}
  .cases-full .case-testimonial,.cases-full .case-work-done{display:none}
}
@media (max-width:560px){.cases-full .case-info{padding:18px}}
html.gp-nostack .cases-full .case-card{position:static;height:auto;min-height:0}
.cases-full .case-img-wrap{aspect-ratio:auto !important;height:100% !important;padding:0 !important}
.cases-full .case-img-wrap img{position:absolute;inset:0}
.cases-full .case-img-wrap img{filter:none !important}

/* ============================================================
   Batch 8: "Start where you are" self-selection panel
   (Designli pattern: native <details name>, no JavaScript)
   ============================================================ */
section.gp-pick{background:var(--gp-bg-soft) !important;padding:clamp(70px,9vw,120px) 0 !important}
.gp-pick-card{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center;background:radial-gradient(80% 70% at 100% 0%,rgba(0,54,230,.45),transparent 60%),var(--gp-navy);border-radius:32px;padding:clamp(28px,4vw,60px)}
@media (min-width:1024px){.gp-pick-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.gp-pick-copy h2{color:#fff !important;margin:12px 0 18px}
.gp-pick-copy .eyebrow{color:var(--gp-orange) !important}
.gp-pick-copy p{color:rgba(255,255,255,.82);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.7;margin:0 0 14px;max-width:52ch}
.gp-pick-copy strong{color:#fff}
.gp-pick-copy .btn-gold{margin-top:10px}
.gp-pick-list{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:14px}
.gp-pick-list details{border-radius:16px;transition:background-color .25s}
.gp-pick-list details + details{margin-top:2px}
.gp-pick-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-radius:16px;cursor:pointer;font:700 clamp(16px,1.35vw,19px)/1.3 var(--gp-body);color:#fff;transition:background-color .25s}
.gp-pick-list summary::-webkit-details-marker{display:none}
.gp-pick-list summary:hover,.gp-pick-list details[open]{background:rgba(255,255,255,.07)}
.gp-pick-list details[open] summary{color:var(--gp-orange)}
.gp-pick-chev{flex:0 0 12px;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--gp-ease)}
.gp-pick-list details[open] .gp-pick-chev{transform:rotate(-135deg) translate(-3px,-3px)}
.gp-pick-body{padding:0 16px 20px}
.gp-pick-body p{margin:0 0 12px;font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.8)}
.gp-pick-body a{display:inline-flex;font:800 14.5px var(--gp-body);color:var(--gp-orange);border-bottom:2px solid rgba(254,139,3,.45);padding-bottom:2px}
.gp-pick-body a:hover{border-bottom-color:var(--gp-orange)}
.gp-pick-card{background:radial-gradient(80% 70% at 100% 0%,rgba(0,54,230,.45),transparent 60%),var(--gp-navy) !important;border:0 !important;box-shadow:none !important;border-radius:32px !important}

/* ---------- Round 2: FAQ answers sit on their own plain panel ---------- */
.faq-answer,.sv-faq-a,.pfaq-a,.faq-a{overflow:hidden}
.faq-item.open .faq-answer,.sv-faq-item.open .sv-faq-a,.pfaq-item.open .pfaq-a,.faq-item.open .faq-a{
  background:var(--gp-bg-soft);border:1px solid var(--gp-line);border-radius:14px;
  padding:18px 20px !important;margin:0 0 18px}
.faq-item.open .faq-answer p,.sv-faq-item.open .sv-faq-a p,.pfaq-item.open .pfaq-a p{margin:0;color:var(--gp-text) !important;font-size:15.5px;line-height:1.7}
.gp-dark .faq-item.open .faq-answer,.gp-dark .sv-faq-item.open .sv-faq-a,.gp-dark .pfaq-item.open .pfaq-a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.gp-dark .faq-item.open .faq-answer p,.gp-dark .sv-faq-item.open .sv-faq-a p{color:rgba(255,255,255,.9) !important}
/* the self-selection rows get the same treatment */
.gp-pick-list details[open] .gp-pick-body{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;margin:0 12px 14px;padding:16px 16px 18px}

/* ---------- Round 2: nothing may stay faded ---------- */
[data-noreveal] .gs-hidden,[data-noreveal] .gs,.hpin .gs-hidden,.gp-steps .gs-hidden,.cstack .gs-hidden{opacity:1 !important;transform:none !important}
[data-noreveal] h2 span,.hpin h2 span,.cstack h2 span,.gp-steps h2 span{opacity:1 !important;transform:none !important}
/* ghost buttons on navy: readable, not washed out */
.gp-dark .btn-ghost,.hpin .btn-ghost,.cstack .btn-ghost,.ph .btn-ghost,.gp-cta .btn-ghost,#hero .btn-ghost{
  color:#fff !important;border:1.5px solid rgba(255,255,255,.55) !important;background:rgba(255,255,255,.08) !important;font-weight:800 !important}
.gp-dark .btn-ghost:hover,.hpin .btn-ghost:hover,.cstack .btn-ghost:hover,.ph .btn-ghost:hover,.gp-cta .btn-ghost:hover{background:var(--gp-orange) !important;border-color:var(--gp-orange) !important;color:var(--gp-navy) !important}
/* the header "Book a Free Call" was a faint outline over photography */
#navbar .nav-cta,#navbar a[class*="btn"],#navbar .btn-gold,#navbar .btn-outline{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border-color:var(--gp-orange) !important;font-weight:800 !important;box-shadow:0 10px 24px -12px rgba(254,139,3,.8) !important}
#navbar .nav-cta:hover,#navbar a[class*="btn"]:hover{background:#fff !important;border-color:#fff !important}
/* ---------- Round 2: founder cards, faces above the text ---------- */
.fx-card{aspect-ratio:3/4.5}
.fx-img img{object-position:50% 8%}
.fx-card::after{background:linear-gradient(180deg,rgba(1,17,52,0) 34%,rgba(1,17,52,.6) 52%,rgba(1,17,52,.97) 74%)}
.fx-info{bottom:18px}
.fx-info .founder-name{margin:6px 0 10px}
.fx-tags{margin-bottom:12px}
@media (min-width:1024px){.fx-card{aspect-ratio:3/4.3}}
/* photo on top, details below: the face is never behind text */
.fx-card{aspect-ratio:auto !important;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--gp-navy) !important}
.fx-img{position:relative;inset:auto;z-index:0;grid-row:1;aspect-ratio:4/4.2;overflow:hidden}
.fx-img img{object-position:50% 14%}
.fx-card::after{display:none}
.fx-info{position:static;grid-row:2;padding:18px 20px 20px;background:var(--gp-navy)}
.fx-yrs{z-index:2}
@media (min-width:1024px){.fx-img{aspect-ratio:4/4}}

/* ============================================================
   Round 2: the snake path (thedroidsonroids.com "step by step")
   Cards alternate sides, a drawn line switchbacks between them,
   each numbered circle sits on the line, steps fade in at mid-screen.
   ============================================================ */
.snake{position:relative;list-style:none;margin:0;padding:0}
.snake-line{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;fill:none;pointer-events:none}
.snake-line path{fill:none;stroke:rgba(1,17,52,.22);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gp-dark .snake-line path{stroke:rgba(255,255,255,.28)}
.snake > li{position:relative;z-index:1}
.snake .pw-step,.snake .hw-step{background:none !important;border:0 !important;box-shadow:none !important;padding:0 0 clamp(26px,4vw,56px) !important;display:block !important;transform:none !important;opacity:0;transition:opacity .5s ease,transform .5s ease}
.snake .pw-step{transform:translateY(24px)}
.snake .pw-step.is-in,.snake .hw-step.is-in{opacity:1;transform:none}
.snake .pw-no,.snake .hw-step-no{position:relative !important;top:auto !important;left:auto !important;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:var(--gp-orange) !important;border:0 !important;color:var(--gp-navy) !important;font:900 26px/1 var(--gp-display);margin:0 0 16px !important;box-shadow:0 12px 26px -12px rgba(254,139,3,.8)}
.snake .pw-step h3,.snake .hw-step h3{font:800 clamp(24px,2.8vw,40px)/1.05 var(--gp-display) !important;letter-spacing:-.03em;color:var(--gp-navy) !important;margin:0 0 10px !important}
.gp-dark .snake .pw-step h3{color:#fff !important}
.snake .pw-step p,.snake .hw-step > p{font-size:clamp(15px,1.25vw,17.5px) !important;line-height:1.65;color:var(--gp-text-2) !important;max-width:42ch;margin:0}
@media (min-width:1000px){
  .snake > li{width:46%}
  .snake > li:nth-child(even){margin-left:auto;text-align:left}
  .snake > li:nth-child(odd){margin-right:auto}
  .snake .hw-step,.snake .pw-step{padding-bottom:clamp(40px,5vw,86px) !important}
  .snake > li:nth-child(odd) .hw-step-body,.snake > li:nth-child(odd) .pw-step{text-align:left}
}
@media (max-width:999px){
  .snake{padding-left:34px}
  .snake::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;border-radius:2px;background:rgba(1,17,52,.18)}
  .gp-dark .snake::before{background:rgba(255,255,255,.22)}
  .snake-line{display:none}
  .snake .pw-no,.snake .hw-step-no{position:absolute !important;left:-34px !important;top:0 !important;width:44px;height:44px;font-size:17px}
  .snake > li{padding-left:22px}
}
ol.snake{display:block !important;grid-template-columns:none !important;gap:0 !important;padding-top:0 !important}
ol.snake .pw-step{position:relative !important;top:auto !important}
@media (min-width:1000px){ol.snake > li{width:46%}}
@media (min-width:1000px){
  ol.snake > li{min-height:240px}
  ol.snake .pw-step,ol.snake .hw-step{padding:0 0 26px !important}
  ol.snake > li:nth-child(odd){padding-left:2%}
  ol.snake > li:nth-child(even){padding-right:2%}
}
/* the <svg> is the first child, so count list items by type: step 1 sits right, like the reference */
@media (min-width:1000px){
  ol.snake > li:nth-of-type(odd){margin-left:auto;margin-right:0;padding-left:2%;padding-right:0}
  ol.snake > li:nth-of-type(even){margin-left:0;margin-right:auto;padding-right:2%;padding-left:0}
}
/* the snake replaces the earlier centre-rail layout entirely */
ol.snake .hw-step{display:block !important;grid-template-columns:none !important}
ol.snake .hw-step-side{display:block !important}
ol.snake .hw-step-body{opacity:1 !important;transform:none !important;text-align:left !important;padding:0 !important;grid-column:auto !important}
ol.snake .hw-step-list li{padding-left:26px !important;padding-right:0 !important}
ol.snake .hw-step-list li::before{left:0 !important;right:auto !important}
ol.snake .hw-step-body > p,ol.snake .hw-step-meta{margin-left:0 !important;margin-right:0 !important}
ol.snake .hw-step.on .hw-step-no,ol.snake .hw-step-no{background:var(--gp-orange) !important;border:0 !important;box-shadow:0 12px 26px -12px rgba(254,139,3,.8) !important;transform:none !important}
@media (max-width:999px){
  .snake{padding-left:60px}
  .snake::before{left:22px}
  .snake > li{padding-left:0}
  .snake .pw-no,.snake .hw-step-no{left:-60px !important;width:44px;height:44px}
}

/* ============================================================
   Round 2: services page, full-width section stacking
   ============================================================ */
.svc-stack{position:relative}
.svc-stack-item{position:sticky;top:0;min-height:100vh;display:flex !important;align-items:center;padding:clamp(80px,9vw,120px) 0 clamp(50px,6vw,80px) !important;background:#fff !important;border-top:1px solid var(--gp-line);box-shadow:0 -24px 60px -36px rgba(1,17,52,.45);transform-origin:50% 0;will-change:transform,filter}
.svc-stack-item:nth-child(even){background:var(--gp-bg-soft) !important}
.svc-stack-item > .container{width:100%}
.svc-stack .pillar-grid{display:grid;gap:clamp(24px,3.2vw,56px);align-items:start}
@media (min-width:1000px){.svc-stack .pillar-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.svc-stack .pillar-num{font:900 clamp(40px,5vw,78px)/1 var(--gp-display) !important;color:rgba(1,17,52,.1) !important;margin-bottom:-14px}
.svc-stack .pillar-label h2{font-size:clamp(28px,3.4vw,50px) !important;margin:10px 0 12px}
.svc-stack .pillar-label .body-lg{font-size:clamp(15px,1.3vw,17.5px) !important;line-height:1.65;color:var(--gp-text-2) !important;max-width:46ch}
.svc-stack .tool-chips{gap:6px;margin-top:14px}
.svc-stack .tool-chip{font-size:12px;padding:7px 12px}
/* "What you get" is the card that has to stand out */
.svc-stack .wg-block{margin-top:20px;background:var(--gp-navy) !important;border-radius:20px;padding:22px 24px 24px;box-shadow:0 26px 50px -28px rgba(1,17,52,.6)}
.svc-stack .wg-block-label{display:inline-block;font:800 11.5px/1 var(--gp-body) !important;letter-spacing:.16em;text-transform:uppercase;color:var(--gp-navy) !important;background:var(--gp-orange);padding:8px 13px;border-radius:999px;margin-bottom:14px}
.svc-stack .wg-list{display:grid;gap:9px}
.svc-stack .wg-item{position:relative;padding-left:26px;color:#fff !important;font-size:14.8px;line-height:1.5;font-weight:600}
.svc-stack .wg-item::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:13px;border-radius:4px;background:var(--gp-orange)}
.svc-stack .pillar-deliverables{display:grid;gap:12px}
@media (min-width:1280px){.svc-stack .pillar-deliverables{grid-template-columns:1fr 1fr}}
.svc-stack .deliverable{background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:16px;padding:18px 20px !important;transition:transform .4s var(--gp-ease),border-color .4s,box-shadow .4s}
.svc-stack .deliverable:hover{transform:translateY(-4px);border-color:rgba(254,139,3,.6) !important;box-shadow:0 22px 44px -30px rgba(1,17,52,.45)}
.svc-stack .deliverable-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.svc-stack .d-icon{font-size:20px;line-height:1}
.svc-stack .deliverable .h4{font:800 16px/1.25 var(--gp-display) !important;color:var(--gp-navy) !important}
.svc-stack .deliverable p{font-size:14px !important;line-height:1.55;color:var(--gp-text-2) !important;margin:0}
.svc-stack .speed-badge{font-size:10.5px;padding:5px 9px;border-radius:999px;background:#FFF4E8;color:var(--gp-orange-text);font-weight:800}
@media (max-width:999px){
  .svc-stack-item{position:static;min-height:0;padding:clamp(48px,8vw,70px) 0 !important;box-shadow:none}
  .svc-stack .wg-block{margin-top:16px}
}
html.gp-nostack .svc-stack-item{position:static;min-height:0}

/* ---------- Round 2: mobile menu fits the screen and scrolls cleanly ---------- */
@media (max-width:860px){
  #gpMenu{grid-template-columns:1fr;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #gpMenu .gm-left{padding:76px 22px 8px}
  #gpMenu .gm-list{gap:0}
  #gpMenu .gm-list a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  #gpMenu .gm-list a span{font-size:clamp(26px,7.4vw,34px);line-height:1.08}
  #gpMenu .gm-list a small{margin:1px 0 0;font-size:10.5px;letter-spacing:.16em}
  #gpMenu .gm-cta{margin-top:18px;align-self:stretch;text-align:center;justify-content:center}
  #gpMenu .gm-right{padding:18px 22px 40px;border-top:1px solid rgba(255,255,255,.12);margin-top:16px}
  #gpMenu .gm-logo{width:150px;margin-bottom:16px}
  #gpMenu .gm-label{margin:14px 0 6px;font-size:10.5px}
  #gpMenu .gm-big{font-size:22px}
  #gpMenu .gm-text{font-size:15px}
  /* the close button gets its own row so it never sits on a link */
  #gpMenu .gm-close{position:fixed;top:14px;right:14px;width:46px;height:46px;font-size:26px;background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy);z-index:5;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
}
#gpMenu .gm-cta{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border:0 !important;border-radius:999px !important;padding:15px 26px !important;font:800 15px var(--gp-body) !important;box-shadow:0 14px 30px -14px rgba(254,139,3,.8) !important}
#gpMenu .gm-cta:hover{background:#fff !important}
@media (max-width:860px){
  #gpMenu .gm-cta{display:flex !important;align-items:center;justify-content:center;width:100%;min-height:54px;margin:20px 0 6px !important}
  #gpMenu .gm-left{padding-bottom:20px}
}
@media (max-width:860px){
  #gpMenu{display:block !important}
  #gpMenu .gm-left{display:block;padding:74px 22px 24px}
  #gpMenu .gm-right{display:block}
}
/* mobile: the rail fills as you go and the current step lifts forward */
.snake-fill{display:none}
@media (max-width:999px){
  .snake-fill{display:block;position:absolute;left:22px;top:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gp-orange),var(--gp-orange-deep));transition:height .25s linear;z-index:0}
  .snake > li{transition:transform .45s var(--gp-ease)}
  .snake .pw-no,.snake .hw-step-no{background:#fff !important;color:var(--gp-navy) !important;box-shadow:0 0 0 2px var(--gp-line) !important;transition:background .35s,box-shadow .35s,transform .35s var(--gp-ease)}
  .snake > li.is-here .pw-no,.snake > li.is-here .hw-step-no{background:var(--gp-orange) !important;color:var(--gp-navy) !important;box-shadow:0 0 0 7px rgba(254,139,3,.2) !important;transform:scale(1.08)}
  .snake > li.is-here .pw-step h3,.snake > li.is-here .hw-step h3{color:var(--gp-orange-text) !important}
  .gp-dark .snake > li.is-here .pw-step h3{color:var(--gp-orange) !important}
  .snake > li:not(.is-here){opacity:.82}
  .snake > li.is-in{opacity:1}
}

/* ---------- Round 2: the pricing quote, and the What's included list ---------- */
.pw-quote{position:relative;margin:clamp(34px,4vw,56px) 0 0;padding:clamp(30px,3.6vw,52px) clamp(26px,3.4vw,54px);border-radius:26px;border-left:0;background:radial-gradient(80% 70% at 100% 0%,rgba(0,54,230,.4),transparent 60%),var(--gp-navy);box-shadow:0 40px 80px -46px rgba(1,17,52,.7);overflow:hidden}
.pw-quote::before{content:"\201C";position:absolute;top:-18px;right:26px;font:900 170px/1 var(--gp-display);color:rgba(254,139,3,.18)}
.pw-quote p{position:relative;margin:0 0 26px;font:400 clamp(19px,2.1vw,30px)/1.45 var(--gp-serif);font-style:italic;color:#fff;max-width:46ch}
.pw-by{display:flex;align-items:center;gap:16px}
.pw-by img{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid rgba(254,139,3,.6);flex:0 0 66px}
.pw-by-txt{display:flex;flex-direction:column}
.pw-by-txt strong{font:800 17px/1.2 var(--gp-display);color:#fff}
.pw-by-txt span{font-size:14px;color:rgba(255,255,255,.72);margin-top:3px}
@media (max-width:600px){.pw-quote::before{font-size:110px;right:14px}}

/* What's included: a real list, not grey lines */
.pricing-card .tier-features{display:grid;gap:4px;margin-top:4px}
.pricing-card .tier-features li{display:flex;gap:11px;align-items:flex-start;background:var(--gp-bg-soft);padding:11px 13px !important;margin:0;border-radius:12px;font-size:14.6px;line-height:1.45;color:var(--gp-text)}
.pricing-card .tier-features li:hover{background:#FFF4E8;transform:none}
.pricing-card.featured .tier-features li{background:rgba(255,255,255,.08);color:#fff}
.pricing-card.featured .tier-features li:hover{background:rgba(254,139,3,.18)}
.pricing-card .check{flex:0 0 20px;width:20px;height:20px;border-radius:6px !important;margin-top:1px}
.pricing-card .tier-features::before{margin-bottom:10px}
.rs-dots{display:flex;gap:8px;margin-top:16px}
.rs-dots button{width:26px;height:5px;border-radius:5px;border:0;padding:0;cursor:pointer;background:rgba(1,17,52,.18);transition:background .3s,width .3s var(--gp-ease)}
.rs-dots button.on{background:var(--gp-orange);width:40px}
.rs-card.is-on{box-shadow:0 34px 66px -30px rgba(1,17,52,.7),0 0 0 2px rgba(254,139,3,.55)}

/* ============================================================
   Round 3: accordions that read as buttons, and the page you are on
   ============================================================ */
.faq-item,.sv-faq-item,.pfaq-item{overflow:hidden}
.faq-question,.faq-q,.sv-faq-q,.pfaq-q{display:flex !important;align-items:center;justify-content:space-between;gap:18px;user-select:none}
.faq-answer,.faq-a,.sv-faq-a,.pfaq-a{max-height:0;opacity:0;padding:0 !important;transition:max-height .45s var(--gp-ease),opacity .3s ease,padding .3s ease,margin .3s ease}
.faq-item.open .faq-answer,.faq-item.open .faq-a,.sv-faq-item.open .sv-faq-a,.pfaq-item.open .pfaq-a{max-height:600px;opacity:1}
.faq-question:hover,.sv-faq-q:hover,.pfaq-q:hover{color:var(--gp-orange-text) !important}
.faq-item.open .faq-question,.sv-faq-item.open .sv-faq-q,.pfaq-item.open .pfaq-q{color:var(--gp-orange-text) !important}
.gp-dark .faq-item.open .faq-question{color:var(--gp-orange) !important}
/* the sticky FAQ column's button was rendering as bare text */
.faq-sticky .btn-primary,.faq-sticky a[class*="btn"]{display:inline-flex !important;align-items:center;gap:9px;padding:15px 26px !important;border-radius:999px !important;background:var(--gp-orange) !important;color:var(--gp-navy) !important;border:0 !important;font:800 15px var(--gp-body) !important;box-shadow:0 14px 30px -14px rgba(254,139,3,.75) !important;margin-top:18px}
.faq-sticky .btn-primary:hover{background:var(--gp-navy) !important;color:#fff !important}
.faq-sticky p{margin-bottom:6px}
/* the page you are on, in the menu */
#gpMenu .gm-list a.is-here span{color:var(--gp-orange) !important}
#gpMenu .gm-list a.is-here{position:relative}
#gpMenu .gm-list a.is-here::before{content:"";position:absolute;left:-16px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--gp-orange);transform:translateY(-50%)}
#gpMenu .gm-list a.is-here small{color:var(--gp-orange) !important;opacity:.8}

/* ---------- Round 3: FAQ two-column layout everywhere ---------- */
.faq-grid{display:grid;gap:clamp(26px,3.4vw,56px);align-items:start}
@media (min-width:1000px){.faq-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.faq-sticky{position:sticky;top:120px}}
.faq-sticky h2{margin:12px 0 14px}
.faq-sticky p{color:var(--gp-text-2);font-size:16px;line-height:1.7;max-width:42ch}
.faq-list{display:grid;gap:12px}

/* ---------- Round 3: an emphasis phrase always owns its own line ---------- */
:where(section) h2 em,.section-title em,.ph h1 em,#hero .hero-h1 em{display:block}
section h2,.ph h1{text-wrap:balance}

/* ---------- Round 3: my sections must beat the alternating-background rule ---------- */
html body section.hpin{background:var(--gp-navy) !important}
html body section.cstack{background:radial-gradient(70% 60% at 100% 0%,rgba(0,54,230,.4),transparent 60%),var(--gp-navy) !important}
html body section.ind,html body section.pw-when,html body section.pr-risks,html body section.hw,html body section#hww-compare,html body section.gp-steps-more{background:#fff !important}
html body section.pm,html body section.wc,html body section.gp-pick,html body section#hww-faq{background:var(--gp-bg-soft) !important}
html body section.gp-steps{background:#fff !important}

/* ---------- Round 3: the picker answers read on a plain panel with a real button ---------- */
.gp-pick-list details[open] .gp-pick-body{background:#fff;border:0;border-radius:16px;margin:0 10px 12px;padding:20px 20px 22px}
.gp-pick-body p{color:var(--gp-text) !important;font-size:15.5px;line-height:1.7}
.gp-pick-body a{display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:13px 22px;border-radius:999px;background:var(--gp-orange);color:var(--gp-navy) !important;border:0 !important;font:800 14.5px var(--gp-body);box-shadow:0 12px 26px -12px rgba(254,139,3,.8);transition:transform .3s var(--gp-ease),background .3s}
.gp-pick-body a:hover{background:var(--gp-navy);color:#fff !important;transform:translateY(-2px)}

/* ---------- Round 3: footer is bigger and alive on phones ---------- */
@media (max-width:760px){
  #footer,footer#footer{padding:52px 0 26px !important}
  #footer .footer-grid{gap:30px !important}
  #footer h4,#footer .footer-col-title{font-size:15px !important;letter-spacing:.14em !important;color:var(--gp-orange) !important}
  #footer a,#footer li a{font-size:16.5px !important;line-height:2 !important;display:inline-block;transition:transform .25s var(--gp-ease),color .25s}
  #footer a:active,#footer a:hover{color:var(--gp-orange) !important;transform:translateX(4px)}
  #footer p,#footer .footer-brand p{font-size:15px !important;line-height:1.75 !important}
  #footer .footer-brand img{height:40px !important}
}
#footer a{transition:color .25s,transform .25s var(--gp-ease)}
#footer a:hover{color:var(--gp-orange) !important}
/* room under each step so the line can pass below the copy */
@media (min-width:1000px){ol.snake > li{padding-bottom:78px}ol.snake .pw-step,ol.snake .hw-step{padding-bottom:0 !important}}

/* ============================================================
   SERVICES STACK, round 3: every section readable in one view
   Owner: "let the section load its full details before the stack
   card comes on it". The common questions move into their own
   column beside the deliverables instead of sitting under them.
   ============================================================ */
.svc-stack .pillar-faq{grid-column:1 / -1;margin-top:10px !important;border-top:0 !important}
.svc-stack .pillar-faq{background:var(--gp-navy) !important;border-radius:18px;padding:18px 20px 8px !important;box-shadow:0 26px 50px -30px rgba(1,17,52,.55)}
.svc-stack .pillar-faq-label{display:inline-block;font:800 11px/1 var(--gp-body) !important;letter-spacing:.16em;text-transform:uppercase;color:var(--gp-navy) !important;background:var(--gp-orange);padding:7px 12px;border-radius:999px;margin:0 0 12px !important}
.svc-stack .pfaq-item{border-bottom:1px solid rgba(255,255,255,.14) !important}
.svc-stack .pfaq-item:last-child{border-bottom:0 !important}
.svc-stack .pfaq-q{color:#fff !important;font-size:14px !important;padding:13px 0 !important}
.svc-stack .pfaq-q:hover,.svc-stack .pfaq-item.open .pfaq-q{color:var(--gp-orange) !important}
.svc-stack .pfaq-icon{color:var(--gp-orange) !important}
.svc-stack .pfaq-a{color:rgba(255,255,255,.82) !important;font-size:13.2px !important}
/* this zeroed the answer panel's side padding, so the first word sat
   flush against the rounded border. Owner spotted it on the services
   common questions ("Yes." touching the line). */
.svc-stack .pfaq-item.open .pfaq-a{max-height:420px;padding:14px 16px 16px !important}
/* tighter verticals so nothing is cut off at 900px tall screens */
@media (min-width:1000px){
  .svc-stack-item{padding:clamp(64px,7vw,96px) 0 clamp(36px,4vw,56px) !important}
  .svc-stack .wg-block{margin-top:16px;padding:18px 20px 20px}
  .svc-stack .wg-item{font-size:14px}
  .svc-stack .deliverable{padding:14px 16px !important}
  .svc-stack .deliverable p{font-size:13.4px !important}
}

.svc-stack .pfaq-item,.svc-stack .pfaq-q,.svc-stack .pfaq-a,.svc-stack .pfaq-wrap{background:transparent !important;border-radius:0}
.svc-stack .pfaq-q{font-weight:700 !important}
.svc-stack .pfaq-item{box-shadow:none !important;border:0 !important;border-bottom:1px solid rgba(255,255,255,.16) !important;border-radius:0 !important;padding:0 !important;margin:0 !important}
.svc-stack .pfaq-item:last-child{border-bottom:0 !important}
.svc-stack .pfaq-q{box-shadow:none !important;border:0 !important;border-radius:0 !important;margin:0 !important}
.svc-stack .pfaq-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(254,139,3,.16);font-size:16px}
.svc-stack .pfaq-item.open .pfaq-icon{background:var(--gp-orange);color:var(--gp-navy) !important}

/* ============================================================
   ABOUT, round 3: the founders get their own section under the
   hero, then "Why we exist". Owner: three sections, faces big.
   ============================================================ */
html body section.fs{background:var(--gp-bg-soft) !important;padding:clamp(56px,7vw,104px) 0}
.fs-head{max-width:760px;margin:0 0 clamp(28px,3.4vw,48px)}
.fs-head .h2{font:800 clamp(30px,4.4vw,60px)/1.03 var(--gp-display);letter-spacing:-.028em;color:var(--gp-navy);margin:10px 0 14px}
.fs-head p{font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.65;color:var(--gp-text-2);max-width:62ch}
.fs .about-hero-founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px);max-width:none !important}
.fs .founder-hero-card{background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:26px;overflow:hidden;padding:0 !important;
  display:grid;grid-template-rows:1fr auto;transition:transform .5s var(--gp-ease),box-shadow .5s,border-color .5s;cursor:pointer}
.fs .founder-hero-card:hover{transform:translateY(-8px);border-color:rgba(254,139,3,.55) !important;box-shadow:0 40px 70px -40px rgba(1,17,52,.5)}
.fs .founder-hero-img{aspect-ratio:4/3;overflow:hidden;background:var(--gp-navy)}
.fs .founder-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .7s var(--gp-ease)}
.fs .founder-hero-card:hover .founder-hero-img img{transform:scale(1.05)}
.fs .founder-hero-info{padding:22px 24px 26px}
.fs .founder-hero-name{font:800 clamp(20px,2.1vw,28px)/1.15 var(--gp-display) !important;color:var(--gp-navy) !important}
.fs .founder-hero-role{font:700 12px/1 var(--gp-body) !important;letter-spacing:.16em;text-transform:uppercase;color:var(--gp-orange-text) !important;margin:9px 0 16px}
.fs .founder-read-btn{display:inline-flex;align-items:center;gap:9px;background:var(--gp-navy) !important;color:#fff !important;border:0;border-radius:999px;
  padding:12px 20px;font:800 13.5px/1 var(--gp-body);cursor:pointer;box-shadow:0 14px 26px -14px rgba(1,17,52,.7);transition:background .3s,transform .3s}
.fs .founder-read-btn:hover{background:var(--gp-orange) !important;color:var(--gp-navy) !important;transform:translateY(-2px)}
.fs .founders-arrows,.fs .founders-dots{display:none}
@media (max-width:760px){
  .fs .about-hero-founders{grid-template-columns:1fr}
  .fs .founder-hero-img{aspect-ratio:3/2}
}

/* ============================================================
   ABOUT TIMELINE, round 3. Owner: bigger type, wider, nearly
   full width, and the card should react to the pointer.
   ============================================================ */
#experience > .container{max-width:min(1560px,94vw) !important}
#experience .exp-header{max-width:1000px}
#experience .exp-header .h2{font-size:clamp(32px,5vw,72px) !important;line-height:1.02;letter-spacing:-.03em}
#experience .exp-subhead{font-size:clamp(16px,1.5vw,20px) !important;max-width:70ch}
@media (min-width:1000px){
  #experience .exp-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,3vw,54px);align-items:start}
  #experience .exp-year{font:900 clamp(38px,4.6vw,76px)/1 var(--gp-display) !important;color:var(--gp-orange-text) !important;letter-spacing:-.03em}
}
#experience .exp-card{background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:26px;
  padding:clamp(26px,2.8vw,46px) clamp(24px,3vw,52px) !important;
  transition:transform .55s var(--gp-ease),box-shadow .55s,border-color .55s}
#experience .exp-card:hover{transform:translateY(-6px);border-color:rgba(254,139,3,.55) !important;box-shadow:0 44px 80px -46px rgba(1,17,52,.5)}
#experience .exp-phase{font:800 12px/1 var(--gp-body) !important;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gp-navy) !important;background:var(--gp-orange);display:inline-block;padding:9px 15px;border-radius:999px;margin-bottom:16px}
#experience .exp-title{font:800 clamp(22px,2.6vw,38px)/1.14 var(--gp-display) !important;color:var(--gp-navy) !important;letter-spacing:-.022em;margin-bottom:14px}
#experience .exp-desc{font-size:clamp(15.5px,1.35vw,19px) !important;line-height:1.7;color:var(--gp-text-2) !important;max-width:78ch}
#experience .exp-tag{font-size:13px;padding:9px 15px}
@media (min-width:1000px){#experience .exp-timeline{max-width:none !important}}

/* ============================================================
   ABOUT "No outsourcing. One team.", round 3. Owner: these
   expand cards need images and real interaction, not boring.
   Each card carries its own brand illustration; collapsed it
   is the picture, expanded it slides behind the navy panel.
   ============================================================ */
#different .diff-card{background:var(--gp-bg-soft) !important;border:1px solid var(--gp-line) !important;display:flex;align-items:flex-end}
#different .pop-art{position:absolute;inset:auto 0 0 0;top:0;display:grid;place-items:center;pointer-events:none;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s}
#different .pop-art svg{width:min(62%,190px);height:auto;transform:translateY(-26px)}
#different .diff-card:hover .pop-art,#different .diff-card:focus-within .pop-art{opacity:.16;transform:scale(1.35) translateY(-8%);filter:saturate(0) brightness(3)}
#different .diff-num{position:absolute;top:18px;left:20px;font:900 15px/1 var(--gp-display) !important;color:var(--gp-orange-text) !important;letter-spacing:.06em;z-index:2}
#different .diff-card:hover .diff-num,#different .diff-card:focus-within .diff-num{color:var(--gp-orange) !important}
#different .pop-body{position:relative;z-index:2;padding:24px 26px 26px}
#different .pop-label{z-index:2}
#different .diff-highlight{color:var(--gp-orange-text) !important;font-weight:700}
@media (max-width:820px){
  #different .diff-card{display:grid;grid-template-rows:150px auto;align-items:stretch}
  #different .pop-art{position:relative;inset:auto;height:150px}
  #different .pop-art svg{width:130px;transform:none}
  #different .diff-card .pop-body{opacity:1;transform:none}
}
#different .pop-art{padding-left:46px}

/* ============================================================
   WORK PORTFOLIO, round 3. Chiella's gallery: the copy sits
   still on the left, the bold cards run upward on the right in
   a continuous loop, and the card in the middle names itself.
   ============================================================ */
html body section.gal{background:var(--gp-navy) !important;color:#fff;padding:clamp(56px,7vw,110px) 0;overflow:hidden}
.gal-wrap{display:grid;gap:clamp(28px,4vw,72px);align-items:center}
@media (min-width:1000px){.gal-wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}}
.gal-side .eyebrow{color:var(--gp-orange) !important}
.gal-side .h2{font:800 clamp(32px,4.6vw,66px)/1.02 var(--gp-display);letter-spacing:-.03em;color:#fff;margin:12px 0 16px}
.gal-side .h2 em{color:var(--gp-orange)}
.gal-lead{font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.68;color:rgba(255,255,255,.8);max-width:52ch}
.gal-now{margin:26px 0 24px;padding:20px 24px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);max-width:520px}
.gal-now-label{display:block;font:800 11px/1 var(--gp-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gp-orange);margin-bottom:10px}
.gal-now-name{display:block;font:800 clamp(20px,2.2vw,30px)/1.15 var(--gp-display);color:#fff}
.gal-now-meta{display:block;margin-top:7px;font-size:14px;color:rgba(255,255,255,.72)}
.gal-cta{display:inline-flex}
.gal-stage{position:relative;height:clamp(420px,62vh,640px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.gal-track{display:grid;gap:18px;will-change:transform}
.gal-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;
  background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:14px;
  text-decoration:none;transition:background .4s,border-color .4s,transform .5s var(--gp-ease)}
.gal-card:hover,.gal-card:focus-visible{background:#fff !important;border-color:#fff;transform:translateX(-10px)}
.gal-card.is-mid{border-color:var(--gp-orange);background:rgba(254,139,3,.14) !important}
.gal-card.is-mid:hover{background:#fff !important}
.gal-shot{display:block;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:#0b1a3d}
.gal-shot img{width:100%;height:100%;object-fit:cover;display:block}
.gal-cap strong{display:block;font:800 clamp(17px,1.7vw,22px)/1.16 var(--gp-display);color:#fff;letter-spacing:-.018em}
.gal-cap span{display:block;margin-top:7px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.7)}
.gal-card:hover .gal-cap strong,.gal-card:focus-visible .gal-cap strong{color:var(--gp-navy)}
.gal-card:hover .gal-cap span,.gal-card:focus-visible .gal-cap span{color:#42527a}
@media (max-width:999px){
  .gal-stage{height:420px}
  .gal-card{grid-template-columns:104px minmax(0,1fr);gap:14px}
}

/* ---- Work case stack: wider, and the photo answers the pointer ---- */
@media (min-width:1200px){
  #cases > .container,.cases-full{max-width:min(1560px,94vw) !important}
}
.case-card .case-visual,.case-card .case-image,.case-card .case-img{overflow:hidden}
.case-card .case-visual img,.case-card .case-image img,.case-card .case-img img{transition:transform .9s var(--gp-ease)}
.case-card:hover .case-visual img,.case-card:hover .case-image img,.case-card:hover .case-img img{transform:scale(1.045)}
.case-testimonial-author{color:var(--gp-orange-text) !important;font-weight:800}
.case-card .case-img-wrap{overflow:hidden}
.case-card .case-img-wrap img{transition:transform .9s var(--gp-ease)}
.case-card:hover .case-img-wrap img{transform:scale(1.05)}

/* ============================================================
   INTERACTIVE CARDS, round 3. Owner: the reassurance strip, the
   payment models, the risk rows and the included lists were
   boring. They now track the pointer and press in when clicked.
   ============================================================ */
.pw-card,.reassurance-item,.pm-row,.ct-row,.ind-card,.incl-row,.wc-tile{position:relative;isolation:isolate;
  transition:transform .45s var(--gp-ease),box-shadow .45s,border-color .45s,background-color .45s}
.pw-card::after,.reassurance-item::after,.pm-row::after,.ind-card::after,.wc-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(254,139,3,.22),transparent 62%)}
.pw-card.is-lit::after,.reassurance-item.is-lit::after,.pm-row.is-lit::after,.ind-card.is-lit::after,.wc-tile.is-lit::after{opacity:1}
.pw-card.is-lit,.reassurance-item.is-lit,.pm-row.is-lit,.ind-card.is-lit,.wc-tile.is-lit{transform:translateY(-6px);box-shadow:0 38px 68px -42px rgba(1,17,52,.55);border-color:rgba(254,139,3,.55) !important}
.pw-card.is-pressed,.reassurance-item.is-pressed,.pm-row.is-pressed{transform:translateY(-2px) scale(.995);
  box-shadow:inset 0 3px 10px rgba(1,17,52,.16),inset 0 -2px 0 rgba(255,255,255,.9),0 22px 44px -30px rgba(1,17,52,.5);
  border-color:var(--gp-orange) !important;background:#FFF7EE !important}
.pw-card.is-pressed h3,.reassurance-item.is-pressed h4{color:var(--gp-orange-text) !important}

/* the reassurance strip reads as four real cards now */
html body section.reassurance{background:var(--gp-bg-soft) !important;padding:clamp(44px,5vw,78px) 0}
.reassurance-inner{display:grid;gap:clamp(14px,1.8vw,24px)}
@media (min-width:900px){.reassurance-inner{grid-template-columns:repeat(4,1fr)}}
.reassurance-item{background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:22px;padding:26px 24px 28px !important;cursor:pointer}
.reassurance-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:#FFF1E2;font-size:24px;margin-bottom:16px;
  transition:transform .5s var(--gp-ease),background .4s}
.reassurance-item.is-lit .reassurance-icon{transform:translateY(-3px) rotate(-7deg) scale(1.06);background:var(--gp-orange)}
.reassurance-item h4{font:800 clamp(17px,1.6vw,21px)/1.2 var(--gp-display) !important;color:var(--gp-navy) !important;margin-bottom:9px}
.reassurance-item p{font-size:14.6px !important;line-height:1.6;color:var(--gp-text-2) !important}

/* payment models: the "Best for" list opens as you go over the row */
.pm-row{cursor:pointer;border-radius:24px;padding:clamp(22px,2.4vw,34px) !important;background:#fff !important;border:1px solid var(--gp-line) !important}
.pm-row .pm-no{font:900 13px/1 var(--gp-display) !important;letter-spacing:.14em;color:var(--gp-orange-text) !important}
.pm-row h3{font:800 clamp(20px,2.2vw,30px)/1.14 var(--gp-display) !important;color:var(--gp-navy) !important;margin:10px 0 8px}
.pm-row ul li{position:relative;transition:transform .35s var(--gp-ease),color .35s}
.pm-row.is-lit ul li{transform:translateX(5px);color:var(--gp-navy) !important}
.pm-row .pm-when strong{color:var(--gp-orange-text) !important}

/* risk rows answer the pointer too */
.ct-row.is-lit{background:#FFF7EE !important}
.ct-row .ct-good{transition:background .4s}
.ct-row.is-lit .ct-good{background:rgba(254,139,3,.1)}

/* ---- "What's included at each tier": the table now reacts ---- */
.compare-table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 34px 70px -48px rgba(1,17,52,.5);border:1px solid var(--gp-line)}
.compare-table thead th{position:sticky;top:0;z-index:3;background:var(--gp-navy) !important;color:#fff !important;
  font:800 13.5px/1.2 var(--gp-body) !important;letter-spacing:.06em;text-transform:uppercase;padding:18px 16px !important;text-align:center}
.compare-table thead th:first-child{text-align:left}
.compare-table thead th.featured-col{background:var(--gp-orange) !important;color:var(--gp-navy) !important}
.compare-table td{padding:16px !important;text-align:center;border-top:1px solid var(--gp-line);font-size:15px;color:var(--gp-text-2);transition:background .3s,color .3s}
.compare-table td:first-child{text-align:left;font-weight:700;color:var(--gp-navy)}
.compare-table tbody tr{transition:background .3s}
.compare-table tbody tr:hover{background:#FFF7EE}
.compare-table tbody tr:hover td:first-child{color:var(--gp-orange-text)}
.compare-table td.featured-col{background:rgba(1,17,52,.035)}
.compare-table tbody tr:hover td.featured-col{background:rgba(254,139,3,.14)}
.compare-table .check-yes,.compare-table .check-yes-featured,.compare-table .check-partial,.compare-table .check-no{
  display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 10px;border-radius:999px;font-weight:800;font-size:14px;
  transition:transform .35s var(--gp-ease),background .3s}
.compare-table .check-yes{background:#E9F3EC;color:#1C7A46}
.compare-table .check-yes-featured{background:var(--gp-orange);color:var(--gp-navy)}
.compare-table .check-partial{background:#FFF1E2;color:var(--gp-orange-text);font-size:12px}
.compare-table .check-no{background:#F1F3F8;color:#8A94AC}
.compare-table tbody tr:hover .check-yes,.compare-table tbody tr:hover .check-yes-featured{transform:scale(1.16)}
@media (max-width:780px){.compare-table td,.compare-table thead th{padding:12px 9px !important;font-size:13px}}

/* ---- FAQ, round 3: wider answer column, cards that lift and emboss ---- */
.faq-section .faq-grid,#hww-faq .faq-grid{max-width:min(1480px,94vw) !important}
@media (min-width:1000px){.faq-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) !important}}
.faq-item,.pfaq-item,.sv-faq-item{transition:transform .4s var(--gp-ease),box-shadow .4s,border-color .4s,background-color .4s}
.faq-grid .faq-item:hover{transform:translateY(-3px);box-shadow:0 26px 46px -32px rgba(1,17,52,.5);border-color:rgba(254,139,3,.5) !important}
.faq-grid .faq-item.open{box-shadow:0 30px 56px -34px rgba(1,17,52,.55),inset 0 2px 0 rgba(255,255,255,.9);border-color:var(--gp-orange) !important}
.faq-grid .faq-question{font-size:clamp(16px,1.5vw,19px) !important}
/* the picker answer sits on white, so its copy must be navy, not inherited white */
.gp-pick .gp-pick-body,.gp-pick .gp-pick-body p{color:var(--gp-navy) !important}
.gp-pick .gp-pick-body p{font-size:16px;line-height:1.7}

/* ---- Why choose GridPoint, round 3: the Details panel used to open
   underneath the next tile. It now lifts clear of the grid, grows past
   the tile edges and has room to breathe. ---- */
.wc-tiles{gap:clamp(16px,1.8vw,26px) !important}
.wc-tile{min-height:178px !important;padding:clamp(24px,2.6vw,34px) !important}
.wc-tile.is-open{z-index:20}
.wc-pop{inset:-16px -16px auto -16px !important;min-height:calc(100% + 32px);padding:26px 28px !important;
  border-radius:24px !important;box-shadow:0 44px 90px -34px rgba(1,17,52,.75) !important;
  animation:wcPop .34s cubic-bezier(.16,1,.3,1) both}
@keyframes wcPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.wc-pop p{font-size:15px !important;line-height:1.68 !important;margin-top:4px !important}
.wc-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:19px;line-height:1;transition:background .3s}
.wc-close:hover{background:var(--gp-orange);color:var(--gp-navy)}
.wc-more{margin-top:14px}

/* ============================================================
   INDUSTRIES, round 3. Owner: good, but make it much better.
   Focus cards read like posters, the nine others sweep orange.
   ============================================================ */
html body section.ind{background:var(--gp-bg-soft) !important;padding:clamp(56px,7vw,110px) 0}
.ind-head{max-width:900px;margin-bottom:clamp(26px,3vw,44px)}
.ind-head .h2{font:800 clamp(30px,4.4vw,62px)/1.03 var(--gp-display);letter-spacing:-.03em;color:var(--gp-navy)}
.ind-tier{font:800 12px/1 var(--gp-body) !important;letter-spacing:.2em;text-transform:uppercase;color:var(--gp-orange-text) !important;
  margin:clamp(22px,2.6vw,38px) 0 16px;display:flex;align-items:center;gap:14px}
.ind-tier::after{content:"";flex:1;height:1px;background:var(--gp-line)}
.ind-focus-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
@media (min-width:980px){.ind-focus-grid{grid-template-columns:repeat(3,1fr)}}
.ind-card{position:relative;overflow:hidden;background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:22px;
  text-decoration:none;display:block}
.ind-focus{padding:clamp(26px,2.6vw,36px) !important;display:grid;gap:14px;align-content:start}
.ind-focus .ind-ico{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:var(--gp-navy);color:var(--gp-orange);
  transition:transform .5s var(--gp-ease),background .4s}
.ind-focus .ind-ico svg{width:28px;height:28px}
.ind-card.is-lit .ind-ico{transform:translateY(-4px) rotate(-6deg);background:var(--gp-orange);color:var(--gp-navy)}
.ind-focus strong{display:block;font:800 clamp(20px,2.1vw,27px)/1.14 var(--gp-display);color:var(--gp-navy);letter-spacing:-.022em}
.ind-focus .ind-text{display:block;margin-top:10px;font-size:15.2px;line-height:1.66;color:var(--gp-text-2)}
.ind-focus em{display:block;margin-top:14px;font-style:normal;font:700 13.4px/1.5 var(--gp-body);color:var(--gp-orange-text);
  border-top:1px solid var(--gp-line);padding-top:13px}
.ind-go{position:absolute;top:22px;right:22px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:#F2F5FB;color:var(--gp-navy);font-size:17px;transition:background .35s,color .35s,transform .45s var(--gp-ease)}
.ind-card.is-lit .ind-go{background:var(--gp-orange);color:var(--gp-navy);transform:translate(3px,-3px)}
.ind-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.ind-grid .ind-card{display:flex;align-items:center;gap:14px;padding:18px 54px 18px 18px !important;border-radius:18px}
.ind-grid .ind-ico{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;background:#F2F5FB;color:var(--gp-navy);transition:background .35s,color .35s}
.ind-grid .ind-ico svg{width:21px;height:21px}
.ind-grid .ind-card.is-lit .ind-ico{background:var(--gp-orange);color:var(--gp-navy)}
.ind-grid strong{font:800 15.4px/1.25 var(--gp-display);color:var(--gp-navy)}
.ind-grid .ind-go{top:50%;right:14px;transform:translateY(-50%);width:32px;height:32px;font-size:15px}
.ind-grid .ind-card.is-lit .ind-go{transform:translateY(-50%) translateX(2px)}

/* ============================================================
   WORK CASE CARDS, round 3. Owner: these looked static and flat.
   Photo edge to edge on the left, the client name big, and the
   published figures read as numbers rather than grey pills.
   ============================================================ */
.cases-full .case-card{border-radius:30px !important;box-shadow:0 -26px 80px -40px rgba(1,17,52,.55) !important;
  border:1px solid rgba(1,17,52,.09) !important}
@media (min-width:1000px){
  .cases-full .case-card{display:grid !important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}
  .cases-full .case-img-wrap{height:100%;overflow:hidden}
  .cases-full .case-img-wrap img{width:100%;height:100%;object-fit:cover}
  .cases-full .case-info{padding:clamp(30px,3.2vw,56px) clamp(28px,3.4vw,58px) !important;display:flex;flex-direction:column;justify-content:center}
}
.cases-full .case-industry-tag{font:800 11.5px/1 var(--gp-body) !important;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gp-orange-text) !important;margin-bottom:12px}
.cases-full .case-info h3,.cases-full .case-info .h3{font:800 clamp(28px,3.6vw,54px)/1.02 var(--gp-display) !important;
  letter-spacing:-.032em;color:var(--gp-navy) !important;margin:0 0 8px}
.cases-full .case-url{font:600 14px/1 var(--gp-mono,var(--gp-body)) !important;color:var(--gp-text-2) !important;margin-bottom:14px}
.cases-full .case-work-done{font-size:14.4px !important;line-height:1.6;color:var(--gp-text-2) !important;margin-bottom:18px;max-width:64ch}
.cases-full .case-results{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.result-chip.is-split{display:grid;gap:2px;background:var(--gp-navy) !important;color:#fff !important;border:0 !important;
  border-radius:16px;padding:13px 18px !important;min-width:132px;transition:transform .4s var(--gp-ease),background .4s}
.result-chip.is-split b{font:900 clamp(21px,2vw,30px)/1 var(--gp-display);color:var(--gp-orange);letter-spacing:-.02em}
.result-chip.is-split span{font:700 11.5px/1.25 var(--gp-body);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.case-card:hover .result-chip.is-split{transform:translateY(-3px)}
.cases-full .case-testimonial{font-size:15px !important;line-height:1.65;padding:18px 20px !important;border-radius:18px !important}
.cases-full .case-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.cases-full .case-visit{font-weight:800;font-size:13.5px;color:var(--gp-orange-text) !important}
@media (max-width:999px){
  .cases-full .case-img-wrap{aspect-ratio:16/10;overflow:hidden}
  .cases-full .case-img-wrap img{width:100%;height:100%;object-fit:cover}
  .cases-full .case-info{padding:24px 22px 28px !important}
  .result-chip.is-split{min-width:112px;padding:11px 14px !important}
}

/* ============================================================
   SERVICE DETAIL PAGES, round 3. These six pages had only been
   recoloured, never rebuilt: plain grids, hairline dividers and
   no interaction. They now use the same card language as the
   rest of the site. Shared classes, so all six change at once.
   ============================================================ */
#sv-deliverables,#sv-process,#sv-results,#sv-forwho{padding:clamp(52px,6.5vw,104px) 0}
.sv-del-header,.sv-process-header,.sv-results-header,.sv-forwho-header{max-width:820px;margin:0 auto clamp(28px,3.4vw,50px);text-align:center}
.sv-del-header .h2,.sv-process-header .h2,.sv-results-header .h2,.sv-forwho-header .h2{
  font:800 clamp(30px,4.2vw,58px)/1.03 var(--gp-display) !important;letter-spacing:-.03em;color:var(--gp-navy) !important}
.sv-del-desc{font-size:clamp(15.5px,1.4vw,18.5px) !important;line-height:1.65;color:var(--gp-text-2) !important}

/* deliverables become cards that answer the pointer */
.sv-del-grid{display:grid !important;gap:clamp(14px,1.6vw,20px) !important;border:0 !important;background:none !important}
@media (min-width:860px){.sv-del-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1300px){.sv-del-grid{grid-template-columns:repeat(3,1fr)}}
.sv-del-item{position:relative;isolation:isolate;background:#fff !important;border:1px solid var(--gp-line) !important;
  border-radius:22px !important;padding:26px 26px 28px !important;
  transition:transform .45s var(--gp-ease),box-shadow .45s,border-color .45s}
.sv-del-item::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(254,139,3,.2),transparent 62%)}
.sv-del-item:hover{transform:translateY(-6px);border-color:rgba(254,139,3,.55) !important;box-shadow:0 38px 68px -44px rgba(1,17,52,.5)}
.sv-del-item:hover::after{opacity:1}
.sv-del-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:#FFF1E2;font-size:25px;
  margin-bottom:16px;transition:transform .5s var(--gp-ease),background .4s}
.sv-del-item:hover .sv-del-icon{transform:translateY(-3px) rotate(-6deg);background:var(--gp-orange)}
.sv-del-title{font:800 clamp(17px,1.65vw,21px)/1.22 var(--gp-display) !important;color:var(--gp-navy) !important;margin-bottom:9px}
.sv-del-item p{font-size:14.8px !important;line-height:1.62;color:var(--gp-text-2) !important}

/* process: a numbered rail that fills as you read it */
.sv-process-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
@media (min-width:900px){.sv-process-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.sv-step{position:relative;background:var(--gp-bg-soft) !important;border:1px solid var(--gp-line) !important;border-radius:20px;
  padding:26px 24px 28px !important;transition:transform .45s var(--gp-ease),background .4s,border-color .4s}
.sv-step:hover{transform:translateY(-5px);background:#fff !important;border-color:rgba(254,139,3,.5) !important;
  box-shadow:0 34px 62px -44px rgba(1,17,52,.5)}
.sv-step-dot{width:44px;height:44px;border-radius:50%;background:var(--gp-navy) !important;color:var(--gp-orange) !important;
  display:grid;place-items:center;font:900 15px/1 var(--gp-display);margin-bottom:15px;transition:background .4s,color .4s}
.sv-step:hover .sv-step-dot{background:var(--gp-orange) !important;color:var(--gp-navy) !important}
.sv-step-phase{font:800 11px/1 var(--gp-body) !important;letter-spacing:.18em;text-transform:uppercase;color:var(--gp-orange-text) !important;margin-bottom:9px}
.sv-step-title{font:800 clamp(17px,1.6vw,20px)/1.2 var(--gp-display) !important;color:var(--gp-navy) !important;margin-bottom:8px}
.sv-step-desc{font-size:14.6px !important;line-height:1.62;color:var(--gp-text-2) !important}

/* results: navy blocks with the figure big and orange */
.sv-results-grid{display:grid;gap:clamp(13px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sv-result-card{background:var(--gp-navy) !important;border:0 !important;border-radius:22px;padding:28px 26px !important;
  transition:transform .45s var(--gp-ease),box-shadow .45s}
.sv-result-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(1,17,52,.7)}
.sv-result-val{font:900 clamp(34px,4vw,56px)/1 var(--gp-display) !important;color:var(--gp-orange) !important;letter-spacing:-.035em}
.sv-result-label{margin-top:10px;font:700 12px/1.3 var(--gp-body) !important;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78) !important}
.sv-result-client{margin-top:12px;font:800 15.5px/1.3 var(--gp-display) !important;color:#fff !important}
.sv-result-link{display:inline-flex;margin-top:12px;font-weight:800;font-size:13.5px;color:var(--gp-orange) !important}

/* for who: two columns of plain, readable cards */
.sv-forwho-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
@media (min-width:880px){.sv-forwho-grid{grid-template-columns:repeat(2,1fr)}}
.sv-who-card{background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:22px;padding:26px 26px 28px !important;
  transition:transform .45s var(--gp-ease),box-shadow .45s,border-color .45s}
.sv-who-card:hover{transform:translateY(-5px);border-color:rgba(254,139,3,.55) !important;box-shadow:0 34px 64px -44px rgba(1,17,52,.5)}
.sv-who-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#F2F5FB;font-size:22px;margin-bottom:14px}
.sv-who-title{font:800 clamp(17px,1.6vw,21px)/1.2 var(--gp-display) !important;color:var(--gp-navy) !important;margin-bottom:9px}
.sv-who-desc{font-size:14.8px !important;line-height:1.62;color:var(--gp-text-2) !important}

/* ============================================================
   ARTICLE HEROES, round 3. The twelve article heroes pulled a
   photo from Unsplash on every view, then buried it under an
   82% veil. The photos are now the site's own files, and the
   veil is the same left-to-right navy fade the page heroes use,
   so the picture is actually visible behind the headline.
   ============================================================ */
.article-hero::before{background:linear-gradient(100deg,rgba(1,17,52,.94) 0%,rgba(1,17,52,.86) 38%,rgba(1,17,52,.52) 72%,rgba(1,17,52,.34) 100%) !important}
.article-hero{background-position:center right !important}
.article-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,17,52,0),rgba(1,17,52,.6))}
.article-hero .container,.article-hero > *:not(::before){position:relative;z-index:1}
@media (max-width:820px){
  .article-hero::before{background:linear-gradient(180deg,rgba(1,17,52,.9) 0%,rgba(1,17,52,.8) 55%,rgba(1,17,52,.92) 100%) !important}
}
/* the theme forces section{background-image:none!important} (trap 2), which killed
   the inline hero photo. The page now passes it as --art and this rule applies it. */
html body section.article-hero{background-image:var(--art) !important;background-size:cover !important;background-position:center right !important}

/* ---- article category pills: they were pink, blue, green and purple, none of
   them GridPoint colours. All seven now use the brand pair, with the tint
   varying just enough to tell the categories apart. ---- */
.article-cat-badge,.related-cat,.insight-cat{border:1px solid rgba(254,139,3,.42) !important;
  background:rgba(254,139,3,.14) !important;color:var(--gp-orange) !important;
  font:800 11.5px/1 var(--gp-body) !important;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px !important;border-radius:999px !important;display:inline-block}
.article-hero .article-cat-badge{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border-color:var(--gp-orange) !important}
[data-theme] .badge-ai,[data-theme] .badge-brand,[data-theme] .badge-cro,[data-theme] .badge-paid,
[data-theme] .badge-seo,[data-theme] .badge-social,[data-theme] .badge-strategy{background-image:none !important}
.insight-card .insight-cat,.related-card .related-cat{background:#FFF1E2 !important;color:var(--gp-orange-text) !important;border-color:rgba(254,139,3,.32) !important}
/* the Insights thumbnails carried green, purple and pink category chips */
.article-cat-tag,.featured-hero-cat{background:var(--gp-orange) !important;color:var(--gp-navy) !important;
  border:0 !important;background-image:none !important;font:800 11px/1 var(--gp-body) !important;
  letter-spacing:.14em;text-transform:uppercase;padding:9px 13px !important;border-radius:999px !important;
  box-shadow:0 10px 22px -12px rgba(1,17,52,.7)}
.article-cat-tag.ai,.article-cat-tag.seo{background:var(--gp-navy) !important;color:var(--gp-orange) !important}
.article-cat-tag,.featured-hero-cat{display:inline-block !important;width:auto !important;align-self:flex-start}

/* ============================================================
   LEGAL PAGES (privacy, terms), round 3. Same type scale and
   card language as the rest of the site, a contents panel that
   stays with you on desktop, and anchors that clear the header.
   ============================================================ */
.doc-hero{padding:clamp(52px,7vw,104px) 0 clamp(22px,2.6vw,40px)}
.doc-hero h1{font:800 clamp(34px,5vw,68px)/1.02 var(--gp-display) !important;letter-spacing:-.03em;color:var(--gp-navy) !important}
.doc-eyebrow{font:800 11.5px/1 var(--gp-body) !important;letter-spacing:.2em;text-transform:uppercase;color:var(--gp-orange-text) !important}
.doc-meta{font-size:14.5px;color:var(--gp-text-2)}
.doc-meta strong{color:var(--gp-navy)}
.toc{background:var(--gp-bg-soft) !important;border:1px solid var(--gp-line) !important;border-radius:22px;padding:26px 28px !important}
.toc h3{font:800 12px/1 var(--gp-body) !important;letter-spacing:.18em;text-transform:uppercase;color:var(--gp-navy) !important;margin-bottom:14px}
.toc a{color:var(--gp-text-2) !important;text-decoration:none;transition:color .25s,padding-left .25s}
.toc a:hover{color:var(--gp-orange-text) !important;padding-left:4px}
.doc-section{scroll-margin-top:110px}
.doc-section h2{font:800 clamp(22px,2.6vw,34px)/1.16 var(--gp-display) !important;color:var(--gp-navy) !important;
  letter-spacing:-.022em;margin:clamp(30px,3.4vw,52px) 0 14px;padding-top:14px;border-top:1px solid var(--gp-line)}
.doc-section h3{font:800 clamp(17px,1.7vw,21px)/1.2 var(--gp-display) !important;color:var(--gp-navy) !important;margin:22px 0 9px}
.doc-content p,.doc-content li{font-size:16px !important;line-height:1.75;color:var(--gp-text-2) !important}
.highlight-box{background:#FFF7EE !important;border:1px solid rgba(254,139,3,.35) !important;border-left:4px solid var(--gp-orange) !important;
  border-radius:16px;padding:20px 22px !important}
.highlight-box p{color:var(--gp-navy) !important}
/* the contents card sits above the text in this markup, so it stays a
   full-width card rather than a sidebar; the sections keep a readable measure */
.toc{max-width:900px}
.doc-content > .doc-section{max-width:900px}
@media (min-width:1100px){.toc ol,.toc ul{columns:2;column-gap:40px}}
.stack-initials{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;
  background:var(--gp-navy);color:var(--gp-orange);font:900 16px/1 var(--gp-display);letter-spacing:.02em}

/* ============================================================
   CASE STUDY PAGES, round 3. The overview left a tall empty
   column and the blocks had no hierarchy. The client panel now
   stays with you as you read, each block is a titled card, and
   the service chips are brand chips.
   ============================================================ */
#cs-overview{padding:clamp(52px,6.5vw,104px) 0}
.cs-overview-grid{display:grid;gap:clamp(24px,3.2vw,56px);align-items:start}
@media (min-width:1000px){
  .cs-overview-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .cs-overview-label{position:sticky;top:110px}
}
.cs-section-label{font:800 11.5px/1 var(--gp-body) !important;letter-spacing:.2em;text-transform:uppercase;color:var(--gp-orange-text) !important}
.cs-overview-label .h2{font:800 clamp(30px,4vw,54px)/1.02 var(--gp-display) !important;letter-spacing:-.032em;color:var(--gp-navy) !important;margin:12px 0 10px}
.cs-overview-label p{font-size:15px;color:var(--gp-text-2) !important}
.cs-overview-content > div{background:#fff !important;border:1px solid var(--gp-line) !important;border-radius:22px;
  padding:26px 28px 28px !important;margin-bottom:clamp(12px,1.4vw,18px);
  transition:transform .45s var(--gp-ease),box-shadow .45s,border-color .45s}
.cs-overview-content > div:hover{transform:translateY(-4px);border-color:rgba(254,139,3,.5) !important;box-shadow:0 34px 62px -44px rgba(1,17,52,.5)}
.cs-block-title{font:800 clamp(18px,1.8vw,23px)/1.2 var(--gp-display) !important;color:var(--gp-navy) !important;
  margin-bottom:12px;padding-left:15px;border-left:4px solid var(--gp-orange)}
.cs-block-text{font-size:16px !important;line-height:1.72;color:var(--gp-text-2) !important}
.cs-service-chip{background:#FFF1E2 !important;color:var(--gp-orange-text) !important;border:1px solid rgba(254,139,3,.32) !important;
  font:800 11.5px/1 var(--gp-body) !important;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px !important;border-radius:999px !important;
  transition:background .3s,color .3s,transform .3s}
.cs-service-chip:hover{background:var(--gp-orange) !important;color:var(--gp-navy) !important;transform:translateY(-2px)}

/* ---- 404: the lockup was being squeezed (fixed height, stretched width) ---- */
.logo-wrap img{height:44px !important;width:auto !important;max-width:none !important;display:block;margin:0 auto}
.logo-wrap{margin-bottom:44px}

/* ---- contrast pass, round 3: orange on a light surface must be the darker
   orange, never the bright one, and small white copy on navy needs more alpha ---- */
.diff-highlight,.pop-row .diff-highlight{color:var(--gp-orange-text) !important}
.gp-dark .diff-highlight,.pop-row > *:hover .diff-highlight{color:var(--gp-orange) !important}
.cstack-meta{color:rgba(255,255,255,.86) !important}
.gal-cap span,.gal-now-meta{color:rgba(255,255,255,.82) !important}
.speed-badge,.check-partial,.cs-service-chip,.article-cat-tag.on-light{color:var(--gp-orange-text) !important}
/* an eyebrow or a small link on a light surface uses the darker orange */
:where(body:not(.gp-dark)) .eyebrow:not(.gp-dark .eyebrow):not([class*="ph-"] .eyebrow){color:var(--gp-orange-text)}
.gp-dark .eyebrow,#hero .eyebrow,.ph .eyebrow,.gal-side .eyebrow,#testimonials .eyebrow,.cstack .eyebrow{color:var(--gp-orange) !important}
/* blog call-to-action buttons match the site: navy text on solid orange */
.cta-btn,a.cta-btn{background:var(--gp-orange) !important;color:var(--gp-navy) !important;border:0 !important;font-weight:800}
.cta-btn:hover{background:var(--gp-navy) !important;color:#fff !important}
/* an eyebrow inside a navy section uses the bright orange, not the dark one */
#booking-embed .eyebrow,#booking-embed .eyebrow::before,
.gp-dark .eyebrow::before,#hero .eyebrow::before,.ph .eyebrow::before,
.gal-side .eyebrow::before,#testimonials .eyebrow::before,.cstack .eyebrow::before{color:var(--gp-orange) !important;background:var(--gp-orange)}
#booking-embed h2,#booking-embed h3,#booking-embed p{color:#fff !important}

/* ---- case study metrics: real cards with an orange rule, not four hairline
   boxes with a lot of air in them ---- */
#cs-metrics{padding:clamp(34px,4vw,56px) 0}
#cs-metrics .container > div,.cs-metrics-grid{display:grid;gap:clamp(12px,1.5vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:0 !important}
.cs-metric,#cs-metrics .cs-metric{position:relative;background:#fff !important;border:1px solid var(--gp-line) !important;
  border-radius:20px;padding:26px 24px 24px !important;overflow:hidden;
  transition:transform .45s var(--gp-ease),box-shadow .45s,border-color .45s}
.cs-metric::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--gp-orange)}
.cs-metric:hover{transform:translateY(-5px);border-color:rgba(254,139,3,.55) !important;box-shadow:0 34px 60px -44px rgba(1,17,52,.5)}
.cs-metric-val,#cs-metrics .cs-metric-val{font:900 clamp(30px,3.4vw,50px)/1 var(--gp-display) !important;
  color:var(--gp-orange-text) !important;letter-spacing:-.035em}
.cs-metric-label,#cs-metrics .cs-metric-label{margin-top:10px;font:800 11.5px/1.35 var(--gp-body) !important;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gp-text-2) !important}

/* ============================================================
   FIX: the "No outsourcing. One team." cards turned their text
   white on hover, but the navy hover background never applied,
   because `#different .diff-card` (0,1,1,0) outranked
   `.pop-row>*:hover` (0,0,2,0). Both carried !important, so the
   ID rule won and the copy went white on a pale card. The hover
   and focus states now carry the same ID weight.
   ============================================================ */
#different .diff-card:hover,#different .diff-card:focus-within,#different .diff-card.is-open{
  background:var(--gp-navy) !important;border-color:var(--gp-navy) !important}
#different .diff-card:hover .pop-body,#different .diff-card:focus-within .pop-body,#different .diff-card.is-open .pop-body{opacity:1;transform:none}
#different .diff-card:hover h3,#different .diff-card:hover .h3,
#different .diff-card:focus-within h3,#different .diff-card:focus-within .h3,
#different .diff-card.is-open h3,#different .diff-card.is-open .h3{color:#fff !important}
#different .diff-card:hover p,#different .diff-card:focus-within p,#different .diff-card.is-open p{color:#DCE5F7 !important}
#different .diff-card:hover .diff-highlight,#different .diff-card:focus-within .diff-highlight,
#different .diff-card.is-open .diff-highlight{color:var(--gp-orange) !important}
#different .diff-card:hover .pop-label,#different .diff-card:focus-within .pop-label,#different .diff-card.is-open .pop-label{opacity:0}
#different .diff-card:hover .pop-art,#different .diff-card:focus-within .pop-art,#different .diff-card.is-open .pop-art{opacity:.1;filter:grayscale(1) brightness(4)}

/* ============================================================
   SNAKE PATH, round 4. Owner, with the Droids reference: "the
   lines are under the process, mine is inside the process."
   The number used to sit ON TOP of the heading, so the vertical
   run dropped straight through the copy. The number now has its
   own column on the left, the text sits beside it, and the line
   travels in that column and under each card, never across a word.
   ============================================================ */
@media (min-width:1000px){
  .snake > li{width:52% !important}
  .snake > li:nth-child(even){margin-left:auto}
  .snake .pw-step,.snake .hw-step{
    display:grid !important;grid-template-columns:84px minmax(0,1fr);
    column-gap:clamp(16px,1.7vw,28px);align-items:start}
  .snake .pw-no,.snake .hw-step-no{grid-column:1;grid-row:1 / span 6;margin:0 !important;align-self:start}
  .snake .pw-step > h3,.snake .pw-step > p,.snake .pw-step > *:not(.pw-no),
  .snake .hw-step > *:not(.hw-step-no){grid-column:2}
  .snake .pw-step p,.snake .hw-step > p,.snake .hw-step-body p{max-width:46ch}
}
/* the run has to clear the copy above it, so each card reserves room below */
@media (min-width:1000px){.snake > li{padding-bottom:96px}
  .snake .pw-step,.snake .hw-step{padding-bottom:0 !important}}
.snake-line path{stroke-width:2.5}
/* how-we-work wraps its number in .hw-step-side, so the grid child is that wrapper */
@media (min-width:1000px){
  .snake .hw-step > .hw-step-side{grid-column:1;grid-row:1 / span 6;margin:0 !important}
  .snake .hw-step > .hw-step-body{grid-column:2}
  .snake .hw-step-side{display:block}
}
/* a round-2 rule `ol.snake .hw-step{display:block!important;grid-template-columns:none!important}`
   (0,2,1) outranked the round-4 grid (0,2,0), so how-we-work kept the old stacked
   layout and the line still crossed the copy. Same weight, stated last. */
@media (min-width:1000px){
  ol.snake .hw-step,ol.snake .pw-step{display:grid !important;
    grid-template-columns:84px minmax(0,1fr) !important;column-gap:clamp(16px,1.7vw,28px);align-items:start}
  ol.snake .hw-step > .hw-step-side{grid-column:1 !important;grid-row:1 / span 6}
  ol.snake .hw-step > .hw-step-body{grid-column:2 !important}
  ol.snake .pw-step > .pw-no{grid-column:1 !important;grid-row:1 / span 6}
  ol.snake .pw-step > *:not(.pw-no){grid-column:2 !important}
}

/* ============================================================
   HOVER STATES, round 4. Owner: "when I hover it gives me a blue
   background that makes everything disappear." The gold buttons
   use a gradient, so a hover that changed only the background
   left the label navy on navy (measured contrast 1.00). Both the
   background and the label are now set together, every time.
   ============================================================ */
a.btn-gold:hover,a.btn-gold:focus-visible,button.btn-gold:hover,button.btn-gold:focus-visible,
.tier-cta:hover,.tier-cta:focus-visible,.cta-submit:hover,.cta-submit:focus-visible,
.gal-cta:hover,.gal-cta:focus-visible,.faq-sticky .btn-primary:hover,.cta-btn:hover{
  background:var(--gp-navy) !important;background-image:none !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;border-color:var(--gp-navy) !important;
  box-shadow:0 18px 38px -18px rgba(1,17,52,.7) !important}
a.btn-gold:hover svg,button.btn-gold:hover svg,.tier-cta:hover svg,.cta-submit:hover svg,
.gal-cta:hover svg,.cta-btn:hover svg{stroke:#fff !important;color:#fff !important}
/* ghost buttons invert the other way: navy fill, white label */
a.btn-ghost:hover,button.btn-ghost:hover{background:var(--gp-navy) !important;background-image:none !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;border-color:var(--gp-navy) !important}
.gp-dark a.btn-ghost:hover,#hero a.btn-ghost:hover,.ph a.btn-ghost:hover,.gp-cta a.btn-ghost:hover{
  background:#fff !important;color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important;border-color:#fff !important}
/* the language button sat white on white when the header went light */
#navbar .lang-btn,#navbar .lang-btn *{color:var(--gp-navy) !important}
html.gp-over-dark #navbar:not(.scrolled) .lang-btn,html.gp-over-dark #navbar:not(.scrolled) .lang-btn *{color:#fff !important}
#navbar .lang-btn:hover,#navbar .lang-btn:hover *{color:var(--gp-orange-text) !important}
html.gp-over-dark #navbar:not(.scrolled) .lang-btn:hover,html.gp-over-dark #navbar:not(.scrolled) .lang-btn:hover *{color:var(--gp-orange) !important}
/* founder Read Bio: solid orange with navy text, never a blend */
.fs .founder-read-btn:hover,.fs .founder-read-btn:focus-visible{
  background:var(--gp-orange) !important;background-image:none !important;
  color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important}
/* carousel arrows: solid on hover so the glyph stays readable */
.wc-arrow:hover,.fan-prev:hover,.fan-next:hover,.rs-btn:hover,.cstack-arrow:hover,
.founders-arrow:hover,.sv-nav-arrow:hover,[class*="-arrow"]:hover{
  background:var(--gp-orange) !important;color:var(--gp-navy) !important;border-color:var(--gp-orange) !important}

/* The page-level rule `.case-card:has(.case-info) a:not(.btn-gold){color:navy!important}`
   (0,3,0) and the pricing tier rules outranked the round-4 hover block (0,2,1),
   so those labels stayed navy on a navy hover fill. Same declarations, stated
   with `html body` so they carry enough weight everywhere. */
html body a.btn-gold:hover,html body button.btn-gold:hover,
html body a.btn-ghost:hover,html body button.btn-ghost:hover,
html body .tier-cta:hover,html body .cta-submit:hover,html body .gal-cta:hover,
html body .case-cta a:hover,html body .cta-btn:hover,html body .faq-sticky .btn-primary:hover{
  background:var(--gp-navy) !important;background-image:none !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;border-color:var(--gp-navy) !important}
html body a.btn-gold:hover svg,html body a.btn-ghost:hover svg,html body .tier-cta:hover svg,
html body .case-cta a:hover svg,html body .cta-submit:hover svg{stroke:#fff !important;color:#fff !important}
/* inside a navy section the inversion goes the other way: white fill, navy label */
html body .gp-dark a.btn-ghost:hover,html body #hero a.btn-ghost:hover,html body .ph a.btn-ghost:hover,
html body .gp-cta a.btn-ghost:hover,html body .cstack a.btn-ghost:hover,html body #testimonials a.btn-ghost:hover,
html body .gal a.btn-ghost:hover,html body .hpin a.btn-ghost:hover{
  background:#fff !important;background-image:none !important;
  color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important;border-color:#fff !important}
html body .gp-dark a.btn-ghost:hover svg,html body .ph a.btn-ghost:hover svg,
html body .gp-cta a.btn-ghost:hover svg{stroke:var(--gp-navy) !important;color:var(--gp-navy) !important}
html body #navbar .lang-btn:hover,html body #navbar .lang-btn:hover *{color:var(--gp-orange-text) !important}
html body.gp-over-dark #navbar:not(.scrolled) .lang-btn:hover,
html.gp-over-dark body #navbar:not(.scrolled) .lang-btn:hover *{color:var(--gp-orange) !important}

/* Page rules such as `.case-card:has(.case-info) a:not(.btn-gold)` score (0,3,1)
   on class count, which beat every ancestor-based attempt above. The class is
   repeated here purely to raise specificity; it changes nothing else. */
html body a.btn-gold.btn-gold.btn-gold:hover,html body button.btn-gold.btn-gold.btn-gold:hover,
html body a.btn-ghost.btn-ghost.btn-ghost:hover,html body button.btn-ghost.btn-ghost.btn-ghost:hover,
html body .tier-cta.tier-cta.tier-cta:hover,html body .cta-submit.cta-submit.cta-submit:hover,
html body .gal-cta.gal-cta.gal-cta:hover,html body .cta-btn.cta-btn.cta-btn:hover{
  background:var(--gp-navy) !important;background-image:none !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;border-color:var(--gp-navy) !important}
html body a.btn-gold.btn-gold.btn-gold:hover svg,html body a.btn-ghost.btn-ghost.btn-ghost:hover svg,
html body .tier-cta.tier-cta.tier-cta:hover svg,html body .cta-submit.cta-submit.cta-submit:hover svg{
  stroke:#fff !important;color:#fff !important}
/* on navy the inversion is white fill with a navy label */
html body .gp-dark a.btn-ghost.btn-ghost.btn-ghost:hover,html body #hero a.btn-ghost.btn-ghost.btn-ghost:hover,
html body .ph a.btn-ghost.btn-ghost.btn-ghost:hover,html body .gp-cta a.btn-ghost.btn-ghost.btn-ghost:hover,
html body .cstack a.btn-ghost.btn-ghost.btn-ghost:hover,html body .gal a.btn-ghost.btn-ghost.btn-ghost:hover,
html body #testimonials a.btn-ghost.btn-ghost.btn-ghost:hover{
  background:#fff !important;background-image:none !important;
  color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important;border-color:#fff !important}
html body .gp-dark a.btn-ghost.btn-ghost.btn-ghost:hover svg,html body .ph a.btn-ghost.btn-ghost.btn-ghost:hover svg,
html body .gp-cta a.btn-ghost.btn-ghost.btn-ghost:hover svg{stroke:var(--gp-navy) !important;color:var(--gp-navy) !important}
html body #navbar .lang-btn.lang-btn:hover,html body #navbar .lang-btn.lang-btn:hover *{color:var(--gp-orange-text) !important}
/* the header sits behind an ID, so its two controls need ID-level weight */
html body #navbar a.btn-gold:hover,html body #navbar a.btn-gold:hover *{
  background:var(--gp-navy) !important;background-image:none !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;border-color:var(--gp-navy) !important}
html body #navbar .lang-btn:hover{background:#F2F5FB !important;border-color:var(--gp-navy) !important}
html body #navbar .lang-btn:hover,html body #navbar .lang-btn:hover *{color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important}
html.gp-over-dark body #navbar:not(.scrolled) .lang-btn:hover{background:rgba(255,255,255,.18) !important;border-color:#fff !important}
html.gp-over-dark body #navbar:not(.scrolled) .lang-btn:hover,
html.gp-over-dark body #navbar:not(.scrolled) .lang-btn:hover *{color:#fff !important;-webkit-text-fill-color:#fff !important}
/* the header button keeps its orange and simply deepens on hover, so there is
   no inversion to get wrong and the label is navy at every moment */
html body #navbar a.btn-gold,html body #navbar a.btn-gold *{color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important}
html body #navbar a.btn-gold:hover,html body #navbar a.btn-gold:focus-visible{
  background:#F07800 !important;background-image:none !important;border-color:#F07800 !important;
  color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important;
  box-shadow:0 14px 30px -14px rgba(240,120,0,.8) !important}
html body #navbar a.btn-gold:hover *{color:var(--gp-navy) !important;-webkit-text-fill-color:var(--gp-navy) !important}

/* ============================================================
   CASE STUDY GALLERY AND NAVIGATION, round 4. Owner: the image
   slide needs arrows, and the previous/next at the bottom was
   so quiet that nobody would know it could be clicked.
   ============================================================ */
.cn{position:relative}
.cn-nav{position:absolute;right:18px;bottom:18px;z-index:4;display:flex;align-items:center;gap:10px;
  background:rgba(1,17,52,.72);backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px}
.cn-arrow{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.34);background:transparent;
  color:#fff;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .3s,color .3s,border-color .3s,transform .3s}
.cn-arrow:hover{background:var(--gp-orange);color:var(--gp-navy);border-color:var(--gp-orange);transform:translateY(-2px)}
.cn-count{font:800 12.5px/1 var(--gp-body);letter-spacing:.1em;color:#fff;min-width:44px;text-align:center}
@media (max-width:640px){.cn-nav{right:12px;bottom:12px;padding:6px 10px}.cn-arrow{width:34px;height:34px}}

/* previous and next case: two obvious cards instead of quiet links */
#cs-case-nav{padding:clamp(40px,5vw,72px) 0}
.cs-nav-inner{display:grid;gap:14px;align-items:stretch}
@media (min-width:860px){.cs-nav-inner{grid-template-columns:1fr auto 1fr}}
.cs-nav-btn{display:flex !important;align-items:center;gap:16px;background:var(--gp-navy) !important;
  border-radius:22px;padding:22px 26px !important;text-decoration:none;
  box-shadow:0 26px 52px -34px rgba(1,17,52,.7);transition:transform .45s var(--gp-ease),box-shadow .45s,background .4s}
.cs-nav-btn:hover{transform:translateY(-4px);background:#06214f !important;box-shadow:0 36px 64px -34px rgba(1,17,52,.8)}
.cs-nav-btn--right{justify-content:flex-end;text-align:right}
.cs-nav-btn small{display:block;font:800 11px/1 var(--gp-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gp-orange);margin-bottom:8px}
.cs-nav-btn strong{display:block;font:800 clamp(17px,1.8vw,23px)/1.15 var(--gp-display);color:#fff;letter-spacing:-.02em}
.cs-nav-arrow{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  background:var(--gp-orange);color:var(--gp-navy);font-size:20px;font-weight:800;transition:transform .4s var(--gp-ease)}
.cs-nav-btn:hover .cs-nav-arrow{transform:translateX(4px) scale(1.06)}
.cs-nav-btn--left:hover .cs-nav-arrow{transform:translateX(-4px) scale(1.06)}
.cs-nav-all{align-self:center;display:inline-flex;align-items:center;gap:8px;font:800 13.5px/1 var(--gp-body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--gp-navy) !important;text-decoration:none;
  border:2px solid var(--gp-navy);border-radius:999px;padding:14px 22px;transition:background .3s,color .3s}
.cs-nav-all:hover{background:var(--gp-navy);color:#fff !important}
/* the previous card carries the arrow first, so it reads leftwards */
.cs-nav-btn:not(.cs-nav-btn--right){justify-content:flex-start;text-align:left}
.cs-nav-btn:not(.cs-nav-btn--right):hover .cs-nav-arrow{transform:translateX(-4px) scale(1.06)}
/* the Work page case stack now opens with a heading that says it is a selection */
.cases-head{max-width:860px;margin:0 0 clamp(26px,3.2vw,46px)}
.cases-head .h2{font:800 clamp(30px,4.4vw,62px)/1.03 var(--gp-display);letter-spacing:-.03em;color:var(--gp-navy);margin:12px 0 14px}
.cases-head p{font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.66;color:var(--gp-text-2);max-width:66ch}

/* ---- Work case cards, round 4: the whole card is the target ---- */
.cases-full .case-card.is-clickable{cursor:pointer}
.cases-full .case-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;z-index:3;
  background:var(--gp-orange);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--gp-ease)}
.cases-full .case-card:hover::before{transform:scaleX(1)}
.case-open{position:absolute;right:22px;bottom:22px;z-index:4;display:inline-flex;align-items:center;gap:10px;
  background:var(--gp-navy);color:#fff;border-radius:999px;padding:11px 16px;pointer-events:none;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--gp-ease)}
.cases-full .case-card:hover .case-open{opacity:1;transform:none}
.case-open i{font:800 12.5px/1 var(--gp-body);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.case-open b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gp-orange);color:var(--gp-navy);font-size:13px}
@media (max-width:999px){.case-open{display:none}}

/* ============================================================
   "WHAT WE BUILD" PROBLEM LINE, round 4. Owner: the three key
   points stacked one under the other and read as an afterthought.
   They are now three bordered cards spread across the row on
   desktop, each with its own orange marker, and stacked on a
   phone. The heading answers all three underneath.
   ============================================================ */
.xs-head{max-width:none}
.svc-problems{display:grid !important;gap:clamp(12px,1.4vw,18px);margin:clamp(18px,2vw,28px) 0 clamp(20px,2.4vw,32px) !important}
@media (min-width:860px){.svc-problems{grid-template-columns:repeat(3,1fr)}}
.svc-problems span{position:relative;display:block;background:#fff;border:1px solid var(--gp-line);
  border-left:5px solid var(--gp-orange);border-radius:16px;padding:20px 22px 20px 24px;
  font:800 clamp(16.5px,1.6vw,21px)/1.28 var(--gp-display) !important;color:var(--gp-navy) !important;
  letter-spacing:-.018em;box-shadow:0 18px 38px -30px rgba(1,17,52,.45);
  transition:transform .45s var(--gp-ease),box-shadow .45s,border-color .45s,background .45s}
.svc-problems span:hover{transform:translateY(-5px);box-shadow:0 34px 60px -38px rgba(1,17,52,.55);
  border-color:rgba(254,139,3,.55);background:#FFF9F3}
.svc-problems span::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--gp-orange);transform:translateY(-50%) scale(.6);opacity:.35;transition:transform .45s var(--gp-ease),opacity .45s}
.svc-problems span:hover::after{transform:translateY(-50%) scale(1);opacity:1}
.xs-head .h2{font:800 clamp(34px,5vw,72px)/1.02 var(--gp-display) !important;letter-spacing:-.032em}
.xs-lead{font-size:clamp(16px,1.5vw,20px) !important;line-height:1.6;max-width:70ch}
@media (max-width:859px){.svc-problems span{font-size:17px !important;padding:16px 18px 16px 20px}}
/* the old inline list used a "/" separator between the three phrases; they are
   separate cards now, so the separator has to go */
.xs-head .svc-problems span:not(:last-child)::after{content:"" !important;position:absolute !important;
  right:18px !important;left:auto !important;margin:0 !important;width:9px;height:9px;border-radius:50%;
  background:var(--gp-orange);top:50%;transform:translateY(-50%) scale(.6);opacity:.35}
.xs-head .svc-problems span:not(:last-child):hover::after{transform:translateY(-50%) scale(1);opacity:1}

/* ============================================================
   AI PANEL, round 4. Owner: the 1-2-3-4-5 node chain "just
   shakes the page" and says nothing. It is replaced by what the
   automation is actually worth: a ring that fills to 24/7 and
   three plain statements. No invented figures, no timing promise.
   ============================================================ */
.ai-value{display:grid;gap:clamp(18px,2.4vw,30px);align-items:center;padding:clamp(20px,2.4vw,30px) 0}
@media (min-width:560px){.ai-value{grid-template-columns:auto minmax(0,1fr)}}
.ai-ring{position:relative;width:clamp(116px,13vw,148px);aspect-ratio:1;display:grid;place-items:center}
.ai-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ai-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ai-ring-bg{stroke:rgba(255,255,255,.14)}
.ai-ring-fg{stroke:var(--gp-orange);stroke-dasharray:327;stroke-dashoffset:327;
  animation:aiRing 2.2s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.2s}
@keyframes aiRing{to{stroke-dashoffset:26}}
.ai-ring-label{position:absolute;text-align:center;line-height:1.1}
.ai-ring-label b{display:block;font:900 clamp(24px,2.6vw,34px)/1 var(--gp-display);color:#fff;letter-spacing:-.03em}
.ai-ring-label i{display:block;margin-top:6px;font:700 10.5px/1 var(--gp-body);font-style:normal;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gp-orange)}
.ai-value-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ai-value-list li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.55;color:rgba(255,255,255,.88)}
.ai-tick{width:20px;height:20px;border-radius:6px;background:rgba(254,139,3,.18);position:relative;margin-top:2px}
.ai-tick::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:11px;border:solid var(--gp-orange);
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.ai-ring-fg{animation:none;stroke-dashoffset:26}}

/* ============================================================
   FOOTER, round 4. Owner, more than once: bigger and interactive
   on a phone. The social link was literally the text "ig", which
   read as a bug. It is an icon pill now, the columns are tappable
   accordions on a phone with real 48px targets, and the type is
   up a size across the board.
   ============================================================ */
.fsoc{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#fff !important;text-decoration:none;
  font:800 13.5px/1 var(--gp-body);transition:background .3s,border-color .3s,color .3s,transform .3s}
.fsoc svg{width:19px;height:19px}
.fsoc:hover{background:var(--gp-orange);border-color:var(--gp-orange);color:var(--gp-navy) !important;transform:translateY(-2px)}
#footer .footer-col-title{font:800 12.5px/1 var(--gp-body) !important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gp-orange) !important}
#footer .footer-col a,#footer .footer-col li a{font-size:15.5px !important;line-height:1.5;
  display:inline-block;padding:3px 0;transition:color .25s,padding-left .25s}
#footer .footer-col a:hover{color:var(--gp-orange) !important;padding-left:5px}
#footer .footer-brand p{font-size:15.5px;line-height:1.7}

@media (max-width:820px){
  #footer{padding-top:48px}
  #footer .footer-grid{display:block}
  #footer .footer-col{border-top:1px solid rgba(255,255,255,.14);padding:0}
  #footer .footer-col-title{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:20px 2px;margin:0 !important;cursor:pointer;font-size:14px !important;color:#fff !important}
  #footer .footer-col ul{max-height:0;overflow:hidden;transition:max-height .4s var(--gp-ease);margin:0;padding:0;list-style:none}
  #footer .footer-col.is-open ul{max-height:520px;padding-bottom:14px}
  #footer .footer-col li a{display:block;padding:13px 2px;font-size:16.5px !important;min-height:46px}
  #footer .footer-brand{padding-bottom:26px}
  #footer .footer-brand img{height:44px;width:auto}
  #footer .fsoc{padding:14px 22px 14px 16px;font-size:15px}
}
@media (max-width:820px){
  html body #footer .footer-col-title{display:flex !important;align-items:center;justify-content:space-between;
    width:100% !important;padding:20px 2px !important;margin:0 !important}
}
@media (max-width:820px){
  /* the chevron is positioned rather than laid out, so it cannot be pushed onto
     its own line by whatever display the page gives the title */
  html body #footer .footer-col-title{position:relative !important;padding-right:34px !important}
}

/* the footer accordion chevron is a real span appended by initFooter */
.fc-chev{display:none}
@media (max-width:820px){
  html body #footer .footer-col-title{position:relative !important;display:block !important;padding-right:38px !important}
  .fc-chev{display:block;position:absolute;right:8px;top:50%;width:11px;height:11px;
    border-right:2.5px solid var(--gp-orange);border-bottom:2.5px solid var(--gp-orange);
    transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--gp-ease)}
  #footer .footer-col.is-open .fc-chev{transform:translateY(-30%) rotate(-135deg)}
}
/* the reveal backstop for elements a GSAP trigger never reached */
.gs-shown{opacity:1 !important;transform:none !important}

/* ============================================================
   "WHY WE EXIST" ON ABOUT, round 4. Owner wanted the ScienceSoft
   treatment: the same words, given structure. The heading stays
   with you, the five paragraphs become a numbered narrative on a
   rail, and the one nearest the middle of the screen lights up.
   Not a word of the story changed.
   ============================================================ */
#origin{padding:clamp(56px,7vw,110px) 0}
.origin-grid{display:grid;gap:clamp(28px,4vw,72px);align-items:start;counter-reset:origin}
@media (min-width:1000px){
  .origin-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .origin-label{position:sticky;top:118px}
}
.origin-label .h2{font:800 clamp(32px,4.6vw,64px)/1.02 var(--gp-display) !important;letter-spacing:-.03em;color:var(--gp-navy) !important;margin:12px 0 16px}
.origin-label > p{font-size:clamp(15.5px,1.4vw,18px);line-height:1.68;color:var(--gp-text-2);max-width:46ch}
.origin-text{position:relative;display:grid;gap:clamp(18px,2.2vw,30px)}
.origin-para{counter-increment:origin;position:relative;padding:22px 26px 24px 64px !important;
  background:#fff;border:1px solid var(--gp-line);border-radius:22px;
  font-size:clamp(15.5px,1.35vw,18px) !important;line-height:1.72;color:var(--gp-text-2) !important;
  transition:transform .5s var(--gp-ease),box-shadow .5s,border-color .5s,background .5s}
.origin-para::before{content:counter(origin,decimal-leading-zero);position:absolute;left:22px;top:24px;
  font:900 13px/1 var(--gp-display);color:var(--gp-line-strong,#C3CEE4);letter-spacing:.04em;transition:color .5s}
.origin-para::after{content:"";position:absolute;left:29px;top:46px;bottom:18px;width:2px;border-radius:2px;
  background:var(--gp-line);transition:background .5s}
.origin-para:last-child::after{display:none}
.origin-para strong{color:var(--gp-navy) !important;font-weight:800}
.origin-para.is-live,.origin-para:hover{transform:translateY(-4px);border-color:rgba(254,139,3,.5);
  box-shadow:0 32px 60px -42px rgba(1,17,52,.5);background:#FFFDFA}
.origin-para.is-live::before,.origin-para:hover::before{color:var(--gp-orange-text)}
.origin-para.is-live::after{background:var(--gp-orange)}
.origin-pull{margin:0 0 14px !important;padding:16px 20px !important;border:0 !important;
  background:var(--gp-navy) !important;border-radius:16px;
  font:800 clamp(16px,1.5vw,20px)/1.4 var(--gp-display) !important;color:#fff !important;letter-spacing:-.015em}
.origin-para.is-live .origin-pull{box-shadow:0 22px 44px -26px rgba(1,17,52,.7)}
@media (max-width:999px){.origin-para{padding:20px 20px 20px 56px !important}.origin-para::before{left:18px}.origin-para::after{left:25px}}
/* the illustration behind an open card was blown out to a faint dot; keep it
   readable as a watermark instead */
#different .diff-card:hover .pop-art,#different .diff-card:focus-within .pop-art,#different .diff-card.is-open .pop-art{
  opacity:.22 !important;filter:none !important;transform:scale(1.18) translate(6%,-10%) !important}
#different .diff-card:hover .pop-art svg,#different .diff-card.is-open .pop-art svg{filter:brightness(1.6) saturate(1.2)}

/* ============================================================
   SECTION LEAD TYPE, round 4. Owner: the intro lines under the
   headings "need to be a little bit bigger, not as big as the
   other text, but a little bit obvious". One step up across the
   site, with the measure kept so lines do not run too long.
   ============================================================ */
.xs-lead,.ind-head > p,.cases-head p,.gal-lead,.pw-when-head > p,.pm-head > p,
.sv-del-desc,.sv-process-header > p,.sv-results-header > p,.sv-forwho-header > p,
.fs-head p,.origin-label > p,.ph p,.hw-head > p,.different-header > p,
.section-header > p,.voices-sub,.exp-subhead,.ct-lead,.faq-sticky > p,
.pricing-header > p,.tech-header > p,.wc-head > p,#pick .gp-pick-intro,.hpin-head p{
  font-size:clamp(16.5px,1.5vw,20px) !important;line-height:1.62 !important}
.eyebrow{font-size:12.5px !important;letter-spacing:.19em}
/* the word before the coloured phrase carries the section, so give it presence */
.svc-problems span{font-size:clamp(17px,1.65vw,22px) !important}
@media (max-width:640px){
  .xs-lead,.ind-head > p,.cases-head p,.gal-lead,.fs-head p,.origin-label > p,
  .section-header > p,.voices-sub,.exp-subhead{font-size:16.5px !important}
  .eyebrow{font-size:12px !important}
}
/* the parallax needs the photo slightly oversized so the drift never shows an edge */
.cases-full .case-img-wrap img{will-change:transform}
.cases-full .case-card:hover .case-img-wrap img{transform:scale(1.1) !important;transition:transform .9s var(--gp-ease)}

/* ---- case study reading index in the sticky panel ---- */
.cs-read{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:4px;counter-reset:csr}
.cs-read li button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;
  padding:12px 14px;border-radius:12px;cursor:pointer;color:var(--gp-text-2);
  font:700 14.5px/1.3 var(--gp-body);transition:background .3s,color .3s,transform .3s}
.cs-read li button span{font:900 11px/1 var(--gp-display);letter-spacing:.06em;color:var(--gp-line-strong,#C3CEE4);transition:color .3s}
.cs-read li button:hover{background:#F2F5FB;color:var(--gp-navy)}
.cs-read li.is-live button{background:var(--gp-navy);color:#fff}
.cs-read li.is-live button span{color:var(--gp-orange)}
.cs-overview-content > div.is-live{border-color:rgba(254,139,3,.5) !important;
  box-shadow:0 30px 56px -40px rgba(1,17,52,.5)}
.cs-overview-content > div.is-live .cs-block-title{color:var(--gp-navy) !important}
@media (max-width:999px){.cs-read{display:none}}

/* ============================================================
   FOCUS RING, round 5. It was 2px royal blue, which all but
   disappears against the navy header, footer and dark sections.
   Orange reads on both, and the white outer ring keeps it
   visible on orange buttons too. Keyboard users only.
   ============================================================ */
:focus-visible{outline:3px solid var(--gp-orange) !important;outline-offset:2px !important;
  border-radius:4px;box-shadow:0 0 0 5px rgba(1,17,52,.35) !important}
.gp-dark :focus-visible,#hero :focus-visible,.ph :focus-visible,#footer :focus-visible,#navbar :focus-visible,.gp-menu :focus-visible,
.gp-cta :focus-visible,#testimonials :focus-visible,.gal :focus-visible,.cstack :focus-visible{
  box-shadow:0 0 0 5px rgba(255,255,255,.45) !important}
/* an orange control needs a navy ring to stay visible */
a.btn-gold:focus-visible,button.btn-gold:focus-visible,.tier-cta:focus-visible,.cta-submit:focus-visible{
  outline-color:var(--gp-navy) !important;box-shadow:0 0 0 5px rgba(254,139,3,.55) !important}

/* ============================================================
   HEADER CTA ON SCROLL. Every page carries an inline rule
   (from the old pill header) that sets the header "Book a Free
   Call" to opacity 0, visibility hidden and translateX(30px)
   as soon as #navbar gains .scrolled. On the current compact
   bar that leaves a hole between the language switcher and
   MENU, and the site's primary action disappears for the whole
   page. Two !important rules of weight (1,3,0) set it, so this
   answers at (1,3,3) from the last stylesheet. Below 1180px the
   bar is too narrow and the full-screen menu carries the CTA,
   so the existing display:none there stands.
   ============================================================ */
@media (min-width:1181px){
  html body #navbar.scrolled .nav-right a.btn-gold,
  html body #navbar.scrolled .nav-actions a.nav-cta{
    opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    transform:none !important;position:static !important;margin-right:10px !important}
}

/* ============================================================
   CLIENT LOGO WALL. Replaces the text-only client marquee with
   the real marks, every one in an identical box so a tall
   wordmark and a square app icon read as the same weight.
   The client NAME stays under each logo: it was visible copy
   before, and an icon-only mark (MyMedQ, Gymnastika) does not
   identify itself. Arrows at both ends, continuous drift, and
   it holds still on hover, focus, touch or off screen.
   ============================================================ */
.lwall{position:relative;display:flex;align-items:center;gap:6px;
  margin-top:clamp(40px,5vw,68px);padding:6px clamp(4px,1.5vw,18px);
  border-top:1px solid var(--gp-line);border-bottom:1px solid var(--gp-line)}
.lw-viewport{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
html body ul.lw-track{list-style:none;margin:0;padding:20px 0;display:flex;gap:16px;
  width:max-content;max-width:none;will-change:transform}
html body li.lw-item{margin:0;padding:0;flex:0 0 auto}
html body .lw-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:206px;height:124px;padding:14px 14px;overflow:hidden;border:1px solid var(--gp-line);border-radius:16px;
  background:#fff !important;text-decoration:none;
  transition:border-color .25s,box-shadow .25s,transform .25s}
html body a.lw-box:hover,html body a.lw-box:focus-visible{
  border-color:var(--gp-orange);transform:translateY(-4px);
  box-shadow:0 16px 34px -18px rgba(1,17,52,.42)}
.lw-fig{height:46px;display:flex;align-items:center;justify-content:center;width:100%}
/* the page CSS carries img{max-width:100%}, so these need the weight */
html body .lw-fig img{max-height:46px !important;max-width:156px !important;
  width:auto !important;height:auto !important;object-fit:contain;display:block}
/* two lines so "Kitchen Supply Wholesale" is not cut to an ellipsis */
.lw-name{font-family:var(--gp-display);font-weight:800;font-size:11.5px;letter-spacing:.055em;
  text-transform:uppercase;color:rgba(1,17,52,.58);text-align:center;line-height:1.22;word-spacing:.14em;
  max-width:178px;height:2.44em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;transition:color .25s}
html body a.lw-box:hover .lw-name{color:var(--gp-navy)}
.lw-arrow{flex:0 0 auto;width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid var(--gp-line);background:#fff;color:var(--gp-navy);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,border-color .2s}
.lw-arrow:hover{background:var(--gp-navy);color:#fff;border-color:var(--gp-navy)}
@media (max-width:700px){
  html body .lw-box{width:158px;height:98px;gap:8px}
  .lw-fig{height:38px}.lw-fig img{max-height:38px;max-width:120px}
  .lw-name{font-size:10.5px;max-width:132px}
  .lw-arrow{width:36px;height:36px;font-size:19px}
}

/* ============================================================
   WHAT WE BUILD, the three key points. Owner: the third card
   ("Your team is buried in manual work.") wrapped onto a second
   line while the other two sat on one, so the row looked
   ragged. On desktop all three are now forced onto a single
   line and the type is sized so the longest of them fits with
   room to spare; the dot marker gets its own gutter so no word
   runs underneath it. Phones keep the stacked cards and wrap
   normally, because one line there would be unreadably small.
   ============================================================ */
@media (min-width:860px){
  html body .xs-head .svc-problems span{
    white-space:nowrap;
    font-size:clamp(14.5px,1.33vw,18.5px) !important;
    padding:19px 44px 19px 22px;
    display:flex;align-items:center;min-height:62px}
}

/* ============================================================
   WHAT WE PUBLISH, the pinned sideways scroller. Owner asked
   for bigger cards. Width goes 560 to 680 and the panel type up
   with it; the height is capped against the pinned pane, which
   is only (100vh - header) tall and also carries the heading
   row, so it stays a vh clamp rather than a fixed number and
   nothing is ever cut off on a short laptop screen.
   ============================================================ */
@media (min-width:761px){
  html body .hpin-card{flex:0 0 min(680px,86vw)}
  html body .hpin-card > a{height:clamp(360px,47vh,520px)}
  html body .hpin-title{font-size:clamp(24px,2.35vw,34px)}
  html body .hpin-body{font-size:15.5px;max-width:52ch}
  html body .hpin-go{font-size:15px}
  html body .hpin-track{gap:28px}
}
@media (max-width:760px){
  html body .hpin-card{flex:0 0 88vw}
  html body .hpin-card > a{height:min(52vh,430px)}
  html body .hpin-title{font-size:23px}
}

/* ============================================================
   NUMBERS THAT DON'T LIE, Chiella-style drift. The viewport had
   scroll-snap-type:x mandatory, which re-snaps every frame and
   fights a continuous scrollLeft, so the row would judder and
   never move. Snap is now only for reduced motion, where the
   row does not drift and snapping is what you want. The clone
   set that makes the loop seamless is inert.
   ============================================================ */
html body .rs-viewport{scroll-snap-type:none;scroll-behavior:auto}
@media (prefers-reduced-motion: reduce){
  html body .rs-viewport{scroll-snap-type:x mandatory;scroll-behavior:smooth}
}
html body .rs-card.rs-clone{pointer-events:none;user-select:none}

/* ============================================================
   FOOTER MENU. Owner: the menu words in the footer are too
   small. Column titles go 12.5 to 14px and the links 15.5 to
   17.5 with more line spacing and a heavier weight, so the
   footer reads as navigation rather than fine print. The rows
   are taller, which also makes them easier to hit. Phones
   already had 16.5px in the accordion; that goes up too.
   ============================================================ */
html body #footer .footer-col-title{font-size:14px !important;letter-spacing:.18em !important;
  margin-bottom:18px !important;opacity:1}
html body #footer .footer-col a,
html body #footer .footer-col li a{font-size:17.5px !important;line-height:1.95 !important;
  font-weight:600 !important;letter-spacing:-.005em;
  color:rgba(255,255,255,.82) !important;transition:color .22s,padding-left .22s}
html body #footer .footer-col a:hover,
html body #footer .footer-col a:focus-visible{color:var(--gp-orange) !important;padding-left:6px}
html body #footer .footer-col li{margin:0 0 2px}
/* a long entry ("SEO / AEO / GEO / CRO") wrapped as inline text and the
   second line started at the column edge instead of under the first */
html body #footer .footer-col li a{display:inline-block;max-width:100%}
@media (min-width:861px){
  html body #footer .footer-grid,html body #footer .footer-top{column-gap:clamp(28px,3.4vw,60px)}
}
@media (max-width:860px){
  html body #footer .footer-col li a{font-size:17.5px !important;padding:15px 2px !important;min-height:50px}
  html body #footer .footer-col-title{font-size:15px !important;padding-top:18px !important;padding-bottom:18px !important}
}

/* ============================================================
   AI PANEL, THE NIGHT SHIFT (owner chose option 2). The panel
   showed a static ring and three bullet points, so nothing in
   the "your business runs while you sleep" section actually
   ran. A dial now sweeps the overnight hours and each of the
   three lines lights as the clock passes its time. The three
   sentences are the ones that were already there, word for
   word; the times are illustrative, in the same spirit as the
   example chat below them. Under reduced motion the dial sits
   full and all three lines are lit from the start.
   ============================================================ */
html body .ai-value.ns{display:grid;gap:clamp(20px,2.6vw,34px);align-items:center;
  padding:clamp(20px,2.4vw,30px) 0}
@media (min-width:560px){html body .ai-value.ns{grid-template-columns:auto minmax(0,1fr)}}

.ns-clock{display:flex;flex-direction:column;align-items:center;gap:12px}
.ns-dial{position:relative;width:clamp(122px,13.5vw,152px);aspect-ratio:1;display:grid;place-items:center}
.ns-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.ns-dial circle{fill:none;stroke-width:9;stroke-linecap:round}
.ns-bg{stroke:rgba(255,255,255,.14)}
.ns-arc{stroke:var(--gp-orange);stroke-dasharray:327;stroke-dashoffset:327}
.ns-time{position:absolute;font:900 clamp(24px,2.6vw,33px)/1 var(--gp-display);color:#fff;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ns-badge{display:inline-flex;align-items:baseline;gap:7px;padding:6px 13px;border-radius:999px;
  background:rgba(254,139,3,.14);border:1px solid rgba(254,139,3,.4)}
.ns-badge b{font:900 14px/1 var(--gp-display);color:var(--gp-orange);letter-spacing:-.02em}
.ns-badge i{font:700 10px/1 var(--gp-body);font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

html body ul.ai-value-list.ns-log{list-style:none;margin:0;padding:0;display:grid;gap:10px}
html body .ns-log li{display:grid;grid-template-columns:22px auto minmax(0,1fr);gap:12px;align-items:start;
  padding:11px 14px;border-radius:13px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);color:#DCE5F7;font-size:14.5px;line-height:1.5;
  opacity:.34;transition:opacity .5s var(--gp-ease),border-color .5s,background .5s,transform .5s var(--gp-ease)}
html body .ns-log li.is-on{opacity:1;border-color:rgba(254,139,3,.42);background:rgba(254,139,3,.08)}
.ns-at{font:700 13px/1.45 var(--gp-body);color:var(--gp-orange);font-variant-numeric:tabular-nums;white-space:nowrap}
.ns-txt{min-width:0}
.ns-tick{width:20px;height:20px;border-radius:7px;margin-top:1px;position:relative;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:background .4s,border-color .4s}
html body .ns-log li.is-on .ns-tick{background:rgba(254,139,3,.2);border-color:rgba(254,139,3,.55)}
.ns-tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;
  border:solid var(--gp-orange);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);
  opacity:0;transition:opacity .4s,transform .4s var(--gp-ease)}
html body .ns-log li.is-on .ns-tick::after{opacity:1;transform:rotate(45deg) scale(1)}
@media (max-width:559px){
  html body .ns-log li{grid-template-columns:20px auto minmax(0,1fr);font-size:14px;padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .ns-arc{stroke-dashoffset:26}
  html body .ns-log li{opacity:1;border-color:rgba(254,139,3,.42);background:rgba(254,139,3,.08)}
  html body .ns-log li .ns-tick{background:rgba(254,139,3,.2);border-color:rgba(254,139,3,.55)}
  html body .ns-log li .ns-tick::after{opacity:1;transform:rotate(45deg) scale(1)}
}

/* ============================================================
   ONE FOOTER, EVERY PAGE. The owner asked five times for the
   same footer site-wide. There were NINE different footers and
   three pages (404, privacy, terms) with none at all. Every
   page now carries the homepage footer markup verbatim.
   The layout itself lived only in each page's inline <style>,
   so on the pages whose inline block never had those rules the
   columns stacked and the footer ran 600px too tall. It is
   defined here instead, in the one stylesheet every page
   loads, so the footer cannot drift again.
   ============================================================ */
html body #footer{position:relative;overflow:hidden;padding:64px 0 32px}
html body #footer > .container{max-width:1280px;margin:0 auto;padding:0 40px}
html body #footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;margin:0 0 48px;padding:0;position:relative;z-index:1}
html body #footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;padding-top:32px;position:relative;z-index:1}
html body #footer .footer-brand img{height:32px;margin-bottom:16px;width:auto}
html body #footer .footer-brand p{font-size:14px;line-height:1.65;max-width:280px}
html body #footer .footer-bottom p{font-size:13px}
html body #footer ul{list-style:none;margin:0;padding:0}
/* the column list was flex with a 10px gap on one page, 12px on another
   and plain block on the legal pages, so the same footer stood at three
   different heights. One definition here, for every page. */
html body #footer .footer-col ul{display:flex;flex-direction:column;gap:10px}
html body #footer .footer-col li{margin:0}
@media (max-width:1024px){html body #footer .footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:860px){
  html body #footer .footer-grid{grid-template-columns:1fr;gap:0;margin-bottom:28px}
  html body #footer > .container{padding:0 20px}
}

/* ============================================================
   THE "BOOK A FREE CALL" HOVER. Two separate faults, both
   reported by the owner.
   1. Every .btn-gold carries a ::after layer painted Klein blue
      (#002FA7) that scales across the button on hover. On the
      header CTA that reads as a blue slab sweeping the menu bar.
      Killed on the header and menu CTAs.
   2. The menu CTA turned SOLID WHITE on hover inside the dark
      full-screen menu, which is the "not cool" one. It now just
      deepens the orange, like the header button.
   On a touch screen :hover sticks after a tap, so there is no
   hover state at all there: only a small press.
   ============================================================ */
html body #navbar a.btn-gold::after,  html body #navbar a.btn-gold::before,
html body #gpMenu a.gm-cta::after,    html body #gpMenu a.gm-cta::before{
  content:none !important;display:none !important}

html body #gpMenu a.gm-cta{transition:background .22s,color .22s,box-shadow .22s,transform .18s}
html body #gpMenu a.gm-cta:hover,
html body #gpMenu a.gm-cta:focus-visible{
  background:#F07800 !important;color:var(--gp-navy) !important;
  box-shadow:0 16px 34px -14px rgba(254,139,3,.85) !important}
html body #gpMenu a.gm-cta:active{transform:scale(.985)}
html body #navbar a.btn-gold:active{transform:scale(.985)}

@media (hover:none){
  /* a tap must not leave a hover stuck on the button */
  html body #navbar a.btn-gold:hover,
  html body #gpMenu a.gm-cta:hover{
    background:var(--gp-orange) !important;color:var(--gp-navy) !important;
    transform:none !important;box-shadow:0 14px 30px -14px rgba(254,139,3,.8) !important}
}

/* article contents list: the longest entry ran its last word right up to
   (and two pixels past) the box border. Give the links room on both sides. */
html body .toc-list a{display:block;padding:3px 12px;overflow-wrap:anywhere}

/* ============================================================
   THE COMMON QUESTIONS HEADING NOW HOLDS STILL. It was already
   `position:sticky`, but an ancestor (section.faq-section) sets
   overflow-x:hidden, and any non-visible overflow on an ancestor
   makes that element the sticky element's scroll container, so
   it never pins to the viewport. Same trap as the body one in
   MEMORY, one level down. overflow-x:clip does the same visual
   job without creating a scroll container.
   The heading now stays put from the first question to the last
   ("Do you offer retainer engagements?") and then scrolls away
   with the section, which is what the owner asked for.
   ============================================================ */
/* mobile-fix.css sets this with `[data-theme] .faq-section`, which scores
   (0,2,0) and beats a plain `html body section.faq-section` at (0,1,3),
   because class count is compared before element count. The class is
   repeated here purely to get above it. */
html body section.faq-section.faq-section,
html body section.sv-faq-section.sv-faq-section,
html body section.pfaq-section.pfaq-section{overflow-x:clip !important;overflow-y:visible !important}
@media (min-width:1000px){
  html body .faq-sticky{position:sticky !important;top:120px;align-self:start}
}

/* ============================================================
   THE WORK CARDS NOW ACTUALLY STACK. Each .case-card is already
   position:sticky at the header height, but .cases-wrapper sets
   overflow:hidden, which makes IT the scroll container, so the
   cards scrolled straight past instead of pinning. Third time
   this trap has bitten: body, then section.faq-section, now
   this. overflow-x:clip clips the same way without creating a
   scroll container. The class is repeated to clear the
   [data-theme]-prefixed rules that would otherwise win.
   ============================================================ */
html body .cases-wrapper.cases-wrapper,
html body .cases-full.cases-full{overflow-x:clip !important;overflow-y:visible !important}

/* ============================================================
   VERIFIED CAMPAIGN DATA, rebuilt as the Chiella deck. The row
   of cards drifting sideways is gone. The four result cards now
   sit on top of one another and step back behind the front one,
   exactly as measured on chiellaevents.com/gallery: -9px of Y,
   -0.045 of scale and an alternating tilt per slot, the last
   slot faded out so the wrap cannot be seen. Card width is
   unchanged. Slot transforms are written by initResultsDeck.
   ============================================================ */
html body .rs-deck{position:relative;display:block;overflow:visible;
  width:min(540px,100%);margin:0 auto;outline:none;
  perspective:1400px;padding:18px 0 8px}
html body .rs-deck .rs-card{position:absolute;inset:0;width:100%;height:100%;
  transform-origin:50% 100%;
  transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .55s ease;
  will-change:transform;backface-visibility:hidden;
  box-shadow:0 34px 74px -30px rgba(1,17,52,.72)}
html body .rs-deck .rs-card > *{position:relative;z-index:1}
/* dots sit with the copy, Chiella-style */
html body .rs-dots{display:flex;gap:9px;align-items:center;margin-top:18px}
html body .rs-dots button{width:26px;height:26px;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center}
/* this column sits on the light surface, so a white inactive dot was
   invisible and the row read as one orange blob */
html body .rs-dots button::before{content:"";display:block;width:9px;height:9px;border-radius:5px;
  background:rgba(1,17,52,.26);transition:background .3s,width .3s}
html body .gp-dark .rs-dots button::before{background:rgba(255,255,255,.34)}
html body .rs-dots button.on::before{background:var(--gp-orange);width:24px}
@media (max-width:1023px){
  html body .rs-deck{width:100%;margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  html body .rs-deck .rs-card{transition:none}
}

/* ============================================================
   Round 14: mobile optimisation (owner review)
   ------------------------------------------------------------
   1. Hard line breaks in headings are a DESKTOP composition. On a narrow
      screen the line wraps on its own and the forced break then strands a
      single word ("The agency built from" / "a specific" / "frustration.").
      Every break inside a heading now has a real space before it in the
      HTML, so dropping the break below 1000px rejoins the words correctly
      instead of running them together ("froma"). text-wrap:balance evens
      out the natural wrap; browsers without it simply wrap normally.
   ============================================================ */
@media (max-width:1000px){
  html body h1 br,
  html body h2 br,
  html body h3 br{display:none}
  html body h1,
  html body h2,
  html body h3{text-wrap:balance}
}

/* 2. Header logo on phones. At 360px the 151px lockup ended exactly where
      the EN/MENU group began, with nothing between them. */
@media (max-width:760px){
  #nav-logo-img{height:30px !important}
}
@media (max-width:400px){
  #nav-logo-img{height:27px !important}
  html body #navbar .nav-inner{padding-left:14px !important;padding-right:14px !important}
}

/* 3. The emphasised (orange serif) phrase in a heading is display:block, which
      is the desktop composition: the phrase owns its own line. On a phone that
      same rule stranded single words ("specific" alone, then a gap, then
      "frustration."). Below 1000px the phrase flows with the sentence.
      One rule, every heading on the site. */
@media (max-width:1000px){
  html body :where(section) h2 em,
  html body .section-title em,
  html body .ph h1 em,
  html body #hero .hero-h1 em,
  html body h1 em,
  html body h2 em{display:inline !important}
}

/* 4. Client logo wall on phones. The two arrows took 96px of a 390px screen,
      leaving a 294px window, and the 5% edge mask then ate into the artwork,
      so every logo was cut on one side and the name below it was clipped by
      the box height. On a phone the row already drifts on its own and takes a
      swipe, so the arrows are dropped, the window runs nearly full width, the
      fade is a fixed 14px, and the box is tall enough for a two-line name. */
@media (max-width:760px){
  html body .lwall{gap:0;padding-left:14px;padding-right:14px}
  html body .lwall .lw-arrow{display:none}
  /* a 34px fade, about a fifth of a card, so a card leaving the row reads as
     fading out rather than being sliced off by a hard edge */
  html body .lw-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
                         mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
  html body ul.lw-track{padding:12px 0;gap:14px}
  html body .lw-box{width:154px;height:112px;gap:8px}
  html body .lw-name{max-width:126px;line-height:1.28}
}


/* 5. Vertical rhythm on phones. Section padding was tuned for a 1440px screen:
      80px top and bottom meant 160px of empty white between two sections on a
      844px-tall phone, which is a fifth of the screen doing nothing. Trimmed,
      not removed, so sections still read as separate. */
@media (max-width:760px){
  html body #trust-bar{padding-bottom:36px !important}
  html body .lwall{margin-top:26px !important}
}

/* 5. Vertical rhythm on phones. Section padding was tuned on a 1440px screen
      and carried straight down: measured at 390px, five sections ran 120px top
      AND bottom (240px of empty white, 28 per cent of an 844px screen doing
      nothing) and eleven more ran 80/80. Everything non-structural collapses
      to 56px, which still separates sections but stops the page reading as
      half air. The page heroes (.ph and friends) keep their 132px top, which
      is header clearance, not decoration; the pinned and stacking sections
      keep theirs because their height is computed from it. Sections that
      deliberately butt against the one above keep a zero top. */
@media (max-width:760px){
  html body > section:not(#hero):not(.ph):not([class*="-hero"]):not([id*="-hero"]):not(.hpin):not(.gp-steps):not(.cases-full):not(.svc-stack):not(#track-record):not(.article-hero):not(#cs-hero):not(#sv-hero){
    padding-top:56px !important;
    padding-bottom:56px !important;
  }
  html body > section.filter-bar,
  html body > section.articles-section,
  html body > section.topics-section,
  html body > section.comparison-section{padding-top:0 !important}
}

/* 6. Work page results grid. work.html declares .rs-grid as two columns with a
      16px gap below 800px, but the theme layer also owns .rs-grid and sets
      gap:40px, so the two columns no longer fitted: the right-hand figures ran
      to x=389 on a 360px screen and "+800%" was cut off. One column on a
      phone, with min-width:0 so a long figure can never set the floor. */
@media (max-width:620px){
  html body .rs-grid{grid-template-columns:minmax(0,1fr) !important;gap:14px !important}
  html body .rs-grid > *{min-width:0}
  html body .rs-item{padding:22px 18px !important}
}

/* 7. A heading that already sets its own lines with <br> must not ALSO have its
      emphasis phrase forced onto a line of its own. That double break is what
      stranded "a" on About ("built from" / "a" / "specific" / "frustration.")
      at every width, desktop included, and "Real results" in the track-record
      heading. Six headings carry both a break and an emphasis; in four the
      break already sits before the emphasis, so this is a no-op for them.
      Headings whose emphasis IS their line break (35 of them) keep display:block. */
html body h1:has(br) em,
html body h2:has(br) em,
html body h3:has(br) em,
html body .ph h1:has(br) em{display:inline !important}

/* 8. Client voices heading. The h2 carried max-width:448px inside a 476px
      column, so "after the work is done." wrapped and left "done." alone on a
      third line. The cap bought nothing: the column already sets the measure. */
html body #testimonials .voices-head h2,
html body #testimonials .voices-head .h2{max-width:100% !important}

/* 9. Widows on long headings. A heading that sets its own lines with <br> wants
      text-wrap:balance (measured: pretty fights the breaks and made things
      worse, 15 stranded lines against 1). A heading with no breaks, like an
      article or case-study title, wants pretty, which exists precisely to stop
      a single word dropping to the last line ("...in the First / Scroll").
      Measured: pretty on a phone column is worse again (10 stranded lines
      against 0), because a narrow measure gives it nothing to trade, so it is
      scoped to the wide columns where it helps. */
@media (min-width:1001px){
  html body h1:not(:has(br)),
  html body h2:not(:has(br)),
  html body h3:not(:has(br)){text-wrap:pretty}
}

/* Small phones: the panel content still ran 74px past the pinned pane at
   390x844, so the photograph and the copy step down once more. Measured by
   comparing the panel's scrollHeight with the height it is given, which is
   the only honest test: a bounding-box check catches the 1s slide-in
   transition and reports a cut that is not there at rest. */
@media (max-width:560px){
  html body .gp-steps-head{padding-top:10px}
  html body .gp-steps-head h2,
  html body .gp-steps-head .h2{font-size:clamp(19px,5vw,24px) !important}
  .gp-step-in{gap:12px;padding-bottom:12px}
  html body .gp-step-h{margin:0 0 7px}
  html body .gp-step-copy p{font-size:14px;line-height:1.45;margin:0 0 10px}
}

/* ============================================================
   Round 15: the language switcher is a floating side tab
   ------------------------------------------------------------
   Owner: off the menu bar, at the side of the site, desktop and mobile,
   obstructing nothing. The right edge already carries the WhatsApp button
   (z 998) and back-to-top (z 9990), so the rail takes the left edge,
   vertically centred. z-index 990 puts it over page content but under the
   navbar (1000), the full-screen menu (3000) and every modal (9500+).
   The rules repeat the class because the page CSS writes the old header
   styling as [data-theme] .lang-btn, which scores two classes.
   ============================================================ */
.gp-lang{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:990}
html body .gp-lang .lang-switcher{position:relative}

/* The tab itself: icon over the code, flush to the screen edge.
   Every declaration carries !important because this button was styled for the
   header by BOTH the theme's light conversion (white background) and
   mobile-fix.css (padding, font-size, colour, and a forced 12px on any svg
   inside it), all with !important. Measured before writing: the tab rendered
   white, 7px/12px padding, 8px radius, 13px type, 12px globe. */
html body .gp-lang .lang-btn{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  justify-content:center !important;gap:3px !important;
  width:46px !important;padding:13px 0 12px !important;
  font-family:var(--gp-display) !important;font-size:12px !important;font-weight:800 !important;
  letter-spacing:.06em !important;line-height:1 !important;
  background:var(--gp-navy) !important;color:#fff !important;
  border:0 !important;border-radius:0 15px 15px 0 !important;
  box-shadow:0 14px 34px -14px rgba(1,17,52,.62) !important;
  cursor:pointer;
  transition:background .25s,color .25s,padding-left .25s,box-shadow .25s;
}
html body .gp-lang .lang-btn .gl-globe{width:17px !important;height:17px !important;opacity:.92}
/* the original chevron pointed down under a header menu; here the list opens
   to the right, so it points that way */
html body .gp-lang .lang-btn > svg:not(.gl-globe){
  width:10px !important;height:10px !important;transform:rotate(-90deg) !important;opacity:.72}
html body .gp-lang .lang-switcher.open .lang-btn > svg:not(.gl-globe){transform:rotate(90deg) !important}

html body .gp-lang .lang-btn:hover,
html body .gp-lang .lang-btn:focus-visible,
html body .gp-lang .lang-switcher.open .lang-btn{
  background:#F07800 !important;color:var(--gp-navy) !important;padding-left:5px !important;
  border-color:transparent !important;
  box-shadow:0 18px 40px -14px rgba(1,17,52,.7) !important;
}

/* the list flies out beside the tab instead of dropping under a header */
/* mobile-fix.css pins this flyout under a header with
   `.lang-menu{position:absolute!important;top:calc(100%+8px)!important;right:0!important}`.
   An !important declaration beats specificity, so these have to carry it too
   (trap 5 in MEMORY: list the matched rules in the browser, do not grep). */
html body .gp-lang .lang-menu{
  position:absolute !important;left:calc(100% + 12px) !important;right:auto !important;top:50% !important;
  transform:translateY(-50%) translateX(-10px) !important;
  min-width:168px;padding:6px;
  background:#fff;border:1px solid rgba(1,17,52,.12);border-radius:16px;
  box-shadow:0 30px 70px -26px rgba(1,17,52,.55);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1),visibility .22s;
}
html body .gp-lang .lang-switcher.open .lang-menu{opacity:1 !important;visibility:visible !important;transform:translateY(-50%) !important}
html body .gp-lang .lang-menu button{
  display:block !important;width:100% !important;text-align:left !important;border-radius:10px !important;
  font-family:var(--gp-body) !important;font-size:14.5px !important;font-weight:600 !important;
  padding:10px 14px !important;color:var(--gp-navy) !important;background:none !important;
  transition:background .15s,color .15s;
}
html body .gp-lang .lang-menu button:hover{background:#F4F7FD !important;color:var(--gp-navy) !important}
html body .gp-lang .lang-menu button.active{background:var(--gp-orange) !important;color:var(--gp-navy) !important}

/* phones: a smaller tab, same place. 38px on a 390px screen leaves the
   content gutter almost untouched and nothing else lives on that edge. */
@media (max-width:760px){
  html body .gp-lang .lang-btn{width:38px !important;padding:11px 0 10px !important;
    font-size:10.5px !important;border-radius:0 13px 13px 0 !important}
  html body .gp-lang .lang-btn .gl-globe{width:15px !important;height:15px !important}
  html body .gp-lang .lang-menu{left:calc(100% + 9px) !important;min-width:152px}
  html body .gp-lang .lang-menu button{font-size:14px;padding:9px 12px}
}
/* a very short screen: keep it clear of the header and the cookie bar */
@media (max-height:520px){html body .gp-lang{top:auto;bottom:16px;transform:none}
  html body .gp-lang .lang-menu{top:auto !important;bottom:0;transform:translateX(-10px) !important}
  html body .gp-lang .lang-switcher.open .lang-menu{transform:none !important}}

/* the full-screen menu covers the page, so the tab steps out of its way */
html:has(#gpMenu.open) .gp-lang{opacity:0;visibility:hidden;pointer-events:none}
.gp-lang{transition:opacity .3s,visibility .3s}

@media (prefers-reduced-motion:reduce){
  html body .gp-lang .lang-btn,
  html body .gp-lang .lang-menu{transition:none !important}
}
@media print{.gp-lang{display:none !important}}

/* ============================================================
   Round 16: the real social accounts (owner supplied)
   The footer row carried one pill; it now carries four, and .footer-social
   had no flex-wrap, so on a 390px screen the row ran 30px past the edge and
   each pill grew to 96px tall as its label wrapped inside it.
   ============================================================ */
/* Four labelled pills need 436px and the footer column is 397px, measured, so
   one line is not available at any sensible padding. A two by two grid is the
   deliberate version of the 3 + 1 ragged wrap that flex gave: max-content
   columns keep each pill its natural width and line the two rows up. */
html body #footer .footer-social{
  display:grid !important;grid-template-columns:repeat(2,max-content) !important;
  gap:10px !important;justify-content:start !important;flex-wrap:nowrap !important}
html body #footer .fsoc{white-space:nowrap;justify-content:flex-start}
@media (max-width:760px){
  html body #footer .fsoc{padding:10px 15px 10px 12px !important;font-size:13.5px !important;gap:8px !important}
  html body #footer .fsoc svg{width:17px !important;height:17px !important}
}
@media (max-width:400px){
  html body #footer .fsoc{padding:9px 13px 9px 11px !important;font-size:13px !important}
}

/* ------------------------------------------------------------
   Round 17: the social pill hover.
   It was filling solid orange AND colouring the label the same orange, so
   the handle disappeared (measured contrast 1.00). The first fix made it
   navy on orange, which was legible but still blanketed the handle in
   colour. The owner's point stands: the hover should bring the handle to
   life, not paint over it. So the pill stays dark, the ring and the icon
   light up orange, the label brightens, and the whole thing lifts, which
   is how every other card on the site behaves.
   `#footer a:hover{color:var(--gp-orange)!important}` carries ID weight
   (1,1,0) and beats any number of classes, so these carry ID weight too.
   ------------------------------------------------------------ */
html body #footer .footer-social a.fsoc{
  transition:border-color .25s,background .25s,transform .25s var(--gp-ease),box-shadow .25s !important;
}
html body #footer .footer-social a.fsoc:hover,
html body #footer .footer-social a.fsoc:focus-visible{
  background:rgba(255,255,255,.07) !important;
  border-color:var(--gp-orange) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.65) !important;
}
/* the label stays white and crisp: that is the part being read */
html body #footer .footer-social a.fsoc:hover span,
html body #footer .footer-social a.fsoc:focus-visible span{color:#fff !important}
/* the brand mark is what lights up */
html body #footer .footer-social a.fsoc:hover svg,
html body #footer .footer-social a.fsoc:focus-visible svg{
  color:var(--gp-orange) !important;transform:scale(1.08);transition:transform .25s var(--gp-ease);
}
/* the anchor itself must not take the footer's orange link colour, or the
   label inherits it and we are back to orange on orange */
html body #footer .footer-social a.fsoc:hover,
html body #footer .footer-social a.fsoc:focus-visible{color:#fff !important}

@media (hover:none){
  html body #footer .footer-social a.fsoc:hover{
    background:transparent !important;border-color:rgba(255,255,255,.22) !important;transform:none !important;
  }
  html body #footer .footer-social a.fsoc:hover svg{color:#fff !important;transform:none !important}
  html body #footer .footer-social a.fsoc:active{transform:scale(.97) !important}
}
}


/* Form fallback panel: shown when an enquiry cannot be delivered automatically */
html body .gp-fallback{margin:22px 0 0;padding:22px 22px 20px;border-radius:16px;
  background:#FFF4E8 !important;border:1px solid rgba(254,139,3,.45);
  box-shadow:0 12px 34px rgba(1,17,52,.1)}
html body .gp-fallback .gp-fb-h{margin:0 0 6px;font-family:var(--gp-display);font-weight:800;
  font-size:clamp(17px,1.7vw,20px);letter-spacing:-.02em;color:var(--gp-navy) !important}
html body .gp-fallback .gp-fb-p{margin:0 0 16px;font-size:15px;line-height:1.6;
  color:rgba(1,17,52,.8) !important}
html body .gp-fallback .gp-fb-row{display:flex;flex-wrap:wrap;gap:10px}
html body .gp-fallback a{display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:999px;font-weight:800;font-size:14.5px;text-decoration:none;
  transition:background .2s,color .2s,transform .2s}
html body .gp-fallback a.gp-fb-wa{background:#FE8B03;color:#011134 !important}
html body .gp-fallback a.gp-fb-wa:hover{background:var(--gp-navy);color:#fff !important;transform:translateY(-2px)}
html body .gp-fallback a.gp-fb-mail{background:transparent;color:var(--gp-navy) !important;
  border:1.5px solid rgba(1,17,52,.3)}
html body .gp-fallback a.gp-fb-mail:hover{background:var(--gp-navy);color:#fff !important;transform:translateY(-2px)}
.gp-dark html body .gp-fallback,html body .gp-dark .gp-fallback{background:rgba(255,255,255,.06) !important}


/* ── Why we exist: the five paragraphs stack on themselves ──────────────────
   Owner request. Same mechanism as the Pick a service cards: each card is
   sticky under the header with a small extra offset per card, so the next one
   climbs over the last and the finished pile stays on screen. Works at every
   width. Trap 1 applies: nothing in the ancestor chain may set overflow to
   anything but visible or clip, so #origin, .container, .origin-grid and
   .origin-text are pinned to clip here. */
html body #origin,html body #origin .container,
html body #origin .origin-grid,html body #origin .origin-text{
  overflow-x:clip !important;overflow-y:visible !important}
html body #origin .origin-text{display:block !important;position:relative}
html body #origin .origin-para{
  /* about.html's own mobile block carries .origin-para{position:static!important},
     so the sticky value has to be !important too (trap 5, then trap 2) */
  position:sticky !important;
  margin:0 0 clamp(20px,2.4vw,34px) !important;
  background:#fff !important;
  border:2px solid var(--gp-line) !important;
  border-radius:26px !important;
  box-shadow:0 26px 60px -40px rgba(1,17,52,.45) !important;
  padding:30px 32px 32px 72px !important;
  will-change:transform}
html body #origin .origin-para:last-child{margin-bottom:0 !important}
html body #origin .origin-para::before{
  font-size:15px !important;left:26px !important;top:32px !important}
html body #origin .origin-para::after{left:33px !important;top:56px !important}
/* the pile: 114px clears the header, then 16px of the card beneath shows */
html body #origin .origin-para:nth-child(1){top:114px;z-index:1}
html body #origin .origin-para:nth-child(2){top:130px;z-index:2}
html body #origin .origin-para:nth-child(3){top:146px;z-index:3}
html body #origin .origin-para:nth-child(4){top:162px;z-index:4}
html body #origin .origin-para:nth-child(5){top:178px;z-index:5}
html body #origin .origin-para:nth-child(6){top:194px;z-index:6}
html body #origin .origin-para:nth-child(7){top:210px;z-index:7}
/* a card that has been climbed over reads as the layer beneath */
html body #origin .origin-para.is-under{border-color:var(--gp-line) !important;
  box-shadow:0 18px 40px -34px rgba(1,17,52,.4) !important}
html body #origin .origin-para.is-live{border-color:rgba(254,139,3,.7) !important;
  box-shadow:0 34px 70px -40px rgba(1,17,52,.55) !important;transform:none !important}
html body #origin .origin-para:hover{transform:none !important}
html body #origin .origin-pull{border-radius:18px !important;padding:18px 22px !important}
@media (max-width:999px){
  html body #origin .origin-para{padding:24px 22px 26px 60px !important;border-radius:22px !important}
  html body #origin .origin-para::before{left:20px !important;top:26px !important}
  html body #origin .origin-para::after{left:27px !important;top:48px !important}
  /* the header is shorter on a phone, and so is the step between cards */
  html body #origin .origin-para:nth-child(1){top:84px}
  html body #origin .origin-para:nth-child(2){top:96px}
  html body #origin .origin-para:nth-child(3){top:108px}
  html body #origin .origin-para:nth-child(4){top:120px}
  html body #origin .origin-para:nth-child(5){top:132px}
  html body #origin .origin-para:nth-child(6){top:144px}
  html body #origin .origin-para:nth-child(7){top:156px}
}
/* the heading column cannot be sticky as well, or it rides up with the pile */
@media (min-width:1000px){html body #origin .origin-label{top:114px}}
@media (prefers-reduced-motion: reduce){
  html body #origin .origin-para{position:static !important}}

/* ── Founder bio modal ──────────────────────────────────────────────────────
   Three faults, all from the pre-redesign styles in the page head (trap 5).
   The card is painted #0A0A0A while the close button and the name are set to
   var(--white), which the theme redefines as navy on a light page: navy ink on
   a near-black card, so both read as invisible. And the 2:3 portraits were
   dropped into a 220px column stretched to the body height with object-fit
   cover, which crops everything but the head.
   The card is rebuilt on brand navy, and the photo column carries the
   portraits' own 2:3 ratio so the whole picture is shown. */
html body .founder-modal{
  background:var(--gp-navy) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:24px !important;
  grid-template-columns:clamp(220px,26vw,280px) 1fr !important;
  align-items:start !important;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.7) !important}
html body .founder-modal .fmodal-photo{
  align-self:start !important;
  aspect-ratio:2/3 !important;
  min-height:0 !important;height:auto !important;
  background:#01204A !important;
  border-radius:24px 0 0 24px !important;overflow:hidden !important}
html body .founder-modal .fmodal-photo img{
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center center !important}
html body .founder-modal .fmodal-close{
  top:16px !important;right:16px !important;width:40px !important;height:40px !important;
  background:#FE8B03 !important;border:0 !important;color:#011134 !important;
  font-size:21px !important;font-weight:800 !important;
  box-shadow:0 8px 22px rgba(0,0,0,.45) !important}
html body .founder-modal .fmodal-close:hover,
html body .founder-modal .fmodal-close:focus-visible{
  background:#fff !important;color:#011134 !important;transform:scale(1.06)}
html body .founder-modal .fmodal-name{
  color:#fff !important;
  font-family:var(--gp-display) !important;font-weight:800 !important;
  font-size:clamp(23px,2.4vw,30px) !important;letter-spacing:-.025em !important}
html body .founder-modal .fmodal-role{color:var(--gp-orange) !important;letter-spacing:.14em !important}
html body .founder-modal .fmodal-bio p{color:#DCE5F7 !important;font-size:15px !important;line-height:1.78 !important}
html body .founder-modal .fmodal-tag{
  background:rgba(254,139,3,.14) !important;color:var(--gp-orange) !important;
  border:1px solid rgba(254,139,3,.4) !important}
html body .founder-modal .fmodal-body{padding:clamp(28px,3vw,42px) clamp(24px,3vw,38px) !important}
@media (max-width:620px){
  html body .founder-modal{grid-template-columns:1fr !important}
  /* on a phone the portrait sits above the text, still uncropped, and capped
     so the bio is not pushed off the screen */
  html body .founder-modal .fmodal-photo{
    aspect-ratio:auto !important;height:min(46vh,340px) !important;
    max-height:none !important;border-radius:24px 24px 0 0 !important;
    justify-self:center !important;width:min(100%,232px) !important}
  html body .founder-modal .fmodal-photo img{object-fit:cover !important;object-position:center top !important}
}

/* ── Homepage hero sub-copy ─────────────────────────────────────────────────
   Owner: drop the company name (the logo is right above it, so naming the
   company again is tautology), put the promise in two bold clauses that break
   one per line on a phone, and make the six services read as what they are
   rather than as a sentence of full stops nobody notices. */
html body #hero .hero-sub-lead{
  margin:0 auto 18px !important;max-width:22ch;
  font-family:var(--gp-display) !important;
  font-size:clamp(20px,2.5vw,32px) !important;line-height:1.24 !important;
  letter-spacing:-.025em !important;color:#fff !important;text-wrap:balance}
html body #hero .hero-sub-lead b{font-weight:800 !important;color:#fff !important}
html body #hero .hero-sub-lead b + b{color:var(--gp-orange) !important}

html body #hero .hero-caps{
  list-style:none !important;margin:0 auto 20px !important;padding:0 !important;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px}
html body #hero .hero-caps li{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px 8px 13px;border-radius:9px;
  background:rgba(254,139,3,.14);border:1.5px solid rgba(254,139,3,.55);
  font-family:var(--gp-display);font-weight:800;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;color:#FFC27A;
  transition:background .25s,color .25s,transform .25s,border-color .25s}
html body #hero .hero-caps li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gp-orange);flex:0 0 auto}
html body #hero .hero-caps li:hover{
  background:var(--gp-orange);border-color:var(--gp-orange);color:#011134;transform:translateY(-2px)}
html body #hero .hero-caps li:hover::before{background:#011134}

html body #hero .hero-sub-tail{margin:0 auto !important;font-size:clamp(14.5px,1.35vw,17px) !important}
html body #hero .hero-sub-tail strong{color:rgba(255,255,255,.9) !important;font-weight:700 !important}

@media (max-width:760px){
  /* one clause per line, as asked */
  html body #hero .hero-sub-lead{max-width:none;font-size:clamp(21px,6.2vw,27px) !important}
  html body #hero .hero-sub-lead b{display:block}
  html body #hero .hero-caps{gap:6px;max-width:none}
  html body #hero .hero-caps li{padding:7px 12px 7px 10px;font-size:11.5px;letter-spacing:.06em}
  html body #hero .hero-sub-tail{font-size:14px !important}
}
@media (prefers-reduced-motion: reduce){html body #hero .hero-caps li{transition:none}}

/* ── Round 21 contrast and spacing fixes ───────────────────────────────────
   Each of these was measured in the browser with every translucent layer
   composited down to an opaque colour, which is the only way to tell a real
   invisible element from the gradient false positives this site is full of. */

/* 1. The client result cards are WHITE cards inside a .gp-dark section, so the
      dark scope's white meta line rendered white on white and the industry and
      country label above each client name could not be read at all. */
html body .cstack-card .cstack-meta{color:var(--gp-orange-text) !important}
html body .gp-dark .cstack-card .cstack-meta{color:var(--gp-orange-text) !important}

/* 2. The contact page "Book Directly" eyebrow rendered as a solid orange bar:
      orange text on the orange rule the eyebrow draws behind itself. */
html body #booking-embed .eyebrow{color:var(--gp-orange) !important;background:none !important}
html body #booking-embed .eyebrow::before,
html body #booking-embed .eyebrow::after{background:var(--gp-orange) !important}

/* 3. A ghost button on navy has to carry its own light fill and a white label,
      or it is navy on navy. This is the same rule round 2 applied elsewhere. */
html body #booking-embed a.btn-ghost{
  color:#fff !important;border:1.5px solid rgba(255,255,255,.55) !important;
  background:rgba(255,255,255,.08) !important}
html body #booking-embed a.btn-ghost:hover{
  background:#fff !important;color:var(--gp-navy) !important;border-color:#fff !important}

/* 4. About, Why choose GridPoint: the Details button sits at the top right of
      each tile and the figure is centred, so "30+ days" ran underneath it.
      Reserve the button's column instead of hoping the text is short. */
/* Moving the button to the bottom right frees the whole width for the figure,
   so "30+ days" sits on one line again; only the caption needs to clear it. */
html body #why-gridpoint .wc-more{top:auto !important;bottom:12px !important;right:12px !important}
html body #why-gridpoint .wc-tile{padding-right:clamp(22px,2.4vw,32px) !important}
html body #why-gridpoint .wc-tile-n{white-space:nowrap}
html body #why-gridpoint .wc-tile-c{padding-right:46px}

/* ── The portfolio deck, Chi'Ella pattern (owner reference) ────────────────
   One large card held at a slight angle, the rest tilted behind it, the copy
   column holding still and naming what is in front. It replaces the vertical
   marquee of small cards, which read as a list. The markup and every word are
   unchanged; the driver is initGal in gp-motion.js. */
html body .gal-deck{
  height:auto !important;overflow:visible !important;
  display:flex;flex-direction:column;gap:22px;
  perspective:1400px}
html body .gal-deck::before,html body .gal-deck::after{display:none !important}
html body .gal-deck .gal-track{
  display:block !important;position:relative;
  height:clamp(330px,42vw,470px);gap:0 !important;
  /* room for the tilt and the fan, so a rotated corner is never clipped */
  margin:14px 44px 26px 6px;
  transform:none !important;animation:none !important}

html body .gal-deck .gal-card{
  position:absolute;inset:0;
  display:block !important;grid-template-columns:none !important;
  padding:0 !important;gap:0 !important;
  border-radius:26px !important;overflow:hidden;
  background:#0b1a3d !important;border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 44px 90px -44px rgba(0,0,0,.8) !important;
  transform-origin:50% 100%;
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .55s ease,box-shadow .5s;
  will-change:transform,opacity}
html body .gal-deck .gal-card:hover,
html body .gal-deck .gal-card:focus-visible{
  background:#0b1a3d !important;border-color:rgba(254,139,3,.75) !important}

html body .gal-deck .gal-shot{
  position:absolute;inset:0;aspect-ratio:auto !important;border-radius:0 !important}
html body .gal-deck .gal-shot img{width:100%;height:100%;object-fit:cover}
/* the name sits on the photograph, as it does on the reference */
html body .gal-deck .gal-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.6vw,34px);
  background:linear-gradient(to top,rgba(1,14,42,.94) 0%,rgba(1,14,42,.72) 46%,rgba(1,14,42,0) 100%)}
html body .gal-deck .gal-cap strong{
  font-size:clamp(20px,2.6vw,32px) !important;color:#fff !important}
html body .gal-deck .gal-cap span{color:rgba(255,255,255,.84) !important;font-size:14px}
html body .gal-deck .gal-card.is-front{cursor:pointer}
html body .gal-deck .gal-card.is-front:hover{box-shadow:0 52px 100px -44px rgba(0,0,0,.85) !important}

/* named previous and next, the way the reference labels them */
html body .gal-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
html body .gal-arrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);color:#fff;
  font-family:var(--gp-body);font-size:13.5px;font-weight:700;
  max-width:46%;transition:background .25s,border-color .25s,transform .25s}
html body .gal-arrow em{
  font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:20ch}
html body .gal-arrow:hover{
  background:var(--gp-orange);border-color:var(--gp-orange);color:#011134;transform:translateY(-2px)}

/* the progress rule and the count in the copy column */
html body .gal-rule{margin-top:26px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);max-width:320px}
html body .gal-rule span{display:block;height:100%;border-radius:3px;background:var(--gp-orange);
  width:8.33%;transition:width .8s cubic-bezier(.16,1,.3,1)}
html body .gal-count{margin:12px 0 0;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.7) !important}

@media (max-width:760px){
  html body .gal-deck .gal-track{height:clamp(280px,74vw,360px)}
  html body .gal-nav{justify-content:space-between}
  html body .gal-arrow{max-width:48%;padding:11px 15px;font-size:12.5px}
  html body .gal-arrow em{max-width:12ch}
}
@media (prefers-reduced-motion: reduce){
  html body .gal-deck .gal-card{transition:none}
  html body .gal-rule span{transition:none}
}

/* ============================================================
   ROUND 29: the mobile pass
   Everything in this block was measured at 390x844 before it was
   written, and every rule is scoped to a phone width. Desktop is
   untouched.
   ============================================================ */

/* --- the Work case cards flow, instead of filling the viewport -----------
   Measured at rest: every one of the twelve cards clipped 16 to 65px of its
   .case-info, and because that panel is justify-content:center with
   overflow:auto the clipped part is the TOP of it. So the industry eyebrow
   was sliced by the photograph above it and there was no way to scroll to it.
   That is the torn card in the owner's screenshots. A card that fills the
   screen cannot hold this much copy on a phone, so below 1000px the stack is
   not used at all: the cards flow, and everything in them is readable.
   The testimonial and the work-done line were hidden below 1000px only to
   make the card fit; with the card flowing they come back, so the phone shows
   the same copy as the desktop. */
@media (max-width:999px){
  html body .cases-full .case-card{
    position:static !important;height:auto !important;min-height:0 !important;
    grid-template-rows:auto auto !important;
    transform:none !important;filter:none !important;
    margin:0 0 18px !important}
  html body .cases-full .case-img-wrap{
    height:auto !important;min-height:0 !important;aspect-ratio:16/10 !important}
  html body .cases-full .case-info{
    overflow:visible !important;justify-content:flex-start !important}
  html body .cases-full .case-testimonial,
  html body .cases-full .case-work-done{display:block !important}
}

/* --- the language tab leaves the reading column -------------------------
   It was 38px wide, pinned to the left edge and vertically centred. The body
   copy on a phone starts at x=20, so the tab sat on the first characters of
   whatever paragraph happened to be beside it: measured covering the "T" of
   "Thirty minutes" on how-we-work. Round 15 placed it by testing for overlaps
   with interactive elements, which is why this was missed: nothing it covered
   was a button. On a phone it now sits in the bottom-left corner above
   back-to-top, where nothing is read, and its list opens upward. */
@media (max-width:760px){
  html body .gp-lang{
    top:auto !important;bottom:calc(84px + var(--gpc-lift,0px)) !important;
    left:14px !important;transform:none !important}
  html body .gp-lang .lang-btn{
    width:46px !important;height:46px !important;padding:0 !important;
    border-radius:15px !important;font-size:10.5px !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;gap:2px !important}
  html body .gp-lang .lang-btn > svg:not(.gl-globe){display:none !important}
  html body .gp-lang .lang-menu{
    left:0 !important;right:auto !important;
    top:auto !important;bottom:calc(100% + 10px) !important;
    transform:translateY(6px) !important}
  html body .gp-lang .lang-switcher.open .lang-menu{transform:none !important}
}

/* --- the cookie bar stops eating a quarter of the screen -----------------
   Measured at 390x844: 204px tall, and on a first visit that is what a
   visitor sees under every page. The wording is unchanged; only the type
   size, the padding and the button row are tightened for a phone. */
@media (max-width:760px){
  html body #cookieBanner{padding:0 !important}
  html body #cookieBanner .cookie-inner{padding:14px 16px 16px !important;gap:10px !important}
  html body #cookieBanner .cookie-text p{font-size:13px !important;line-height:1.45 !important;margin:0 !important}
  html body #cookieBanner .cookie-btns{gap:10px !important;margin:0 !important}
  html body #cookieBanner .cookie-btns button{padding:11px 14px !important;font-size:14px !important}
}


/* --- "What makes GridPoint different" stacks on a phone -----------------
   These six cards are a hover-to-expand row on desktop. Below 820px that
   became a sideways snap scroller, which is the thing the owner means by a
   section with no easy scrolling: inside a page that scrolls down, one card
   filled 80vw and the other five were off to the right with nothing saying
   so. It also left dead space, because a flex row stretches every card to the
   height of the tallest and these six are nowhere near the same length.
   On a phone they stack, each one as tall as its own copy, all six visible by
   scrolling the way the rest of the page scrolls. */
@media (max-width:820px){
  html body .pop-row{
    display:flex !important;flex-direction:column !important;
    height:auto !important;overflow:visible !important;
    scroll-snap-type:none !important;gap:14px !important;padding-bottom:0 !important}
  html body .pop-row > *{
    flex:0 0 auto !important;width:auto !important;
    min-height:0 !important;scroll-snap-align:none !important}
}

/* --- the collapsed footer columns stop leaving a hole -------------------
   Measured at 390px: each closed accordion row was 100px tall for a 51px
   title, because the title keeps an 18px bottom margin it only needs when
   open and the grid adds a 30px gap between rows that already separate
   themselves with a top border. Company and Get in touch therefore sat a
   clear 100px apart with nothing between them. */
@media (max-width:760px){
  html body #footer .footer-grid{gap:0 !important}
  html body #footer .footer-brand{margin-bottom:22px !important}
  html body #footer .footer-col .footer-col-title{margin-bottom:0 !important}
  html body #footer .footer-col.is-open .footer-col-title{margin-bottom:10px !important}
}

/* --- the client logo row: a title, and whole cards on a phone -----------
   Owner, round 30: "it looks really scary... at the edges, there's no
   border". Measured at 390px: the viewport is 362px against a 168px card
   pitch, so the drifting row always showed one whole card and two sliced
   ones (cut 25px and 103px), and the edge mask then faded their borders
   away. Below 700px the row is a native snap carousel instead: two whole
   cards with all four borders, the next one hinted, swiped by hand. The
   drift is unchanged on desktop, where the row is wide enough for it. */
.lw-label{font-family:var(--gp-display);font-weight:800;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gp-orange-text);
  text-align:center;margin:clamp(34px,4.5vw,58px) 0 0}

@media (max-width:700px){
  .lw-label{font-size:11.5px;letter-spacing:.16em;margin-top:30px}
  html body .lwall.lw-swipe{padding-left:0 !important;padding-right:0 !important;gap:0}
  html body .lw-swipe .lw-viewport{
    overflow-x:auto !important;overflow-y:hidden;
    -webkit-mask-image:none !important;mask-image:none !important;
    scroll-snap-type:x mandatory;scroll-padding-left:16px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body .lw-swipe .lw-viewport::-webkit-scrollbar{display:none}
  html body .lw-swipe ul.lw-track{
    transform:none !important;width:max-content;
    padding-left:16px !important;padding-right:16px !important}
  html body .lw-swipe li.lw-item{scroll-snap-align:start}
  html body .lw-swipe .lw-box{width:168px}
}

/* ===================================================================
   THE WRITTEN GUARANTEE  (session 7)
   Four promises, every one already published elsewhere on this site:
   the price (pricing #pr-risks), the approval step (how-we-work), the
   handover and the support window (pricing #pr-risks). Nothing here is
   a new commitment. What changed is where it sits: it was prose in the
   middle of one page, and it is now a named block immediately before
   the price on every page that asks for money.
   Deliberately NOT included, on owner instruction: any promise to
   rework a design until it lands. GridPoint shows the work and gets
   approval before building, so the promise is the approval step, not
   unlimited revisions.
   The theme paints bare sections, so the background is written at
   matching weight (trap 3), and the block is data-noreveal so no
   reveal system can strand it (trap 18).
   =================================================================== */
section.gpg{background:var(--gp-navy,#011134) !important;
  padding:clamp(66px,8.5vw,112px) 0 !important;position:relative;overflow:hidden}
html body section.gpg{background:var(--gp-navy,#011134) !important}
section.gpg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% 8%,rgba(254,139,3,.16),transparent 70%),
    radial-gradient(48% 42% at 6% 92%,rgba(0,149,254,.12),transparent 70%)}
.gpg .container{position:relative;z-index:1}
.gpg-head{max-width:760px;margin:0 0 clamp(34px,4vw,54px)}
.gpg .eyebrow{color:var(--gp-orange,#FE8B03) !important}
.gpg h2{color:#fff !important;margin:10px 0 16px}
.gpg h2 em{color:var(--gp-orange,#FE8B03) !important}
.gpg-lead{color:var(--gp-ink-soft,#DCE5F7) !important;
  font-size:clamp(16.5px,1.5vw,20px);line-height:1.6;margin:0}

.gpg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px)}
.gpg-card{background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.14);border-radius:18px;
  padding:clamp(22px,2.1vw,30px);min-width:0;position:relative;
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.gpg-card:hover{background:rgba(255,255,255,.085) !important;
  border-color:rgba(254,139,3,.5);transform:translateY(-3px)}
.gpg-when{display:inline-block;font-family:GPD,Archivo,sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gp-orange,#FE8B03);background:rgba(254,139,3,.12);
  border:1px solid rgba(254,139,3,.3);border-radius:999px;
  padding:5px 11px;margin-bottom:16px}
.gpg-ic{display:block;width:30px;height:30px;margin-bottom:14px}
.gpg-ic svg{width:30px;height:30px;stroke:var(--gp-orange,#FE8B03);
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gpg-card h3{color:#fff !important;font-family:GPD,Archivo,sans-serif;
  font-weight:800;font-size:clamp(19px,1.7vw,23px);line-height:1.22;
  letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
.gpg-card p{color:var(--gp-ink-soft,#DCE5F7) !important;
  font-size:clamp(14.5px,1.1vw,16px);line-height:1.58;margin:0}

.gpg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:clamp(28px,3vw,40px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid rgba(255,255,255,.14)}
.gpg-foot p{color:var(--gp-ink-soft,#DCE5F7) !important;margin:0;
  font-size:clamp(14.5px,1.15vw,16.5px);max-width:62ch;flex:1 1 320px;min-width:0}
.gpg-foot p strong{color:#fff}

@media (max-width:1080px){.gpg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .gpg-grid{grid-template-columns:1fr;gap:12px}
  .gpg-card{padding:20px}
  section.gpg{padding:56px 0 !important}
}

/* ===================================================================
   THE WHATSAPP TOOLTIP THAT ATE TAPS  (session 7)
   On pricing and insights the control is a flex COLUMN carrying a
   label above the button, so its box measures 191x105 where every
   other page measures 56x56. The label sits at opacity 0 at rest, so
   nothing is visible and nothing looked wrong, but elementFromPoint
   on a real touch phone shows a 191x39 strip at the bottom right
   swallowing taps: probe it at three points and all three land on the
   label instead of the page. Measured 3 of 3 on pricing and insights,
   0 of 3 on index.
   Round 29 made the assistant launcher a circle on phones for the
   same reason. This finishes the job: on a phone the WhatsApp control
   is the circle on every page, and on desktop the label can never
   intercept a pointer even while it is fading.
   Written with !important because both pages style this control from
   their own inline <style> block (trap 5).
   =================================================================== */
html body .wa-float .wa-tooltip{pointer-events:none !important}
@media (max-width:760px){
  html body .wa-float{width:56px !important;height:56px !important;
    gap:0 !important;align-items:center !important;justify-content:center !important}
  html body .wa-float .wa-tooltip{display:none !important}
}

/* ===================================================================
   THE 11 QUESTIONS  (session 7)
   The lead magnet's own page. All eleven questions are visible on it,
   deliberately: a page that hides everything until an address is paid
   ranks for nothing and gets shared by nobody. The guide adds the good
   answer, the warning sign and the scorecard, and that is what the
   email is for.
   Backgrounds written at matching weight, because the theme paints
   bare sections (trap 3).
   =================================================================== */
section.tq-hero{background:var(--gp-navy,#011134) !important;
  padding:clamp(120px,13vw,170px) 0 clamp(56px,7vw,84px) !important;position:relative;overflow:hidden}
html body section.tq-hero{background:var(--gp-navy,#011134) !important}
section.tq-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 48% at 88% 6%,rgba(254,139,3,.18),transparent 70%)}
.tq-hero .container{position:relative;z-index:1}
.tq-hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.tq-hero .eyebrow{color:var(--gp-orange,#FE8B03) !important}
.tq-hero h1{color:#fff !important;margin:10px 0 18px}
.tq-hero h1 em{color:var(--gp-orange,#FE8B03) !important}
.tq-lead{color:var(--gp-ink-soft,#DCE5F7) !important;
  font-size:clamp(16.5px,1.5vw,20px);line-height:1.6;margin:0 0 16px}
.tq-meta{color:rgba(255,255,255,.6) !important;font-size:15px;line-height:1.6;margin:0}

.tq-get{background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.17);border-radius:20px;
  padding:clamp(22px,2.4vw,30px);position:sticky;top:110px}
.tq-get h2{color:#fff !important;font-family:GPD,Archivo,sans-serif;font-weight:800;
  font-size:clamp(19px,1.9vw,23px);margin:0 0 6px;letter-spacing:-.015em}
.tq-get>p{color:var(--gp-ink-soft,#DCE5F7) !important;font-size:15px;margin:0 0 16px}
.tq-label{display:block;font-family:GPD,Archivo,sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:14px 0 6px}
.tq-input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.22);border-radius:11px;padding:12px 14px;
  color:#fff;font-family:GPB,Manrope,sans-serif;font-size:15.5px}
.tq-input::placeholder{color:rgba(255,255,255,.4)}
.tq-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.tq-go{margin-top:18px;width:100%;justify-content:center}
.tq-err{color:#FFB4A0 !important;font-size:14px;margin:10px 0 0}
.tq-done{color:#9FE6B4 !important;font-size:14.5px;margin:12px 0 0;line-height:1.55}
.tq-fine{color:rgba(255,255,255,.5) !important;font-size:12.5px;line-height:1.5;margin:14px 0 0}

section.tq-list{background:#fff !important;padding:clamp(66px,8vw,110px) 0 !important}
html body section.tq-list{background:#fff !important}
.tq-head{max-width:620px;margin:0 0 clamp(28px,3.4vw,44px)}
.tq-items{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.tq-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;
  background:var(--gp-bg-soft,#F4F7FD) !important;border:1px solid var(--gp-line,#DCE5F7);
  border-radius:16px;padding:clamp(18px,1.9vw,24px)}
.tq-n{font-family:GPD,Archivo,sans-serif;font-weight:900;font-size:26px;line-height:1;
  color:var(--gp-orange-text,#B4470A)}
.tq-item h3{font-family:GPD,Archivo,sans-serif;font-weight:800;
  font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.26;letter-spacing:-.015em;
  margin:0 0 8px;text-wrap:balance}
.tq-item p{font-size:14.8px;line-height:1.58;margin:0;color:var(--gp-text-2,#4A5878)}
.tq-after{margin-top:clamp(26px,3vw,40px);background:var(--gp-navy,#011134) !important;
  border-radius:20px;padding:clamp(24px,2.8vw,36px);display:flex;flex-wrap:wrap;
  align-items:center;gap:18px 28px}
.tq-after p{color:var(--gp-ink-soft,#DCE5F7) !important;margin:0;flex:1 1 340px;
  min-width:0;font-size:15.5px;line-height:1.6}
.tq-after strong{color:#fff}

section.tq-use{background:var(--gp-bg-soft,#F4F7FD) !important;
  padding:clamp(56px,7vw,90px) 0 !important;text-align:center}
html body section.tq-use{background:var(--gp-bg-soft,#F4F7FD) !important}
.tq-use p{max-width:620px;margin:12px auto 22px;font-size:clamp(16px,1.4vw,18.5px);
  line-height:1.6;color:var(--gp-text-2,#4A5878)}

@media (max-width:1000px){
  .tq-hero-in{grid-template-columns:1fr}
  .tq-get{position:static}
  .tq-items{grid-template-columns:1fr}
}

/* The guide's band on the Insights index and the twelve articles. Slim on
   purpose: it sits where someone is reading, not where someone is buying. */
section.tq-band{background:var(--gp-navy,#011134) !important;
  padding:clamp(34px,4vw,52px) 0 !important}
html body section.tq-band{background:var(--gp-navy,#011134) !important}
.tq-band-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
.tq-band-in>div{flex:1 1 340px;min-width:0}
.tq-band .eyebrow{color:var(--gp-orange,#FE8B03) !important;margin:0 0 6px}
.tq-band h2{color:#fff !important;font-family:GPD,Archivo,sans-serif;font-weight:800;
  font-size:clamp(19px,2vw,25px) !important;line-height:1.22;letter-spacing:-.018em;
  margin:0 0 6px;text-wrap:balance}
.tq-band p{color:var(--gp-ink-soft,#DCE5F7) !important;margin:0;font-size:15px}