/* Stacked Pilot site — global styles (served at /app.css). Loaded once from the Squarespace header.
   Brand tokens + mount behavior + the shared page system. Page styles live in each page file, scoped to that page.

   DESIGN RULES (one system for every page)
   1. Canvas is dark: --sp-bg and --sp-bg-2 alternate section by section. Light appears only as form cards.
   2. One accent pair: orange --sp-orange (actions, lines) + soft amber --sp-amber (eyebrows, emphasis).
   3. Two typefaces: Libre Baskerville for titles, Almarai for everything else (blocks included).
   4. Every section opens the same way: eyebrow → serif title (one <em> word in amber italic) → lede.
   5. Buttons: .sp-btn (orange, the main action) and .sp-btn--ghost (outline, everything else). */
:root{
  --sp-bg:#0a0a0a;
  --sp-bg-2:#0f0f11;
  --sp-panel:#141416;
  --sp-text:#f5f5f4;
  --sp-text-2:rgba(245,245,244,.64);
  --sp-text-3:rgba(245,245,244,.42);
  --sp-line-d:rgba(255,255,255,.08);
  --sp-line-d2:rgba(255,255,255,.16);
  --sp-orange:#f97316;
  --sp-orange-deep:#c2410c;
  --sp-amber:#fdba74;
  --sp-amber-deep:#f97316;
  --sp-ink:#0f1424;
  --sp-ink-soft:#4a5170;
  --sp-line:#e2e4ee;
  --sp-ice:#ecfbff;
  --sp-focus:#3b5bfd;
  --sp-serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sp-sans:Almarai,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sp-max:1200px;
  --sp-gutter:clamp(20px,4vw,64px);
}
.sp-mount{display:block;width:100%;max-width:100%;box-sizing:border-box}
.sp-mount[data-sp-state="loading"]{min-height:240px}
.sp-load-error{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#c0392b;text-align:center;padding:24px 16px}

/* Full-page mode: the Squarespace section holding a full page loses its own padding, grid and background. */
.sp-full-section{padding:0!important;min-height:0!important;background:var(--sp-bg)!important}
.sp-full-section > .section-background,
.sp-full-section > .section-border{display:none!important}
.sp-full-section .content-wrapper{padding:0!important;max-width:none!important;width:100%!important}
.sp-full-section .content{width:100%!important}
.sp-full-section .fluid-engine{display:block!important;grid-template-rows:none!important}
.sp-full-section .fe-block{margin:0!important;padding:0!important;width:100%!important}
.sp-full-section .sqs-block{padding:0!important}
.sp-full-section .sqs-block-content{margin:0!important}

/* Site header: same dark glass on every page (Squarespace otherwise tints it per section). */
/* The blur lives on a ::before layer: a backdrop-filter on #header itself would trap Squarespace's
   fixed full-screen mobile menu inside the header bar (that broke the burger menu once). */
#header{background:transparent!important;box-shadow:0 1px 0 rgba(255,255,255,.06)}
#header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,10,10,.74);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);pointer-events:none}
body.header--menu-open #header::before{background:var(--sp-bg)}
.header-menu .header-menu-bg{background:var(--sp-bg)!important}
.header-menu .header-menu-nav-item a,.header-menu .header-menu-nav-item a *{color:var(--sp-text)!important}
#header .burger-inner>div,#header .burger-inner .top-bun,#header .burger-inner .patty,#header .burger-inner .bottom-bun{background-color:var(--sp-text)!important}
#header .header-background-solid,#header .header-background-image,#header .header-dropshadow{display:none!important}
#header .header-nav-item a,#header .header-display-desktop .header-nav-item>a{color:var(--sp-text)!important}

/* Scroll reveal */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
[data-reveal].sp-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ===================== Page shell ===================== */
.sp-page{font-family:var(--sp-sans);color:var(--sp-text);background:var(--sp-bg);line-height:1.55;-webkit-font-smoothing:antialiased;width:100%;overflow-x:clip}
.sp-page *,.sp-page *::before,.sp-page *::after{box-sizing:border-box}
.sp-sec{position:relative;isolation:isolate;overflow:hidden;background:var(--sp-bg);color:var(--sp-text);padding:clamp(65px,7.2vw,122px) var(--sp-gutter)}
.sp-sec--alt{background:var(--sp-bg-2)}
.sp-sec+.sp-sec{box-shadow:inset 0 1px 0 var(--sp-line-d)}
.sp-sec--first{padding-top:calc(var(--sp-header-h,96px) + clamp(36px,5.4vw,86px))}
.sp-sec--tight{padding-top:clamp(32px,3.6vw,58px);padding-bottom:clamp(32px,3.6vw,58px)}
.sp-sec--flush{padding-left:0;padding-right:0}
/* The only background art: one soft orange glow from the top edge. */
.sp-glow::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:min(1100px,120%);height:min(520px,70%);transform:translateX(-50%);background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(249,115,22,.17),rgba(249,115,22,.05) 55%,transparent 75%);pointer-events:none}
.sp-inner{position:relative;z-index:1;max-width:var(--sp-max);margin:0 auto}
.sp-wide{max-width:1360px}
.sp-narrow{max-width:880px;margin-left:auto;margin-right:auto}
.sp-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.sp-center{text-align:center}

