/* NASMAK design tokens. Direction M, Momentum. Approved 2026-08-17.
   Variables only. No selectors, no components, no utilities.
   Every value used anywhere in the build must come from this file. */

:root {
  /* Section 2 opens from hero-brand teal; its imagery never enters the hero. */
  --h8-scene-reveal-depth: clamp(10rem, 30svh, 20rem);
  --h8-scene-bridge-base: #031a1c;
  --h8-scene-reveal-mask: linear-gradient(to bottom, transparent, rgb(0 0 0 / .08) calc(var(--h8-scene-reveal-depth) * .2), rgb(0 0 0 / .5) calc(var(--h8-scene-reveal-depth) * .55), #000 var(--h8-scene-reveal-depth));
  --h8-scene-exit-mask: linear-gradient(to bottom, #000 calc(100% - var(--h8-scene-reveal-depth) * .5), rgb(0 0 0 / var(--h8-scene-room-alpha, 1)) 100%);
  /* Scroll distance before the hero cube begins its services handover. */
  --h8-handoff-start: 24;
  /* Homepage services: calm, readable glass below the animated hero. */
  --h8-expertise-intro-width: 40rem;
  --h8-expertise-content-width: 68rem;
  --h8-expertise-intro-gap: 1rem;
  --h8-expertise-card-height: 17rem;
  --h8-expertise-card-heading-gap: .5rem;
  --h8-expertise-description-reserve: 3rem;
  --h8-expertise-dialog-copy: 1rem;
  --h8-expertise-list-reserve: 4rem;
  --h8-expertise-card-glass: blur(8px);
  /* Temporarily disabled; restore nasmak_env_1.png here to show the scene again. */
  --h8-expertise-background-image: none;
  --h8-expertise-background-filter: none;
  --h8-expertise-background-overlay: linear-gradient(180deg, rgb(0 14 18 / .18), rgb(0 14 18 / .3));
  --h8-expertise-art-bottom: 2.75rem;
  --h8-expertise-small-screen-copy: .9375rem;
  --h8-expertise-support-width: 48rem;
  --h8-expertise-prompt-width: 33rem;
  --h8-expertise-title-leading: 1.2;
  --h8-expertise-card-leading: 1.35;
  --h8-expertise-card-title-height: 2.7em;
  --h8-expertise-tight-tracking: -.025em;
  --h8-expertise-bullet-offset: -.2em;
  --h8-expertise-space: 1rem;
  --h8-expertise-top-space: clamp(3rem, 5vw, 5rem);
  --h8-expertise-gap: .875rem;
  --h8-expertise-padding: 1rem;
  --h8-expertise-title-size: clamp(2rem, 2.6vw, 2.625rem);
  --h8-expertise-card-title: 1rem;
  --h8-expertise-copy-size: .78125rem;
  --h8-expertise-lead-size: .9375rem;
  --h8-expertise-eyebrow-size: .8125rem;
  --h8-expertise-text: var(--h5-theme-heading);
  --h8-expertise-muted: var(--h5-theme-description);
  --h8-expertise-copy-type: 400 var(--h8-expertise-copy-size)/1.6 var(--font-body);
  --h8-expertise-small-copy-type: 400 var(--h8-expertise-small-screen-copy)/1.6 var(--font-body);
  --h8-expertise-footer-height: 3rem;
  --h8-expertise-border-width: 1px;
  --h8-expertise-border-duration: 6s;
  --h8-expertise-border-easing: linear;
  --h8-expertise-border-gradient: conic-gradient(from 0deg, transparent 0deg 265deg, rgb(0 215 226 / .12) 280deg, rgb(0 215 226 / .5) 320deg, #83fff9 348deg, rgb(0 215 226 / .55) 356deg, transparent 360deg);
  --h8-expertise-border: 1px solid rgb(0 215 226 / .65);
  --h8-expertise-surface: linear-gradient(145deg, rgb(0 38 46 / .48), rgb(0 21 27 / .64));
  --h8-expertise-background: radial-gradient(ellipse at 50% 20%, rgb(0 173 180 / .09), transparent 65%), var(--brand-preview-dark);
  --h8-expertise-shadow: inset 0 0 14px rgb(0 215 226 / .17), inset 0 1px 2px rgb(188 255 249 / .7), 0 0 8px rgb(0 215 226 / .28);
  --h8-expertise-radius: .875rem;
  --h8-expertise-icon-size: 1.875rem;
  --h8-expertise-icon-box: 3.125rem;
  /* Expanded service cards retain the homepage's teal glass and yellow icon palette. */
  --h8-expanded-motion: 650ms;
  --h8-expanded-firefly-travel: var(--h8-firefly-flight);
  --h8-expanded-width: 68rem;
  --h8-expanded-body-min: 12rem;
  --h8-expanded-radius: 1.5rem;
  --h8-expanded-padding: clamp(1.25rem, 3vw, 3rem);
  --h8-expanded-title: clamp(1.25rem, 1.8vw, 1.5rem);
  --h8-expanded-copy: var(--text-base);
  --h8-expanded-icon-box: 5rem;
  --h8-expanded-icon-size: 3rem;
  --h8-expanded-list-icon: 1.625rem;
  --h8-expanded-tagline: .75rem;
  --h8-expanded-tracking: .23em;
  --h8-expanded-surface: radial-gradient(ellipse at 50% 0%, rgb(0 136 147 / .22), transparent 60%), linear-gradient(140deg, rgb(0 35 43 / .96), rgb(0 17 22 / .94));
  --h8-expanded-edge: 1px solid rgb(0 231 238 / .9);
  --h8-expanded-shadow: inset 0 0 28px rgb(0 214 224 / .16), inset 0 1px 2px rgb(168 255 250 / .65), 0 0 0 3px rgb(0 198 212 / .2), 0 0 28px rgb(0 206 220 / .22);
  --h8-expanded-backdrop: rgb(0 9 13 / .7);
  --h8-expanded-blur: blur(7px);
  --h8-expanded-rule: 1px solid rgb(0 191 204 / .25);
  --h8-expanded-button-border: 1px solid var(--brand-preview-yellow);
  --h8-expanded-button-shadow: inset 0 0 16px rgb(0 204 217 / .16), 0 0 10px rgb(255 202 45 / .08);
  --h8-expanded-corner: linear-gradient(90deg, var(--brand-preview-teal), transparent);
  --h8-expertise-firefly-count: 12;
  --h8-section-firefly-count: var(--h8-firefly-count);
  --h8-section-firefly-count-small: var(--h8-firefly-count-small);
  --h8-section-firefly-radius: 4;
  --h8-section-icon-cutout: var(--brand-preview-dark);
  --h8-section-icon-reveal-arrival: .85;
  --h8-section-icon-reveal-seconds: .24;
  --h8-section-firefly-drift: 24;
  --h8-section-release-start: .62;
  --h8-section-release-end: .86;
  --h8-section-firefly-layer: 4;
  --h8-expertise-firefly-radius: 3.6;
  --h8-expertise-firefly-speed: .22;
  --h8-expertise-icon-bg: linear-gradient(145deg, rgb(0 119 134 / .3), rgb(0 43 51 / .5));
  --h8-expertise-rule: linear-gradient(90deg, transparent, rgb(0 173 180 / .45), transparent);
  --h8-expertise-focus: 2px solid var(--brand-preview-yellow);
  --h8-expertise-focus-offset: 4px;
  --h8-expertise-duration: 180ms;
  --h8-expertise-dialog-width: 56rem;
  --h8-expertise-dialog-bg: #06282b;
  --h8-expertise-backdrop: rgb(0 10 12 / .82);
  --h8-expertise-line-height: 1.28;
  --h8-expertise-art-size: 10rem;
  --h8-expertise-art-compact: 6.25rem;
  --h8-expertise-art-opacity: .72;
  --h8-expertise-art-filter: none;
  --h8-expertise-icon-shadow: inset 0 0 12px rgb(0 173 180 / .18);
  --h8-expertise-support-bg: rgb(3 30 33 / .65);
  --h8-expertise-conversion-width: 50rem;
  /* Header LED news strip. */
  --h8-ticker-height: 44px;
  --h8-ticker-led-height: 14px;
  --h8-ticker-led-mobile: 13px;
  --h8-ticker-dot-radius: .42;
  --h8-ticker-gap: 40px;
  --h8-ticker-separator: 3px;
  --h8-ticker-focus-offset: -3px;
  --h8-ticker-duration: 65s;
  --h8-ticker-ink: #b5fff3;
  --h8-ticker-border: 1px solid rgb(0 173 180 / .24);
  --h8-ticker-glow: drop-shadow(0 0 2px rgb(0 173 180 / .6));
  --h8-ticker-fallback-type: 500 13px/1.4 var(--font-body);
  /* Owner-approved hero statistics and delivery capability. */
  --h8-fact-number-type: 650 30px/1 var(--font-body);
  --h8-fact-number-compact: 650 25px/1 var(--font-body);
  --h8-fact-title-type: 600 13px/1.3 var(--font-body);
  --h8-fact-copy-type: 400 11px/1.4 var(--font-body);
  --h8-fact-text-type: 650 22px/1.2 var(--font-body);
  --h8-fact-ink: #effffc;
  --h8-fact-muted: #b5ced0;
  --h8-fact-card-height: 100px;
  --h8-fact-card-compact: 86px;
  --h8-fact-icon-size: 34px;
  --h8-fact-duration: 1300;
  /* AI offering cards reuse the approved glass panels. */
  --h8-offering-title-type: 650 14px/1.3 var(--font-body);
  --h8-fact-sample-type: 400 10px/1.4 var(--font-body);
  --h8-offering-copy-type: 400 13px/1.4 var(--font-body);
  --h8-offering-copy-compact: 400 12px/1.4 var(--font-body);
  --h8-offering-note-type: 400 11px/1.4 var(--font-body);
  /* Homepage 8 navigation only; preserve the Homepage 7 scene tokens. */
  --h8-menu-compact-width: 640px;
  --h8-menu-wide-width: 880px;
  /* Pointer tilt is layered over the cube's uninterrupted automatic spin. */
  --h7-pointer-pitch-limit: 6deg;
  --h7-pointer-yaw-limit: 10deg;
  --h7-pointer-settle-time: 140ms;
  --h7-pointer-rest-threshold: .01;
  --h7-cube-hover-face: rgb(255 202 45 / .14);
  --h7-cube-hover-edge: var(--brand-preview-yellow);
  --h7-cube-hover-glow: 0 0 14px rgb(255 202 45 / .48), inset 0 0 10px rgb(255 202 45 / .14);
  --h7-cube-hover-duration: 160ms;
  /* Homepage six client strip: existing client artwork on the cyan glass theme. */
  --h6-stats-height-compact: 64px;
  --h6-copy-title-compact: 600 40px/1.12 var(--font-display);
  --h8-desktop-cube-scale: 1.05;
  /* Connected intelligence inside the transparent logo cube. */
  --h8-firefly-count: 450;
  --h8-firefly-count-small: var(--h8-firefly-count);
  --h8-firefly-flight: .85;
  --h8-firefly-stagger: .3;
  --h8-firefly-arc: 34;
  --h8-firefly-target-inset: 2;
  --h8-firefly-icon-share: .55;
  --h8-firefly-icon-plane: .25px;
  --h8-firefly-label-shadow: 0 1px 3px var(--brand-preview-dark);
  --h8-firefly-fps: 30;
  --h8-firefly-dpr: 1.5;
  --h8-firefly-size: 1.1;
  --h8-firefly-core: #fff5c6;
  --h8-firefly-light: var(--brand-preview-yellow);
  --h8-firefly-halo: rgb(var(--brand-preview-yellow-rgb) / .14);
  --h8-firefly-clear: rgb(var(--brand-preview-yellow-rgb) / 0);
  --h8-core-node-count: 420;
  --h8-core-node-count-small: 240;
  --h8-core-radius: .36;
  --h8-core-dot-size: 1.25px;
  --h8-core-link-width: .5px;
  --h8-core-ink: var(--brand-preview-yellow);
  --h8-core-link-ink: rgb(var(--brand-preview-yellow-rgb) / .65);
  --h8-core-glow: 0 0 2px currentColor;
  --h8-core-breath-duration: 6s;
  --h8-core-signal-duration: 3.6s;
  --h8-core-rest-scale: .94;
  --h8-core-link-rest: .3;
  --h8-core-link-peak: .85;
  --h8-scene-gap: var(--space-4);
  --h8-layout-gap: 24px;
  --h6-services-height-compact: 72px;
  --h6-client-width: auto;
  --h6-client-height: 56px;
  --h6-client-height-mobile: 48px;
  --h6-client-gap-mobile: 32px;
  --h6-client-row-gap: 4px;
  --h6-client-header-height: 32px;
  --h6-client-gap: 48px;
  --h6-client-duration: 64s;
  --h6-client-easing: linear;
  --h6-client-start: -33.3333333333%;
  --h6-client-filter: url(#h6-client-knockout);
  --h6-client-heading: 500 14px/1.5 var(--font-body);
  --h6-client-control: 400 12px/1.5 var(--font-body);
  --h6-client-surface: rgba(0, 19, 28, .3);
  --h6-proof-clearance: 54px;

  /* Homepage five: fit the unchanged opening assembly in short viewports. */
  --h5-layers: 1;
  --h5-fit-padding: var(--space-6);
  --h5-hero-background: url('../pages/assets/corporate_env_1.png');
  --h5-background-mountains: none;
  --h5-background-blossoms: none;
  --h5-background-desert: none;
  --h5-scene-count: 1;
  /* Preserve the cube/content layout without loading background artwork. */
  --h6-scene-aspect: 1.7768331562;
  --h5-scene-hold: .2;
  /* RGB palettes: corporate, mountains, blossoms, desert. Blended with scenes. */
  --h5-palette-0-accent: 79 233 255;
  --h5-palette-0-soft: 213 251 255;
  --h5-palette-0-ink: 255 255 255;
  --h5-palette-0-muted: 212 231 238;
  --h5-palette-0-strong: 88 224 244;
  --h5-palette-0-surface: 0 25 36;
  --h5-palette-0-button: 0 40 50;
  --h5-palette-0-icon: 245 255 255;
  --h5-palette-0-shadow: 0 15 23;
  --h5-palette-1-accent: 91 180 255;
  --h5-palette-1-soft: 205 234 255;
  --h5-palette-1-ink: 245 251 255;
  --h5-palette-1-muted: 235 246 255;
  --h5-palette-1-strong: 205 234 255;
  --h5-palette-1-surface: 6 25 45;
  --h5-palette-1-button: 4 30 50;
  --h5-palette-1-icon: 5 41 70;
  --h5-palette-1-shadow: 6 25 45;
  --h5-palette-2-accent: 245 151 184;
  --h5-palette-2-soft: 255 222 235;
  --h5-palette-2-ink: 52 17 37;
  --h5-palette-2-muted: 75 31 53;
  --h5-palette-2-strong: 112 26 65;
  --h5-palette-2-surface: 45 16 32;
  --h5-palette-2-button: 54 18 37;
  --h5-palette-2-icon: 75 16 44;
  --h5-palette-2-shadow: 255 240 245;
  --h5-palette-3-accent: 255 194 94;
  --h5-palette-3-soft: 255 233 191;
  --h5-palette-3-ink: 255 248 233;
  --h5-palette-3-muted: 255 247 229;
  --h5-palette-3-strong: 255 226 166;
  --h5-palette-3-surface: 38 24 10;
  --h5-palette-3-button: 53 28 6;
  --h5-palette-3-icon: 72 35 6;
  --h5-palette-3-shadow: 38 24 10;
  --h5-theme-accent: var(--h5-palette-0-accent);
  --h5-theme-soft: var(--h5-palette-0-soft);
  --h5-theme-ink: var(--h5-palette-0-ink);
  --h5-theme-muted: var(--h5-palette-0-muted);
  --h5-theme-strong: var(--h5-palette-0-strong);
  --h5-theme-surface: var(--h5-palette-0-surface);
  --h5-theme-button: var(--h5-palette-0-button);
  --h5-theme-icon: var(--h5-palette-0-icon);
  --h5-theme-shadow: var(--h5-palette-0-shadow);
  --h5-theme-icon-ink: rgb(var(--h5-theme-icon));
  --h5-cube-icon-size: 46%;
  --h5-cube-icon-stroke: 1.5;
  --h5-cube-icon-contrast: none;
  --h5-theme-stats-background: rgb(var(--h5-theme-surface) / .3);
  --h5-theme-stats-border: 1px solid rgb(var(--h5-theme-accent) / .3);
  --h5-theme-text-shadow: none;
  --h5-theme-heading: rgb(var(--h5-theme-ink));
  --h5-theme-description: rgb(var(--h5-theme-muted));
  --h5-theme-highlight: rgb(var(--h5-theme-strong));
  --h5-theme-light: rgb(var(--h5-theme-soft));
  --h5-theme-colour: rgb(var(--h5-theme-accent));
  --h5-theme-primary: linear-gradient(180deg, rgb(var(--h5-theme-soft)), rgb(var(--h5-theme-accent)));
  --h5-theme-primary-ink: rgb(var(--h5-theme-button));
  --h5-theme-primary-border: 1px solid rgb(var(--h5-theme-soft));
  --h5-theme-primary-glow: 0 0 20px rgb(var(--h5-theme-accent) / .4), inset 0 1px 2px rgb(var(--h5-theme-soft) / .5);
  --h5-theme-primary-hover: 0 0 28px rgb(var(--h5-theme-accent) / .55), inset 0 1px 2px rgb(var(--h5-theme-soft) / .6);
  --h5-theme-outline-background: rgb(var(--h5-theme-surface) / .78);
  --h5-theme-outline-border: 1px solid rgb(var(--h5-theme-accent) / .5);
  --h5-theme-outline-glow: 0 0 9px rgb(var(--h5-theme-accent) / .22), inset 0 0 6px rgb(var(--h5-theme-accent) / .08);
  --h5-theme-border-gradient: conic-gradient(from 0deg, rgb(var(--h5-theme-accent) / .1) 0deg, rgb(var(--h5-theme-accent) / .1) 170deg, rgb(var(--h5-theme-accent)) 270deg, rgb(var(--h5-theme-soft)) 340deg, rgb(var(--h5-theme-accent) / .1) 360deg);
  --h5-theme-glass: rgb(var(--h5-theme-accent) / .07);
  --h5-theme-edge: rgb(var(--h5-theme-accent) / .6);
  --h5-theme-glow: rgb(var(--h5-theme-accent) / .3);
  --h5-theme-side: rgb(var(--h5-theme-accent) / .04);
  --h5-theme-under: rgb(var(--h5-theme-surface) / .18);
  --h5-theme-core: rgb(var(--h5-theme-soft));
  --h5-theme-bloom: rgb(var(--h5-theme-accent) / .16);
  --h5-theme-floor: rgb(var(--h5-theme-accent) / .08);
  --h5-landscape-platform-y: .74;
  --h5-hero-background-position: center top;
  --h5-hero-background-size: 100% auto;
  --h5-hero-background-width: 100%;
  --h5-hero-background-scale: 1;
  --h5-hero-edge-mask: none;
  --h5-hero-edge-fade: none;
  --h5-cube-pitch: -14deg;
  --h5-cube-yaw: 32deg;
  --h5-cube-scale: 1.15;
  --h5-platform-y: .80;
  --h5-platform-gap: var(--space-2);
  --h5-hero-surround: #000;
  /* Homepage five navigation, matched to the supplied reference. */
  --h5-nav-max: 1120px;
  --h5-nav-height: 88px;
  --h5-nav-height-mobile: 72px;
  --h5-nav-logo-width: 152px;
  --h5-nav-logo-mobile: 128px;
  --h5-nav-logo-compact: 104px;
  --h5-nav-type: 500 13px/1.4 var(--font-body);
  --h5-nav-tagline: 600 8px/1.4 var(--font-body);
  --h5-nav-tracking: .3em;
  --h5-nav-gap: 22px;
  /* Share the hero's interpolated scene palette, including open menus/dialogs.
     Glass panels use soft light ink even when the scene's hero ink is dark. */
  --h5-nav-ink: rgb(var(--h5-theme-soft));
  --h5-nav-active-ink: rgb(var(--h5-theme-soft));
  --h5-nav-cyan: rgb(var(--h5-theme-accent));
  --h5-nav-panel: rgb(var(--h5-theme-surface));
  --h5-nav-background: linear-gradient(to bottom, rgb(var(--h5-theme-surface) / .98), rgb(var(--h5-theme-surface) / .9) 75%, rgb(var(--h5-theme-surface) / 0));
  --h5-nav-border: 1px solid rgb(var(--h5-theme-accent) / .6);
  --h5-nav-glow: 0 0 15px rgb(var(--h5-theme-accent) / .3), inset 0 0 12px rgb(var(--h5-theme-accent) / .12);
  --h5-nav-active-glow: 0 0 8px var(--h5-nav-cyan);
  --h5-nav-icon: 18px;
  --h5-nav-cta-width: 144px;
  --h5-outline-cta-background: var(--h5-theme-outline-background);
  --h5-outline-cta-border-width: 1px;
  --h5-outline-cta-border: var(--h5-outline-cta-border-width) solid rgb(var(--h5-theme-accent) / .5);
  --h5-outline-cta-glow: var(--h5-theme-outline-glow);
  --h5-border-motion-duration: 4500ms;
  --h5-border-motion-easing: linear;
  --h5-border-gradient: var(--h5-theme-border-gradient);
  --h5-border-mask: linear-gradient(#000 0 0);
  --h5-border-gradient-size: 200%;
  --h5-border-gradient-start: translate(-50%, -50%) rotate(0turn);
  --h5-border-gradient-end: translate(-50%, -50%) rotate(1turn);
  --h5-nav-focus: 2px solid var(--h5-nav-cyan);
  --h5-nav-line: 2px;
  --h5-menu-type: 400 14px/1.5 var(--font-body);
  --h5-menu-heading-type: 600 13px/1.5 var(--font-body);
  --h5-menu-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  --h5-menu-hover: rgb(var(--h5-theme-accent) / .08);
  --h5-menu-chevron-size: 5px;
  --h5-menu-chevron-closed: rotate(45deg);
  --h5-menu-chevron-open: rotate(225deg);
  --h5-menu-row-height: 32px;
  --h5-menu-column-min: 230px;
  --h5-menu-item-gap: var(--space-1);
  --h5-menu-hover-delay: 250ms;
  --h5-menu-sidebar-width: 250px;
  --h5-technology-logo-width: 32px;
  --h5-technology-logo-height: 24px;
  --h5-technology-column-min: 190px;
  --h5-menu-category-height: 40px;
  --h5-menu-category-arrow: rotate(-45deg);
  --h5-menu-feature-image: 180px;
  --h5-menu-feature-type: 500 11px/1.4 var(--font-body);
  --h5-menu-feature-border: 1px solid rgb(var(--h5-theme-accent) / .24);
  --h5-menu-background: rgb(var(--h5-theme-surface) / .82);
  --h5-menu-backdrop-filter: var(--h5-stats-backdrop-filter);
  --h5-search-width: 640px;
  --h5-search-max-height: 75svh;
  --h5-search-scrim: transparent;
  --h5-scene-top: 0px;
  --h5-copy-width: 860px;
  --h5-copy-description-width: 650px;
  --h5-copy-top: var(--h5-nav-height);
  --h5-copy-drop: 20px;
  --h7-copy-balance: 0px;
  --h5-hero-content-drop: var(--space-5);
  --h5-copy-title: 600 clamp(32px, 3.6vw, 48px)/1.12 var(--font-display);
  --h5-copy-description: 400 clamp(16px, 1.3vw, 18px)/1.5 var(--font-body);
  --h5-copy-eyebrow: 600 12px/1.5 var(--font-body);
  --h5-copy-tracking: .38em;
  --h5-copy-button: 600 13px/1.3 var(--font-body);
  --h5-copy-cta-background: linear-gradient(180deg, #85F0FC, #43D7EB 60%, #26BDD8);
  --h5-copy-cta-ink: #002832;
  --h5-copy-cta-border: 1px solid #95F5FF;
  --h5-copy-shade: radial-gradient(ellipse at center, rgba(0, 15, 23, .96), rgba(0, 15, 23, .82) 55%, transparent 78%);
  --h5-copy-primary-glow: 0 0 20px rgba(48, 218, 246, .45), inset 0 1px 2px rgba(255, 255, 255, .5);
  --h5-copy-primary-hover-glow: 0 0 28px rgba(48, 218, 246, .6), inset 0 1px 2px rgba(255, 255, 255, .6);
  --h5-glass-fallback: #134453;
  --h5-glass-filter: blur(16px) saturate(160%);
  --h5-glass-border: 1px solid rgba(183, 243, 255, .66);
  --h5-glass-reflection: linear-gradient(175deg, rgba(255, 255, 255, .23), rgba(255, 255, 255, .04) 42%, transparent 45%);
  --h5-glass-sheen: linear-gradient(100deg, transparent, rgba(224, 251, 255, .24), transparent);
  --h5-glass-sheen-width: 45%;
  --h5-glass-sheen-start: translateX(-160%) skewX(-20deg);
  --h5-glass-sheen-end: translateX(340%) skewX(-20deg);
  --h5-glass-hover-shadow: inset 0 1px 2px rgba(255, 255, 255, .85), inset 0 -1px 3px rgba(93, 220, 242, .55), 0 8px 24px rgba(0, 0, 0, .3), 0 0 28px rgba(64, 219, 245, .3);
  --h5-visual-top: 0px;
  --h5-extras-width: 1280px;
  --h5-card-width: clamp(188px, 17vw, 232px);
  --h5-card-top: 156px;
  --h5-card-height: 124px;
  --h5-card-icon: 34px;
  --h5-card-arrow: 24px;
  --h5-card-title: 500 15px/1.35 var(--font-body);
  --h5-card-copy: 400 12px/1.5 var(--font-body);
  --h5-card-background: linear-gradient(125deg, rgba(10, 48, 63, .97), rgba(2, 22, 32, .97) 65%, rgba(12, 70, 85, .97));
  --h5-card-shadow: inset 0 0 18px rgba(88, 224, 244, .13), 0 0 12px rgba(46, 212, 241, .12);
  --h5-card-hover-shift: -3px;
  /* Mirrored service panels from the supplied hero reference. */
  --h5-services-width: calc(var(--h5-nav-max) - var(--space-3));
  --h5-services-top: 50%;
  --h5-services-center: -50%;
  --h5-services-panel-width: clamp(220px, 18vw, 280px);
  --h5-services-perspective: 900px;
  --h5-services-left-angle: rotateY(24deg) rotateZ(2deg);
  --h5-services-right-angle: rotateY(-24deg) rotateZ(-2deg);
  --h5-services-card-height: clamp(84px, 10vh, 104px);
  --h5-services-icon-size: 38px;
  --h5-services-arrow-size: 24px;
  --h5-services-chevron-size: 10px;
  --h5-services-title: 500 14px/1.3 var(--font-body);
  --h5-services-copy: 400 12px/1.45 var(--font-body);
  --h5-services-panel-border: 1px solid rgb(var(--h5-theme-accent) / .32);
  --h5-services-card-border: 1px solid rgb(var(--h5-theme-accent) / .65);
  --h5-services-panel-background: transparent;
  --h5-services-card-background: var(--h5-theme-stats-background);
  --h5-services-card-shadow: inset 0 0 12px rgb(var(--h5-theme-accent) / .28), inset 0 1px 2px rgb(var(--h5-theme-soft) / .4), 0 0 12px rgb(var(--h5-theme-accent) / .15);
  --h5-services-card-hover-shadow: inset 0 0 18px rgb(var(--h5-theme-accent) / .35), 0 0 20px rgb(var(--h5-theme-accent) / .3);
  --h5-services-icon-glow: drop-shadow(0 0 4px rgb(var(--h5-theme-accent) / .45));
  --h5-services-blur: var(--h5-stats-backdrop-filter);
  --h5-services-focus: 2px solid rgb(var(--h5-theme-soft));
  --h5-stats-y: .86;
  --h5-stats-height: 80px;
  --h5-stats-offset: calc(30px + var(--h5-hero-content-drop));
  --h5-stats-count-duration: 1800ms;
  --h5-stats-background: rgba(0, 19, 28, .3);
  --h5-stats-backdrop-filter: blur(6px);
  --h5-stats-edge-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  --h5-stats-border: 1px solid rgba(88, 224, 244, .3);
  --h5-stats-number: 600 24px/1.2 var(--font-display);
  --h5-stats-icon: var(--tap-min);
  --h5-stats-glyph-size: 26px;
  --h5-stats-icon-background: transparent;
  /* Homepage four: deliberate travel into the original icon cube. */
  --h4-scroll-screens: 5;
  /* Original 7.5-second opening; only the subsequent camera travel is four seconds. */
  --h4-auto-travel-duration: 4000ms;
  --h4-auto-frame-limit: 100ms;
  --h4-fast-playback-rate: 4;
  --h4-rate-transition: 400ms;
  --h4-entry-end: .5;
  --h4-cover-end: .66;
  --h4-cover-scale: 1.32;
  --h4-withdraw-end: .82;
  --h4-dock-pitch: -20deg;
  --h4-dock-yaw: -24deg;
  --h4-home-spin: 26s;
  --h4-home-frame-interval: 32ms;
  --h4-surface-z: 2;
  --h4-cube-anchor-size: clamp(76px, 11vw, 100px);
  --h4-cube-size-ratio: .7;
  --h4-cube-glow-space: var(--space-6);
  --h4-cube-home-scale: 1.12;
  /* Zero reuses the original opening materials on the hero cube. */
  --h4-cube-home-finish: 0;
  --h4-cube-home-ink: var(--brand-primary);
  --h4-cube-home-icon-inset: .016;
  --h4-cube-home-face: var(--teal-300);
  --h4-cube-home-top: var(--teal-200);
  --h4-cube-home-side: var(--teal-400);
  --h4-cube-home-opacity: 0;
  --h4-cube-home-glow-strength: .4;
  --h4-cube-home-glass: color-mix(in srgb, var(--h4-cube-home-face) 0%, transparent);
  --h4-cube-home-top-glass: color-mix(in srgb, var(--h4-cube-home-top) 0%, transparent);
  --h4-cube-home-side-glass: color-mix(in srgb, var(--h4-cube-home-side) 0%, transparent);
  --h4-cube-home-edge: var(--brand-accent);
  --h4-cube-home-edge-width: .5px;
  --h4-cube-home-glow: color-mix(in srgb, var(--h4-cube-home-face) 12%, transparent);
  --h4-hero-spacing-scale: .5;
  --h4-hero-title-measure: 18ch;
  /* Homepage four hero typography measured from nasmak.com.au, 10 Sep 2026. */
  --h4-hero-copy-measure: 53.75rem;
  --h4-hero-title-mobile: 2rem;
  --h4-hero-title-tablet: 2.75rem;
  --h4-hero-title-desktop: 3.75rem;
  --h4-hero-title-leading: 1.2;
  --h4-hero-title-tracking: -.027em;
  --h4-hero-lede-size: 1.125rem;
  --h4-hero-lede-leading: 1.875rem;
  --h4-hero-eyebrow-size: 1rem;
  --h4-hero-eyebrow-size-desktop: 1.125rem;
  --h4-hero-eyebrow-leading: 1.44;
  --h4-hero-button-block: 1.125rem;
  --h4-hero-button-inline: 1.5625rem;
  /* Library trust strip, with NASMAK's longer two-row client collection. */
  --h4-trust-logo-height: 56px;
  --h4-trust-logo-opacity: .78;
  --h4-trust-logo-hover-opacity: 1;
  --h4-trust-logo-filter: grayscale(1);
  --h4-trust-logo-hover-filter: grayscale(0);
  --h4-trust-tracking: -.018em;
  --h4-trust-duration: 135s;
  --h4-trust-ease: linear;
  --h4-trust-shift: -50%;
  --h4-trust-mask: linear-gradient(to right, transparent 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,.35) 6%, #000 9%, #000 91%, rgba(0,0,0,.35) 94%, rgba(0,0,0,.05) 97%, transparent 100%);
  --h4-hero-mask: linear-gradient(90deg, var(--mask-clear) 0%, var(--mask-opaque) 7.15%, var(--mask-opaque) 92.85%, var(--mask-clear) 100%);
  --h4-nav-scrim-opacity: .3;
  --h4-feature-aspect: 720 / 331;
  --h4-hero-row: calc(var(--space-8) + var(--space-5) + var(--space-5));
  --h4-hero-row-mobile: auto;
  --h4-menu-maxheight: calc(100dvh - var(--header-height) - var(--space-8));
  --h4-control-type: 400 .8125rem/1.4 var(--font-body);
  --h4-enter-size: 56px;
  --h4-enter-icon-size: 24px;
  --h4-fallback-height: 100vh;
  --h4-face-fraction: .72;
  --h4-lens-fraction: .36;
  --h4-detail-limit: 12;
  --h4-camera-smoothing: 320ms;
  --h4-frame-catchup: 32ms;
  --h4-pixel-ratio-max: 2;
  --h4-pixel-budget: 3000000;
  --h4-texture-tile-size: 512;
  /* Homepage three: scoped choreography and layout values for the reviewed prototype. */
  --h3-header: 88px;
  --h3-heading: clamp(2.2rem, 4.6vw, 4rem);
  --h3-heading-capabilities: clamp(2.2rem, 4.5vw, 3.9375rem);
  --h3-heading-automation: clamp(2.2rem, 4.7vw, 4.125rem);
  --h3-heading-clients: clamp(2.2rem, 4.65vw, 4.0625rem);
  --h3-heading-mobile: clamp(1.875rem, 8vw, 2.5rem);
  --h3-copy-width: 30rem;
  --h3-body-size: clamp(1rem, 1.35vw, 1.2rem);
  --h3-logo-width: 164px;
  --h3-logo-mobile: 132px;
  --h3-stage-height: 560px;
  --h3-mobile-stage: 320px;
  --h3-mobile-frame: 300px;
  --h3-mobile-tall: 420px;
  --h3-section-height: 145svh;
  --h3-intro-height: 100svh;
  --h3-stick: 108px;
  --h3-read-height: 80svh;
  --h3-copy-leading: 1.1;
  --h3-tracking: -0.032em;
  --h3-rule: rgb(255 255 255 / .15);
  --h3-control-border: var(--gray-500);
  --h3-spin-ease: linear;
  --h3-glass: rgb(255 255 255 / .035);
  --h3-header-fill: rgb(4 9 10 / .96);
  --h3-muted: #B8BABB;
  --h3-link: #70D9DD;
  --h3-line: rgb(115 234 243 / .9);
  --h3-focus: 3px solid #FFCA2D;
  --h3-shadow: 0 18px 70px rgb(0 174 181 / .1);
  --h3-card-shadow: 0 10px 36px rgb(0 0 0 / .3);
  --h3-mobile-shadow: 0 0 8px rgb(0 174 181 / .12);
  --h3-blur: 16px;
  --h3-cube-logo: 78%;
  --h3-icon-size: 46%;
  --h3-yaw-turn: 360deg;
  --h3-half-turn: 180deg;
  --h3-quarter-turn: 90deg;
  --h3-hidden-translate: -200%;
  --h3-icon-start: .94;
  --h3-progress-height: 2px;
  --h3-progress-scale: 0;
  --h3-z-scene: 3;
  --h3-z-content: 4;
  --h3-z-header: 30;
  --h3-z-controls: 40;
  --h3-connection-width: 1.3px;
  --h3-line-glow: drop-shadow(0 0 4px rgb(88 231 244 / .8));
  --h3-project-width: 65%;
  --h3-project-radius: 8px;
  --h3-project-aspect: 4 / 3;
  --h3-cube-scale: 1;
  --h3-scene-pitch: -15deg;
  --h3-scene-yaw: -18deg;
  --h3-scene-opacity: 1;
  --h3-dialog-width: 34rem;
  --h3-textarea-height: 140px;
  --h3-form-width: 36rem;
  --h3-floor-width: 460px;
  --h3-brand-height: 40px;
  --h3-micro: .75rem;
  --h3-sticky-gap: 4rem;
  --h3-work-card-width: 22rem;
  --h3-hero-gutter: 6vw;
  /* Measured visual proportions from the approved desktop and mobile plates. */
  --h3-scene-tall: 540px;
  --h3-scene-short: 420px;
  --h3-scene-half: 280px;
  --h3-canvas-height: 720px;
  --h3-body-leading: 1.42;
  --h3-body-desktop: clamp(1.1rem, 1.65vw, 1.45rem);
  --h3-nav-size: 1rem;
  --h3-button-size: 1.0625rem;
  --h3-button-height: 48px;
  --h3-button-radius: 10px;
  --h3-button-fill: linear-gradient(110deg, #FFD33F, #FFCC28 60%, #F3BB17);
  --h3-button-shadow: inset 0 1px 5px rgb(255 255 255 / .3);
  --h3-story-face: linear-gradient(135deg, rgb(198 233 238 / .14), rgb(36 72 79 / .04) 55%, rgb(111 184 196 / .12));
  --h3-story-top: linear-gradient(145deg, rgb(176 221 229 / .22), rgb(38 68 76 / .16));
  --h3-story-side: linear-gradient(130deg, rgb(15 38 44 / .2), rgb(122 201 210 / .13));
  --h3-story-edge: rgb(156 217 227 / .68);
  --h3-story-shadow: inset 0 0 12px rgb(141 228 236 / .06), 0 0 8px rgb(87 205 218 / .12);
  --h3-story-radius: 2px;
  --h3-core-face: linear-gradient(135deg, #FFFFFF, #DCEFF0);
  --h3-core-shadow: 0 0 28px rgb(194 244 248 / .25);
  --h3-frame-border: rgb(170 230 239 / .8);
  --h3-frame-shadow: 0 0 18px rgb(79 218 232 / .2), inset 0 0 12px rgb(170 238 244 / .15);
  --h3-ground: radial-gradient(ellipse closest-side, rgb(10 82 96 / .28), transparent);
  --h3-ground-height: 110px;
  --h3-letter-faint: .8;
  --h3-plate-image-width: 66%;
  --h3-plate-image-offset: 7%;
  --h3-small-heading: clamp(2rem, 3vw, 2.8rem);
  --h3-mobile-network: 270px;
  --h3-mobile-plinth: 200px;
  --h3-mobile-workflow: 440px;
  --h3-mobile-method: 420px;
  --h3-mobile-gutter: 22px;
  --h3-logo-card-height: 140px;
  --h3-logo-card-mobile: 84px;
  --h3-card-white: #F5F5F5;
  --h3-mobile-copy: 1rem;
  --h3-mobile-label: 1.1rem;
  --h3-motion-opacity: .65;
  --h3-page-bg: #000607;
  --h3-mobile-learning-font: 1.625rem;
  --h3-glass-platform: rgb(87 196 208 / .035);
  --h3-platform-line: rgb(104 220 231 / .6);
  --h3-z-overlay: 5;

  /* ---------------------------------------------------------------
     1. COLOUR RAMPS
     Teal and yellow are sampled from the logo file. The neutral ramp
     is teal-tinted, per the brand guidelines.
     --------------------------------------------------------------- */

  --teal-50:  #E9F8F9;
  --teal-100: #CDF0F1;
  --teal-200: #97E1E4;
  --teal-300: #57CDD3;
  --teal-400: #23BCC4;
  --teal-500: #00AEB5;
  --teal-600: #00939B;
  --teal-700: #00767E;
  --teal-800: #045A61;
  --teal-900: #0B3F45;
  --teal-950: #082D31;

  --yellow-100: #FFF3CC;
  --yellow-200: #FFE588;
  --yellow-300: #FFD95C;
  --yellow-400: #FFCA2D;
  --yellow-500: #F5B90B;
  --yellow-600: #D99E00;

  --gray-0:   #FFFFFF;
  --gray-50:  #F5F9F9;
  --gray-100: #EAF1F1;
  --gray-200: #D8E3E4;
  --gray-300: #B9C9CB;
  --gray-400: #8FA5A8;
  --gray-500: #64797C;
  --gray-600: #52676A;
  --gray-700: #33484D;
  --gray-800: #1C3237;
  --gray-900: #0B2E33;

  /* ---------------------------------------------------------------
     2. SEMANTIC COLOUR
     --------------------------------------------------------------- */

  --brand-primary: var(--teal-500);
  --brand-accent:  var(--yellow-400);

  --surface-page:      var(--gray-0);
  --surface-subtle:    var(--gray-50);
  --surface-tint:      var(--teal-50);
  --surface-card:      var(--gray-0);
  --surface-dark:      var(--teal-700);
  --surface-dark-deep: var(--teal-800);

  --text-heading:      var(--gray-900);
  --text-body:         var(--gray-700);
  --text-muted:        var(--gray-600);
  --text-inverse:      #FFFFFF;
  --text-inverse-soft: #E3F2F3;
  --text-on-accent:    var(--gray-900);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-brand:  var(--teal-500);

  /* Surfaces laid over the dark gradient band. Alpha on white, so they
     hold whatever gradient stop sits behind them. */
  --on-dark-fill:       rgb(255 255 255 / .08);
  --on-dark-fill-hover: rgb(255 255 255 / .14);
  --on-dark-line:       rgb(255 255 255 / .14);
  --on-dark-rule:       rgb(255 255 255 / .12);

  --link:       var(--teal-700);
  --link-hover: var(--teal-800);

  --success:    #1E9E6A;  --success-bg: #E4F5EE;
  --warning:    #D99E00;  --warning-bg: var(--yellow-100);
  --error:      #DE4E46;  --error-bg:   #FCEBEA;
  --info:       var(--teal-700); --info-bg: var(--teal-50);

  /* Interactive colour. The bright teal never carries white text:
     white on --teal-500 scores 2.72 and fails WCAG AA. */
  --action-bg:        var(--teal-700);
  --action-bg-hover:  var(--teal-800);
  --action-text:      var(--text-inverse);
  --action-disabled-bg:   var(--gray-100);
  --action-disabled-text: var(--gray-400);

  /* ---------------------------------------------------------------
     3. GRADIENTS
     --------------------------------------------------------------- */

  --gradient-headline: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-500) 52%, var(--yellow-500) 100%);
  --gradient-action:   linear-gradient(90deg, var(--teal-800) 0%, var(--teal-700) 100%);
  --gradient-dark:     linear-gradient(120deg, var(--teal-700) 0%, var(--teal-800) 100%);
  --gradient-wash:     radial-gradient(120% 90% at 50% 0%, var(--teal-50) 0%, rgba(233,248,249,0) 62%);

  /* ---------------------------------------------------------------
     4. TYPOGRAPHY
     Two families. Poppins for display, Inter for everything else.
     --------------------------------------------------------------- */

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  --leading-tight:  1.06;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.7;

  --tracking-display: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-caps:    0.14em;

  --type-hero:     var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h1:       var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h2:       var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h3:       var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h4:       var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-display);
  --type-eyebrow:  var(--weight-semibold) var(--text-xs)/1.2 var(--font-body);
  --type-body:     var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-body-lg:  var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);
  --type-caption:  var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-body);
  --type-micro:    var(--weight-semibold) var(--text-xs)/1.4 var(--font-body);
  --type-button:   var(--weight-semibold) var(--text-base)/1 var(--font-body);

  /* ---------------------------------------------------------------
     5. SPACING AND LAYOUT
     --------------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --container-max: 1200px;
  /* THE site width. Every full-width section lines up on this: the header
     bar, the hero grid, the logo wall, everything that follows. Never
     re-derive it in a component. 1264px. */
  --site-max: calc(var(--container-max) + var(--space-8));
  --container-pad: var(--space-5);
  --section-pad:   var(--space-9);
  --section-pad-sm: var(--space-7);
  --measure:       62ch;
  /* Column floors for repeat(auto-fit, minmax(X, 1fr)). Grids reflow off
     these rather than off breakpoints, so no component carries a px. */
  --col-min-xs: 180px;
  --col-min-sm: 220px;
  --col-min-md: 240px;
  --col-min-lg: 300px;
  --col-min-xl: 320px;

  /* The 3D capability cube. Nine cells a face, so the face is three cells
     plus two gaps and the half-depth is what pushes each face outward. */
  --cube-cell:        84px;
  --cube-cell-sm:     72px;
  --cube-step:        calc(var(--cube-cell) + var(--space-1));   /* centre to centre */
  --cube-face:        calc(var(--cube-cell) * 3 + var(--space-1) * 2);
  --cube-half:        calc(var(--cube-face) / 2);
  --cube-perspective:  820px;    /* near enough that a single box reads as solid */
  --globe-perspective: 1500px;   /* further back, so the globe stays round */
  --cube-rest-pitch:  -28deg;   /* the three-quarter pose: front, left and top all visible */
  --cube-rest-yaw:    38deg;
  --cube-yaw-range:   26deg;
  --cube-pitch-range: 16deg;
  --cube-drift:       -0.07deg;  /* per frame, negative so it turns anticlockwise */

  /* Rubik faces. Six stickers on a dark body, one hue a side. Four of the
     six sit outside the brand, which is teal and yellow; kept in one block
     so the set lifts out together if it is not wanted. Each pair is a light
     sticker for the cube and a deep ink for the glyph, which is the only
     colour the grid cards carry. Hues are spread at least 34 degrees apart
     so no two read as the same colour. */
  --face-teal:       #C9EFF1;  --face-teal-ink:   #00767E;
  --face-yellow:     #FFE388;  --face-yellow-ink: #8F6600;
  --face-green:      #DDF3C4;  --face-green-ink:  #47761C;
  --face-violet:     #E4D9F9;  --face-violet-ink: #6B3FD1;
  --face-blue:       #CBDCF8;  --face-blue-ink:   #1D4ED8;
  --face-coral:      #FCD7CE;  --face-coral-ink:  #BE3218;
  --face-edge:       rgb(0 0 0 / .10);  /* the hairline around a coloured side */
  --sticker-lift:    1.06;              /* hover brightness on a sticker */
  --assemble-dur:    1400ms;
  --assemble-step:   44ms;              /* between one box and the next */
  --assemble-fly:    620px;             /* how far out to the side a box starts */
  --assemble-turn:   48deg;
  --assemble-depth:  90px;              /* a touch toward the viewer, no more */
  --svc-grow-from:   0.3;               /* the panel opens out from about a sticker */

  /* ---------------------------------------------------------------
     8c. THE OPENING
     One logo cube drops, turns, then divides into twenty-six. Used by
     homepage-2 only. Every measurement below derives from --seed-cell,
     so the whole sequence resizes off that one value.
     --------------------------------------------------------------- */

  /* One fluid size instead of three fixed steps, so the object scales with the
     screen rather than jumping at two widths. Floor keeps it readable on a
     small phone, ceiling stops it dominating a large desktop. */
  --seed-cell:        clamp(40px, 11vmin, 76px);
  --seed-gap:         0px;              /* zero, so the cube is exactly three cells
                                           and the seed shrinks to exactly one */
  --seed-step:        calc(var(--seed-cell) + var(--seed-gap));
  --seed-size:        calc(var(--seed-cell) * 3 + var(--seed-gap) * 2);
  --seed-perspective: 1400px;
  --seed-pitch:       -28deg;
  --seed-spin:        26s;              /* one turn, anticlockwise */
  --h8-puzzle-cycle:  16s;              /* three layer turns, then three inverse turns */
  --seed-drop-dur:    900ms;
  --seed-hold:        900ms;            /* turning as one piece */
  --seed-split-dur:   450ms;
  --seed-apart:       450ms;            /* how long it holds open before closing */
  --seed-gather-dur:  450ms;
  --icon-wait:        500ms;           /* after the cube has closed */
  --icon-window:      2000ms;           /* all fifty-four inside this */
  --icon-in-dur:      340ms;
  --icon-ink:         var(--gray-0);

  /* Scene three: the cube morphs into a flat grid of cards around it. */
  --morph-wait:       400ms;            /* beat after the icons finish */
  --morph-out-dur:    700ms;            /* the boxes dive back into the middle */
  --g2-in-dur:        700ms;            /* the grid springs out of the middle */
  --g2-step:          22ms;             /* per-card stagger on top of that */
  --g2-row:           clamp(48px, 9vmin, 88px);   /* the hero grid's own row height at its ceiling */
  --g2-gap:           var(--space-1);   /* the hero grid's own gap */
  --g2-card:          rgb(255 255 255 / .05);
  --g2-edge:          rgb(255 255 255 / .16);
  --label-wait:       300ms;            /* after the grid has landed */

  /* Scene five: the cubes come back out and the characters surface. */
  --char-wait:        600ms;            /* after the names are in */
  --rebits-dur:       900ms;            /* the cubes re-emerge from the middle */
  --banner-wait:      600ms;            /* the character cube holds before it goes */
  --banner-in-dur:    700ms;
  --g2-label:         var(--text-inverse-soft);
  --seed-fall:        60svh;            /* svh, so mobile browser chrome cannot skew the drop */
  --seed-explode:     1.75;             /* how far apart they settle when they open */
  --seed-packed:      1.14;             /* and how close they come, still separate.
                                           1.00 would have them touching, which reads
                                           as one solid block, not twenty-seven cubes */
  /* The middle cube is less see-through than the rest, so its square reads
     behind the wordmark instead of the logo floating on nothing. */
  --seed-core-face:   var(--gray-0);    /* solid: the mark needs its own white behind it */
  --seed-core-edge:   var(--gray-0);
  --bit-tucked:       0.9;              /* just inside the middle cube, so the two do not fight */
  --seed-face:        rgb(255 255 255 / .07);   /* glass, not a solid side */
  --seed-edge:        rgb(255 255 255 / .34);   /* the wire of the wireframe */
  --seed-shade-side:  rgb(255 255 255 / .04);
  --seed-shade-under: rgb(0 0 0 / .18);
  --seed-glow:        rgb(160 240 244 / .30);
  --stage-bg:         #04090A;

  /* Inner-page hero cube and art. */
  --pcube:            clamp(120px, 16vmin, 200px);
  --pcube-sm:         120px;
  --hero-art-opacity: 0.55;
  --stage-bloom:      rgb(0 174 181 / .16);
  --stage-floor:      rgb(0 174 181 / .08);

  /* The capability sphere. Cells sit on the surface at --sphere-radius,
     sized from --wf and --hf, which are arc width and height as multiples
     of the radius, so the whole mesh resizes off the radius alone. */
  --sphere-radius:    220px;
  --sphere-radius-sm: 132px;
  --sphere-drift:       0.035deg;
  --sphere-rest-pitch:  -12deg;
  --sphere-rest-yaw:    0deg;
  --sphere-yaw-range:   30deg;
  --sphere-pitch-range: 18deg;
  --measure-tight: 52ch;

  --header-height:  72px;
  --header-height-sm: 60px;
  --tap-min: 44px;

  /* ---------------------------------------------------------------
     6. RADIUS
     --------------------------------------------------------------- */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     7. SHADOW AND FOCUS
     --------------------------------------------------------------- */

  --shadow-sm:     0 1px 3px rgba(8,45,49,.08);
  --shadow-md:     0 8px 24px rgba(8,45,49,.10);
  --shadow-lg:     0 24px 60px rgba(8,45,49,.12);
  --shadow-xl:     0 28px 70px rgba(8,45,49,.16);
  --shadow-action: 0 10px 26px rgba(0,118,126,.32);
  --shadow-action-hover: 0 14px 32px rgba(0,118,126,.40);
  --shadow-accent: 0 10px 26px rgba(255,202,45,.38);

  --focus-ring:  0 0 0 3px rgba(0,174,181,.45);
  --focus-width: 2px;
  --focus-offset: 3px;

  /* ---------------------------------------------------------------
     8. MOTION
     --------------------------------------------------------------- */

  --dur-instant: 90ms;
  --dur-fast:    140ms;
  --dur-med:     220ms;
  --dur-slow:    320ms;
  --dur-reveal:  420ms;

  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  --stagger-step: 60ms;
  --stagger-ring:  600ms;
  --dur-ring:      1200ms;
  --dur-wash:      1000ms;   /* the hero grid answering the main call to action */
  --lift-hover:   -2px;
  --scale-hover:  1.03;
  --scale-enter:  1.2;
  --reveal-shift: 20px;

  /* Marquee. Two different speeds so the rows never lock into step. */
  --dur-marquee-a: 96s;
  --dur-marquee-b: 118s;
  --logo-rest-opacity: 0.7;
  --logo-height: 68px;

  /* ---------------------------------------------------------------
     8b. MASKING
     Alpha stops for mask-image. Not paint colours, but kept here so no
     component needs a literal.
     --------------------------------------------------------------- */

  --mask-opaque: rgb(0 0 0);
  --mask-clear:  transparent;

  /* ---------------------------------------------------------------
     9. LAYERS
     --------------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-dropdown:200;
  --z-overlay: 300;
  --z-modal:   400;
}

/* Homepage 7 approved branding. Exact accent colours from the logo SVG. */
:root {
  --brand-preview-teal: #00adb4;
  --h8-swarm-dot-radius: 1.15;
  --h8-swarm-shell: #35f0cb;
  --h8-swarm-facet: #fff1b0;
  --h8-swarm-link-width: .35;
  --h8-swarm-back-opacity: .85;
  --h8-swarm-icon-start: 14%;
  --h8-swarm-icon-end: 86%;
  --h8-swarm-icon-depth: calc(var(--seed-cell) * .14);
  --brand-preview-yellow: #ffca2d;
  --brand-preview-yellow-rgb: 255 202 45;
  --brand-preview-dark: #031a1c;
  --brand-preview-white: #f3fbfa;
  --brand-preview-soft-yellow: #ffe797;
  --brand-preview-scene-filter: hue-rotate(-24deg) saturate(.78) brightness(.82);
  --h5-palette-0-accent: 0 173 180;
  --h5-palette-0-soft: 222 247 243;
  --h5-palette-0-ink: 243 251 250;
  --h5-palette-0-muted: 207 229 225;
  --h5-palette-0-strong: 255 202 45;
  --h5-palette-0-surface: 3 26 28;
  --h5-palette-0-button: 3 26 28;
  --h5-palette-0-icon: 243 251 250;
  --h5-palette-0-shadow: 0 15 16;
  --stage-bg: var(--brand-preview-dark);
  --h5-hero-surround: var(--brand-preview-dark);
  --h5-theme-primary: linear-gradient(180deg, var(--brand-preview-soft-yellow), var(--brand-preview-yellow));
  --h5-theme-primary-border: 1px solid var(--brand-preview-yellow);
  --h5-theme-primary-glow: 0 0 20px rgb(var(--brand-preview-yellow-rgb) / .24), inset 0 1px 2px rgb(255 255 255 / .4);
  --h5-theme-primary-hover: 0 0 28px rgb(var(--brand-preview-yellow-rgb) / .38), inset 0 1px 2px rgb(255 255 255 / .5);
  --h5-theme-outline-border: 1px solid rgb(var(--brand-preview-yellow-rgb) / .65);
  --h5-theme-outline-background: rgb(var(--h5-theme-surface) / .82);
  --h5-theme-outline-glow: 0 0 9px rgb(var(--brand-preview-yellow-rgb) / .12), inset 0 0 6px rgb(var(--h5-theme-accent) / .12);
  --h5-outline-cta-border: 1px solid rgb(var(--brand-preview-yellow-rgb) / .65);
  --h5-theme-border-gradient: conic-gradient(from 0deg, rgb(var(--h5-theme-accent) / .1) 0deg, rgb(var(--h5-theme-accent) / .1) 170deg, var(--brand-preview-yellow) 270deg, var(--brand-preview-soft-yellow) 340deg, rgb(var(--h5-theme-accent) / .1) 360deg);
  --h5-nav-active-ink: var(--brand-preview-yellow);
  --h5-nav-active-glow: 0 0 8px rgb(var(--brand-preview-yellow-rgb) / .55);
  --h8-detail-width: 600px;
  --h8-detail-width-short: 540px;
  --h8-detail-height: 400px;
  --h8-detail-height-short: 244px;
  --h8-detail-depth: 8px;
  --h8-detail-aspect: 1.4;
  --h8-detail-side-clearance: 24px;
  --h8-detail-seam-overlap: .5px;
  --h8-detail-plane-background: rgb(3, 26, 28);
  --h8-detail-edge: #00adb4;
  --h8-detail-icon: 36px;
  --h8-detail-icon-short: 26px;
  --h8-detail-heading-short: 22px;
  --h8-detail-chip-stroke: 1px solid var(--h8-detail-chip-border);
  --h8-detail-duration: 1600ms;
  --h8-detail-body-short: 16px;
  --h8-detail-label-short: 12px;
  --h8-detail-hover-grace: 280ms;
  --h8-detail-clearance: 8px;
  --h8-detail-blur: 16px;
  --h8-detail-heading: 26px;
  --h8-detail-body: 16px;
  --h8-detail-label: 12px;
  --h8-detail-ink: #f3fffe;
  --h8-detail-muted: #c6dfdd;
  --h8-detail-background: var(--h6-client-surface);
  --h8-detail-frame-radius: 22px;
  --h8-detail-frame-inset: 8px;
  --h8-detail-frame-stroke: 1.5px;
  --h8-detail-frame-inner-radius: 16px;
  --h8-detail-frame-ink: #46f4ef;
  --h8-detail-frame-shadow: inset 0 0 0 1.5px #32e8e8, inset 0 0 16px rgba(12, 236, 236, .28), 0 0 18px rgba(0, 232, 232, .35);
  --h8-detail-inner-stroke: 1px solid rgba(42, 223, 222, .55);
  --h8-detail-frame-highlights: linear-gradient(135deg, rgba(52, 244, 239, .17), transparent 18%, transparent 80%, rgba(52, 244, 239, .16));
  --h8-detail-orb: 52px;
  --h8-detail-orb-icon: 28px;
  --h8-detail-benefit-orb: 32px;
  --h8-detail-benefit-icon: 18px;
  --h8-detail-benefit-radius: 18px;
  --h8-detail-cyan-rgb: 32 229 240;
  --h8-detail-yellow-rgb: 255 218 64;
  --h8-detail-green-rgb: 34 231 159;
  --h8-detail-ornament-width: 32px;
  --h8-detail-ornament-height: 2px;
  --h8-detail-label-spacing: .14em;
  --h8-detail-footer: 15px;
  --h8-detail-chip-text: 14px;
  --h8-detail-padding: 24px;
  --h8-detail-glass-clear: rgba(3, 26, 28, 0);
  --h8-detail-glass-wash: linear-gradient(145deg, rgba(0, 173, 180, .12), rgba(3, 26, 28, .28));
  --h8-detail-chip-fill: rgba(0, 173, 180, .08);
  --h8-detail-chip-border: rgba(0, 173, 180, .35);
  --h8-detail-shadow: inset 0 0 0 1px rgba(0, 173, 180, .65), 0 0 38px rgba(0, 173, 180, .2), 0 16px 48px rgba(0, 0, 0, .4);
  --h5-nav-focus: 2px solid var(--brand-preview-yellow);
  --h5-menu-background: rgb(var(--h5-theme-surface) / .94);
  --h5-menu-hover: rgb(var(--brand-preview-yellow-rgb) / .08);
  --h5-search-scrim: rgb(0 15 16 / .24);
  --h5-theme-edge: rgb(var(--h5-theme-accent) / .78);
  --h5-theme-glass: rgb(var(--h5-theme-accent) / .09);
  --h5-theme-core: var(--brand-preview-white);
  --h5-services-icon-glow: drop-shadow(0 0 4px rgb(var(--brand-preview-yellow-rgb) / .3));
  --h5-services-card-background: rgb(var(--h5-theme-surface) / .55);
  --h5-services-focus: 2px solid var(--brand-preview-yellow);
  --h6-client-surface: rgb(var(--h5-theme-surface) / .46);
}
/* Temporary Sakura colour study, scoped to services and their expanded views.
   The header adopts it only while section two occupies the viewport midpoint.
   Remove data-h8-theme="sakura" from the homepage to disable this experiment. */
:root[data-h8-theme="sakura"] :is(#expertise, .h8-expanded, .h5-header.is-sakura) {
  --brand-preview-teal: #f597b8;
  --brand-preview-yellow: #ffd4df;
  --brand-preview-yellow-rgb: 255 212 223;
  --brand-preview-soft-yellow: #fff0e8;
  --brand-preview-dark: #241725;
  --brand-preview-white: #fff8f4;
  --brand-preview-scene-filter: hue-rotate(120deg) saturate(.55) brightness(.7);
  /* Reuse the earlier blossom palette, with light ink on the glass surfaces. */
  --h5-palette-0-accent: var(--h5-palette-2-accent);
  --h5-palette-0-soft: var(--h5-palette-2-soft);
  --h5-palette-0-ink: 255 248 244;
  --h5-palette-0-muted: 237 220 229;
  --h5-palette-0-strong: 255 212 223;
  --h5-palette-0-surface: 36 23 37;
  --h5-palette-0-button: 52 17 37;
  --h5-palette-0-icon: 255 240 232;
  --h5-palette-0-shadow: 20 12 24;
  --h5-copy-shade: radial-gradient(ellipse at center, rgb(36 23 37 / .96), rgb(36 23 37 / .82) 55%, transparent 78%);
  --h5-glass-fallback: #392537;
  --h5-glass-border: 1px solid rgb(255 222 235 / .66);
  --h5-search-scrim: rgb(36 23 37 / .24);
  --h8-firefly-core: #fff0e8;
  --h8-firefly-light: #ffaccd;
  --h8-firefly-halo: rgb(245 151 184 / .2);
  --h8-firefly-clear: rgb(245 151 184 / 0);
  --h8-section-icon-cutout: var(--brand-preview-dark);
  --h8-expertise-background: var(--brand-preview-dark);
  --h8-expertise-background-overlay: linear-gradient(180deg, rgb(36 23 37 / .64), rgb(36 23 37 / .28) 45%, rgb(36 23 37 / .48));
  --h8-expertise-surface: linear-gradient(145deg, rgb(58 32 52 / .82), rgb(30 23 39 / .88));
  --h8-expertise-border: 1px solid rgb(245 151 184 / .65);
  --h8-expertise-border-gradient: conic-gradient(from 0deg, transparent 0deg 265deg, rgb(245 151 184 / .12) 280deg, rgb(245 151 184 / .5) 320deg, #fff0e8 348deg, rgb(245 151 184 / .55) 356deg, transparent 360deg);
  --h8-expertise-shadow: inset 0 0 14px rgb(245 151 184 / .1), inset 0 1px 2px rgb(255 222 235 / .5), 0 0 8px rgb(245 151 184 / .2);
  --h8-expertise-icon-bg: linear-gradient(145deg, rgb(151 74 116 / .3), rgb(45 16 32 / .5));
  --h8-expertise-icon-shadow: inset 0 0 12px rgb(245 151 184 / .15);
  --h8-expertise-rule: linear-gradient(90deg, transparent, rgb(245 151 184 / .45), transparent);
  --h8-expertise-support-bg: rgb(36 23 37 / .82);
  --h8-expertise-dialog-bg: #241725;
  --h8-expertise-backdrop: rgb(20 12 24 / .82);
  --h8-expertise-art-filter: hue-rotate(135deg) saturate(.65);
  --h8-expanded-rule: 1px solid rgb(245 151 184 / .25);
  --h8-expanded-button-shadow: inset 0 0 16px rgb(245 151 184 / .16), 0 0 10px rgb(255 212 223 / .08);
  --h8-expanded-surface: var(--h8-expertise-surface);
  --h8-expanded-edge: var(--h8-expertise-border);
  --h8-expanded-shadow: var(--h8-expertise-shadow);
  --h8-expanded-backdrop: rgb(20 12 24 / .7);
  --h8-detail-plane-background: var(--brand-preview-dark);
  --h8-detail-edge: var(--brand-preview-teal);
  --h8-detail-ink: var(--brand-preview-white);
  --h8-detail-muted: #eddce5;
  --h8-detail-frame-ink: #ffdeeb;
  --h8-detail-frame-shadow: inset 0 0 0 1.5px #f597b8, inset 0 0 16px rgb(245 151 184 / .2), 0 0 18px rgb(245 151 184 / .25);
  --h8-detail-inner-stroke: 1px solid rgb(245 151 184 / .55);
  --h8-detail-frame-highlights: linear-gradient(135deg, rgb(255 222 235 / .17), transparent 18%, transparent 80%, rgb(255 222 235 / .16));
  --h8-detail-cyan-rgb: 245 151 184;
  --h8-detail-yellow-rgb: 255 212 223;
  --h8-detail-green-rgb: 214 187 229;
  --h8-detail-glass-clear: rgb(36 23 37 / 0);
  --h8-detail-glass-wash: linear-gradient(145deg, rgb(245 151 184 / .12), rgb(36 23 37 / .28));
  --h8-detail-chip-fill: rgb(245 151 184 / .08);
  --h8-detail-chip-border: rgb(245 151 184 / .35);
  --h8-detail-shadow: inset 0 0 0 1px rgb(245 151 184 / .65), 0 0 38px rgb(245 151 184 / .2), 0 16px 48px rgb(20 12 24 / .4);

  /* Re-resolve dependent tokens in this subtree, not on the hero root. */
  --h8-expertise-text: var(--h5-theme-heading);
  --h8-expertise-muted: var(--h5-theme-description);
  --h8-expanded-button-border: 1px solid var(--brand-preview-yellow);
  --h8-expanded-corner: linear-gradient(90deg, var(--brand-preview-teal), transparent);
  --h8-expertise-focus: 2px solid var(--brand-preview-yellow);
  --h7-cube-hover-edge: var(--brand-preview-yellow);
  --h8-firefly-label-shadow: 0 1px 3px var(--brand-preview-dark);
  --h8-core-ink: var(--brand-preview-yellow);
  --h8-core-link-ink: rgb(var(--brand-preview-yellow-rgb) / .65);
  --h6-client-surface: rgb(var(--h5-theme-surface) / .46);
  --h5-theme-accent: var(--h5-palette-0-accent);
  --h5-theme-soft: var(--h5-palette-0-soft);
  --h5-theme-ink: var(--h5-palette-0-ink);
  --h5-theme-muted: var(--h5-palette-0-muted);
  --h5-theme-strong: var(--h5-palette-0-strong);
  --h5-theme-surface: var(--h5-palette-0-surface);
  --h5-theme-button: var(--h5-palette-0-button);
  --h5-theme-icon: var(--h5-palette-0-icon);
  --h5-theme-shadow: var(--h5-palette-0-shadow);
  --h5-theme-icon-ink: rgb(var(--h5-theme-icon));
  --h5-theme-stats-background: rgb(var(--h5-theme-surface) / .3);
  --h5-theme-stats-border: 1px solid rgb(var(--h5-theme-accent) / .3);
  --h5-theme-heading: rgb(var(--h5-theme-ink));
  --h5-theme-description: rgb(var(--h5-theme-muted));
  --h5-theme-highlight: rgb(var(--h5-theme-strong));
  --h5-theme-light: rgb(var(--h5-theme-soft));
  --h5-theme-colour: rgb(var(--h5-theme-accent));
  --h5-theme-primary: linear-gradient(180deg, var(--brand-preview-soft-yellow), var(--brand-preview-yellow));
  --h5-theme-primary-ink: rgb(var(--h5-theme-button));
  --h5-theme-primary-border: 1px solid var(--brand-preview-yellow);
  --h5-theme-primary-glow: 0 0 20px rgb(var(--brand-preview-yellow-rgb) / .24), inset 0 1px 2px rgb(255 255 255 / .4);
  --h5-theme-primary-hover: 0 0 28px rgb(var(--brand-preview-yellow-rgb) / .38), inset 0 1px 2px rgb(255 255 255 / .5);
  --h5-theme-outline-background: rgb(var(--h5-theme-surface) / .82);
  --h5-theme-outline-border: 1px solid rgb(var(--brand-preview-yellow-rgb) / .65);
  --h5-theme-outline-glow: 0 0 9px rgb(var(--brand-preview-yellow-rgb) / .12), inset 0 0 6px rgb(var(--h5-theme-accent) / .12);
  --h5-theme-border-gradient: conic-gradient(from 0deg, rgb(var(--h5-theme-accent) / .1) 0deg, rgb(var(--h5-theme-accent) / .1) 170deg, var(--brand-preview-yellow) 270deg, var(--brand-preview-soft-yellow) 340deg, rgb(var(--h5-theme-accent) / .1) 360deg);
  --h5-theme-glass: rgb(var(--h5-theme-accent) / .09);
  --h5-theme-edge: rgb(var(--h5-theme-accent) / .78);
  --h5-theme-glow: rgb(var(--h5-theme-accent) / .3);
  --h5-theme-side: rgb(var(--h5-theme-accent) / .04);
  --h5-theme-under: rgb(var(--h5-theme-surface) / .18);
  --h5-theme-core: var(--brand-preview-white);
  --h5-theme-bloom: rgb(var(--h5-theme-accent) / .16);
  --h5-theme-floor: rgb(var(--h5-theme-accent) / .08);
  --h5-hero-surround: var(--brand-preview-dark);
  --h5-nav-ink: rgb(var(--h5-theme-soft));
  --h5-nav-active-ink: var(--brand-preview-yellow);
  --h5-nav-cyan: rgb(var(--h5-theme-accent));
  --h5-nav-panel: rgb(var(--h5-theme-surface));
  --h5-nav-background: linear-gradient(to bottom, rgb(var(--h5-theme-surface) / .98), rgb(var(--h5-theme-surface) / .9) 75%, rgb(var(--h5-theme-surface) / 0));
  --h5-nav-border: 1px solid rgb(var(--h5-theme-accent) / .6);
  --h5-nav-glow: 0 0 15px rgb(var(--h5-theme-accent) / .3), inset 0 0 12px rgb(var(--h5-theme-accent) / .12);
  --h5-nav-active-glow: 0 0 8px rgb(var(--brand-preview-yellow-rgb) / .55);
  --h5-outline-cta-background: var(--h5-theme-outline-background);
  --h5-outline-cta-border: 1px solid rgb(var(--brand-preview-yellow-rgb) / .65);
  --h5-outline-cta-glow: var(--h5-theme-outline-glow);
  --h5-border-gradient: var(--h5-theme-border-gradient);
  --h5-nav-focus: 2px solid var(--brand-preview-yellow);
  --h5-menu-hover: rgb(var(--brand-preview-yellow-rgb) / .08);
  --h5-menu-feature-border: 1px solid rgb(var(--h5-theme-accent) / .24);
  --h5-menu-background: rgb(var(--h5-theme-surface) / .94);
  --h5-services-panel-border: 1px solid rgb(var(--h5-theme-accent) / .32);
  --h5-services-card-border: 1px solid rgb(var(--h5-theme-accent) / .65);
  --h5-services-card-background: rgb(var(--h5-theme-surface) / .55);
  --h5-services-card-shadow: inset 0 0 12px rgb(var(--h5-theme-accent) / .28), inset 0 1px 2px rgb(var(--h5-theme-soft) / .4), 0 0 12px rgb(var(--h5-theme-accent) / .15);
  --h5-services-card-hover-shadow: inset 0 0 18px rgb(var(--h5-theme-accent) / .35), 0 0 20px rgb(var(--h5-theme-accent) / .3);
  --h5-services-icon-glow: drop-shadow(0 0 4px rgb(var(--brand-preview-yellow-rgb) / .3));
  --h5-services-focus: 2px solid var(--brand-preview-yellow);
  --stage-bg: var(--brand-preview-dark);
  --h8-detail-chip-stroke: 1px solid var(--h8-detail-chip-border);
  --h8-detail-background: var(--h6-client-surface);
}