/* ==========================================================================
   PLATFORM ELEVATE DESIGN SYSTEM
   Loaded last on every page, so it can define tokens and shared components.

   Visual language
   - Bricolage Grotesque for headlines and numerals. Instrument Sans (with its narrow width axis) for everything else.
   - Cyan means "live / answered / act here". Signal orange means "missed / leaking".
   - Shape: interactive things get a chat-bubble corner (three round, one sharp).
     Structural panels stay near-square. No blobs, no gradient text, no glass.
   - Motion: one orchestrated moment in the hero, directional reveals elsewhere,
     physical press states on buttons. Everything respects prefers-reduced-motion.
   ========================================================================== */

:root {
  /* colour */
  --navy: #0d1628;
  --navy-m: #162040;
  --navy-2: #111c33;
  --cyan: #3ecfcf;
  --cyan-l: #7ae3e3;
  --cyan-ink: #08737a;        /* cyan for text on light surfaces (AA) */
  --signal: #ff7a2f;          /* missed calls, lost revenue */
  --signal-ink: #b73f08;
  --blue: #1e6fc7;
  --blue-d: #1245a8;
  --white: #ffffff;
  --off: #f5f8ff;
  --paper: #e4e9f1;
  --gray: #56627a;
  --gray-ink: #56627a;
  --gray-on-dark: #a3b1cc;
  --line: rgba(13, 22, 40, .12);
  --line-d: rgba(255, 255, 255, .12);
  --grad: #3ecfcf;            /* flat brand cyan: used by buttons only */
  --grad-brand: linear-gradient(135deg, #1245a8 0%, #1e6fc7 40%, #3ecfcf 100%);   /* big surfaces keep the gradient */
  --grad-t-dark: linear-gradient(120deg, #1e6fc7, #3ecfcf, #7ae3e3, #1e6fc7);
  --grad-t-light: linear-gradient(120deg, #1245a8, #1e6fc7 45%, #0a9aa3);
  --grad-t: var(--grad-t-dark);

  --cyan-txt: var(--cyan-ink);/* surfaces override this: cyan on dark, ink cyan on light */
  --btn-sh: var(--navy);
  --ink: var(--navy);         /* text colour of the current surface */

  /* type */
  --f-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* shape */
  --r-btn: 14px 14px 14px 3px;
  --r-chip: 10px 10px 10px 2px;
  --r-panel: 6px;
  --r-sm: 4px;

  /* space (8px base) */
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --sec-y: clamp(4.5rem, 8vw, 7rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--cyan); color: var(--navy); }
:focus-visible { outline: 2px solid var(--cyan-txt); outline-offset: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* display type: only headings use the display face. Tight, clean, not bulky. */
h1, h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.022em; line-height: 1.06; }
h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.012em; line-height: 1.15; }
h4, h5 { font-family: var(--f-ui); font-weight: 600; letter-spacing: 0; }
strong, b { font-weight: 600; }

/* ==========================================================================
   TEXTURE: a fine grain layer inside dark surfaces (felt more than seen)
   ========================================================================== */
.pe-dark { position: relative; isolation: isolate; }
.pe-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block;
  opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ==========================================================================
   BUTTONS: bubble corner + a physical press (hard offset shadow, moves on press)
   Primary selectors are appended by the build from every cyan button in the site.
   ========================================================================== */
a[class*="btn-ghost"], a[class*="btn-outline"], a[class*="hcta-o"], button[class*="btn-outline"],
a[class*="btn-sec"], a[class*="pc-details"] {
  border-radius: var(--r-btn);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .2s var(--ease);
  box-shadow: none;
}
a[class*="btn-ghost"]:hover, a[class*="btn-outline"]:hover, a[class*="hcta-o"]:hover, a[class*="pc-details"]:hover {
  border-color: var(--cyan-txt); color: var(--cyan-txt); transform: translateY(-1px);
}
.ac-btn,
.asb-cta-btn,
.asb-gen-btn,
.bc-btn,
.bt-cta-primary,
.btn-fill,
.btn-fill-lg,
.btn-next,
.btn-next-sm,
.btn-xl,
.calc-cta-btn,
.cta-card a,
.cta-primary,
.guar-cta,
.hcta-p,
.pc-btn-primary,
.pe-chat-cta a,
.psc-cta-btn,
.roi-cta,
.sb-cta-link,
.sb-gen-btn,
.sb-microcta a,
.sb-send-btn,
.sb-url-btn {
  box-shadow: 3px 3px 0 var(--btn-sh);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s;
}
.ac-btn:hover,
.asb-cta-btn:hover,
.asb-gen-btn:hover,
.bc-btn:hover,
.bt-cta-primary:hover,
.btn-fill:hover,
.btn-fill-lg:hover,
.btn-next:hover,
.btn-next-sm:hover,
.btn-xl:hover,
.calc-cta-btn:hover,
.cta-card a:hover,
.cta-primary:hover,
.guar-cta:hover,
.hcta-p:hover,
.pc-btn-primary:hover,
.pe-chat-cta a:hover,
.psc-cta-btn:hover,
.roi-cta:hover,
.sb-cta-link:hover,
.sb-gen-btn:hover,
.sb-microcta a:hover,
.sb-send-btn:hover,
.sb-url-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--btn-sh); }
.ac-btn:active,
.asb-cta-btn:active,
.asb-gen-btn:active,
.bc-btn:active,
.bt-cta-primary:active,
.btn-fill:active,
.btn-fill-lg:active,
.btn-next:active,
.btn-next-sm:active,
.btn-xl:active,
.calc-cta-btn:active,
.cta-card a:active,
.cta-primary:active,
.guar-cta:active,
.hcta-p:active,
.pc-btn-primary:active,
.pe-chat-cta a:active,
.psc-cta-btn:active,
.roi-cta:active,
.sb-cta-link:active,
.sb-gen-btn:active,
.sb-microcta a:active,
.sb-send-btn:active,
.sb-url-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--btn-sh); }