/* Section opening: eyebrow → title → lede */
.sp-head{max-width:780px;margin:0 auto clamp(40px,4.5vw,64px);text-align:center}
.sp-head--left{text-align:left;margin-left:0}
.sp-head--tight{margin-bottom:clamp(20px,2vw,28px)}
.sp-page .sp-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 20px;font:700 12px/1.2 var(--sp-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sp-amber)}
.sp-page .sp-eyebrow::before{content:"";width:28px;height:1px;background:var(--sp-orange);flex:none}
.sp-page .sp-title{font-family:var(--sp-serif);font-weight:400;font-size:clamp(32px,4.4vw,58px);line-height:1.1;letter-spacing:-.018em;margin:0;color:inherit;text-wrap:balance}
.sp-page .sp-title em{font-style:italic;color:var(--sp-amber)}
.sp-page .sp-title--xl{font-size:clamp(56px,9vw,128px);line-height:1}
.sp-page .sp-title--sm{font-size:clamp(24px,2.6vw,36px);line-height:1.2}
.sp-page .sp-lede{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--sp-text-2);margin:20px auto 0;max-width:64ch}
.sp-head--left .sp-lede{margin-left:0}
.sp-page .sp-lede+.sp-lede{margin-top:14px}
.sp-page .sp-lede strong{color:var(--sp-text);font-weight:700}

