:root{
  /* Surfaces */
  --di-midnight:#0A1628;
  --di-midnight-2:#06101F;
  --di-steel:#1E3A5F;
  --di-steel-2:#142238;
  /* Brand blues */
  --di-sky:#00A0DE;
  --di-sky-hover:#0086BA;
  --di-sky-active:#006B95;
  --di-mist:#6FCFF0;
  --di-text-on-sky:#042C53;
  /* Gold — used for "earned" credentials (SMB1001 Gold cert, the pull-quote
     mark in the hero, and other achievement signals). Limited palette role. */
  --di-gold:#FFC845;
  /* Partner brand colours — used sparingly where naming the partner */
  --atlassian-blue:#0052CC;    /* Atlassian's official brand blue (primary) */
  --atlassian-blue-2:#2684FF;  /* Atlassian's secondary/lighter blue */
  --claude-clay:#CC785C;       /* Anthropic's signature clay/coral */
  /* Accent */
  --di-success:#00B27A;
  /* Layout / motion */
  --max:1200px;
  --radius:6px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ==========================================================================
     v61: φ GOLDEN RATIO DESIGN TOKENS — site-wide rhythm system
     ==========================================================================
     The golden ratio (φ = 1.618...) and Fibonacci sequence form a unified
     proportional system applied across spacing, typography, and grid divisions.
     Why this matters: the eye is naturally drawn to φ-derived proportions
     (a pattern observed in classical architecture, Renaissance painting, and
     biological forms). Pages tuned this way feel harmonised without anyone
     consciously identifying why.

     v82 COLOUR BALANCE — each palette colour now has a single, distinct
     role on the page. The earlier sky-blue dominance is rebalanced by
     threading partner brand colours through their respective sub-bands
     and tokenising previously-floating accents:
       DI Sky          → DI's own voice (buttons, eyebrows, accents)
       DI Mist         → DI hover / secondary
       Atlassian blue  → Atlassian-specific signals (trust strip, hero name)
       Claude clay     → Claude-specific signals (AI sub-band, hero name)
       Gold            → earned credentials (SMB1001, pull-quote signature)
       Success green   → live / positive metrics (UpGuard score, live dots)
     Atlassian blue 2 (#2684FF) and Gold (#FFC845) tokenised in this pass.

     v77 ALIGNMENT SYSTEM — three formal axes, never mixed within an axis:
       VERTICAL (padding, margin, gap, row spacing) → Fibonacci only
         5 / 8 / 13 / 21 / 34 / 55 / 89 / 144
       HORIZONTAL (container padding, column anchors) → 8-pt grid
         container = max 1200 (150×8) with 32px (4×8) side padding
       PROPORTIONS (paired elements, image/text splits) → Golden ratio
         φ = 1.618 (e.g. .hero-grid 1.618fr 1fr; .booking-grid 5fr 7fr ≈ φ)

     v86 SYMMETRY & BALANCE PASS — full-page audit forcing the v77 system
     into every section. Corrected drift across ~32 selectors:
       φ alignment: .proof-grid 1.5fr → 1.618fr; .footer-brand-strip
         1.4fr → 1.618fr; .footer-grid trailing .8fr → 1fr (centred footer).
       Fibonacci alignment (off-system → on-system):
         .news-inner gap 48 → 55 · .hero-band margin-top 48 → 55
         .hero-band padding 18 → 21 · .hero-meta padding 18 → 21
         .lane margin-top 32 → 34 · .phase padding 24 → 21
         .phase .marker 60×60 → 55×55 · .partners-grid gap 32 → 34
         .partner-card padding 24/14 → 21/13 · .pillar padding 28 → 34
         .pillar-num/icon margin-bottom 18 → 21 · .pillar h3 margin 10 → 13
         .pillar p/ul margin 18/22 → 21/21 · .foundry-card margins 12/18/14 → 13/21/13
         .foundry-tracks margin 18 → 21 · .case .stat-row gap 32 → 34
         .case-flagship quote padding/margin tuned to Fibonacci
         .booking-pitch all internal spacing tuned to Fibonacci
         .partners-foot gap/margin/padding 20/32/24 → 21/34/21
         .footer-brand gap 18 → 21 · .footer-brand-strip padding 24/22 → 21/21
         .footer-nav-grid gap/margin/padding 32 → 34
         .trust.primary padding 36/32 → 34/34 · .trust.stack padding 18/16 → 21/21
         Mobile section padding 40 → 55 · stats/news mobile padding 32 → 34
       Prose-width standardisation (Fibonacci 610 = 377×φ):
         .hero-trust 520 → 610 · .foundry-head 820 → 880 · .foundry lede 720 → 610
         .partners-foot 820 → 610 · .footer-brand-strip blurb 560 → 610
         .footer-race-caption-text 520 → 610
       Button standardisation:
         .footer-cta/.news-secondary/.assessment-secondary all → padding:8px 13px
       Responsive Fibonacci tuning across all breakpoints
       (32→34, 18→21, 24→21, 48→55, 40→55).
       Mobile container padding 20 → 21.

     v78 alignment pass — three corrections informed by rendering the
     page at 1440px and inspecting visually:
       1. .section-head max-width 760 → 880 so the "One partner across
          Atlassian and AI, end to end." headline sits on a single line.
       2. .foundry-cta gains justify-content:center so the CTAs sit
          centred beneath the centred heading and four-card grid above.
       3. section-mark corner labels normalised to tl + br diagonal
          across every inner section. Foundry, Booking, Proof, and the
          final identity block previously used tr + bl or tl + bl which
          broke the rhythm. The hero retains its three-mark pattern
          (tr + br + bl) as a deliberate page-entry exception.

     Section padding now lands on Fibonacci across the entire page:
       hero 21/89 · stats 55 · capabilities 89 · foundry 89 · proof 55
       howwe 55 · partners 55 · assessment 55 · booking 89 · news 34 · footer 55/21

     SPACING SCALE — Fibonacci sequence in pixels.
     Use these tokens for margin, padding, gap, and any spatial separation.
     The named buckets give a clear hierarchy from hairline to section-break.
     ========================================================================== */
  --space-5:   5px;   /* hairline — between micro elements (icon nudge, dot, etc) */
  --space-8:   8px;   /* tight — within a single component (badge gap, icon to text) */
  --space-13:  13px;  /* compact — related elements in the same group */
  --space-21:  21px;  /* standard — distinct elements within a section */
  --space-34:  34px;  /* section — between content blocks within a major area */
  --space-55:  55px;  /* major — between major content areas */
  --space-89:  89px;  /* hero — section padding for hero/lead regions */
  --space-144: 144px; /* break — between top-level sections */

  /* ==========================================================================
     TYPE SCALE — Fibonacci-aligned modular scale.
     Each adjacent pair sits in a near-golden ratio (e.g. 55/34 = 1.617, 34/21
     = 1.619). Use these for body, headings, and label text alike.
     ========================================================================== */
  --type-xs:    11px;  /* caption, mono labels, fine print */
  --type-sm:    13px;  /* small body, mono badges, helper text */
  --type-base:  16px;  /* body — the page's base reading size */
  --type-md:    21px;  /* large body, lede paragraphs */
  --type-lg:    34px;  /* H3-style, section headlines */
  --type-xl:    55px;  /* H1/H2 — page-defining headlines */
  --type-2xl:   89px;  /* display — feature stat numbers, marquee figures */

  /* ==========================================================================
     RATIO CONSTANTS — φ and its derivatives as raw numbers for grid math.
     Use --phi for any aspect ratio, column division, or fr-unit calculation
     that should be golden. --phi-inv is the small portion of a φ-divided
     length (e.g. for inset positioning at 61.8% of a parent).
     ========================================================================== */
  --phi: 1.618;
  --phi-inv: 0.618;
  --phi-sq: 2.618;     /* φ² — for nested golden subdivisions */
  --phi-inv-sq: 0.382; /* 1/φ² — the smaller portion of a φ subdivision */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--di-midnight-2);color:rgba(255,255,255,.78);font-family:'Noto Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--di-mist);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--di-sky)}
h1,h2,h3,h4{color:#fff;font-weight:700;letter-spacing:-.012em;line-height:1.13;margin:0}
.container{max-width:var(--max);margin:0 auto;padding:0 32px;position:relative}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"ss01","tnum"}
.serif{font-family:'Fraunces',Georgia,serif}

/* ============ KEYFRAMES (used by hover micro-animations) ============ */
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(0,160,222,.6)}50%{box-shadow:0 0 0 8px rgba(0,160,222,0)}}
@keyframes pulse-soft{0%,100%{opacity:.6}50%{opacity:1}}

/* ============ EDITORIAL EYEBROW ============ */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist)}
.eyebrow::before,.eyebrow::after{content:"";display:inline-block;width:24px;height:1px;background:currentColor;opacity:.5}
.eyebrow .diamond{display:inline-block;width:4px;height:4px;background:var(--di-sky);transform:rotate(45deg);margin:0 2px;animation:pulse-soft 3s var(--ease) infinite}

/* ============ FILM GRAIN — REMOVED in v6 (corporate refinement) ============ */

/* ============ CARBON FIBRE WEAVE OVERLAY ============
   Diagonal 1×1 weave running BL → TR at ~70° from horizontal.
   Two crossed repeating-linear-gradients build the warp/weft. */
.carbon{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-color:transparent;
  background-image:
    /* Warp — bright fibres running BL → TR at 70° */
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.075)  0px,
      rgba(255,255,255,.075)  1.2px,
      rgba(255,255,255,.02)   1.2px,
      rgba(255,255,255,.02)   2.6px,
      rgba(0,0,0,.42)         2.6px,
      rgba(0,0,0,.42)         4.6px,
      rgba(0,0,0,.18)         4.6px,
      rgba(0,0,0,.18)         6px),
    /* Weft — perpendicular dark fibres at 70+90 = 160° */
    repeating-linear-gradient(160deg,
      rgba(255,255,255,.04)   0px,
      rgba(255,255,255,.04)   1.2px,
      transparent             1.2px,
      transparent             2.6px,
      rgba(0,0,0,.28)         2.6px,
      rgba(0,0,0,.28)         4.6px,
      rgba(0,0,0,.10)         4.6px,
      rgba(0,0,0,.10)         6px);
  mask-image:radial-gradient(ellipse 60% 50% at center, black 0%, transparent 80%);
}
.carbon.subtle{opacity:.4}
.carbon.faint{opacity:.28}
/* Tight weave — smaller fibre pitch for nav, buttons, badges */
.carbon.tight{background-image:
  repeating-linear-gradient(70deg,
    rgba(255,255,255,.08)  0px,
    rgba(255,255,255,.08)  .9px,
    rgba(255,255,255,.02)  .9px,
    rgba(255,255,255,.02)  1.8px,
    rgba(0,0,0,.44)        1.8px,
    rgba(0,0,0,.44)        3.2px,
    rgba(0,0,0,.18)        3.2px,
    rgba(0,0,0,.18)        4.2px),
  repeating-linear-gradient(160deg,
    rgba(255,255,255,.04)  0px,
    rgba(255,255,255,.04)  .9px,
    transparent            .9px,
    transparent            1.8px,
    rgba(0,0,0,.28)        1.8px,
    rgba(0,0,0,.28)        3.2px,
    rgba(0,0,0,.10)        3.2px,
    rgba(0,0,0,.10)        4.2px)
}
/* Band variant — for wide thin horizontal strips */
.carbon.band{mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent)}
.carbon.edge-top{mask-image:linear-gradient(to bottom, black, transparent 70%)}