/* ==========================================================================
   SHARED SECTION CHROME
   ========================================================================== */
/* eyebrow labels: sentence case, condensed width, no pill, no tracking */
.sec-lbl, [class$="-lbl"], [class$="-label"], [class*="eyebrow"] {
  font-family: var(--f-ui); font-stretch: 82%; font-weight: 600; font-size: .9rem; letter-spacing: .005em;
  text-transform: none; color: var(--cyan-txt);
}

/* tabular numerals everywhere numbers are data */
[class*="stat"], [class*="num"], [class*="price"], [class*="amt"], .mr-s { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MOTION: directional, per-element. The nav.js observer sets data-dir.
   ========================================================================== */
.rv { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
.rv[data-dir="l"] { transform: translate3d(-40px, 0, 0); }
.rv[data-dir="r"] { transform: translate3d(40px, 0, 0); }
.rv.on { opacity: 1; transform: none; will-change: auto; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv[data-dir], .rv.on { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   FOOTER (shared markup on every page)
   ========================================================================== */
footer.pe-foot { background: var(--navy); color: var(--gray-on-dark); padding: clamp(3.5rem, 6vw, 5.5rem) var(--gutter) 1.75rem; overflow: hidden; --cyan-txt: var(--cyan); --gray: var(--gray-on-dark); }
.pe-foot-in { max-width: 1240px; margin: 0 auto; }
.pe-foot-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line-d); }
.pe-foot-brand img { height: 46px; width: auto; display: block; margin-bottom: 1.1rem; }
.pe-foot-brand p { max-width: 34ch; color: var(--gray-on-dark); font-size: 1rem; line-height: 1.6; margin: 0; }
.pe-foot-call { justify-self: end; text-decoration: none; text-align: right; display: block; }
.pe-foot-call span { display: block; font-family: var(--f-ui); font-stretch: 82%; font-weight: 600; font-size: .9rem; color: var(--cyan); margin-bottom: .15rem; }
.pe-foot-call strong { display: block; white-space: nowrap; font-family: var(--f-ui); font-weight: 600; font-size: 1.25rem; letter-spacing: 0; line-height: 1.2; color: #fff; transition: color .25s; }
.pe-foot-call:hover strong { color: var(--cyan); }
.pe-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: clamp(2rem, 4vw, 3rem) 0; }
.pe-foot-cols h5 { font-family: var(--f-ui); font-stretch: 82%; font-weight: 600; font-size: .95rem; color: #fff; margin: 0 0 .9rem; text-transform: none; letter-spacing: 0; }
.pe-foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pe-foot-cols a { color: var(--gray-on-dark); text-decoration: none; font-size: .98rem; transition: color .2s; }
.pe-foot-cols a:hover { color: var(--cyan); }
.pe-trust { list-style: none; margin: 0; padding: 1.25rem 0; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; gap: .6rem 0; }
.pe-trust li { font-size: .88rem; color: var(--gray-on-dark); padding: 0 1.1rem; border-left: 1px solid var(--line-d); line-height: 1.2; }
.pe-trust li:first-child { padding-left: 0; border-left: 0; }
.pe-foot-bot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--line-d); font-size: .88rem; color: var(--gray-on-dark); }
.pe-foot-bot p { margin: 0; }
.pe-foot-bot a { color: var(--gray-on-dark); text-decoration: none; margin-left: 1.25rem; }
.pe-foot-bot a:hover { color: var(--cyan); }
@media (max-width: 800px) {
  .pe-foot-top { grid-template-columns: 1fr; align-items: start; }
  .pe-foot-call { justify-self: start; text-align: left; }
  .pe-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-trust li { padding: 0 .8rem; }
  .pe-foot-bot a { margin: 0 1.25rem 0 0; }
}
@media (max-width: 480px) { .pe-foot-cols { grid-template-columns: 1fr; } .pe-trust li { border-left: 0; padding: 0 1rem 0 0; } }


/* ==========================================================================
   PAGE PATTERNS
   ========================================================================== */

/* Inner-page hero: headline left at scale, supporting copy offset right and bottom-aligned.
   (Pages whose hero already has its own two-column .hero-inner keep that layout.) */
.page-hero:not(:has(> .hero-inner)), .hero:has(> .hero-lbl) {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem); row-gap: 1.1rem; align-items: end; text-align: left;
  padding: clamp(8rem, 13vw, 10.5rem) max(var(--gutter), calc((100% - 1240px) / 2)) clamp(3.5rem, 6vw, 5.5rem);
}
.page-hero:not(:has(> .hero-inner)) > .ph-lbl, .hero:has(> .hero-lbl) > .hero-lbl { grid-column: 1 / -1; margin: 0; }
.page-hero:not(:has(> .hero-inner)) > h1, .hero:has(> .hero-lbl) > h1 {
  grid-column: 1; margin: 0; text-align: left; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1; letter-spacing: -.028em;
}
.page-hero:not(:has(> .hero-inner)) > p, .hero:has(> .hero-lbl) > p {
  grid-column: 2; margin: 0 0 .4rem; max-width: 36ch; text-align: left; font-size: 1.05rem; line-height: 1.6; color: var(--gray);
}
.page-hero:not(:has(> .hero-inner)) > .ph-cta { grid-column: 2; justify-content: flex-start; margin: .5rem 0 0; }
@media (max-width: 860px) {
  .page-hero:not(:has(> .hero-inner)), .hero:has(> .hero-lbl) { grid-template-columns: 1fr; padding-top: 7.5rem; }
  .page-hero:not(:has(> .hero-inner)) > p, .hero:has(> .hero-lbl) > p, .page-hero:not(:has(> .hero-inner)) > .ph-cta { grid-column: 1; }
}

