@charset "UTF-8"; /* ══════════════════════════════════════════════════════════════════════════════ ROOT VARIABLES · RESET · UNIT THEMES ══════════════════════════════════════════════════════════════════════════════ */ :root{ /* Surface elevation ladder — evenly stepped so panels/cards visibly float above the page. bg(darkest) < s1 < surf < graph < s2 < s3 < s4; blue = bluer featured-card surface. (Retuned: the old ramp clustered — surf==s2.) */ --bg:#070A11;--s1:#101825;--surf:#171F2E;--graph:#1C2637; --s2:#232E43;--blue:#193459;--s3:#2C3A54;--s4:#3B4B6B; --b1:rgba(255,255,255,.07);--b2:rgba(255,255,255,.11); --text:#DDE2EB;--mid:#A3ACBA;--dim:#8C98AB;--n0:#FAFBFC; /* Brand accents — dark-theme tones, tuned to pass WCAG AA on dark surfaces. Light-theme tones are overridden in theme.css. (growth=magenta, innovation=blue, learn=legacy orange, lime=AI-ONE.) */ --growth:#E85B9E;--innovation:#22B6E6;--learn:#F2833F; /* --lime = vivid brand activation green, used as a FILL (CTA) in both themes with dark text. --lime-ink = the text-safe tone for lime-as-text (deepens on light). Never use --lime as text on a light surface. */ --lime:#A8E32D;--lime-ink:#A8E32D; --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --serif:'DM Serif Display',Georgia,serif; --border:var(--b1); --nav-bg:linear-gradient(180deg,rgba(20,28,42,.78),rgba(8,12,19,.62)); --nav-overlay:linear-gradient(180deg,rgba(255,255,255,.08),transparent 55%),radial-gradient(circle at 20% 0%,rgba(255,255,255,.08),transparent 38%); --nav-border:rgba(255,255,255,.12); --nav-shadow:0 14px 40px rgba(0,0,0,.28); --submenu-bg:rgba(8,12,19,.98); --submenu-border:rgba(255,255,255,.12); --submenu-shadow:0 18px 48px rgba(0,0,0,.34); --filter-bar-bg:rgba(9,13,20,.98); --filter-bar-border:var(--b2); --pagination-bg:rgba(255,255,255,.03); --pagination-hover-bg:rgba(255,255,255,.06); --pagination-active-bg:var(--n0); --pagination-active-border:var(--n0); --pagination-active-color:var(--bg); --panel-hover-bg:#1e2430; --panel-shadow:0 12px 32px rgba(0,0,0,.3); --lift-shadow:0 12px 32px rgba(0,0,0,.3); --lift-shadow-hover:0 16px 40px rgba(0,0,0,.36); --toggle-bg:rgba(255,255,255,.03); --toggle-border:rgba(255,255,255,.1); --toggle-hover-bg:rgba(255,255,255,.08); --toggle-active-bg:rgba(255,255,255,.12); --toggle-text:var(--mid); --toggle-text-hover:var(--n0); --toggle-shadow:inset 0 1px 0 rgba(255,255,255,.03); --case-card-bg:var(--graph); --case-card-hover-bg:#1e2430; --case-card-featured-bg:var(--blue); --case-card-title:var(--n0); --case-card-text:var(--mid); --case-card-client:var(--dim); --case-card-image-overlay:linear-gradient(180deg,rgba(4,7,12,.28) 0%,rgba(4,7,12,.76) 100%); --case-card-image-overlay-hover:linear-gradient(180deg,rgba(4,7,12,.18) 0%,rgba(4,7,12,.48) 100%); --case-card-image-label:rgba(255,255,255,.45); --case-card-image-surface:rgba(246,244,238,.9); --case-card-industry-bg:rgba(255,255,255,.04); --case-card-industry-text:var(--dim); --case-card-link:var(--dim); --case-card-featured-text:rgba(255,255,255,.4); --case-card-footer-border:var(--b1); --case-card-featured-footer-border:rgba(255,255,255,.08); --proof-card-bg:linear-gradient(180deg,rgba(21,28,42,.96),rgba(15,22,34,.96)); --proof-card-hover-bg:linear-gradient(180deg,rgba(24,32,48,.98),rgba(15,22,34,.98)); --proof-card-title:var(--n0); --proof-card-meta:var(--mid); --proof-card-link:var(--text); /* default unit — overridden by body.unit-* */ --unit:var(--innovation);--unit-rgb:34,182,230; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{--nav-offset:112px;font-size:16px;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:var(--nav-offset,64px);color-scheme:dark} body{font-family:var(--body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip} *{min-width:0} a{text-decoration:none;color:inherit} /* Unit colour themes — set on by base.njk */ .unit-growth{--unit:var(--growth);--unit-rgb:232,91,158} .unit-innovation {--unit:var(--innovation); --unit-rgb:34,182,230} .unit-learn{--unit:var(--learn);--unit-rgb:242,131,63} /* ══════════════════════════════════════════════════════════════════════════════ SHARED LAYOUT UTILITIES ══════════════════════════════════════════════════════════════════════════════ */ .wrap{max-width:1200px;margin:0 auto;padding:0 56px} section{border-top:1px solid var(--b1)} .reveal{opacity:1;transform:none} .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.9,.2,1),transform .65s cubic-bezier(.2,.9,.2,1)} .reveal.visible{opacity:1;transform:none} /* Staggered reveal delays — for groups of .reveal siblings that should animate in sequence (e.g. .phase cards in a #process .flow) rather than all at once. */ .reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s} @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}} .link-arrow{font-size:13px;color:var(--mid);display:inline-flex;align-items:center;gap:6px;transition:gap .15s,color .15s} .link-arrow:hover{color:var(--text);gap:10px} .section-h{font-family:var(--display);font-size:clamp(30px,3.5vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1.0;color:var(--n0)} .section-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(255,255,255,.42);font-size:.88em} .section-p{font-size:16px;color:var(--mid);line-height:1.85;max-width:480px;font-weight:300} /* ── SKIP LINK & FOCUS ── */ .skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:8px 16px;background:#A8E32D;color:#090D14;font-family:var(--display);font-size:12px;font-weight:700;border-radius:4px;text-decoration:none;transition:top .2s} .skip-link:focus{top:16px} :focus-visible{outline:2px solid #A8E32D;outline-offset:3px;border-radius:3px} html[data-theme="light"] :focus-visible{outline:2px solid var(--n0);outline-offset:3px} /* ── EYEBROW ── */ .eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--unit);margin-bottom:16px;position:relative;overflow:hidden} .eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--unit);flex-shrink:0;animation:pulse 2.5s ease-in-out infinite} .eyebrow::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--unit);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.9,.2,1)} .reveal.visible .eyebrow::after{transform:scaleY(1)} /* ── SHARED HERO STRUCTURE ── */ .unit-logotype{display:flex;align-items:center;gap:14px;margin-bottom:40px} .unit-mark{width:160px;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0} .unit-mark::before{display:none} .unit-mark svg{display:block;width:160px;height:auto} .unit-wordmark{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--unit)} .unit-parent{font-size:12px;color:var(--dim);letter-spacing:.05em;margin-top:3px} .hero-inner{position:relative;z-index:4} .hero-h{font-family:var(--display);font-size:clamp(36px,6.5vw,80px);font-weight:700;letter-spacing:-.055em;line-height:.92;color:var(--n0);margin-bottom:28px;max-width:880px} .hero-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--unit);font-size:.9em;display:block;margin-top:8px} .hero-sub{font-size:clamp(14px,1.5vw,17px);color:var(--text);line-height:1.85;max-width:580px;margin-bottom:44px} .hero-badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--unit-rgb),.08);border:1px solid rgba(var(--unit-rgb),.18);border-radius:6px;padding:8px 14px} .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--unit);flex-shrink:0} .badge-text{font-size:11.5px;color:var(--text)} .hero-cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .btn-primary{font-family:var(--display);font-size:13px;font-weight:700;background:var(--unit);color:var(--n0);border:none;border-radius:6px;padding:13px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:opacity .15s} .btn-primary:hover{opacity:.88} .btn-ghost{font-size:13px;color:var(--mid);display:inline-flex;align-items:center;gap:6px;transition:color .15s,gap .15s} .btn-ghost:hover{color:var(--text);gap:9px} .btn-cta{font-family:var(--display);font-size:13px;font-weight:700;background:var(--lime);color:#090D14;border:none;border-radius:6px;padding:15px 24px;cursor:pointer;text-align:center;transition:opacity .15s,border-color .2s;display:block;position:relative;isolation:isolate} .btn-cta:hover{opacity:.9} /* ── PROBLEM SECTION ── */ #problem{padding:96px 0;background:var(--blue)} .problem-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} .problem-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--unit);margin-bottom:16px} .problem-h{font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--n0);margin-bottom:20px} .problem-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(255,255,255,.5);font-size:1.05em} .problem-p{font-size:16px;color:var(--mid);line-height:1.85;max-width:420px} .problem-right{display:flex;flex-direction:column;gap:1px;background:var(--b1);border:1px solid var(--b1);border-radius:10px;overflow:hidden} .stat-row{background:var(--graph);padding:28px;display:flex;flex-direction:column;gap:8px;transition:background .2s} .stat-row:hover{background:#1e2430} .stat-number{font-family:var(--display);font-size:clamp(36px,4vw,52px);font-weight:700;letter-spacing:-.05em;color:var(--unit);font-variant-numeric:tabular-nums;line-height:1} .stat-desc{font-size:15px;color:var(--mid);line-height:1.6;max-width:320px} .stat-source{font-size:11px;color:var(--dim);margin-top:4px;letter-spacing:.03em} /* ── SYSTEM / SERVICES SECTION ── */ .system-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--unit);margin-bottom:14px} .system-header{margin-bottom:56px} .system-h{font-family:var(--display);font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--n0);max-width:600px} .system-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--unit);font-size:1.05em} .system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--b1);border:1px solid var(--b1);border-radius:10px;overflow:hidden} .unit-growth .system-grid{grid-template-columns:1fr 1fr} .service-card{background:var(--graph);padding:40px 36px;position:relative;overflow:hidden;transition:background .2s} .service-card:hover{background:#1e2430} .service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--unit);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.9,.2,1)} .service-card:hover::before{transform:scaleX(1)} .service-icon{width:40px;height:40px;border-radius:8px;background:rgba(var(--unit-rgb),.1);border:1px solid rgba(var(--unit-rgb),.18);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--unit);margin-bottom:20px} .service-title{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--n0);margin-bottom:10px} .service-desc{font-size:15px;color:var(--mid);line-height:1.75;margin-bottom:20px} .service-metric{display:inline-flex;align-items:flex-start;gap:12px;background:rgba(var(--unit-rgb),.07);border:1px solid rgba(var(--unit-rgb),.15);border-radius:6px;padding:10px 14px} .service-metric-val{font-family:var(--display);font-size:15px;font-weight:700;color:var(--unit);letter-spacing:-.02em;flex:0 0 auto;white-space:nowrap;line-height:1.35} .service-metric-lbl{font-size:12.5px;line-height:1.45;color:var(--mid)} /* Pin .service-metric to the card's bottom edge so metric rows stay aligned across the grid row even when .service-desc lengths differ between cards. Scoped to #system specifically — .service-card is reused on /design-system/ outside #system and must keep its default (non-flex) layout there. */ /* ── HOW / STEPS SECTION ── */ #how{padding:96px 0;background:var(--blue)} .how-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--unit);margin-bottom:14px} .how-header{margin-bottom:64px} .how-h{font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--n0)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--b1);border:1px solid var(--b1);border-radius:10px;overflow:hidden} .step{background:var(--graph);padding:36px 32px;position:relative} .step:not(:last-child)::after{content:'\2192';position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--dim);z-index:1} .step-num{font-family:var(--display);font-size:12px;font-weight:700;color:var(--unit);letter-spacing:.08em;margin-bottom:16px;display:flex;align-items:center;gap:8px} .step-num::before{content:'';display:block;width:20px;height:1px;background:var(--unit);opacity:.5} .step-title{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--n0);margin-bottom:10px} .step-desc{font-size:15px;color:var(--mid);line-height:1.75} .step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--unit);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.9,.2,1)} .step.step-active::before{transform:scaleX(1)} .how-footer{margin-top:40px;padding-top:32px;border-top:1px solid var(--b1)} .how-detail-link{font-size:13px;color:var(--dim);display:inline-flex;align-items:center;gap:8px;transition:color .2s,gap .2s} .how-detail-link:hover{color:var(--unit);gap:12px} .how-detail-arrow{transition:transform .2s} .how-detail-link:hover .how-detail-arrow{transform:translateX(3px)} /* ── PROOF SECTION HEADER ── */ #proof{padding:96px 0;background:var(--bg)} .proof-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--unit);margin-bottom:12px} .proof-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px} .proof-h{font-family:var(--display);font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--n0)} /* ── PROCESS FLOW ── */ #process{padding:96px 0;background:var(--bg);position:relative;overflow:hidden} #process::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:700px;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--unit-rgb),.14) 0%,rgba(var(--unit-rgb),.04) 40%,transparent 70%);pointer-events:none} /* Phase D2: Growth/Innovation's #process intro (heading + sub only) moved into the hero's `.hero-scrub-region` as the landing content for the pinned frame-sequence (see aurora.css). Transparent background so the pinned canvas shows through; min-height gives ~1 extra viewport of pinned scroll (matching how much extra height Home's #units adds) before the unpinned `.flow` phase-card section (id="process", unchanged above) continues normally below. Confines to a left column so the footage's own empty right side stays visible, same treatment as Home's `.units-landing`. */ #process-intro.process-landing{background:transparent;min-height:100svh;display:flex;align-items:center;padding:0} /* `#process-intro` is `display:flex` (row direction) so its `.wrap` child would otherwise shrink to its content's width instead of filling the section first (a plain block defaults to full-width-then-capped-by- max-width; a row-direction flex item without an explicit width does NOT) - without this, .wrap's own max-width:1200px;margin:0 auto ends up centering a much SMALLER box than 1200px, landing the card far right of where every other section's left column sits. Home's #units doesn't need this because it's flex-direction:column, whose cross-axis (horizontal) stretches children to full width by default. */ .process-landing .wrap{width:100%} /* Client feedback 2026-08-06: needed its own card (separation from the still-busy footage, same reasoning as Home's unit-panel cards) - originally left-aligned to `.wrap`'s left edge so the footage's own empty right side stayed visible (margin-right:auto, no margin-left). Client feedback 2026-09-03: centered instead, matching the fix applied to Home's unit-panel grid (which also just needed margin:auto) - Growth's and Innovation's footage is one unified object spanning most of the frame width (not a clear empty-right-side like the left-column reasoning assumed), so centering the card reads better against it than pinning left. */ .process-landing .process-header{max-width:520px;margin:0 auto;background:var(--au-glass,rgba(18,30,50,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:28px 32px} /* Mobile: the pin is disabled entirely (see aurora.css's max-width:768px block) — a mostly-empty 100svh section with no video behind it is just wasted scroll, and the transparent background would show the raw page background instead of a deliberate surface tint. Collapse back to normal section spacing + the same opaque background #process itself uses; drop the card treatment too, there's no video behind it to separate from. */ @media(max-width:768px){ #process-intro.process-landing{min-height:auto;padding:96px 0 32px;background:var(--bg)} .process-landing .process-header{max-width:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;border-radius:0;padding:0} } .process-header{margin-bottom:56px;position:relative;z-index:1} .process-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--unit);margin-bottom:14px} .process-h{font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--n0);margin-bottom:10px} .process-sub{font-size:16px;color:var(--mid);line-height:1.75;max-width:520px} .flow{display:flex;flex-direction:column;align-items:center;max-width:640px;margin:0 auto;position:relative;z-index:1} .flow::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,rgba(var(--unit-rgb),.5) 0%,rgba(var(--unit-rgb),.15) 60%,rgba(168,227,45,.4) 100%);transform:translateX(-50%);z-index:0} .phase{width:100%;position:relative;z-index:1} .phase-connector{display:flex;align-items:center;justify-content:center;height:40px;position:relative;z-index:1} .phase-connector-dot{width:8px;height:8px;border-radius:50%;background:var(--unit);box-shadow:0 0 0 3px rgba(var(--unit-rgb),.2);position:relative;z-index:2} .phase-connector-dot.lime{background:var(--lime);box-shadow:0 0 0 3px rgba(168,227,45,.2)} .phase-connector-dot.neutral{background:var(--dim);box-shadow:0 0 0 3px rgba(78,87,104,.15)} .phase-connector-label{position:absolute;left:calc(50% + 18px);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .phase-card{background:var(--graph);border:1px solid var(--b1);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .2s,background .2s;user-select:none} .phase-card:hover{border-color:var(--b2);background:#1e2430} .phase-card.accent{border-color:rgba(var(--unit-rgb),.28);background:rgba(var(--unit-rgb),.05)} .phase-card.accent:hover{background:rgba(var(--unit-rgb),.09)} .phase-card.open{border-color:var(--b2)} .phase-card.accent.open{border-color:rgba(var(--unit-rgb),.4)} .phase-card.lime{border-color:rgba(168,227,45,.18);background:rgba(168,227,45,.04)} .phase-card.lime:hover{background:rgba(168,227,45,.07)} .phase-head{display:flex;align-items:center;gap:14px;padding:18px 20px} .phase-icon{width:34px;height:34px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;background:rgba(var(--unit-rgb),.1);border:1px solid rgba(var(--unit-rgb),.18);color:var(--unit)} .phase-card.lime .phase-icon{background:rgba(168,227,45,.1);border-color:rgba(168,227,45,.2);color:var(--lime-ink)} .phase-head-text{flex:1;min-width:0} .phase-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--unit);margin-bottom:3px} .phase-card.lime .phase-tag{color:var(--lime-ink)} .phase-title{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--n0)} .phase-chevron{width:24px;height:24px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--b1);color:var(--dim);transition:transform .3s cubic-bezier(.2,.9,.2,1),background .2s,color .2s} .phase-card:hover .phase-chevron{color:var(--n0)} .phase-card.open .phase-chevron{transform:rotate(45deg);background:rgba(var(--unit-rgb),.1);color:var(--unit)} .phase-card.lime.open .phase-chevron{background:rgba(168,227,45,.1);color:var(--lime-ink)} .phase-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.9,.2,1)} .phase-card.open .phase-body{max-height:300px} .phase-body-inner{padding:16px 20px 20px;border-top:1px solid var(--b1)} .phase-card.accent .phase-body-inner{border-top-color:rgba(var(--unit-rgb),.15)} .phase-card.lime .phase-body-inner{border-top-color:rgba(168,227,45,.12)} .phase-desc{font-size:15px;color:var(--mid);line-height:1.75} .phase-badge{display:inline-flex;align-items:center;gap:5px;margin-top:12px;border-radius:4px;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .phase-badge.accent{background:rgba(var(--unit-rgb),.08);border:1px solid rgba(var(--unit-rgb),.18);color:var(--unit)} .phase-badge.lime{background:rgba(168,227,45,.08);border:1px solid rgba(168,227,45,.18);color:var(--lime-ink)} .phase-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%} .split-band{width:100%;display:flex;align-items:center;gap:12px;position:relative;z-index:1;height:40px} .split-band-line{flex:1;height:1px;background:var(--b1)} .split-band-label{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);white-space:nowrap} /* ── CARD HOVER LIFT ── */ .cap-card,.format-card,.scope-card,.phase,.proof-card,.service-card,.step{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .cap-card:hover,.format-card:hover,.scope-card:hover,.phase:hover,.proof-card:hover{transform:translateY(-3px);box-shadow:var(--lift-shadow-hover)} /* ── SHARED RESPONSIVE: sections added above ── */ @media(max-width:1024px){ .wrap{padding:0 32px} .problem-inner{grid-template-columns:1fr;gap:48px} .system-grid{grid-template-columns:1fr} .unit-growth .system-grid{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .step:not(:last-child)::after{content:'\2193';right:auto;left:50%;top:auto;bottom:-14px;transform:translateX(-50%)} #problem .wrap,#process .wrap,#proof .wrap,#how .wrap{padding:0 32px} body.section-news:not(.page-news) #hero .hero-inner, body.section-insights:not(.page-insights) #hero .hero-inner, body.section-cases:not(.page-cases) #hero .hero-inner{width:min(100%,620px);min-width:0;padding:20px 22px 22px} } @media(max-width:720px){ .wrap{padding:0 20px} #problem .wrap,#process .wrap,#proof .wrap,#how .wrap{padding:0 20px} .service-card{padding:32px 24px} .step{padding:32px 24px} .flow::before{left:20px;transform:none} .phase-connector{justify-content:flex-start;padding-left:16px} .phase-connector-label{left:34px} .phase-split{grid-template-columns:1fr} .hero-cta-row{flex-direction:column;align-items:flex-start} body.section-news:not(.page-news) #hero .hero-inner, body.section-insights:not(.page-insights) #hero .hero-inner, body.section-cases:not(.page-cases) #hero .hero-inner{padding:18px 18px 20px;border-radius:20px} body.section-insights:not(.page-insights) #hero .hero-h, body.section-news:not(.page-news) #hero .hero-h{font-size:clamp(15px,6.2vw,22px)} body.section-cases:not(.page-cases) #hero .hero-h{font-size:clamp(16px,6.1vw,23px)} } /* ── SHARED BASE STYLES ── */ /* WebGL background canvas */ #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.4; } html[data-theme="light"] #bg-canvas { opacity: 0.18; mix-blend-mode: multiply; filter: saturate(0.8) brightness(1.08); } html[data-theme="light"] body.section-home #bg-canvas { opacity: 0.36; mix-blend-mode: screen; filter: none; } /* Page transition classes — applied to , not . `.page-entering` has to be set synchronously in (see base.njk's inline script, before first paint) so the page is already invisible when the browser paints its first frame. Applying it later, on DOMContentLoaded, let a fully-visible frame render first — then JS snapped it to opacity:0 (revealing the dark UA canvas underneath, i.e. black) before fading back in, a double flash on every navigation. */ .page-transitioning { opacity: 0; transition: opacity 0.25s ease; } .page-entering { opacity: 0; } .page-entered { opacity: 1; transition: opacity 0.35s ease; } .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; } body.nav-locked { position: fixed; inset: 0; width: 100%; overflow: hidden; } #nav { --nav-offset: 112px; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 200 !important; min-height: var(--nav-offset) !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: linear-gradient(180deg, rgba(20, 28, 42, 0.78), rgba(8, 12, 19, 0.62)) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28) !important; backdrop-filter: blur(26px) saturate(145%) !important; -webkit-backdrop-filter: blur(26px) saturate(145%) !important; /* .scrolled toggled by transitions.js's scroll listener (see updateNavState) — only the response lives here. min-height/--nav-offset intentionally left alone: several other elements (filter-bar/tab-bar sticky top, sidebar sticky offsets, mobile-menu max-height) read the html-level --nav-offset custom property and assume a stable nav height, so shrinking the nav's box on scroll would desync those without also rewiring --nav-offset via JS. Kept to background/blur/shadow intensification instead — still a clearly perceptible "nav has condensed" cue without the layout risk. */ transition: background 220ms ease, box-shadow 220ms ease, border-bottom-color 220ms ease, backdrop-filter 220ms ease; } #nav.scrolled { background: linear-gradient(180deg, rgba(13, 18, 28, 0.94), rgba(5, 8, 13, 0.9)) !important; border-bottom-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42) !important; backdrop-filter: blur(32px) saturate(160%) !important; -webkit-backdrop-filter: blur(32px) saturate(160%) !important; } .nav-shell { width: min(100%, 1360px); min-height: 0; padding: 5px 40px 6px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; box-sizing: border-box; } .nav-topbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 560px) auto; align-items: center; column-gap: 16px; min-height: 22px; padding: 0 4px 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Client feedback 2026-09-03: the ticker was nearly the same tone as the nav bar's own background gradient (rgba(255,255,255,.05->.02) on top of #nav's rgba(20,28,42,.78)->rgba(8,12,19,.62)) - easy to miss entirely. Given a green-tinted glass tone (same --au-good "live" green used for status dots elsewhere - .eyebrow-dot, .pulse-dot, .au-chip .au-dot - not the reserved --lime CTA color) plus a real border glow so it reads as its own distinct element, not another slab of nav chrome. Home/ Insights/News moving out of the topbar (see .nav-utility below) also freed up real width for this to breathe. */ .nav-ticker { grid-column: 2; display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; color: var(--text); padding: 6px 14px 6px 12px; border: 1px solid rgba(56, 208, 138, 0.32); border-radius: 999px; background: linear-gradient(180deg, rgba(56, 208, 138, 0.12), rgba(56, 208, 138, 0.03)); box-shadow: 0 0 0 1px rgba(56, 208, 138, 0.05), 0 4px 16px -6px rgba(56, 208, 138, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .nav-ticker-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #38D08A; padding-right: 10px; border-right: 1px solid rgba(56, 208, 138, 0.25); } .nav-ticker-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #38D08A; box-shadow: 0 0 8px rgba(56, 208, 138, 0.7); animation: pulse 2.5s ease-in-out infinite; } .nav-ticker-label { flex: 0 0 auto; font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--unit); white-space: nowrap; } .nav-ticker-track { display: flex; align-items: center; position: relative; min-height: 24px; width: 100%; flex: 1 1 auto; } .nav-ticker-viewport { position: relative; min-width: 0; flex: 1 1 auto; overflow: hidden; } .nav-ticker-item { position: absolute; inset: 0 auto 0 0; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); color: var(--text) !important; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease, background 0.15s ease, border-color 0.15s ease; } .nav-ticker-item:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.07); border-color: rgba(var(--unit-rgb), 0.28); } .nav-ticker-item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-ticker-kind { flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--unit); white-space: nowrap; } .nav-ticker-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--text); } #nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 55%), radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), transparent 38%); pointer-events: none; } #nav > * { position: relative; z-index: 1; } .nav-logo, .footer-logo { display: flex !important; align-items: center !important; gap: 10px !important; } .nav-logo svg, .footer-logo svg, .nav-logo img, .footer-logo img { display: block; width: 160px; height: auto; flex-shrink: 0; } .nav-logo .brand-lockup, .footer-logo .brand-lockup { transform-origin: left center; transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease; } #nav .nav-logo .brand-lockup { animation: brand-lockup-in 280ms ease-out 120ms both; } #nav .nav-logo svg, #nav .nav-logo img { width: 136px; } #nav.scrolled .nav-logo .brand-lockup { transform: scale(0.9); } @keyframes brand-lockup-in { from { opacity: 0; transform: translateY(-2px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .nav-wordmark { font-family: var(--display) !important; font-size: 13.5px !important; font-weight: 700 !important; color: var(--n0) !important; letter-spacing: -0.01em !important; white-space: nowrap !important; } .nav-utility { grid-column: 3; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 30px; white-space: nowrap; } .nav-preferences--utility { display: inline-flex; align-items: center; gap: 10px; } .theme-toggle--compact { width: 36px; height: 36px; padding: 0; justify-content: center; transform-origin: center right; } .theme-toggle--compact .theme-toggle__icon { transform: scale(0.92); } .nav-primary { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nav-links, .footer-links { display: flex !important; list-style: none !important; } .nav-links { gap: 14px !important; } .nav-links--primary { flex: 1 1 auto; justify-content: center; } .nav-links > li { position: relative; } .nav-item--has-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } .nav-links a { /* Was 11px — below any reasonable legibility floor for primary nav chrome, and smaller than the dropdown items nested under it (.nav-submenu-title at 13px), inverting the expected primary/secondary hierarchy. Raised to 14px so the top-level nav reads clearly at a glance and is now the LARGER of the two (submenu title matches at 14px, see below). */ font-size: 14px !important; color: var(--mid) !important; transition: color 0.15s !important; white-space: nowrap !important; } /* Home moved from the topbar's text-link row into the main nav (client request: give it back as much space as it takes) - rendered as an icon instead of the word "Home" so it costs roughly one nav-item's worth of width instead of a full label. Color comes from `currentColor` on the svg strokes, so it already follows `.nav-links a`/`:hover`/`.active` above with no extra color rules needed. */ .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;padding:2px 4px} .nav-link-icon svg{width:18px;height:18px;display:block} .nav-item--has-menu > a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 5px; transition: color 0.15s, background 0.15s !important; } .nav-item--has-menu > a:hover { background: rgba(255, 255, 255, 0.1); } .nav-item--has-menu > a.active { background: rgba(var(--unit-rgb), 0.12); color: var(--unit) !important; } .nav-caret { width: 7px; height: 7px; display: inline-block; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: 0.65; transition: transform 0.18s ease, opacity 0.18s ease; } /* Shared sticky tab / filter bar shell */ #filter-bar, #tab-bar { position: sticky; top: var(--nav-offset, 64px); z-index: 190; background: var(--filter-bar-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--b2); border-top: 1px solid var(--b1); } #filter-bar .filter-inner, #filter-bar .filter-bar-inner, #tab-bar .tab-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 56px; display: flex; align-items: stretch; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } @media (max-width: 720px) { #filter-bar .filter-inner, #filter-bar .filter-bar-inner, #tab-bar .tab-bar-inner { padding: 0 12px; } .filter-btn, .cat-btn, .tab-btn { padding-left: 14px; padding-right: 14px; } } #filter-bar .filter-inner::-webkit-scrollbar, #filter-bar .filter-bar-inner::-webkit-scrollbar, #tab-bar .tab-bar-inner::-webkit-scrollbar { display: none; } .filter-btn, .cat-btn, .tab-btn { display: flex; align-items: center; gap: 8px; padding: 14px 20px 12px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: var(--dim); background: none; border: none; cursor: pointer; position: relative; white-space: nowrap; flex-shrink: 0; /* scroll sideways instead of squeezing labels over each other */ transition: color 0.2s; } .filter-btn::after, .cat-btn::after, .tab-btn::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.22s cubic-bezier(.2,.9,.2,1); } .filter-btn.all-btn::after { background: var(--n0); } .filter-btn.growth-btn::after { background: var(--growth); } .filter-btn.innovation-btn::after { background: var(--innovation); } .filter-btn.learn-btn::after { background: var(--learn); } .tab-btn.growth-tab::after { background: var(--growth); } .tab-btn.innovation-tab::after { background: var(--innovation); } .tab-btn.learn-tab::after { background: var(--learn); } .filter-btn.active, .cat-btn.active, .tab-btn.active { color: var(--n0); } .filter-btn.active::after, .cat-btn.active::after, .tab-btn.active::after { transform: scaleX(1); } .filter-btn:hover, .cat-btn:hover, .tab-btn:hover { color: var(--n0); } .filter-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; opacity: .4; } .filter-btn.active .filter-dot { opacity: 1; } /* Shared archive pagination */ .cases-pagination{ display:flex; align-items:center; justify-content:center; gap:10px; margin:40px 0 0; flex-wrap:wrap; } .cases-pagination[hidden]{display:none} .pagination-btn, .pagination-page{ min-width:42px; height:42px; padding:0 14px; border-radius:999px; border:1px solid var(--b1); background:rgba(255,255,255,.03); color:var(--mid); display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:-.01em; cursor:pointer; transition:border-color .15s,background .15s,color .15s; } .pagination-btn:hover, .pagination-page:hover{border-color:var(--b2);background:rgba(255,255,255,.06);color:var(--text)} .pagination-page.active{background:var(--n0);border-color:var(--n0);color:var(--bg)} .pagination-btn[disabled]{opacity:.4;cursor:not-allowed} .service-faqs{ padding:80px 24px; background:var(--graph); border-top:1px solid var(--b1); } .service-faqs-inner{ max-width:800px; margin:0 auto; } .service-faqs-h{ font-family:var(--display); font-size:clamp(20px,2.5vw,28px); font-weight:700; letter-spacing:-.03em; color:var(--n0); margin-bottom:40px; } .faq-archive-link{ display:inline-block; margin-top:28px; font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--n0); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; transition:opacity .15s ease; } .faq-archive-link:hover{opacity:.65;} .faq-list{ margin:0; padding:0; } .faq-item{ border-bottom:1px solid var(--b1); } .faq-item:first-child{ border-top:1px solid var(--b1); } .faq-q{ font-size:14px; font-weight:600; color:var(--n0); line-height:1.5; padding:20px 40px 20px 0; margin:0; cursor:pointer; position:relative; list-style:none; user-select:none; transition:color .2s ease; } .faq-q::-webkit-details-marker{ display:none; } .faq-q::after{ content:''; position:absolute; right:2px; top:22px; width:16px; height:16px; background-color:var(--mid); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E"); mask-size:contain; mask-repeat:no-repeat; mask-position:center; transition:transform .2s ease, background-color .2s ease; } .faq-item[open] .faq-q{ color:var(--unit, var(--n0)); } .faq-item[open] .faq-q::after{ transform:rotate(45deg); background-color:var(--unit, var(--n0)); } .faq-a{ font-size:13px; line-height:1.8; color:var(--mid); margin:0; padding:0 0 20px; } .growth-btn .filter-dot { background: var(--growth); } .innovation-btn .filter-dot { background: var(--innovation); } .learn-btn .filter-dot { background: #F2833F; } .cat-btn::after { background: var(--n0); } .filter-divider, .cat-divider, .tab-divider { width: 1px; background: var(--b1); margin: 12px 0; flex-shrink: 0; } .nav-submenu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-8px); min-width: 220px; width: max-content; max-width: min(280px, 36vw); padding: 10px; display: grid; gap: 8px; background: rgba(8, 12, 19, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .nav-item--has-menu:hover .nav-submenu, .nav-item--has-menu:focus-within .nav-submenu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-item--has-menu:hover .nav-caret, .nav-item--has-menu:focus-within .nav-caret { opacity: 1; transform: translateY(1px) rotate(225deg); } .nav-submenu-link { display: block; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } /* Marks a submenu entry that leaves the site. Which entries those are is decided in Directus by giving the item an absolute URL, never by naming pages in CSS. */ .nav-submenu-link.is-external .nav-submenu-title { display: inline-flex; align-items: center; gap: 6px; } .nav-external-icon { width: 11px; height: 11px; flex: none; opacity: .62; background-color: currentColor; transition: opacity .18s ease; -webkit-mask: var(--external-glyph) center / contain no-repeat; mask: var(--external-glyph) center / contain no-repeat; --external-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); } .nav-submenu-link.is-external:hover .nav-external-icon, .nav-submenu-link.is-external:focus-visible .nav-external-icon { opacity: 1; } .nav-submenu-link:hover, .nav-submenu-link:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .nav-submenu-title { display: block; font-family: var(--display); /* Matches .nav-links a (14px) — was 13px, rendering LARGER than the 11px primary nav item it drops down from. Set equal rather than smaller: this is still the primary (only) line of copy in each dropdown row, not a secondary/description line, so it keeps full nav-tier legibility. */ font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--n0); } .nav-links a:hover { color: var(--n0) !important; } .nav-links a.active { color: var(--section-accent, var(--n0)) !important; } .nav-right { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; } .nav-right-divider { width: 1px; height: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)); opacity: 0.7; } .nav-locale { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .locale-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 10px; border-radius: 999px; font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--mid); transition: background 0.15s ease, color 0.15s ease; } .locale-link:hover, .locale-link:focus-visible { color: var(--n0); background: rgba(255, 255, 255, 0.08); } .locale-link.active { color: var(--n0); background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .locale-link--unavailable { opacity: 0.38; cursor: default; pointer-events: none; } .locale-link--unavailable.active { opacity: 1; } .nav-locale--mobile { margin: 0; width: fit-content; } .btn-ghost-nav { font-size: 12.5px !important; color: var(--mid) !important; background: none !important; border: none !important; cursor: pointer !important; font-family: var(--body) !important; transition: color 0.15s !important; white-space: nowrap !important; } .btn-ghost-nav:hover { color: var(--text) !important; } .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; } .nav-hamburger span { display: block; height: 1.5px; background: var(--mid); transition: transform 0.25s, opacity 0.25s; transform-origin: center; } .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--n0); } .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--n0); } .mobile-menu { display: none; position: fixed; top: var(--nav-offset, 64px); left: 0; right: 0; bottom: 0; z-index: 199; background: rgba(7, 11, 17, 0.98); backdrop-filter: blur(24px); flex-direction: column; padding: 20px 24px 28px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-height: calc(100dvh - var(--nav-offset, 64px)); } .mobile-menu.open { display: flex; } .mobile-nav-links { list-style: none; flex: 1 1 auto; min-height: 0; } .mobile-nav-links li { border-bottom: 1px solid var(--border); } .mobile-nav-links a, .mobile-accordion-toggle { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text); transition: color 0.15s; width: 100%; background: none; border: none; text-align: left; } .mobile-nav-links a:hover, .mobile-accordion-toggle:hover { color: var(--n0); } .nav-arr { font-size: 14px; color: var(--dim); } .mobile-nav-sub { display: flex; gap: 6px; padding: 10px 0 4px; } .mobile-accordion-item { padding: 0; } .mobile-accordion-toggle { align-items: end; gap: 20px; cursor: pointer; } .mobile-accordion-copy { display: grid; gap: 4px; min-width: 0; } .mobile-accordion-title { display: block; line-height: 1.08; } .mobile-accordion-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--dim); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.18s ease, color 0.18s ease; margin-bottom: 10px; } .mobile-accordion-toggle[aria-expanded="true"] .mobile-accordion-icon { transform: rotate(225deg) translateY(1px); color: var(--n0); } .mobile-accordion-panel { padding: 0 0 14px; } .mobile-link--unit { padding: 0 0 12px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--mid) !important; border-top: 1px solid rgba(255, 255, 255, 0.04); margin-top: 2px; } .mobile-submenu { display: grid; gap: 0; padding: 0; } .mobile-sublink { padding: 10px 0 10px 18px !important; font-family: var(--body) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--mid) !important; letter-spacing: 0 !important; } .mobile-sublink:hover { color: var(--n0) !important; } .mobile-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; } .mobile-tag.growth { background: rgba(232, 91, 158, 0.15); color: var(--growth); border: 1px solid rgba(232, 91, 158, 0.25); } .mobile-tag.innovation { background: rgba(34, 182, 230, 0.12); color: var(--innovation); border: 1px solid rgba(34, 182, 230, 0.2); } .mobile-tag.learn { background: rgba(242, 131, 63, 0.12); color: var(--learn); border: 1px solid rgba(242, 131, 63, 0.2); } .mobile-menu-footer { padding-top: 20px; border-top: 1px solid var(--border); padding-bottom: calc(env(safe-area-inset-bottom) + 4px); } .mobile-cta-dock { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 190; pointer-events: none; padding: 0 16px calc(env(safe-area-inset-bottom) + 12px); transition: opacity 0.18s ease, transform 0.18s ease; } .mobile-cta-dock__inner { display: flex; justify-content: flex-end; max-width: 100%; } .mobile-cta-dock__button { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; min-width: 210px; max-width: min(76vw, 260px); padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(17, 24, 36, 0.84), rgba(8, 12, 18, 0.92)), rgba(9, 13, 20, 0.85); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } .mobile-cta-dock__button:hover, .mobile-cta-dock__button:focus-visible { color: var(--n0); border-color: rgba(168, 227, 45, 0.34); background: linear-gradient(180deg, rgba(192, 241, 59, 0.92), rgba(168, 227, 45, 0.92)), var(--lime); transform: translateY(-1px); } body.nav-locked .mobile-cta-dock, .js body:not(.cta-dock-ready) .mobile-cta-dock { opacity: 0; transform: translateY(10px); } .js body:not(.cta-dock-ready) .mobile-cta-dock__button { pointer-events: none; } @media (max-width: 1100px) { html { --nav-offset: 64px; } #nav { min-height: 64px !important; } .nav-shell { min-height: 64px; padding: 0 32px; flex-direction: row; align-items: center; gap: 24px; } .nav-utility, .nav-preferences--utility { display: none; } .nav-topbar { display: none; } .nav-links { display: none !important; } .btn-ghost-nav, .btn-apply-nav, .nav-right-divider, .nav-preferences { display: none !important; } .nav-right { display: none !important; } .nav-hamburger { display: flex !important; } .mobile-cta-dock { display: block; } } button, [role="button"], .case-card, .proof-card, .service-card, .stat-row, .insight-card, .unit-panel, .phase-card, .contrast-item, .related-card, .stack-layer, .nav-submenu-link, .locale-link, .pagination-btn, .pagination-page, .btn-ghost-nav, .btn-apply-nav, .btn-hero, .btn-text-link, .btn-about { cursor: pointer; } .mobile-menu-note { font-size: 13px; color: var(--dim); text-align: center; } .unit-paths { padding: 88px 0; background: var(--bg); border-top: 1px solid var(--b1); } .unit-paths-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 40px; } .unit-paths-copy { max-width: 520px; font-size: 15px; line-height: 1.8; color: var(--mid); } .unit-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .unit-path-card { display: grid; gap: 12px; padding: 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--b1); border-radius: 14px; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .unit-path-card:hover, .unit-path-card:focus-visible { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.7); } .unit-path-card:hover .unit-path-link, .unit-path-card:focus-visible .unit-path-link { color: var(--n0); letter-spacing: 0.02em; } .unit-path-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); } .unit-path-title { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--n0); line-height: 1.15; } .unit-path-desc { /* Was 12px — actual reading copy (a service-path summary sentence, not a label/eyebrow), below the body-text floor. Bumped one step to 13px. */ font-size: 15px; line-height: 1.7; color: var(--mid); } /* One-line state row — mirrors the visual weight of .service-metric (bold, pill-backed, distinct from the description above it) without presenting a fabricated numeric stat. Sourced from the service's real outcomes[0]/ outcomesEs[0] data (see growth.njk / innovation.njk). */ .unit-path-state { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--unit-rgb), .07); border: 1px solid rgba(var(--unit-rgb), .15); border-radius: 5px; padding: 6px 12px; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--unit); } .unit-path-link { font-size: 11px; font-weight: 700; color: var(--text); } body.section-growth .unit-path-title, body.unit-growth .unit-path-title { color: var(--growth); } body.section-innovation .unit-path-title, body.unit-innovation .unit-path-title { color: var(--innovation); } body.section-learn .unit-path-title, body.unit-learn .unit-path-title { color: var(--learn); } body.section-growth .unit-path-card:hover, body.unit-growth .unit-path-card:hover { border-color: rgba(232, 91, 158, 0.65); box-shadow: 0 22px 48px -20px rgba(232, 91, 158, 0.45); } body.section-innovation .unit-path-card:hover, body.unit-innovation .unit-path-card:hover { border-color: rgba(34, 182, 230, 0.65); box-shadow: 0 22px 48px -20px rgba(34, 182, 230, 0.45); } body.section-learn .unit-path-card:hover, body.unit-learn .unit-path-card:hover { border-color: rgba(242, 131, 63, 0.28); } #hero { --hero-min-height: 85vh; --hero-padding-top: 140px; --hero-padding-bottom: 96px; --hero-overlay: none; --hero-top-accent: linear-gradient(90deg, #E85B9E 0%, #22B6E6 50%, #F2833F 100%); --hero-inner-max: 1200px; --hero-text-align: left; --hero-items-align: flex-start; --hero-title-max: 880px; --hero-sub-max: 580px; --hero-badges-margin: 48px; min-height: var(--hero-min-height); padding: var(--hero-padding-top) 0 var(--hero-padding-bottom); position: relative; overflow: hidden; background: var(--bg); display: flex; align-items: center; } #hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hero-overlay); } #hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hero-top-accent); } #hero .hero-inner { position: relative; z-index: 1; max-width: var(--hero-inner-max); margin: 0 auto; width: 100%; text-align: var(--hero-text-align); display: flex; flex-direction: column; align-items: var(--hero-items-align); } #hero .hero-h { font-family: var(--display); font-size: clamp(36px, 6.5vw, 80px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.92; color: var(--n0); margin-bottom: 28px; max-width: var(--hero-title-max); } body.section-news #hero .wrap, body.section-insights #hero .wrap, body.section-cases #hero .wrap, body.section-impact #hero .wrap, body.section-about #hero .wrap, body.section-contact #hero .wrap, body.section-how-we-work #hero .wrap { position: relative; z-index: 1; } /* ── SINGLE ENTRY: hero layout reset (bottom-left, photo bg) ── */ body.section-insights:not(.page-insights) #hero, body.section-news:not(.page-news) #hero, body.section-cases:not(.page-cases) #hero { height: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 96px 40px 44px; } /* Suppress tri-colour bar on single entry pages */ body.section-insights:not(.page-insights) #hero::after, body.section-news:not(.page-news) #hero::after, body.section-cases:not(.page-cases) #hero::after { display: none; } /* Insight / news single-entry accent line */ body.section-insights:not(.page-insights) #hero::before, body.section-news:not(.page-news) #hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--insight); z-index: 3; } /* Cases single-entry accent line */ body.section-cases:not(.page-cases) #hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--unit); z-index: 3; } /* Full-bleed photo + overlay — shared by all single entry pages */ .hero-image { position: absolute; inset: 0; background: linear-gradient(160deg, #0d1520 0%, #17131e 42%, #0a1520 100%); background-position: center; background-repeat: no-repeat; background-size: cover; } /* `background-image`, NOT the `background` shorthand. The shorthand resets background-size to `auto` and background-repeat to `repeat`, and this selector outranks the longhands above it — so every case-study hero was tiling its photo at natural size instead of covering the box. That is the "header image doesn't have a no-repeat" Jon reported on union-promotions, whose source is 1081x1080 sitting in a full-bleed box. */ body.section-cases:not(.page-cases) .hero-image { background-image: linear-gradient(160deg, #0d1520 0%, #1a0a14 40%, #0a1520 100%); } body.section-cases:not(.page-cases) .hero-image::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity: .4; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,13,20,.84) 0%, rgba(9,13,20,.62) 34%, rgba(9,13,20,.26) 72%, rgba(9,13,20,.14) 100%); } /* Visible AI label for a real-event photo whose frame was extended with generative fill (.claude/rules/ai-transparency.md: real people and events need a human-readable label). */ .hero-ai-label { position: absolute; right: 16px; bottom: 12px; z-index: 4; padding: 3px 8px; border-radius: 4px; background: rgba(9,13,20,.72); color: rgba(255,255,255,.86); font-size: 11px; letter-spacing: .02em; line-height: 1.4; } .hero-glow { position: absolute; top: -20%; left: -10%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--unit-rgb),.12) 0%, transparent 65%); pointer-events: none; } /* ── SINGLE ENTRY: hero inner card ── */ body.section-insights:not(.page-insights) #hero .hero-inner, body.section-news:not(.page-news) #hero .hero-inner { position: relative; z-index: 2; max-width: 560px; margin: 0; width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: linear-gradient(180deg, rgba(9,13,20,.68), rgba(9,13,20,.82)); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); box-shadow: 0 24px 52px rgba(0,0,0,.32); } body.section-cases:not(.page-cases) #hero .hero-inner { position: relative; z-index: 2; max-width: 580px; margin: 0; width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: linear-gradient(180deg, rgba(9,13,20,.68), rgba(9,13,20,.82)); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); box-shadow: 0 24px 52px rgba(0,0,0,.32); } /* ── SINGLE ENTRY: hero heading ── */ body.section-insights:not(.page-insights) #hero .hero-h, body.section-news:not(.page-news) #hero .hero-h { font-family: var(--display); font-size: clamp(16px, 2.15vw, 26px); font-weight: 700; letter-spacing: -.038em; line-height: 1.02; color: #f7f9fc; margin-bottom: 12px; max-width: none; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; } body.section-cases:not(.page-cases) #hero .hero-h { font-family: var(--display); font-size: clamp(17px, 2.25vw, 28px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; color: #f7f9fc; margin-bottom: 12px; max-width: none; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; } /* ── ARCHIVE: heading colors (no :not — applies to archive heroes) ── */ body.section-news #hero .hero-h, body.section-insights #hero .hero-h, body.section-cases #hero .hero-h, body.section-impact #hero .hero-h, body.section-about #hero .hero-h, body.section-contact #hero .hero-h, body.section-how-we-work #hero .hero-h { max-width: none; font-size: clamp(34px, 4.8vw, 60px); line-height: 0.96; color: #f7f9fc; } body.section-news #hero .hero-h em, body.section-insights #hero .hero-h em, body.section-cases #hero .hero-h em, body.section-impact #hero .hero-h em, body.section-about #hero .hero-h em, body.section-contact #hero .hero-h em, body.section-how-we-work #hero .hero-h em { color: rgba(247,249,252,.72); } body.section-news #hero .hero-sub, body.section-insights #hero .hero-sub, body.section-cases #hero .hero-sub, body.section-impact #hero .hero-sub, body.section-about #hero .hero-sub, body.section-contact #hero .hero-sub, body.section-how-we-work #hero .hero-sub { max-width: 42ch; margin-bottom: 36px; color: rgba(221,226,235,.86); } body.section-news #hero .hero-badges, body.section-insights #hero .hero-badges, body.section-cases #hero .hero-badges, body.section-impact #hero .hero-badges, body.section-about #hero .hero-badges, body.section-contact #hero .hero-badges, body.section-how-we-work #hero .hero-badges { margin-bottom: 0; } body.section-news #hero .hero-badge, body.section-insights #hero .hero-badge, body.section-cases #hero .hero-badge, body.section-impact #hero .hero-badge, body.section-about #hero .hero-badge, body.section-contact #hero .hero-badge, body.section-how-we-work #hero .hero-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } body.section-news #hero .badge-text, body.section-insights #hero .badge-text, body.section-cases #hero .badge-text, body.section-impact #hero .badge-text, body.section-about #hero .badge-text, body.section-contact #hero .badge-text, body.section-how-we-work #hero .badge-text { color: rgba(221,226,235,.9); } body.section-about #hero .hero-link, body.section-contact #hero .hero-link, body.section-how-we-work #hero .hero-link { color: rgba(221,226,235,.9); } /* ── HERO EYEBROW TAGS ── */ .hero-cat { font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:3px 10px; border-radius:4px; background:rgba(168,163,90,.1); color:var(--insight); border:1px solid rgba(168,163,90,.2); } .hero-read-time { font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); background:rgba(255,255,255,.06); border:1px solid var(--b1); border-radius:4px; padding:3px 10px; } .hero-unit-tag { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:4px; } .hero-industry-tag { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); background:rgba(255,255,255,.06); border:1px solid var(--b1); border-radius:4px; padding:3px 10px; } /* ── LIGHT MODE: single entry hero ── */ html[data-theme="light"] body.section-insights:not(.page-insights) #hero .hero-inner, html[data-theme="light"] body.section-news:not(.page-news) #hero .hero-inner, html[data-theme="light"] body.section-cases:not(.page-cases) #hero .hero-inner { backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,246,253,.96)); box-shadow:0 24px 54px rgba(15,23,42,.16); border-color:rgba(15,23,42,.14); } html[data-theme="light"] #hero .hero-h em { color: rgba(15,23,42,.56); } html[data-theme="light"] #hero .hero-phrase { color: var(--mid); } html[data-theme="light"] .hero-cat { color:#6a6828; background:rgba(168,163,90,.14); border-color:rgba(168,163,90,.32); } html[data-theme="light"] .hero-read-time { color:var(--mid); background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.12); } html[data-theme="light"] .hero-industry-tag { color:var(--mid); background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.12); } html[data-theme="light"] body.unit-growth .hero-unit-tag { color:#891250; background:rgba(232,91,158,.10); border-color:rgba(232,91,158,.22); } html[data-theme="light"] body.unit-innovation .hero-unit-tag { color:#006d90; background:rgba(34,182,230,.09); border-color:rgba(34,182,230,.18); } html[data-theme="light"] body.unit-learn .hero-unit-tag { color:#923b14; background:rgba(242,131,63,.09); border-color:rgba(242,131,63,.18); } /* .phase-badge.accent stacks two unit-tinted overlays (.phase-card.accent 5% + badge 8%) on top of the light theme's near-white surfaces. At that cumulative opacity the background tints toward the same hue as var(--unit) text, which drops the ratio below AA (~4.2:1 measured) even though --unit itself is theme-adaptive. Darken the badge text specifically for this compounded case — reusing the growth override already proven against .hero-unit-tag, and a slightly darker innovation blue tuned for the badge's more-tinted backdrop. */ html[data-theme="light"] body.unit-growth .phase-badge.accent { color:#891250; } html[data-theme="light"] body.unit-innovation .phase-badge.accent { color:#0A5A7A; } #hero .hero-h em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.9em; color: var(--unit); display: block; margin-top: 8px; } #hero .hero-sub { font-size: clamp(14px, 1.5vw, 17px); color: var(--text); line-height: 1.85; max-width: var(--hero-sub-max); margin-bottom: 44px; } #hero .hero-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--hero-badges-margin); } #hero .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--unit-rgb), 0.08); border: 1px solid rgba(var(--unit-rgb), 0.18); border-radius: 6px; padding: 8px 14px; } #hero .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--unit); flex-shrink: 0; } #hero .badge-text { font-size: 11.5px; color: var(--text); } #hero .hero-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; } #hero .hero-link { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s ease, gap 0.15s ease; } #hero .hero-link:hover { gap: 9px; } main p, .hero-sub, .hero-subtitle, .section-p, [class*="excerpt"], [class*="desc"], [class$="-body"] p { text-align: justify; text-justify: inter-word; hyphens: auto; } /* Hero copy is short and sits over imagery: never justified. */ .au-copy p, #hero .hero-phrase { text-align: left; } /* Justified text opens wide gaps between words on a narrow column. */ @media (max-width: 720px) { main p, .hero-sub, .hero-subtitle, .section-p, [class*="excerpt"], [class*="desc"], [class$="-body"] p { text-align: left; } } footer.site-footer { position: relative !important; z-index: 1 !important; overflow: hidden; padding: 72px 56px 52px !important; background: radial-gradient(circle at 12% 0%, rgba(232, 91, 158, 0.12), transparent 28%), radial-gradient(circle at 88% 8%, rgba(34, 182, 230, 0.1), transparent 30%), linear-gradient(180deg, rgba(15, 19, 29, 0.98), rgba(9, 13, 20, 1)) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } footer.site-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%), radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 40%); pointer-events: none; } .footer-inner { max-width: 1280px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important; gap: 48px !important; align-items: start !important; position: relative; z-index: 1; } .footer-left, .footer-right { display: flex; flex-direction: column; gap: 24px; } .footer-brand { display: flex; flex-direction: column; gap: 14px; } .footer-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--innovation); } .footer-statement { display: grid; gap: 10px; max-width: 640px; } .footer-headline { margin: 0; font-family: var(--display); font-size: clamp(24px, 3vw, 40px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--n0); } .footer-copy { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.75; max-width: 56ch; } .footer-copy--fine { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } .footer-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .footer-cta { display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(168, 227, 45, 0.14), rgba(34, 182, 230, 0.12)); border: 1px solid rgba(168, 227, 45, 0.22); color: var(--n0); font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } .footer-cta:hover { transform: translateY(-1px); border-color: rgba(168, 227, 45, 0.34); background: linear-gradient(135deg, rgba(168, 227, 45, 0.2), rgba(34, 182, 230, 0.16)); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24); } .footer-email { display: inline-flex; flex-direction: column; gap: 2px; min-width: 240px; padding: 12px 0; } .footer-email span:last-child { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--n0); } .footer-meta-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .footer-social { display: grid; gap: 12px; } .footer-social-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .footer-social-link { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.03); color: var(--text); transition: color .15s, border-color .15s, transform .15s, background .15s; } .footer-social-link:hover { color:var(--lime-ink); border-color: rgba(168, 227, 45, 0.28); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); } .footer-social-link svg { width: 18px; height: 18px; display: block; } .footer-social-link svg * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .footer-social-link svg .social-fill { fill: currentColor; stroke: none; } .footer-links-block { display: grid; gap: 16px; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .footer-links-title { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--innovation); } .footer-links-block--units { gap: 18px; } .footer-units { display: grid; gap: 12px; } .footer-unit { display: grid; gap: 4px; padding: 16px 16px 15px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .footer-unit:hover { transform: translateY(-1px); border-color: rgba(168, 227, 45, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16); } .footer-unit-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .footer-unit-title { font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.03em; line-height: 1.04; color: var(--n0); } .footer-unit-copy { /* Was 12px — a real descriptive sentence about the unit, not a label. */ font-size: 13px; line-height: 1.55; color: var(--mid); } .footer-links { gap: 12px 18px !important; justify-content: flex-start !important; flex-wrap: wrap !important; } .footer-links a, .footer-compact-list a { font-size: 12px !important; color: var(--dim) !important; transition: color 0.15s !important, transform 0.15s !important; } .footer-links a:hover, .footer-compact-list a:hover { color: var(--n0) !important; } .footer-compact-list { list-style: none; display: grid; gap: 10px; } .footer-compact-list li { display: flex; } .mobile-menu-note, #cta .cta-note, .empty-state, .empty-state-sub, .empty-sub, .insights-empty-sub, .cases-empty-sub { text-align: center !important; } #cta { --cta-border: var(--b1); --cta-glow: radial-gradient(circle, rgba(34, 182, 230, 0.04) 0%, transparent 60%); --cta-eyebrow-color: var(--dim); --cta-copy-color: var(--mid); --cta-em-color: rgba(255, 255, 255, 0.55); --cta-note-color: var(--dim); --cta-link-color: var(--dim); background: var(--bg) !important; border-top: 1px solid var(--cta-border) !important; padding: 0 !important; text-align: left !important; position: relative; overflow: hidden; } #cta::before { content: ""; position: absolute; top: -60%; left: 50%; transform: translateX(-50%); width: 900px; aspect-ratio: 1; border-radius: 50%; background: var(--cta-glow) !important; pointer-events: none; } #cta .cta-inner { max-width: 1200px !important; margin: 0 auto !important; padding: 96px 56px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 80px !important; position: relative; z-index: 1; } #cta .cta-eyebrow { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--cta-eyebrow-color) !important; margin-bottom: 16px !important; } #cta .cta-h, #cta .cta-title { font-family: var(--display) !important; font-size: clamp(28px, 3.5vw, 48px) !important; font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1.1 !important; color: var(--n0) !important; margin-bottom: 14px !important; } #cta .cta-h em, #cta .cta-title em { font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; color: var(--cta-em-color) !important; font-size: 0.95em !important; } #cta .cta-p, #cta .cta-desc { max-width: 440px !important; font-size: 16px !important; line-height: 1.75 !important; color: var(--cta-copy-color) !important; } #cta .cta-right { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 220px !important; align-items: center !important; } #cta .cta-note { font-size: 13px !important; color: var(--cta-note-color) !important; text-align: center !important; } #cta .cta-sub-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cta-link-color) !important; transition: color 0.15s ease, gap 0.15s ease; } #cta .cta-sub-link:hover { color: var(--cta-eyebrow-color) !important; gap: 10px; } /* ── CTA AURORA ── */ @property --cta-angle{syntax:'';initial-value:0deg;inherits:false} @keyframes cta-spin{to{--cta-angle:360deg}} #cta::after{ content:''; position:absolute; inset:-60% -40%; pointer-events:none; z-index:0; background:conic-gradient( from var(--cta-angle), transparent 0deg, rgba(34,182,230,.09) 60deg, rgba(232,91,158,.06) 150deg, rgba(242,131,63,.05) 240deg, transparent 330deg ); animation:cta-spin 16s linear infinite; } @media(prefers-reduced-motion:reduce){#cta::after{animation:none}} /* ── CTA BUTTON ANIMATED BORDER ── */ @property --btn-angle{syntax:'';initial-value:0deg;inherits:false} @keyframes btn-border-spin{to{--btn-angle:360deg}} .btn-cta::before{ content:''; position:absolute; inset:-1px; border-radius:7px; background:conic-gradient( from var(--btn-angle), transparent 0deg, rgba(34,182,230,.65) 60deg, rgba(232,91,158,.45) 180deg, rgba(242,131,63,.35) 300deg, transparent 360deg ); z-index:-1; opacity:0; transition:opacity .3s ease; } .btn-cta:hover::before{opacity:1;animation:btn-border-spin 2.5s linear infinite} @media(prefers-reduced-motion:reduce){ .btn-cta:hover::before{opacity:1;animation:none;background:rgba(34,182,230,.25)} } :root { --pointer-x: 50vw; --pointer-y: 50vh; } .spotlight-card { --glow-rgb: 236, 72, 153; --radius: 18px; --border-width: 1px; --spot-size: 180px; --line-size: 90px; --bg-softness: 280px; position: relative; overflow: visible; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(255, 255, 255, 0.02); } .spotlight-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient( circle var(--bg-softness) at var(--pointer-x) var(--pointer-y), rgba(var(--glow-rgb), 0.18) 0%, rgba(var(--glow-rgb), 0.12) 12%, rgba(var(--glow-rgb), 0.06) 24%, rgba(var(--glow-rgb), 0.02) 38%, transparent 58% ); } .spotlight-card::after { content: ""; position: absolute; inset: calc(var(--border-width) * -1); border-radius: inherit; padding: var(--border-width); pointer-events: none; z-index: 2; background: radial-gradient( circle var(--spot-size) at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.95) 0%, rgba(var(--glow-rgb), 0.95) 10%, rgba(var(--glow-rgb), 0.65) 18%, rgba(var(--glow-rgb), 0.22) 30%, rgba(var(--glow-rgb), 0.08) 42%, transparent 58% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: saturate(120%) brightness(1.1); } .spotlight-card__content { position: relative; z-index: 1; height: 100%; border-radius: inherit; } .spotlight-card__content::before { content: ""; position: absolute; inset: -40px; border-radius: calc(var(--radius) + 24px); pointer-events: none; z-index: -1; background: radial-gradient( circle 140px at var(--pointer-x) var(--pointer-y), rgba(var(--glow-rgb), 0.30) 0%, rgba(var(--glow-rgb), 0.12) 25%, rgba(var(--glow-rgb), 0.05) 40%, transparent 62% ); filter: blur(18px); opacity: 0.9; } .spotlight-card > * { position: relative; z-index: 1; } .spotlight-card.is-active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.03); } .glow-blue { --glow-rgb: 59, 130, 246; } .glow-purple { --glow-rgb: 168, 85, 247; } .glow-magenta { --glow-rgb: 236, 72, 153; } .glow-orange { --glow-rgb: 249, 115, 22; } .section-growth #cta { --cta-border: rgba(232, 91, 158, 0.12); --cta-glow: radial-gradient(circle, rgba(232, 91, 158, 0.07) 0%, transparent 70%); --cta-eyebrow-color: var(--growth); --cta-copy-color: rgba(255, 255, 255, 0.38); --cta-em-color: rgba(255, 255, 255, 0.6); --cta-note-color: rgba(255, 255, 255, 0.22); } .section-innovation #cta { --cta-border: rgba(34, 182, 230, 0.1); --cta-glow: radial-gradient(circle, rgba(34, 182, 230, 0.06) 0%, transparent 70%); --cta-eyebrow-color: var(--innovation); --cta-copy-color: rgba(255, 255, 255, 0.35); --cta-note-color: rgba(255, 255, 255, 0.2); } .section-learn #cta { --cta-glow: radial-gradient(circle, rgba(242, 131, 63, 0.06) 0%, transparent 65%); --cta-eyebrow-color: var(--learn); --cta-copy-color: var(--mid); --cta-note-color: var(--dim); --cta-link-color: var(--dim); } /* Unified with .btn-cta (base.css ~L139) / .au-cta (aurora.css) — this was previously a THIRD, completely different primary-CTA treatment: multi-layer gradient fill, glare/shine pseudo-elements, elaborate multi-layer box-shadow, 12px label. Flattened to match the locked primary CTA exactly: flat --lime fill, #090D14 ink, 6px radius, var(--display) 13px, no shadow/glow. The .btn-label / .btn-hover-shine child markup and the .liquid-ripple click effect are still injected by initLiquidButtons() in transitions.js (and pre-rendered in header.njk) — rather than touching that JS/markup wiring, the CSS below keeps the DOM structure intact but neutralizes every glare/ shine/ripple visual so it renders identically to .btn-cta. */ .btn-apply-nav { position: relative; overflow: hidden; isolation: isolate; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px !important; border-radius: 6px !important; font-family: var(--display) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; border: none !important; background: var(--lime) !important; color: #090D14 !important; text-shadow: none; box-shadow: none; transition: opacity 0.15s ease; } .btn-apply-nav::before, .btn-apply-nav::after { display: none; } .btn-apply-nav .btn-hover-shine { display: none; } .btn-apply-nav .btn-label { position: relative; display: inline-flex; align-items: center; justify-content: center; z-index: 1; } .btn-apply-nav .liquid-ripple { display: none; } .btn-apply-nav:hover { opacity: 0.9; } .btn-apply-nav:active, .btn-apply-nav.is-pressed { opacity: 0.85; } @keyframes btn-hover-sheen { 0% { transform: translateX(-180%) skewX(-22deg); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateX(420%) skewX(-22deg); opacity: 0; } } .liquid-ripple { position: absolute; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0) 72%); animation: liquid-ripple 0.68s ease-out forwards; } @keyframes liquid-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.72; } 100% { transform: translate(-50%, -50%) scale(4.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .page-transitioning, .page-entered { transition: none; } .spotlight-card::before, .spotlight-card::after, .spotlight-card .spotlight-card__content::before { background: none; } .btn-apply-nav { transition: none; } } @media (max-width: 1024px) { #cta .cta-inner { padding: 64px 32px !important; grid-template-columns: 1fr !important; gap: 40px !important; } footer.site-footer { padding-left: 32px !important; padding-right: 32px !important; } .nav-shell { padding: 0 32px; } #hero { --hero-padding-top: 100px; --hero-padding-bottom: 80px; } .footer-inner { grid-template-columns: 1fr !important; gap: 24px !important; } .nav-submenu { display: none; } .nav-right { gap: 10px !important; } .nav-right-divider { height: 24px; } .unit-path-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { html { --nav-offset: 64px; } #cta .cta-inner { padding: 64px 20px !important; } #cta .cta-right { min-width: 0 !important; } .nav-shell { width: 100%; padding: 0 20px; min-height: 64px; flex-direction: row; align-items: center; } .nav-utility { display: none; } .nav-topbar { display: none; } .nav-links, .btn-ghost-nav, .btn-apply-nav { display: none !important; } .nav-logo svg { width: 132px; } .nav-locale { margin-left: auto; margin-right: 6px; } .nav-right-divider { display: none; } .nav-hamburger { display: flex !important; } footer.site-footer { padding: 32px 20px !important; } #hero { --hero-padding-top: 100px; --hero-padding-bottom: 64px; --hero-min-height: auto; } .footer-inner { grid-template-columns: 1fr !important; gap: 24px !important; align-items: flex-start !important; } .footer-links-block { padding: 20px; } .footer-actions { align-items: stretch; } .footer-email { min-width: 0; } .unit-paths { padding: 64px 0; } .unit-paths-header { display: grid; gap: 18px; } .unit-path-grid { grid-template-columns: 1fr; } } /***************************** LeadConnector launcher override *****************************/ #chat-widget-root { position: relative; z-index: 9500; } #chat-widget-root chat-widget, .leadconnector-launcher, .leadconnector-chat-launcher { position: fixed !important; right: 24px !important; bottom: 24px !important; z-index: 9500 !important; pointer-events: auto; } body.audit-popup-open { overflow: hidden; } .audit-popup { position: fixed; inset: 0; z-index: 1205; display: grid; place-items: center; padding: 24px; } .audit-popup[hidden] { display: none; } .audit-popup__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(var(--unit-rgb), 0.18), transparent 42%), rgba(4, 7, 12, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .audit-popup__dialog { position: relative; z-index: 1; width: min(1100px, 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; background: linear-gradient(145deg, rgba(15, 22, 34, 0.98), rgba(9, 13, 20, 0.98)), linear-gradient(180deg, rgba(var(--unit-rgb), 0.12), transparent 36%); box-shadow: 0 24px 90px rgba(0, 0, 0, 0.45); display: grid; grid-template-columns: 1.05fr 0.95fr; overflow: hidden; } .audit-popup__visual, .audit-popup__form-shell { padding: 32px; } .audit-popup__visual { border-right: 1px solid rgba(255, 255, 255, 0.08); background: radial-gradient(circle at top left, rgba(var(--unit-rgb), 0.16), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 45%); } .audit-popup__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--unit); margin-bottom: 12px; } .audit-popup__title { font-family: var(--display); font-size: clamp(30px, 4vw, 54px); line-height: 0.96; letter-spacing: -0.05em; color: var(--n0); max-width: 12ch; } .audit-popup__copy { margin-top: 18px; max-width: 42ch; font-size: 15px; line-height: 1.75; color: var(--mid); } .audit-popup__list { margin-top: 22px; display: grid; gap: 10px; list-style: none; } .audit-popup__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 14px; line-height: 1.55; } .audit-popup__list li::before { content: ''; width: 8px; height: 8px; margin-top: 7px; border-radius: 999px; background: var(--unit); box-shadow: 0 0 0 4px rgba(var(--unit-rgb), 0.12); flex: 0 0 auto; } .audit-popup__badge { display: inline-flex; margin-top: 22px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(var(--unit-rgb), 0.18); background: rgba(var(--unit-rgb), 0.08); color: var(--text); font-size: 12px; font-weight: 600; } .audit-popup__form-shell { display: grid; gap: 16px; align-content: start; } .audit-popup__form-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); } .audit-popup__form-host { min-height: 360px; padding: 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } .audit-popup__consent { /* Was 12px — a

of form-consent copy the user is meant to actually read before submitting, not decorative chrome. */ font-size: 13px; line-height: 1.65; color: var(--mid); } .audit-popup__consent a { color: var(--n0); text-decoration: underline; text-underline-offset: 2px; } .audit-popup__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(9, 13, 20, 0.8); color: var(--n0); font-size: 18px; line-height: 1; cursor: pointer; } .audit-popup__close:hover { border-color: rgba(var(--unit-rgb), 0.28); background: rgba(255, 255, 255, 0.06); } /* ── SCROLL PROGRESS BAR (sitewide) ── */ #scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--growth,#E85B9E),var(--innovation,#22B6E6) 50%,var(--learn,#F2833F));z-index:9999;pointer-events:none;will-change:width} @media(max-width:1024px){ .audit-popup { padding: 18px; } .audit-popup__dialog { grid-template-columns: 1fr; } .audit-popup__visual { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .audit-popup__form-host { min-height: 320px; } } @media(max-width:720px){ .audit-popup { padding: 12px; } .audit-popup__visual, .audit-popup__form-shell { padding: 22px; } .audit-popup__title { max-width: none; } } /* ── WORD REVEAL (sitewide) ── */ .w-reveal{display:inline;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.9,.2,1)} .js .w-reveal{opacity:0;transform:translateY(6px)} .w-reveal.revealed{opacity:1!important;transform:none!important} @media(prefers-reduced-motion:reduce){.w-reveal{opacity:1!important;transform:none!important}} /* ── FILM GRAIN OVERLAY (CSS — visible across all sections) ─────────────── */ /* Replaces the buried WebGL canvas grain which is hidden behind solid section bgs */ body::before{ content:''; position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.032; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E"); background-size:300px 300px; mix-blend-mode:screen; animation:grain-flicker .14s steps(1) infinite; } @keyframes grain-flicker{ 0% {transform:translate(0,0)} 20% {transform:translate(-8px,4px)} 40% {transform:translate(4px,-6px)} 60% {transform:translate(-4px,-8px)} 80% {transform:translate(6px,4px)} } @media(prefers-reduced-motion:reduce){body::before{animation:none}} /* ── CURSOR BLOOM ─────────────────────────────────────────────────────────── */ #cursor-bloom{ position:fixed; top:0;left:0; width:320px;height:320px; border-radius:50%; background:radial-gradient(circle,rgba(34,182,230,.05) 0%,transparent 70%); pointer-events:none; z-index:8990; will-change:transform; mix-blend-mode:screen; opacity:1; transition:opacity .4s ease; } /* ── PROOF / CASE GRID (sitewide shared) ──────────────────────────────────── */ .proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--b1);border:1px solid var(--b1);border-radius:10px;overflow:hidden} .proof-stack{display:grid;grid-template-rows:repeat(2,1fr);gap:2px;background:var(--b1);min-height:0} .case-card{background:var(--case-card-bg);display:flex;flex-direction:column;text-decoration:none;transition:background .28s ease,transform .28s ease} .case-card:hover{background:var(--case-card-hover-bg);transform:translateY(-2px)} .case-card.featured{background:var(--case-card-featured-bg)} .case-img{ aspect-ratio:4/3; display:flex;align-items:flex-end; padding:16px; font-size:11px;color:var(--dim);font-family:monospace;letter-spacing:.04em; position:relative;overflow:hidden; background-position:center center;background-repeat:no-repeat;background-size:cover; background-blend-mode:multiply,luminosity; transition:background .45s ease,background-blend-mode .45s ease; } .case-img span{position:relative;z-index:3} .case-img.unit-tint{background:linear-gradient(145deg,rgba(9,13,20,.78) 0%,rgba(9,13,20,.95) 70%)} .case-img.unit-tint::before{content:'';position:absolute;inset:0;background:var(--section-accent,#22B6E6);mix-blend-mode:multiply;opacity:.3;z-index:1;pointer-events:none} .case-img.dark-tint{background:linear-gradient(145deg,rgba(27,31,39,.9) 0%,rgba(9,13,20,.98) 70%)} .case-img::after{ content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background:var(--case-card-image-overlay); backdrop-filter:grayscale(1) saturate(.2); -webkit-backdrop-filter:grayscale(1) saturate(.2); transition:backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease,background .45s ease; } .case-card:hover .case-img{background-blend-mode:multiply,normal} .case-card:hover .case-img::after{ background:var(--case-card-image-overlay-hover); backdrop-filter:grayscale(0) saturate(1); -webkit-backdrop-filter:grayscale(0) saturate(1); } .case-body{padding:28px 28px 24px;flex:1;display:flex;flex-direction:column} .case-tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--case-card-client);margin-bottom:14px} .case-title{font-family:var(--display);font-size:clamp(16px,1.6vw,24px);font-weight:700;letter-spacing:-.03em;color:var(--case-card-title);line-height:1.15;margin-bottom:12px} .case-metric{font-family:var(--display);font-weight:700;letter-spacing:-.05em;color:var(--case-card-title);line-height:1;font-variant-numeric:tabular-nums} .case-metric.lg{font-size:clamp(44px,4.5vw,64px)} .case-metric.md{font-size:clamp(34px,3.5vw,48px)} .case-metric-sub{font-size:14px;color:var(--case-card-text);margin-top:6px;margin-bottom:14px;line-height:1.5} .case-card.featured .case-metric-sub,.case-card.featured .case-desc{color:var(--case-card-featured-text)} .case-desc{font-size:15px;color:var(--case-card-text);line-height:1.75;flex:1;margin-bottom:20px} .case-footer{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--case-card-footer-border)} .case-card.featured .case-footer{border-top-color:var(--case-card-featured-footer-border)} .case-client{font-size:11px;font-weight:600;color:var(--case-card-client)} .case-card--secondary{display:flex;flex-direction:column;min-height:0} .case-card--secondary .case-img{flex:1;min-height:180px;aspect-ratio:unset;padding:0;background-size:cover;background-position:center center} .case-card--secondary .case-body{flex-shrink:0;padding:16px 18px 14px} .case-card--secondary .case-tag{margin-bottom:8px} .case-card--secondary .case-title{font-size:16px;margin-bottom:0} .case-card--secondary .case-metric{font-size:28px} .case-card--secondary .case-metric-sub{font-size:13px;margin-bottom:8px} .case-card--secondary .case-desc{display:none} .case-card--secondary .case-footer{margin-top:auto;padding-top:10px} @media(max-width:1024px){ .proof-grid{grid-template-columns:1fr} .proof-stack{grid-template-rows:auto} .case-card--secondary{flex-direction:row;min-height:120px} .case-card--secondary .case-img{width:120px;height:auto;flex:none;min-height:unset;align-self:stretch} .case-card--secondary .case-body{flex:1;padding:14px 16px 12px} } #cursor-bloom.bloom-hidden{opacity:0} /* ── EDITORIAL QUEUE ── */ .editorial-queue{ padding: 84px 0; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); } .editorial-queue__header{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items:end; margin-bottom: 28px; } .editorial-queue__grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .queue-card{ border:1px solid var(--b1); border-radius:16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); padding:18px; box-shadow: var(--panel-shadow); } .queue-card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .queue-card__priority{ display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; background:rgba(var(--unit-rgb),.12); color:var(--unit); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .queue-card__section{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); } .queue-card__title{ font-family:var(--display); font-size:18px; line-height:1.15; letter-spacing:-.03em; color:var(--n0); margin-bottom:10px; } .queue-card__meta{ font-size:12px; color:var(--mid); line-height:1.6; margin-bottom:12px; } .queue-card__status{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } @media (max-width: 1024px){ .editorial-queue__header{ grid-template-columns:1fr; } .editorial-queue__grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 720px){ .editorial-queue{ padding:64px 0; } .editorial-queue__grid{ grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .js .reveal, .hero-eyebrow, .hero-h1, .hero-sub, .hero-actions, .hero-right, .hero-eyebrow.entered, .hero-h1.entered, .hero-sub.entered, .hero-actions.entered, .hero-right.entered { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .hero-logo-ticker__track, .eyebrow-dot, .val-stat::before, .btn-cta::before, .page-flash, #scroll-progress, #cursor-bloom, body::before { animation: none !important; transition: none !important; } .hero-logo-ticker__track { transform: none !important; } #bg-canvas { opacity: 0.08 !important; mix-blend-mode: normal !important; } } /* Stat citations link to the primary source */ .stat-source a{color:inherit;text-decoration:underline;text-underline-offset:2px} .stat-source a:hover{color:var(--unit,currentColor)} /* ── Pill link (design system) ───────────────────────────────────────────── Secondary navigation between related hubs (Impact · News · All case studies). Stronger than a text link, lighter than a button — Signal green stays reserved for primary CTAs. */ .pill-link{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.04);color:var(--text);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;transition:border-color .15s,background .15s,color .15s,gap .15s} .pill-link:hover,.pill-link:focus-visible{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09);color:var(--n0);gap:11px} .proof-header-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center} html[data-theme="light"] .pill-link{border-color:rgba(34,48,66,.24);background:rgba(34,48,66,.04);color:#223042} html[data-theme="light"] .pill-link:hover,html[data-theme="light"] .pill-link:focus-visible{border-color:rgba(34,48,66,.5);background:rgba(34,48,66,.08);color:#0f1722} /* ── Current page inside a nav dropdown ──────────────────────────────────── */ .nav-submenu-link.active{background:rgba(var(--unit-rgb,221,226,235),.1);box-shadow:inset 2px 0 0 var(--unit,var(--n0))} .nav-submenu-link.active .nav-submenu-title{color:var(--n0);font-weight:600} /* ── Click-to-play video (blocks/video-facade.njk) ───────────────────────── */ .video-facade{position:relative;width:100%} .video-facade__button{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;background:#05080d;cursor:pointer} .video-facade__thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease} .video-facade__button:hover .video-facade__thumb,.video-facade__button:focus-visible .video-facade__thumb{transform:scale(1.03)} .video-facade__play{position:absolute;inset:0;margin:auto;width:72px;height:50px;color:rgba(9,13,20,.82);transition:color .2s,transform .2s} .video-facade__play svg{width:100%;height:100%} .video-facade__button:hover .video-facade__play,.video-facade__button:focus-visible .video-facade__play{color:#ff0033;transform:scale(1.08)} .video-facade iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000} .video-facade__caption{margin-top:10px;font-size:14px;color:var(--mid)} /* ── Top bar links (Directus → Menus → "Top bar": About, Contact) ── */ .nav-utility{display:flex;align-items:center;gap:18px} .nav-utility-links{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0} .nav-utility-link{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--mid);transition:color .15s} .nav-utility-link:hover,.nav-utility-link:focus-visible,.nav-utility-link.active{color:var(--n0)} .nav-utility-link.active{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} html[data-theme="light"] .nav-utility-link{color:#3f4d63} html[data-theme="light"] .nav-utility-link:hover,html[data-theme="light"] .nav-utility-link.active{color:#0f1722} /* ── Footer phones (Directus → Globals → Phones) ── */ .footer-phones{display:flex;flex-direction:column;gap:8px} .footer-phone-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .footer-phone-list a{font-size:14px;color:var(--text);transition:color .15s} .footer-phone-list a:hover{color:var(--n0)} .footer-phone-city{display:inline-block;min-width:7.5em;color:var(--mid)} /* Booking calendar inside a popup (site-popups.njk) */ .audit-popup__form-host{position:relative;min-height:520px;display:flex} .audit-popup__form-host iframe{flex:1;border:0;min-height:520px;border-radius:8px;background:#fff} .audit-popup__loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:14px;color:var(--mid)} .audit-popup.is-loaded .audit-popup__loading{display:none} @media(max-width:720px){.audit-popup__form-host,.audit-popup__form-host iframe{min-height:60vh}}