/* Display headings (kept for the BUSINESS TECH band) */
.sp-page .sp-h{font-family:var(--sp-serif);font-weight:400;line-height:1.08;letter-spacing:-.02em;margin:0;color:inherit}
.sp-page .sp-white,.sp-page .sp-white .sp-h{color:#fff}
.sp-page .sp-amber,.sp-page .sp-amber .sp-h{color:var(--sp-amber)}
.sp-page .sp-orange,.sp-page .sp-orange .sp-h{color:var(--sp-orange)}
.sp-page .sp-p{font-size:16px;line-height:1.6;margin:0 0 1em}
.sp-page .sp-p:last-child{margin-bottom:0}

/* Layout */
.sp-cols{display:grid;gap:clamp(32px,4vw,72px);grid-template-columns:var(--cols,1fr 1fr);align-items:var(--align,center)}
@media (max-width:860px){.sp-cols{grid-template-columns:1fr!important}}
.sp-logo{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}

/* Buttons */
.sp-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:var(--justify,center);margin-top:clamp(32px,3.5vw,48px)}
.sp-page .sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;background:linear-gradient(180deg,#fb8a3c,var(--sp-orange));color:#1a0d02;font:700 15px/1 var(--sp-sans);letter-spacing:.01em;text-decoration:none;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px -12px rgba(249,115,22,.7);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.sp-page .sp-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(249,115,22,.85)}
.sp-page .sp-btn--ghost{background:transparent;color:var(--sp-text);border-color:var(--sp-line-d2);box-shadow:none}
.sp-page .sp-btn--ghost:hover{border-color:var(--sp-orange);background:rgba(249,115,22,.08);box-shadow:none}
.sp-page .sp-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
@media (max-width:520px){.sp-page .sp-btn{width:100%}}

/* Media */
.sp-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--sp-line-d2),0 40px 90px -40px rgba(0,0,0,.9),0 0 80px -30px rgba(249,115,22,.35)}
.sp-embed iframe,.sp-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sp-hero{position:relative;width:100%;height:clamp(520px,72vw,1400px);background:#000;overflow:hidden}
.sp-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:28%;background:linear-gradient(transparent,var(--sp-bg));pointer-events:none}
.sp-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
/* Phones: the hero fills the whole screen, edge to edge (the video is portrait, so cover crops very little). */
@media (max-width:700px){.sp-hero{height:100vh;height:100svh;aspect-ratio:auto;max-height:none}}
/* Uploaded hero video: the box matches the video's shape and starts below the header, so nothing is covered. */
.sp-hero.sp-fit{height:auto;aspect-ratio:var(--ar,16 / 9);max-height:calc(100svh - var(--sp-header-h,0px));margin-top:var(--sp-header-h,0px)}
.sp-hero.sp-fit::after{height:12%}
/* Never crop an uploaded hero: if it's taller than the screen, show the whole frame (dark space on the sides). */
.sp-hero.sp-fit video{object-fit:contain;background:#000}
@media (max-width:700px){.sp-hero.sp-fit video{object-fit:cover}}

.sp-play{position:absolute;left:50%;top:50%;z-index:3;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 50px -10px rgba(249,115,22,.7)}
.sp-play svg{width:30px;height:30px;fill:#fff;margin-left:4px}

/* ===================== Sky themes (on brand with "pilot") =====================
   .sp-sec--sky    dawn above the clouds: night navy → warm orange horizon, faint stars, a low cloud bank.
   .sp-sec--light  daylight: soft blue-white sky with clouds (Crystal-Ice photo, washed out).
   Rhythm rule: never two light sections in a row; a sky section sits between dark and light. */
:root{--sp-cloud-photo:url("https://images.squarespace-cdn.com/content/v1/69d2d7b08d07d15fa4865b0e/5434a8ab-4b15-42fd-ac29-ea13d3ac682a/Crystal-Ice-2-imgg-gi3-cik_xoi1.png?format=2500w")}
:root{--sp-sky-bg:
  radial-gradient(1.2px 1.2px at 8% 14%,rgba(255,255,255,.75) 50%,transparent 52%),
  radial-gradient(1px 1px at 21% 31%,rgba(255,255,255,.5) 50%,transparent 52%),
  radial-gradient(1.4px 1.4px at 37% 9%,rgba(255,255,255,.7) 50%,transparent 52%),
  radial-gradient(1px 1px at 52% 24%,rgba(255,255,255,.45) 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 66% 12%,rgba(255,255,255,.65) 50%,transparent 52%),
  radial-gradient(1px 1px at 79% 29%,rgba(255,255,255,.5) 50%,transparent 52%),
  radial-gradient(1.4px 1.4px at 91% 7%,rgba(255,255,255,.7) 50%,transparent 52%),
  radial-gradient(1px 1px at 44% 40%,rgba(255,255,255,.35) 50%,transparent 52%),
  radial-gradient(ellipse 70% 38% at 50% 104%,rgba(249,115,22,.42),rgba(249,115,22,.12) 45%,transparent 72%),
  radial-gradient(ellipse 40% 24% at 50% 100%,rgba(253,186,116,.35),transparent 70%),
  linear-gradient(180deg,#07090d 0%,#0a1220 30%,#122440 62%,#1f3656 84%,#2c3f5c 100%)}
.sp-sec--sky{background:var(--sp-sky-bg)}
.sp-sec--sky::after{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-8%;height:34%;pointer-events:none;filter:blur(26px);opacity:.55;background:
  radial-gradient(ellipse 22% 60% at 12% 80%,rgba(214,226,240,.35),transparent 70%),
  radial-gradient(ellipse 26% 70% at 34% 90%,rgba(214,226,240,.28),transparent 70%),
  radial-gradient(ellipse 24% 64% at 62% 84%,rgba(214,226,240,.32),transparent 70%),
  radial-gradient(ellipse 22% 60% at 88% 88%,rgba(214,226,240,.3),transparent 70%)}
.sp-sec--sky.sp-glow::before{opacity:.6}

.sp-sec--light{color:var(--sp-ink);background:linear-gradient(180deg,#d9e6ef 0%,#e9f1f6 45%,#f5f8fb 100%)}
.sp-sec--light::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sp-cloud-photo) center/cover no-repeat;opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.sp-sec--light::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 50% 40% at 85% 0%,rgba(255,255,255,.85),transparent 70%),
  radial-gradient(ellipse 60% 30% at 50% 100%,rgba(255,255,255,.7),transparent 70%)}
.sp-sec+.sp-sec--light,.sp-sec--light+.sp-sec{box-shadow:none}
.sp-page .sp-sec--light .sp-eyebrow{color:var(--sp-orange-deep)}
.sp-page .sp-sec--light .sp-title{color:var(--sp-ink)}
.sp-page .sp-sec--light .sp-title em{color:var(--sp-orange-deep)}
.sp-page .sp-sec--light .sp-lede{color:#3c4560}
.sp-page .sp-sec--light .sp-lede strong,.sp-page .sp-sec--light .sp-steps strong{color:var(--sp-ink)}
.sp-page .sp-sec--light .sp-steps li{color:#3c4560}
.sp-page .sp-sec--light .sp-steps li::before{border-color:rgba(194,65,12,.4);color:var(--sp-orange-deep);background:rgba(255,255,255,.6)}
.sp-page .sp-sec--light .sp-btn--ghost{color:var(--sp-ink);border-color:rgba(15,20,36,.22)}
.sp-sec--light .sp-formcard{box-shadow:0 0 0 1px rgba(15,20,36,.06),0 30px 80px -30px rgba(15,30,60,.35)}
.sp-sec--light .sp-logo,.sp-sec--light .hm-logo{filter:drop-shadow(0 24px 40px rgba(15,30,60,.35))}

/* Light card for forms on the dark canvas */
.sp-formcard{position:relative;background:#fff;color:var(--sp-ink);border-radius:22px;padding:clamp(6px,1.5vw,18px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 100px -40px rgba(0,0,0,.95),0 0 90px -40px rgba(249,115,22,.45)}
.sp-formcard::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,var(--sp-orange),transparent)}
.sp-formcard--bare{background:transparent;padding:0;box-shadow:none}
.sp-formcard--bare::before{display:none}

/* Numbered steps (short how-it-works lists) */
.sp-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px;counter-reset:sp}
.sp-steps li{counter-increment:sp;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;color:var(--sp-text-2);font-size:15.5px;line-height:1.55}
.sp-steps li::before{content:counter(sp,decimal-leading-zero);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(249,115,22,.45);color:var(--sp-amber);font:700 12px/1 var(--sp-sans);letter-spacing:.06em}
.sp-steps strong{display:block;color:var(--sp-text);font-size:16px;margin-bottom:2px}

/* ===================== Block harmonizer =====================
   Former Squarespace code blocks each brought their own fonts and heading styles.
   Inside a page they all speak the system above. */
.sp-page [data-blk] :where(*:not(svg,svg *,.sp-title,.sp-title *)),.sp-page [data-sp] :where(*:not(svg,svg *)){font-family:var(--sp-sans)!important}
/* Light forms use the brand accent */
.sp-page .sp-formcard [data-sp],.sp-page .sp-formcard [data-blk]{--accent:#f97316;--accent-contrast:#1a0d02;--focus:#f97316}
.sp-page .sp-formcard [data-blk] #discoveryPrepRoot{--accent:#f97316;--accent-contrast:#1a0d02;--focus:#f97316}
/* Block section titles → serif display */
.sp-page [data-blk] .sp-stack-head h2,
.sp-page [data-blk] .td-head h2,
.sp-page [data-blk] #stacked-services-detail .svc-head h2,
.sp-page [data-blk] #sp-ind-featured .hero h1,
.sp-page [data-blk] #sp-ind-catalog .grid-head h2,
.sp-page [data-blk] #stacked-pricing-detail .pr-table-head h3,
.sp-page [data-blk] #stacked-roi-stats .chart-head h3{font-family:var(--sp-serif)!important;font-weight:400!important;font-size:clamp(30px,3.6vw,50px)!important;line-height:1.12!important;letter-spacing:-.018em!important;color:var(--sp-text)!important;text-wrap:balance}
.sp-page [data-blk] #sp-ind-featured .featured-copy h2{font-family:var(--sp-serif)!important;font-weight:400!important;font-size:clamp(24px,2.4vw,34px)!important;line-height:1.2!important;letter-spacing:-.01em!important}
.sp-page [data-blk] .sp-success-panel h2,.sp-page [data-blk] .success-panel h2,.sp-page [data-sp] .success-panel h2,.sp-page [data-blk] .sp-form-success h2{font-family:var(--sp-serif)!important;font-weight:400!important}
/* Block eyebrows → system eyebrow */
.sp-page [data-blk] .td-eyebrow,
.sp-page [data-blk] #stacked-pricing-detail .pr-eyebrow,
.sp-page [data-blk] #stacked-roi-stats .eyebrow,
.sp-page [data-blk] #sp-ind-featured .featured-label{font:700 12px/1.2 var(--sp-sans)!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:var(--sp-amber)!important}
/* Block ledes → system lede */
.sp-page [data-blk] .sp-stack-head p,
.sp-page [data-blk] .td-head p,
.sp-page [data-blk] #stacked-services-detail .svc-head p,
.sp-page [data-blk] #sp-ind-featured .hero p,
.sp-page [data-blk] #sp-ind-catalog .grid-head p,
.sp-page [data-blk] #stacked-pricing-detail .pr-table-head p,
.sp-page [data-blk] #stacked-roi-stats .chart-head p{color:var(--sp-text-2)!important;font-size:clamp(15.5px,1.2vw,17px)!important;line-height:1.65!important}

/* Agent pages (AI Solutions, Webchat, Dispatcher): same dark design, translated into the site system. */
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch){--bg:#0a0a0a!important;--bg-2:#0f0f11!important;--bg-3:#141416!important;--line:rgba(255,255,255,.1)!important;--text:#f5f5f4!important;--muted:rgba(245,245,244,.64)!important;--dim:rgba(245,245,244,.42)!important;--orange:#f97316!important;--orange-2:#fb8a3c!important;--orange-soft:rgba(249,115,22,.12)!important;--ice:#a9d4f5!important;--ice-soft:rgba(169,212,245,.10)!important;background:var(--sp-bg)!important}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) :is(h1,h2,.h2){font-family:var(--sp-serif)!important;font-weight:400!important;letter-spacing:-.018em!important;line-height:1.08!important;text-wrap:balance}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) :is(h1,h2,.h2) *{font-family:var(--sp-serif)!important;font-weight:400!important}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) :is(h1,h2,.h2) :is(.accent,em){font-style:italic;color:var(--sp-amber)!important}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) :is(h3,h4){font-weight:800!important;letter-spacing:-.01em!important}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) .eyebrow{font-size:12px!important;letter-spacing:.22em!important;color:var(--sp-amber)!important}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) .eyebrow::before{height:1px!important;background:var(--sp-orange)!important}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) section{padding-top:clamp(65px,7.2vw,86px);padding-bottom:clamp(65px,7.2vw,86px)}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) section+section{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.sp-page [data-blk] :is(#sp-hub,#sp-chat,#sp-dispatch) .hero{padding-top:calc(var(--sp-header-h,96px) + clamp(40px,5vw,80px))!important}
.sp-page [data-blk] section.sp-sec--sky{background:var(--sp-sky-bg)!important;isolation:isolate;overflow:hidden}
.sp-page [data-blk] :is(#sp-hub,#sp-chat) section.sp-sec--sky::after{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-8%;height:34%;pointer-events:none;filter:blur(26px);opacity:.55;background:radial-gradient(ellipse 22% 60% at 12% 80%,rgba(214,226,240,.35),transparent 70%),radial-gradient(ellipse 26% 70% at 34% 90%,rgba(214,226,240,.28),transparent 70%),radial-gradient(ellipse 24% 64% at 62% 84%,rgba(214,226,240,.32),transparent 70%),radial-gradient(ellipse 22% 60% at 88% 88%,rgba(214,226,240,.3),transparent 70%)}