/* ==========================================================================
   HOME: SECTION HEADERS (asymmetric: title left, copy offset right)
   ========================================================================== */
.pillars-hd, .how-hd, .calc-hd, .bt-inner { text-align: left !important; }
.pillars-hd, .how-hd {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: 1rem; align-items: end;
  max-width: 1240px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); padding-inline: 0;
}
.pillars-hd .sec-lbl, .how-hd .sec-lbl { grid-column: 1 / -1; margin: 0; }
.pillars-hd .sec-title, .how-hd .sec-title { grid-column: 1; margin: 0; text-align: left; font-size: clamp(2.2rem, 4.7vw, 4.2rem); line-height: 1.02; max-width: none; overflow-wrap: break-word; }
.pillars-hd .sec-sub, .how-hd .sec-sub { grid-column: 2; margin: 0 0 .35rem; max-width: 36ch; text-align: left; font-size: 1.05rem; color: rgba(255, 255, 255, .74); }
@media (max-width: 860px) { .pillars-hd, .how-hd { grid-template-columns: 1fr; } .pillars-hd .sec-sub, .how-hd .sec-sub { grid-column: 1; } .pillars-hd { padding-inline: 1.25rem; } }

/* process: four steps that climb (it is a growth path) */
.how-steps { background: none !important; border-radius: 0 !important; gap: 0 !important; align-items: start; padding-bottom: 6rem; max-width: 1240px; margin-inline: auto; }
.how-steps .hs { background: none !important; border-radius: 0; border-top: 2px solid var(--cyan); border-left: 1px solid rgba(255, 255, 255, .12); padding: 1.6rem 1.5rem 1.5rem; transition: none; }
.how-steps .hs:first-child { border-left: 0; padding-left: 0; }
.how-steps .hs:nth-child(1) { margin-top: 6rem; } .how-steps .hs:nth-child(2) { margin-top: 4rem; }
.how-steps .hs:nth-child(3) { margin-top: 2rem; } .how-steps .hs:nth-child(4) { margin-top: 0; }
.how-steps .hs:hover { background: none !important; }
.hs-n { color: var(--cyan) !important; opacity: 1 !important; font-size: clamp(2.8rem, 4.6vw, 4.2rem) !important; margin-bottom: 1rem; }
.hs p { color: rgba(255, 255, 255, .72) !important; font-size: .98rem !important; }
.hs h4 { font-size: 1.15rem !important; }
@media (max-width: 860px) { .how-steps { grid-template-columns: 1fr !important; padding-bottom: 0; } .how-steps .hs { margin-top: 0 !important; border-left: 0; padding-left: 0; } }