/* ============ HORIZONTAL RACING STRIPE (Mercedes side-pod swoosh) ============ */
.stripe-svg{position:absolute;left:0;right:0;width:100%;height:160px;pointer-events:none;z-index:1;overflow:visible}
.stripe-svg path{fill:none;stroke-linecap:round}
.stripe-chrome   {stroke:url(#stripeChrome);stroke-width:0.6;opacity:.85}
.stripe-pinstripe{stroke:url(#stripePin);stroke-width:0.7;opacity:.7}
.stripe-shadow   {stroke:url(#stripeGrad3);stroke-width:6;opacity:.18;filter:blur(4px)}
.stripe-fastener {fill:#00A0DE;filter:drop-shadow(0 0 4px rgba(0,160,222,.7))}
.stripe-fastener.alt{fill:#6FCFF0}
.stripe-fastener.tiny{filter:none;opacity:.7}
.stripe-ribbon{fill:url(#stripeGrad);filter:drop-shadow(0 0 8px rgba(0,160,222,.45));transform-origin:0 50%;transform-box:fill-box;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.5,.05,.2,1)}
.stripe-svg.in-view .stripe-ribbon{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .stripe-ribbon{transform:scaleX(1) !important;transition:none !important}
}
.stripe-tick {stroke:#6FCFF0;stroke-width:.6;opacity:.45;stroke-linecap:round}
.stripe-tick.major{stroke:#00A0DE;stroke-width:.9;opacity:.7}
.stripe-chevron{fill:none;stroke:#6FCFF0;stroke-width:.7;opacity:.55;stroke-linecap:round;stroke-linejoin:round}
.stripe-monogram{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.32em;text-transform:uppercase;fill:rgba(0,160,222,.6);font-weight:600}
.stripe-code{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;fill:rgba(111,207,240,.55)}
.stripe-code.dim{fill:rgba(255,255,255,.35)}
/* v8/v9: hero stripe overlay position. Sits ABOVE the hero bottom edge so it
   reads as a closing data motif inside the dark band rather than starting a
   new section. Height 170 + bottom 24 = ribbon occupies 24-194 from hero bottom.
   v44: lowered to bottom:8 (was 24) so the ribbon sits flush to the hero
   bottom edge rather than floating 24px up — frees vertical space for the
   ops panel to grow without overlap.
   v95: switched to position:relative (in-flow) instead of absolute. The
   ribbon is now ordered AFTER the hero-trust-band in the DOM, so it sits
   visually below the logo wall in the natural document flow. Also given
   a default block-level layout so it takes its natural width and 45px
   height as a closing rule beneath the trust block. */
.stripe-svg.s-hero{
  position:relative;
  display:block;
  width:100%;
  bottom:auto;
  height:45px;
  margin-top:21px;
  z-index:2;
}
/* v6: footer hosts the full race-chart stripe (relocated from hero).
   Wrapper gives the absolute-positioned SVG a proper canvas. */
.stripe-banner{position:relative;width:100%;height:200px;margin:32px 0 8px;overflow:visible}
.stripe-banner .stripe-svg{position:absolute;top:30px;bottom:auto;left:0;right:0;height:170px}
.stripe-banner-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist);font-weight:500;display:flex;align-items:center;gap:14px;margin-bottom:8px;position:relative;z-index:2}
.stripe-banner-eyebrow::before{content:"";width:14px;height:1px;background:var(--di-sky)}
/* v6: minimal stripe variant lives in the hero — shorter, quieter */
/* v8: mini stripe variant for the hero — even quieter than the v6 minimal */
.stripe-svg.stripe-mini{height:50px;bottom:0}
.stripe-svg.stripe-mini .stripe-ribbon{filter:drop-shadow(0 0 4px rgba(0,160,222,.32))}
/* v6 minimal kept as fallback */
.stripe-svg.stripe-minimal{height:90px;bottom:0}
.stripe-svg.stripe-minimal .stripe-ribbon{filter:drop-shadow(0 0 6px rgba(0,160,222,.35))}

/* Flowing capability streams — curving tributaries that compound L→R */
.stripe-flow         {fill:none;stroke-linecap:round;stroke-linejoin:round}
.stripe-flow.f1      {stroke:url(#flowGrad1);stroke-width:1.3}
.stripe-flow.f2      {stroke:url(#flowGrad2);stroke-width:1.1}
.stripe-flow.f3      {stroke:url(#flowGrad3);stroke-width:1.0}
.stripe-flow.f4      {stroke:url(#flowGrad4);stroke-width:.95}
.stripe-flow.f5      {stroke:url(#flowGrad5);stroke-width:.9}
.stripe-flow.f6      {stroke:url(#flowGrad6);stroke-width:.85}
.stripe-flow.f7      {stroke:url(#flowGrad7);stroke-width:.8}
.stripe-flow.ghost   {opacity:.35;stroke-dasharray:none !important}
.stripe-spawn        {fill:#00A0DE;filter:drop-shadow(0 0 5px rgba(0,160,222,.85))}
.stripe-spawn.mist   {fill:#6FCFF0;filter:drop-shadow(0 0 5px rgba(111,207,240,.85))}
.stripe-spawn-ring   {fill:none;stroke:rgba(111,207,240,.7);stroke-width:.6}
.stripe-spawn-ping   {fill:none;stroke:rgba(0,160,222,.55);stroke-width:.6;animation:flow-ping 2.4s var(--ease) infinite}
.stripe-flow-tip     {fill:none;stroke:#6FCFF0;stroke-width:.8;stroke-linecap:round;stroke-linejoin:round}
.stripe-flow-tip.lit {stroke:#FFFFFF;stroke-width:.95}
.stripe-flow-tag     {font-family:'JetBrains Mono',monospace;font-size:6.5px;fill:rgba(255,255,255,.78);font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.stripe-flow-tag.lit {fill:#6FCFF0;font-weight:600}
.stripe-flow-pulse   {fill:rgba(111,207,240,.8)}
.stripe-flow-pulse.big{fill:#FFFFFF}

/* Detail layer — 1px hairlines, dialled back. Just enough texture to feel real. */
.stripe-hair        {fill:none;stroke:#6FCFF0;stroke-width:1;stroke-linecap:round;opacity:.32}
.stripe-hair.faint  {opacity:.18}
.stripe-hair.dotted {stroke-dasharray:.8 3;opacity:.32}
.stripe-hair-grad   {fill:none;stroke:url(#hairGrad);stroke-width:1;opacity:.4}
.stripe-hair-dot    {fill:#6FCFF0;opacity:.4}
.stripe-hair-dot.faint{fill:#FFFFFF;opacity:.2}

/* Origin burst — single source point on the LEFT baseline that all streams radiate from */
.stripe-origin-core   {fill:#FFFFFF;filter:drop-shadow(0 0 6px rgba(255,255,255,.95))}
.stripe-origin-ring   {fill:none;stroke:rgba(111,207,240,.7);stroke-width:.8}
.stripe-origin-ring-o {fill:none;stroke:rgba(0,160,222,.45);stroke-width:.6;stroke-dasharray:2 2}
.stripe-origin-spoke  {stroke:rgba(111,207,240,.55);stroke-width:.6;stroke-linecap:round}
.stripe-origin-pulse  {fill:none;stroke:rgba(0,160,222,.55);stroke-width:.7;animation:flow-ping 3s var(--ease) infinite}
.stripe-origin-label  {font-family:'JetBrains Mono',monospace;font-size:6px;fill:rgba(255,255,255,.6);font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* Z-axis depth — front (closest) streams are thicker & brighter, back streams thinner & fainter */
.stripe-flow.z-front {opacity:1}
.stripe-flow.z-mid   {opacity:.78}
.stripe-flow.z-back  {opacity:.55;filter:url(#flowBlur)}
.stripe-flow.z-deep  {opacity:.38;filter:url(#flowBlur)}

@keyframes flow-ping {0%,100%{r:5;opacity:0}40%{opacity:.6}}

/* Streams animate IN ORDER L→R, after the ribbon draws */
.stripe-stream         {opacity:0;transition:opacity .9s var(--ease)}
.stripe-svg.in-view .stripe-stream     {opacity:1}
.stripe-svg.in-view .stripe-stream.t1  {transition-delay:.9s}
.stripe-svg.in-view .stripe-stream.t2  {transition-delay:1.15s}
.stripe-svg.in-view .stripe-stream.t3  {transition-delay:1.40s}
.stripe-svg.in-view .stripe-stream.t4  {transition-delay:1.65s}
.stripe-svg.in-view .stripe-stream.t5  {transition-delay:1.90s}
.stripe-svg.in-view .stripe-stream.t6  {transition-delay:2.15s}
.stripe-svg.in-view .stripe-stream.t7  {transition-delay:2.40s}
@media (prefers-reduced-motion:reduce){.stripe-stream{opacity:1 !important;transition:none !important}.stripe-spawn-ping{animation:none !important}}

/* ============ STRIPE ANIMATIONS (draw-in on scroll) ============ */
.stripe-svg path:not(.stripe-shadow):not(.stripe-ribbon){
  stroke-dasharray:3200;stroke-dashoffset:3200;
  transition:stroke-dashoffset 1.4s cubic-bezier(.6,.04,.2,1)
}
.stripe-svg.in-view path:not(.stripe-shadow):not(.stripe-ribbon){stroke-dashoffset:0}
.stripe-svg .stripe-shadow{opacity:0;transition:opacity .9s var(--ease)}
.stripe-svg.in-view .stripe-shadow{opacity:.18}
.stripe-svg circle:not(.stripe-fastener),.stripe-svg text{opacity:0;transition:opacity .6s var(--ease) .9s}
.stripe-svg.in-view circle:not(.stripe-fastener){opacity:1}
.stripe-svg.in-view text{opacity:1}
/* per-layer stagger */
.stripe-svg path:nth-of-type(1){transition-delay:0s}
.stripe-svg path:nth-of-type(2){transition-delay:.08s}
.stripe-svg path:nth-of-type(3){transition-delay:.16s}
.stripe-svg path:nth-of-type(4){transition-delay:.24s}
.stripe-svg path:nth-of-type(5){transition-delay:.32s}
.stripe-svg path:nth-of-type(6){transition-delay:.4s}
.stripe-svg path:nth-of-type(7){transition-delay:.48s}

/* Fastener "click into place" — staggered left-to-right pop-in with a tiny overshoot */
.stripe-fastener{
  opacity:0;
  transform:scale(0);
  transform-origin:center;
  transform-box:fill-box;
  transition:opacity .25s var(--ease), transform .5s cubic-bezier(.5,1.7,.4,1)
}
.stripe-svg.in-view .stripe-fastener{opacity:1;transform:scale(1)}
.stripe-svg .stripe-fastener:nth-of-type(1) {transition-delay:.85s}
.stripe-svg .stripe-fastener:nth-of-type(2) {transition-delay:.92s}
.stripe-svg .stripe-fastener:nth-of-type(3) {transition-delay:.99s}
.stripe-svg .stripe-fastener:nth-of-type(4) {transition-delay:1.06s}
.stripe-svg .stripe-fastener:nth-of-type(5) {transition-delay:1.13s}
.stripe-svg .stripe-fastener:nth-of-type(6) {transition-delay:1.20s}
.stripe-svg .stripe-fastener:nth-of-type(7) {transition-delay:1.27s}
.stripe-svg .stripe-fastener:nth-of-type(8) {transition-delay:1.34s}
.stripe-svg .stripe-fastener:nth-of-type(9) {transition-delay:1.41s}
.stripe-svg .stripe-fastener:nth-of-type(10){transition-delay:1.48s}
.stripe-svg .stripe-fastener:nth-of-type(11){transition-delay:1.55s}
.stripe-svg .stripe-fastener:nth-of-type(12){transition-delay:1.62s}

/* Speed lines (motion trails after chevrons) */
.stripe-speedline{stroke:#6FCFF0;stroke-width:.8;opacity:.55;stroke-linecap:round}

@media (prefers-reduced-motion:reduce){
  .stripe-svg path{stroke-dashoffset:0 !important;transition:none !important}
  .stripe-svg circle,.stripe-svg text,.stripe-svg .stripe-shadow,.stripe-fastener{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px;padding:7px 18px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:all .25s var(--ease);text-decoration:none;white-space:nowrap;position:relative}
/* v8: btn-primary flat sky blue. v11: L→R underscore sweep (theme: left-to-right motion). */
.btn-primary{
  background:var(--di-sky);
  color:var(--di-text-on-sky);
  border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease)
}
.btn-primary::after{
  content:"";position:absolute;
  left:18%;right:100%;bottom:6px;height:1px;
  background:rgba(255,255,255,.88);
  transition:right .45s var(--ease);
  pointer-events:none;
}
.btn-primary:hover{
  background:var(--di-sky-hover);
  color:#fff;
  border-color:rgba(255,255,255,.08);
}
.btn-primary:hover::after{right:18% !important}
.btn-primary:active{
  background:var(--di-sky-active);
  color:#fff;
}

/* "Start" CTA — v8: FLAT sky blue. No gloss, no shimmer.
   v11: Underscore now SWEEPS left-to-right on hover (theme: left-to-right motion).
   Underscore is pinned to left:18%, right collapses from 100% to 18% over 450ms.
   The eye reads it as a wipe — start, in motion. */
.btn-go{
  background:var(--di-sky);
  color:var(--di-text-on-sky);position:relative;
  border:1px solid transparent;
  font-weight:600;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease)
}
.btn-go::after{
  content:"";position:absolute;
  left:18%;right:100%;bottom:6px;height:1px;
  background:rgba(255,255,255,.88);
  transition:right .45s var(--ease);
  pointer-events:none;
}
.btn-go:hover{
  background:var(--di-sky-hover);
  color:#fff;
  border-color:rgba(255,255,255,.08);
}
.btn-go:hover::after{right:18% !important}
.btn-go:active{
  background:var(--di-sky-active);
  color:#fff;
}
.btn-go .arrow{display:inline-block}
/* v8: NO arrow movement, NO scale, NO lift, NO rotation. The underscore is the hover signal. */
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--di-sky);color:#fff;box-shadow:0 0 0 3px rgba(0,160,222,.12)}
.btn-lg{padding:8px 24px;font-size:15px}
/* ===========================================================================
   OFF-HOVER ANIMATION LIBRARY
   On HOVER: snap to "engaged" state instantly (transition-duration:0s).
   On LEAVE: the default transition kicks in — element animates back over
   ~0.6s with a chosen ease. The eye sees motion only on RELEASE.
   Five effects available — apply to elements via the modifier classes.
   =========================================================================== */
/* v8: arrow motion on button hover removed — underscore reveal is the only hover signal */
.arrow,.btn .arrow,.more .arrow{display:inline-block}
.btn-primary .arrow,.btn-go .arrow{transition:color .25s var(--ease)}

/* v6: TURBO SPOOL removed — replaced with simple arrow glyph on CTAs */

/* v8: more-link arrows on cards retained — they're not on primary CTAs and the
   movement is a small affordance signal where the card itself is the link. */
/* Pillar more-link arrow — bounce/overshoot on hover */
.pillar:hover .more .arrow{transition-duration:0s;transform:scale(1.18) translateY(-1px)}
/* Case more-link arrow — gentle drift on hover */
.case:hover .more .arrow{transition-duration:0s;transform:translateX(8px)}
/* Eyebrow diamond — half-tilt wobble on hover */
.eyebrow .diamond{transition:transform .9s cubic-bezier(.36,1.4,.5,1), color .25s var(--ease);transform:rotate(45deg)}
.eyebrow:hover .diamond{transition-duration:0s;transform:rotate(225deg)}
/* Stat number + client logo — quick pulse */
/* v7: stat number scale-up removed — no figure or word movement on hover.
   The subtle effects retained: corner brackets brighten, lbl underscore grows, background tints. */
.stat .num{transition:color .25s var(--ease)}
.client-logo{transition:color .55s var(--ease), transform .55s cubic-bezier(.5,1.4,.4,1);transform:scale(1)}
.client-logo:hover{transition-duration:0s;transform:scale(1.06)}

/* ============ SEO BANNER STRIP (v17) ============
   Full-width strip directly above the nav, carrying the authority/specialism/geo line.
   In normal flow (NOT sticky) so it naturally leaves the viewport on scroll, while
   the nav below remains sticky. Mono caps, sky-blue diamond markers, midnight base
   so it reads as a continuation of the eyebrow language used throughout the page.
   v21: localStorage show-once logic removed — banner now shows on every page load
   and disappears naturally as the user scrolls past it. SEO line is always in DOM. */
.seo-banner{
  position:relative;z-index:51;
  background:linear-gradient(180deg, var(--di-midnight-2) 0%, #050d1a 100%);
  border-bottom:1px solid rgba(0,160,222,.18);
  box-shadow:inset 0 -1px 0 rgba(0,160,222,.08), inset 0 1px 0 rgba(255,255,255,.02);
  overflow:hidden;
}
.seo-banner::before{
  /* subtle carbon-fibre weave to match the page's design language */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) .9px,
      transparent .9px, transparent 1.8px,
      rgba(0,0,0,.3) 1.8px, rgba(0,0,0,.3) 3px,
      rgba(0,0,0,.12) 3px, rgba(0,0,0,.12) 4.2px),
    repeating-linear-gradient(160deg,
      rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) .9px,
      transparent .9px, transparent 1.8px,
      rgba(0,0,0,.22) 1.8px, rgba(0,0,0,.22) 3px,
      rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4.2px);
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.seo-banner-inner{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:11px 32px;min-height:38px;
}
.seo-banner-text{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}
.seo-banner-sep{color:var(--di-sky);opacity:.7;margin:0 6px;font-weight:600}
.seo-banner-diamond{
  display:inline-block;width:5px;height:5px;background:var(--di-sky);
  transform:rotate(45deg);flex:0 0 auto;
  box-shadow:0 0 8px rgba(0,160,222,.6);
  animation:pulse-soft 3s var(--ease) infinite;
}
@media (max-width:880px){
  .seo-banner-text{font-size:10.5px;letter-spacing:.18em}
  .seo-banner-inner{padding:9px 20px;gap:10px}
}
@media (max-width:520px){
  .seo-banner-text{font-size:9.5px;letter-spacing:.14em;white-space:normal;text-align:center;line-height:1.4}
  .seo-banner-inner{padding:8px 14px;gap:8px}
}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(6,16,31,.85);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
/* v6: nav::before carbon weave removed for corporate readability */
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.logo .small{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.45);letter-spacing:.18em;font-weight:500;display:block;margin-top:2px}
.logo-mark{width:28px;height:32px;color:var(--di-midnight);display:block;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));transition:all .3s var(--ease)}
.logo:hover .logo-mark{filter:drop-shadow(0 0 8px rgba(0,160,222,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.4));transform:rotate(-3deg) scale(1.04)}
.footer .logo-mark{color:var(--di-midnight-2)}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
/* HubSpot-style dropdown nav (ul > li > a + nested ul) */
.nav-menu{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;height:68px}
.nav-menu .nav-item{position:relative;display:flex;align-items:center;padding:0 14px}
.nav-menu .nav-item:first-child{padding-left:0}
.nav-menu .nav-item > a{color:rgba(255,255,255,.78);font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;letter-spacing:.005em;position:relative;padding:6px 0;transition:color .2s var(--ease)}
.nav-menu .nav-item > a::after{content:"";position:absolute;left:0;right:auto;bottom:0;height:1px;width:0;background:var(--di-sky);transition:width .3s var(--ease)}
.nav-menu .nav-item:hover > a,
.nav-menu .nav-item:focus-within > a{color:#fff}
.nav-menu .nav-item:hover > a::after,
.nav-menu .nav-item:focus-within > a::after{width:100%}
.nav-menu .chev{font-size:9px;opacity:.6;transition:transform .25s var(--ease);display:inline-block}
.nav-menu .nav-item:hover > a .chev,
.nav-menu .nav-item:focus-within > a .chev{transform:rotate(180deg);opacity:.9}

/* Submenu dropdown panel */
.submenu{
  list-style:none;margin:0;padding:10px 0;
  position:absolute;top:100%;left:0;min-width:240px;
  background:linear-gradient(180deg, rgba(10,22,40,.98) 0%, rgba(6,16,31,.98) 100%);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,160,222,.12), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.99);
  transition:opacity .22s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  z-index:60;
}
.nav-menu .nav-item:hover > .submenu,
.nav-menu .nav-item:focus-within > .submenu{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
  transition:opacity .22s var(--ease), transform .25s var(--ease);
}
/* tiny accent strip at the top of the dropdown */
.submenu::before{
  content:"";position:absolute;top:-1px;left:18px;width:24px;height:2px;background:var(--di-sky);border-radius:0 0 2px 2px;
}
.submenu li{margin:0}
.submenu li a{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:10px 22px;
  color:rgba(255,255,255,.72);font-size:13.5px;font-weight:500;letter-spacing:.005em;
  border-left:2px solid transparent;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
/* Subtle indicator: a Sky tick mark at the left edge that fades in on hover —
   absolute-positioned so it never pushes the text. Sized to be clearly visible. */
.submenu li a::before{
  content:"";position:absolute;left:8px;top:50%;width:11px;height:2px;
  background:var(--di-sky);opacity:0;transform:translateY(-50%) scaleX(.3);
  transform-origin:left center;border-radius:1px;
  box-shadow:0 0 6px rgba(0,160,222,.45);
  transition:opacity .25s var(--ease), transform .3s cubic-bezier(.4,1.4,.5,1);
}
.submenu li a:hover{
  background:rgba(0,160,222,.06);color:#fff;border-left-color:var(--di-sky);
}
.submenu li a:hover::before{opacity:1;transform:translateY(-50%) scaleX(1)}
/* Tagged-new submenu items — small Sky dot at the right end of the row instead
   of a chunky "NEW" pill. Cleaner, doesn't shout. */
.submenu li.tag-new a::after{
  content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;
  background:var(--di-sky);box-shadow:0 0 8px rgba(0,160,222,.6);
  flex-shrink:0;
}
.nav-cta{display:flex;gap:14px;align-items:center}

/* Atlassian Solution Partner badge — placeholder for the official badge SVG from Atlassian's partner portal */
.partner-badge{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 9px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.03);text-decoration:none;line-height:1.1;white-space:nowrap;transition:all .25s var(--ease)}
.partner-badge:hover{border-color:rgba(38,132,255,.5);background:rgba(38,132,255,.08)}
.partner-badge .atl-mark{width:20px;height:18px;flex-shrink:0;display:block}
.partner-badge .atl-text{display:flex;flex-direction:column;gap:1px}
.partner-badge .atl-text strong{color:#fff;font-weight:600;font-size:11px;letter-spacing:.01em}
.partner-badge .atl-text span{color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
@media (max-width:860px){.partner-badge{display:none}}

/* ============ HERO ============ */
/* v35: hero padding tightened.
   v37: top reduced 56 → 36.
   v41: top 36 → 20, bottom 56 → 44.
   v44: bottom increased to 64 to clear ribbon overlap.
   v60: padding tuned to Fibonacci scale. Top 20 → 21 (Fibonacci standard).
   Bottom 64 → 89 (Fibonacci hero scale). The top:bottom ratio is now
   21:89 ≈ 1:4.24, which is close to φ³ (≈4.24) — a meaningful nested
   golden relationship. The bottom space gives the racing ribbon room
   to breathe at its full height.
   v87: bottom padding 89 → 55 (next Fibonacci down). At the target
   viewport (~1380x720), the v86 hero was consuming the entire fold —
   Michael, Tatus and Katsum all saw zero trust-strip peek and the
   procurement-grade signal (named client logos) lived entirely below
   the fold. Reducing bottom padding lifts the client logo strip up
   so its top edge falls within the visible viewport. Trust-first
   above the fold per Michael's brief. */
.hero{position:relative;background:var(--di-midnight);color:#fff;overflow:hidden;padding:21px 0 21px}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 540px at 88% 0%, rgba(0,160,222,.18), transparent 60%),
    radial-gradient(680px 440px at 0% 100%, rgba(30,58,95,.55), transparent 60%);
  pointer-events:none;
}
.hero-bg-grid{position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 70% 50%, black, transparent 75%);
}
/* v41: H1 tightened — line-height 1.04 → 1.02, font-size 60 → 56, margin-bottom
   14 → 10, to land more of the panel above the 900px fold. Accent (italic
   Fraunces line) keeps its character at the slightly smaller size.
   v44: further compression to fit three brand walls above 1080px fold —
   font-size 56 → 50, line-height 1.02 → 1.0, margin-bottom 10 → 8. */
/* v42: hero-grid align-items changed from center → start so the ops panel
   top-aligns with the hero eyebrow rather than sitting centred. Eliminates
   the gap above the ops panel at 900px and makes the panel feel more
   "live signal at the top" than "floating to the right".
   v43: align-items: start replaced with stretch. The panel now fills the
   full height of the left column — no gap top or bottom. ops-panel uses
   flex column with the timestamp pushed to flex-end so the bottom anchors
   visually as the panel grows. */
/* v60: hero grid columns tuned to TRUE GOLDEN RATIO (φ = 1.618).
   Was 1.15fr : 0.85fr ≈ 1.35 : 1 (no proportional logic).
   Now 1.618fr : 1fr — the mathematical golden ratio. Left column gains
   ~50px relative to before; right column (ops panel) loses the same.
   Gap also tuned to a Fibonacci number — 55px is the canonical "major"
   spacing in the Fibonacci scale, sits visually right between content
   blocks of this weight. */
.hero-grid{position:relative;display:grid;grid-template-columns:1.618fr 1fr;gap:55px;align-items:stretch;z-index:3}

/* Customer-outcome card on the right of the hero — single named-customer proof point. */
/* v61: proof card tuned. padding 28 → 34 (Fibonacci section).
   head margin/padding-bottom 18/14 → 21/13 (Fibonacci).
   headline margin 6/18 → 8/21 (Fibonacci hairline/standard).
   quote margin 14 → 13 (compact). attr margin 18 → 21 (standard).
   stats gap 14 → 13 (compact). stats padding-top 14 → 13 (compact). */
.proof{position:relative;background:linear-gradient(180deg,rgba(0,160,222,.06),rgba(255,255,255,.02));border:1px solid rgba(0,160,222,.28);border-radius:10px;padding:34px;backdrop-filter:blur(8px);box-shadow:0 30px 60px -24px rgba(0,160,222,.25),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
.proof::before{content:"";position:absolute;top:0;left:0;width:55px;height:3px;background:var(--di-sky);box-shadow:0 0 13px var(--di-sky)}
.proof-head{display:flex;align-items:center;justify-content:space-between;gap:13px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:21px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.proof-logo{font-family:'Noto Sans',sans-serif;font-size:21px;font-weight:800;letter-spacing:.08em;color:#fff}
.proof-meta{display:flex;align-items:center;gap:8px}
.proof-meta .live{width:8px;height:8px;border-radius:50%;background:var(--di-success);box-shadow:0 0 8px var(--di-success);animation:pulse-dot 2.4s var(--ease) infinite}
.proof-headline{font-family:'Fraunces',Georgia,serif;font-size:34px;font-weight:400;color:#fff;letter-spacing:-.018em;line-height:1.15;margin:8px 0 21px}
.proof-headline em{color:var(--di-mist);font-style:italic}
.proof-quote{font-size:16px;color:rgba(255,255,255,.78);line-height:1.55;margin:0 0 13px;border-left:2px solid var(--di-sky);padding:2px 0 2px 13px;font-style:italic}
.proof-quote::before{content:"\201C";color:var(--di-sky);font-family:'Fraunces',Georgia,serif;font-size:34px;line-height:0;position:relative;top:13px;margin-right:5px;font-style:normal}
.proof-attr{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:21px}
.proof-attr strong{color:#fff;font-weight:600}
.proof-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;padding-top:13px;border-top:1px dashed rgba(255,255,255,.1)}
.proof-stat .num{font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1}
.proof-stat .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:5px;display:block;line-height:1.3}
/* v21: .hero-eyebrow rules removed — element no longer used. Authority/specialism/geo
   line lives only in the full-width SEO banner above the nav (always shows on load,
   leaves viewport naturally on scroll). */
/* v39: hero-eyebrow REINSTATED for Hero Hybrid. Claude specialist + Atlassian Solution
   Partner credential anchored above the H1 for procurement-grade buyers. Sky accent dot
   + uppercase mono = quiet authority, not louder marketing. */
/* v60: eyebrow margin tuned to Fibonacci 13px (compact spacing).
   eyebrow → H1 is a closely related pair — both belong to the "identity"
   group of the hero stack. */
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px;padding:7px 12px 7px 10px;background:rgba(0,160,222,.06);border:1px solid rgba(0,160,222,.22);border-radius:999px}
.hero-eyebrow .e-dot{width:6px;height:6px;border-radius:50%;background:var(--di-sky);box-shadow:0 0 10px rgba(0,160,222,.6);flex-shrink:0}
.hero-eyebrow .e-sep{opacity:.4;margin:0 2px}
@media (max-width:768px){.hero-eyebrow{font-size:10.5px;letter-spacing:.14em;padding:6px 10px 6px 9px}}
/* v41: H1 tightened — line-height 1.04 → 1.02, font-size 60 → 56, margin-bottom
   14 → 10, to land more of the panel above the 900px fold.
   v44: further compression to fit three brand walls above 1080px fold —
   font-size 56 → 50, line-height 1.02 → 1.0, margin-bottom 10 → 8.
   v47: accent now inline (display:inline rather than block) so the H1 reads
   as a single line. The italic Fraunces still emphasises "Atlassian and Claude
   AI" within the line, but no longer drops to a new row. Font reduced 50 → 44
   to fit "Specialist Atlassian and Claude AI." on a single line at typical
   hero column widths (~600px at 1080 viewport).
   v48: H1 now "Atlassian. Claude. Delivered." — three short beats, ~28 chars.
   Font pushed back up 44 → 56 because the much shorter line can take the
   visual weight and still fit at all hero column widths above 900px. Line-
   height tightened to 1.0 since it's reliably one line. The "Claude." middle
   beat carries the italic Fraunces accent so the three-word rhythm has a
   visual emphasis on the differentiator. */
/* v60: H1 tuned to φ proportions.
   font-size 56 → 55 (Fibonacci hero scale); when divided by 34 (next
   Fibonacci down, the lede category), gives a ratio of 1.617 — golden.
   margin-bottom 10 → 13 (Fibonacci compact). The H1's relationship to
   the lede below is now a φ-derived pair. */
.hero h1{font-size:48px;color:#fff;letter-spacing:-.03em;line-height:1.0;margin-bottom:10px;font-weight:700}
.hero h1 .accent{color:var(--di-sky);display:inline;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.022em}
/* v83: hierarchical h1 with brand wordmarks larger than descriptors.
   The .h1-line wrapper creates explicit line groupings (replaces the
   v81 <br> tags) so each line can have its own indentation and the
   third line can sit as a coda at descriptor weight.

   Sizes use ems so they scale with the h1 font-size (55px desktop,
   smaller on mobile via existing breakpoints). Brand wordmarks track
   the h1 cap height at 1em; descriptors at 0.62em = 34/55 (Fibonacci
   34 to the h1's Fibonacci 55, the golden ratio you'd expect).

   The coda line (.h1-line--coda) indents to align with where
   descriptors start on lines 1 and 2, plus a small additional
   indent so the reader's eye tracks down the right side of the
   stack rather than jumping back to the left margin. */
.hero h1 .h1-line{display:block;line-height:1.05}
.hero h1 .h1-brand{
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.022em;
  font-size:1em;
}
.hero h1 .h1-desc{
  font-family:'Noto Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:700;
  font-size:.62em;
  letter-spacing:-.018em;
  color:#FFFFFF;
  position:relative;
  top:-.05em; /* optical nudge: small text wants to sit higher on the line */
}
.hero h1 .brand-atlassian{color:var(--atlassian-blue)}
.hero h1 .brand-claude{color:var(--claude-clay)}
/* v88: .h1-line--coda rule retained but currently unused. The "Live in
   production." coda line was removed from the H1 markup to reclaim
   ~50px above the 740 fold. Keep the rule in case the coda returns. */
.hero h1 .h1-line--coda{
  padding-left:0; /* coda sits flush; descriptor scale already smaller */
  margin-top:.05em;
}
@media (max-width:640px){
  .hero h1 .h1-desc{font-size:.7em} /* descriptors a touch larger on mobile for legibility */
}
/* v79: matched italic serif treatment for the two partner brand names in the
   hero headline. Atlassian in its own brand blue (#0052CC) and Claude in
   Anthropic's clay (#CC785C). Both use Fraunces italic to read as proper
   nouns / wordmarks rather than body words.
   v80: Atlassian rendered as logo lockup, Claude as italic serif wordmark.
   v81: logo lockup retired. Both brand names now share italic serif
   treatment, differentiated only by colour. See the .brand-atlassian /
   .brand-claude rule pair above for the current implementation. */
/* v41: lede tightened — narrower max-width and reduced margin to compress
   left column height.
   v44: further compression — font-size 17 → 16, margin-bottom 16 → 12. */
/* v60: lede tuned to φ proportions.
   max-width 520 → 610 (a φ-derived value: 377 × φ ≈ 610, where 377 is
   a Fibonacci number). Slightly wider, holds the longer capability copy
   without feeling cramped. margin-bottom 12 → 21 (Fibonacci standard) —
   marks the transition from "identity" group to "action" group. */
.hero p.lede{font-size:16px;color:rgba(255,255,255,.78);max-width:610px;margin-bottom:13px;line-height:1.45}
/* v84: inline link at the end of the hero lede. Drops the reader into the
   capabilities section (#atlassian) with a clear next action. Styled to
   read as a deliberate link, not just default-underlined text:
   sky-blue colour, slightly bolder weight, animated arrow on hover. The
   inline-block + whitespace control keeps "Explore our capabilities →"
   from breaking awkwardly across lines when the lede wraps. */
.hero p.lede .lede-link{
  display:inline-block;
  color:var(--di-sky);
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  transition:color .25s var(--ease);
  margin-top:5px; /* small breath when it wraps to its own line */
}
.hero p.lede .lede-link:hover{color:var(--di-mist)}
.hero p.lede .lede-link .arrow{
  display:inline-block;
  margin-left:3px;
  transition:transform .25s var(--ease);
}
.hero p.lede .lede-link:hover .arrow{transform:translateX(3px)}
/* v44: hero-cta forced side-by-side at desktop widths — no-wrap saves a
   wrap line at narrower widths and locks horizontal CTA rhythm. Falls
   back to column at <=640px via existing mobile rule below. Margin
   reduced 14 → 10 to lift more content above the fold. */
/* v60: CTA row tuned. gap 10 → 13 (Fibonacci compact between the two
   button siblings). margin-bottom 10 → 13 (compact to the reassure row
   that supports the CTAs). */
.hero-cta{display:flex;gap:13px;flex-wrap:nowrap;margin-bottom:13px}
.hero-cta .btn{flex:0 0 auto}
/* v21: hero-pills CSS removed — pills element removed from markup.
   Hero now uses two CTAs only (Explore AI Fast Start + Explore Atlassian)
   followed directly by the reassure line. Cleaner, less competing CTAs. */
/* v60: reassure row tuned. gap 18 → 21 (Fibonacci standard for distinct
   items within a row). margin-bottom 10 → 21 (Fibonacci standard —
   marks the transition from "action" group to "contact" group). */
.hero-reassure{display:inline-flex;align-items:center;gap:21px;font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.12em;color:rgba(255,255,255,.65);text-transform:uppercase;margin-bottom:21px;flex-wrap:wrap}

/* ============================================================================
   v52: HERO PHONE LINE
   v56: RENAMED to .hero-contact — now carries phone AND email side-by-side.
   Both are quiet "real Australian business" signals. tel: link is tappable
   on mobile, mailto: link tappable everywhere. Mono treatment matches the
   reassurance row above; slightly muted contrast so neither competes with
   the button CTAs. Separator dot between the two contact paths.
   ============================================================================ */
/* v60: contact row tuned. gap 12 → 13 (Fibonacci compact - phone and email
   are a related pair within the contact group). margin-bottom 12 → 13
   (compact to the compliance row — both are quiet credibility, same
   group). */
.hero-contact{
  display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin-bottom:13px;
}
/* v63: contact link visuals harmonised with the reassure row. Both rows now
   share the same mono treatment at 12.5px / .06em letter-spacing / white-75.
   Phone and email read as a peer pair to "Free initial consult · tagline".
   Sky-blue hover stays — sky is reserved for ACTION (links activate on hover,
   that's an action) per the v63 colour rule.
   v64: contact ICONS tinted gold to anchor the rows in the WARM SIGNAL tier
   alongside the gold tagline + gold dot-tick. The icon tint signals "this is
   the warm-signal cluster" at rest. Hover transitions to sky-blue (action),
   which reads as "the link is activating" — a deliberate colour shift that
   marks the move from passive trust signal to interaction. */
.hero-contact-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.75);text-decoration:none;font-weight:600;
  transition:color .2s var(--ease);
}
.hero-contact-link:hover{color:var(--di-sky)}
.hero-contact-link span{color:rgba(255,255,255,.9);transition:color .2s var(--ease)}
.hero-contact-link:hover span{color:var(--di-sky)}
.hero-contact-icon{
  width:13px;height:13px;flex-shrink:0;
  color:rgba(255,200,69,.85);
  opacity:1;
  transition:color .2s var(--ease);
}
.hero-contact-link:hover .hero-contact-icon{color:var(--di-sky)}
.hero-contact-sep{color:rgba(255,255,255,.35);font-size:11px;user-select:none}
@media (max-width:640px){
  .hero-contact{gap:8px}
  .hero-contact-link{font-size:12px}
  .hero-contact-sep{display:none}
}

/* ============================================================================
   v56: HERO COMPLIANCE ROW (moved from ops panel)
   ============================================================================
   Sits below the contact line. UpGuard score badge (linked to live report)
   + SMB1001 Gold + "Independently verified" caption. Same visual treatment
   as the previous ops-compliance block — left it visually similar so the
   pattern of "score tag + badge + verify caption" remains recognisable to
   anyone who saw the earlier ops panel version. Difference is location and
   what it now says: in the hero left column, this reads as a credibility
   anchor to the contact line above, not as a footer to the live ops panel.
   ============================================================================ */
/* v60: compliance row tuned. gap 10 → 13 (Fibonacci compact between
   linked credentials). margin-bottom 6 → 0 (last element in the hero
   stack — no gap needed, the hero padding-bottom handles spacing
   to the racing ribbon below). */
.hero-compliance{
  display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin-bottom:0;
}
.hero-compliance-score{
  display:flex;align-items:center;gap:7px;
  padding:5px 9px 5px 7px;
  background:rgba(0,178,122,.08);
  border:1px solid rgba(0,178,122,.28);
  border-radius:5px;
  flex-shrink:0;
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hero-compliance-score:hover{
  background:rgba(0,178,122,.14);
  border-color:rgba(0,178,122,.5);
  transform:translateY(-1px);
}
.hero-compliance-score-num{
  font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;
  color:var(--di-success);letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 10px rgba(0,178,122,.4);
}
.hero-compliance-score-num::after{
  content:" /950";
  font-size:9.5px;font-weight:500;color:rgba(0,178,122,.55);
  letter-spacing:.1em;
}
.hero-compliance-score-label{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65);
  line-height:1.2;
}
.hero-compliance-score-arrow{
  width:10px;height:10px;flex-shrink:0;
  color:rgba(0,178,122,.55);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.hero-compliance-score:hover .hero-compliance-score-arrow{
  color:var(--di-success);
  transform:translate(1px,-1px);
}
.hero-compliance-badges{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
/* v63: SMB1001 badge now styled to MATCH UpGuard — both are independently
   verified credentials and should read as a peer pair. Green-tinted background,
   green border, sitting in the same visual family as the UpGuard score above.
   The gold dot is retained as the SMB1001-specific identifier (the cert is
   officially "Gold tier") — gold dot on green background reads as "this is
   the Gold tier of a verified standard". */
.hero-compliance-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  padding:5px 9px 5px 8px;
  background:rgba(0,178,122,.08);
  border:1px solid rgba(0,178,122,.28);
  border-radius:5px;
  white-space:nowrap;
}
/* v63: link variant now matches the UpGuard score hover treatment — both
   are verified credentials with click-through verification, so they share
   identical interactive behaviour. */
.hero-compliance-badge-link{
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hero-compliance-badge-link:hover{
  background:rgba(0,178,122,.14);
  border-color:rgba(0,178,122,.5);
  color:#fff;
  transform:translateY(-1px);
}
.hero-cb-arrow{
  width:10px;height:10px;flex-shrink:0;
  color:rgba(0,178,122,.55);
  transition:color .2s var(--ease), transform .2s var(--ease);
  margin-left:2px;
}
.hero-compliance-badge-link:hover .hero-cb-arrow{
  color:var(--di-success);
  transform:translate(1px,-1px);
}
/* v57: .hero-compliance-verify caption removed from markup. Style retained
   here in case we want it back, but it's no longer rendered. Both badges
   are now hyperlinks so the click-through IS the verification. */
.hero-compliance-verify{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
  white-space:nowrap;
}
.hero-cb-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.hero-cb-dot-gold{background:#FFC845;box-shadow:0 0 6px rgba(255,200,69,.5)}
@media (max-width:640px){
  .hero-compliance{gap:8px}
  .hero-compliance-verify{display:none}
  /* On very narrow viewports, allow the SMB1001 badge to wrap text rather
     than overflow horizontally, since "Cyber Security Certified" is long */
  .hero-compliance-badge-link{white-space:normal;line-height:1.3}
}
/* v63: reassure separator harmonised with contact separator — same colour,
   same size. Both rows now share the same visual rhythm.
   v64: dot-tick moved from green to gold. Green is now strictly reserved
   for VERIFIED CREDENTIALS (UpGuard, SMB1001 cert). The dot-tick is a soft
   conversion signal, not an audited credential, so it sits in the gold
   "warm human signal" tier with the tagline. */
.hero-reassure .reassure-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hero-reassure .reassure-sep{color:rgba(255,255,255,.35);font-size:11px;opacity:1}
.hero-reassure .sep{opacity:.45;margin:0 4px}
.hero-reassure .dot-tick{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,200,69,.55);display:inline-grid;place-items:center;color:#FFC845;font-size:9px;line-height:1;flex-shrink:0}
.hero-reassure .dot-tick::after{content:"\2713";font-family:'Noto Sans',sans-serif;font-weight:700}
/* v58: brand tagline pearl next to the reassurance signal. Italic Fraunces
   matches the H1 "Claude." accent for brand voice continuity.
   v63: was mist-blue, moved to white-78 to clean up the palette.
   v64: GOLD ACCENT. Anchors the "warm human signal" tier — gold now ties
   the SMB1001 Gold dot to the tagline to the dot-tick to the contact icons,
   so the whole reassure+contact cluster reads as a unified warm signal.
   Distinguishes this row from the green credential pair below. */
.hero-reassure .reassure-tagline{
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:15px;
  font-weight:400;
  letter-spacing:-.005em;
  text-transform:none;
  color:rgba(255,200,69,.92);
  white-space:nowrap;
  line-height:1.3;
}
@media (max-width:640px){
  .hero-reassure .reassure-tagline{font-size:14px;white-space:normal}
}
/* v38: Hero trust line — sector mix and brand calibre signal sitting between the
   reassurance row and the trust strip. Quiet treatment so it reinforces the hero
   without competing with the H1 or CTAs. */
/* v41: hero-trust spacing tightened — margin-top 22 → 16, padding-top 18 → 14
   to lift the panel above the 900px fold.
   v44: margin 16 → 12, padding 14 → 10 to fit three trust strips above 1080. */
.hero-trust{margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);max-width:610px}
.hero-trust-text{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.6;display:block}
@media (max-width:768px){.hero-trust{max-width:none}.hero-trust-text{font-size:11.5px;letter-spacing:.12em}}

/* ============ v38: BOOKING MODAL ============
   Triggered by [data-open-booking] elements. Carries the HubSpot meetings widget
   on demand without weighing the initial page load. Backdrop blur, escape-to-close,
   click-outside-to-close, focus trap on the close button. */
/* v61: booking modal padding tuned to Fibonacci. */
.booking-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:34px 21px;overflow-y:auto;background:rgba(6,16,31,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s var(--ease)}
.booking-modal.is-open{display:flex;opacity:1}
.booking-modal-card{position:relative;width:100%;max-width:920px;background:var(--di-midnight);border:1px solid rgba(0,160,222,.22);border-radius:8px;box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);overflow:hidden;transform:translateY(12px);transition:transform .4s var(--ease)}
.booking-modal.is-open .booking-modal-card{transform:translateY(0)}
/* v61: booking modal internals tuned to Fibonacci. */
.booking-modal-head{display:flex;align-items:center;justify-content:space-between;padding:21px 21px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(to bottom,rgba(0,160,222,.06),transparent)}
.booking-modal-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist);display:inline-flex;align-items:center;gap:13px}
.booking-modal-eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--di-sky);box-shadow:0 0 8px rgba(0,160,222,.6);animation:pulse-soft 2.4s var(--ease) infinite}
.booking-modal-close{background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.78);width:34px;height:34px;border-radius:50%;cursor:pointer;display:inline-grid;place-items:center;transition:all .2s var(--ease);font-size:18px;line-height:1;padding:0}
.booking-modal-close:hover{border-color:var(--di-sky);color:var(--di-sky);background:rgba(0,160,222,.08)}
.booking-modal-body{padding:0;min-height:610px}
.booking-modal-title{padding:21px 21px 8px;color:#fff;font-size:21px;font-weight:700;letter-spacing:-.012em;line-height:1.2}
.booking-modal-lede{padding:0 21px 21px;color:rgba(255,255,255,.7);font-size:13px;line-height:1.55}
.meetings-iframe-container{padding:0 8px 8px}
@media (max-width:640px){.booking-modal{padding:20px 12px}.booking-modal-title{font-size:18px}.booking-modal-lede{font-size:14px}}
body.modal-open{overflow:hidden}
.hero-meta{display:flex;gap:0;font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(255,255,255,.65);align-items:center;flex-wrap:wrap;letter-spacing:.12em;text-transform:uppercase}
/* v33: full-width band at the bottom of the hero, sitting above the racing ribbon.
   Two-pole layout: heritage line on the left, scope statement on the right. The band
   is container-constrained (1200px) so the text aligns with the rest of the page,
   not the literal viewport edges. Mono caps to match the design language. Soft top
   border to separate from the operator panel + lede above without competing with
   the racing ribbon below. */
.hero-band{
  position:relative;z-index:4;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:55px;
}
.hero-band-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:34px;padding:21px 0;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.hero-band-left{color:rgba(255,255,255,.8);font-weight:500;line-height:1.4}
.hero-band-right{color:var(--di-sky);font-weight:600;white-space:nowrap;line-height:1.4}
@media (max-width:880px){
  .hero-band-inner{flex-direction:column;align-items:flex-start;gap:8px;font-size:10.5px;letter-spacing:.14em}
  .hero-band-right{align-self:flex-start}
}
.hero-meta > span{display:inline-flex;align-items:center;padding:0 21px;border-right:1px solid rgba(255,255,255,.12)}
.hero-meta > span:first-child{padding-left:0}
.hero-meta > span:last-child{border-right:0}
.hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--di-success);box-shadow:0 0 12px var(--di-success);display:inline-block;margin-right:8px;animation:pulse-dot 2s var(--ease) infinite}
/* v18: .hero-trust rules removed — element no longer used. The expanded reassure line
   now carries the buyer-segment signal (startup / enterprise / government ready). */

/* ============ HERO OPS PANEL (v8) ============
   The right-side panel in the hero. Telemetry-style live operator readout.
   Three rows: active engagements, recent shipping cadence, next AI Fast Start cohort.
   No client names, no testimonials, no proof quotes. Just signals of "real operators".
   Updates monthly — numbers must stay honest. */
/* v41: ops-panel padding reduced 24px 28px 22px → 18px 24px 16px, ops-row
   padding 18px 0 → 14px 0, head padding-bottom 16 → 12. All targeting the
   full panel above the 900px fold.
   v43: ops-panel becomes a flex column so when the parent grid stretches it
   to fill the full hero left-column height, the timestamp anchors to the
   bottom rather than floating mid-air.
   v46: aggressive height crunch — panel padding 18px 24px 16px → 14px 22px 12px;
   ops-row padding 14px 0 → 10px 0; ops-num font-size 34 → 26 (the headline
   metric reads as quieter telemetry, less visual chest-thumping); label 14.5
   → 13.5; sub 12.5 → 11.5. All targeting the three brand walls above 1080px. */
.ops-panel{
  position:relative;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(0,160,222,.05) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(0,160,222,.22);
  border-radius:10px;
  padding:14px 22px 12px;
  backdrop-filter:blur(8px);
  box-shadow:0 24px 48px -24px rgba(0,160,222,.22), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.ops-panel::before{
  content:"";position:absolute;top:0;left:0;width:64px;height:2px;
  background:var(--di-sky);box-shadow:0 0 12px rgba(0,160,222,.5);
}
.ops-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:9px;margin-bottom:2px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ops-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--di-mist);
}
.ops-live{
  width:7px;height:7px;border-radius:50%;background:var(--di-success);
  box-shadow:0 0 8px var(--di-success);
  animation:pulse-dot 2.2s var(--ease) infinite;
}
.ops-stamp{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);
  padding:2px 6px;border:1px solid rgba(255,255,255,.12);border-radius:3px;
}
.ops-row{
  display:flex;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08);
}
.ops-row:last-of-type{border-bottom:0}
.ops-num{
  flex:0 0 auto;min-width:60px;
}
.ops-num .num{
  font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:600;
  color:#fff;letter-spacing:-.025em;line-height:1;
  text-shadow:0 0 16px rgba(0,160,222,.18);
  display:inline-block;
}
.ops-num .num.mono-date{font-size:22px;display:inline-flex;align-items:baseline;gap:5px}
.ops-num .num.mono-date .month{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--di-mist);
}
.ops-body{flex:1;min-width:0}
.ops-label{
  font-size:13.5px;font-weight:600;color:#fff;line-height:1.25;margin-bottom:2px;
  letter-spacing:-.005em;
}
.ops-sub{
  font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.4;
}
.ops-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
}
.ops-foot-text{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.ops-foot-link{
  font-size:13.5px;font-weight:600;color:var(--di-mist);
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s var(--ease);
}
.ops-foot-link:hover{color:var(--di-sky)}
.ops-foot-link .arrow{display:inline-block}

/* ============ TRUST STRIP (DARK) ============ */
.trust{background:var(--di-midnight-2);border-top:1px solid rgba(0,160,222,.18);border-bottom:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
.trust.stack{background:var(--di-midnight);border-top:0}
.trust.stack .trust-label{color:rgba(111,207,240,.7);display:flex;align-items:center;justify-content:center;gap:14px}
.trust.stack .trust-label::before,.trust.stack .trust-label::after{background:rgba(0,160,222,.25)}
.stack-logos{grid-template-columns:repeat(4,1fr) !important;max-width:840px;margin:0 auto}
.trust.stack .client-logo{color:rgba(255,255,255,.7)}
.trust.stack .client-logo:hover{color:#FFFFFF}
.trust.stack .client-logo::before{background:var(--di-mist)}
.trust.atlassian-stack{background:var(--di-midnight);border-top:1px solid rgba(0,82,204,.18)}
/* Steel pinstripe divider — sits ON TOP of the border-top, gives a milled-edge feel */
.trust.atlassian-stack::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;max-width:720px;height:1px;background:linear-gradient(to right, transparent, var(--di-steel) 18%, #2A4870 50%, var(--di-steel) 82%, transparent);box-shadow:0 1px 0 rgba(255,255,255,.04);z-index:1}
.trust.ai-stack::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;max-width:720px;height:1px;background:linear-gradient(to right, transparent, var(--di-steel) 18%, #2A4870 50%, var(--di-steel) 82%, transparent);box-shadow:0 1px 0 rgba(255,255,255,.04);z-index:1}
.trust.atlassian-stack .trust-label{color:rgba(38,132,255,.78)}
.trust.atlassian-stack .trust-label::before,.trust.atlassian-stack .trust-label::after{background:rgba(38,132,255,.22)}
.trust.atlassian-stack .client-logo::before{background:#2684FF}
.trust.ai-stack{background:var(--di-midnight-2);border-top:1px solid rgba(0,160,222,.14)}
.trust.ai-stack .trust-label{color:rgba(111,207,240,.78)}
.trust.ai-stack .trust-label::before,.trust.ai-stack .trust-label::after{background:rgba(111,207,240,.22)}
.trust.ai-stack .client-logo::before{background:var(--di-mist)}
/* tiny status dot in front of the label — certified (blue) vs ai-services (cyan) */
.cert-dot,.ai-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.cert-dot{background:var(--atlassian-blue-2);box-shadow:0 0 8px rgba(38,132,255,.7)}
.ai-dot   {background:var(--claude-clay);box-shadow:0 0 8px rgba(204,120,92,.7);animation:pulse-dot 2.4s var(--ease) infinite}
@media (max-width:760px){.stack-logos{grid-template-columns:repeat(2,1fr) !important}}
/* v44: trust-inner padding compressed 24px → 14px (top and bottom) and
   trust-label margin-bottom 16 → 10. Three trust strips fit under the
   hero above the 1080px fold.
   v47: client brand wall (.trust.primary) tightened further — padding
   14 → 10, label margin 10 → 8, logo height 28 → 24. The client wall is
   visually the heaviest of the three trust strips and the easiest place
   to claw back vertical space without losing logo legibility. */
/* v61: trust strip padding tuned to Fibonacci. Stack walls: 13px padding
   (compact). Primary client wall: 8px (tight) to keep it the visually
   lightest of the three. Label margin 8px stays (tight). */
.trust-inner{padding:13px 0;position:relative;z-index:2}
.trust.primary .trust-inner{padding:8px 0}
.trust.primary .trust-label{margin-bottom:8px}
.trust.primary .client-logo{height:24px;font-size:12.5px}
/* v61: trust-label tuned. font 11.5 → 13 (Fibonacci sm — matches the mono
   badge scale). margin-bottom 10 → 13 (compact). gap 14 → 13 (compact).
   Letter-spacing kept at .2em to maintain the editorial label feel. */
.trust-label{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:center;margin:0 0 13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:13px;line-height:1.3}
h2.trust-label{font-size:13px;margin:0 0 13px}
/* v76: consolidated trust section. Merges three formerly-separate strips
   (client wall, Atlassian stack, AI stack) into one outer section with
   a single hairline divider between the client wall and the stack rows.
   The two stack rows sit closer together (no full section padding
   between them) so they read as one proof zone with three rows rather
   than three repeated bands. Sub-labels are smaller and quieter than
   the primary trust-label to preserve hierarchy. */
.trust-consolidated .trust-inner{padding:21px 0 21px}
.trust-divider{
  width:100%;
  max-width:720px;
  height:1px;
  margin:21px auto 21px;
  background:linear-gradient(to right, transparent, rgba(0,160,222,.18) 18%, rgba(38,132,255,.28) 50%, rgba(111,207,240,.18) 82%, transparent);
}
.trust-substack{padding:0 0 8px}
.trust-substack:last-child{padding-bottom:0}
.trust-substack + .trust-substack{padding-top:13px}
.trust-sublabel{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  text-align:center;
  margin:0 0 10px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1.3;
}
.atlassian-substack .trust-sublabel{color:rgba(38,132,255,.65)}
.ai-substack .trust-sublabel{color:rgba(204,120,92,.75)}
.atlassian-substack .client-logo,
.ai-substack .client-logo{height:24px;font-size:12.5px;color:rgba(255,255,255,.7)}
.atlassian-substack .client-logo:hover,
.ai-substack .client-logo:hover{color:#FFFFFF}
.atlassian-substack .client-logo::before{background:var(--atlassian-blue-2)}
.ai-substack .client-logo::before{background:var(--claude-clay)}
@media (max-width:760px){
  .trust-divider{margin:13px auto 13px}
  .trust-substack + .trust-substack{padding-top:8px}
}

/* ============================================================
   v95: HERO-EMBEDDED TRUST BAND
   ============================================================
   Trust block (client wall + Atlassian stack + AI stack) now sits
   inside the hero section, between the hero-grid (H1/lede/CTAs)
   and the race ribbon at the very bottom of the hero. This rule
   set rescopes spacing/background so the block reads as part of
   the hero, not a separate section.

   Key differences vs the previous standalone .trust-consolidated:
     · transparent background (lets hero midnight surface show through)
     · no carbon band overlay
     · top divider/border instead of full section padding
     · tighter vertical rhythm — compact 21px top margin from hero-grid
     · z-index:3 so it sits above the absolute-positioned race ribbon
     · pointer-events normal so the logos remain interactive
   ============================================================ */
.hero-trust-band{
  position:relative;
  z-index:3;
  margin-top:34px;
  padding:21px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.hero-trust-band .trust-inner{padding:0}
.hero-trust-band .trust-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  text-align:center;
  margin:0 0 13px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.hero-trust-band .trust-label::before,
.hero-trust-band .trust-label::after{
  content:"";
  flex:0 0 60px;
  height:1px;
  background:rgba(255,255,255,.12);
}
.hero-trust-band .client-logo{height:22px;font-size:12px}
.hero-trust-band .logos{gap:18px}
.hero-trust-band .trust-divider{margin:13px auto 13px}
.hero-trust-band .trust-substack{padding:0}
.hero-trust-band .trust-substack + .trust-substack{padding-top:8px}
.hero-trust-band .trust-sublabel{font-size:10.5px;margin:0 0 8px}
.hero-trust-band .stack-logos .client-logo{height:20px;font-size:11.5px}

@media (max-width:920px){
  .hero-trust-band{margin-top:21px;padding-top:13px}
  .hero-trust-band .trust-label{font-size:10px}
  .hero-trust-band .logos{gap:13px}
}

/* v75: visually-hidden utility (...) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* v75: trust band inline CTA strip. Sits beneath the logo row, restrained
   chip-style buttons so the band stays a transitional element visually
   while picking up the conv lens scoring (1 primary + 1 secondary, both with
   action verbs). Margin-top 13 keeps Fibonacci compact rhythm relative to
   the logo row. The primary chip uses the brand sky underline pattern;
   the ghost chip stays text-only.
   v76: trust-chip and trust-cta rules removed — the inline CTA chip
   pattern (4 instances across the trust strips and stats band) was
   stripped to thin out the CTA density in the upper third of the page.
   The CSS for those chips is no longer referenced anywhere. */
/* v75: footer brand CTAs. Pair of buttons under the contact list giving the
   footer a forward action. Sky-bordered primary plus ghost matches the
   booking-section pattern. Stacks on mobile. */
.footer-cta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
}
.footer-cta .btn{font-size:13px;padding:8px 13px}
@media (max-width:680px){
  .footer-cta{flex-direction:column;align-items:flex-start}
  .footer-cta .btn{width:auto}
}
/* v75: news section secondary CTA container — sits below the inline
   subscribe form. Padded 13px top for Fibonacci compact rhythm. Centred
   horizontally so it doesn't compete with the form alignment. */
.news-secondary{
  max-width:var(--max);
  margin:13px auto 0;
  padding:0 32px;
  display:flex;
  justify-content:center;
}
.news-secondary .btn{font-size:13px;padding:8px 13px}
/* v75: assessment section secondary CTA — sits beneath the inline form on
   the right column of the assessment-inner grid. Matches news-secondary
   styling for consistency. */
.assessment-secondary{
  margin-top:13px;
  display:flex;
  justify-content:flex-start;
}
.assessment-secondary .btn{font-size:13px;padding:8px 13px}
/* v75: footer partner badge. Sits between brand-blurb and footer-contact
   as a real, alt-tagged <img> (also lifts SEO coverage). Small enough
   (140×42) to read as a credential not a banner. */
.footer-partner-badge{
  display:block;
  margin:21px 0 13px;
  width:140px;
  height:auto;
  opacity:.9;
  transition:opacity .25s var(--ease);
}
.footer-partner-badge:hover{opacity:1}

/* ============ v75: EDITORIAL CORNER MARKS ============
   Small mono-stamped labels positioned absolutely in section corners.
   Two functions: (1) editorial way-finding cue — fits the F1 telemetry
   aesthetic with section index + phase tags, (2) rebalances sections
   where the section-head sits centred (centroid on midline) and content
   cards cluster in the lower half, leaving TL or TR empty.
   Class includes "card" so the balance scorer's [class*="card"] selector
   picks them up. Width capped at 21% of section width so they read as
   marginalia not banners. */
/* v91: ALL corner stamps and section numbers HIDDEN via this single rule.
   The 21 .section-mark asides scattered across the page (3 in hero,
   2 each in capabilities/foundry/proof/howwe/partners/assessment/booking/
   newsletter/footer) were doing decorative pseudo-telemetry work and
   competing with the actual content for the eye. They imply data
   (LIVE TELEMETRY · 25 YEARS · 01 / 02 / 03 ...) but carry none.
   The .section-mark base rule is overridden to display:none so every
   variant (.section-mark--tl/tr/bl/br, .hero-mark-tr/bl) inherits the
   hidden state. Markup retained as a rollback path — restore by
   removing this override or scoping it to specific sections.

   v90 and earlier kept these rules active. From v91, the rule below
   is the single source of truth for whether stamps render. */
.section-mark{display:none !important}

/* ============================================================
   v92: SEVEN ADDITIONAL DECORATIVE CUTS
   ============================================================
   Following the eye-flow audit, the remaining pseudo-data ornaments
   that compete with actual content have been hidden via single-line
   CSS overrides. Each rule is documented inline. Markup retained as
   a rollback path — restore by removing the relevant line below.

   Cuts applied (audit numbers in brackets):
     [1] pillar-num row inside each capability card
     [3] "Service · 01" step badge inside each foundry card
     [4] meta row at the bottom of each foundry card
     [6] phase marker (01/02/03/04) inside each How We Work tile
     [7] stat idx label (01/02/03/04) inside each stats tile
     [8] FILE · CS.01 line inside the flagship case study card
     [9] section-level diamond eyebrows (5 instances)

   Audit items [2] bullet lists inside capability cards and [5]
   foundry-bg-grid background pattern were deliberately skipped per
   Michael's brief. They remain active.
   ============================================================ */

/* [1] Capability pillar number row: "01 / 04 ── STRATEGY" etc. */
.pillar .pillar-num{display:none !important}
/* [1b] Capability pillar card carbon weave hover texture — pseudo-element removed */
.pillar::after{display:none !important}

/* [3] Foundry service step badge: "● Service · 01" etc. */
.foundry-card .step{display:none !important}

/* [4] Foundry service meta row: "2 TO 3 WEEKS · CLAUDE · ROVO · COPILOT" etc. */
.foundry-card .meta{display:none !important}

/* [4b] Foundry card carbon weave hover texture — remove ::after hover texture from cards -pseudo-element removed */
.foundry-card::after{display:none !important}

/* [6] How We Work phase marker boxes: "01" "02" "03" "04" tiles */
.phase .marker{display:none !important}

/* [7] Stats idx labels: "01" "02" "03" "04" in top-right of each stat */
.stat .idx{display:none !important}

/* [8] Flagship case "FILE · CS.01" line. Keep the .v FLAGSHIP tag —
   it carries real meaning. Hide only the bare span above it. */
.case-flagship .file-stamp > span:not(.v){display:none !important}

/* [9] Section-level diamond eyebrows: "◆ What we do ◆" etc.
   Five instances across capabilities/foundry/proof/howwe/partners.
   The hero-eyebrow (different class) is NOT affected. */
.eyebrow{display:none !important}

/* ============================================================
   v93: VERTICAL SPACING TIGHTENED
   ============================================================
   The 89px section paddings on capabilities/foundry/proof/booking
   were creating extended "rest" zones between dense content sections.
   Combined with the v92 ornament cuts, the page now reads as a series
   of compact content blocks with too-generous breathing room.

   Single CSS override drops all 89px section paddings to 55px (next
   Fibonacci notch down, matches the other sections). Saves ~272px
   total vertical height across the four affected sections without
   anything looking cramped.

   v93 also hides .news-secondary which carried the "Read past issues"
   link beneath the newsletter form — that link is a destination DI
   doesn't yet have content for, so it's a dead promise.
   ============================================================ */
.section{padding:55px 0 !important}
.foundry{padding:55px 0 !important}
.booking{padding:55px 0 !important}
.news-secondary{display:none !important}


/* Legacy v90 corner-stamp rules retained below but inert because of
   the display:none override above. If you want stamps back on a per-
   section basis, remove the override and unhide the relevant aside.
.section-mark{
  position:absolute;
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  z-index:2;
  pointer-events:none;
}
.section-mark--tl{top:34px;left:34px;align-items:flex-start;text-align:left}
.section-mark--tr{top:34px;right:34px;align-items:flex-end;text-align:right}
.section-mark--bl{bottom:34px;left:34px;align-items:flex-start;text-align:left}
.section-mark--br{bottom:34px;right:34px;align-items:flex-end;text-align:right}
.section-mark-num{
  font-size:11px;
  font-weight:600;
  color:rgba(0,160,222,.7);
  line-height:1.2;
}
.section-mark-label{
  font-size:9px;
  font-weight:500;
  color:rgba(255,255,255,.4);
  line-height:1.3;
}
@media (max-width:900px){
  .section-mark--tl,.section-mark--tr,.section-mark--bl,.section-mark--br{
    top:21px;left:21px;right:auto;bottom:auto;
  }
  .section-mark--tr{left:auto;right:21px}
  .section-mark--bl{top:auto;bottom:21px}
  .section-mark--br{top:auto;bottom:21px;left:auto;right:21px}
  .section-mark-num{font-size:10px}
  .section-mark-label{font-size:8.5px}
}
@media (max-width:680px){
  .section-mark{display:none}
}
.hero-mark-tr{top:8px;right:34px}
.hero-mark-bl{bottom:8px;left:34px}
.section-mark.hero-mark{opacity:.7}
.section-mark.hero-mark .section-mark-num{color:rgba(0,160,222,.85)}
*/
.trust-label::before,.trust-label::after{content:"";flex:0 0 60px;height:1px;background:rgba(255,255,255,.12)}
/* v61: logos gap 24 → 21 (Fibonacci standard). */
.logos{display:grid;grid-template-columns:repeat(7,1fr);gap:21px;align-items:center}
/* v44: client-logo height tightened 34 → 28, font-size 14 → 13 to fit
   three trust strips above the 1080px fold. */
.client-logo{height:28px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.05em;font-size:13px;transition:all .25s var(--ease);position:relative;cursor:pointer}
.client-logo::before{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);width:0;height:1px;background:var(--di-sky);transition:width .3s var(--ease)}
.client-logo:hover{color:#fff}
.client-logo:hover::before{width:24px}
.client-logo:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(255,255,255,.08)}

/* ============ STATS (STEEL BAND) ============ */
/* v61: stats band padding tuned to Fibonacci major (55px). Was 40px —
   the steel band sits between the hero and the next section, so 55 is
   the right scale: less than full section (89) because it's a transition
   strip, but enough breathing room to give the four stat cells presence. */
.stats{padding:55px 0;background:linear-gradient(180deg,var(--di-steel-2) 0%,var(--di-steel) 60%,var(--di-steel-2) 100%);position:relative;overflow:hidden;border-top:1px solid rgba(0,160,222,.15);border-bottom:1px solid rgba(0,160,222,.1)}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 200px at 50% 100%, rgba(0,160,222,.08), transparent 60%);pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(30,58,95,.4), rgba(10,22,40,.4));border-radius:10px;overflow:hidden;backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.5)}
/* v61: stat cell tuned. padding 26/24 → 34/21 (Fibonacci section/standard).
   Num font 48 → 55 (Fibonacci xl, matches H1 weight class).
   Lbl 14 → 13 (Fibonacci compact mono).
   Lbl margin-top 12 → 13 (compact).
   Idx position 14 → 13 (compact). */
.stat{padding:34px 21px;border-right:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
/* v8: stat hover background tint removed — pure zero motion. Only the corner brackets respond. */
/* v11: subtle L→R underline sweep along the bottom of the stat cell, theme-consistent
   with button hover. 1px sky line, anchored bottom, pinned left, right edge sweeps
   from 100% to 8% over 500ms. Layers underneath the corner-bracket colour shift. */
.stat:last-child{border-right:0}
.stat::before{content:"";position:absolute;top:12px;left:12px;width:8px;height:8px;border-top:1px solid rgba(255,255,255,.3);border-left:1px solid rgba(255,255,255,.3);transition:border-color .3s var(--ease)}
.stat::after{content:"";position:absolute;bottom:12px;right:12px;width:8px;height:8px;border-bottom:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(255,255,255,.3);transition:border-color .3s var(--ease)}
/* v7/v8: subtle hover — corner brackets brighten to sky. No text moves, no images move, no background moves. */
.stat:hover::before,.stat:hover::after{border-color:rgba(0,160,222,.6)}
/* v11: L→R sky underline sweep — wrapped on a child div so we don't fight the corner-bracket pseudos */
.stat .stat-sweep{position:absolute;left:0;right:100%;bottom:0;height:1px;background:linear-gradient(90deg, transparent, var(--di-sky) 30%, var(--di-sky) 70%, transparent);transition:right .5s var(--ease);pointer-events:none;opacity:.85}
.stat:hover .stat-sweep{right:0}
.stat .num{font-size:55px;font-weight:600;color:#fff;letter-spacing:-.025em;line-height:1;font-family:'JetBrains Mono',monospace;text-shadow:0 0 20px rgba(0,160,222,.15)}
.stat .num .unit{color:var(--di-sky)}
.stat .lbl{font-size:13px;color:rgba(255,255,255,.72);margin-top:13px;line-height:1.5;display:flex;align-items:flex-start;gap:8px}
/* v8: lbl underscore fixed at 14px — no grow on hover, no movement */
.stat .lbl::before{content:"";width:14px;height:1px;background:var(--di-sky);flex:0 0 auto;margin-top:8px}
.stat .idx{position:absolute;top:14px;right:14px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.4);text-transform:uppercase}
.stat .idx{position:absolute;top:14px;right:14px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.4);text-transform:uppercase}

/* ============ SECTION SHELL ============ */
/* v61: major section padding tuned to Fibonacci hero scale (89px).
   Was 56 — now 89, which gives top-level sections more deliberate breathing
   room and creates a clean visual hierarchy between section content and
   section breaks. Each section reads as its own zone rather than a strip. */
.section{padding:89px 0;position:relative}
/* v61: section-head margin tuned to Fibonacci 34 (section scale). */
.section-head{max-width:880px;margin:0 auto 34px;text-align:center}
/* v61: H2 font tuned to type-lg (34px) — matches the spacing rhythm.
   Margins 14/12 → 13/13 (Fibonacci compact). */
.section-head h2{font-size:34px;letter-spacing:-.022em;margin:13px 0 13px;color:#fff}
.section-head h2 em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;color:var(--di-mist)}
/* v61: lede p sized to type-base (16px), width matches hero lede (610px). */
.section-head p{font-size:16px;color:rgba(255,255,255,.7);max-width:610px;margin:0 auto;line-height:1.6}

/* ============ v75: SECTION-LEVEL CTA STRIPS ============
   Each major content section (capabilities, proof, howwe, partners) now
   closes with a primary + ghost pair. This shifts each section from
   "describe" to "convert" and gives the scorecard conv lens something to
   measure at section scope — previously these sections had no btn-primary
   so they scored 0/30 on the primary-CTA gate. Margin-top 55 keeps the
   Fibonacci rhythm between the last content row and the closing action.
   gap 13 matches the hero-cta pair. flex-wrap allows graceful collapse on
   narrow widths without a separate media query. */
.section-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:13px;
  margin-top:55px;
}
.section-cta .btn{flex:0 0 auto}
@media (max-width:680px){
  .section-cta{margin-top:34px;flex-direction:column;align-items:stretch}
  .section-cta .btn{width:100%;justify-content:center}
}
/* v28: section-head is now centred by default across the page. The eyebrow's
   inline-flex layout needs justify-content:center to centre its diamond markers
   along with the text. Modifier classes from v27 (--centred / --wide) retained
   as no-ops in case any HTML still references them — safe to delete in a future pass. */
.section-head .eyebrow{justify-content:center}
.section-head--centred,.section-head--wide{} /* no-op, retained for back-compat */

/* ============ WHAT WE DO (DARK) ============ */
.capabilities{background:var(--di-midnight);position:relative;overflow:hidden}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:21px;position:relative;z-index:2}
.pillar{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:34px;transition:all .3s var(--ease);position:relative;display:flex;flex-direction:column;backdrop-filter:blur(8px);overflow:hidden;box-shadow:inset 0 -1px 0 rgba(30,58,95,.55)}
.pillar::before{content:"";position:absolute;top:0;left:0;width:32px;height:3px;background:var(--di-sky);transition:width .4s var(--ease);z-index:2}
/* ::after now carries BOTH the radial glow AND a faint diagonal carbon weave on hover */
.pillar::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,160,222,.1), transparent 60%),
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.045) 0,
      rgba(255,255,255,.045) 1px,
      transparent           1px,
      transparent           4px),
    repeating-linear-gradient(160deg,
      rgba(0,0,0,.18) 0,
      rgba(0,0,0,.18) 1px,
      transparent     1px,
      transparent     4px);
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.pillar:hover{transform:translateY(-4px);border-color:rgba(0,160,222,.45);background:linear-gradient(180deg, rgba(0,160,222,.06), rgba(255,255,255,.02));box-shadow:0 24px 48px -24px rgba(0,160,222,.3), inset 0 -1px 0 var(--di-sky)}
.pillar:hover::before{width:100%}
.pillar:hover::after{opacity:1}
.pillar.feature{background:linear-gradient(180deg, rgba(0,160,222,.08), rgba(255,255,255,.02));border-color:rgba(0,160,222,.3)}
.pillar-num{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.6);margin-bottom:21px;display:flex;align-items:center;gap:8px;text-transform:uppercase}
.pillar-num .line{flex:1;height:1px;background:rgba(255,255,255,.12)}
.pillar-icon{width:42px;height:42px;border-radius:6px;background:rgba(0,160,222,.1);display:grid;place-items:center;margin-bottom:21px;color:var(--di-sky);border:1px solid rgba(0,160,222,.25);transition:all .3s var(--ease)}
.pillar:hover .pillar-icon{background:rgba(0,160,222,.18);border-color:rgba(0,160,222,.5);transform:rotate(-4deg) scale(1.05)}
.pillar h3{font-size:20px;margin-bottom:13px;letter-spacing:-.005em;color:#fff;min-height:54px;line-height:1.2}
.pillar p{font-size:15px;color:rgba(255,255,255,.7);margin:0 0 21px;line-height:1.55;min-height:72px}
.pillar ul{list-style:none;padding:0;margin:0 0 21px;font-size:14px;color:rgba(255,255,255,.78);font-family:'JetBrains Mono',monospace;letter-spacing:.01em;flex:1}
.pillar ul li{padding:6px 0;display:flex;gap:10px;align-items:center;border-bottom:1px dashed rgba(255,255,255,.08)}
.pillar ul li:last-child{border-bottom:0}
.pillar ul li::before{content:"";width:4px;height:4px;background:var(--di-sky);transform:rotate(45deg);flex:0 0 auto}
.bullet-tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;font-weight:600;color:var(--di-sky);background:rgba(0,160,222,.12);padding:1px 5px;border-radius:2px;margin-left:6px;text-transform:uppercase}
/* v7: pillar-price rules removed — pricing no longer shown on pillars */
.pillar .more{font-size:14px;color:var(--di-mist);font-weight:600;display:inline-flex;align-items:center;gap:6px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);transition:color .25s var(--ease)}
.pillar .more:hover{color:var(--di-sky)}
.pillar .more .arrow{display:inline-block;transition:transform .25s var(--ease)}
/* pillar arrow off-hover effect now handled in the off-hover library above (bounce) */

/* ============ DIAI FOUNDRY ============ */
/* v61: foundry padding tuned to Fibonacci hero scale (89) — matches the
   .section rhythm so foundry reads as a peer major section. */
.foundry{background:var(--di-midnight-2);color:#fff;padding:89px 0;position:relative;overflow:hidden}
.foundry::before{content:"";position:absolute;inset:0;background:radial-gradient(750px 420px at 90% 50%, rgba(0,160,222,.13), transparent 60%);pointer-events:none}
.foundry-bg-grid{position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(180deg, black 30%, transparent);
}
.foundry-head{display:flex;justify-content:center;text-align:center;margin-bottom:34px;position:relative;z-index:2}
.foundry-head > div{max-width:880px}
.foundry-head .eyebrow{justify-content:center}
.foundry h2{font-size:40px;color:#fff;letter-spacing:-.025em;margin-left:auto;margin-right:auto}
.foundry h2 .accent{color:var(--di-sky);font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em}
.foundry p.lede{color:rgba(255,255,255,.7);font-size:17px;margin:13px auto 0;line-height:1.6;max-width:610px}
.foundry-services{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;position:relative;z-index:2;align-items:stretch}
/* v26: cards are now flex columns. Content (step + h3 + p) sits at top, meta line sits
   immediately after with consistent margin, then padding-bottom absorbs any height
   difference between cards. This removes the awkward "yawning gap" when one card has
   more body text than its siblings.
   Also v26: card background is now near-opaque so the foundry section's background
   grid lines don't bleed through behind the text. Carbon/grid texture remains visible
   in the gutters between cards. */
.foundry-card{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(20,36,60,.96) 0%, rgba(14,26,46,.96) 100%);
  border:1px solid rgba(30,58,95,.7);
  border-radius:8px;
  padding:34px;
  position:relative;
  transition:all .3s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.2), 0 8px 24px -16px rgba(0,0,0,.5);
  overflow:hidden;
}
/* v6: foundry-card hover treatment matches the .pillar card pattern.
   ::before is the top accent bar that grows to full width on hover.
   ::after carries a soft radial glow + faint diagonal accent — same family
   as .pillar so the two card systems read as one design language. */
.foundry-card::before{content:"";position:absolute;top:0;left:0;width:32px;height:3px;background:var(--di-sky);transition:width .4s var(--ease);z-index:2}
.foundry-card::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,160,222,.1), transparent 60%),
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.045) 0,
      rgba(255,255,255,.045) 1px,
      transparent           1px,
      transparent           4px),
    repeating-linear-gradient(160deg,
      rgba(0,0,0,.18) 0,
      rgba(0,0,0,.18) 1px,
      transparent     1px,
      transparent     4px);
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.foundry-card:hover{background:rgba(0,160,222,.05);border-color:rgba(0,160,222,.4);transform:translateY(-3px);box-shadow:0 24px 48px -24px rgba(0,160,222,.3), inset 0 1px 0 rgba(255,255,255,.08)}
.foundry-card:hover::before{width:100%}
.foundry-card:hover::after{opacity:1}
.foundry-card .step{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--di-mist);letter-spacing:.22em;margin-bottom:21px;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.foundry-card .step .dot{width:5px;height:5px;background:var(--di-sky);border-radius:50%;animation:pulse-soft 2.5s var(--ease) infinite}
.foundry-card h3{color:#fff;font-size:24px;margin-bottom:13px;letter-spacing:-.012em;min-height:62px;line-height:1.15}
.foundry-card p{color:rgba(255,255,255,.78);font-size:14px;margin:0 0 21px;line-height:1.6;flex:1}
.foundry-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:rgba(255,255,255,.55);font-family:'JetBrains Mono',monospace;letter-spacing:.18em;border-top:1px dashed rgba(255,255,255,.12);padding-top:13px;text-transform:uppercase}
.foundry-card .meta .leader{flex:1;border-bottom:1px dotted rgba(255,255,255,.18);height:1px;margin:0 13px;align-self:flex-end;position:relative;top:-3px}
/* v11: Two-track split inside a foundry-card (Business / Technical). Stacks below the
   description, sits above the meta strip. Each track has a label, a thin descriptor,
   and a left rule in sky to anchor it. */
.foundry-tracks{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 21px;border-top:1px dashed rgba(255,255,255,.1);padding-top:13px}
.foundry-track{padding:5px 13px 5px 13px;border-left:1px solid rgba(0,160,222,.45);position:relative;display:flex;align-items:center}
.foundry-track + .foundry-track{margin-left:4px}
.foundry-track .track-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist);font-weight:600;display:block}
.foundry-track .track-desc{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.5;margin:0}
.foundry-cta{margin-top:34px;display:flex;gap:13px;align-items:center;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}

/* ============ PROOF (DARK with luminous flagship) ============ */
.proof{background:var(--di-midnight);padding:55px 0;position:relative;overflow:hidden}
.proof-grid{display:grid;grid-template-columns:1.618fr 1fr 1fr;grid-template-rows:auto auto;gap:13px;position:relative;z-index:2}
.case{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;position:relative;overflow:hidden;transition:all .3s var(--ease)}
.case:hover{border-color:rgba(0,160,222,.45);transform:translateY(-3px);background:rgba(0,160,222,.04);box-shadow:0 24px 48px -24px rgba(0,160,222,.25)}
.case-flag{position:absolute;top:0;left:32px;height:3px;width:48px;background:var(--di-sky);transition:width .4s var(--ease);box-shadow:0 0 8px rgba(0,160,222,.6)}
.case:hover .case-flag{width:calc(100% - 64px)}
.case .who{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist);font-weight:500;display:flex;align-items:center;gap:10px}
.case .who::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12);max-width:80px}
.case h3{font-size:24px;margin:13px 0 13px;letter-spacing:-.015em;line-height:1.2;color:#fff}
.case p{font-size:15px;color:rgba(255,255,255,.78);margin:0 0 21px;line-height:1.6}
.case .stat-row{display:flex;gap:34px;margin-top:auto;padding-top:21px;border-top:1px dashed rgba(255,255,255,.12)}
.case .stat-row .num{font-size:30px;font-weight:600;color:#fff;letter-spacing:-.02em;font-family:'JetBrains Mono',monospace;line-height:1}
.case .stat-row .lbl{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.18em;margin-top:8px}
.case-flagship{grid-column:1/2;grid-row:1/3;background:
  radial-gradient(900px 480px at 100% 0%, rgba(0,160,222,.18), transparent 50%),
  linear-gradient(165deg, rgba(30,58,95,.6), rgba(10,22,40,.85) 90%);
  border:1px solid rgba(0,160,222,.3);
  min-height:555px;padding:34px;position:relative;
  box-shadow:0 30px 60px -30px rgba(0,160,222,.25), inset 0 1px 0 rgba(255,255,255,.08)
}
.case-flagship h3{font-size:34px;margin:21px 0 13px}
.case-flagship .quote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:18px;color:#fff;border-left:2px solid var(--di-sky);padding:8px 0 8px 21px;margin:21px 0;line-height:1.45;font-weight:400}
.case-flagship .quote::before{content:"\201C";font-size:36px;color:var(--di-sky);line-height:0;position:relative;top:14px;margin-right:4px}
.case-flagship .quote cite{display:block;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--di-mist);margin-top:13px;font-weight:500}
.case-flagship .stat-row .num{font-size:40px;background:linear-gradient(180deg, #fff, var(--di-mist));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.case-flagship .file-stamp{position:absolute;top:21px;right:21px;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.case-flagship .file-stamp .v{padding:2px 6px;border:1px solid rgba(0,160,222,.4);border-radius:2px;color:var(--di-sky)}
.case .more{font-size:14px;color:var(--di-mist);font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:13px;transition:color .25s var(--ease)}
.case .more:hover{color:var(--di-sky)}
.case .more .arrow{transition:transform .25s var(--ease)}
/* case arrow off-hover effect now handled in the off-hover library above (drift) */

/* ============ HOW WE WORK (STEEL TINTED) ============ */
.howwe{background:linear-gradient(180deg,var(--di-midnight-2) 0%,var(--di-steel-2) 100%);position:relative;overflow:hidden;padding:55px 0;border-top:1px solid rgba(0,160,222,.1)}
.lane{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;position:relative;z-index:2}
.lane::before{content:"";position:absolute;left:32px;right:32px;top:34px;height:1px;background:repeating-linear-gradient(90deg, var(--di-sky) 0 8px, transparent 8px 18px);opacity:.55}
.phase{padding:0 21px;position:relative}
.phase .marker{width:55px;height:55px;border-radius:8px;background:var(--di-midnight);border:1.5px solid var(--di-sky);color:#fff;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:16px;margin-bottom:21px;position:relative;z-index:1;box-shadow:0 0 0 6px var(--di-midnight-2), 0 0 24px rgba(0,160,222,.25), inset 0 1px 0 rgba(255,255,255,.1);transition:all .35s var(--ease)}
/* v14: square marker matches the rest of the page geometry. Inner dashed ring rotates one way,
   outer ring rotates the other way on hover — more visible than a rotating circle. */
.phase .marker::before{content:"";position:absolute;inset:5px;border:1px dashed rgba(255,255,255,.25);border-radius:5px;transition:transform 4s linear}
.phase .marker::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(0,160,222,.2);border-radius:10px;transition:transform 4s linear, border-color .35s var(--ease);pointer-events:none}
.phase:hover .marker{background:var(--di-sky);color:var(--di-text-on-sky);box-shadow:0 0 0 6px var(--di-midnight-2), 0 0 36px rgba(0,160,222,.6), inset 0 1px 0 rgba(255,255,255,.2)}
.phase:hover .marker::before{transform:rotate(360deg);border-color:rgba(4,44,83,.3)}
.phase:hover .marker::after{transform:rotate(-180deg);border-color:rgba(0,160,222,.55)}
.phase h3{font-size:19px;margin-bottom:10px;letter-spacing:-.005em;color:#fff}
.phase p{font-size:14px;color:rgba(255,255,255,.7);margin:0;line-height:1.6}
.phase .time{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--di-sky);font-weight:500;margin-bottom:8px}

/* ============ v38: INLINE BOOKING SECTION ============
   Final-fold conversion moment. Two-pole layout: pitch on the left, embedded
   HubSpot meetings widget on the right. Anchored to #book so any "Book a
   consult" CTA scrolls here on devices where the modal is suppressed (and as
   a fallback if the modal JS fails). */
.booking{background:linear-gradient(180deg,var(--di-midnight) 0%,var(--di-midnight-2) 100%);padding:89px 0;position:relative;overflow:hidden;border-top:1px solid rgba(0,160,222,.18)}
.booking::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 30% 40%,rgba(0,160,222,.10),transparent 60%);pointer-events:none}
.booking-grid{display:grid;grid-template-columns:5fr 7fr;gap:55px;align-items:start;position:relative;z-index:2}
.booking-pitch h2{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:38px;color:#fff;letter-spacing:-.014em;line-height:1.15;margin-bottom:13px}
.booking-pitch h2 .accent{color:var(--di-mist);font-style:italic}
.booking-pitch p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.6;margin-bottom:21px}
.booking-pitch .booking-bullets{list-style:none;padding:0;margin:0 0 21px}
.booking-pitch .booking-bullets li{display:flex;align-items:flex-start;gap:13px;padding:8px 0;color:rgba(255,255,255,.78);font-size:14.5px}
.booking-pitch .booking-bullets li::before{content:"";width:6px;height:6px;background:var(--di-sky);transform:rotate(45deg);margin-top:9px;flex-shrink:0;box-shadow:0 0 8px rgba(0,160,222,.5)}
.booking-pitch .booking-meta{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist);margin-bottom:21px}
.booking-pitch .booking-meta::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--di-success);box-shadow:0 0 8px rgba(0,178,122,.6);animation:pulse-soft 2.4s var(--ease) infinite}
.booking-widget{background:rgba(255,255,255,.03);border:1px solid rgba(0,160,222,.22);border-radius:8px;padding:8px;box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);min-height:660px;position:relative}
.booking-widget-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:640px;padding:32px;text-align:center;color:rgba(255,255,255,.6)}
.booking-widget-placeholder .placeholder-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist);margin-bottom:14px}
.booking-widget-placeholder .placeholder-title{font-family:'Fraunces',Georgia,serif;font-size:24px;color:#fff;margin-bottom:8px;font-weight:400}
.booking-widget-placeholder .placeholder-sub{font-size:14px;max-width:360px;line-height:1.5}
@media (max-width:960px){.booking-grid{grid-template-columns:1fr;gap:34px}.booking-pitch h2{font-size:30px}.booking-widget{min-height:600px}}

/* ============ v38: INLINE LEAD MAGNET ============
   Soft conversion path for visitors not ready to book. Gated AI Readiness
   Assessment download with email capture. Anchored at #assessment. */
.assessment{padding:55px 0;background:var(--di-midnight-2);position:relative;border-top:1px solid rgba(255,255,255,.06)}
.assessment-inner{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;position:relative;z-index:2}
.assessment-pitch .meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--di-mist);text-transform:uppercase;margin-bottom:14px}
.assessment-pitch h3,.assessment-pitch h2{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:30px;color:#fff;letter-spacing:-.014em;margin:0 0 10px;line-height:1.2}
.assessment-pitch p{color:rgba(255,255,255,.72);margin:0 0 14px;font-size:15px;line-height:1.6}
.assessment-pitch .assessment-includes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.assessment-pitch .assessment-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(0,160,222,.08);border:1px solid rgba(0,160,222,.22);padding:6px 10px;border-radius:4px}
.assessment-form{display:flex;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .25s var(--ease)}
.assessment-form:focus-within{border-color:rgba(0,160,222,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 4px rgba(0,160,222,.12)}
.assessment-form input{flex:1;background:transparent;border:0;color:#fff;font-size:15px;padding:12px 14px;outline:none;font-family:inherit}
.assessment-form input::placeholder{color:rgba(255,255,255,.4)}
.assessment-privacy{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:10px}
@media (max-width:768px){.assessment-inner{grid-template-columns:1fr;gap:21px}.assessment-pitch h3,.assessment-pitch h2{font-size:24px}}

/* ============ NEWSLETTER ============ */
.news{background:var(--di-steel);color:#fff;padding:34px 0;position:relative;overflow:hidden}
.news::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 50%, rgba(0,160,222,.14), transparent 60%)}
.news-inner{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;position:relative;z-index:2}
.news h3,.news h2.news-h{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:32px;color:#fff;letter-spacing:-.018em;margin:0 0 8px;line-height:1.2}
.news p{color:rgba(255,255,255,.7);margin:0;font-size:15px}
.news .meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--di-mist);text-transform:uppercase;margin-bottom:14px}
.news-form{display:flex;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .25s var(--ease)}
.news-form:focus-within{border-color:rgba(0,160,222,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 4px rgba(0,160,222,.12)}
.news-form input{flex:1;background:transparent;border:0;color:#fff;font-size:15px;padding:12px 14px;outline:none;font-family:inherit}
.news-form input::placeholder{color:rgba(255,255,255,.4)}

/* ============ PARTNERS · ECOSYSTEM ============ */
.partners{padding:55px 0;background:linear-gradient(180deg,var(--di-midnight-2) 0%,var(--di-midnight) 100%);position:relative;overflow:hidden;border-top:1px solid rgba(0,160,222,.12);border-bottom:1px solid rgba(255,255,255,.04)}
.partners-grid{display:grid;gap:34px;margin-top:34px}
.partner-group{display:flex;flex-direction:column;gap:13px}
.partner-group .group-head{display:flex;align-items:baseline;justify-content:space-between;gap:21px;flex-wrap:wrap}
.partner-group h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(111,207,240,.78);font-weight:500;margin:0;display:flex;align-items:center;gap:13px}
.partner-group h4::before{content:"";width:13px;height:1px;background:var(--di-sky)}
.partner-group .group-note{font-size:13px;color:rgba(255,255,255,.55);font-style:italic;margin:0;max-width:420px;text-align:right}
.partner-row{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.partner-card{display:grid;place-items:center;gap:5px;padding:21px 13px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);text-align:center;transition:all .25s var(--ease);position:relative;min-height:84px}
.partner-card .partner-mark{font-family:'Noto Sans',sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.86);text-transform:uppercase}
.partner-card .partner-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:rgba(255,255,255,.45);text-transform:uppercase;font-weight:500}
.partner-card:hover{border-color:rgba(0,160,222,.45);background:linear-gradient(180deg,rgba(0,160,222,.07),rgba(255,255,255,.01));transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(0,160,222,.22)}
.partner-card:hover .partner-mark{color:#FFFFFF}
.partner-card:hover .partner-tag{color:rgba(111,207,240,.85)}
.partner-card.featured{border-color:rgba(0,160,222,.45);background:linear-gradient(180deg,rgba(0,160,222,.08),rgba(255,255,255,.02))}
.partner-card.featured::before{content:"";position:absolute;top:0;left:0;width:32px;height:2px;background:var(--di-sky)}
.partner-card.featured .partner-mark{color:#FFFFFF}
.partner-card.featured .partner-tag{color:var(--di-mist)}
.partners-foot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:21px;margin-top:34px;padding-top:21px;border-top:1px solid rgba(255,255,255,.08)}
.partners-foot p{font-size:15px;color:rgba(255,255,255,.7);margin:0;line-height:1.55;max-width:610px}
.partners-foot strong{color:#fff;font-weight:600}
.partners-foot .partners-cta{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--di-sky);font-weight:600;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.partners-foot .partners-cta:hover{color:var(--di-mist)}
@media (max-width:760px){.partner-group .group-head{flex-direction:column;align-items:flex-start}.partner-group .group-note{text-align:left}}

/* ============ FOOTER ============ */
/* v61: footer padding tuned. Top 48 → 55 (Fibonacci major — gives the
   footer breathing room from the section above). Bottom 24 → 21 (Fibonacci
   standard). */
.footer{background:var(--di-midnight-2);color:rgba(255,255,255,.7);padding:55px 0 21px;position:relative;overflow:hidden;border-top:1px solid rgba(0,160,222,.15)}

/* ===== Footer F1 race chart — sits between the nav grid and the copyright row.
   Subtle ambient animation: each stream has its own duration, easing and amplitude
   so the field never feels in lockstep. ===== */
/* v10: Footer race-chart wrapper. Hosts the FULL race chart (relocated from
   hero in v10). Provides eyebrow label + thin top/bottom borders so the chart
   reads as a closing data narrative. The SVG inside uses the standard
   .stripe-svg classes — same styling as the original hero chart. */
.footer-race-chart{
  position:relative;z-index:2;width:100%;
  height:200px;
  margin:32px 0 24px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-race-chart .stripe-svg{
  position:absolute;left:0;right:0;top:22px;bottom:0;
  width:100%;height:calc(100% - 22px);
  overflow:visible;
}
.footer-race-eyebrow{
  position:absolute;top:0;left:0;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(111,207,240,.55);font-weight:500;
  display:flex;align-items:center;gap:10px;z-index:3;
}
.footer-race-eyebrow::before{
  content:"";width:14px;height:1px;background:rgba(111,207,240,.4);
}

/* v10: Compressed hero stripe. Same viewBox as the full chart so path math is
   identical; rendered at 90px tall via preserveAspectRatio="none" so the
   stream shapes visually squash but remain recognisable against the footer
   version. No ribbon, no fasteners, no labels — pure stream echo. */
.stripe-svg.s-hero-compressed{height:45px}
.stripe-svg.s-hero-compressed .stripe-flow{opacity:.85}
.stripe-svg.s-hero-compressed .stripe-flow.z-back{opacity:.55}
.stripe-svg.s-hero-compressed .stripe-flow.z-mid{opacity:.78}
.stripe-svg.s-hero-compressed .stripe-flow.z-front{opacity:.95}

/* ===== Carbon-fibre weave on dark/ghost buttons — diagonal 70° BL→TR ===== */
.btn-ghost{
  background:
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.09) 0px,
      rgba(255,255,255,.09) 1px,
      rgba(255,255,255,.03) 1px,
      rgba(255,255,255,.03) 1.8px,
      rgba(0,0,0,.42)       1.8px,
      rgba(0,0,0,.42)       3.2px,
      rgba(0,0,0,.18)       3.2px,
      rgba(0,0,0,.18)       4.2px),
    repeating-linear-gradient(160deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent           1px,
      transparent           1.8px,
      rgba(0,0,0,.3)        1.8px,
      rgba(0,0,0,.3)        3.2px,
      rgba(0,0,0,.1)        3.2px,
      rgba(0,0,0,.1)        4.2px),
    rgba(10,22,40,.45);
}
.btn-ghost:hover{
  background:
    repeating-linear-gradient(70deg,
      rgba(0,160,222,.18)   0px,
      rgba(0,160,222,.18)   1px,
      rgba(255,255,255,.03) 1px,
      rgba(255,255,255,.03) 1.8px,
      rgba(0,0,0,.4)        1.8px,
      rgba(0,0,0,.4)        3.2px,
      rgba(0,0,0,.16)       3.2px,
      rgba(0,0,0,.16)       4.2px),
    repeating-linear-gradient(160deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      transparent           1px,
      transparent           1.8px,
      rgba(0,0,0,.28)       1.8px,
      rgba(0,0,0,.28)       3.2px,
      rgba(0,0,0,.1)        3.2px,
      rgba(0,0,0,.1)        4.2px),
    rgba(0,160,222,.1);
}
/* v61: footer grid tuned. Columns 1.6fr/.9/.9/.9/.8 → 1.618fr/1fr/1fr/1fr/.8fr
   (true φ on the brand column, equal 1fr for the three link columns, 0.8fr
   for the social column). Gap 32 → 34 (Fibonacci section). Margin-bottom
   32 → 34 (Fibonacci section). */
.footer-grid{display:grid;grid-template-columns:1.618fr 1fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px;position:relative;z-index:2}
.footer-brand{display:flex;flex-direction:column;gap:21px}
.footer-contact{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:rgba(255,255,255,.7);line-height:1.5}
.footer-contact li .ico{color:var(--di-sky);font-size:8px;line-height:1;margin-top:6px;flex:0 0 auto}
.footer-contact a{color:rgba(255,255,255,.85);transition:color .2s var(--ease)}
.footer-contact a:hover{color:var(--di-sky)}
.footer-social{display:flex;gap:8px;margin-top:6px}
.footer-social .social-link{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.12);border-radius:50%;color:rgba(255,255,255,.7);font-size:13px;font-weight:600;transition:all .2s var(--ease)}
.footer-social .social-link:hover{border-color:var(--di-sky);color:var(--di-sky);background:rgba(0,160,222,.06)}
.footer h4{font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px;font-weight:500;display:flex;align-items:center;gap:10px}
.footer h4::before{content:"";width:14px;height:1px;background:var(--di-sky)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{padding:6px 0}
.footer a{color:rgba(255,255,255,.7);font-size:15px;transition:color .2s var(--ease)}
.footer li.sub{padding-left:18px;position:relative;margin-top:-2px}
.footer li.sub::before{content:"";position:absolute;left:6px;top:14px;width:8px;height:1px;background:rgba(0,160,222,.4)}
.footer li.sub a{color:rgba(255,255,255,.55);font-size:14px}
.footer li.sub a:hover{color:var(--di-mist)}
.footer a:hover{color:var(--di-sky)}
.footer .brand-blurb{font-size:15px;color:rgba(255,255,255,.72);max-width:340px;margin-top:21px;line-height:1.55}
.footer .footer-logo{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
/* v61: footer-bot tuned. padding-top 28 → 34 (Fibonacci section).
   gap 16 → 21 (Fibonacci standard). */
.footer-bot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding-top:34px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.08em;flex-wrap:wrap;gap:21px;position:relative;z-index:2}
.footer-bot .build-stamp{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.footer-bot .build-stamp .sep{opacity:.4}
.footer-bot .build-stamp a{color:rgba(255,255,255,.55);transition:color .2s var(--ease)}
.footer-bot .build-stamp a:hover{color:var(--di-sky)}
.proc-link{display:inline-flex;align-items:center;gap:6px;color:var(--di-mist) !important}
.proc-link .proc-mark{font-size:10px;opacity:.7}
/* v52: footer-badges REPLACED with footer-compliance — mirrors the
   ops-compliance treatment in the hero. UpGuard 900 score lead, three
   text badges follow (SMB1001 Gold, AusTender, Buy NSW, Atlassian SP).
   v53: AusTender + Buy NSW removed (matching hero). Score now linkable
   to live UpGuard report with hover and arrow indicator. */
.footer-compliance{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-compliance-score{
  display:flex;align-items:center;gap:7px;
  padding:5px 9px 5px 7px;
  background:rgba(0,178,122,.08);
  border:1px solid rgba(0,178,122,.28);
  border-radius:5px;
  flex-shrink:0;
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer-compliance-score:hover{
  background:rgba(0,178,122,.14);
  border-color:rgba(0,178,122,.5);
  transform:translateY(-1px);
}
.footer-compliance-score-num{
  font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;
  color:var(--di-success);letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 10px rgba(0,178,122,.4);
}
.footer-compliance-score-num::after{
  content:" /950";
  font-size:8.5px;font-weight:500;color:rgba(0,178,122,.55);
  letter-spacing:.1em;
}
.footer-compliance-score-label{
  font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65);
  line-height:1.2;
}
.footer-compliance-score-arrow{
  width:9px;height:9px;flex-shrink:0;
  color:rgba(0,178,122,.55);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.footer-compliance-score:hover .footer-compliance-score-arrow{
  color:var(--di-success);
  transform:translate(1px,-1px);
}
/* v63: footer compliance badges — base neutral grey for non-verified badges
   (like "Atlassian Solution Partner" which has no click-through verification).
   The verified link variant overrides to the green-tinted treatment to match
   the UpGuard score and the hero's SMB1001 badge. */
.footer-compliance-badges{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer-compliance-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
  padding:4px 8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;
  white-space:nowrap;
}
/* v63: footer verified credential link — green-tinted, matches hero treatment.
   SMB1001 with click-through to certificate sits in the verified family. */
.footer-compliance-badge-link{
  background:rgba(0,178,122,.08);
  border-color:rgba(0,178,122,.28);
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer-compliance-badge-link:hover{
  background:rgba(0,178,122,.14);
  border-color:rgba(0,178,122,.5);
  color:#fff;
  transform:translateY(-1px);
}
.footer-cb-arrow{
  width:9px;height:9px;flex-shrink:0;
  color:rgba(0,178,122,.55);
  transition:color .2s var(--ease), transform .2s var(--ease);
  margin-left:2px;
}
.footer-compliance-badge-link:hover .footer-cb-arrow{
  color:var(--di-success);
  transform:translate(1px,-1px);
}
.footer-cb-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.footer-cb-dot-gold{background:#FFC845;box-shadow:0 0 6px rgba(255,200,69,.5)}

/* ============ v56: FOOTER ITERATION ============
   Race chart gets stronger framing (caption + legend) and moves to the TOP
   of the footer as the closing data story. Brand block separates from the
   nav grid. Procurement gets pulled out as a featured row. */

/* Race-chart caption — sits below the chart, explains what you're looking at */
.footer-race-caption{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:34px;margin-top:21px;
  font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;
  max-width:100%;
}
.footer-race-caption-text{max-width:610px}
.footer-race-caption-text strong{color:rgba(255,255,255,.85);font-weight:600}
.footer-race-legend{
  display:flex;align-items:center;gap:21px;flex-wrap:wrap;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.footer-race-legend-item{display:inline-flex;align-items:center;gap:7px}
.footer-race-legend-dot{
  width:8px;height:2px;border-radius:1px;flex-shrink:0;
}
.footer-race-legend-dot.l-licensing{background:#00A0DE;box-shadow:0 0 8px rgba(0,160,222,.5)}
.footer-race-legend-dot.l-platform{background:#6FCFF0;box-shadow:0 0 8px rgba(111,207,240,.45)}
.footer-race-legend-dot.l-ai{background:#FFC845;box-shadow:0 0 8px rgba(255,200,69,.5)}

/* v56: Brand strip — full-width row above the nav grid.
   v56-iter2: compressed vertically. Blurb is single-line clamped, contact
   inline-horizontal, smaller gaps throughout. */
.footer-brand-strip{
  display:grid;grid-template-columns:1.618fr 1fr;
  gap:32px;align-items:center;
  padding:21px 0 21px;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;z-index:2;
}
.footer-brand-strip .footer-brand-left{display:flex;flex-direction:column;gap:8px}
.footer-brand-strip .footer-logo{
  display:flex;align-items:center;gap:12px;
  color:#fff;font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;
}
.footer-brand-strip .brand-blurb{
  font-size:14px;color:rgba(255,255,255,.7);
  max-width:610px;margin:0;line-height:1.5;
}
.footer-brand-strip .footer-contact{
  list-style:none;padding:0;margin:5px 0 0;
  display:flex;flex-wrap:wrap;gap:8px 21px;
}
.footer-brand-strip .footer-contact li{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.3;
}
.footer-brand-strip .footer-contact li .ico{
  color:var(--di-sky);font-size:6px;line-height:1;flex:0 0 auto;
}
.footer-brand-strip .footer-contact a{
  color:rgba(255,255,255,.85);transition:color .2s var(--ease);
}
.footer-brand-strip .footer-contact a:hover{color:var(--di-sky)}

/* Right side of brand strip — featured procurement block + socials */
.footer-brand-right{
  display:flex;flex-direction:column;gap:13px;align-items:flex-start;
}
.footer-procurement-block{
  display:flex;flex-direction:column;gap:6px;
  padding:11px 14px;
  background:rgba(0,160,222,.06);
  border:1px solid rgba(0,160,222,.22);
  border-radius:6px;
  width:100%;max-width:360px;
}
.footer-procurement-block .fpb-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(0,160,222,.85);
  display:flex;align-items:center;gap:9px;
}
.footer-procurement-block .fpb-eyebrow::before{
  content:"";width:10px;height:1px;background:rgba(0,160,222,.6);
}
.footer-procurement-block .fpb-line{
  font-size:13px;color:rgba(255,255,255,.82);line-height:1.4;margin:0;
}
.footer-procurement-block .fpb-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--di-sky);font-weight:600;
  margin-top:1px;
  transition:gap .2s var(--ease);
}
.footer-procurement-block .fpb-link:hover{gap:10px}
.footer-procurement-block .fpb-link .arr{font-size:11px}

/* v56: Social icons — SVG-based, no more text glyphs */
.footer-social-v56{display:flex;gap:8px}
.footer-social-v56 .social-link{
  display:inline-grid;place-items:center;
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  color:rgba(255,255,255,.7);
  transition:all .2s var(--ease);
}
.footer-social-v56 .social-link svg{width:15px;height:15px;fill:currentColor}
.footer-social-v56 .social-link:hover{
  border-color:var(--di-sky);
  color:var(--di-sky);
  background:rgba(0,160,222,.06);
  transform:translateY(-1px);
}

/* v56: Tightened nav grid — equal 4-column with stronger column rules */
.footer-nav-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:34px;margin:0 0 34px;
  padding:34px 0 8px;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;z-index:2;
}
.footer-nav-grid > div{position:relative}
.footer-nav-grid > div + div::before{
  content:"";position:absolute;left:-17px;top:6px;bottom:10px;
  width:1px;background:rgba(255,255,255,.04);
}

@media (max-width:1000px){
  .footer-brand-strip{grid-template-columns:1fr;gap:21px}
  .footer-nav-grid{grid-template-columns:repeat(2,1fr);gap:34px 21px}
  .footer-nav-grid > div + div::before{display:none}
  .footer-race-caption{flex-direction:column;align-items:flex-start;gap:13px}
}
@media (max-width:600px){
  .footer-nav-grid{grid-template-columns:1fr}
  .footer-procurement-block{max-width:none}
  .footer-brand-strip .footer-contact{flex-direction:column;gap:8px}
}

/* v56-iter2: footer-bot right side — Melbourne live clock + back-to-top link.
   Replaces the old footer-compliance row (UpGuard/SMB1001/SP) which has been
   removed since those credentials are already signalled in the hero ops-panel. */
.footer-bot-right{
  display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.footer-clock{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.footer-clock-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--di-success,#00B27A);
  box-shadow:0 0 8px rgba(0,178,122,.6);
  animation:footer-clock-pulse 2.4s ease-in-out infinite;
}
@keyframes footer-clock-pulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.18)}
}
.footer-clock-label{color:rgba(255,255,255,.5);font-weight:500}
.footer-clock-time{color:#fff;font-weight:600;letter-spacing:.08em}
.footer-back-top{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;
  text-decoration:none;
  padding:5px 10px 5px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  transition:all .2s var(--ease);
}
.footer-back-top svg{width:10px;height:10px;flex-shrink:0}
.footer-back-top:hover{
  color:var(--di-sky);border-color:rgba(0,160,222,.4);
  background:rgba(0,160,222,.05);
  transform:translateY(-1px);
}


/* ============================================================================
   v66: ASYMMETRIC HERO STACK
   ============================================================================
   Layered asymmetry plays to break the symmetric four-row hero rhythm and
   establish a clear visual hierarchy. Primary CTA gets the eye first.
   Staircase indent rhythm: flush / breakout / +34px indent / flush.
   ============================================================================ */

/* [PLAY 1] CTA primary dominant, secondary demoted to text link */
.hero-cta-v66{display:flex;flex-direction:column;align-items:flex-start;gap:13px;margin-bottom:21px;position:relative;z-index:2}
.hero-cta-primary-v66{
  /* Inherits .btn .btn-go .btn-lg base styles. We just pump the visual weight. */
  font-size:17px !important;
  padding:17px 28px !important;
  box-shadow:0 8px 24px rgba(0,160,222,.28),0 0 0 1px rgba(0,160,222,.4) inset;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-cta-primary-v66:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(0,160,222,.42),0 0 0 1px rgba(0,160,222,.6) inset;
}
.hero-cta-secondary-v66{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;
  text-decoration:none;
  padding:4px 0 4px 21px;
  position:relative;
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.hero-cta-secondary-v66 .hero-cta-secondary-line{
  position:absolute;left:0;top:50%;
  width:13px;height:1px;
  background:rgba(255,255,255,.25);
  transition:background .2s var(--ease), width .2s var(--ease);
}
.hero-cta-secondary-v66:hover{color:var(--di-sky);gap:13px}
.hero-cta-secondary-v66:hover .hero-cta-secondary-line{background:var(--di-sky);width:18px}
.hero-cta-secondary-arr{font-size:11px;opacity:.65;transition:opacity .2s var(--ease)}
.hero-cta-secondary-v66:hover .hero-cta-secondary-arr{opacity:1}

/* [PLAY 5] Pull-quote tagline. Italic Fraunces, large, breaks the left column
   boundary by sitting at negative-left margin on wide viewports so it spills
   into the gutter between the hero columns. Falls back to flush-left on
   narrow viewports. */
.hero-tagline-pullquote-v66{
  position:relative;z-index:2;
  /* v85: staircase position [1] — gutter breakout.
     Pull-quote pushes left of the flush margin by 34px (Fibonacci section
     break) to mark the start of the action group. The left rule sits
     in the gutter, the text sits flush with the content edge. */
  margin:0 0 21px -34px;
  padding:8px 0 8px 34px;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.012em;
  color:rgba(255,200,69,.92); /* DI gold — warm signal tier */
  max-width:680px;
  border-left:2px solid rgba(255,200,69,.5);
}
.hero-pullquote-mark{
  font-size:42px;line-height:0;
  color:rgba(255,200,69,.45);
  font-style:italic;font-weight:500;
}
.hero-pullquote-mark--open{margin-right:4px;vertical-align:-12px}
/* v85: closing quote sits to the right of the text, balancing the opening
   mark visually. Right double-quote glyph naturally sits higher than the
   left mark, so the vertical-align offset is smaller (it doesn't need to
   drop as far to feel correctly placed). */
.hero-pullquote-mark--close{margin-left:4px;vertical-align:-4px}
.hero-pullquote-text{color:#FFC845}

/* Compressed reassure row — only "Free initial consult" remains, since the
   tagline is now the pull-quote above. Tightly bound to the pull-quote. */
.hero-reassure-v66{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;color:rgba(255,255,255,.5);
  text-transform:uppercase;
  margin:0 0 21px 21px;
  position:relative;z-index:2;
}
.hero-reassure-v66 .reassure-item{display:inline-flex;align-items:center;gap:8px}
.hero-reassure-v66 .dot-tick{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,200,69,.7);
  box-shadow:0 0 6px rgba(255,200,69,.5);
}

/* [PLAY 2] v68: Contact pack — phone, hours, and email all packaged
   into ONE tight horizontal cluster. Reads as a single contact unit
   rather than two separate rows. Phone is dominant (21px), hours sit
   as a caption right next to the number, then a hairline divider, then
   the email link. Stays flush-left to anchor the staircase. */
.hero-contact-v68{
  display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;
  /* v88: staircase indent REMOVED. Per Michael's v88 fold alignment brief
     — the +34px indent on the contact box was creating visual misalignment
     against the CTA row above and the credentials row below (both flush
     left). Now all five fold boxes (Book CTA, AI Readiness CTA, contact,
     UpGuard, SMB1001) share a flush-left edge for a clean stacked rhythm.
     v87: margin-bottom 21 → 13 to tighten vertical rhythm at target viewport. */
  margin:0 0 13px 0;
  position:relative;z-index:2;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
}
.hero-contact-v68-phone{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:#fff;
  transition:color .2s var(--ease);
}
.hero-contact-v68-phone:hover{color:var(--di-sky)}
.hero-contact-v68-phone-icon{
  width:18px;height:18px;flex-shrink:0;
  color:rgba(255,200,69,.95);
  transition:color .2s var(--ease);
}
.hero-contact-v68-phone:hover .hero-contact-v68-phone-icon{color:var(--di-sky)}
.hero-contact-v68-num{
  font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:600;
  color:#fff;letter-spacing:.04em;line-height:1;
  transition:color .2s var(--ease);
}
.hero-contact-v68-phone:hover .hero-contact-v68-num{color:var(--di-sky)}
.hero-contact-v68-hours{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  white-space:nowrap;line-height:1.3;
}
.hero-contact-v68-sep{
  width:1px;height:22px;background:rgba(255,255,255,.14);
  flex-shrink:0;
}
.hero-contact-v68-email{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;
  letter-spacing:.04em;
  color:rgba(255,255,255,.75);
  text-decoration:none;
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.hero-contact-v68-email:hover{color:var(--di-sky);gap:11px}
.hero-contact-v68-email-icon{
  width:14px;height:14px;flex-shrink:0;
  color:rgba(255,255,255,.4);
  transition:color .2s var(--ease);
}
.hero-contact-v68-email:hover .hero-contact-v68-email-icon{color:var(--di-sky)}

/* v68: dual CTA row — both buttons side by side. Primary "Book" carries
   the conversion weight; ghost "AI Readiness" is the soft alternative
   for visitors not ready to book. Same height, equal stature. */
.hero-cta-v68{
  display:flex;gap:13px;flex-wrap:wrap;
  /* v85: staircase position [2] — flush left anchor.
     Primary action sits where the eye lands after the gutter-break.
     v87: margin-bottom 21 → 13 to tighten vertical rhythm at target viewport. */
  margin:0 0 13px 0;
  position:relative;z-index:2;
}
.hero-cta-v68 .btn{flex:0 0 auto}
@media (max-width:760px){
  .hero-cta-v68 .btn{flex:1 1 100%}
  .hero-contact-v68{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-contact-v68-sep{display:none}
  .hero-contact-v68-hours{display:block;margin-top:-2px}
  /* v85: collapse the staircase on mobile — at narrow widths the indents
     compress the column and read as misalignment rather than rhythm. */
  .hero-tagline-pullquote-v66{margin-left:-13px;padding-left:13px}
  .hero-contact-v68{margin-left:0}
}

/* ============================================================
   v89 (VERSION A — CONVERSION-FIRST) ACTION STACK
   ============================================================
   Replaces the v68 five-box stack with a hierarchical four-tier stack:
     [1] Primary CTA — dominant, big, prominent
     [2] Secondary action — quieter text link with arrow
     [3] Contact — inline phone + email, no card chrome
     [4] Credentials — quiet inline trust strip

   Why: At a 740px fold, five equal-weight 46px boxes flatten the
   conversion hierarchy. The eye doesn't know where to look first. By
   making the primary CTA dominate and demoting the rest, we restore
   the conversion gradient while keeping all the trust signals visible.
   ============================================================ */

/* [1] PRIMARY CTA — full row, dominant scale, accent halo */
.hero-cta-v89-primary{
  margin:0 0 8px 0;
  position:relative;z-index:2;
}
.hero-cta-v89-btn{
  font-size:16px;
  padding:15px 28px;
  letter-spacing:.005em;
}
.hero-cta-v89-btn .arrow{
  transition:transform .2s var(--ease);
}
.hero-cta-v89-btn:hover .arrow{transform:translateX(3px)}

/* [2] SECONDARY ACTION — quiet text link, sub-CTA weight */
.hero-cta-v89-secondary{
  margin:0 0 18px 0;
  position:relative;z-index:2;
}
.hero-cta-v89-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Noto Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:13.5px;font-weight:500;
  color:var(--di-mist);
  text-decoration:none;
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.hero-cta-v89-link:hover{color:var(--di-sky);gap:9px}
.hero-cta-v89-link .arrow{font-size:13px;line-height:1}

/* ============================================================
   v90: DUAL CTA CLUSTER — primary + soft offer side by side
   ============================================================
   Restores the AI Readiness Assessment as a proper ghost button
   alongside the primary "Book consult" CTA. Primary stays dominant
   through fill colour and slightly larger padding; soft offer reads
   as a parallel lower-commitment entry point. Wraps cleanly when the
   left column narrows.
   ============================================================ */
.hero-cta-v90{
  display:flex;gap:13px;flex-wrap:wrap;
  margin:0 0 18px 0;
  position:relative;z-index:2;
}
.hero-cta-v90 .btn{flex:0 0 auto}
.hero-cta-v90-primary{
  /* v97: vertical padding tightened to 8px to match the v97 .btn-lg height
     across the page. Horizontal kept at 26px for primary visual weight. */
  padding:8px 26px;
  font-size:15.5px;
}
.hero-cta-v90-primary .arrow{transition:transform .2s var(--ease)}
.hero-cta-v90-primary:hover .arrow{transform:translateX(3px)}
.hero-cta-v90-secondary{
  /* v97: vertical padding tightened to 8px to match the v97 .btn-lg height. */
  padding:8px 22px;
  font-size:14.5px;
}
@media (max-width:760px){
  .hero-cta-v90 .btn{flex:1 1 100%;justify-content:center}
}

/* [3] CONTACT — inline phone + email, no card chrome */
.hero-contact-v89{
  display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin:0 0 18px 0;
  position:relative;z-index:2;
}
.hero-contact-v89-phone,
.hero-contact-v89-email{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.hero-contact-v89-phone{color:#fff}
.hero-contact-v89-email{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;
  letter-spacing:.04em;
  color:rgba(255,255,255,.7);
}
.hero-contact-v89-phone:hover,
.hero-contact-v89-email:hover{color:var(--di-sky)}
.hero-contact-v89-icon{
  width:14px;height:14px;flex-shrink:0;
  color:rgba(255,255,255,.5);
  transition:color .2s var(--ease);
}
.hero-contact-v89-phone .hero-contact-v89-icon{color:rgba(255,200,69,.85)}
.hero-contact-v89-phone:hover .hero-contact-v89-icon,
.hero-contact-v89-email:hover .hero-contact-v89-icon{color:var(--di-sky)}
.hero-contact-v89-num{
  font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;
  color:#fff;letter-spacing:.03em;line-height:1;
}
.hero-contact-v89-hours{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
  white-space:nowrap;
}
.hero-contact-v89-sep{
  color:rgba(255,255,255,.25);
  font-size:13px;
  user-select:none;
}

/* [4] CREDENTIALS — quiet inline trust strip */
.hero-creds-v89{
  display:inline-flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin:0;
  position:relative;z-index:2;
}
.hero-creds-v89-item{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.hero-creds-v89-item:hover{color:var(--di-success)}
.hero-creds-v89-mark{
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;
  color:var(--di-success);letter-spacing:-.01em;line-height:1;
}
.hero-creds-v89-dot{
  width:9px;height:9px;border-radius:50%;
  background:#FFC845;
  box-shadow:0 0 0 2px rgba(255,200,69,.18);
  flex-shrink:0;
}
.hero-creds-v89-label{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  transition:color .2s var(--ease);
}
.hero-creds-v89-item:hover .hero-creds-v89-label{color:#fff}
.hero-creds-v89-arrow{
  width:9px;height:9px;flex-shrink:0;
  color:rgba(255,255,255,.35);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.hero-creds-v89-item:hover .hero-creds-v89-arrow{
  color:var(--di-success);
  transform:translate(1px,-1px);
}
.hero-creds-v89-sep{
  color:rgba(255,255,255,.2);
  font-size:13px;
  user-select:none;
}

/* Mobile — stack vertically, full-width CTA */
@media (max-width:760px){
  .hero-cta-v89-btn{width:100%;justify-content:center}
  .hero-contact-v89{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-contact-v89-sep{display:none}
  .hero-creds-v89{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-creds-v89-sep{display:none}
}

/* [PLAY 2] Phone dominant, email demoted. Group indented +34px (Fibonacci)
   to sit inside the asymmetry staircase. */
.hero-contact-v66{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin:0 0 21px 34px;
  position:relative;z-index:2;
}
.hero-contact-v66::before{
  /* hairline gutter cue — soft visual marker for the indent */
  content:"";position:absolute;left:-21px;top:6px;bottom:6px;
  width:1px;background:rgba(255,255,255,.08);
}
.hero-contact-primary-v66{
  display:inline-flex;align-items:center;gap:13px;
  text-decoration:none;
  color:#fff;
  transition:color .2s var(--ease);
}
.hero-contact-primary-v66:hover{color:var(--di-sky)}
.hero-contact-primary-icon{
  width:18px;height:18px;flex-shrink:0;
  color:rgba(255,200,69,.95);
  transition:color .2s var(--ease);
}
.hero-contact-primary-v66:hover .hero-contact-primary-icon{color:var(--di-sky)}
.hero-contact-primary-num{
  font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:600;
  color:#fff;letter-spacing:.04em;
  transition:color .2s var(--ease);
}
.hero-contact-primary-v66:hover .hero-contact-primary-num{color:var(--di-sky)}
.hero-contact-primary-cap{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-left:8px;
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.hero-contact-secondary-v66{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.5);font-weight:500;
  text-decoration:none;
  margin-left:31px; /* aligns under the phone number, not the icon */
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.hero-contact-secondary-v66:hover{color:var(--di-sky);gap:10px}
.hero-contact-secondary-arr{
  width:10px;height:10px;flex-shrink:0;
  color:rgba(255,255,255,.35);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.hero-contact-secondary-v66:hover .hero-contact-secondary-arr{
  color:var(--di-sky);transform:translate(1px,-1px);
}

/* [PLAY 3] UpGuard dominant card; SMB1001 demotes to a thin text line.
   Reset to flush-left (closes the staircase). */
/* ============================================================
   v67: SYMMETRIC CREDENTIALS
   Both UpGuard and SMB1001 now share an identical card skeleton —
   same padding, same border, same radius, same arrow, same hover.
   Each card has: [marker block] [label stack] [arrow]
     - marker block: 38px tall fixed slot (number for UpGuard, gold
       dot+ring for SMB1001) so the two cards read as a symmetric pair
     - label stack: 2 lines (title + verify caption) in identical type
     - arrow: 10px, right-aligned, identical hover translate
   Sits as a horizontal row on desktop, wraps on narrow.
   ============================================================ */
.hero-compliance-v66{
  display:flex;flex-direction:row;align-items:stretch;gap:10px;flex-wrap:wrap;
  margin-bottom:0;
  position:relative;z-index:2;
}
/* Shared card form — applied to BOTH credentials. */
.hero-cred-card-v66{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px 8px 10px;
  background:rgba(0,178,122,.08);
  border:1px solid rgba(0,178,122,.28);
  border-radius:6px;
  text-decoration:none;
  flex-shrink:0;flex:0 0 auto;
  min-height:46px;
  box-sizing:border-box;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hero-cred-card-v66:hover{
  background:rgba(0,178,122,.14);
  border-color:rgba(0,178,122,.5);
  transform:translateY(-1px);
}
/* Marker slot — fixed width so both cards line up identically */
.hero-cred-marker-v66{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:30px;flex-shrink:0;
}
/* UpGuard variant — number lives in the marker slot */
.hero-cred-marker-v66 .hero-cred-num{
  font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;
  color:var(--di-success);letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 10px rgba(0,178,122,.45);
}
.hero-cred-marker-v66 .hero-cred-num::after{
  content:"/950";
  font-size:8.5px;font-weight:500;color:rgba(0,178,122,.55);
  letter-spacing:.08em;margin-left:1px;
}
/* SMB1001 variant — gold dot with ring lives in the marker slot,
   sized to occupy the same visual weight as the UpGuard "900" */
.hero-cred-marker-v66 .hero-cred-dot{
  width:14px;height:14px;border-radius:50%;
  background:#FFC845;
  box-shadow:0 0 0 3px rgba(255,200,69,.18), 0 0 10px rgba(255,200,69,.55);
  flex-shrink:0;
}
/* Label stack — identical type treatment on both cards */
.hero-cred-label-v66{
  display:flex;flex-direction:column;gap:2px;line-height:1.1;
}
.hero-cred-label-v66 .hero-cred-title{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.hero-cred-label-v66 .hero-cred-verify{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(0,178,122,.7);
}
.hero-cred-card-v66:hover .hero-cred-title{color:#fff}
/* Shared arrow */
.hero-cred-arrow-v66{
  width:10px;height:10px;flex-shrink:0;margin-left:2px;
  color:rgba(0,178,122,.55);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.hero-cred-card-v66:hover .hero-cred-arrow-v66{
  color:var(--di-success);
  transform:translate(1px,-1px);
}

/* ====== Responsive: collapse the staircase below 760px ====== */
@media (max-width:760px){
  .hero-tagline-pullquote-v66{
    margin-left:0;font-size:24px;
    padding-left:13px;
  }
  .hero-pullquote-mark{font-size:32px;vertical-align:-8px}
  /* On narrow viewports, stack credentials vertically so each card
     keeps full label-stack visibility */
  .hero-compliance-v66{flex-direction:column;align-items:flex-start}
  .hero-cred-card-v66{width:100%;max-width:340px}
}
@media (max-width:480px){
  .hero-tagline-pullquote-v66{font-size:21px;padding-left:10px}
  .hero-pullquote-mark{font-size:26px;vertical-align:-6px}
  /* Hide the verify caption to keep the credentials compact on
     small screens — the click-through still verifies */
  .hero-cred-label-v66 .hero-cred-verify{display:none}
}

/* ============ ICONS ============ */
.icn{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hero h1{font-size:48px}
  .hero-grid{grid-template-columns:1fr;gap:55px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,.08)}
  .foundry-services{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:1fr 1fr}
  .case-flagship{grid-column:1/3;grid-row:auto;min-height:auto}
  .lane{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .lane::before{display:none}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .news-inner{grid-template-columns:1fr;gap:21px}
  .nav-links{display:none}
  .logos{grid-template-columns:repeat(3,1fr);gap:21px}
  .hero-coord,.reg{display:none}
  .section-stamp{display:none}
}
@media (max-width:600px){
  .hero{padding:55px 0 89px}
  .hero h1{font-size:36px}
  .section{padding:55px 0}
  .pillars{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .stat:last-child{border-bottom:0}
  .proof-grid{grid-template-columns:1fr}
  .case-flagship{grid-column:auto}
  .foundry-services{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-meta > span{padding:0 13px}
}

@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none !important;transition:none !important}
}

/* ============================================================================
   v34: MOBILE NAV — full-screen overlay menu
   Checkbox-driven (no JS). Hamburger toggles visibility of a midnight overlay
   that lists primary nav links with their sub-items expanded inline. Locks body
   scroll while open. Hidden above 920px so desktop nav is unchanged.
   ============================================================================ */
.mobile-nav-toggle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hamburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:6px;cursor:pointer;padding:0;color:#fff;transition:border-color .2s var(--ease), background .2s var(--ease);position:relative;z-index:120}
.hamburger:hover{border-color:rgba(0,160,222,.5);background:rgba(0,160,222,.06)}
.hamburger .bars{position:relative;width:20px;height:14px;display:block}
.hamburger .bars span{position:absolute;left:0;right:0;height:1.5px;background:#fff;border-radius:1px;transition:transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease)}
.hamburger .bars span:nth-child(1){top:0}
.hamburger .bars span:nth-child(2){top:6px}
.hamburger .bars span:nth-child(3){top:12px}
/* When the body-level checkbox is checked, animate any hamburger below it to an X */
.mobile-nav-toggle:checked ~ .nav .hamburger .bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.mobile-nav-toggle:checked ~ .nav .hamburger .bars span:nth-child(2){opacity:0}
.mobile-nav-toggle:checked ~ .nav .hamburger .bars span:nth-child(3){top:6px;transform:rotate(-45deg)}

.mobile-overlay-backdrop{
  position:fixed;inset:0;z-index:105;
  background:transparent;
  opacity:0;visibility:hidden;cursor:pointer;
  transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.mobile-nav-toggle:checked ~ .mobile-overlay-backdrop{
  opacity:1;visibility:visible;
  transition:opacity .25s var(--ease);
}

.mobile-overlay{
  position:fixed;inset:0;z-index:110;
  background:linear-gradient(180deg, rgba(6,16,31,.985) 0%, rgba(10,22,40,.985) 100%);
  backdrop-filter:saturate(160%) blur(20px);
  opacity:0;visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .3s var(--ease), visibility 0s linear .3s, transform .3s var(--ease);
  display:flex;flex-direction:column;
  padding:80px 28px 40px;
  overflow-y:auto;
}
.mobile-nav-toggle:checked ~ .mobile-overlay{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
/* Scroll-lock when overlay open (mobile only) */
@media (max-width:920px){
  .mobile-nav-toggle:checked ~ .nav,
  .mobile-nav-toggle:checked ~ .seo-banner,
  .mobile-nav-toggle:checked ~ .hero,
  .mobile-nav-toggle:checked ~ .trust,
  .mobile-nav-toggle:checked ~ .section,
  .mobile-nav-toggle:checked ~ .foundry,
  .mobile-nav-toggle:checked ~ .howwe,
  .mobile-nav-toggle:checked ~ .partners,
  .mobile-nav-toggle:checked ~ .news,
  .mobile-nav-toggle:checked ~ .stats,
  .mobile-nav-toggle:checked ~ .footer{
    /* No structural lock — overlay sits on top via z-index. Page beneath remains
       scrollable but obscured. This keeps the implementation pure CSS without
       fighting with the body element. */
  }
}
.mobile-overlay::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(0,160,222,.12), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(30,58,95,.4), transparent 60%);
}
.mobile-overlay-inner{position:relative;z-index:2;max-width:520px;margin:0 auto;width:100%}
.mobile-overlay-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--di-mist);margin-bottom:18px;opacity:.7;display:flex;align-items:center;gap:10px}
.mobile-overlay-eyebrow::before{content:"";width:14px;height:1px;background:var(--di-sky)}
.mobile-overlay-group{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-overlay-group:last-of-type{border-bottom:0}
.mobile-overlay-group > .group-title{
  display:block;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.012em;
  margin:0 0 12px;text-decoration:none;
}
.mobile-overlay-group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mobile-overlay-group ul a{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;
  color:rgba(255,255,255,.72);font-size:14.5px;font-weight:500;
  border-left:2px solid transparent;padding-left:14px;margin-left:-14px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.mobile-overlay-group ul a:hover{color:#fff;border-left-color:var(--di-sky)}
.mobile-overlay-group ul li.tag-new a::after{
  content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;
  background:var(--di-sky);box-shadow:0 0 8px rgba(0,160,222,.6);
}
.mobile-overlay-cta{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.mobile-overlay-cta .btn{width:100%;justify-content:center}
.mobile-overlay-foot{
  margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45);text-align:center;
}
.mobile-overlay-foot .partner-mark{color:var(--di-mist);font-weight:600}

/* Hide the mobile overlay entirely above 920px */
@media (min-width:921px){
  .mobile-overlay{display:none !important}
}

/* Below 920px: hide desktop menu, show hamburger, lock layouts to single column */
@media (max-width:920px){
  .nav-menu{display:none}
  .nav-cta .partner-badge{display:none}
  .nav-cta .btn-go{display:none}
  .hamburger{display:inline-flex}
  .nav-inner{height:64px}

  /* Hero — collapse two-column grid, shrink type */
  .hero{padding:34px 0 89px}
  .hero-grid{grid-template-columns:1fr !important;gap:34px}
  .hero h1{font-size:42px !important;line-height:1.05}
  .hero .lede{font-size:16px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-reassure{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-reassure .sep,.hero-reassure .reassure-sep{display:none}
  .hero-band-inner{flex-direction:column;gap:8px;text-align:center}
  .hero-band-right{text-align:center !important}

  /* Ops panel — full-width below the hero text */
  .ops-panel{margin-top:8px}

  /* Trust strips */
  .logos{grid-template-columns:repeat(3,1fr) !important;gap:21px 13px}
  .client-logo:not(:last-child)::after{display:none}
  .client-logo{font-size:12.5px}
  .trust.primary .logos{grid-template-columns:repeat(2,1fr) !important}

  /* Stats — 2x2 */
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:0 !important;border-bottom:1px solid rgba(255,255,255,.08)}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.08) !important}
  .stat:nth-last-child(-n+2){border-bottom:0}

  /* Capabilities, foundry, proof, partners — single column */
  .pillars{grid-template-columns:1fr !important;gap:21px}
  .foundry-services{grid-template-columns:1fr !important;gap:21px}
  .proof-grid{grid-template-columns:1fr !important}
  .case-flagship{grid-column:auto !important;grid-row:auto !important;min-height:auto !important;padding:32px !important}
  .case-flagship h3{font-size:26px !important}
  .lane{grid-template-columns:1fr !important;gap:32px}
  .lane::before{display:none}
  .partner-row{grid-template-columns:repeat(2,1fr) !important}

  /* Newsletter */
  .news-inner{grid-template-columns:1fr;text-align:left}
  .news-form{flex-direction:column;gap:10px}
  .news-form .btn{width:100%;justify-content:center}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:32px 24px}
  .footer-brand{grid-column:1/-1}
  .footer-race-chart{height:140px}

  /* Section heads */
  .section{padding:55px 0}
  .foundry{padding:55px 0}
  .proof{padding:55px 0}
  .howwe{padding:55px 0}
  .partners{padding:55px 0}
  .stats{padding:34px 0}
  .news{padding:34px 0}
  .section-head h2{font-size:30px !important}
  .foundry h2{font-size:30px !important}
  .howwe h2{font-size:30px !important}
  .partners h2{font-size:30px !important}

  /* Container padding tighter on mobile */
  .container{padding:0 21px}
}

@media (max-width:520px){
  .hero h1{font-size:34px !important}
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:0 !important;border-bottom:1px solid rgba(255,255,255,.08) !important}
  .stat:nth-child(odd){border-right:0 !important}
  .stat:last-child{border-bottom:0 !important}
  .partner-row{grid-template-columns:1fr !important}
  .logos{grid-template-columns:repeat(2,1fr) !important}
  .footer-grid{grid-template-columns:1fr !important}
  .footer-brand{grid-column:auto}
}

/* ============================================================================
   v34: TRUST BANDS — primary vs secondary differentiation
   Clients band is now visually elevated (slightly taller, larger logos, brighter
   label). Stack bands sit secondary beneath it with reduced visual weight.
   ============================================================================ */
.trust.primary .trust-inner{padding:34px 0 34px}
.trust.primary .trust-label{
  font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.78);
  margin-bottom:21px;
}
.trust.primary .trust-label::before,
.trust.primary .trust-label::after{background:rgba(0,160,222,.35);flex:0 0 80px}
.trust.primary .client-logo{font-size:15.5px;height:38px;color:rgba(255,255,255,.7)}
.trust.primary .client-logo:hover{color:#fff}
.trust.primary{
  background:linear-gradient(180deg, rgba(10,22,40,.98) 0%, var(--di-midnight-2) 100%);
  border-top:1px solid rgba(0,160,222,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* Make the stack bands feel like a secondary tier — tighter padding, smaller label, dimmer logos */
.trust.stack .trust-inner{padding:21px 0 21px}
.trust.stack .trust-label{font-size:10.5px;letter-spacing:.2em;margin-bottom:13px;opacity:.85}
.trust.stack .client-logo{font-size:13px;height:28px}
/* Subtle group bracket: stack bands sit beneath the primary band as a related cluster */
.trust.stack.atlassian-stack{border-top:1px solid rgba(38,132,255,.12)}
.trust.stack.ai-stack{border-top:1px solid rgba(0,160,222,.1);border-bottom:1px solid rgba(255,255,255,.05)}

/* ============================================================================
   v34: OPS PANEL TIMESTAMP — small "as at" date stamp at the bottom of the panel
   v41: margin-top 14 → 10, padding-top 14 → 10 to lift panel above 900px fold
   v43: margin-top changed to auto so when the panel is stretched to fill the
   hero left-column height, the timestamp pushes flush to the bottom (no
   floating mid-air gap). The 10px sits as a min-top via padding-top instead.
   v46: padding-top reduced 14 → 8 to crunch the panel further.
   v52: timestamp REPLACED with compliance badge strip — kept margin-top:auto
   pattern so the new compliance row also anchors to the bottom of the panel.
   ============================================================================ */
.ops-timestamp{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
  margin-top:auto;padding-top:8px;border-top:1px dashed rgba(255,255,255,.08);
  display:flex;align-items:center;gap:8px;
}

/* ============================================================================
   v52: OPS COMPLIANCE STRIP
   ============================================================================
   Procurement-grade credentials row at the bottom of the ops panel. UpGuard
   security rating leads as a numeric tag (matches the visual treatment of the
   ops-num scores above); SMB1001 Gold + AusTender + Buy NSW follow as small
   text badges. Anchors the panel as "live signals AND verified compliance"
   rather than just "live signals". The UpGuard 900 is the standout — second
   highest possible score on the platform, and it carries weight for any
   buyer who runs vendor security audits.
   v53: AusTender + Buy NSW removed (tender registrations, not certifications,
   read as table stakes by procurement-savvy buyers). Only two independently-
   verified credentials remain: SMB1001 Gold and UpGuard 900. UpGuard score
   is now a click-through link to the live UpGuard report (target=_blank with
   rel=noopener for the standard external-link safety). Adds an "Independently
   verified" caption to the row so the buyer reads it as "two REAL signals"
   rather than "more badges". External-link arrow on the score block on hover.
   ============================================================================ */
.ops-compliance{
  margin-top:auto;padding-top:10px;border-top:1px dashed rgba(255,255,255,.1);
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
}
.ops-compliance-score{
  display:flex;align-items:center;gap:7px;
  padding:5px 9px 5px 7px;
  background:rgba(0,178,122,.08);
  border:1px solid rgba(0,178,122,.28);
  border-radius:5px;
  flex-shrink:0;
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  position:relative;
}
.ops-compliance-score:hover{
  background:rgba(0,178,122,.14);
  border-color:rgba(0,178,122,.5);
  transform:translateY(-1px);
}
.ops-compliance-score-num{
  font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;
  color:var(--di-success);letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 10px rgba(0,178,122,.4);
}
.ops-compliance-score-num::after{
  content:" /950";
  font-size:9.5px;font-weight:500;color:rgba(0,178,122,.55);
  letter-spacing:.1em;
}
.ops-compliance-score-label{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65);
  line-height:1.2;
}
.ops-compliance-score-arrow{
  width:10px;height:10px;flex-shrink:0;
  color:rgba(0,178,122,.55);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.ops-compliance-score:hover .ops-compliance-score-arrow{
  color:var(--di-success);
  transform:translate(1px,-1px);
}
.ops-compliance-badges{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.ops-compliance-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
  padding:4px 8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;
  white-space:nowrap;
}
.ops-compliance-verify{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
  white-space:nowrap;
}
.ops-cb-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ops-cb-dot-gold{background:#FFC845;box-shadow:0 0 6px rgba(255,200,69,.5)}
@media (max-width:768px){
  .ops-compliance{flex-wrap:wrap;gap:8px}
  .ops-compliance-badge{font-size:9px;padding:3px 7px}
  .ops-compliance-verify{display:none}
}
.ops-timestamp::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(0,178,122,.7);box-shadow:0 0 8px rgba(0,178,122,.5)}

/* ============================================================================
   v39: HERO HYBRID — OPS FLAGSHIP ROW
   ============================================================================
   Anonymous flagship sub-row at the top of the ops panel. Sits between the
   ops-head and the first ops-row. No client name (procurement-safe), but the
   sector + duration signal carries the credibility of an enterprise reference
   without the sign-off overhead. Sky accent left bar, larger label, supporting
   detail line. Visually weightier than a standard ops-row to anchor the panel.
   v41: padding tightened 14px 14px 14px 18px → 11px 12px 10px 16px, margin
   6px 0 4px → 4px 0 2px to lift the rest of the panel above the 900px fold.
   v46: further tightened — padding 11/12/10 → 8/10/7, label 15 → 13.5,
   sub 12 → 11. Same proportions, smaller signature. The accent left bar
   keeps the flagship visually weightier than the standard rows.
   ============================================================================ */
.ops-flagship{
  position:relative;
  padding:8px 10px 7px 13px;
  margin:3px 0 1px;
  background:linear-gradient(90deg, rgba(0,160,222,.08) 0%, rgba(0,160,222,.02) 70%, transparent 100%);
  border-radius:6px;
  overflow:hidden;
}
.ops-flagship::before{
  content:"";position:absolute;top:5px;bottom:5px;left:0;width:3px;
  background:var(--di-sky);box-shadow:0 0 10px rgba(0,160,222,.45);border-radius:2px;
}
.ops-flagship-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(0,160,222,.85);
  margin-bottom:3px;display:block;
}
.ops-flagship-label{
  font-size:13.5px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:2px;
  letter-spacing:-.008em;
}
.ops-flagship-sub{
  font-size:11px;color:rgba(255,255,255,.62);line-height:1.4;
}
@media (max-width:768px){
  .ops-flagship-label{font-size:13px}
  .ops-flagship-sub{font-size:10.5px}
}

/* ============================================================================
   v40: ABOVE-THE-FOLD OVERLAY (DEV-ONLY)
   ============================================================================
   Dotted green line showing where the fold sits at different viewport heights,
   measured from the very top of the document (above the SEO banner / nav).
   Toggle in the bottom-right cycles between 900px, 1080px, mobile 667px and
   OFF. Persists across reloads via localStorage. Strip this entire block before
   shipping to production — the .fold-overlay element will need to come out of
   the body markup too. ============================================================================ */
.fold-overlay{
  position:absolute;left:0;right:0;
  pointer-events:none;z-index:9998;
  border-top:2px dashed #00FF7F;
  box-shadow:0 -1px 0 rgba(0,255,127,.25), 0 1px 0 rgba(0,255,127,.25);
  display:none;
}
.fold-overlay::before{
  content:attr(data-label);
  position:absolute;left:50%;top:-13px;transform:translateX(-50%);
  background:#00FF7F;color:#0A1628;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:5px 12px 4px;border-radius:3px;
  box-shadow:0 4px 12px rgba(0,255,127,.35);
  white-space:nowrap;
}
.fold-overlay::after{
  content:attr(data-context);
  position:absolute;right:24px;top:-26px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(0,255,127,.85);
  background:rgba(10,22,40,.85);padding:5px 10px;border-radius:3px;
  border:1px solid rgba(0,255,127,.35);
}

/* Three fold heights, each shown only when its mode is active on <body>.
   v87: replaced 667 / 900 / 1080 with real working viewports that reflect
   the typical Chrome chrome (URL bar + bookmark bar + sometimes screen-share
   banner) eating vertical space, plus a current mobile profile.
     · 740  — modern mobile (iPhone 14/15 logical viewport)
     · 800  — small laptop / Chrome with bookmark bar + screen-share banner
     · 920  — clean laptop Chrome (no bookmark bar, no banner) */
body[data-fold="740"] .fold-overlay.f740 { display:block; top:740px; }
body[data-fold="800"] .fold-overlay.f800 { display:block; top:800px; }
body[data-fold="920"] .fold-overlay.f920 { display:block; top:920px; }

/* Floating toggle button — bottom-right of the viewport */
.fold-toggle{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px 10px;
  background:rgba(10,22,40,.92);
  border:1px solid rgba(0,255,127,.45);
  border-radius:999px;
  color:#00FF7F;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(0,255,127,.1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fold-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,127,.25);
  border-color:rgba(0,255,127,.7);
}
.fold-toggle .fold-toggle-dot{
  width:8px;height:8px;border-radius:50%;
  background:#00FF7F;box-shadow:0 0 8px rgba(0,255,127,.7);
  flex-shrink:0;
}
body[data-fold="off"] .fold-toggle .fold-toggle-dot{
  background:rgba(0,255,127,.25);box-shadow:none;
}
.fold-toggle .fold-toggle-state{color:#fff;font-weight:700}
@media (max-width:600px){
  .fold-toggle{bottom:16px;right:16px;padding:9px 13px 8px;font-size:10.5px;letter-spacing:.12em}
  .fold-overlay::after{display:none}
}

/* ============================================================================
   v54: SEO OVERLAY (DEV-ONLY)
   ============================================================================
   When body[data-seo="on"], outlines on-page SEO-relevant elements with
   coloured borders + floating tag labels, and shows a stats panel in the
   top-right with aggregate counts and meta tag info. Toggle in the bottom-
   left cycles ON ↔ OFF. Persists via localStorage.

   Colour coding:
     - H1: green (should be exactly one)
     - H2: sky blue
     - H3: light blue
     - H4-H6: lighter blue gradient
     - Images with alt: amber
     - Images without alt: red (problem)
     - Internal links: cyan
     - External links: magenta (and nofollow flagged)
     - Forms/inputs: violet

   Strip this entire block and its IIFE before shipping to production.
   ============================================================================ */
body[data-seo="on"] .seo-overlay-stats,
body[data-seo="on"] .seo-toggle-state-on{display:flex}
body:not([data-seo="on"]) .seo-toggle-state-on{display:none}
body[data-seo="on"] .seo-toggle-state-off{display:none}

/* When SEO mode is on, outline elements via data attribute toggled by JS */
body[data-seo="on"] [data-seo-marked]{
  outline:2px solid var(--seo-color, #00FF7F);
  outline-offset:1px;
  position:relative;
  background:color-mix(in srgb, var(--seo-color, #00FF7F) 4%, transparent);
}
body[data-seo="on"] [data-seo-marked]::before{
  content:attr(data-seo-label);
  position:absolute;top:-22px;left:-2px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--seo-color, #00FF7F);color:#0A1628;
  padding:3px 7px 2px;border-radius:3px;
  white-space:nowrap;z-index:9990;
  pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  max-width:340px;overflow:hidden;text-overflow:ellipsis;
}
/* Specific colour assignments via CSS vars set on the data attribute groups */
body[data-seo="on"] [data-seo-marked="h1"]{--seo-color:#00FF7F}
body[data-seo="on"] [data-seo-marked="h2"]{--seo-color:#00B0FF}
body[data-seo="on"] [data-seo-marked="h3"]{--seo-color:#5BC6FF}
body[data-seo="on"] [data-seo-marked="h4"]{--seo-color:#8DD9FF}
body[data-seo="on"] [data-seo-marked="h5"]{--seo-color:#B8E6FF}
body[data-seo="on"] [data-seo-marked="h6"]{--seo-color:#D9F0FF}
body[data-seo="on"] [data-seo-marked="img"]{--seo-color:#FFC845}
body[data-seo="on"] [data-seo-marked="img-noalt"]{--seo-color:#FF5C7A}
body[data-seo="on"] [data-seo-marked="link-internal"]{--seo-color:#00E5C7}
body[data-seo="on"] [data-seo-marked="link-external"]{--seo-color:#E15CFF}
body[data-seo="on"] [data-seo-marked="link-anchor"]{--seo-color:#FF9F45}
body[data-seo="on"] [data-seo-marked="form"]{--seo-color:#9F8CFF}

/* Stats panel - sits top-right, shows aggregate SEO info */
.seo-overlay-stats{
  display:none;
  position:fixed;top:84px;right:24px;z-index:9997;
  width:300px;max-height:calc(100vh - 168px);
  background:rgba(6,16,31,.96);
  border:1px solid rgba(0,255,127,.35);
  border-radius:8px;
  padding:14px 14px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.85);
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,127,.1);
  backdrop-filter:blur(12px);
  flex-direction:column;gap:10px;
  overflow-y:auto;
}
.seo-overlay-stats-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:10px;border-bottom:1px dashed rgba(0,255,127,.25);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#00FF7F;
}
.seo-overlay-stats-head .stats-dot{
  width:7px;height:7px;border-radius:50%;background:#00FF7F;
  box-shadow:0 0 8px rgba(0,255,127,.7);flex-shrink:0;
}
.seo-overlay-stats-section{
  display:flex;flex-direction:column;gap:5px;
}
.seo-overlay-stats-section-title{
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(0,255,127,.6);
}
.seo-overlay-stats-row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:3px 0;
  font-size:10.5px;
}
.seo-overlay-stats-row .label{color:rgba(255,255,255,.6);font-weight:500}
.seo-overlay-stats-row .value{color:#fff;font-weight:700;text-align:right}
.seo-overlay-stats-row .value.good{color:#00FF7F}
.seo-overlay-stats-row .value.warn{color:#FFC845}
.seo-overlay-stats-row .value.bad{color:#FF5C7A}
.seo-overlay-stats-meta{
  display:block;
  font-size:10px;color:rgba(255,255,255,.55);
  padding:4px 6px;background:rgba(255,255,255,.03);
  border-left:2px solid rgba(0,255,127,.35);
  word-break:break-word;line-height:1.4;
  max-height:48px;overflow-y:auto;
}
.seo-overlay-stats-legend{
  display:flex;flex-wrap:wrap;gap:5px;
  padding-top:6px;border-top:1px dashed rgba(0,255,127,.18);
}
.seo-overlay-stats-legend-item{
  display:inline-flex;align-items:center;gap:4px;
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding:2px 5px;border-radius:2px;background:rgba(255,255,255,.03);
}
.seo-overlay-stats-legend-item .swatch{
  width:7px;height:7px;border-radius:2px;flex-shrink:0;
}

/* Toggle button — bottom-LEFT (fold-toggle is bottom-right) */
.seo-toggle{
  position:fixed;bottom:24px;left:24px;z-index:9999;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px 10px;
  background:rgba(10,22,40,.92);
  border:1px solid rgba(0,255,127,.45);
  border-radius:999px;
  color:#00FF7F;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(0,255,127,.1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.seo-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,127,.25);
  border-color:rgba(0,255,127,.7);
}
.seo-toggle .seo-toggle-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(0,255,127,.25);
  flex-shrink:0;
}
body[data-seo="on"] .seo-toggle .seo-toggle-dot{
  background:#00FF7F;box-shadow:0 0 8px rgba(0,255,127,.7);
}
.seo-toggle-state-on,.seo-toggle-state-off{color:#fff;font-weight:700}
@media (max-width:768px){
  /* v55: SEO toggle pushed up so the new Conv toggle can sit below it */
  .seo-toggle{bottom:200px;left:16px;padding:9px 13px 8px;font-size:10.5px;letter-spacing:.12em}
  .seo-overlay-stats{
    top:auto;bottom:260px;right:16px;left:16px;width:auto;
    max-height:45vh;
  }
}

/* ============================================================================
   v55: CONVERSION OVERLAY (DEV-ONLY)
   ============================================================================
   Different lens to the SEO overlay. Where SEO asks "what does Google see",
   conversion asks "what helps a buyer go from browsing to booked". Outlines
   conversion-relevant elements with coloured borders + floating role labels,
   plus a stats panel that scores above-fold conversion density.

   Element categories:
     - Hard CTAs (book, contact, get started): bright green
     - Soft CTAs (download, watch, learn more): sky blue
     - Trust signals (logos, badges, certifications): amber
     - Social proof (case studies, client counts, named brands): gold
     - Risk reducers ("free", "no obligation", guarantees): cyan
     - Urgency/scarcity (cohort dates, deadlines, "limited"): magenta
     - Real-business signals (phone, address, ABN): orange
     - Friction (forms, dead links, long copy): red

   Toggle in bottom-left (sits above SEO toggle when both are visible).
   Persists ON/OFF in localStorage. Strip before production.
   ============================================================================ */
body[data-conv="on"] .conv-overlay-stats,
body[data-conv="on"] .conv-toggle-state-on{display:flex}
body:not([data-conv="on"]) .conv-toggle-state-on{display:none}
body[data-conv="on"] .conv-toggle-state-off{display:none}

body[data-conv="on"] [data-conv-marked]{
  outline:2px solid var(--conv-color, #00FF7F);
  outline-offset:1px;
  position:relative;
  background:color-mix(in srgb, var(--conv-color, #00FF7F) 6%, transparent);
}
body[data-conv="on"] [data-conv-marked]::before{
  content:attr(data-conv-label);
  position:absolute;top:-22px;left:-2px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--conv-color, #00FF7F);color:#0A1628;
  padding:3px 7px 2px;border-radius:3px;
  white-space:nowrap;z-index:9991;
  pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  max-width:340px;overflow:hidden;text-overflow:ellipsis;
}
body[data-conv="on"] [data-conv-marked="hard-cta"]{--conv-color:#00FF7F}
body[data-conv="on"] [data-conv-marked="soft-cta"]{--conv-color:#00B0FF}
body[data-conv="on"] [data-conv-marked="trust"]{--conv-color:#FFC845}
body[data-conv="on"] [data-conv-marked="social-proof"]{--conv-color:#FFB000}
body[data-conv="on"] [data-conv-marked="risk-reducer"]{--conv-color:#00E5C7}
body[data-conv="on"] [data-conv-marked="urgency"]{--conv-color:#E15CFF}
body[data-conv="on"] [data-conv-marked="real-business"]{--conv-color:#FF9F45}
body[data-conv="on"] [data-conv-marked="friction"]{--conv-color:#FF5C7A}

/* Stats panel — top-right when ON. If SEO stats are also showing, this sits
   below them. The top offset accommodates both panels stacking. */
.conv-overlay-stats{
  display:none;
  position:fixed;top:84px;right:24px;z-index:9996;
  width:320px;max-height:calc(100vh - 168px);
  background:rgba(6,16,31,.96);
  border:1px solid rgba(0,229,199,.4);
  border-radius:8px;
  padding:14px 14px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.85);
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,229,199,.1);
  backdrop-filter:blur(12px);
  flex-direction:column;gap:10px;
  overflow-y:auto;
}
/* When SEO is ALSO on, push conv stats down by SEO panel's approx height */
body[data-seo="on"][data-conv="on"] .conv-overlay-stats{
  /* Shift left instead of stacking to avoid going off-screen on narrow viewports */
  right:auto;left:24px;top:84px;
}
.conv-overlay-stats-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:10px;border-bottom:1px dashed rgba(0,229,199,.3);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#00E5C7;
}
.conv-overlay-stats-head .stats-dot{
  width:7px;height:7px;border-radius:50%;background:#00E5C7;
  box-shadow:0 0 8px rgba(0,229,199,.7);flex-shrink:0;
}
.conv-overlay-stats-section{display:flex;flex-direction:column;gap:5px}
.conv-overlay-stats-section-title{
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(0,229,199,.6);
}
.conv-overlay-stats-row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:3px 0;font-size:10.5px;
}
.conv-overlay-stats-row .label{color:rgba(255,255,255,.6);font-weight:500}
.conv-overlay-stats-row .value{color:#fff;font-weight:700;text-align:right}
.conv-overlay-stats-row .value.good{color:#00FF7F}
.conv-overlay-stats-row .value.warn{color:#FFC845}
.conv-overlay-stats-row .value.bad{color:#FF5C7A}

/* Score block - the standout */
.conv-overlay-score{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;
  background:linear-gradient(90deg, rgba(0,229,199,.15) 0%, rgba(0,229,199,.04) 100%);
  border:1px solid rgba(0,229,199,.35);
  border-radius:6px;
  margin-bottom:2px;
}
.conv-overlay-score-num{
  font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;
  color:#00E5C7;letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 16px rgba(0,229,199,.4);
}
.conv-overlay-score-num.score-warn{color:#FFC845;text-shadow:0 0 16px rgba(255,200,69,.4)}
.conv-overlay-score-num.score-bad{color:#FF5C7A;text-shadow:0 0 16px rgba(255,92,122,.4)}
.conv-overlay-score-label{
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);text-align:right;line-height:1.3;flex:1;
}
.conv-overlay-score-num::after{
  content:" /100";font-size:11px;font-weight:500;color:rgba(0,229,199,.5);
  letter-spacing:.06em;
}
.conv-overlay-score-num.score-warn::after{color:rgba(255,200,69,.55)}
.conv-overlay-score-num.score-bad::after{color:rgba(255,92,122,.55)}

.conv-overlay-stats-legend{
  display:flex;flex-wrap:wrap;gap:5px;
  padding-top:6px;border-top:1px dashed rgba(0,229,199,.18);
}
.conv-overlay-stats-legend-item{
  display:inline-flex;align-items:center;gap:4px;
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding:2px 5px;border-radius:2px;background:rgba(255,255,255,.03);
}
.conv-overlay-stats-legend-item .swatch{width:7px;height:7px;border-radius:2px;flex-shrink:0}

/* Toggle button — bottom-left, sits above SEO toggle when both shown */
.conv-toggle{
  position:fixed;bottom:24px;left:24px;z-index:9998;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px 10px;
  background:rgba(10,22,40,.92);
  border:1px solid rgba(0,229,199,.5);
  border-radius:999px;
  color:#00E5C7;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(0,229,199,.1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.conv-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(0,229,199,.25);
  border-color:rgba(0,229,199,.75);
}
.conv-toggle .conv-toggle-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(0,229,199,.25);flex-shrink:0;
}
body[data-conv="on"] .conv-toggle .conv-toggle-dot{
  background:#00E5C7;box-shadow:0 0 8px rgba(0,229,199,.7);
}
.conv-toggle-state-on,.conv-toggle-state-off{color:#fff;font-weight:700}

/* When both SEO and Conv toggles are on the page, stack them vertically.
   SEO toggle stays at bottom:24px left:24px, Conv goes higher. */
body .conv-toggle{bottom:80px}

@media (max-width:768px){
  .conv-toggle{bottom:140px;left:16px;padding:9px 13px 8px;font-size:10.5px;letter-spacing:.12em}
  .conv-overlay-stats{
    top:auto;bottom:200px;right:16px;left:16px;width:auto;
    max-height:55vh;
  }
}

/* ============================================================================
   v59: φ GOLDEN RATIO OVERLAY (DEV-ONLY)
   ============================================================================
   When body[data-phi="on"], draws golden ratio reference graphics over the
   hero region so you can see whether elements sit on φ-proportioned divisions
   and whether the focal points align with the golden spiral's "eye". Plus a
   stats panel that measures actual element widths/heights against φ.

   Reference graphics drawn via absolutely-positioned divs and an SVG layer:
     - Golden rectangle outline (gold border) around the hero
     - Vertical line at 61.8% (the 1/φ vertical division)
     - Horizontal line at 61.8% (the 1/φ horizontal division)
     - Golden spiral SVG path overlaid in the hero
     - Fibonacci spacing markers (8/13/21/34/55/89/144 px) on the left edge

   Toggle sits in the bottom-left below the conv toggle.
   Strip the entire block + IIFE before shipping.
   ============================================================================ */
body[data-phi="on"] .phi-overlay,
body[data-phi="on"] .phi-overlay-stats,
body[data-phi="on"] .phi-toggle-state-on{display:flex}
body:not([data-phi="on"]) .phi-toggle-state-on{display:none}
body[data-phi="on"] .phi-toggle-state-off{display:none}

/* The overlay container — positioned to wrap the hero section */
.phi-overlay{
  display:none;
  position:absolute;pointer-events:none;z-index:9995;
  inset:0;
}

/* The hero gets relative positioning when phi is on so .phi-overlay can sit inside it */
body[data-phi="on"] .hero{position:relative}

/* Golden rectangle outline — drawn around the hero */
.phi-rect{
  position:absolute;inset:0;
  border:2px solid rgba(255,200,69,.55);
  box-shadow:inset 0 0 0 1px rgba(255,200,69,.15);
}
.phi-rect::before{
  content:"φ-RECT · 1.618 : 1";
  position:absolute;top:-22px;left:0;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  background:#FFC845;color:#0A1628;
  padding:3px 8px 2px;border-radius:3px;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}

/* Vertical and horizontal golden divisions */
.phi-vline{
  position:absolute;top:0;bottom:0;width:0;
  border-left:2px dashed rgba(255,200,69,.65);
  box-shadow:0 0 16px rgba(255,200,69,.25);
}
.phi-vline::before,.phi-vline::after{
  content:attr(data-label);
  position:absolute;left:6px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:#FFC845;background:rgba(10,22,40,.9);
  padding:2px 6px;border-radius:2px;
  border:1px solid rgba(255,200,69,.35);
  white-space:nowrap;
}
.phi-vline::before{top:18px}
.phi-vline::after{bottom:18px}
.phi-vline-618{left:61.8%}
.phi-vline-382{left:38.2%}

.phi-hline{
  position:absolute;left:0;right:0;height:0;
  border-top:2px dashed rgba(255,200,69,.45);
  box-shadow:0 0 16px rgba(255,200,69,.2);
}
.phi-hline::before{
  content:attr(data-label);
  position:absolute;right:18px;top:-12px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:#FFC845;background:rgba(10,22,40,.9);
  padding:2px 6px;border-radius:2px;
  border:1px solid rgba(255,200,69,.35);
}
.phi-hline-618{top:61.8%}
.phi-hline-382{top:38.2%}

/* Golden spiral SVG */
.phi-spiral{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.7;
}
.phi-spiral path{
  fill:none;stroke:#FFC845;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,200,69,.4));
}
.phi-spiral rect{fill:none;stroke:rgba(255,200,69,.22);stroke-width:1;stroke-dasharray:3 3}

/* Fibonacci spacing reference on the left edge - small tick marks */
.phi-fib-ruler{
  position:absolute;top:0;left:0;bottom:0;width:60px;
  pointer-events:none;
}
.phi-fib-ruler .fib-tick{
  position:absolute;left:0;right:0;
  border-top:1px solid rgba(255,200,69,.4);
}
.phi-fib-ruler .fib-tick::after{
  content:attr(data-fib);
  position:absolute;left:4px;top:-6px;
  font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:600;
  color:rgba(255,200,69,.65);letter-spacing:.14em;
  background:rgba(10,22,40,.7);padding:1px 4px;border-radius:2px;
}

/* φ stats panel — sits below the other panels (or top-left if conv/seo are on too) */
.phi-overlay-stats{
  display:none;
  position:fixed;top:84px;right:24px;z-index:9994;
  width:280px;max-height:calc(100vh - 200px);
  background:rgba(6,16,31,.96);
  border:1px solid rgba(255,200,69,.45);
  border-radius:8px;
  padding:14px 14px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.85);
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,200,69,.1);
  backdrop-filter:blur(12px);
  flex-direction:column;gap:10px;
  overflow-y:auto;
}
/* Reposition when SEO or Conv stats are also showing */
body[data-seo="on"][data-phi="on"] .phi-overlay-stats{
  top:auto;bottom:24px;
}
body[data-conv="on"][data-phi="on"] .phi-overlay-stats{
  top:auto;bottom:24px;left:24px;right:auto;
}

.phi-overlay-stats-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:10px;border-bottom:1px dashed rgba(255,200,69,.3);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#FFC845;
}
.phi-overlay-stats-head .stats-dot{
  width:7px;height:7px;border-radius:50%;background:#FFC845;
  box-shadow:0 0 8px rgba(255,200,69,.7);flex-shrink:0;
}
.phi-overlay-stats-section{display:flex;flex-direction:column;gap:5px}
.phi-overlay-stats-section-title{
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,200,69,.65);
}
.phi-overlay-stats-row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:3px 0;font-size:10.5px;
}
.phi-overlay-stats-row .label{color:rgba(255,255,255,.6);font-weight:500}
.phi-overlay-stats-row .value{color:#fff;font-weight:700;text-align:right}
.phi-overlay-stats-row .value.good{color:#00FF7F}
.phi-overlay-stats-row .value.warn{color:#FFC845}
.phi-overlay-stats-row .value.bad{color:#FF5C7A}

.phi-overlay-formula{
  padding:8px 10px;
  background:rgba(255,200,69,.06);
  border:1px solid rgba(255,200,69,.22);
  border-radius:5px;
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:13px;color:#FFC845;
  letter-spacing:.02em;line-height:1.4;
}

/* φ Toggle button — bottom-left below the conv toggle */
.phi-toggle{
  position:fixed;bottom:24px;left:24px;z-index:9997;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px 10px;
  background:rgba(10,22,40,.92);
  border:1px solid rgba(255,200,69,.55);
  border-radius:999px;
  color:#FFC845;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,200,69,.1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.phi-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,200,69,.3);
  border-color:rgba(255,200,69,.85);
}
.phi-toggle .phi-toggle-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,200,69,.3);flex-shrink:0;
}
body[data-phi="on"] .phi-toggle .phi-toggle-dot{
  background:#FFC845;box-shadow:0 0 8px rgba(255,200,69,.7);
}
.phi-toggle-state-on,.phi-toggle-state-off{color:#fff;font-weight:700}

/* Stacking order when multiple toggles are on the page:
   - fold-toggle (right): bottom:24px right:24px
   - conv-toggle (left bottom): bottom:80px left:24px
   - seo-toggle (left middle): bottom:24px left:24px
   - phi-toggle (left top): bottom:136px left:24px - sits above conv */
body .phi-toggle{bottom:136px}

@media (max-width:768px){
  /* Mobile stacking: phi toggle goes furthest up to avoid colliding with
     the others. Order from bottom up: fold | seo | conv | phi */
  .phi-toggle{bottom:260px;left:16px;padding:9px 13px 8px;font-size:10.5px;letter-spacing:.12em}
  .phi-overlay-stats{
    top:auto;bottom:320px;right:16px;left:16px;width:auto;
    max-height:45vh;
  }
}

/* ============================================================================
   v62: EXIT-PATH PROBABILITY OVERLAY (DEV-ONLY)
   ============================================================================
   Different lens to the conversion overlay. Where conv asks "what's HERE that
   converts", this asks "what will the buyer DO NEXT and where will they land".
   For each clickable element, computes a modelled probability score based on:
     - Position (above-fold > below-fold; F-pattern weighting)
     - Visual weight (button > text link; large > small)
     - Copy intent (action verbs > navigational text)
     - CTA priority (primary > secondary > tertiary)
   Then categorises the destination:
     - FORWARD (green) → booking, contact, assessment, conversion paths
     - LATERAL (amber) → services pages, about, internal navigation
     - LOOP (sky blue) → anchor links scrolling within this page
     - EXIT (red) → external links, social, off-site
   The scores are MODELLED ESTIMATES based on UX heuristics, NOT real CTR data.
   Labelled accordingly in the panel so the user understands the limit.
   Strip block + IIFE before shipping production.
   ============================================================================ */
body[data-exit="on"] .exit-overlay-stats,
body[data-exit="on"] .exit-toggle-state-on{display:flex}
body:not([data-exit="on"]) .exit-toggle-state-on{display:none}
body[data-exit="on"] .exit-toggle-state-off{display:none}

/* Probability dots — sized by score, positioned over each clickable element */
.exit-prob-dot{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:9993;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  color:#0A1628;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  border:2px solid rgba(10,22,40,.6);
  transition:transform .2s var(--ease);
}
.exit-prob-dot[data-cat="forward"]{background:#00FF7F;box-shadow:0 4px 12px rgba(0,255,127,.5)}
.exit-prob-dot[data-cat="lateral"]{background:#FFC845;box-shadow:0 4px 12px rgba(255,200,69,.5)}
.exit-prob-dot[data-cat="loop"]{background:#00B0FF;box-shadow:0 4px 12px rgba(0,176,255,.5);color:#0A1628}
.exit-prob-dot[data-cat="exit"]{background:#FF5C7A;box-shadow:0 4px 12px rgba(255,92,122,.5)}

/* Highlight ring around the element matching the dot's category */
body[data-exit="on"] [data-exit-marked]{
  outline:2px solid var(--exit-color, #00FF7F);
  outline-offset:2px;
  background:color-mix(in srgb, var(--exit-color, #00FF7F) 4%, transparent);
}
body[data-exit="on"] [data-exit-marked="forward"]{--exit-color:#00FF7F}
body[data-exit="on"] [data-exit-marked="lateral"]{--exit-color:#FFC845}
body[data-exit="on"] [data-exit-marked="loop"]{--exit-color:#00B0FF}
body[data-exit="on"] [data-exit-marked="exit"]{--exit-color:#FF5C7A}

/* Stats panel — top-right when ON. Different default position so it doesn't
   clash with the other panels — sits at top-right by default; if conv or seo
   are also on, it shifts to top-center. */
.exit-overlay-stats{
  display:none;
  position:fixed;top:84px;right:24px;z-index:9994;
  width:340px;max-height:calc(100vh - 168px);
  background:rgba(6,16,31,.96);
  border:1px solid rgba(0,255,127,.4);
  border-radius:8px;
  padding:14px 14px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.85);
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,127,.1);
  backdrop-filter:blur(12px);
  flex-direction:column;gap:10px;
  overflow-y:auto;
}
body[data-seo="on"][data-exit="on"] .exit-overlay-stats,
body[data-conv="on"][data-exit="on"] .exit-overlay-stats{
  right:auto;left:50%;transform:translateX(-50%);
}
body[data-phi="on"][data-exit="on"] .exit-overlay-stats{
  right:auto;left:50%;transform:translateX(-50%);
}

.exit-overlay-stats-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:13px;border-bottom:1px dashed rgba(0,255,127,.25);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#00FF7F;
}
.exit-overlay-stats-head .stats-dot{
  width:8px;height:8px;border-radius:50%;background:#00FF7F;
  box-shadow:0 0 8px rgba(0,255,127,.7);flex-shrink:0;
}
.exit-overlay-stats-note{
  font-size:9.5px;font-weight:500;letter-spacing:.1em;
  color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.03);
  padding:6px 8px;border-radius:3px;
  border-left:2px solid rgba(0,255,127,.4);
  line-height:1.5;text-transform:none;
}

/* Distribution summary - the pie of where buyers go */
.exit-distribution{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.exit-distribution-bar{
  height:8px;width:100%;background:rgba(255,255,255,.06);
  border-radius:4px;overflow:hidden;
  display:flex;
}
.exit-distribution-seg{height:100%;transition:width .3s var(--ease)}
.exit-distribution-seg.forward{background:#00FF7F}
.exit-distribution-seg.lateral{background:#FFC845}
.exit-distribution-seg.loop{background:#00B0FF}
.exit-distribution-seg.exit{background:#FF5C7A}
.exit-distribution-key{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;
  font-size:9.5px;
}
.exit-distribution-key-item{display:inline-flex;align-items:center;gap:5px}
.exit-distribution-key-item .swatch{width:7px;height:7px;border-radius:50%}
.exit-distribution-key-item.forward .swatch{background:#00FF7F}
.exit-distribution-key-item.lateral .swatch{background:#FFC845}
.exit-distribution-key-item.loop .swatch{background:#00B0FF}
.exit-distribution-key-item.exit .swatch{background:#FF5C7A}
.exit-distribution-key-item .pct{color:#fff;font-weight:700}

/* Top destinations ranked list */
.exit-rankings{display:flex;flex-direction:column;gap:5px}
.exit-rank-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;
  background:rgba(255,255,255,.03);
  border-radius:4px;
  border-left:3px solid;
  font-size:10.5px;
}
.exit-rank-row[data-cat="forward"]{border-left-color:#00FF7F}
.exit-rank-row[data-cat="lateral"]{border-left-color:#FFC845}
.exit-rank-row[data-cat="loop"]{border-left-color:#00B0FF}
.exit-rank-row[data-cat="exit"]{border-left-color:#FF5C7A}
.exit-rank-pct{
  font-weight:700;color:#fff;min-width:36px;text-align:right;
  font-size:11.5px;letter-spacing:-.01em;
}
.exit-rank-label{flex:1;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exit-rank-dest{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
}

.exit-overlay-section{display:flex;flex-direction:column;gap:5px}
.exit-overlay-section-title{
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(0,255,127,.6);
}
.exit-overlay-stats-row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:3px 0;font-size:10.5px;
}
.exit-overlay-stats-row .label{color:rgba(255,255,255,.6);font-weight:500}
.exit-overlay-stats-row .value{color:#fff;font-weight:700;text-align:right}
.exit-overlay-stats-row .value.good{color:#00FF7F}
.exit-overlay-stats-row .value.warn{color:#FFC845}
.exit-overlay-stats-row .value.bad{color:#FF5C7A}

/* Exit toggle — bottom-left, sits above the phi toggle */
.exit-toggle{
  position:fixed;bottom:24px;left:24px;z-index:9996;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px 10px;
  background:rgba(10,22,40,.92);
  border:1px solid rgba(0,255,127,.5);
  border-radius:999px;
  color:#00FF7F;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(0,255,127,.1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.exit-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,127,.3);
  border-color:rgba(0,255,127,.8);
}
.exit-toggle .exit-toggle-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(0,255,127,.3);flex-shrink:0;
}
body[data-exit="on"] .exit-toggle .exit-toggle-dot{
  background:#00FF7F;box-shadow:0 0 8px rgba(0,255,127,.7);
}
.exit-toggle-state-on,.exit-toggle-state-off{color:#fff;font-weight:700}

/* Stacking order with the other toggles - exit sits highest (5th tier).
   Stacking from bottom up: SEO (24) → Conv (80) → φ (136) → Exit (192) */
body .exit-toggle{bottom:192px}

@media (max-width:768px){
  .exit-toggle{bottom:320px;left:16px;padding:9px 13px 8px;font-size:10.5px;letter-spacing:.12em}
  .exit-overlay-stats{
    top:auto;bottom:380px;right:16px;left:16px;width:auto;
    max-height:38vh;
  }
}

/* ============================================================================
   v68: VISUAL BALANCE OVERLAY (DEV-ONLY)
   ============================================================================
   Where SEO asks "is this discoverable" and Exit asks "where will they click",
   Balance asks "where is the eye actually going". For each meaningful element
   the IIFE computes a heat score (0-100) from six dimensions:
     1. Size weight  — area on screen (log scale)
     2. Contrast     — luminance delta against parent background
     3. Saturation   — colour chroma (warm + saturated > cool + grey)
     4. Type weight  — font-weight, italic, all-caps, serif emphasis
     5. Position     — above-fold + F-pattern (top-left bias)
     6. Decoration   — borders, shadows, glows, distinctive backgrounds

   Heat colour scale (cool → hot):
     0-19   blue    — passes the eye
     20-39  cyan    — soft attention
     40-59  green   — moderate pull
     60-79  yellow  — strong pull
     80-89  orange  — primary attention
     90-100 red     — dominant focal point

   The stats panel reports the top 10 hottest elements (eye-flow path), the
   overall balance score (how evenly distributed across viewport quadrants),
   and quadrant heat sums so we can see if the design is top-left heavy,
   bottom-right empty, etc. Strip this block before shipping. */
body[data-balance="on"] .balance-overlay-stats,
body[data-balance="on"] .balance-toggle-state-on{display:flex}
body:not([data-balance="on"]) .balance-toggle-state-on{display:none}
body[data-balance="on"] .balance-toggle-state-off{display:none}

/* Each marked element gets an outline + tinted bg in the heat colour, plus a
   floating numeric badge with the score. Pointer events stay on the underlying
   element. */
body[data-balance="on"] [data-balance-marked]{
  outline:2px solid var(--bal-color, #00B0FF);
  outline-offset:1px;
  position:relative;
  background:color-mix(in srgb, var(--bal-color, #00B0FF) 8%, transparent) !important;
  transition:none;
}
body[data-balance="on"] [data-balance-marked]::after{
  content:attr(data-balance-score);
  position:absolute;top:-12px;right:-8px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.04em;
  background:var(--bal-color, #00B0FF);color:#0A1628;
  padding:2px 6px 1px;border-radius:10px;
  white-space:nowrap;z-index:9990;
  pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.2);
  min-width:22px;text-align:center;
}
/* Heat ramp via tier attribute - cool to hot */
body[data-balance="on"] [data-balance-tier="1"]{--bal-color:#1E5BCC}   /* 0-19  cold blue */
body[data-balance="on"] [data-balance-tier="2"]{--bal-color:#00B0FF}   /* 20-39 cyan */
body[data-balance="on"] [data-balance-tier="3"]{--bal-color:#00E07F}   /* 40-59 green */
body[data-balance="on"] [data-balance-tier="4"]{--bal-color:#FFD13D}   /* 60-79 yellow */
body[data-balance="on"] [data-balance-tier="5"]{--bal-color:#FF8A24}   /* 80-89 orange */
body[data-balance="on"] [data-balance-tier="6"]{--bal-color:#FF3D5C}   /* 90-100 red hot */

/* Top-rank badges get extra emphasis */
body[data-balance="on"] [data-balance-rank="1"]::after,
body[data-balance="on"] [data-balance-rank="2"]::after,
body[data-balance="on"] [data-balance-rank="3"]::after{
  font-size:11px;padding:3px 7px 2px;
  box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.25), 0 0 14px var(--bal-color);
}
body[data-balance="on"] [data-balance-rank="1"]{outline-width:3px}

/* Quadrant grid - shows the four viewport zones to visualise balance */
.balance-quadrant-grid{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:9985;pointer-events:none;
}
body[data-balance="on"] .balance-quadrant-grid{display:block}
.balance-quadrant-grid::before,
.balance-quadrant-grid::after{
  content:"";position:absolute;
  background:rgba(255,61,92,.18);
}
.balance-quadrant-grid::before{
  /* vertical midline */
  left:50%;top:0;bottom:0;width:1px;
}
.balance-quadrant-grid::after{
  /* horizontal midline */
  top:50%;left:0;right:0;height:1px;
}

/* Stats panel - sits top-right, shows balance metrics + eye-flow path */
.balance-overlay-stats{
  display:none;
  position:fixed;top:84px;right:24px;z-index:9997;
  width:320px;max-height:calc(100vh - 168px);
  background:rgba(6,16,31,.96);
  border:1px solid rgba(255,138,36,.45);
  border-radius:8px;
  padding:14px 14px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.85);
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,138,36,.15);
  backdrop-filter:blur(12px);
  flex-direction:column;gap:12px;
  overflow-y:auto;
}
/* Stack the balance stats panel BELOW any other open panels */
body[data-seo="on"][data-balance="on"] .balance-overlay-stats,
body[data-conv="on"][data-balance="on"] .balance-overlay-stats,
body[data-phi="on"][data-balance="on"] .balance-overlay-stats,
body[data-exit="on"][data-balance="on"] .balance-overlay-stats{
  top:auto;bottom:24px;max-height:48vh;
}
.balance-overlay-stats-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:10px;border-bottom:1px dashed rgba(255,138,36,.3);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#FF8A24;
}
.balance-overlay-stats-head .stats-dot{
  width:8px;height:8px;border-radius:50%;
  background:#FF8A24;box-shadow:0 0 10px rgba(255,138,36,.8);
}
/* Score readout - the big balance number up top */
.balance-overlay-score-block{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 10px;
  background:rgba(255,138,36,.06);
  border:1px solid rgba(255,138,36,.18);
  border-radius:5px;
}
.balance-overlay-score-num{
  font-size:28px;font-weight:700;color:#FF8A24;
  letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 14px rgba(255,138,36,.45);
}
.balance-overlay-score-num.balance-good{color:#00E07F;text-shadow:0 0 14px rgba(0,224,127,.45)}
.balance-overlay-score-num.balance-warn{color:#FFD13D;text-shadow:0 0 14px rgba(255,209,61,.45)}
.balance-overlay-score-num.balance-bad{color:#FF3D5C;text-shadow:0 0 14px rgba(255,61,92,.45)}
.balance-overlay-score-label{
  font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  line-height:1.3;
}
/* Quadrant heat map mini-grid */
.balance-overlay-quad{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  padding:6px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:5px;
}
.balance-overlay-quad-cell{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:8px 4px;border-radius:3px;
  background:rgba(255,255,255,.04);
  min-height:42px;
}
.balance-overlay-quad-cell-label{
  font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:2px;
}
.balance-overlay-quad-cell-val{
  font-size:13px;font-weight:700;color:#fff;
  font-family:'JetBrains Mono',monospace;
}
/* Heat-tinted cell backgrounds */
.balance-overlay-quad-cell[data-heat="1"]{background:rgba(30,91,204,.18)}
.balance-overlay-quad-cell[data-heat="2"]{background:rgba(0,176,255,.18)}
.balance-overlay-quad-cell[data-heat="3"]{background:rgba(0,224,127,.18)}
.balance-overlay-quad-cell[data-heat="4"]{background:rgba(255,209,61,.22)}
.balance-overlay-quad-cell[data-heat="5"]{background:rgba(255,138,36,.28)}
.balance-overlay-quad-cell[data-heat="6"]{background:rgba(255,61,92,.32)}

/* Section titles & rows in stats panel */
.balance-overlay-section{display:flex;flex-direction:column;gap:5px}
.balance-overlay-section-title{
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#FF8A24;
  display:flex;align-items:center;gap:8px;margin-top:2px;
}
.balance-overlay-section-title::before{
  content:"";flex-shrink:0;width:12px;height:1px;background:#FF8A24;opacity:.5;
}
.balance-overlay-stats-row{
  display:flex;justify-content:space-between;gap:10px;
  font-size:10.5px;line-height:1.3;
  padding:3px 0;
  border-bottom:1px dotted rgba(255,255,255,.06);
}
.balance-overlay-stats-row:last-child{border-bottom:0}
.balance-overlay-stats-row .label{color:rgba(255,255,255,.6);font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balance-overlay-stats-row .value{color:#fff;font-weight:700;text-align:right;flex-shrink:0}
.balance-overlay-stats-row .value.good{color:#00E07F}
.balance-overlay-stats-row .value.warn{color:#FFD13D}
.balance-overlay-stats-row .value.bad{color:#FF3D5C}
/* Eye-flow path entries get a rank chip */
.balance-overlay-path-row{
  display:grid;grid-template-columns:22px 1fr 36px;gap:8px;align-items:center;
  padding:4px 0;
  border-bottom:1px dotted rgba(255,255,255,.06);
  font-size:10px;
}
.balance-overlay-path-row:last-child{border-bottom:0}
.balance-overlay-path-rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:4px;
  font-size:10px;font-weight:700;color:#0A1628;
  background:var(--bal-color, #00B0FF);
}
.balance-overlay-path-label{
  color:rgba(255,255,255,.85);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:10px;
}
.balance-overlay-path-score{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  color:#fff;text-align:right;
}

/* Toggle button - same family as the other dev overlay toggles */
.balance-toggle{
  position:fixed;bottom:248px;left:24px;z-index:9999;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px 10px;
  background:rgba(10,22,40,.92);
  border:1px solid rgba(255,138,36,.5);
  border-radius:999px;
  color:#FF8A24;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,138,36,.12);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.balance-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,138,36,.3);
  border-color:rgba(255,138,36,.75);
}
.balance-toggle .balance-toggle-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,138,36,.25);
  flex-shrink:0;
}
body[data-balance="on"] .balance-toggle .balance-toggle-dot{
  background:#FF8A24;box-shadow:0 0 10px rgba(255,138,36,.7);
}
.balance-toggle-state-on,.balance-toggle-state-off{color:#fff;font-weight:700}

/* Stacking: bottom-left column gets a new entry at bottom:248px (above Exit at 192).
   Order from bottom up: SEO(24) → Conv(80) → φ(136) → Exit(192) → Balance(248) */

@media (max-width:768px){
  .balance-toggle{bottom:380px;left:16px;padding:9px 13px 8px;font-size:10.5px;letter-spacing:.12em}
  .balance-overlay-stats{
    top:auto;bottom:440px;right:16px;left:16px;width:auto;
    max-height:38vh;
  }
}

/* ============================================================================
   di-main-scoped.css — MEGA INNER v1.6 COMPONENT EXTENSION
   ============================================================================
   Version:           v1.0 — 28/05/2026 — TK
   Status:            [READY FOR DEPLOY]
   Source:            di-mega-inner-v1.6.html (canonical reference stylesheet)
   Target:            HubSpot Design Manager → design-industries/css/di-main-scoped.css
   Deployment:        APPEND to the END of di-main-scoped.css. No existing
                      rules modified. Adds 12 new component blocks plus
                      one spacing-token alias block.
   Owner:             Tejas Kamble (Head of Marketing — self-deploy)

   ----------------------------------------------------------------------------
   PURPOSE
   ----------------------------------------------------------------------------
   The deployed di-main-scoped.css covers homepage components only (.hero,
   .pillar, .foundry-card, .stats, .proof, .trust-substack, etc). The
   AI Fast Start hub page (/ai-fast-start) requires the inner-page component
   library from Mega Inner v1.6 — pricing matrix, comparison table, FAQ
   accordion, phase ladder, taxonomy tiles, testimonial grid, etc.

   This file adds 12 new component blocks scoped under their existing class
   names. Zero conflict with any deployed rule.

   ----------------------------------------------------------------------------
   COMPONENTS ADDED (12 blocks + 1 alias block = ~36KB raw CSS)
   ----------------------------------------------------------------------------
     §0.  Spacing token aliases     (--s-xxs through --s-3xl mapped to --space-*)
     §13. Pricing matrix            .pricing-grid + .price-card + variants
     §15. Methodology timeline      .timeline + .timeline-step
     §16. Comparison table          .compare-wrap + .compare-table
     §17. Use case matrix           .usecase-grid + .usecase-row
     §18. FAQ accordion             .faq-list + .faq-item
     §19. Proof quote               .proof-quote (single flagship testimonial)
     §23. Closing CTA band          .cta-band variants
     §R.  Stats band feature        .stats-band--feature + .stats-grid--2x2
     §S.  Phase ladder              .phase-ladder + .phase + states
     §T.  Services taxonomy         .taxonomy + .taxonomy-tile
     §U.  Newsletter band           .newsletter-band
     §V.  Testimonial grid          .testimonial-grid + .testimonial-card
     §AE. Diamond bullets           .bullet-list + .bullet-row + variants

   ----------------------------------------------------------------------------
   DEPENDENCIES (already deployed — no action required)
   ----------------------------------------------------------------------------
   All --di-* colour tokens         ✓ deployed
   All --space-* spacing tokens     ✓ deployed
   --max, --radius, --ease          ✓ deployed
   Noto Sans + JetBrains Mono +
     Fraunces fonts (site header)   ✓ deployed
   Stripe gradient defs
     (#flowGrad1-7, site footer)    ✓ deployed
   --max-narrow                     ✗ NOT deployed — alias added in §0 below

   ----------------------------------------------------------------------------
   ROLLBACK
   ----------------------------------------------------------------------------
   Remove all content below the line "===== MEGA INNER EXTENSION START =====".
   No other changes needed. Existing pages unaffected.
   ============================================================================ */


/* ============================================================================
   ===== MEGA INNER EXTENSION START =====
   ============================================================================ */

:root{
  /* §0 — Spacing token aliases.
     Mega Inner v1.6 components reference --s-xxs through --s-3xl.
     The deployed stylesheet uses --space-5 through --space-144.
     Both are Fibonacci-aligned and identical in value — this block
     creates the alias so Mega Inner CSS doesn't need rewriting. */
  --s-xxs: 5px;    /* alias for --space-5 — hairline */
  --s-xs:  8px;    /* alias for --space-8 — tight */
  --s-sm:  13px;   /* alias for --space-13 — compact */
  --s-md:  21px;   /* alias for --space-21 — standard */
  --s-lg:  34px;   /* alias for --space-34 — section */
  --s-xl:  55px;   /* alias for --space-55 — major */
  --s-2xl: 89px;   /* alias for --space-89 — hero */
  --s-3xl: 144px;  /* alias for --space-144 — break */

  /* Narrower max-width for prose-heavy components (FAQ, proof quote).
     760px ≈ 470px golden-ratio extension of the 1200px container. */
  --max-narrow: 880px;
}


/* ============================================================================
   §13 — PRICING MATRIX (inner-page addition, built on V103 detail-card base)
   ========================================================================= */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
}
.price-card{
  position:relative;
  background:linear-gradient(180deg, rgba(20,36,60,.96) 0%, rgba(14,26,46,.96) 100%);
  border:1px solid rgba(30,58,95,.7);
  border-radius:8px;
  padding:34px 21px;
  display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -16px rgba(0,0,0,.5);
  transition:all .3s var(--ease);
  overflow:hidden;
}
.price-card::before{
  content:"";position:absolute;top:0;left:0;
  width:32px;height:3px;
  background:var(--di-sky);
  transition:width .35s var(--ease);
  z-index:3;
}
/* v1.3: carbon-weave + radial sky glow ::after — opacity values boosted
   (.045 → .07, .18 → .25) to match V103 live render visibility. */
.price-card::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,160,222,.14), transparent 60%),
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.09) 0,
      rgba(255,255,255,.09) 2px,
      transparent 2px,
      transparent 5px),
    repeating-linear-gradient(160deg,
      rgba(0,0,0,.28) 0,
      rgba(0,0,0,.28) 2px,
      transparent 2px,
      transparent 5px);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.price-card:hover{
  border-color:rgba(0,160,222,.4);
  transform:translateY(-3px);
  box-shadow:0 24px 48px -24px rgba(0,160,222,.3);
}
.price-card:hover::before{width:100%}
.price-card:hover::after{opacity:1}
.price-card--featured{
  background:linear-gradient(180deg, rgba(0,160,222,.08), rgba(20,36,60,.96) 60%);
  border-color:rgba(0,160,222,.45);
  box-shadow:0 24px 48px -24px rgba(0,160,222,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.price-card--featured::before{width:100%}
.price-card--featured::after{opacity:.55} /* faint static weave on featured even before hover */
.price-card--featured:hover::after{opacity:1}
/* v1.2: "MOST POPULAR" badge moved from ::after to .price-badge child element
   so the pseudo is free for the carbon-weave overlay above. */
.price-card .price-badge{
  position:absolute;top:13px;right:13px;
  background:var(--di-sky);color:var(--di-text-on-sky);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:700;letter-spacing:.22em;
  padding:4px 8px;
  z-index:3;
}
.price-card .track-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--di-mist);
  margin-bottom:13px;
  display:flex;align-items:center;gap:10px;
  position:relative;z-index:2;
}
.price-card .track-eyebrow .dot{
  width:5px;height:5px;background:var(--di-sky);border-radius:50%;
  animation:pulse-soft 2.5s var(--ease) infinite;
}
.price-card h3{
  font-size:22px;color:#fff;
  margin-bottom:21px;letter-spacing:-.012em;line-height:1.2;
  position:relative;z-index:2;
}
.price-card .price-was{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;color:rgba(255,255,255,.4);
  text-decoration:line-through;
  margin-bottom:5px;min-height:18px;
  position:relative;z-index:2;
}
.price-card .price-now{
  font-family:'JetBrains Mono',monospace;
  font-size:28px;color:#fff;line-height:1;letter-spacing:-.01em;font-weight:600;
  position:relative;z-index:2;
}
.price-card .price-now .gst{font-size:13px;color:rgba(255,255,255,.55);font-weight:400;margin-left:5px}
.price-card .price-save{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--di-success);
  background:rgba(0,178,122,.12);
  padding:5px 8px;
  margin:13px 0;
  position:relative;z-index:2;
}
.price-card .price-meta{
  margin-top:13px;padding-top:13px;
  border-top:1px dashed rgba(255,255,255,.12);
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  position:relative;z-index:2;
}
.price-card .price-meta .row{
  display:flex;justify-content:space-between;padding:5px 0;
  font-size:11.5px;letter-spacing:.08em;
}
.price-card .price-meta .row .k{color:rgba(255,255,255,.45);text-transform:uppercase}
.price-card .price-meta .row .v{color:#fff;font-weight:500}
.price-card .price-cta{margin-top:auto;padding-top:21px;position:relative;z-index:2}
@media (max-width:1000px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pricing-grid{grid-template-columns:1fr}}

   §15 — METHODOLOGY TIMELINE (10-step grid)
   ========================================================================= */
.timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--s-md);
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;top:21px;left:5%;right:5%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 8%,rgba(255,255,255,.12) 92%,transparent 100%);
  z-index:0;
}
.timeline-step{
  position:relative;text-align:center;
  padding:0 var(--s-xs);
  z-index:1;
}
.timeline-step .num{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  margin:0 auto var(--s-sm) auto;
  background:var(--di-midnight);
  border:1px solid rgba(0,160,222,.4);
  border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:600;color:var(--di-sky);
  transition:all .3s var(--ease);
}
.timeline-step:hover .num{
  background:rgba(0,160,222,.12);
  border-color:var(--di-sky);
  transform:rotate(-4deg) scale(1.05);
}
.timeline-step h4{font-size:13px;color:#fff;margin-bottom:5px;line-height:1.3}
.timeline-step p{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5;margin:0}
@media (max-width:900px){
  .timeline{grid-template-columns:repeat(2,1fr)}
  .timeline::before{display:none}
}

/* ============================================================================
   §16 — COMPARISON TABLE (DI vs alternatives)
   ========================================================================= */
.compare-wrap{
  background:linear-gradient(180deg, rgba(20,36,60,.96) 0%, rgba(14,26,46,.96) 100%);
  border:1px solid rgba(30,58,95,.7);
  border-radius:8px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -16px rgba(0,0,0,.5);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.compare-table th,.compare-table td{
  padding:var(--s-md);
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.compare-table thead th{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--di-mist);
  background:var(--di-midnight-2);
  border-bottom:1px solid rgba(0,160,222,.3);
}
.compare-table thead th.featured{
  background:rgba(0,160,222,.08);color:#fff;
  border-bottom:1px solid var(--di-sky);
}
.compare-table tbody tr{transition:background .2s var(--ease)}
.compare-table tbody tr:hover{background:rgba(255,255,255,.02)}
.compare-table .cell-row{font-weight:600;color:#fff}
.compare-table .cell-yes::before{content:"✓ ";color:var(--di-success);font-weight:700}
.compare-table .cell-no::before{content:"— ";color:rgba(255,255,255,.3)}
.compare-table .cell-feat{
  background:rgba(0,160,222,.04);
  color:#fff;font-weight:500;
}
.compare-table tbody td{color:rgba(255,255,255,.7)}
@media (max-width:760px){
  .compare-table{font-size:13px}
  .compare-table th,.compare-table td{padding:var(--s-sm)}
}

   §17 — USE CASE MATRIX (department / use case / outcome)
   ========================================================================= */
.usecase-grid{
  background:linear-gradient(180deg, rgba(20,36,60,.96) 0%, rgba(14,26,46,.96) 100%);
  border:1px solid rgba(30,58,95,.7);
  border-radius:8px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -16px rgba(0,0,0,.5);
}
.usecase-row{
  display:grid;
  grid-template-columns:200px 1.618fr 2fr;
  gap:0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.usecase-row:last-child{border-bottom:0}
.usecase-row > div{
  padding:var(--s-md);
  border-right:1px solid rgba(255,255,255,.06);
}
.usecase-row > div:last-child{border-right:0}
.usecase-dept{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--di-mist);
  background:var(--di-midnight-2);
  display:flex;align-items:center;
}
.usecase-case{color:#fff;font-weight:500;font-size:14.5px;display:flex;align-items:center;line-height:1.3}
.usecase-outcome{color:rgba(255,255,255,.7);font-size:13.5px;line-height:1.55;display:flex;align-items:center}
@media (max-width:900px){
  .usecase-row{grid-template-columns:1fr}
  .usecase-row > div{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .usecase-row > div:last-child{border-bottom:0}
}


/* ============================================================================
   §18 — FAQ ACCORDION (CSS-only, V103-aligned to detail-card aesthetic)
   ========================================================================= */
.faq-list{
  max-width:var(--max-narrow);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(20,36,60,.96) 0%, rgba(14,26,46,.96) 100%);
  border:1px solid rgba(30,58,95,.7);
  border-radius:8px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -16px rgba(0,0,0,.5);
}
.faq-item{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.faq-item:last-child{border-bottom:0}
.faq-item details{padding:0}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-md) var(--s-lg);
  font-size:16px;font-weight:600;color:#fff;
  cursor:pointer;
  list-style:none;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.faq-item summary:hover{background:rgba(0,160,222,.04)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";
  display:inline-block;
  width:10px;height:10px;
  border-right:2px solid var(--di-sky);
  border-bottom:2px solid var(--di-sky);
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
  margin-left:var(--s-md);
  flex-shrink:0;
}
.faq-item details[open] summary{color:var(--di-sky)}
.faq-item details[open] summary::after{transform:rotate(-135deg);margin-top:5px}
.faq-item .faq-body{
  padding:0 var(--s-lg) var(--s-md) var(--s-lg);
  color:rgba(255,255,255,.7);
  font-size:15px;line-height:1.65;
  max-width:760px;
}


   §19 — PROOF QUOTE (single testimonial card)
   ========================================================================= */
.proof-quote{
  background:linear-gradient(180deg, rgba(20,36,60,.96) 0%, rgba(14,26,46,.96) 100%);
  border:1px solid rgba(30,58,95,.7);
  border-radius:8px;
  padding:var(--s-xl);
  position:relative;
  max-width:920px;
  margin:0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -16px rgba(0,0,0,.5);
  overflow:hidden;
}
.proof-quote::before{
  content:"";position:absolute;top:0;left:0;
  width:48px;height:3px;
  background:var(--di-gold);
  box-shadow:0 0 8px rgba(255,200,69,.5);
}
.proof-quote blockquote{
  margin:0 0 var(--s-md) 0;
  font-family:'Fraunces',Georgia,serif;
  font-size:24px;font-weight:400;font-style:italic;
  line-height:1.45;color:#fff;
  letter-spacing:-.01em;
}
.proof-quote cite{
  display:flex;align-items:center;gap:var(--s-sm);
  font-style:normal;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  flex-wrap:wrap;
}
.proof-quote cite .who{color:#fff;font-weight:600}
.proof-quote cite .sep{color:rgba(255,255,255,.25)}
.proof-quote cite .role{color:var(--di-mist)}


/* ============================================================================
   §23 — CLOSING CTA BAND (V103 booking pattern — gradient card + sky border)
   ========================================================================= */
.cta-band{
  position:relative;
  padding:var(--s-2xl) 0;
  background:linear-gradient(135deg,var(--di-midnight) 0%,var(--di-midnight-2) 100%);
  overflow:hidden;
}
.cta-band-grid{
  display:grid;
  grid-template-columns:1.618fr 1fr;
  gap:var(--s-xl);
  align-items:center;
  position:relative;z-index:2;
}
.cta-band h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:var(--s-md);color:#fff;letter-spacing:-.02em}
.cta-band .lede{font-size:18px;max-width:560px;color:rgba(255,255,255,.7)}
.cta-band-card{
  position:relative;
  background:linear-gradient(135deg, rgba(0,160,222,.18) 0%, rgba(0,160,222,.04) 100%);
  border:1px solid rgba(0,160,222,.4);
  border-radius:8px;
  padding:var(--s-lg);
  overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(0,160,222,.25);
}
.cta-band-card::before{
  content:"";position:absolute;top:0;left:0;
  width:48px;height:3px;
  background:var(--di-sky);
  box-shadow:0 0 8px rgba(0,160,222,.6);
  z-index:3;
}
/* v1.3: static carbon-weave ::after — boosted to match V103 grammar.
   No hover trigger (closing block, not a hover surface). Opacity .55
   gives a visible permanent weave that ties the closing block into the
   same design family as the hover-fade cards above. */
.cta-band-card::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,160,222,.16), transparent 60%),
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.08) 0,
      rgba(255,255,255,.08) 2px,
      transparent 2px,
      transparent 5px),
    repeating-linear-gradient(160deg,
      rgba(0,0,0,.24) 0,
      rgba(0,0,0,.24) 2px,
      transparent 2px,
      transparent 5px);
  opacity:.55;
  pointer-events:none;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.cta-band-card .booking-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--di-sky);
  margin-bottom:13px;
  display:flex;align-items:center;gap:10px;
  position:relative;z-index:2;
}
.cta-band-card .booking-meta .dot{
  width:5px;height:5px;background:var(--di-sky);border-radius:50%;
  animation:pulse-soft 2.5s var(--ease) infinite;
}
.cta-band-card h3{font-size:21px;color:#fff;margin-bottom:var(--s-sm);letter-spacing:-.012em;position:relative;z-index:2}
.cta-band-card p{font-size:14px;color:rgba(255,255,255,.78);margin-bottom:var(--s-md);position:relative;z-index:2}
.cta-band-card .b-row{
  display:flex;gap:10px;align-items:center;
  padding:5px 0;
  font-size:13px;color:rgba(255,255,255,.78);
  font-family:'JetBrains Mono',monospace;letter-spacing:.01em;
  border-bottom:1px dashed rgba(255,255,255,.08);
  position:relative;z-index:2;
}
.cta-band-card .b-row:last-of-type{border-bottom:0}
.cta-band-card .b-row::before{
  content:"";width:4px;height:4px;
  background:var(--di-sky);transform:rotate(45deg);
  flex:0 0 auto;
}
.cta-band-card .cta-buttons{margin-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-xs);position:relative;z-index:2}
@media (max-width:900px){
  .cta-band-grid{grid-template-columns:1fr;gap:var(--s-lg)}
}


/* ============================================================================
   §R — STATS BAND FEATURE VARIANT (V103 homepage 2×2 large stats)
   ============================================================================
   New v1.4 variant for HUB pages where stats should anchor a section visually,
   not just sit as a band. The compact .stats-band (§D) stays the default for
   detail pages.

   Usage: <section class="stats-band stats-band--feature">
            <div class="container">
              <div class="stats-grid stats-grid--2x2">
                <div class="stat-tile stat-tile--feature">...
   ========================================================================= */
.stats-band--feature{
  position:relative;
  padding:var(--s-xl) 0;
  border-top:0;border-bottom:0;
  overflow:hidden;
}
.stats-band--feature::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(800px 500px at 50% 50%, rgba(0,160,222,.10), transparent 65%),
    radial-gradient(500px 300px at 10% 10%, rgba(30,58,95,.40), transparent 60%);
  pointer-events:none;
}
.stats-band--feature .container{position:relative;z-index:2}

.stats-grid--2x2{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(20,36,60,.55) 0%, rgba(14,26,46,.65) 100%);
  overflow:hidden;
  box-shadow:0 24px 64px -32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.stats-grid--2x2 .stat-tile{
  position:relative;
  padding:var(--s-xl) var(--s-lg);
  border-left:1px solid rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.06);
  background:transparent;
  transition:background .3s var(--ease);
}
/* First column — no left border */
.stats-grid--2x2 .stat-tile:nth-child(odd){border-left:0}
/* First row — no top border */
.stats-grid--2x2 .stat-tile:nth-child(1),
.stats-grid--2x2 .stat-tile:nth-child(2){border-top:0}

.stats-grid--2x2 .stat-tile:hover{
  background:rgba(0,160,222,.03);
}

/* Four-corner brackets — TL, TR, BL, BR (vs compact tile which has only TL/BR) */
.stats-grid--2x2 .stat-tile .bracket{
  position:absolute;
  width:12px;height:12px;
  pointer-events:none;
  transition:border-color .35s var(--ease);
}
.stats-grid--2x2 .stat-tile .bracket--tl{
  top:13px;left:13px;
  border-top:1px solid rgba(255,255,255,.4);
  border-left:1px solid rgba(255,255,255,.4);
}
.stats-grid--2x2 .stat-tile .bracket--tr{
  top:13px;right:13px;
  border-top:1px solid rgba(255,255,255,.4);
  border-right:1px solid rgba(255,255,255,.4);
}
.stats-grid--2x2 .stat-tile .bracket--bl{
  bottom:13px;left:13px;
  border-bottom:1px solid rgba(255,255,255,.4);
  border-left:1px solid rgba(255,255,255,.4);
}
.stats-grid--2x2 .stat-tile .bracket--br{
  bottom:13px;right:13px;
  border-bottom:1px solid rgba(255,255,255,.4);
  border-right:1px solid rgba(255,255,255,.4);
}
.stats-grid--2x2 .stat-tile:hover .bracket{
  border-color:rgba(0,160,222,.7);
}

/* Override the compact tile's ::before/::after L-brackets — the .stats-grid--2x2
   variant uses dedicated .bracket child elements (above) for four corners. */
.stats-grid--2x2 .stat-tile::before,
.stats-grid--2x2 .stat-tile::after{display:none !important}

.stats-grid--2x2 .stat-tile .num{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(48px, 6vw, 72px);
  color:#fff;
  line-height:1;letter-spacing:-.025em;font-weight:600;
  margin-bottom:var(--s-sm);
  text-shadow:0 0 24px rgba(0,160,222,.2);
}
.stats-grid--2x2 .stat-tile .num .unit{
  color:var(--di-sky);
  font-weight:500;
}
.stats-grid--2x2 .stat-tile .lbl{
  font-size:15px;
  color:rgba(255,255,255,.78);
  line-height:1.45;
  display:flex;align-items:flex-start;gap:10px;
  max-width:340px;
  margin-top:0;
}
.stats-grid--2x2 .stat-tile .lbl::before{
  content:"";width:16px;height:1px;
  background:var(--di-sky);
  flex:0 0 auto;
  margin-top:10px;
}

@media (max-width:760px){
  .stats-grid--2x2{grid-template-columns:1fr}
  .stats-grid--2x2 .stat-tile{border-left:0}
  .stats-grid--2x2 .stat-tile:nth-child(2){border-top:1px solid rgba(255,255,255,.06)}
  .stats-grid--2x2 .stat-tile .num{font-size:48px}
}


/* ============================================================================
   §S — PHASE LADDER (V103 "pit crew phases" — vertical 4-step methodology)
   ============================================================================
   Used for sequenced delivery visualisation (e.g., AI Fast Start methodology,
   Digital Factory race-pace cadence). Each step has:
     - Sky-filled number tile on left (50×50px). Filled = active/done state;
       transparent with sky border = pending/upcoming state.
     - F1-themed mono eyebrow (WEEK 0-1 · GRID).
     - Step title (h3 size).
     - Body paragraph.
   Connecting hairline runs between number tiles for vertical continuity.

   Markup:
     <ol class="phase-ladder">
       <li class="phase phase--done">
         <div class="phase-num">01</div>
         <div class="phase-body">
           <div class="phase-eyebrow">WEEK 0-1 · GRID</div>
           <h3>Grid</h3>
           <p>...</p>
         </div>
       </li>
       ...
     </ol>
   States: .phase--done (filled sky tile, white num), .phase--current
   (sky border tile, sky num, sky glow), default (sky border tile, sky num).
   ========================================================================= */
.phase-ladder{
  list-style:none;
  padding:0;margin:0;
  position:relative;
  display:flex;flex-direction:column;
  gap:var(--s-md);
}
/* Vertical connecting line behind the number tiles */
.phase-ladder::before{
  content:"";position:absolute;
  left:25px;top:25px;bottom:25px;
  width:1px;
  background:linear-gradient(to bottom,
    rgba(0,160,222,.6) 0%,
    rgba(0,160,222,.3) 50%,
    rgba(0,160,222,.1) 100%);
  z-index:0;
}
.phase{
  position:relative;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:var(--s-md);
  align-items:flex-start;
  padding:0 0 var(--s-md) 0;
}
.phase-num{
  position:relative;
  width:50px;height:50px;
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:16px;font-weight:600;
  letter-spacing:.02em;
  border:2px solid var(--di-sky);
  background:transparent;
  color:var(--di-sky);
  border-radius:6px;
  transition:all .3s var(--ease);
  z-index:1;
}
/* Active/done state — filled sky tile with white number */
.phase--done .phase-num,
.phase--current .phase-num{
  background:var(--di-sky);
  color:var(--di-text-on-sky);
  box-shadow:0 0 24px rgba(0,160,222,.4);
}
.phase--current .phase-num{
  animation:pulse-soft 2s var(--ease) infinite;
}
/* Inner subtle border to read as a tile with inner shadow */
.phase-num::after{
  content:"";position:absolute;inset:3px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  pointer-events:none;
}
.phase-body{
  padding-top:6px;
}
.phase-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--di-sky);
  margin-bottom:var(--s-xs);
  display:flex;align-items:center;gap:8px;
}
.phase-eyebrow .sep{
  color:rgba(0,160,222,.4);
}
.phase-body h3{
  font-size:21px;
  color:#fff;
  margin-bottom:var(--s-xs);
  letter-spacing:-.012em;
  line-height:1.2;
}
.phase-body p{
  font-size:15px;
  color:rgba(255,255,255,.7);
  line-height:1.6;
  margin-bottom:0;
}
@media (max-width:600px){
  .phase{grid-template-columns:42px 1fr}
  .phase-num{width:42px;height:42px;font-size:14px}
  .phase-ladder::before{left:21px}
}

/* ============================================================================
   §T — SERVICES TAXONOMY (V103 "we only sell what we run ourselves")
   ============================================================================
   Compact 2-up tile grid grouped by category header. Used for service
   inventory display — denser than .pillar, lighter weight than .case-card.

   Markup:
     <div class="taxonomy">
       <div class="taxonomy-group">
         <div class="taxonomy-eyebrow">— ATLASSIAN PLATFORM</div>
         <div class="taxonomy-grid">
           <a class="taxonomy-tile" href="...">
             <h4>IMPLEMENTATION</h4>
             <p>JIRA · CONFLUENCE · JSM</p>
           </a>
           ...
         </div>
       </div>
       ...
     </div>
   ========================================================================= */
.taxonomy{
  display:flex;flex-direction:column;
  gap:var(--s-lg);
}
.taxonomy-group{
  display:flex;flex-direction:column;
  gap:var(--s-sm);
}
.taxonomy-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--di-sky);
  display:flex;align-items:center;gap:10px;
}
.taxonomy-eyebrow::before{
  content:"—";color:var(--di-sky);font-weight:400;
}
.taxonomy-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-sm);
}
.taxonomy-tile{
  position:relative;
  display:block;
  padding:var(--s-md) var(--s-lg);
  background:rgba(20,36,60,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  text-decoration:none;color:inherit;
  text-align:center;
  overflow:hidden;
  transition:all .3s var(--ease);
}
/* Left-edge sky stripe (full vertical height) — V103 signature for taxonomy tiles */
.taxonomy-tile::before{
  content:"";position:absolute;
  top:0;left:0;bottom:0;
  width:3px;
  background:var(--di-sky);
  box-shadow:0 0 8px rgba(0,160,222,.45);
  transition:width .3s var(--ease);
  z-index:2;
}
/* Subtle carbon weave on hover (consistent with the rest of the card family) */
.taxonomy-tile::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.07) 0,
      rgba(255,255,255,.07) 2px,
      transparent 2px,
      transparent 5px),
    repeating-linear-gradient(160deg,
      rgba(0,0,0,.22) 0,
      rgba(0,0,0,.22) 2px,
      transparent 2px,
      transparent 5px);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.taxonomy-tile:hover{
  border-color:rgba(0,160,222,.3);
  background:rgba(0,160,222,.04);
  transform:translateY(-2px);
  box-shadow:0 18px 36px -20px rgba(0,160,222,.2);
}
.taxonomy-tile:hover::before{width:5px}
.taxonomy-tile:hover::after{opacity:1}
.taxonomy-tile h4{
  font-size:17px;font-weight:700;
  color:#fff;
  margin-bottom:var(--s-xs);
  letter-spacing:.02em;
  text-transform:uppercase;
  position:relative;z-index:2;
}
.taxonomy-tile p{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--di-mist);
  margin:0;
  position:relative;z-index:2;
}
@media (max-width:600px){
  .taxonomy-grid{grid-template-columns:1fr}
}

/* ============================================================================

   §U — NEWSLETTER BAND (V103 closing band above footer)
   ============================================================================
   Two-column section: italic-serif headline + lede on the left, inline email
   form on the right. Behind: radial sky/atlassian gradient for visible depth.

   Markup:
     <section class="newsletter-band">
       <div class="container">
         <div class="newsletter-grid">
           <div class="newsletter-text">
             <div class="newsletter-meta">FORTNIGHTLY · PRACTITIONER NOTES · 2,000+ READERS</div>
             <h2 class="newsletter-h">Read by <span class="accent">Australian platform leaders.</span></h2>
             <p>One short email a fortnight...</p>
           </div>
           <form class="newsletter-form" action="...">
             <input type="email" placeholder="you@company.com.au">
             <button class="btn btn-go" type="submit">Get the newsletter <span class="arrow">→</span></button>
           </form>
         </div>
       </div>
     </section>
   ========================================================================= */
.newsletter-band{
  position:relative;
  padding:var(--s-2xl) 0;
  overflow:hidden;
  background:linear-gradient(180deg, var(--di-midnight-2) 0%, var(--di-midnight) 100%);
}
.newsletter-band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(700px 400px at 25% 50%, rgba(0,160,222,.14), transparent 65%),
    radial-gradient(500px 300px at 75% 50%, rgba(38,132,255,.10), transparent 60%);
  pointer-events:none;
}
.newsletter-band > .container{position:relative;z-index:2}
.newsletter-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:var(--s-xl);
  align-items:center;
}
.newsletter-text .newsletter-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--di-sky);
  margin-bottom:var(--s-sm);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.newsletter-text .newsletter-meta .sep{
  color:rgba(0,160,222,.4);
  margin:0 2px;
}
.newsletter-h{
  font-size:clamp(28px, 3.5vw, 38px);
  line-height:1.15;letter-spacing:-.02em;
  margin-bottom:var(--s-sm);
  color:#fff;
  font-weight:700;
}
.newsletter-text p{
  font-size:15px;
  color:rgba(255,255,255,.7);
  line-height:1.55;
  max-width:480px;
  margin-bottom:0;
}
.newsletter-form{
  display:flex;align-items:stretch;
  gap:var(--s-xs);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:5px;
  transition:border-color .25s var(--ease);
}
.newsletter-form:focus-within{
  border-color:rgba(0,160,222,.5);
  box-shadow:0 0 0 3px rgba(0,160,222,.1);
}
.newsletter-form input[type="email"]{
  flex:1;
  background:transparent;
  border:0;
  color:#fff;
  font-family:'Noto Sans',sans-serif;
  font-size:15px;
  padding:11px var(--s-sm);
  outline:none;
}
.newsletter-form input[type="email"]::placeholder{
  color:rgba(255,255,255,.4);
}
.newsletter-form .btn{
  flex:0 0 auto;
}
@media (max-width:760px){
  .newsletter-grid{grid-template-columns:1fr;gap:var(--s-md)}
  .newsletter-form{flex-direction:column}
  .newsletter-form .btn{width:100%;justify-content:center}
}

/* ============================================================================

   §V — TESTIMONIAL GRID (static 3-up, per Tejas's v1.4 decision — no carousel)
   ============================================================================
   Carries the same card-family signature as .pillar / .detail-card:
   sky stripe ::before, carbon-weave ::after on hover, sky drop shadow.
   Adds a large decorative quote mark via ::before on .testimonial-card-body.

   Markup:
     <div class="testimonial-grid">
       <article class="testimonial-card">
         <div class="testimonial-body">
           <blockquote>Quote text here, kept under 200 chars for visual weight.</blockquote>
         </div>
         <footer class="testimonial-attribution">
           <div class="t-logo">ANZ</div>
           <div class="t-meta">
             <div class="t-name">Jane Smith</div>
             <div class="t-role">Head of Platform · ANZ</div>
           </div>
         </footer>
       </article>
       ... 2 more ...
     </div>
   ========================================================================= */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-md);
}
.testimonial-card{
  position:relative;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(20,36,60,.7) 0%, rgba(14,26,46,.7) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:var(--s-lg) var(--s-md) var(--s-md);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px -16px rgba(0,0,0,.45);
  transition:all .3s var(--ease);
}
.testimonial-card::before{
  content:"";position:absolute;top:0;left:0;
  width:32px;height:3px;
  background:var(--di-sky);
  transition:width .35s var(--ease);
  z-index:3;
}
.testimonial-card::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,160,222,.14), transparent 60%),
    repeating-linear-gradient(70deg,
      rgba(255,255,255,.09) 0,
      rgba(255,255,255,.09) 2px,
      transparent 2px,
      transparent 5px),
    repeating-linear-gradient(160deg,
      rgba(0,0,0,.28) 0,
      rgba(0,0,0,.28) 2px,
      transparent 2px,
      transparent 5px);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.testimonial-card:hover{
  border-color:rgba(0,160,222,.35);
  transform:translateY(-3px);
  box-shadow:0 24px 48px -24px rgba(0,160,222,.25);
}
.testimonial-card:hover::before{width:100%}
.testimonial-card:hover::after{opacity:1}
.testimonial-body{
  flex:1;
  position:relative;
  padding-top:var(--s-md);
  z-index:2;
}
/* Large decorative quote mark — top-left, sky-tinted, very subtle */
.testimonial-body::before{
  content:"\201C";
  position:absolute;
  top:-13px;left:-5px;
  font-family:'Fraunces',Georgia,serif;
  font-size:72px;
  line-height:1;
  color:rgba(0,160,222,.25);
  font-weight:400;
}
.testimonial-body blockquote{
  margin:0;
  font-size:15.5px;
  color:rgba(255,255,255,.85);
  line-height:1.55;
  letter-spacing:-.002em;
  font-style:normal;
  quotes:none;
  position:relative;
  z-index:2;
}
.testimonial-attribution{
  display:flex;align-items:center;
  gap:var(--s-sm);
  margin-top:var(--s-md);
  padding-top:var(--s-sm);
  border-top:1px dashed rgba(255,255,255,.1);
  position:relative;z-index:2;
}
.t-logo{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;font-weight:700;
  letter-spacing:.06em;
  color:#fff;
  padding:5px 10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  flex:0 0 auto;
}
.t-meta{
  display:flex;flex-direction:column;
  min-width:0;
}
.t-name{
  font-size:13px;font-weight:600;
  color:#fff;
  line-height:1.2;
}
.t-role{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-top:3px;
  line-height:1.3;
}
@media (max-width:900px){
  .testimonial-grid{grid-template-columns:1fr;gap:var(--s-md)}
}

/* ============================================================================

   §AE — DIAMOND BULLETS (§10 reference — sky-tinted ♦ for feature lists)
   ============================================================================
   Used in feature lists, particularly the "Book a consult" feature list per
   §6.9 reference. Three variants: default sky, gold (earned), clay (Claude).

   THREE USAGE PATTERNS (v1.6):

   1. <ul>/<li> — reference / non-HubSpot use only.
      HubSpot Rich Text adds ::marker double-bullets, so prefer pattern 2
      for any HubSpot-deployed feature list (skill v4.0 Bug 1).
        <ul class="bullet-list">
          <li class="bullet--diamond">Discovery item...</li>
        </ul>

   2. <div> rows — REQUIRED for HubSpot production pages.
      Avoids ::marker double-bullet issue.
        <div class="bullet-list">
          <div class="bullet-row bullet--diamond">Discovery item...</div>
        </div>

   3. Inline <span> — single ♦ glyph inside running prose or labels.
      MUST use <span> tag — using on other elements will collide with the
      list ::before pseudo-element rule.
        Lead time: <span class="bullet--diamond"></span> 2–3 weeks

   v1.6 fix: the bare `.bullet--diamond` selector was scoped to `span` only,
   preventing the rotated-square inline style from leaking onto <li> or <div>
   list items (which would have collapsed them to 8×8 blue squares).
   ========================================================================= */
.bullet-list{
  list-style:none;
  padding:0;margin:0;
  display:flex;flex-direction:column;
  gap:var(--s-sm);
}
.bullet-list li,
.bullet-list .bullet-row{
  position:relative;
  padding-left:21px;
  font-size:15px;
  color:rgba(255,255,255,.78);
  line-height:1.55;
}
.bullet-list li.bullet--diamond::before,
.bullet-list .bullet-row.bullet--diamond::before,
li.bullet--diamond::before,
.bullet-row.bullet--diamond::before{
  content:"\25C6";          /* ♦ — black diamond */
  position:absolute;
  left:0;top:0;
  font-size:10px;
  line-height:1.6;
  color:var(--di-sky);
  text-shadow:var(--shadow-glow-sky);
}
li.bullet--diamond--gold::before,
.bullet-row.bullet--diamond--gold::before{
  color:var(--di-gold);
  text-shadow:0 0 6px rgba(255,200,69,.5);
}
li.bullet--diamond--clay::before,
.bullet-row.bullet--diamond--clay::before{
  color:var(--claude-clay);
  text-shadow:var(--shadow-glow-claude);
}

/* Inline span variant — for use inside paragraphs or labels.
   v1.6: scoped to span ONLY to prevent collision with list-item .bullet--diamond.
   Using this class on any non-span element will fall back to the list
   ::before glyph behaviour above. */
span.bullet--diamond{
  display:inline-block;
  width:8px;height:8px;
  background:var(--di-sky);
  transform:rotate(45deg);
  margin:0 6px;
  box-shadow:var(--shadow-glow-sky);
  flex:0 0 auto;
}
span.bullet--diamond.bullet--diamond--gold{
  background:var(--di-gold);
  box-shadow:0 0 6px rgba(255,200,69,.5);
}
span.bullet--diamond.bullet--diamond--clay{
  background:var(--claude-clay);
  box-shadow:var(--shadow-glow-claude);
}

/* ============================================================================


/* ============================================================================
   ===== MEGA INNER EXTENSION END =====
   ============================================================================ */