/* pricing: the popular plan is physically bigger and sits raised */
.bt-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); max-width: 1240px; }
.bt-inner > * { grid-column: 1 / -1; }
.bt-inner .bt-badge { grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 0; margin: 0 0 .9rem; font-family: var(--f-ui); font-stretch: 82%; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--cyan-txt); }
.bt-inner .bt-title { grid-column: 1; margin: 0 0 1rem; font-size: clamp(2.2rem, 4.7vw, 4.2rem); line-height: 1.02; text-align: left; }
.bt-inner .bt-sub { grid-column: 2; align-self: end; margin: 0 0 1.4rem; max-width: 36ch; }
.bt-plans { grid-template-columns: 1.12fr 1fr 1fr !important; align-items: end; gap: 1.25rem; margin-top: 2.5rem; }
.bt-plan { border-radius: var(--r-panel) !important; border: 1px solid var(--line) !important; box-shadow: none; }
.bt-plan.popular { border: 2px solid var(--navy) !important; box-shadow: 8px 8px 0 var(--navy) !important; transform: translateY(-1.5rem); padding-bottom: 2.6rem; }
.bt-plan-name { font-family: var(--f-ui); font-stretch: 82%; font-size: 1rem !important; }
@media (max-width: 960px) { .bt-inner { grid-template-columns: 1fr; } .bt-inner .bt-title, .bt-inner .bt-sub { grid-column: 1; } .bt-plans { grid-template-columns: 1fr !important; } .bt-plan.popular { transform: none; } }

/* calculator: title left, tool right; the lost-revenue number is the one orange thing */
.calc-section { position: relative; overflow: hidden; padding: var(--sec-y) var(--gutter); background: #fff; border-top: 1px solid var(--line); }
.calc-wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.calc-hd .sec-title { font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 1.02; margin: .6rem 0 1.2rem; }
.calc-hd .sec-sub { max-width: 34ch; font-size: 1.08rem; color: var(--gray); margin: 0; }
.calc-wrap .calc-card { max-width: none; margin: 0; }
@media (max-width: 900px) { .calc-wrap { grid-template-columns: 1fr; } }

/* ---- mobile fixes for problems that existed in the original ---- */
@media (max-width: 900px) {
  /* pillar carousel: slides share one grid cell so the stage takes the tallest slide's height
     (the original collapsed to 2px on phones and showed nothing) */
  .pc-stage { height: auto !important; min-height: 0 !important; }
  .pc-track { display: grid; height: auto !important; }
  .pc-slide { position: relative !important; grid-area: 1 / 1; top: auto !important; bottom: auto !important; height: auto !important; min-height: 0; }
}
/* pillar pages: the originals had no mobile rules for their two-column hero and body grid */
@media (max-width: 900px) {
  .hero-inner, .mc-inner { grid-template-columns: 1fr !important; gap: 2.25rem !important; }
}

/* decorative glows that live directly under <body> are clipped to the page instead of overflowing it */
.blob-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* calculator section only: big pale letters that slide in one by one when you scroll to it */
.calc-mark { position: absolute; left: 0; right: 0; bottom: -.12em; z-index: 0; display: flex; justify-content: center; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(3.5rem, 11.5vw, 11rem); line-height: .9; letter-spacing: -.03em; color: var(--navy); opacity: 1 !important; transform: none !important; }
.calc-mark span { display: inline-block; opacity: .07; transform: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 65ms); }
.calc-mark.on span { opacity: .07; }
.calc-mark:not(.on) span { opacity: 0; }
@media (max-width: 700px) { .calc-mark { font-size: 12vw; } }
@media (prefers-reduced-motion: reduce) { .calc-mark span { opacity: 1; transform: none; transition: none; } }

/* Get in touch form: neutral shadow instead of a cyan glow */
.step-form-embed { box-shadow: 0 10px 30px rgba(13, 22, 40, .06) !important; }

/* ==========================================================================
   HONESTY LAYER: labels illustrative widgets, sources stat claims, surfaces the guarantee
   ========================================================================== */
.hero-r-stack { display: flex; flex-direction: column; align-items: center; width: 100%; }
.widget-note { margin: 3.25rem 0 0; max-width: 470px; font-size: .78rem; line-height: 1.5; color: var(--gray); text-align: center; opacity: .85; }
.pc-stat-src { margin-top: -.4rem; margin-bottom: .9rem; font-size: .74rem; color: var(--gray-on-dark); opacity: .75; }
.guarantee-line {
  display: inline-block; margin: 1.5rem auto 0; padding: .85rem 1.5rem; max-width: 46ch;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--off);
  font-family: var(--f-ui); font-weight: 600; font-size: .95rem; line-height: 1.5; color: var(--ink); text-align: center;
}
#bundle-teaser .guarantee-line { display: block; margin: 2rem auto 1.25rem; }
#booking-section .guarantee-line { display: block; margin: 1.75rem 0 0; text-align: left; background: #fff; }