/* Global design system: tokens, shared shell, reusable components, interactive model, and utilities.
   Contract: DESIGN-SYSTEM.md and AGENTS.md govern additions. Keep reusable values
   in :root, document genuine exceptions at their declaration, and avoid creating
   page-specific competitors to shared components. */
@font-face {
  font-family: "Noto Serif";
  src: url("assets/fonts/noto-serif-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-300-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/poppins-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Token catalogue: palette and art direction first, then semantic UI contracts. Change reusable values here and document their use in DESIGN-SYSTEM.md. */
:root {
  --font-display: "Noto Serif", Georgia, serif;
  --font-body: "Poppins", Arial, sans-serif;
  --ink: #15191A;
  --evergreen: #005746;
  --green: #6E9C56;
  --moss: #BECF99;
  --moss-soft: #EBEBDC;
  --shell: #F7F1E2;
  --surface: #F7F4EE;
  --content: #FFFFFF;
  --border: #EBE5DA;
  --slate: #33495E;
  --muted: #95AFCB;
  --gold: #B8965A;
  --blush: #F3B6A5;
  --peach: #F8D1C1;
  --celadon: #AFC9B4;
  --error-accent: #C9795E;
  --error-border: var(--error-accent);
  --error-background: #FFF2EC;
  --error-text: #6E3F32;
  --error-ring: rgba(201, 121, 94, 0.22);
  --renewal-green: var(--green);
  --calm-canopy: var(--evergreen);
  --garden-mist: var(--moss);
  --mustard-earth: var(--gold);
  --evening-bay: var(--slate);
  --cloud-bay: var(--muted);
  --natural-shell: var(--shell);
  --white: var(--content);
  --nka-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='.46'/%3E%3C/svg%3E");
  --nka-gradient-jade-horizon: linear-gradient(135deg, #005746 0%, #6E9C56 48%, #F8D1C1 100%);
  --nka-gradient-moss-field: linear-gradient(135deg, #F3B6A5 0%, #F7F1E2 48%, #BECF99 100%);
  --nka-gradient-cream-canopy: linear-gradient(135deg, #F8D1C1 0%, #F7F1E2 48%, #95AFCB 100%);
  --nka-gradient-slate-grove: linear-gradient(135deg, #33495E 0%, #005746 42%, #AFC9B4 74%, #F7F1E2 100%);
  --nka-gradient-muted-shell: linear-gradient(135deg, #F7F4EE 0%, #F3B6A5 34%, #95AFCB 68%, #005746 100%);
  --nka-gradient-gold-garden: linear-gradient(135deg, #B8965A 0%, #F8D1C1 38%, #BECF99 70%, #6E9C56 100%);
  /* The outer page field is a single code-rendered gradient. Intermediate
     stops keep the narrow desktop gutters smooth without raster textures,
     blurred overlays, or animated compositor seams. */
  --nka-stage-field: linear-gradient(
    135deg,
    #005746 0%,
    #0b6049 18%,
    #216f50 38%,
    #3d8157 58%,
    #5b9159 78%,
    #6e9c56 100%
  );
  /* Shared photographic-hero veil: keep the full headline measure protected,
     then resolve to complete transparency across the right image field. */
  --hero-image-overlay: linear-gradient(
    90deg,
    rgba(9, 66, 52, 0.92) 0%,
    rgba(9, 66, 52, 0.86) 28%,
    rgba(9, 66, 52, 0.62) 42%,
    rgba(9, 66, 52, 0.3) 55%,
    rgba(9, 66, 52, 0) 68%
  );
  --hero-image-overlay-mobile: linear-gradient(
    180deg,
    rgba(9, 66, 52, 0) 0%,
    rgba(9, 66, 52, 0) 36%,
    rgba(9, 66, 52, 0.42) 50%,
    rgba(9, 66, 52, 0.78) 64%,
    rgba(9, 66, 52, 0.94) 100%
  );
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  /* One Lucide arrow contract across buttons, mega-menu actions, and
     previous/next navigation. Components may change their surrounding chrome,
     but not the arrow geometry or motion. */
  --arrow-icon-size: 20px;
  --arrow-stroke-width: 1.8;
  --arrow-inline-gap: 8px;
  --arrow-hover-distance: 3px;
  --arrow-motion-duration: 240ms;
  --arrow-motion-ease: var(--motion-ease);
  /* July 12 foundation: keep hero, mega-menu, and placeholder systems global here. */
  /* Shared type scale for card copy in every primary mega menu. */
  /* Mega-menu copy and CTA tokens keep all navigation families on the same reading scale. */
  --type-mega-card-title: clamp(18px, 1.22vw, 22px);
  --type-mega-card-copy-size: 14px;
  --type-mega-card-copy-line-height: 1.46;
  --type-mega-card-copy-weight: 300;
  /* One CTA contract across every primary mega-menu family. */
  --mega-card-cta-font-family: var(--font-body);
  --mega-card-cta-font-size: 13px;
  --mega-card-cta-font-weight: 500;
  --mega-card-cta-line-height: 1.4;
  --mega-card-cta-color: var(--green);
  --mega-card-cta-gap: var(--arrow-inline-gap);
  --mega-card-cta-padding-top: 18px;
  --mega-card-cta-arrow-size: var(--arrow-icon-size);
  --mega-card-cta-arrow-stroke-width: var(--arrow-stroke-width);
  --mega-card-cta-arrow-hover-distance: var(--arrow-hover-distance);
  --mega-card-cta-motion-duration: var(--arrow-motion-duration);
  --mega-card-cta-motion-ease: var(--arrow-motion-ease);
  --motion-mega-persona-glide: 48s;
  --motion-mega-persona-glide-reverse: 54s;

  /* Shared hero-banner typography. Keep page-specific heroes on these tokens. */
  /* Shared hero geometry, crop, and motion contracts; page adapters choose artwork without redefining the layout system. */
  --hero-banner-min-height: clamp(540px, 65vw, 760px);
  --hero-banner-gutter: var(--page-rail-inset);
  --hero-banner-pad-top: clamp(36px, 6vw, 92px);
  --hero-banner-pad-bottom: clamp(58px, 8vw, 104px);
  /* Keep the complete desktop copy rail within the left half of the banner.
     Subtract the left gutter so headings and descriptions share that edge. */
  --hero-banner-content-width: min(680px, calc(50% - var(--hero-banner-gutter)));
  --hero-banner-content-gap: clamp(20px, 2.2vw, 34px);
  --hero-banner-mobile-min-height: clamp(560px, 78svh, 640px);
  --hero-banner-mobile-pad-top: 28px;
  --hero-banner-mobile-content-width: min(
    calc(100% - (2 * var(--page-gutter-inline))),
    620px
  );
  --hero-banner-mobile-pad-bottom: 52px;
  --hero-banner-mobile-content-gap: clamp(16px, 4.5vw, 24px);
  /* Shared tablet art direction. Landscape tablets retain the wide hero,
     portrait tablets reserve a tighter copy rail, and photographic motion
     stays anchored to the safe top edge so faces cannot drift under the crop. */
  --hero-banner-tablet-landscape-content-width: min(43%, 520px);
  --hero-banner-tablet-landscape-image-position: 72% center;
  --hero-banner-tablet-content-width: min(46%, 390px);
  --hero-banner-tablet-image-position: 82% center;
  --hero-banner-tablet-motion-from-scale: 1.01;
  --hero-banner-tablet-motion-to-scale: 1.035;
  --hero-banner-tablet-motion-transform-origin: center top;
  /* Mobile rotating-hero control rail. All hero variants reserve the same
     clearance below their copy and anchor navigation to the lower right. */
  --hero-pagination-mobile-inline: var(--page-gutter-inline);
  --hero-pagination-mobile-bottom: 24px;
  --hero-pagination-mobile-content-clearance: 116px;
  /* Rotating frames and continuously looping photos share slow zoom timing.
     Slide dwell is independent; looping photos reverse smoothly. */
  --hero-ken-burns-from-scale: 1.05;
  --hero-ken-burns-from-x: -8px;
  --hero-ken-burns-from-y: 8px;
  --hero-ken-burns-to-scale: 1.14;
  --hero-ken-burns-to-x: 10px;
  --hero-ken-burns-to-y: -10px;
  --hero-ken-burns-pass-duration: var(--hero-image-drift-pass-duration);
  --hero-ken-burns-pass-ease: var(--hero-image-drift-ease);
  --hero-ken-burns-loop-duration: 16s;
  --hero-ken-burns-ease: linear;
  --hero-image-drift-pass-duration: 18s;
  --hero-image-drift-ease: cubic-bezier(0.42, 0, 0.58, 1);
  /* Rotating heroes and editorial image galleries share one soft crossfade so
     incoming and outgoing artwork remain visible together during the change. */
  --hero-crossfade-duration: 1.45s;
  --hero-crossfade-ease: cubic-bezier(0.37, 0, 0.63, 1);
  --hero-image-reveal-duration: 1.4s;
  --hero-image-reveal-ease: var(--motion-ease-soft);
  --type-hero-heading-line-height: 1.13;
  --type-hero-heading-size: clamp(54px, 5.8vw, 88px);
  --type-hero-heading-mobile-size: clamp(34px, 10.5vw, 52px);
  --type-client-story-hero-heading-size: clamp(46px, 4.35vw, 64px);
  --type-client-story-hero-heading-mobile-size: clamp(32px, 9vw, 44px);
  --type-hero-heading-width: 100%;
  --type-hero-eyebrow-font-family: var(--font-body);
  --type-hero-eyebrow-size: clamp(15px, 1vw, 17px);
  --type-hero-eyebrow-weight: 500;
  --type-hero-eyebrow-line-height: 1.4;
  --type-hero-eyebrow-letter-spacing: 0;
  --type-hero-eyebrow-color: rgba(255, 255, 255, 0.82);
  --type-hero-eyebrow-text-transform: none;
  --type-hero-copy-size: clamp(19px, 1.45vw, 23px);
  --type-hero-copy-mobile-size: clamp(16px, 4.4vw, 19px);
  --type-hero-copy-line-height: 1.48;
  --type-hero-copy-width: 44ch;

  /* Canonical system tokens. New UI must use these semantic aliases. */
  --color-text: var(--ink);
  --color-text-inverse: var(--content);
  --color-brand: var(--evergreen);
  --color-brand-accent: var(--green);
  --color-page: var(--surface);
  --color-surface: var(--content);
  --color-surface-warm: var(--shell);
  /* Shared light cream for procurement and client-story notice panels. */
  --color-surface-cream: #F8F5ED;
  --color-border: var(--border);
  --color-focus: var(--gold);

  --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;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --mega-menu-card-radius: var(--radius-sm);
  /* What We Do is the reference for every mega-menu card interaction. */
  --mega-menu-card-border: var(--color-border);
  --mega-menu-card-border-hover: rgba(110, 156, 86, 0.62);
  --mega-menu-card-shadow: none;
  --mega-menu-card-shadow-hover: 0 18px 38px rgba(21, 25, 26, 0.11);
  --mega-menu-card-duration: 420ms;
  --mega-menu-card-ease: var(--motion-ease);
  --mega-menu-media-scale: 1.035;
  --mega-menu-media-duration: 1800ms;
  --mega-menu-media-ease: var(--motion-ease-soft);
  /* Canonical Apple-inspired radius for every on-page content card/panel. */
  --radius-card: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --shadow-sm: 0 4px 16px rgba(21, 25, 26, 0.08);
  --shadow-md: 0 14px 40px rgba(21, 25, 26, 0.12);
  --shadow-lg: 0 24px 72px rgba(21, 25, 26, 0.16);
  --shadow-panel-premium:
    0 14px 34px rgba(0, 87, 70, 0.07),
    0 3px 10px rgba(21, 25, 26, 0.035);
  --shadow-panel-premium-hover:
    0 24px 54px rgba(0, 87, 70, 0.12),
    0 6px 18px rgba(21, 25, 26, 0.055);

  /* Shared elevated-card contract. Homepage carousel cards and Industries
     cards consume these semantic values so surface, edge, and motion changes
     remain synchronized without coupling their content layouts. */
  --card-surface-background: var(--color-surface);
  --card-surface-border: rgba(0, 87, 70, 0.12);
  --card-surface-border-hover: rgba(0, 87, 70, 0.24);
  --card-surface-radius: var(--radius-card);
  --card-surface-shadow: var(--shadow-panel-premium);
  --card-surface-shadow-hover: var(--shadow-panel-premium-hover);
  --card-lift-distance: -8px;
  --card-lift-scale: 1.015;
  --card-lift-duration: 560ms;
  --card-lift-ease: var(--motion-ease-soft);
  --card-media-zoom-scale: 1.035;
  --card-media-zoom-duration: 2600ms;
  --card-media-zoom-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --card-content-padding: 24px;
  --card-media-aspect-ratio: 16 / 9;
  --card-title-color: var(--evergreen);
  --card-title-font: var(--font-display);
  --card-title-size: clamp(22px, 1.8vw, 28px);
  --card-title-weight: 500;
  --card-title-line-height: 1.15;

  /* Shared sector-pulse contract. Every industry ring, narrative card, and
     motion state consumes this one token set so global tuning stays atomic. */
  --sector-pulse-color-1: #005746;
  --sector-pulse-color-2: #2e7d52;
  --sector-pulse-color-3: #6e9c56;
  --sector-pulse-color-4: #f2a87e;
  --sector-pulse-section-padding-block: clamp(40px, 4.5vw, 64px);
  --sector-pulse-inner-padding-block: clamp(72px, 7vw, 104px);
  --sector-pulse-layout-columns: minmax(460px, 1.08fr) minmax(350px, 0.92fr);
  --sector-pulse-layout-gap: clamp(52px, 7vw, 116px);
  --sector-pulse-divider-color: rgba(0, 87, 70, 0.22);
  --sector-pulse-chart-width: min(88%, 540px);
  --sector-pulse-chart-width-stacked: min(100%, 500px);
  --sector-pulse-ring-cutout: 66%;
  --sector-pulse-center-width: 38%;
  --sector-pulse-center-height: clamp(124px, 30%, 136px);
  --sector-pulse-center-rows: 18px 54px 46px;
  --sector-pulse-center-gap: 9px;
  --sector-pulse-hint-offset: 24px;
  --sector-pulse-legend-gap: 10px;
  --sector-pulse-legend-offset: 34px;
  --sector-pulse-card-columns: 84px minmax(0, 1fr);
  --sector-pulse-card-gap: 18px;
  --sector-pulse-card-min-height: 124px;
  --sector-pulse-card-padding: 16px 20px 16px 12px;
  --sector-pulse-card-radius: 18px;
  --sector-pulse-card-align: start;
  --sector-pulse-copy-padding-block: 7px;
  --sector-pulse-metric-width: 84px;
  --sector-pulse-metric-height: 92px;
  --sector-pulse-metric-radius: 13px;
  --sector-pulse-ring-intro-duration: 1250ms;
  --sector-pulse-ring-active-duration: 360ms;
  --sector-pulse-center-motion-duration: 760ms;
  --sector-pulse-center-motion-delay: 90ms;
  --sector-pulse-marker-exit-duration: 340ms;
  --sector-pulse-marker-handoff-delay: 180ms;
  --sector-pulse-marker-enter-duration: 720ms;
  --sector-pulse-marker-pulse-delay: 620ms;
  --sector-pulse-marker-pulse-duration: 900ms;
  --sector-pulse-marker-total-duration: 1520ms;

  /* Canonical client-testimonial treatment. Homepage and client-story pages
     share this solid sage surface and editorial type hierarchy. */
  --testimonial-surface-background: #e3edde;
  --testimonial-surface-border: rgba(0, 87, 70, 0.1);
  --testimonial-surface-radius: var(--radius-card);
  --testimonial-quote-color: #2e7d52;
  --testimonial-quote-font: var(--font-display);
  --testimonial-quote-size: clamp(25px, 2.2vw, 30px);
  --testimonial-quote-weight: 500;
  --testimonial-quote-line-height: 1.3;
  --testimonial-author-color: #005746;
  --testimonial-role-color: #35534b;
  --testimonial-author-size: 17px;
  --testimonial-role-size: 14px;
  --testimonial-logo-height: 56px;
  --testimonial-logo-min-width: 96px;
  --testimonial-logo-max-width: 164px;
  --testimonial-logo-padding-block: 9px;
  --testimonial-logo-padding-inline: 14px;
  --testimonial-logo-radius: 12px;
  --testimonial-logo-top-inset: clamp(48px, 5vw, 72px);
  --testimonial-logo-bottom-gap: 28px;
  --testimonial-attribution-top-gap: 32px;
  --testimonial-attribution-stack-gap: 5px;
  --testimonial-attribution-avatar-gap: 24px;
  --testimonial-avatar-size: 64px;
  --testimonial-avatar-badge-size: 26px;
  --testimonial-avatar-badge-inline-offset: -8px;
  --testimonial-avatar-badge-block-offset: -6px;
  --testimonial-avatar-badge-logo-width: 18px;
  --testimonial-avatar-badge-logo-height: 15px;
  --testimonial-avatar-pulse-color: rgba(46, 125, 82, 0.76);
  --testimonial-avatar-pulse-glow: rgba(110, 156, 86, 0.3);
  --testimonial-avatar-pulse-duration: 3000ms;

  /* Shared carousel footer navigation. Card rails use one visual and
     interaction contract; photographic hero pagination remains separate. */
  --carousel-footer-control-size: 44px;
  --carousel-footer-gap: 12px;
  --carousel-footer-dot-gap: 11px;
  --carousel-footer-dot-size: 8px;
  --carousel-footer-dot-active-width: 34px;
  --carousel-footer-pill-padding: 18px;
  --carousel-footer-pill-background: var(--pagination-pill-background);
  --carousel-footer-pill-border: var(--pagination-pill-border);
  --carousel-footer-dot-idle: #b4c892;
  --carousel-footer-dot-hover: var(--pagination-dot-hover);
  --carousel-footer-border: color-mix(in srgb, var(--color-brand) 18%, transparent);
  --carousel-footer-shadow: 0 8px 20px rgba(0, 87, 70, 0.1);
  --carousel-footer-shadow-hover: 0 12px 28px rgba(0, 87, 70, 0.2);

  /* Canonical pagination palette across hero, gallery, model, and card rails. */
  --pagination-pill-background: rgba(229, 236, 216, 0.5);
  --pagination-pill-border: rgba(110, 156, 86, 0.16);
  --pagination-dot-idle: #ffffff;
  --pagination-dot-hover: #8eac72;
  --pagination-active-color: #6e9c56;

  /* Hero/banner pagination is deliberately chrome-free over photography. */
  --hero-pagination-gap: 10px;
  --hero-pagination-padding-block: 0px;
  --hero-pagination-padding-inline: 0px;
  --hero-pagination-border-width: 0px;
  --hero-pagination-border: transparent;
  --hero-pagination-background: transparent;
  --hero-pagination-shadow: none;
  --hero-pagination-backdrop-filter: none;
  --hero-pagination-dot-size: 8px;
  --hero-pagination-dot-active-width: 34px;
  --hero-pagination-dot-idle: rgba(255, 255, 255, 0.62);
  --hero-pagination-dot-hover: rgba(255, 255, 255, 0.86);
  --hero-pagination-dot-active: #ffffff;

  --type-display-xl: clamp(3rem, 7vw, 6.75rem);
  --type-display-lg: clamp(2.5rem, 5vw, 5rem);
  --type-heading-lg: clamp(2rem, 3.4vw, 3.5rem);
  --type-heading-md: clamp(1.5rem, 2.4vw, 2.25rem);
  --type-body-lg: clamp(1.0625rem, 1.3vw, 1.25rem);
  --type-body: 1rem;
  /* Compact navigation labels are 24% larger than the original 15px size. */
  --type-mobile-nav-label-size: 1.1625rem;
  --type-small: 0.875rem;
  --type-editorial-body-size: clamp(15px, 1.1vw, 17px);
  --type-editorial-body-mobile-size: 16px;
  --type-editorial-emphasis-weight: 600;
  --type-eyebrow-size: 12px;
  --type-eyebrow-line-height: 1.24;
  --type-eyebrow-letter-spacing: 0.08em;
  --type-eyebrow-weight: 500;
  --leading-tight: 1.08;
  --leading-heading: 1.18;
  --leading-body: 1.65;

  --control-height-sm: 40px;
  --control-height-md: 48px;
  --control-height-lg: 56px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --target-min: 44px;
  --close-control-size: 44px;
  --close-control-mark: 18px;
  --close-control-stroke: 2px;

  --motion-fast: 140ms;
  --motion-base: 240ms;
  --motion-slow: 480ms;
  /* Shared lift for persistent circular controls such as Back to top and
     Review cookie preferences. */
  --motion-floating-control-lift-duration: var(--motion-slow);
  --motion-floating-control-lift-distance: -3px;
  --motion-floating-control-color-duration: 180ms;
  --floating-control-hover-background: #2f745d;
  --modal-panel-enter: 520ms;
  --modal-panel-exit: 420ms;
  --modal-backdrop-enter: 420ms;
  --modal-backdrop-exit: 320ms;
  --modal-motion-ease: cubic-bezier(0.33, 1, 0.68, 1);
  /* One modal contract across team, persona, consent and form dialogs. */
  --modal-surface: var(--color-surface);
  --modal-backdrop-background: rgba(0, 45, 38, 0.72);
  --modal-backdrop-filter: blur(7px);
  --modal-close-inset: 18px;
  --modal-close-border: color-mix(in srgb, var(--color-brand) 28%, transparent);
  --modal-close-background: rgba(255, 255, 255, 0.94);
  --modal-close-color: var(--color-brand);
  --modal-close-hover-background: var(--color-brand-accent);
  --modal-close-hover-color: var(--color-text-inverse);
  --content-max: 1280px;
  /* Canonical page rail. Use the width token on every top-level content
     section; nested components fill that rail instead of subtracting gutters
     a second time. */
  --page-gutter-inline: clamp(20px, 3.5vw, 52px);
  --page-rail-inset: max(
    var(--page-gutter-inline),
    calc((100% - var(--content-max)) / 2)
  );
  --page-rail-width: calc(100% - (2 * var(--page-rail-inset)));
  --text-max: 72ch;
}

@media (max-width: 900px) {
  /* Preserve the ambient gradient without animating its oversized fields.
     Their viewport-wide transforms register as layout instability and keep
     the mobile compositor busy without adding useful interaction. */
  .stage::before,
  .stage::after {
    display: none;
  }

  /* Mega-menu artwork is decorative and hidden behind mobile navigation. Keep
     desktop art direction intact while avoiding off-screen background fetches. */
  :is(.what-card__media,.implementation-feature__media,.family-card__preview,.about-card__media) {
    background-image:none !important;
  }
}

/* Carousel footer navigation
   Shared by homepage service cards and client/industry story-card rails. */
.carousel-footer-nav {
  display: flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  gap: var(--carousel-footer-gap);
}

.carousel-footer-nav__button {
  display: grid;
  width: var(--carousel-footer-control-size);
  height: var(--carousel-footer-control-size);
  padding: 0;
  place-items: center;
  border: 1px solid var(--carousel-footer-border);
  border-radius: var(--radius-round);
  background: var(--color-surface);
  color: var(--color-brand);
  box-shadow: var(--carousel-footer-shadow);
  cursor: pointer;
  transition:
    color 260ms var(--motion-ease),
    background 260ms var(--motion-ease),
    border-color 260ms var(--motion-ease),
    box-shadow 320ms var(--motion-ease-soft),
    transform 320ms var(--motion-ease-soft);
}

.carousel-footer-nav__button .icon {
  width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  stroke-width: var(--arrow-stroke-width);
}

.carousel-footer-nav__button .nka-arrow-icon {
  transition: transform var(--arrow-motion-duration) var(--arrow-motion-ease);
}

.carousel-footer-nav__button:is(:hover, :focus-visible) [data-lucide="arrow-left"] {
  transform: translateX(calc(-1 * var(--arrow-hover-distance)));
}

.carousel-footer-nav__button:is(:hover, :focus-visible) [data-lucide="arrow-right"] {
  transform: translateX(var(--arrow-hover-distance));
}

.carousel-footer-nav__button:hover {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  box-shadow: var(--carousel-footer-shadow-hover);
  transform: translateY(-2px);
}

.carousel-footer-nav__button:focus-visible,
.carousel-footer-nav__dot:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.carousel-footer-nav__button:active {
  transform: translateY(0) scale(0.96);
}

.carousel-footer-nav__dots {
  display: flex;
  min-height: var(--carousel-footer-control-size);
  padding: 0 var(--carousel-footer-pill-padding);
  align-items: center;
  gap: var(--carousel-footer-dot-gap);
  border: 1px solid var(--carousel-footer-pill-border);
  border-radius: var(--radius-pill);
  background: var(--carousel-footer-pill-background);
  box-shadow: var(--carousel-footer-shadow);
  backdrop-filter: blur(14px);
}

.carousel-footer-nav__dot {
  width: var(--carousel-footer-dot-size);
  height: var(--carousel-footer-dot-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--carousel-footer-dot-idle);
  cursor: pointer;
  transition:
    width 300ms var(--motion-ease),
    border-radius 300ms var(--motion-ease),
    background 300ms var(--motion-ease);
}

.carousel-footer-nav__dot.is-active {
  width: var(--carousel-footer-dot-active-width);
  border-radius: var(--radius-xs);
  background: var(--pagination-active-color);
}

.carousel-footer-nav__dot:hover,
.carousel-footer-nav__dot:focus-visible {
  background: var(--carousel-footer-dot-hover);
}

.carousel-footer-nav__dot.is-active:hover,
.carousel-footer-nav__dot.is-active:focus-visible {
  background: var(--pagination-active-color);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-footer-nav__button,
  .carousel-footer-nav__dot {
    transition-duration: 0.01ms;
  }
}

/* Client value stories: editorial long-form page and sector entry panel. */
.gradient-grid {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    radial-gradient(circle at 78% 22%, rgba(248, 209, 193, 0.76), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(149, 175, 203, 0.56), transparent 38%),
    linear-gradient(145deg, #005746 0%, #3d855b 50%, #becf99 100%);
  background-size: 56px 56px, 56px 56px, auto, auto, auto;
}

.gradient-grid::after {
  position: absolute;
  inset: 0;
  background: var(--nka-grain);
  content: "";
  mix-blend-mode: soft-light;
  opacity: 0.12;
  pointer-events: none;
}

.retail-industry-page .about-landing-hero {
  margin-bottom: 0;
}

.retail-industry-page .about-landing-intro,
.retail-industry-page .about-landing-pillars {
  display: grid;
}

.retail-story-feature {
  padding: clamp(80px, 10vw, 152px) clamp(24px, 7vw, 112px);
  background: var(--color-surface-warm);
}

.retail-story-feature__intro,
.retail-story-card {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.retail-story-feature__intro {
  display: grid;
  grid-template-columns: minmax(160px, 0.4fr) minmax(0, 1fr);
  gap: clamp(28px, 7vw, 110px);
  align-items: start;
  margin-bottom: clamp(42px, 6vw, 78px);
}

.retail-story-feature .section-eyebrow,
.story-next .section-eyebrow {
  margin: 8px 0 0;
  color: var(--green);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

.retail-story-feature__intro h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 68px);
  font-weight: 500;
  line-height: 1.06;
}

.retail-story-card {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  min-height: clamp(520px, 50vw, 720px);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--content);
  color: inherit;
  box-shadow: 0 28px 70px rgba(21, 25, 26, 0.12);
  text-decoration: none;
}

.retail-story-card__visual {
  display: flex;
  align-items: flex-end;
  padding: clamp(30px, 4vw, 58px);
}

.retail-story-card__visual > span {
  position: relative;
  z-index: 1;
  max-width: 9ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.2vw, 66px);
  line-height: 0.98;
}

.retail-story-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 78px);
}

.retail-story-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(46px, 7vw, 90px);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.retail-story-card__meta i {
  width: 18px;
  height: 1px;
  background: currentColor;
}

.retail-story-card__body > strong {
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 500;
  line-height: 1.06;
}

.retail-story-card__summary {
  margin-top: 24px;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.6;
}

.retail-story-card__link {
  margin-top: 42px;
}

.client-value-story-page .page {
  background: #fbfaf6;
}

.story-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(420px, 1.06fr);
  min-height: calc(100svh - 104px);
  background: #fbfaf6;
}

.story-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 7vw, 110px) clamp(34px, 7vw, 108px);
}

.story-breadcrumb {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(56px, 8vw, 112px);
  color: #65737a;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-breadcrumb a {
  color: var(--evergreen);
  text-decoration: none;
}

.story-hero__copy > .section-eyebrow {
  margin: 0 0 18px;
  color: var(--green);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

.story-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.01;
}

.story-hero__dek {
  max-width: 36ch;
  margin: 28px 0 0;
  color: var(--slate);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.5;
}

.story-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: clamp(54px, 7vw, 88px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.story-facts div {
  min-width: 0;
}

.story-facts dt {
  color: #75837e;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.story-facts dd {
  margin: 7px 0 0;
  color: var(--evergreen);
  font-size: 13px;
  line-height: 1.4;
}

.story-hero__visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 680px;
  padding: clamp(34px, 4vw, 64px);
  color: #fff;
}

.story-hero__visual > span {
  position: relative;
  z-index: 1;
}

.gradient-grid__label {
  align-self: flex-start;
  max-width: 7ch;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(54px, 6.3vw, 100px);
  line-height: 0.9;
}

.gradient-grid__index {
  position: absolute !important;
  top: clamp(34px, 4vw, 64px);
  right: clamp(34px, 4vw, 64px);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.story-section {
  display: grid;
  grid-template-columns: minmax(170px, 0.36fr) minmax(0, 1fr);
  gap: clamp(44px, 8vw, 130px);
  width: min(100% - clamp(40px, 10vw, 160px), 1320px);
  margin-inline: auto;
  padding: clamp(104px, 13vw, 190px) 0;
}

.story-section__label {
  padding-top: 12px;
}

.story-section__label span {
  display: block;
  width: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--green);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
}

.story-section__label p {
  max-width: 14ch;
  margin: 14px 0 0;
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
}

.story-section__body {
  max-width: 820px;
}

.story-section__body h2 {
  max-width: 15ch;
  margin: 0 0 clamp(48px, 6vw, 78px);
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.story-section__body > p {
  margin: 0 0 26px;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.75;
}

.story-section__body > .story-lead {
  color: #263f47;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.55;
}

.story-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
  width: min(100% - clamp(40px, 8vw, 128px), 1440px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px);
  border-radius: var(--radius-card);
  background: var(--evergreen);
  color: #fff;
}

.story-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 1.17;
}

.story-quote figcaption {
  display: flex;
  gap: 18px;
  align-items: center;
}

.story-quote__portrait {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.story-quote figcaption > span:last-child {
  display: grid;
  gap: 6px;
}

.story-quote strong {
  font-size: 14px;
  font-weight: 600;
}

.story-quote small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.45;
}

.story-solution {
  width: 100%;
  max-width: none;
  padding-inline: max(clamp(40px, 10vw, 160px), calc((100vw - 1320px) / 2));
  background: var(--surface);
}

.story-method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 68px 0;
  background: rgba(0, 87, 70, 0.16);
  border: 1px solid rgba(0, 87, 70, 0.16);
}

.story-method article {
  padding: 30px;
  background: #fff;
}

.story-method article > span {
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}

.story-method h3 {
  margin: 48px 0 14px;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.story-method p {
  margin: 0;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
}

.story-image-break {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(520px, 65vw, 860px);
  margin: 0 clamp(20px, 4vw, 64px);
  padding: clamp(36px, 7vw, 100px);
  border-radius: var(--radius-card);
  color: #fff;
}

.story-image-break > * {
  position: relative;
  z-index: 1;
}

.story-image-break > span {
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: clamp(58px, 9vw, 132px);
  line-height: 0.9;
}

.story-image-break small {
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.story-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(52px, 7vw, 88px) 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.story-outcomes li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 28px 24px 28px 0;
  border-bottom: 1px solid var(--border);
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.35;
}

.story-outcomes li:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.story-outcomes li:nth-child(even) {
  padding-left: 24px;
}

.story-outcomes span {
  color: var(--green);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.story-quote--rabbiya {
  background: var(--slate);
}

.story-next {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: end;
  width: min(100% - clamp(40px, 10vw, 160px), 1320px);
  margin-inline: auto;
  padding: clamp(110px, 14vw, 190px) 0;
}

.story-next h2 {
  max-width: 13ch;
  margin: 18px 0 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.04;
}

.story-next > a {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--evergreen);
  border-radius: 999px;
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 980px) {
  .retail-story-card,
  .story-hero {
    grid-template-columns: 1fr;
  }

  .retail-story-card__visual,
  .story-hero__visual {
    min-height: 560px;
  }

  .story-hero__visual {
    order: -1;
  }

  .story-quote {
    grid-template-columns: 1fr;
  }

  .story-method {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .retail-story-feature__intro,
  .story-section {
    grid-template-columns: 1fr;
  }

  .retail-story-card__visual,
  .story-hero__visual {
    min-height: 440px;
  }

  .retail-story-card__meta {
    margin-bottom: 40px;
  }

  .story-hero__copy {
    padding-inline: 24px;
  }

  .story-breadcrumb {
    margin-bottom: 58px;
  }

  .story-facts {
    grid-template-columns: 1fr;
  }

  .story-section {
    gap: 46px;
    width: min(100% - 48px, 1320px);
  }

  .story-solution {
    width: 100%;
    padding-inline: 24px;
  }

  .story-quote {
    width: calc(100% - 32px);
    padding: 42px 28px;
  }

  .story-image-break {
    min-height: 520px;
    margin-inline: 16px;
  }

  .story-outcomes {
    grid-template-columns: 1fr;
  }

  .story-outcomes li:nth-child(odd) {
    border-right: 0;
  }

  .story-outcomes li:nth-child(even) {
    padding-left: 0;
  }

  .story-next {
    align-items: flex-start;
    flex-direction: column;
    width: calc(100% - 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .retail-story-card__link b {
    transition: none;
  }
}

/* Adidas story narrative: contextual introduction, sequenced cards, and proof. */
.adidas-story-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(48px, 8vw, 124px);
  width: min(100% - clamp(40px, 8vw, 128px), 1220px);
  margin-inline: auto;
  padding: 0 0 clamp(76px, 9vw, 126px);
}

.adidas-story-intro .section-eyebrow,
.adidas-story-results .section-eyebrow {
  margin: 0 0 18px;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.adidas-story-intro h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

.adidas-story-intro__copy {
  display: grid;
  align-content: center;
  gap: 24px;
}

.adidas-story-intro__copy p {
  margin: 0;
  color: var(--slate);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.65;
}

.adidas-story-intro__copy p:first-child {
  color: #27434a;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.55;
}

.adidas-bento-caption {
  min-height: 190px;
  padding: 24px clamp(22px, 2.3vw, 34px) 30px;
  text-align: left;
}

.adidas-bento-caption > span {
  margin-bottom: 10px;
}

.adidas-bento-caption h3 {
  max-width: none;
  margin: 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.35;
  text-align: left;
}

.adidas-bento-caption p {
  max-width: 58ch;
  margin: 13px 0 0;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.58;
  text-wrap: pretty;
}

.adidas-bento-card--lead .adidas-bento-caption,
.adidas-bento-card--strategy .adidas-bento-caption {
  min-height: 178px;
}

.adidas-story-results {
  padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 96px);
  background:
    radial-gradient(circle at 82% 14%, rgba(190, 207, 153, 0.42), transparent 30%),
    linear-gradient(180deg, #f3f6ee 0%, #e9f0e3 100%);
}

.adidas-story-results__heading,
.adidas-story-results__outcomes,
.adidas-story-results__article,
.adidas-story-testimonials {
  width: min(100%, 1220px);
  margin-inline: auto;
}

.adidas-story-results__heading {
  text-align: center;
}

.adidas-story-results__heading h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.adidas-story-results__heading > p:last-child {
  max-width: 54ch;
  margin: 26px auto 0;
  color: var(--slate);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.62;
  text-wrap: balance;
}

.adidas-story-results__outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(48px, 6vw, 76px);
}

.adidas-story-results__outcomes article {
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(0, 87, 70, 0.1);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 32px rgba(21, 25, 26, 0.05);
}

.adidas-story-results__outcomes span {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.adidas-story-results__outcomes h3 {
  margin: 58px 0 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(21px, 1.8vw, 27px);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.adidas-story-results__article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(38px, 7vw, 96px);
  margin-top: clamp(58px, 7vw, 88px);
  padding-top: clamp(42px, 5vw, 66px);
  border-top: 1px solid rgba(0, 87, 70, 0.16);
}

.adidas-story-results__article p {
  margin: 0;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.72;
}

.adidas-story-testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(64px, 8vw, 104px);
}

.adidas-story-testimonials figure {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: clamp(30px, 3.5vw, 48px);
  border-radius: var(--radius-card);
  background: var(--evergreen);
  color: #fff;
}

.adidas-story-testimonials figure:nth-child(2) {
  background: var(--slate);
}

.adidas-story-testimonials blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.3;
}

.adidas-story-testimonials figcaption {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 38px;
}

.adidas-story-testimonials figcaption img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  object-fit: cover;
}

.adidas-story-testimonials figcaption span {
  display: grid;
  gap: 4px;
}

.adidas-story-testimonials strong {
  font-size: 13px;
  font-weight: 600;
}

.adidas-story-testimonials small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .adidas-story-intro,
  .adidas-story-results__article {
    grid-template-columns: 1fr;
  }

  .adidas-story-intro h2 {
    max-width: 18ch;
  }

  .adidas-story-results__outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 660px) {
  .adidas-story-intro {
    gap: 34px;
    width: calc(100% - 48px);
    padding-bottom: 68px;
  }

  .adidas-bento-caption {
    min-height: 0;
  }

  .adidas-story-results {
    padding-inline: 20px;
  }

  .adidas-story-results__outcomes,
  .adidas-story-testimonials {
    grid-template-columns: 1fr;
  }

  .adidas-story-results__outcomes article {
    min-height: 160px;
  }

  .adidas-story-results__outcomes h3 {
    margin-top: 40px;
  }

  .adidas-story-testimonials figure {
    min-height: 300px;
  }
}

@keyframes nka-modal-panel-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nka-modal-panel-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@keyframes nka-modal-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nka-modal-backdrop-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@supports (background: linear-gradient(90deg in oklab, #000, #fff)) {
  :root {
    --nka-gradient-jade-horizon: linear-gradient(135deg in oklab, #005746 0%, #6E9C56 48%, #F8D1C1 100%);
    --nka-gradient-moss-field: linear-gradient(135deg in oklab, #F3B6A5 0%, #F7F1E2 48%, #BECF99 100%);
    --nka-gradient-cream-canopy: linear-gradient(135deg in oklab, #F8D1C1 0%, #F7F1E2 48%, #95AFCB 100%);
    --nka-gradient-slate-grove: linear-gradient(135deg in oklab, #33495E 0%, #005746 42%, #AFC9B4 74%, #F7F1E2 100%);
    --nka-gradient-muted-shell: linear-gradient(135deg in oklab, #F7F4EE 0%, #F3B6A5 34%, #95AFCB 68%, #005746 100%);
    --nka-gradient-gold-garden: linear-gradient(135deg in oklab, #B8965A 0%, #F8D1C1 38%, #BECF99 70%, #6E9C56 100%);
    --nka-stage-field: linear-gradient(
      135deg in oklab,
      #005746 0%,
      #0b6049 18%,
      #216f50 38%,
      #3d8157 58%,
      #5b9159 78%,
      #6e9c56 100%
    );
  }
}

.nka-gradient-banner {
  --banner-gradient: var(--nka-gradient-jade-horizon);
  position: relative;
  overflow: hidden;
  background: var(--banner-gradient);
}

.nka-gradient-banner::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
  background-image: var(--nka-grain);
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.13;
}

.nka-gradient-banner--jade {
  --banner-gradient: var(--nka-gradient-jade-horizon);
}

.nka-gradient-banner--moss {
  --banner-gradient: var(--nka-gradient-moss-field);
}

.nka-gradient-banner--cream {
  --banner-gradient: var(--nka-gradient-cream-canopy);
}

.nka-gradient-banner--slate {
  --banner-gradient: var(--nka-gradient-slate-grove);
}

.nka-gradient-banner--muted {
  --banner-gradient: var(--nka-gradient-muted-shell);
}

.nka-gradient-banner--gold {
  --banner-gradient: var(--nka-gradient-gold-garden);
}

/* Reusable treatment for photographic stock imagery. Apply this class to the
   image wrapper -- not to logos, icons, illustrations, or SVG artwork. */
.stock-image-treatment {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.stock-image-treatment::before,
.stock-image-treatment::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
}

.stock-image-treatment::before {
  z-index: 2;
  background: rgba(116, 77, 43, .13);
  mix-blend-mode: multiply;
}

.stock-image-treatment::after {
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.68'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: .3;
}

.stock-image-treatment > img {
  transform: scale(1);
  transform-origin: center;
  transition: transform 1.8s var(--motion-ease);
}

.stock-image-treatment:hover > img {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .stock-image-treatment > img {
    transition: none;
  }

  .stock-image-treatment:hover > img {
    transform: none;
  }

  .family-card__preview::before {
    transition: none;
  }

  .family-card:hover .family-card__preview::before {
    transform: none;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

/* Shared primitives. Prefer these classes for new controls; page-specific
   selectors may compose them, but must not redefine their basic geometry. */
.button {
  min-height: var(--control-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--arrow-inline-gap);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 var(--type-small)/1 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.button--primary {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}

.button--secondary {
  border-color: var(--color-brand);
  background: transparent;
  color: var(--color-brand);
}

.button--quiet {
  background: transparent;
  color: var(--color-text);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.button--primary:hover {
  border-color: var(--color-brand-accent);
  background: var(--color-brand-accent);
  color: var(--color-text-inverse);
}

.button--secondary:hover {
  border-color: var(--color-brand-accent);
  background: var(--color-brand-accent);
  color: var(--color-text-inverse);
}

.button:active {
  transform: translateY(0);
}

.button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 60%, transparent);
  outline-offset: 3px;
}

.button .icon {
  transition: transform var(--arrow-motion-duration) var(--arrow-motion-ease);
}

.button :is([data-lucide="arrow-left"], [data-lucide="arrow-right"]) {
  width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  stroke-width: var(--arrow-stroke-width);
}

.button:is(:hover, :focus-visible) [data-lucide="arrow-right"] {
  transform: translateX(var(--arrow-hover-distance));
}

.button:is(:hover, :focus-visible) [data-lucide="arrow-left"] {
  transform: translateX(calc(-1 * var(--arrow-hover-distance)));
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
  stroke-width: 1.75;
}

/* Canonical directional icon. This class is required on action and
   previous/next arrows so they share the mega-menu geometry. */
.nka-arrow-icon {
  width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  flex: 0 0 auto;
  stroke-width: var(--arrow-stroke-width);
}

html {
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  overflow-x: clip;
  scrollbar-color: rgba(0, 87, 70, 0.58) rgba(247, 244, 238, 0.42);
  scrollbar-width: thin;
  background: var(--nka-stage-field);
}

/* Cross-document page transitions
   Keep navigation calm and consistent across this multi-page site. Browsers
   without View Transitions support continue to use normal page navigation. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: nka-page-out 180ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

::view-transition-new(root) {
  animation: nka-page-in 240ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes nka-page-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes nka-page-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fallback state is applied only by page-transitions.js when the browser
   cannot run the native cross-document transition above. */
.nka-transition-fallback body {
  opacity: 0;
}

.nka-transition-fallback.nka-transition-ready body {
  opacity: 1;
  transition: opacity 240ms cubic-bezier(0.33, 1, 0.68, 1);
}

.nka-transition-fallback.nka-page-leaving body {
  opacity: 0;
  transition: opacity 140ms cubic-bezier(0.33, 1, 0.68, 1);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--nka-stage-field) fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
}

/* Accessibility: honor the operating-system preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }

  .nka-transition-fallback body,
  .nka-transition-fallback.nka-transition-ready body,
  .nka-transition-fallback.nka-page-leaving body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

* {
  scrollbar-color: rgba(0, 87, 70, 0.54) rgba(247, 244, 238, 0.32);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(247, 244, 238, 0.42);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.68);
}

html::-webkit-scrollbar-track {
  margin-block: 12px;
}

*::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 2px solid rgba(247, 244, 238, 0.76);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(110, 156, 86, 0.82), rgba(0, 87, 70, 0.82));
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(110, 156, 86, 0.96), rgba(0, 87, 70, 0.96));
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Persistent scroll control: script.js toggles visibility; focus and reduced-motion rules keep the same action available without hover. */
.back-to-top {
  position: fixed;
  z-index: 80;
  left: max(24px, calc((100vw - 1520px) / 2 - 70px));
  bottom: clamp(16px, 2vw, 28px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  padding: 0;
  background: var(--evergreen);
  box-shadow: 0 14px 34px rgba(21, 25, 26, 0.16);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 280ms ease,
    visibility 0s linear 280ms,
    transform var(--motion-floating-control-lift-duration) var(--motion-ease),
    background var(--motion-floating-control-color-duration) var(--motion-ease);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--floating-control-hover-background);
  transform: translateY(var(--motion-floating-control-lift-distance));
}

.back-to-top:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Right-side section switchers share positioning and disclosure states; their catalogue and event ownership live in the relevant page controller. */
.quick-menu {
  --quick-menu-thumb-radius: 7px;
  --quick-menu-thumb-background: transparent;
  --quick-menu-thumb-shadow: 0 5px 12px rgba(21, 25, 26, 0.06);
  position: fixed;
  z-index: 80;
  top: 50%;
  right: max(24px, calc((100vw - 1520px) / 2 - 70px));
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

.quick-menu__trigger {
  position: relative;
  z-index: 2;
  width: 46px;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 16px 8px;
  background: var(--evergreen);
  box-shadow: 0 14px 34px rgba(21, 25, 26, 0.16);
  color: var(--content);
  cursor: pointer;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms var(--motion-ease);
}

.quick-menu__trigger:hover {
  background: #064b3e;
  box-shadow: 0 18px 42px rgba(21, 25, 26, 0.22);
}

.quick-menu__trigger:focus-visible,
.quick-menu__link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.quick-menu__trigger-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

.quick-menu__trigger-icon svg {
  width: 15px;
  height: 15px;
}

.quick-menu__trigger-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  writing-mode: sideways-lr;
  transform: none;
}

.quick-menu__panel {
  position: absolute;
  top: 50%;
  right: 27px;
  width: min(520px, calc(100vw - 82px));
  max-height: calc(100vh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(0, 87, 70, 0.12);
  border-radius: 24px 8px 8px 24px;
  padding: 18px 37px 18px 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 24px 62px rgba(21, 25, 26, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translate(18px, -50%) scale(0.98);
  transform-origin: right center;
  transition:
    opacity 220ms ease,
    transform 360ms var(--motion-ease),
    visibility 0s linear 360ms;
  backdrop-filter: blur(14px);
}

.quick-menu:hover .quick-menu__panel,
.quick-menu:focus-within .quick-menu__panel,
.quick-menu.is-open .quick-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
  transition-delay: 0s;
}

.quick-menu__eyebrow {
  display: block;
  margin: 0 10px 10px;
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.quick-menu__link {
  min-height: 62px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 17px;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 9px 10px 9px 8px;
  color: var(--slate);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  transition: color 180ms ease, background 180ms ease, padding-left 220ms var(--motion-ease);
}

.quick-menu__thumb {
  position: relative;
  width: 58px;
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: var(--quick-menu-thumb-radius);
  background: var(--quick-menu-thumb-background);
  box-shadow: var(--quick-menu-thumb-shadow);
}

.quick-menu__thumb:empty {
  padding: 0;
  border-color: rgba(0, 87, 70, 0.14);
  background: linear-gradient(135deg, #005746 0%, #2e7d52 58%, #becf99 100%);
}

.quick-menu__thumb:empty::before,
.quick-menu__thumb:empty::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
}

.quick-menu__thumb:empty::before {
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, 0.24) 0 12%, transparent 34%),
    radial-gradient(circle at 74% 76%, rgba(0, 87, 70, 0.28) 0 14%, transparent 38%);
}

.quick-menu__thumb:empty::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 1px, transparent 1.25px);
  background-size: 12px 12px;
  opacity: 0.52;
}

.quick-menu__thumb img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  display: block;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.quick-menu__thumb--sdpf {
  padding: 0;
}

.quick-menu__thumb--sdpf img {
  object-position: center;
}

.quick-menu__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-menu__text strong {
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
}

.quick-menu__text small {
  color: var(--slate);
  font-size: 12px;
  font-weight: var(--type-mega-card-copy-weight);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.quick-menu__link svg {
  width: 15px;
  height: 15px;
  opacity: 0.5;
}

.quick-menu__link:hover {
  padding-left: 12px;
  background: rgba(190, 207, 153, 0.34);
  color: #005746;
}

.quick-menu--functional-personas .quick-menu__link.is-current {
  background: rgba(190, 207, 153, 0.24);
  box-shadow: inset -3px 0 0 var(--green);
  color: var(--evergreen);
}

a {
  color: inherit;
  text-decoration: none;
}

.nka-testimonial-panel {
  border: 1px solid var(--testimonial-surface-border);
  border-radius: var(--testimonial-surface-radius);
  background: var(--testimonial-surface-background);
}

.nka-testimonial-panel blockquote {
  max-width: 920px;
  margin-inline: auto;
  color: var(--testimonial-quote-color);
  font-family: var(--testimonial-quote-font);
  font-size: var(--testimonial-quote-size);
  font-weight: var(--testimonial-quote-weight);
  line-height: var(--testimonial-quote-line-height);
  text-align: center;
}

.nka-testimonial-logo {
  box-sizing: border-box;
  overflow: hidden;
  width: auto;
  min-width: var(--testimonial-logo-min-width);
  max-width: min(var(--testimonial-logo-max-width), 72%);
  height: var(--testimonial-logo-height);
  padding:
    var(--testimonial-logo-padding-block)
    var(--testimonial-logo-padding-inline);
  border: 1px solid rgba(0, 87, 70, 0.08);
  border-radius: var(--testimonial-logo-radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(0, 55, 44, 0.11);
  object-fit: contain;
  object-position: center;
}

.nka-testimonial-logo--wide {
  width: 164px;
}

/* The iQmetrix lockup carries more visual weight beneath its geometric
   centre. Offset the artwork inside the standard box without moving the box. */
.nka-testimonial-logo[src$="iqmetrix.png"] {
  padding-top: 8px;
  padding-bottom: 10px;
}

/* One clean radial ring identifies the featured testimonial portrait. */
.client-portrait.is-active::before,
.adidas-case-quote__portrait::before {
  position: absolute;
  z-index: 0;
  border: 2px solid var(--testimonial-avatar-pulse-color);
  border-radius: 50%;
  content: "";
  inset: -5px;
  pointer-events: none;
  animation: testimonial-avatar-pulse var(--testimonial-avatar-pulse-duration) var(--motion-ease) infinite;
}

.client-portrait > img,
.client-portrait > span,
.adidas-case-quote__portrait > img,
.adidas-case-quote__portrait > span {
  position: relative;
  z-index: 1;
}

.client-portrait > span,
.adidas-case-quote__portrait > span {
  z-index: 2;
}

@keyframes testimonial-avatar-pulse {
  0% {
    opacity: 0.82;
    transform: scale(0.9);
  }

  42% {
    opacity: 0.46;
    transform: scale(1.18);
  }

  82%,
  100% {
    opacity: 0;
    transform: scale(1.58);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-portrait.is-active::before,
  .adidas-case-quote__portrait::before {
    display: none;
    animation: none;
  }
}

/* Canonical elevated surface shared by homepage rails and mega-menu cards. */
.nka-elevated-card,
.industry-card,
.signal-mega__quick-link {
  border-color: var(--card-surface-border);
  border-radius: var(--card-surface-radius);
  background: var(--card-surface-background);
  box-shadow: var(--card-surface-shadow);
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition:
    transform var(--card-lift-duration) var(--card-lift-ease),
    box-shadow var(--card-lift-duration) var(--card-lift-ease),
    border-color var(--card-lift-duration) var(--card-lift-ease);
}

@media (hover: hover) and (pointer: fine) {
  .nka-elevated-card:hover,
  .industry-card:hover,
  .signal-mega__quick-link:hover {
    border-color: var(--card-surface-border-hover);
    box-shadow: var(--card-surface-shadow-hover);
    transform: translate3d(0, var(--card-lift-distance), 0) scale(var(--card-lift-scale));
  }
}

.nka-elevated-card:focus-within,
.industry-card:focus-within,
.signal-mega__quick-link:focus-within {
  border-color: var(--card-surface-border-hover);
  box-shadow: var(--card-surface-shadow-hover);
  transform: translate3d(0, var(--card-lift-distance), 0) scale(var(--card-lift-scale));
}

@media (prefers-reduced-motion: reduce) {
  .nka-elevated-card,
  .nka-elevated-card:hover,
  .nka-elevated-card:focus-within,
  .industry-card,
  .industry-card:hover,
  .industry-card:focus-within,
  .signal-mega__quick-link,
  .signal-mega__quick-link:hover,
  .signal-mega__quick-link:focus-within {
    transform: none;
    transition: none;
  }

  .industry-card__media img {
    transform: none;
    transition: none;
  }
}

/* Outer gradient stage and inner page canvas. Page rails below align content inside this containing block, not against the browser width. */
.stage {
  --stage-pad: clamp(12px, 5vw, 72px);
  --header-height: 96px;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  overflow: clip;
  padding: 0 var(--stage-pad);
  background-color: #005746;
  background: var(--nka-stage-field);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.page {
  width: min(1520px, 100%);
  min-width: 0;
  max-width: 100%;
  min-height: calc(100vh - var(--stage-pad));
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.84);
  /* The footer owns the page's lower edge; a bottom border would render as a white strip beneath it. */
  border-bottom: 0;
  border-radius: 0;
  background: var(--white);
  box-shadow: 0 32px 90px rgba(21, 25, 26, 0.24);
  scroll-margin-top: 0;
}

/* Shared header shell and navigation placement. Generated HTML supplies the structure; script.js owns open/current states. */
.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  height: var(--header-height);
  min-height: 96px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--content);
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  transition: box-shadow 420ms var(--motion-ease-soft);
}

.site-header.is-scrolled {
  box-shadow:
    0 3px 10px rgba(21, 25, 26, 0.08),
    0 14px 32px rgba(21, 25, 26, 0.12);
}

.header-rail {
  width: calc(100% - 48px);
  height: 100%;
  min-height: 96px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand-link {
  width: 158px;
  flex: 0 0 auto;
  display: block;
}

.brand-link img {
  width: 100%;
  height: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.6vw, 24px);
  margin-left: auto;
}

.nav-link,
.contact-link {
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 14px;
  color: var(--green);
  font-weight: 400;
}

.nav-link:hover,
.nav-link.is-current {
  color: #6e9c56;
}

.nav-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 360ms var(--motion-ease);
}

.mega-trigger {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.mega-trigger[aria-expanded="true"] {
  color: var(--evergreen);
}

.mega-trigger[aria-expanded="true"] .nav-chevron {
  transform: translateY(2px) rotate(225deg);
}

/* Compact header dropdowns
   These menus support navigation families that need to grow without turning
   every top-level item into a full-width mega menu. Desktop menus float below
   their trigger; the mobile treatment is restyled inside the navigation drawer. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.nav-dropdown__trigger[aria-expanded="true"] {
  color: var(--evergreen);
}

.nav-dropdown__trigger[aria-expanded="true"] .nav-chevron {
  transform: translateY(2px) rotate(225deg);
}

.nav-dropdown__menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 13px);
  left: 50%;
  width: 286px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(0, 87, 70, 0.13);
  border-radius: 16px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 54px rgba(21, 25, 26, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -9px, 0) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 220ms ease,
    transform 360ms var(--motion-ease),
    visibility 0s linear 360ms;
}

.nav-dropdown--signal .nav-dropdown__menu {
  width: 310px;
}

.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 0s;
}

/* Keep the visual spacing below the navigation while making the entire route
   from a desktop trigger into its panel a continuous hover target. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .mega-trigger,
  .nav-dropdown {
    position: relative;
  }

  .mega-trigger[aria-expanded="true"]::after,
  .nav-dropdown.is-open::after {
    position: absolute;
    content: "";
    top: 100%;
    left: -14px;
    right: -14px;
  }

  .mega-trigger[aria-expanded="true"]::after {
    z-index: 1;
    height: 60px;
  }

  .nav-dropdown.is-open::after {
    z-index: 5;
    height: 20px;
  }
}

.nav-dropdown__eyebrow {
  padding: 7px 11px 9px;
  color: #6e9c56;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-dropdown__menu a,
.nav-dropdown__item {
  min-height: 42px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 10px 11px;
  color: var(--evergreen);
  font-size: 13px;
  line-height: 1.3;
  transition:
    color 220ms ease,
    background 220ms ease,
    transform 280ms var(--motion-ease);
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible {
  background: rgba(190, 207, 153, 0.25);
  color: #2e7d52;
  transform: translateX(3px);
}

.nav-dropdown__item {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  cursor: default;
}

.nav-dropdown__item strong {
  font-size: 13px;
  font-weight: 600;
}

.nav-dropdown__item small {
  color: #79847f;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Desktop industry mega panel: overlay positioning and card layout are separate from the header trigger and shared scrim. */
.industry-mega {
  position: absolute;
  z-index: 2;
  top: calc(100% + 12px);
  left: 50%;
  /* Match the desktop header rail, rather than introducing a second narrower grid. */
  width: calc(100% - 48px);
  max-height: calc(100vh - var(--header-height) - 36px);
  overflow-y: auto;
  border: 1px solid rgba(235, 229, 218, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 30px 80px rgba(21, 25, 26, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -14px, 0) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 340ms ease,
    transform 640ms var(--motion-ease),
    visibility 0s linear 640ms;
}

.industry-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 0s;
}

.industry-mega__inner {
  padding: clamp(26px, 3vw, 40px);
}

.industry-mega__heading {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
}

.industry-mega__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-line-height);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.industry-mega__heading h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.18;
}

.industry-mega__close {
  position: relative;
  width: var(--close-control-size);
  height: var(--close-control-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
  border-radius: var(--radius-round);
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  color: var(--color-brand);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.industry-mega__close:hover {
  background: var(--color-brand-accent);
  color: var(--color-text-inverse);
}

.industry-mega__close:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.industry-mega__close span::before,
.industry-mega__close span::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: var(--close-control-mark);
  height: var(--close-control-stroke);
  border-radius: 999px;
  background: currentColor;
}

.industry-mega__close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.industry-mega__close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* One shared close-control position keeps every desktop mega menu visually aligned. */
.industry-mega__inner,
.what-mega__inner,
.about-mega__inner {
  position: relative;
}

.industry-mega__close,
.what-mega__close,
.about-mega__close,
.hold-mega__close,
.signal-mega__close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
}

.industry-mega__heading,
.family-mega__heading {
  padding-right: calc(var(--close-control-size) + clamp(44px, 4vw, 64px));
}

.what-mega {
  position: absolute;
  z-index: 2;
  top: calc(100% + 12px);
  left: 50%;
  width: calc(100% - 48px);
  max-height: calc(100vh - var(--header-height) - 36px);
  overflow-y: auto;
  border: 1px solid rgba(235, 229, 218, 0.9);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(21, 25, 26, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -14px, 0) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 340ms ease,
    transform 640ms var(--motion-ease),
    visibility 0s linear 640ms;
}

.what-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 0s;
}

/* About mega panel and its editorial cards; the final menu-ID contract later in this file governs shared interaction states. */
.about-mega {
  position: absolute;
  z-index: 2;
  top: calc(100% + 12px);
  left: 50%;
  width: calc(100% - 48px);
  max-height: calc(100vh - var(--header-height) - 36px);
  overflow-y: auto;
  border: 1px solid rgba(235, 229, 218, 0.9);
  border-radius: 28px;
  background: #f9faf9;
  box-shadow: 0 30px 80px rgba(21, 25, 26, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -14px, 0) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 340ms ease,
    transform 640ms var(--motion-ease),
    visibility 0s linear 640ms;
}

.about-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 0s;
}

/* A closing mega menu remains visible during its exit transition. Disable its
   entire subtree immediately so it cannot intercept hover over the menu that
   has just opened beside it. */
:where(.industry-mega, .what-mega, .about-mega, .family-mega):not(.is-open),
:where(.industry-mega, .what-mega, .about-mega, .family-mega):not(.is-open) * {
  pointer-events: none !important;
}

.industry-mega,
.what-mega,
.about-mega,
.quick-menu__panel,
.consent-dialog__inner {
  scrollbar-color: rgba(0, 87, 70, 0.5) rgba(235, 229, 218, 0.32);
  scrollbar-width: thin;
}

.industry-mega::-webkit-scrollbar,
.what-mega::-webkit-scrollbar,
.about-mega::-webkit-scrollbar,
.quick-menu__panel::-webkit-scrollbar,
.consent-dialog__inner::-webkit-scrollbar {
  width: 8px;
}

.industry-mega::-webkit-scrollbar-track,
.what-mega::-webkit-scrollbar-track,
.about-mega::-webkit-scrollbar-track,
.quick-menu__panel::-webkit-scrollbar-track,
.consent-dialog__inner::-webkit-scrollbar-track {
  margin-block: 18px;
  border-radius: 999px;
  background: rgba(235, 229, 218, 0.34);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.8);
}

.industry-mega::-webkit-scrollbar-thumb,
.what-mega::-webkit-scrollbar-thumb,
.about-mega::-webkit-scrollbar-thumb,
.quick-menu__panel::-webkit-scrollbar-thumb,
.consent-dialog__inner::-webkit-scrollbar-thumb {
  min-height: 64px;
  border: 2px solid rgba(249, 250, 249, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(110, 156, 86, 0.68), rgba(0, 87, 70, 0.68));
}

.industry-mega::-webkit-scrollbar-thumb:hover,
.what-mega::-webkit-scrollbar-thumb:hover,
.about-mega::-webkit-scrollbar-thumb:hover,
.quick-menu__panel::-webkit-scrollbar-thumb:hover,
.consent-dialog__inner::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(110, 156, 86, 0.88), rgba(0, 87, 70, 0.88));
}

/* Keep rounded mega-menu edges clean. These panels remain wheel- and touch-scrollable. */
.industry-mega,
.what-mega,
.about-mega,
.family-mega {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.industry-mega::-webkit-scrollbar,
.what-mega::-webkit-scrollbar,
.about-mega::-webkit-scrollbar,
.family-mega::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.about-mega__inner {
  position: relative;
  padding: clamp(30px, 3vw, 42px);
}

.about-mega__heading {
  min-height: 58px;
  margin-bottom: 24px;
  padding-right: calc(var(--close-control-size) + clamp(44px, 4vw, 64px));
}

.about-mega__heading h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.18;
}

.about-mega__close {
  top: 12px;
  right: 12px;
}

.family-mega__inner {
  padding: clamp(22px, 2.4vw, 32px);
}

.family-mega__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(14px, 1.3vw, 20px);
}

.family-mega__heading h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.1;
}

.family-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 16px);
}

.family-mega__grid--hold,
.family-mega__grid--signal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

.family-mega__grid--signal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.family-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.9vw, 24px);
  border: 1px solid #d8d8d3;
  border-radius: 14px;
  background: #fff;
  color: var(--evergreen);
  opacity: 0;
  transform: translateY(14px);
  transition: border-color 260ms ease, box-shadow 420ms var(--motion-ease), opacity 460ms ease, transform 700ms var(--motion-ease);
}

.family-mega.is-open .family-card {
  opacity: 1;
  transform: translateY(0);
}

.family-card:nth-child(2) { transition-delay: 45ms; }
.family-card:nth-child(3) { transition-delay: 90ms; }
.family-card:nth-child(4) { transition-delay: 135ms; }
.family-card:nth-child(5) { transition-delay: 180ms; }
.family-card:nth-child(6) { transition-delay: 225ms; }

.family-card:not(.family-card--ai-condition):hover {
  border-color: rgba(110, 156, 86, 0.62);
  box-shadow: 0 18px 38px rgba(21, 25, 26, 0.11);
}

@media (hover: hover) and (pointer: fine) {
  .family-card:not(.family-card--ai-condition):hover .family-card__preview::before {
    transform: scale(1.08) translate3d(2%, -1%, 0);
  }

  .family-card:not(.family-card--ai-condition):hover .family-card__preview img {
    transform: scale(1.045);
  }
}

.family-card__preview {
  --preview-start: #005746;
  --preview-mid: #2e7d52;
  --preview-end: #6e9c56;
  position: relative;
  width: min(168px, 54%);
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--preview-start) 0%, var(--preview-mid) 54%, var(--preview-end) 100%);
  box-shadow: 0 10px 22px rgba(21, 25, 26, 0.08);
}

.family-card__preview::before {
  position: absolute;
  content: "";
  inset: -18%;
  display: block;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 46%);
  opacity: 0.72;
  transform: scale(1) translate3d(0, 0, 0);
  transition: transform 1.8s var(--motion-ease-soft);
}

.family-card__preview::after {
  display: none;
}

.family-card__preview img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 1.8s var(--motion-ease-soft);
}

.family-card__preview:has(img)::before {
  display: none;
}

.family-card__preview--cosd,
.family-card__preview--iep,
.family-card__preview--sdpf,
.family-card__preview--hsod {
  display: grid;
  place-items: center;
  padding: 8px;
}

.family-card__preview--cosd,
.family-card__preview--iep,
.family-card__preview--sdpf,
.family-card__preview:has(img[src*="iep-mega-tablet-v1.png"]) {
  padding: 0;
  background: #f2f2f0;
}

.family-card__preview--cosd img,
.family-card__preview--iep img,
.family-card__preview--sdpf img,
.family-card__preview--hsod img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 5px 14px rgba(0, 37, 30, 0.18);
}

.family-card__preview--cosd img {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  object-fit: cover;
}

.family-card__preview--iep img,
.family-card__preview--sdpf img,
.family-card__preview:has(img[src*="iep-mega-tablet-v1.png"]) img {
  box-sizing: border-box;
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* The current HSOD menu artwork is already a finished photographic crop.
   Let it fill the preview instead of applying the legacy diagram inset. */
.family-card__preview--hsod {
  padding: 0;
  background: transparent;
}

.family-card__preview--hsod img {
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}

.family-card__preview--signal {
  width: min(220px, 68%);
  padding: 0;
  --preview-start: #005746;
  --preview-mid: #2e7d52;
  --preview-end: #6e9c56;
}

.family-card strong {
  color: #2e7d52;
  margin-top: auto;
  padding-top: clamp(28px, 3.4vw, 44px);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.22vw, 22px);
  font-weight: 450;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.family-card small {
  margin-top: 12px;
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--type-mega-card-copy-weight);
  line-height: 1.46;
  letter-spacing: 0;
}

.family-card--pending {
  background: #ffffff;
}

.family-card__link {
  margin-top: 16px;
  padding-top: 0;
}

@media (min-width: 821px) {
  .family-mega__grid--hold .family-card,
  .family-mega__grid--signal .family-card {
    min-height: 128px;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
    grid-template-rows: minmax(72px, auto) minmax(0, auto);
    align-content: start;
    column-gap: clamp(16px, 1.3vw, 20px);
    row-gap: 7px;
    padding: clamp(14px, 1.2vw, 16px);
  }

  .family-mega__grid--hold .family-card,
  .family-mega__grid--signal .family-card {
    position: relative;
    grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
    column-gap: clamp(18px, 1.7vw, 24px);
    overflow: hidden;
    padding: 0 clamp(18px, 1.6vw, 22px) 0 0;
  }

  .family-mega__grid--hold .family-card::before,
  .family-mega__grid--signal .family-card::before {
    display: none;
  }

  .family-mega__grid--hold .family-card__preview,
  .family-mega__grid--signal .family-card__preview {
    width: 100%;
    height: 100%;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .family-mega__grid--hold .family-card__preview,
  .family-mega__grid--signal .family-card__preview {
    position: relative;
    grid-column: 1;
    justify-self: stretch;
    border-radius: 13px 0 0 13px;
    box-shadow:
      inset -1px 0 0 rgba(0, 87, 70, 0.08),
      0 8px 22px rgba(21, 25, 26, 0.06);
  }

  .family-mega__grid--hold .family-card:has(.family-card__preview--cosd) {
    grid-template-columns: minmax(190px, 52%) minmax(0, 1fr);
  }

  .family-mega__grid--hold .family-card__preview--cosd {
    min-height: 146px;
  }

  .family-mega__grid--hold .family-card--photo-preview::before {
    display: none;
  }

  .family-mega__grid--hold .family-card--photo-preview .family-card__preview {
    justify-self: center;
    width: min(82%, 200px);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 9px;
    background: #ffffff;
    box-shadow:
      0 4px 10px rgba(0, 37, 30, 0.08),
      0 0 0 1px rgba(0, 87, 70, 0.08);
  }

  .family-mega__grid--hold .family-card strong,
  .family-mega__grid--signal .family-card strong {
    margin-top: 0;
    padding-top: clamp(18px, 1.4vw, 22px);
    grid-column: 2;
    align-self: start;
  }

  .family-mega__grid--hold .family-card small,
  .family-mega__grid--signal .family-card small {
    margin-top: 0;
    padding-bottom: clamp(16px, 1.3vw, 20px);
    grid-column: 2;
    align-self: start;
  }

  .family-mega__grid--hold {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .family-mega__grid--signal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .family-mega__grid--hold .family-card,
  .family-mega__grid--signal .family-card {
    min-height: 324px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-color: var(--border);
    border-radius: 8px;
    background: var(--content);
  }

  .family-mega__grid--hold .family-card__preview,
  .family-mega__grid--signal .family-card__preview {
    width: 100%;
    height: 118px;
    flex: 0 0 auto;
    display: block;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }

  .family-mega__grid--hold .family-card__preview--cosd,
  .family-mega__grid--hold .family-card__preview--iep,
  .family-mega__grid--hold .family-card__preview--sdpf,
  .family-mega__grid--hold .family-card__preview:has(img[src*="cosd-mega-tablet-v1.png"]),
  .family-mega__grid--hold .family-card__preview:has(img[src*="iep-mega-tablet-v1.png"]) {
    height: 118px;
    min-height: 0;
    flex: 0 0 118px;
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: #f2f2f0;
  }

  .family-mega__grid--hold .family-card__preview--cosd img,
  .family-mega__grid--hold .family-card__preview--iep img,
  .family-mega__grid--hold .family-card__preview--sdpf img,
  .family-mega__grid--hold .family-card__preview:has(img[src*="cosd-mega-tablet-v1.png"]) img,
  .family-mega__grid--hold .family-card__preview:has(img[src*="iep-mega-tablet-v1.png"]) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .family-mega__grid--hold .family-card:nth-child(2) .family-card__preview {
    --preview-start: #005746;
    --preview-mid: #2e7d52;
    --preview-end: #6e9c56;
  }

  .family-mega__grid--hold .family-card:nth-child(3) .family-card__preview {
    --preview-start: #005746;
    --preview-mid: #2e7d52;
    --preview-end: #6e9c56;
  }

  .family-mega__grid--hold .family-card:nth-child(4) .family-card__preview {
    --preview-start: #005746;
    --preview-mid: #2e7d52;
    --preview-end: #6e9c56;
  }

  .family-mega__grid--hold .family-card:nth-child(5) .family-card__preview {
    --preview-start: #005746;
    --preview-mid: #2e7d52;
    --preview-end: #6e9c56;
  }

  .family-mega__grid--signal .family-card:nth-child(1) .family-card__preview {
    --preview-start: #005746;
    --preview-mid: #2e7d52;
    --preview-end: #6e9c56;
  }

  .family-mega__grid--signal .family-card:nth-child(2) .family-card__preview {
    --preview-start: #005746;
    --preview-mid: #2e7d52;
    --preview-end: #6e9c56;
  }

  .family-mega__grid--signal .family-card:nth-child(3) .family-card__preview {
    --preview-start: #005746;
    --preview-mid: #2e7d52;
    --preview-end: #6e9c56;
  }

  .family-mega__grid--hold .family-card strong,
  .family-mega__grid--signal .family-card strong {
    margin: 0;
    padding: 18px 18px 0;
    color: #2e7d52;
    font-size: clamp(18px, 1.18vw, 22px);
    line-height: 1.14;
  }

  .family-mega__grid--hold .family-card small,
  .family-mega__grid--signal .family-card small {
    margin: 12px 0 0;
    padding: 0 18px;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.46;
  }

  .family-mega__grid--hold .family-card__link,
  .family-mega__grid--signal .family-card__link {
    margin-top: auto;
    padding: 16px 18px 18px;
  }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .family-mega__grid--hold,
  .family-mega__grid--signal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 821px) {
  .signal-mega .family-mega__grid--signal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
  }

  .signal-mega .family-mega__grid--signal .family-card {
    min-height: 324px;
    height: 100%;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 0;
    overflow: hidden;
    padding: 0;
    border-color: var(--border);
    border-radius: 8px;
    background: var(--content);
  }

  .signal-mega .family-mega__grid--signal .family-card__preview {
    width: 100%;
    height: 118px;
    flex: 0 0 auto;
    display: block;
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    justify-self: auto;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }

  .signal-mega .family-mega__grid--signal .family-card strong {
    grid-column: auto;
    margin: 0;
    padding: 18px 18px 0;
    align-self: auto;
  }

  .signal-mega .family-mega__grid--signal .family-card small {
    grid-column: auto;
    margin: 12px 0 0;
    padding: 0 18px;
    align-self: auto;
  }

  .signal-mega .family-mega__grid--signal .family-card__link {
    margin-top: auto;
    padding: 16px 18px 18px;
  }
}

@media (max-width: 820px) {
  .family-mega__heading h2 {
    font-size: clamp(25px, 8vw, 34px);
  }

  .family-mega__grid,
  .family-mega__grid--hold,
  .family-mega__grid--signal {
    grid-template-columns: 1fr;
  }

  .family-card {
    min-height: 150px;
  }

  .family-mega__grid--hold .family-card,
  .family-mega__grid--signal .family-card {
    display: flex;
    flex-direction: column;
  }

  .family-card__preview {
    width: min(150px, 58%);
  }
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 26px);
}

.about-card {
  min-height: 408px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8d8d3;
  border-radius: 14px;
  background: #fff;
  opacity: 0;
  transform: translateY(14px);
  transition:
    border-color 260ms ease,
    box-shadow 420ms var(--motion-ease),
    opacity 460ms ease,
    transform 700ms var(--motion-ease);
}

.about-mega.is-open .about-card {
  opacity: 1;
  transform: translateY(0);
}

.about-mega.is-open .about-card:nth-child(2) {
  transition-delay: 45ms;
}

.about-mega.is-open .about-card:nth-child(3) {
  transition-delay: 90ms;
}

.about-mega.is-open .about-card:nth-child(4) {
  transition-delay: 135ms;
}

.about-card:hover {
  /* Keep a neutral edge beside the photo; the shadow supplies hover feedback. */
  box-shadow: 0 18px 38px rgba(21, 25, 26, 0.11);
}

.about-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 876 / 434;
  height: auto;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d3;
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
}

.about-card__media img {
  /* A one-pixel bleed covers fractional clip edges. Keep the same composited
     layer at rest and on hover so starting the zoom does not rerasterize it. */
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0) scale(1);
  will-change: transform;
  transition: transform 1800ms var(--motion-ease-soft);
}

@media (max-width: 1280px) and (min-width: 1101px) {
  .family-mega__grid--hold {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-card--partners .about-card__media img {
  object-position: center 18%;
}


.about-card:hover .about-card__media img {
  transform: translateZ(0) scale(1.025);
}

.about-card__body {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
}

.about-card__body strong,
.what-card__body strong,
.industry-card h3 {
  color: #2e7d52;
  font-family: var(--font-body);
  font-size: var(--type-mega-card-title);
  font-weight: 450;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.about-card__body strong {
  margin-bottom: 12px;
}

/* One canonical copy style keeps the What We Do, Industries, and About menus aligned. */
.about-card__description,
.what-card__description,
.industry-card p {
  color: var(--slate);
  font-family: var(--font-body);
  font-size: var(--type-mega-card-copy-size);
  font-weight: var(--type-mega-card-copy-weight);
  line-height: var(--type-mega-card-copy-line-height);
  letter-spacing: 0;
}

.about-card__link,
.what-card__link,
.industry-card__link,
.family-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mega-card-cta-gap);
  margin-top: auto;
  padding-top: var(--mega-card-cta-padding-top);
  color: var(--mega-card-cta-color);
  font-family: var(--mega-card-cta-font-family);
  font-size: var(--mega-card-cta-font-size);
  font-weight: var(--mega-card-cta-font-weight);
  line-height: var(--mega-card-cta-line-height);
}

.about-card__link svg,
.what-card__link svg,
.industry-card__link svg,
.family-card__link svg {
  width: var(--mega-card-cta-arrow-size);
  height: var(--mega-card-cta-arrow-size);
  stroke-width: var(--mega-card-cta-arrow-stroke-width);
  transition: transform var(--mega-card-cta-motion-duration) var(--mega-card-cta-motion-ease);
}

.about-card:hover .about-card__link svg,
.what-card:hover .what-card__link svg,
.industry-card:hover .industry-card__link svg,
.family-card:hover .family-card__link svg {
  transform: translateX(var(--mega-card-cta-arrow-hover-distance));
}

.what-mega__inner {
  position: relative;
  padding: clamp(24px, 2.6vw, 36px);
}

.what-mega__close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
}

.what-mega__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.34fr);
  gap: 0;
}

.what-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Every service card matches the tallest card in this navigation set at any breakpoint. */
  grid-auto-rows: 1fr;
  gap: 12px;
}

.what-card {
  min-height: 238px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--mega-menu-card-radius);
  background: #ffffff;
  opacity: 0;
  transform: translateY(12px);
  transition:
    border-color 280ms ease,
    box-shadow 420ms var(--motion-ease),
    opacity 460ms ease,
    transform 700ms var(--motion-ease);
}

.what-mega.is-open .what-card,
.what-mega.is-open .implementation-feature,
.what-mega.is-open .what-hub-card {
  opacity: 1;
  transform: translateY(0);
}

.what-mega__rail {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-left: clamp(16px, 1.7vw, 24px);
  border-left: 1px solid rgba(0, 87, 70, 0.18);
  padding-left: clamp(16px, 1.7vw, 24px);
}

/* Service navigation cards compose media, summary, and CTA; shared button/card primitives remain the reusable foundation. */
.what-hub-card {
  position: relative;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  border-radius: var(--mega-menu-card-radius);
  padding: clamp(22px, 2vw, 30px);
  background-color: var(--evergreen);
  background-position: center;
  background-size: cover;
  color: #ffffff;
  opacity: 0;
  transform: translateY(12px);
  transition:
    box-shadow 420ms var(--motion-ease),
    opacity 500ms ease 130ms,
    transform 700ms var(--motion-ease) 130ms;
}

.what-hub-card::before {
  position: absolute;
  content: "";
  inset: 0;
  /* Keep the copy side dark while letting each menu image read on the right. */
  background: linear-gradient(
    90deg,
    rgba(0, 48, 39, 0.93) 0%,
    rgba(0, 69, 56, 0.84) 50%,
    rgba(0, 77, 62, 0.70) 100%
  );
  transition: opacity 420ms ease;
}

.what-mega.is-open .what-hub-card--implementation {
  background-image: url("assets/optimized/how-we-implement-menu-sculpture.webp");
}

.what-mega.is-open .what-hub-card--stories {
  background-image: url("assets/client-stories/story-bg-microsoft-workspace.jpg");
}

.what-hub-card > * {
  position: relative;
  z-index: 1;
}

.what-hub-card__eyebrow {
  margin-bottom: 12px;
  color: rgba(226, 238, 234, 0.84);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

.what-hub-card strong {
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(25px, 2vw, 32px);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}

.what-hub-card__copy {
  max-width: 26ch;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  line-height: 1.42;
}

.what-hub-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}

.what-hub-card__link svg {
  width: 17px;
  height: 17px;
  transition: transform 240ms var(--motion-ease);
}

.what-hub-card:hover,
.what-hub-card:focus-visible {
  box-shadow: 0 20px 44px rgba(0, 55, 44, 0.22);
}

.what-hub-card:hover::before,
.what-hub-card:focus-visible::before {
  opacity: 1;
}

.what-hub-card:hover .what-hub-card__link svg,
.what-hub-card:focus-visible .what-hub-card__link svg {
  transform: translateX(4px);
}

.what-hub-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 62%, transparent);
  outline-offset: 3px;
}

.what-mega.is-open .what-card:nth-child(2) {
  transition-delay: 35ms;
}

.what-mega.is-open .what-card:nth-child(3) {
  transition-delay: 70ms;
}

.what-mega.is-open .what-card:nth-child(4) {
  transition-delay: 105ms;
}

.what-mega.is-open .what-card:nth-child(5) {
  transition-delay: 140ms;
}

.what-mega.is-open .what-card:nth-child(6) {
  transition-delay: 175ms;
}

.what-mega.is-open .what-card:nth-child(7) {
  transition-delay: 210ms;
}

.what-mega.is-open .what-card:nth-child(8) {
  transition-delay: 245ms;
}

.what-card__media {
  height: 118px;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
}

.what-card__media img,
.implementation-feature__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1800ms var(--motion-ease-soft);
}

.what-card__body {
  min-height: 118px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
}

.what-card__description {
  margin-top: 12px;
}

.implementation-feature__link svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.what-card:hover {
  border-color: rgba(110, 156, 86, 0.62);
  box-shadow: 0 18px 38px rgba(21, 25, 26, 0.11);
  transition-delay: 0s;
}

.what-card:hover .what-card__media img,
.implementation-feature:hover .implementation-feature__media img {
  transform: scale(1.035);
}

.implementation-feature {
  min-height: 488px;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(48px, 1fr);
  gap: 22px;
  overflow: hidden;
  border-radius: 8px;
  padding: clamp(24px, 2.4vw, 34px);
  background: linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
  color: #ffffff;
  opacity: 0;
  transform: translateY(12px);
  transition:
    box-shadow 420ms var(--motion-ease),
    opacity 500ms ease 150ms,
    transform 760ms var(--motion-ease) 150ms;
}

.implementation-feature:hover {
  box-shadow: 0 20px 44px rgba(0, 87, 70, 0.24);
}

.implementation-feature__copy {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 20px;
  padding-right: 68px;
}

.implementation-feature__copy strong {
  min-width: 0;
  font-size: clamp(21px, 1.55vw, 25px);
  font-weight: 600;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.implementation-feature__copy > span {
  max-width: 270px;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: var(--type-mega-card-copy-weight);
  line-height: 1.45;
}

.implementation-feature__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: block;
  overflow: visible;
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
}

.implementation-feature__media img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  animation: implementationImageLoop 12s var(--motion-ease-soft) infinite;
}

.implementation-feature__image--series {
  inset: -34% -32%;
  width: 164%;
  height: 168%;
  object-fit: contain !important;
  padding: 0;
  background: transparent !important;
  opacity: 0;
  animation-delay: -6s !important;
}

@keyframes implementationImageLoop {
  0%,
  42% {
    opacity: 1;
    transform: scale(1);
  }

  50%,
  92% {
    opacity: 0;
    transform: scale(1.035);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.implementation-feature__link {
  min-height: 48px;
  min-width: 0;
  max-width: 100%;
  align-self: end;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--evergreen);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.implementation-feature__link:hover,
.implementation-feature__link:focus-visible {
  background: var(--green);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 55, 44, 0.16);
}

.implementation-feature__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 62%, transparent);
  outline-offset: 3px;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.industry-card {
  --sector-marker: var(--green);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
}

/* Keep every mega-menu card family on one corner-radius token. These cards
   also use the elevated-card system, so this scoped rule intentionally wins
   over that more general surface radius without changing cards elsewhere. */
#industries-menu .industry-card,
#signal-evo-menu .signal-mega__quick-link {
  border-radius: var(--mega-menu-card-radius);
  /* Menu cards stay anchored; only their artwork zooms on hover. Keep lift
     available to elevated cards elsewhere on the site. */
  --card-lift-distance: 0px;
  --card-lift-scale: 1;
}

.industry-card--technology {
  --sector-marker: var(--muted);
}

.industry-card--retail {
  --sector-marker: var(--blush);
}

.industry-card--finance {
  --sector-marker: var(--slate);
}

.industry-card--government {
  --sector-marker: var(--gold);
}

.industry-card--energy {
  --sector-marker: var(--green);
}

.industry-card__media {
  position: relative;
  height: 116px;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
}

.industry-card__media::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 87, 70, 0.16), transparent 62%);
}

.industry-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--card-media-zoom-duration) var(--card-media-zoom-ease);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .industry-card:hover .industry-card__media img {
    transform: scale(var(--card-media-zoom-scale));
  }
}

.industry-card__content {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.industry-card h3 {
  margin: 0 0 10px;
}

.industry-card p {
  margin: 0 0 18px;
}

.industry-sectors {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 15px;
}

.industry-sectors span {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  color: #6e9c56;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.industry-sectors svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #2e7d52;
  stroke-width: 1.8;
}

.industry-sectors span + span {
  border-left: 0;
}

.industry-card__link {
  margin-top: 16px;
  padding-top: 0;
}

.mega-scrim {
  position: fixed;
  z-index: 9;
  inset: var(--header-height) 0 0;
  border: 0;
  padding: 0;
  background: rgba(21, 25, 26, 0.3);
  opacity: 0;
  visibility: hidden;
  cursor: default;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}

.mega-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.contact-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 22px;
  background: var(--green);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
}

.contact-link:hover {
  background: var(--evergreen);
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
}

.ethos-page {
  background:
    radial-gradient(circle at 18% 8%, rgba(248, 209, 193, 0.34), transparent 30%),
    radial-gradient(circle at 82% 26%, rgba(190, 207, 153, 0.28), transparent 32%),
    var(--surface);
}

/* Ethos page composition: hero, principles, and supporting editorial sections reuse the site palette and page rail. */
.ethos-hero {
  position: relative;
  min-height: var(--hero-banner-min-height);
  display: grid;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
  color: var(--white);
  isolation: isolate;
}

.ethos-hero::before,
.ethos-hero::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
}

.ethos-hero::before {
  z-index: 1;
  background: var(--hero-image-overlay);
}

.ethos-hero::after {
  z-index: 0;
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.16), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(0, 87, 70, 0.26), transparent 36%),
    linear-gradient(125deg, #005746 0%, #367f57 52%, #80aa62 100%);
  opacity: 0;
  transform: scale(1.04) translate3d(0, 0, 0);
  animation: landing-hero-placeholders 18s ease-in-out infinite;
}

.ethos-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.ethos-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: translate3d(
      var(--hero-ken-burns-from-x),
      var(--hero-ken-burns-from-y),
      0
    )
    scale(var(--hero-ken-burns-from-scale));
  transform-origin: center;
  animation:
    ethosHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
    ethosHeroImageDrift var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
  will-change: opacity, transform;
}

@keyframes ethosHeroImageReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ethosHeroImageDrift {
  from {
    transform: translate3d(
        var(--hero-ken-burns-from-x),
        var(--hero-ken-burns-from-y),
        0
      )
      scale(var(--hero-ken-burns-from-scale));
  }

  to {
    transform: translate3d(
        var(--hero-ken-burns-to-x),
        var(--hero-ken-burns-to-y),
        0
      )
      scale(var(--hero-ken-burns-to-scale));
  }
}

@keyframes ethosHeroImageDriftMobile {
  from { transform: translate3d(-4px, 0, 0) scale(1.035); }
  to { transform: translate3d(4px, 0, 0) scale(1.095); }
}

.ethos-hero__veil {
  position: absolute;
  inset: 0;
  background: none;
}

.ethos-hero__content {
  position: relative;
  z-index: 2;
  width: var(--hero-banner-content-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-banner-content-gap);
  margin-left: var(--hero-banner-gutter);
  margin-right: auto;
  padding-bottom: var(--hero-banner-pad-bottom);
}

.ethos-hero__content .section-eyebrow {
  color: var(--type-hero-eyebrow-color);
  font-family: var(--type-hero-eyebrow-font-family);
  font-size: var(--type-hero-eyebrow-size);
  font-weight: var(--type-hero-eyebrow-weight);
  letter-spacing: var(--type-hero-eyebrow-letter-spacing);
  line-height: var(--type-hero-eyebrow-line-height);
  text-transform: var(--type-hero-eyebrow-text-transform);
}

.ethos-hero h1 {
  max-width: var(--type-hero-heading-width);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--type-hero-heading-size);
  font-weight: 500;
  line-height: var(--type-hero-heading-line-height);
  margin: 0;
  text-align: left;
  text-indent: 0;
  text-wrap: normal;
}

.ethos-hero p:not(.section-eyebrow) {
  max-width: var(--type-hero-copy-width);
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--type-hero-copy-size);
  line-height: var(--type-hero-copy-line-height);
  text-wrap: balance;
}

.ethos-intro,
.ethos-principles,
.ethos-application,
.ethos-cta {
  width: min(100% - clamp(32px, 7vw, 112px), 1440px);
  margin-inline: auto;
}

.ethos-intro {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: end;
  padding: clamp(76px, 9vw, 128px) 0 clamp(42px, 6vw, 76px);
}

.ethos-intro h2,
.ethos-application h2,
.ethos-cta h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(42px, 5.4vw, 82px);
  font-weight: 600;
  line-height: 1.02;
}

.ethos-intro > p {
  margin: 0;
  color: var(--slate);
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.54;
}

.ethos-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 58px);
  width: min(100% - clamp(32px, 5vw, 88px), 1680px);
  padding: clamp(64px, 7vw, 112px) 0 clamp(78px, 8vw, 118px);
}

.ethos-principle-card {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  justify-items: start;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(184, 150, 90, 0.2);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
    var(--content);
  box-shadow: 0 22px 58px rgba(21, 25, 26, 0.08);
  transition: transform 220ms var(--motion-ease), box-shadow 220ms var(--motion-ease);
}

.ethos-principle-card:not(:has(img)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  min-height: clamp(460px, 38vw, 620px);
}

.ethos-principle-card:not(:has(img))::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: stretch;
  width: 100%;
  min-height: clamp(460px, 38vw, 620px);
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12);
}

.ethos-principle-card:not(:has(img)) span,
.ethos-principle-card:not(:has(img)) h3,
.ethos-principle-card:not(:has(img)) p {
  grid-column: 2;
}

.ethos-principle-card:not(:has(img)) h3 {
  max-width: 22ch;
}

.ethos-principle-card:not(:has(img)) p {
  max-width: 70ch;
}

.ethos-principle-card:hover,
.ethos-principle-card:focus-within {
  transform: none;
  box-shadow: 0 22px 58px rgba(21, 25, 26, 0.1);
}

.ethos-principle-card img {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 100%;
  height: 100%;
  min-height: clamp(460px, 38vw, 620px);
  aspect-ratio: auto;
  display: block;
  margin: 0;
  padding: clamp(64px, 7vw, 118px);
  border-radius: 0;
  background: linear-gradient(135deg, #f7f6f3 0%, #f1f2ee 100%);
  object-fit: contain;
  box-shadow: inset 0 -1px 0 rgba(184, 150, 90, 0.16);
}

.ethos-principle-card img.ethos-principle-card__placeholder {
  padding: 0;
  background: #005746;
  object-fit: cover;
  object-position: center;
}

.ethos-principle-card__gallery {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: clamp(460px, 38vw, 620px);
  overflow: hidden;
  background: #f1eee6;
  box-shadow: inset 0 -1px 0 rgba(184, 150, 90, 0.16);
}

.ethos-principle-card__gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: translate3d(
      var(--hero-ken-burns-from-x),
      var(--hero-ken-burns-from-y),
      0
    )
    scale(var(--hero-ken-burns-from-scale));
  animation: ethosCardGalleryKenBurns var(--hero-ken-burns-loop-duration) var(--hero-ken-burns-ease) infinite alternate;
  box-shadow: none;
  transition: opacity var(--hero-crossfade-duration) var(--hero-crossfade-ease);
  will-change: opacity, transform;
}

.ethos-principle-card__gallery img.is-active {
  z-index: 1;
  opacity: 1;
}

.ethos-principle-card__gallery--24 {
  --ethos-gallery-hold: 8s;
}

.ethos-principle-card__gallery--26 {
  --ethos-gallery-hold: 8.667s;
}

.ethos-principle-card__gallery--28 {
  --ethos-gallery-hold: 9.333s;
}

.ethos-principle-card__gallery--30 {
  --ethos-gallery-hold: 10s;
}

.ethos-principle-card__gallery--32 {
  --ethos-gallery-hold: 10.667s;
}

@keyframes ethosCardGalleryKenBurns {
  from {
    transform: translate3d(
        var(--hero-ken-burns-from-x),
        var(--hero-ken-burns-from-y),
        0
      )
      scale(var(--hero-ken-burns-from-scale));
  }

  to {
    transform: translate3d(
        var(--hero-ken-burns-to-x),
        var(--hero-ken-burns-to-y),
        0
      )
      scale(var(--hero-ken-burns-to-scale));
  }
}

.ethos-principle-card__brand-mark {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: end;
  justify-self: start;
  z-index: 2;
  width: clamp(34px, 3.1vw, 44px);
  aspect-ratio: 1;
  margin: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  border-radius: clamp(7px, 0.7vw, 10px);
  background-color: #fff;
  background-image: url("assets/nka-logo-portrait-white.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: 0 5px 14px rgba(21, 25, 26, 0.16);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ethos-principle-card__gallery img {
    opacity: 0;
    transform: none;
    animation: none;
    transition: none;
    will-change: auto;
  }

  .ethos-principle-card__gallery img:first-child {
    opacity: 1;
  }
}

.ethos-principle-card span {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(190, 207, 153, 0.35);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  margin: clamp(58px, 6vw, 92px) clamp(34px, 5vw, 78px) 0;
}

.ethos-principle-card h3 {
  grid-column: 2;
  grid-row: 2;
  margin: clamp(18px, 2vw, 28px) 0 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  max-width: 18ch;
  margin-inline: clamp(34px, 5vw, 78px);
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 600;
  line-height: 1.08;
}

.ethos-principle-card p {
  grid-column: 2;
  grid-row: 3;
  margin: clamp(16px, 1.7vw, 24px) 0 0;
  color: var(--slate);
  max-width: 58ch;
  margin: clamp(16px, 1.7vw, 24px) clamp(34px, 5vw, 78px) clamp(58px, 6vw, 92px);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.55;
}

/* Shared editorial foundation for lightweight About landing pages. */
.about-landing-hero {
  position: relative;
  min-height: var(--hero-banner-min-height);
  display: grid;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
  color: #ffffff;
  isolation: isolate;
}

.about-landing-hero::before,
.about-landing-hero::after {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
}

.about-landing-hero::before {
  z-index: 1;
  background: var(--hero-image-overlay);
}

.about-landing-hero::after {
  z-index: 0;
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.16), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(0, 87, 70, 0.26), transparent 36%),
    linear-gradient(125deg, #005746 0%, #367f57 52%, #80aa62 100%);
  opacity: 0;
  transform: scale(1.04) translate3d(0, 0, 0);
  animation: landing-hero-placeholders 18s ease-in-out infinite;
}

.about-landing-hero__content {
  position: relative;
  z-index: 2;
  width: var(--hero-banner-content-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-banner-content-gap);
  margin-left: var(--hero-banner-gutter);
  margin-right: auto;
  padding-bottom: var(--hero-banner-pad-bottom);
}

.about-landing-hero__content .section-eyebrow {
  color: var(--type-hero-eyebrow-color);
  font-family: var(--type-hero-eyebrow-font-family);
  font-size: var(--type-hero-eyebrow-size);
  font-weight: var(--type-hero-eyebrow-weight);
  letter-spacing: var(--type-hero-eyebrow-letter-spacing);
  line-height: var(--type-hero-eyebrow-line-height);
  text-transform: var(--type-hero-eyebrow-text-transform);
}

.about-landing-hero h1 {
  max-width: var(--type-hero-heading-width);
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--type-hero-heading-size);
  font-weight: 500;
  line-height: var(--type-hero-heading-line-height);
  text-align: left;
  text-indent: 0;
  text-wrap: normal;
}

.about-landing-hero p:not(.section-eyebrow) {
  max-width: var(--type-hero-copy-width);
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--type-hero-copy-size);
  line-height: var(--type-hero-copy-line-height);
  text-wrap: balance;
}

.preferred-partners-hero {
  background-color: #304c43;
  background-image: none;
}

.preferred-partners-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.preferred-partners-hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 900ms var(--motion-ease-soft), transform 7s var(--motion-ease-soft);
}

.preferred-partners-hero__media img.is-active {
  opacity: 0.9;
  transform: scale(1.055);
}

@media (max-width: 1100px) {
  .preferred-partners-hero__media img {
    object-position: center top;
  }
}

@media (max-width: 599px) {
  .preferred-partners-hero__media img {
    object-position: center top;
    transform: none;
  }

  .preferred-partners-hero__media img.is-active {
    transform: none;
  }
}

/* Shared hero entrance: opacity-only line fades preserve type placement and avoid filter repainting. */
.hero-headline__word {
  display: inline-block;
  margin-inline: 0;
  padding-inline: 0;
  text-indent: 0;
}

.hero-headline-reveal h1,
.home-banner__content h1,
.home-banner__content h2,
.about-landing-hero h1,
.ethos-hero h1,
.contact-hero h1 {
  margin-inline-start: 0;
  padding-inline-start: 0;
  text-align: left;
  text-indent: 0;
  text-wrap: normal;
}

.hero-headline-reveal.is-hero-headline-ready .hero-headline__word {
  opacity: 0;
  animation: heroHeadlineLineReveal 1100ms var(--motion-ease-soft) forwards;
  animation-delay: calc(180ms + (var(--hero-headline-line-index) * 280ms));
}

.hero-headline-reveal.is-hero-headline-ready .hero-headline__eyebrow,
.hero-headline-reveal.is-hero-headline-ready .hero-headline__description {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: heroSupportingCopyReveal 500ms var(--motion-ease-soft) var(--hero-headline-copy-delay) forwards;
  will-change: opacity, transform;
}

@keyframes heroHeadlineLineReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes heroSupportingCopyReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline-reveal.is-hero-headline-ready .hero-headline__word,
  .hero-headline-reveal.is-hero-headline-ready .hero-headline__eyebrow,
  .hero-headline-reveal.is-hero-headline-ready .hero-headline__description {
    animation: none;
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

@keyframes landing-hero-placeholders {
  0%,
  28% {
    opacity: 0;
    transform: scale(1.04) translate3d(0, 0, 0);
  }

  36%,
  62% {
    opacity: 1;
    transform: scale(1.1) translate3d(-1.4%, 0.8%, 0);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.08) translate3d(1.2%, -0.8%, 0);
  }
}

.about-landing-intro,
.about-landing-pillars {
  width: min(100% - clamp(32px, 7vw, 112px), 1440px);
  margin-inline: auto;
}

.about-landing-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 7vw, 110px);
  padding: clamp(78px, 10vw, 150px) 0 clamp(62px, 8vw, 112px);
}

.about-landing-intro header > span {
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-landing-intro h2 {
  margin: 18px 0 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 66px);
  font-weight: 500;
  line-height: 1.05;
}

.about-landing-intro > div {
  display: grid;
  align-content: center;
  gap: 24px;
}

.about-landing-intro > div p {
  margin: 0;
  color: var(--slate);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.62;
}

.about-landing-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  padding-bottom: clamp(86px, 11vw, 160px);
}

.about-landing-pillars article {
  min-height: 310px;
  padding: clamp(30px, 3.5vw, 50px);
  border: 1px solid rgba(0, 87, 70, 0.12);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 20px 54px rgba(21, 25, 26, 0.07);
}

.about-landing-pillars article > span {
  color: #6e9c56;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.about-landing-pillars h3 {
  margin: 46px 0 16px;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
}

.about-landing-pillars p {
  margin: 0;
  color: var(--slate);
  font-size: 17px;
  line-height: 1.55;
}

.service-pillar__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.45;
  list-style: none;
}

.service-pillar__list li {
  position: relative;
  padding-left: 18px;
}

.service-pillar__list li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

/* Legacy service template sections remain hidden; the dedicated pages now use
   their own editorial and offering-card sections below the hero. */
.about-landing-intro,
.about-landing-pillars {
  display: none;
}

.about-landing-hero {
  margin-bottom: clamp(380px, 42vw, 680px);
}

@media (max-width: 820px) {
  .about-landing-hero {
    min-height: var(--hero-banner-mobile-min-height);
    margin-bottom: 280px;
  }

  /* Keep the mobile template's right-hand specification label inside the
     viewport. Real art-directed hero media opts out via `.has-hero-artwork`. */
  .about-landing-hero:not(.has-hero-artwork),
  .ethos-page .ethos-hero {
    background-position: right center;
  }

  .about-landing-hero::before {
    background: var(--hero-image-overlay-mobile);
  }

  .about-landing-hero__content {
    width: var(--hero-banner-mobile-content-width);
    gap: var(--hero-banner-mobile-content-gap);
    margin-inline: auto;
    padding-bottom: var(--hero-banner-mobile-pad-bottom);
  }

  .about-landing-hero h1 {
    max-width: 100%;
    font-size: var(--type-hero-heading-mobile-size);
  }

  .about-landing-hero p:not(.section-eyebrow) {
    max-width: var(--type-hero-copy-width);
    font-size: var(--type-hero-copy-mobile-size);
  }

  .about-landing-intro,
  .about-landing-pillars {
    grid-template-columns: 1fr;
  }

  .about-landing-pillars article {
    min-height: 0;
  }
}

/* About page regional presence: local D3/TopoJSON SVG maps with separate
   projections and an open editorial split rather than a double-card surface. */
.about-landing-page .about-landing-hero {
  margin-bottom: 0;
}

.presence {
  padding: clamp(68px, 7vw, 104px) clamp(24px, 6vw, 96px) clamp(88px, 9vw, 136px);
  overflow: hidden;
  background: var(--color-surface);
}

.presence__regions {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.presence__regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
}

.presence-card {
  min-width: 0;
  padding: clamp(38px, 4vw, 58px) clamp(28px, 4vw, 58px) clamp(32px, 3.5vw, 48px);
}

.presence-card:first-child {
  padding-left: 0;
}

.presence-card:last-child {
  padding-right: 0;
  border-left: 1px solid var(--color-border);
}

.presence-card__header,
.presence-card__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}

.presence-card__header {
  min-height: 96px;
  display: block;
}

.presence-card h2 {
  margin: 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.3vw, 48px);
  font-weight: 500;
  line-height: 1.05;
}

.presence-card__header h2 + p {
  margin: var(--space-3) 0 0;
  color: var(--slate);
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}

.presence-map {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: var(--space-4) 0 var(--space-5);
  overflow: hidden;
  border: 1px solid rgba(46, 125, 82, 0.14);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcf9 100%);
  box-shadow: 0 14px 34px rgba(21, 25, 26, 0.035);
  isolation: isolate;
}

.presence-map__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--slate);
  font-size: var(--type-small);
}

.presence.has-map-error .presence-map__fallback {
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  background: var(--color-page);
}

.presence-card__footer {
  position: relative;
  height: 112px;
  min-height: 112px;
  box-sizing: border-box;
  align-items: end;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.presence-map__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.presence-map__land-layer {
  transform-box: fill-box;
  transform-origin: center;
  animation: presence-map-land-in 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.presence-map__land {
  transition:
    fill 260ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease;
}

.presence-map__land.is-active {
  cursor: pointer;
}

.presence-map__land.is-active:is(:hover, :focus, .is-hovered) {
  fill: #2e7d52;
  filter: brightness(1.045);
  outline: none;
}

.presence-map__land.is-active:focus-visible {
  stroke: #ffffff;
  stroke-width: 3;
}

.presence-map__markers {
  animation: presence-map-points-in 920ms cubic-bezier(0.16, 1, 0.3, 1) 1.58s both;
}

.presence-map__marker-group {
  cursor: pointer;
  outline: none;
}

.presence-map__marker-pulse {
  fill: rgba(110, 156, 86, 0.1);
  stroke: rgba(110, 156, 86, 0.48);
  stroke-width: 1.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: presence-map-open-pulse 2.8s var(--motion-ease) infinite;
}

.presence-map__marker {
  fill: #6e9c56;
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition:
    fill 240ms cubic-bezier(0.22, 1, 0.36, 1),
    r 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.presence-map__marker-group:is(:hover, :focus, .is-selected) .presence-map__marker {
  fill: #2e7d52;
  r: 9;
}

.presence-map__marker-group.is-office .presence-map__marker {
  fill: #ffffff;
  stroke: #2e7d52;
  stroke-width: 3;
}

.presence-map__marker-group.is-office .presence-map__marker-pulse {
  fill: rgba(46, 125, 82, 0.16);
  stroke: rgba(46, 125, 82, 0.62);
  stroke-width: 1.5;
  animation: presence-map-office-pulse 2.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.presence-map__marker-group:focus-visible .presence-map__marker {
  stroke-width: 4;
}

.presence-map__tooltip {
  position: absolute;
  z-index: 7;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid #2e7d52;
  border-radius: 12px;
  background: #ffffff;
  color: #2e7d52;
  box-shadow: 0 9px 20px rgba(21, 25, 26, 0.16);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 13px)) translateY(5px);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.presence-map__tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid #2e7d52;
  border-bottom: 1px solid #2e7d52;
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
}

.presence-map__tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 13px)) translateY(0);
}

.presence-map__office-callout {
  position: absolute;
  z-index: 6;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 9px 13px;
  border: 1px solid #2e7d52;
  border-radius: 14px;
  background: #ffffff;
  color: #2e7d52;
  box-shadow: 0 8px 18px rgba(21, 25, 26, 0.13);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(calc(-100% - 18px), -50%);
  animation: presence-map-points-in 760ms cubic-bezier(0.16, 1, 0.3, 1) 1.72s both;
}

.presence-map__office-callout::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -19px;
  width: 19px;
  height: 1px;
  background: #2e7d52;
}

.presence-map__office-callout:focus-visible {
  outline: 2px solid #2e7d52;
  outline-offset: 3px;
}

@keyframes presence-map-land-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes presence-map-open-pulse {
  0%, 100% {
    opacity: 0.18;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.08);
  }
}

@keyframes presence-map-office-pulse {
  0%, 100% {
    opacity: 0.22;
    transform: scale(0.88);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.24);
  }
}

.presence-card__selection {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 10px;
  margin: 0;
}

.presence-office-preview {
  position: absolute;
  z-index: 8;
  left: clamp(14px, 2.1vw, 24px);
  bottom: clamp(14px, 2.1vw, 24px);
  width: clamp(112px, 22%, 154px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-card);
  background: #dce4dc;
  box-shadow: 0 16px 36px rgba(21, 25, 26, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-8px, 8px, 0) scale(0.96);
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.presence-office-preview.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.presence-office-preview__slide,
.presence-office-preview__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.presence-office-preview__slide {
  opacity: 0;
  transition: opacity 1.45s cubic-bezier(0.37, 0, 0.63, 1);
}

.presence-office-preview__slide.is-active {
  opacity: 1;
}

.presence-office-preview__slide img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}

.presence-office-preview__slide:nth-child(5) img {
  object-position: center 62%;
}

.presence-office-preview__slide.is-active img {
  animation: presence-office-preview-drift 9.4s cubic-bezier(0.37, 0, 0.63, 1) both;
}

@keyframes presence-office-preview-drift {
  from { transform: scale(1.015); }
  to { transform: scale(1.075); }
}

.presence-card__selection.is-revealing {
  animation: presence-selection-reveal 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes presence-selection-reveal {
  from {
    opacity: 0.18;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .presence-card__selection.is-revealing,
  .presence-card__selection.is-revealing-after-office {
    animation: none;
  }

  .presence-office-preview {
    transition: none;
  }

  .presence-office-preview__slide {
    transition: none;
  }

  .presence-office-preview__slide.is-active img {
    animation: none;
  }
}

.presence-card__selection span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.presence-card__selection span[data-country-code]:not([data-country-code=""])::before {
  content: "";
  width: 28px;
  height: 28px;
  display: inline-block;
  flex: 0 0 28px;
  align-self: center;
  overflow: hidden;
  box-sizing: border-box;
  margin-block: 2px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(46, 125, 82, 0.24), 0 4px 12px rgba(21, 25, 26, 0.1);
}

.presence-card__selection span[data-country-code="ca"]::before { background-image: url("assets/flags/ca.svg?v=flag-icons-7.5.0"); }
.presence-card__selection span[data-country-code="us"]::before { background-image: url("assets/flags/us.svg?v=flag-icons-7.5.0"); }
.presence-card__selection span[data-country-code="gb"]::before { background-image: url("assets/flags/gb.svg?v=flag-icons-7.5.0"); }
.presence-card__selection span[data-country-code="nl"]::before { background-image: url("assets/flags/nl.svg?v=flag-icons-7.5.0"); }
.presence-card__selection span[data-country-code="dk"]::before { background-image: url("assets/flags/dk.svg?v=flag-icons-7.5.0"); }
.presence-card__selection span[data-country-code="se"]::before { background-image: url("assets/flags/se.svg?v=flag-icons-7.5.0"); }
.presence-card__selection span[data-country-code="fi"]::before { background-image: url("assets/flags/fi.svg?v=flag-icons-7.5.0"); }
.presence-card__selection span[data-country-code="de"]::before { background-image: url("assets/flags/de.svg?v=flag-icons-7.5.0"); }

.presence-card__selection small {
  color: var(--slate);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.presence-card__hint {
  color: var(--slate);
  font-size: 11px;
  line-height: 1.45;
}

.presence-card__hint {
  position: absolute;
  top: 14px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.presence-card__hint i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: #2e7d52;
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.14);
}

@keyframes presence-map-points-in {
  from {
    opacity: 0;
    translate: 0 5px;
  }
  58% {
    opacity: 0.86;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.presence-map__office-symbol {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  overflow: hidden;
  background: url("assets/nka-logo-landscape-green.svg") left center / auto 20px no-repeat;
}

@media (max-width: 980px) {
  .presence__regions {
    grid-template-columns: 1fr;
  }

  .presence-card,
  .presence-card:first-child,
  .presence-card:last-child {
    padding-inline: 0;
  }

  .presence-card:last-child {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

}

@media (max-width: 700px) {
  .presence {
    padding: clamp(52px, 14vw, 72px) var(--space-4) clamp(72px, 18vw, 96px);
  }

  .presence-card {
    padding-block: var(--space-7) var(--space-6);
  }

  .presence-card__header {
    min-height: 0;
  }

  .presence-map {
    margin-block: var(--space-4);
    border-radius: var(--radius-card);
  }

  .presence-card[data-presence-region="north-america"] .presence-card__footer {
    height: auto;
    min-height: 142px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding-top: 20px;
  }

  .presence-card[data-presence-region="north-america"].is-office-preview-visible .presence-card__footer {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .presence-office-preview.is-mobile-footer {
    position: absolute;
    z-index: 1;
    inset: 20px auto auto 0;
    width: 100px;
    grid-column: 1;
    grid-row: 1;
    border-radius: var(--radius-card);
    transform: translate3d(-6px, 4px, 0) scale(0.96);
    transition:
      opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .presence-card.is-office-preview-visible .presence-office-preview.is-mobile-footer {
    position: relative;
    inset: auto;
  }

  .presence-office-preview.is-mobile-footer.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .presence-card[data-presence-region="north-america"] .presence-card__selection {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  .presence-card[data-presence-region="north-america"].is-office-preview-visible .presence-card__selection {
    grid-column: 2;
  }

  .presence-card__selection.is-revealing-after-office {
    animation: presence-selection-after-office 440ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
  }

  .presence-map__marker {
    stroke-width: 1.25;
  }

  .presence-map__marker-group.is-office .presence-map__marker {
    stroke-width: 2;
  }

  .presence-map__marker-group:focus-visible .presence-map__marker {
    stroke-width: 2.5;
  }

  .presence-map__marker-group.is-office .presence-map__marker-pulse {
    stroke-width: 1;
  }

  @keyframes presence-selection-after-office {
    from {
      opacity: 0;
      transform: translate3d(0, 5px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .presence-card__hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .presence-map__land-layer,
  .presence-map__markers,
  .presence-map__office-callout {
    opacity: 1;
    translate: none;
    animation: none;
  }

  .presence-map__land,
  .presence-map__marker,
  .presence-map__tooltip {
    transition: none;
  }

  .presence-map__marker-pulse {
    opacity: 0.28;
    animation: none;
  }
}

.ethos-application {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
  padding: clamp(58px, 7vw, 92px);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 8% 12%, rgba(248, 209, 193, 0.54), transparent 30%),
    radial-gradient(circle at 92% 70%, rgba(190, 207, 153, 0.48), transparent 38%),
    linear-gradient(135deg, #fffaf2 0%, #f7f1e2 52%, #f4eadf 100%);
}

.ethos-application__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ethos-application article {
  min-height: 230px;
  padding: clamp(24px, 2.3vw, 34px);
  border: 1px solid rgba(0, 87, 70, 0.1);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 42px rgba(21, 25, 26, 0.06);
}

.ethos-application h3 {
  margin: 0;
  color: var(--evergreen);
  font-size: clamp(20px, 1.5vw, 25px);
  line-height: 1.18;
}

.ethos-application p {
  margin: 16px 0 0;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.55;
}

.ethos-cta {
  display: grid;
  place-items: center;
  padding: clamp(78px, 9vw, 128px) 0 clamp(36px, 5vw, 70px);
  text-align: center;
}

.ethos-cta p:not(.section-eyebrow) {
  width: min(720px, 100%);
  margin: 20px auto 0;
  color: var(--slate);
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.52;
}

.ethos-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 30px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--evergreen);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  transition: transform 180ms var(--motion-ease), background 180ms ease;
}

.ethos-cta__link:hover,
.ethos-cta__link:focus-visible {
  background: #06483d;
  transform: translateY(-2px);
}

@media (max-width: 1180px) {
  .ethos-principles {
    grid-template-columns: 1fr;
  }

  .ethos-principle-card {
    min-height: 0;
  }

  .ethos-application,
  .ethos-application__grid {
    grid-template-columns: 1fr;
  }

  .ethos-application article {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .ethos-hero {
    min-height: var(--hero-banner-mobile-min-height);
  }

  .ethos-hero::before {
    background: var(--hero-image-overlay-mobile);
  }

  .ethos-hero__image {
    object-position: 58% center;
    transform-origin: center top;
    animation:
      ethosHeroImageReveal var(--hero-image-reveal-duration) var(--hero-image-reveal-ease) both,
      ethosHeroImageDriftMobile var(--hero-image-drift-pass-duration) var(--hero-image-drift-ease) infinite alternate;
  }

  .ethos-hero__veil {
    background: none;
  }

  .ethos-hero__content {
    width: var(--hero-banner-mobile-content-width);
    gap: var(--hero-banner-mobile-content-gap);
    margin-inline: auto;
    padding-bottom: var(--hero-banner-mobile-pad-bottom);
  }

  .ethos-hero h1 {
    max-width: 100%;
    font-size: var(--type-hero-heading-mobile-size);
  }

  .ethos-hero p:not(.section-eyebrow) {
    font-size: var(--type-hero-copy-mobile-size);
  }

  .ethos-intro,
  .ethos-application {
    grid-template-columns: 1fr;
  }

  .ethos-principles {
    grid-template-columns: 1fr;
  }

  .ethos-principle-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .ethos-principle-card:not(:has(img)) {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ethos-principle-card:not(:has(img))::before {
    grid-column: 1;
    grid-row: auto;
    min-height: clamp(280px, 74vw, 420px);
  }

  .ethos-principle-card:not(:has(img)) span,
  .ethos-principle-card:not(:has(img)) h3,
  .ethos-principle-card:not(:has(img)) p {
    grid-column: 1;
  }

  .ethos-principle-card img,
  .ethos-principle-card span,
  .ethos-principle-card h3,
  .ethos-principle-card p {
    grid-column: 1;
    grid-row: auto;
  }

  .ethos-principle-card img {
    min-height: 0;
    margin-bottom: clamp(30px, 8vw, 46px);
  }

  .ethos-principle-card__gallery {
    grid-column: 1;
    grid-row: 1;
    min-height: clamp(280px, 92vw, 520px);
    margin-bottom: clamp(30px, 8vw, 46px);
  }

  .ethos-principle-card__gallery img {
    margin-bottom: 0;
  }

  .ethos-principle-card > img {
    grid-row: 1;
  }

  .ethos-principle-card__brand-mark {
    grid-row: 1;
    margin: 14px 14px calc(clamp(30px, 8vw, 46px) + 14px);
  }

  .ethos-principle-card span {
    margin: 0 clamp(28px, 6vw, 46px);
  }

  .ethos-principle-card h3 {
    margin-inline: clamp(28px, 6vw, 46px);
  }

  .ethos-principle-card p {
    margin: clamp(16px, 1.7vw, 24px) clamp(28px, 6vw, 46px) clamp(42px, 9vw, 64px);
  }
}

@media (max-width: 599px) {
  .ethos-hero {
    min-height: var(--hero-banner-mobile-min-height);
  }

  .ethos-intro,
  .ethos-principles,
  .ethos-application,
  .ethos-cta {
    width: min(100% - 28px, 1440px);
  }

  .ethos-application {
    padding: 34px 20px;
    border-radius: var(--radius-card);
  }

  .ethos-principle-card {
    justify-items: start;
    text-align: left;
  }

  .ethos-principle-card img {
    height: clamp(280px, 90vw, 460px);
    padding: clamp(30px, 9vw, 52px);
  }

  .ethos-principle-card__gallery img {
    padding: 0;
    object-fit: cover;
  }

  .ethos-principle-card h3 {
    font-size: clamp(34px, 12vw, 52px);
  }
}

/* Canonical footer layout, navigation, procurement evidence, and legal links; shell synchronization owns the repeated markup. */
.site-footer {
  position: relative;
  z-index: 1;
  min-height: clamp(430px, 34vw, 540px);
  margin-top: clamp(44px, 6vw, 88px);
  border-radius: 0;
  background: #005746;
  color: #ffffff;
  opacity: 1;
}

.footer-inner {
  width: min(1320px, calc(100% - clamp(48px, 8vw, 120px)));
  min-height: inherit;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-block: clamp(62px, 6vw, 88px) clamp(28px, 3vw, 42px);
}

.footer-top {
  min-height: 250px;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(420px, 1fr) minmax(330px, 390px);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
}

.footer-brand {
  width: clamp(66px, 6vw, 82px);
  display: block;
}

.footer-brand img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-nav {
  width: min(650px, 100%);
  grid-column: 2 / 4;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-top: 2px;
  text-align: left;
}

.footer-nav__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-nav__heading {
  margin-bottom: 4px;
  color: #becf99;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  line-height: 1.4;
  transition: color 180ms ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #becf99;
}

.footer-proservices {
  width: min(390px, 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  grid-column: 1 / 3;
  justify-self: start;
  align-self: end;
  margin: 0 0 28px;
  padding: 0;
  background: transparent;
  color: #ffffff;
}

.footer-proservices__icon {
  width: 26px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.footer-proservices__icon img {
  width: 24px;
  height: 26px;
  display: block;
  object-fit: contain;
}

.footer-proservices__copy {
  width: min(390px, calc(100% - 42px));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  white-space: normal;
  font-size: clamp(11.5px, 0.78vw, 13px);
  line-height: 1.38;
}

.footer-proservices__copy strong {
  color: #ffffff;
  font-size: inherit;
  font-weight: 400;
}

.footer-proservices__copy span {
  color: #becf99;
  font-size: clamp(9.5px, 0.66vw, 10.5px);
  font-weight: 400;
}

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, auto) minmax(180px, 1fr);
  align-items: center;
  gap: 24px;
  border-top: 1px solid rgba(190, 207, 153, 0.42);
  padding-top: 24px;
  color: #becf99;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.footer-bottom address {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-style: normal;
  text-align: center;
}

.footer-address-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}

.footer-address-break {
  display: none;
}

.footer-postal {
  white-space: nowrap;
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.5vw, 36px);
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 220ms ease;
}

.footer-legal svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
  transition: transform 220ms ease, opacity 220ms ease;
}

.footer-legal circle {
  fill: currentColor;
  stroke: none;
}

.footer-legal a:hover {
  color: #ffffff;
}

.footer-legal a:hover svg {
  opacity: 1;
  transform: translateY(-1px);
}

@media (min-width: 761px) and (max-width: 1100px) {
  .site-footer {
    min-height: 560px;
  }

  .footer-top {
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 42px;
  }

  .footer-nav {
    grid-column: 2;
    width: 100%;
  }

  .footer-proservices {
    grid-column: 1 / 3;
    justify-self: start;
    align-self: end;
    margin: 46px 0 28px;
  }
}

/* Phase narratives connect model concepts to longer explanatory copy; keep phase order aligned with the page markup. */
.phase-editorial {
  width: min(1180px, calc(100% - clamp(52px, 8vw, 128px)));
  margin: 0 auto;
  padding-top: clamp(26px, 4vw, 56px);
}

/* How We Hold editorial content precedes the interactive model; reading columns and art placement must survive text reflow. */
.strategy-article {
  width: min(1180px, calc(100% - clamp(52px, 8vw, 128px)));
  margin: 0 auto;
  padding: clamp(66px, 7vw, 96px) 0 clamp(38px, 5vw, 64px);
}

.strategy-article__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(54px, 6vw, 82px);
  border-top: 1px solid rgba(0, 87, 70, 0.22);
  padding-block: clamp(46px, 6vw, 72px);
  text-align: left;
}

.strategy-article__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(18px, 2vw, 26px);
  align-self: start;
  max-width: none;
}

.strategy-article__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}

.strategy-article__header h2 {
  grid-column: 1;
  max-width: none;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.15vw, 60px);
  font-weight: 500;
  line-height: 1.12;
}

.strategy-article__header p {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
  max-width: none;
  margin: 0;
  color: var(--green);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.85vw, 27px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}

.strategy-article__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, 0.72fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}

.strategy-article__body--copy-only {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.strategy-article__body > .strategy-article__column:first-child {
  grid-column: 1;
}

.strategy-article__body > .strategy-article__column:nth-of-type(2) {
  grid-column: 2;
}

.strategy-article__rail {
  grid-column: 3;
  display: grid;
  grid-template-rows: auto minmax(150px, 1fr) auto;
  gap: clamp(20px, 2.4vw, 32px);
  min-height: 100%;
}

.strategy-article__column p,
.strategy-article__closing {
  margin: 0;
  color: var(--slate);
  font-size: var(--type-editorial-body-size);
  font-weight: 300;
  line-height: 1.72;
}

.strategy-article__column p + p {
  margin-top: 18px;
}

/* Shared article opening across the How We Hold family. One drop cap starts
   the reading journey while the second column, lead copy, call-outs, and
   three-panel evidence rail retain their existing hierarchy. */
.strategy-article__body
  > .strategy-article__column:first-child
  > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 4.45em;
  font-weight: 600;
  line-height: 0.78;
}

.strategy-article__column strong {
  color: var(--ink);
  font-weight: 600;
}

.strategy-article__lead {
  color: #2e7d52 !important;
  font-weight: var(--type-editorial-emphasis-weight) !important;
}

.strategy-article__callout {
  position: relative;
  border-radius: var(--radius-card);
  padding: 18px 20px 20px;
  background: rgba(248, 250, 246, 0.92);
  box-shadow: inset 0 0 0 1px rgba(0, 87, 70, 0.06);
}

.strategy-article__callout span {
  display: block;
  margin-bottom: 10px;
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.strategy-article__callout p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.25vw, 19px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
}

.strategy-article__visual {
  min-height: 170px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 87, 70, 0.08);
  border-radius: var(--radius-card);
  background: #f8faf6;
  box-shadow: 0 18px 42px rgba(21, 25, 26, 0.07);
}

.strategy-article__visual img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
}

.strategy-article__visual--model img {
  padding: 10px;
  background: #f8f5ef;
  object-fit: contain;
}

.strategy-article__closing {
  grid-column: 1 / span 2;
  max-width: 720px;
  margin-top: clamp(4px, 0.8vw, 12px);
}

.full-model-plate {
  width: min(1180px, calc(100% - clamp(52px, 8vw, 128px)));
  margin: 0 auto;
  padding: clamp(34px, 4vw, 58px) 0 clamp(30px, 4vw, 54px);
}

.full-model-plate__inner {
  overflow: hidden;
  border: 1px solid rgba(0, 87, 70, 0.1);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(21, 25, 26, 0.07);
}

.full-model-plate img {
  width: 100%;
  height: auto;
  display: block;
}

/* Dense strategy-model labels need their native reading scale on narrow
   screens; the focused region provides keyboard and touch horizontal access. */
.full-model-plate--strategy .full-model-plate__inner {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.full-model-plate--strategy .full-model-plate__inner:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.phase-editorial__row {
  display: grid;
  grid-template-columns: minmax(300px, 404px) minmax(0, 1fr);
  gap: clamp(32px, 3vw, 40px);
  border-top: 1px solid var(--border);
  padding-block: clamp(50px, 5.6vw, 78px);
}

.phase-editorial__row:last-child {
  border-bottom: 1px solid var(--border);
}

.phase-editorial__heading span {
  display: block;
  margin-bottom: 13px;
  color: var(--green);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

.phase-editorial__heading .phase-editorial__phase-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.phase-editorial__phase-label svg {
  width: 16px;
  height: 16px;
  color: currentColor;
  stroke-width: 1.9;
}

.phase-editorial__heading h2 {
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.05;
}

.phase-editorial__heading p {
  max-width: 270px;
  margin: 20px 0 0;
  color: var(--ink);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.45;
}

.phase-editorial__copy {
  max-width: 780px;
}

.phase-editorial__copy p {
  margin: 0;
  color: var(--slate);
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 300;
  line-height: 1.72;
}

.phase-editorial__copy p + p {
  margin-top: 24px;
}

.phase-editorial__row--ethos {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.2vw, 30px);
  min-height: 0;
  overflow: hidden;
  border-bottom: 0;
  border: 0;
  border-radius: var(--radius-card);
  margin-inline: auto;
  padding: clamp(18px, 2.8vw, 40px) clamp(16px, 2.8vw, 40px) clamp(34px, 4vw, 62px);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 250, 240, 0.96) 0%, rgba(255, 250, 240, 0) 34%),
    radial-gradient(circle at 82% 18%, rgba(247, 181, 143, 0.2) 0%, rgba(247, 181, 143, 0) 38%),
    radial-gradient(circle at 50% 88%, rgba(190, 207, 153, 0.16) 0%, rgba(190, 207, 153, 0) 36%),
    linear-gradient(145deg, #f8f5ef 0%, #fffaf1 42%, #f1eadf 100%);
}

.phase-editorial__row--ethos > .phase-editorial__heading {
  display: none;
}

.phase-editorial__row--ethos:last-child {
  border-bottom: 0;
}

.phase-editorial__row--ethos + .phase-editorial__row {
  border-top: 0;
}

.phase-editorial__row--ethos::before,
.phase-editorial__row--ethos::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.phase-editorial__row--ethos::before {
  z-index: 0;
  inset: 0;
  display: none;
}

.phase-editorial__row--ethos::after {
  display: none;
}

.phase-editorial__model-tile {
  position: relative;
  z-index: 3;
  width: min(78%, 900px);
  margin: 0 auto;
  padding: clamp(12px, 1.45vw, 22px);
  border: 1px solid rgba(0, 87, 70, 0.08);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow:
    0 28px 74px rgba(21, 25, 26, 0.11),
    0 8px 22px rgba(0, 87, 70, 0.07);
}

.phase-editorial__model-tile img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(10px, 1vw, 16px);
  background: #ffffff;
}

.phase-editorial__row--ethos .phase-editorial__heading {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.phase-editorial__row--ethos .phase-editorial__heading span {
  margin-bottom: 14px;
  color: #5f8f49;
  font-size: 12px;
  letter-spacing: 0.13em;
}

.phase-editorial__row--ethos .phase-editorial__heading h2 {
  color: #005746;
  font-size: clamp(46px, 5vw, 68px);
  line-height: 0.98;
}

.phase-editorial__row--ethos .phase-editorial__heading p {
  max-width: 780px;
  margin-inline: auto;
  color: var(--slate);
  font-size: clamp(21px, 1.85vw, 28px);
  font-weight: 300;
  line-height: 1.34;
}

.cosd-ethos {
  position: relative;
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.1vw, 30px);
  padding-top: 0;
}

.cosd-ethos__bridge-copy {
  position: relative;
  z-index: 4;
  width: min(820px, 92%);
  margin: clamp(30px, 3.1vw, 44px) auto 0;
  padding: 4px clamp(12px, 1.8vw, 24px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 34%, #ffffff);
  color: var(--slate);
  font-size: clamp(20px, 1.65vw, 26px);
  font-weight: 300;
  line-height: 1.34;
  text-align: center;
}

.cosd-ethos__stage {
  position: relative;
  z-index: 3;
  width: min(390px, 100%);
  height: clamp(560px, 48vw, 640px);
  display: grid;
  place-items: stretch;
  perspective: 1200px;
}

.cosd-ethos__card {
  position: relative;
  grid-area: 1 / 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow:
    0 26px 70px rgba(21, 25, 26, 0.12),
    0 8px 22px rgba(0, 87, 70, 0.07);
  color: var(--slate);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(0.965);
  transform-origin: 50% 56%;
  visibility: hidden;
  transition:
    opacity 680ms ease,
    transform 980ms var(--motion-ease-soft),
    visibility 0s linear 980ms;
  will-change: opacity, transform;
}

.cosd-ethos__card.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  transition:
    opacity 760ms ease,
    transform 1080ms var(--motion-ease-soft),
    visibility 0s linear 0s;
}

.cosd-ethos__card::before {
  display: none;
}

.cosd-ethos__card-top {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 2.7vw, 40px) clamp(26px, 3.1vw, 42px);
  background: #ffffff;
  text-align: center;
}

.cosd-ethos__card h3 {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  color: #005746;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.9vw, 40px);
  font-weight: 500;
  line-height: 1.06;
  text-wrap: balance;
}

.cosd-ethos__card-top p {
  margin: 0;
  color: var(--slate);
  font-size: clamp(16px, 1.34vw, 19px);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

.phase-editorial__row--ethos > .cosd-ethos {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.phase-editorial__row--ethos .cosd-ethos__bridge-copy {
  display: block;
  width: min(1040px, 94%);
  margin: clamp(24px, 2.6vw, 40px) auto clamp(16px, 1.8vw, 26px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--slate);
  font-size: clamp(20px, 1.58vw, 25px);
  font-weight: 400;
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
}

.phase-editorial__row--ethos .cosd-ethos__bridge-copy::before {
  content: "Our How";
  display: block;
  margin-bottom: clamp(12px, 1.3vw, 18px);
  color: #6e9c56;
  font-family: var(--font-sans);
  font-size: clamp(48px, 5.4vw, 78px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.96;
}

.phase-editorial__row--ethos .cosd-ethos__card {
  min-height: 100%;
  border: 1px solid rgba(0, 87, 70, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

.phase-editorial__row--ethos .cosd-ethos__card-top {
  background: transparent;
}

.phase-editorial__row--ethos .cosd-ethos__card-icon {
  width: clamp(142px, 14.4vw, 196px);
  height: clamp(142px, 14.4vw, 196px);
  display: block;
  align-self: center;
  margin: 0 0 clamp(24px, 2.6vw, 34px);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 87, 70, 0.12);
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: transform 1600ms var(--motion-ease-soft);
}

.phase-editorial__row--ethos .cosd-ethos__card:hover .cosd-ethos__card-icon,
.phase-editorial__row--ethos .cosd-ethos__card:focus-within .cosd-ethos__card-icon {
  transform: scale(1.045);
}

.phase-editorial__row--ethos .cosd-ethos__card-kicker {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 24px;
  margin: 0 0 clamp(34px, 4vw, 58px);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(190, 207, 153, 0.24);
  color: rgba(0, 87, 70, 0.78);
  font-size: clamp(10px, 0.76vw, 12px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.phase-editorial__row--ethos .cosd-ethos__card h3 {
  margin-bottom: clamp(12px, 1.2vw, 18px);
  font-size: clamp(28px, 2.55vw, 36px);
  line-height: 1.08;
}

.phase-editorial__row--ethos .cosd-ethos__card-top p {
  color: var(--slate);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.28;
  max-width: 320px;
}

.cosd-ethos__tabs {
  position: relative;
  z-index: 3;
  width: min(760px, 100%);
  margin-top: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, #005746 0%, #2e7d52 62%, #6e9c56 100%);
  box-shadow: 0 16px 44px rgba(0, 87, 70, 0.18);
  overflow: hidden;
}

.cosd-ethos__tab {
  position: relative;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 22px;
  padding: 10px 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font: inherit;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.cosd-ethos__tab span {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.cosd-ethos__tab strong {
  position: relative;
  z-index: 1;
  display: block;
  color: inherit;
  font-size: clamp(12px, 0.86vw, 14px);
  font-weight: 600;
  line-height: 1.12;
}

.cosd-ethos__tab:hover,
.cosd-ethos__tab:focus-visible {
  color: #ffffff;
  transform: translateY(-1px);
}

.cosd-ethos__tab:focus-visible {
  outline: 2px solid #6e9c56;
  outline-offset: 2px;
}

.cosd-ethos__tab.is-active {
  background: #ffffff;
  color: #005746;
  box-shadow: 0 10px 24px rgba(21, 25, 26, 0.12);
}

.cosd-ethos__tab.is-active span {
  color: #005746;
}

@media (prefers-reduced-motion: reduce) {
  .cosd-ethos__card,
  .phase-editorial__row--ethos .cosd-ethos__card-icon,
  .cosd-ethos__tab {
    transition: none;
  }

  .cosd-ethos__card,
  .cosd-ethos__card.is-active {
    transform: none;
  }

  .phase-editorial__row--ethos .cosd-ethos__card:hover .cosd-ethos__card-icon,
  .phase-editorial__row--ethos .cosd-ethos__card:focus-within .cosd-ethos__card-icon {
    transform: none;
  }

}

.model-intro {
  width: min(100%, 1040px);
  margin: 0 auto clamp(54px, 6vw, 88px);
  text-align: center;
}

.model-intro__eyebrow {
  display: block;
  margin: 0 auto clamp(10px, 1.2vw, 16px);
  color: var(--evergreen);
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

.model-intro h1 {
  position: relative;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
  padding-bottom: 0.12em;
  text-wrap: balance;
}

.model-intro h1 .word {
  display: inline-block;
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(-10px, 0, 0);
  animation: headingWordReveal 1300ms var(--motion-ease-soft) forwards;
  animation-delay: calc(180ms + (var(--word-index) * 170ms));
  will-change: opacity, filter, transform;
}

.model-intro h2 {
  width: min(100%, 880px);
  margin: clamp(24px, 2.8vw, 34px) auto 0;
  color: var(--slate);
  font-family: var(--font-body);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 300;
  line-height: 1.52;
  letter-spacing: 0;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  text-wrap: balance;
  animation: introSublineReveal 1500ms var(--motion-ease-soft) 2480ms forwards;
}

.model-section-intro {
  width: min(100%, 1180px);
  margin: 0 auto clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--border);
  padding: clamp(30px, 3.5vw, 46px) clamp(8px, 2vw, 24px) 0;
}

.model-section-intro p {
  width: min(100%, 1120px);
  margin: 0 auto;
  color: var(--evergreen);
  font-size: clamp(20px, 1.65vw, 25px);
  font-weight: 300;
  line-height: 1.48;
  text-align: center;
  text-wrap: balance;
}

.wide-rail {
  width: min(1240px, calc(100% - clamp(54px, 7vw, 116px)));
  min-width: 0;
  margin-inline: auto;
  padding-block: clamp(52px, 7vw, 100px);
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* How We Think page sequence: opening statement, editorial article, then the
   interactive model. Keeping the article inside the shared rail makes all
   five pages follow one narrative order without page-specific positioning. */
.wide-rail > .strategy-article {
  width: min(1180px, 100%);
  padding-top: 0;
}

.wide-rail > .strategy-article + .model-section-intro {
  margin-top: clamp(18px, 2.5vw, 34px);
}

/* Shared model divider: the opening statement breathes above the rule while
   the model plate keeps its existing responsive space below it. */
.wide-rail > .full-model-plate:not([hidden]) {
  border-top: 1px solid rgba(0, 87, 70, 0.22);
}

body[data-page="integrated-enterprise-planning"] .wide-rail + .full-model-plate {
  border-top: 1px solid rgba(0, 87, 70, 0.22);
}

/* Preserve the established editorial gutters after the article moves into
   the shared model rail. These mirror the page-level article breakpoints. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .wide-rail > .strategy-article {
    width: min(980px, calc(100% - 64px));
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .wide-rail > .strategy-article {
    width: calc(100% - 40px);
  }
}

@media (max-width: 760px) {
  .wide-rail > .strategy-article {
    width: min(calc(100% - 36px), 680px);
  }
}

/* Canonical hero/banner pagination. Individual components position this pill;
   its visual and interaction treatment always comes from these shared tokens. */
.hero-pagination,
.home-banner__dots,
.home-story-showcase__dots,
.industry-hero__dots,
.industry-energy-hero__dots,
.adidas-case-hero__dots,
.contact-hero__dots,
.persona-hero__dots {
  display: flex;
  align-items: center;
  gap: var(--hero-pagination-gap);
  padding:
    var(--hero-pagination-padding-block)
    var(--hero-pagination-padding-inline);
  border: var(--hero-pagination-border-width) solid var(--hero-pagination-border);
  border-radius: 999px;
  background: var(--hero-pagination-background);
  box-shadow: var(--hero-pagination-shadow);
  backdrop-filter: var(--hero-pagination-backdrop-filter);
}

.hero-pagination button,
.home-banner__dots button,
.home-story-showcase__dots button,
.industry-hero__dots button,
.industry-energy-hero__dots button,
.adidas-case-hero__dots button,
.contact-hero__dots button,
.persona-hero__dots button {
  width: var(--hero-pagination-dot-size);
  height: var(--hero-pagination-dot-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--hero-pagination-dot-idle);
  cursor: pointer;
  transition:
    width 260ms var(--motion-ease),
    border-radius 260ms var(--motion-ease),
    background 180ms var(--motion-ease),
    transform 180ms var(--motion-ease);
}

.hero-pagination button:hover,
.hero-pagination button:focus-visible,
.home-banner__dots button:hover,
.home-banner__dots button:focus-visible,
.home-story-showcase__dots button:hover,
.home-story-showcase__dots button:focus-visible,
.industry-hero__dots button:hover,
.industry-hero__dots button:focus-visible,
.industry-energy-hero__dots button:hover,
.industry-energy-hero__dots button:focus-visible,
.adidas-case-hero__dots button:hover,
.adidas-case-hero__dots button:focus-visible,
.contact-hero__dots button:hover,
.contact-hero__dots button:focus-visible,
.persona-hero__dots button:hover,
.persona-hero__dots button:focus-visible {
  background: var(--hero-pagination-dot-hover);
  transform: scale(1.15);
}

.hero-pagination button:focus-visible,
.home-banner__dots button:focus-visible,
.home-story-showcase__dots button:focus-visible,
.industry-hero__dots button:focus-visible,
.industry-energy-hero__dots button:focus-visible,
.adidas-case-hero__dots button:focus-visible,
.contact-hero__dots button:focus-visible,
.persona-hero__dots button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.hero-pagination button.is-active,
.home-banner__dots button.is-active,
.home-story-showcase__dots button.is-active,
.industry-hero__dots button.is-active,
.industry-energy-hero__dots button.is-active,
.adidas-case-hero__dots button.is-active,
.contact-hero__dots button.is-active,
.persona-hero__dots button.is-active {
  width: var(--hero-pagination-dot-active-width);
  border-radius: 999px;
  background: var(--hero-pagination-dot-active);
  transform: none;
}

/* Interactive model canvas: script.js coordinates scene, expanded panel, direction, and lightbox classes. These states must change together. */
.closer-module {
  --scene-enter-x: 3.5%;
  --scene-exit-x: -2.5%;
  --module-pad-x: clamp(42px, 4.2vw, 68px);
  --module-pad-y: clamp(58px, 5.5vw, 82px);
  --arrow-inset: clamp(28px, 2.2vw, 36px);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(520px, 52vw, 660px);
  aspect-ratio: 1.9 / 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(21, 25, 26, 0.04);
}

.closer-module[data-direction="previous"] {
  --scene-enter-x: -3.5%;
  --scene-exit-x: 2.5%;
}

.closer-module::after {
  position: absolute;
  z-index: 2;
  content: "";
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 48% 46%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 58%);
  opacity: 0;
  transform: scale(0.94);
}

.closer-module.is-animating::after {
  animation: bannerBlend 1800ms var(--motion-ease-soft) both;
}

.scene-layers,
.scene-layer {
  position: absolute;
  inset: 0;
}

.scene-layer {
  --scene-gradient: var(--nka-gradient-jade-horizon);
  inset: -6%;
  z-index: 0;
  opacity: 0;
  transform: translate3d(var(--scene-enter-x), 0, 0) scale(1.08);
  transform-origin: center;
  transition:
    opacity 1500ms var(--motion-ease-soft),
    transform 1800ms var(--motion-ease-soft);
  will-change: opacity, transform;
}

.scene-layer[data-scene="overview"] {
  inset: 0;
}

.scene-layer.is-active {
  z-index: 2;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: sceneRevealNext 1800ms var(--motion-ease-soft) both;
}

.closer-module[data-direction="previous"] .scene-layer.is-active {
  animation-name: sceneRevealPrevious;
}

.scene-layer.is-exiting {
  z-index: 1;
  opacity: 0;
  transform: translate3d(var(--scene-exit-x), 0, 0) scale(1.045);
}

.scene-layer::before,
.scene-layer::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.scene-layer::before {
  inset: -10%;
  background: var(--scene-gradient);
  background-size: 132% 132%;
  opacity: 0.98;
  animation: sceneDrift 36s ease-in-out infinite alternate;
}

.scene-layer::after {
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 38%, rgba(255, 255, 255, 0.18)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%, rgba(21, 25, 26, 0.08)),
    var(--nka-grain);
  background-size: auto, auto, 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.82;
}

.scene-layer--media picture,
.scene-layer--media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scene-layer--media picture {
  z-index: 0;
}

.scene-layer--media img {
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 2400ms var(--motion-ease-soft);
  will-change: transform;
}

.scene-layer--mobile-media picture {
  display: none;
}

.scene-layer--media[data-scene="overview"] img {
  object-position: center;
}

.scene-layer--media[data-scene="ai-condition"] img {
  object-position: 58% center;
}

.scene-layer--media[data-scene="ai-condition"]::before {
  background: linear-gradient(
    90deg,
    rgba(0, 45, 38, 0.9) 0%,
    rgba(0, 45, 38, 0.84) 34%,
    rgba(0, 45, 38, 0.62) 48%,
    rgba(0, 45, 38, 0.22) 64%,
    transparent 78%
  );
}

.scene-layer--media[data-scene="purpose"] picture,
.scene-layer--media[data-scene="structure"] picture,
.scene-layer--media[data-scene="governance"] picture {
  z-index: 1;
  inset: 12% 12% 12% 46%;
  width: auto;
  height: auto;
}

.scene-layer--media[data-scene="purpose"] img,
.scene-layer--media[data-scene="structure"] img,
.scene-layer--media[data-scene="governance"] img {
  object-fit: contain;
  object-position: center;
}

.scene-layer--media[data-scene="purpose"]::before,
.scene-layer--media[data-scene="structure"]::before,
.scene-layer--media[data-scene="governance"]::before {
  z-index: 0;
  inset: -10%;
  background: linear-gradient(135deg, #005746 0%, #2e7d52 38%, #6e9c56 70%, #becf99 100%);
  background-size: 132% 132%;
  opacity: 1;
  animation: sceneDrift 36s ease-in-out infinite alternate;
}

@media (hover: hover) and (pointer: fine) {
  .closer-module:hover .scene-layer--media.is-active img {
    transform: scale(1.035);
  }

  .closer-module:hover .scene-layer--media[data-scene="purpose"].is-active img,
  .closer-module:hover .scene-layer--media[data-scene="structure"].is-active img,
  .closer-module:hover .scene-layer--media[data-scene="governance"].is-active img {
    transform: scale(1.02);
  }
}

.scene-layer--media::before {
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(247, 244, 238, 0.24), transparent 44%);
  animation: none;
}

.scene-layer--media::after {
  z-index: 2;
  opacity: 0.34;
}

.scene-layer[data-scene="overview"],
.scene-layer[data-scene="purpose"] {
  --scene-gradient: var(--nka-gradient-jade-horizon);
}

.scene-layer[data-scene="structure"] {
  --scene-gradient: var(--nka-gradient-moss-field);
}

.scene-layer[data-scene="governance"] {
  --scene-gradient: var(--nka-gradient-slate-grove);
}

.scene-layer[data-scene="experience"] {
  inset: 0;
  --scene-gradient: linear-gradient(
    118deg,
    #f9e2d8 0%,
    #f5c2b2 42%,
    #efb5a8 72%,
    #f6d7ce 100%
  );
}

.scene-layer[data-scene="systems"] {
  inset: 0;
  --scene-gradient: linear-gradient(
    112deg,
    #d9eaf5 0%,
    #a8cde4 30%,
    #78afd4 62%,
    #eaf4fa 100%
  );
}

.scene-floating-art {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.scene-floating-art img {
  width: 100%;
  height: auto;
  display: block;
}

.scene-floating-art--experience,
.scene-floating-art--systems {
  top: 50%;
  right: 7%;
  width: clamp(280px, 36%, 500px);
  transform: translateY(-50%);
  transition: transform 900ms var(--motion-ease);
}

.scene-floating-art--experience {
  right: 12%;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .closer-module:hover .scene-layer[data-scene="experience"].is-active .scene-floating-art--experience,
  .closer-module:hover .scene-layer[data-scene="systems"].is-active .scene-floating-art--systems {
    transform: translateY(-50%) scale(1.045);
  }
}

.scene-layer[data-scene="ai-condition"] {
  --scene-gradient: linear-gradient(135deg, #005746 0%, #6e9c56 52%, #becf99 100%);
}

.scene-layer[data-scene="design"] {
  --scene-gradient: var(--nka-gradient-jade-horizon);
}

.scene-layer[data-scene="impact"] {
  --scene-gradient: var(--nka-gradient-muted-shell);
}

.scene-layer[data-scene="implement"] {
  --scene-gradient: var(--nka-gradient-gold-garden);
}

.panel-close {
  position: absolute;
  z-index: 5;
  top: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  width: var(--close-control-size);
  height: var(--close-control-size);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  color: var(--color-brand);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 260ms ease,
    color var(--motion-fast) var(--motion-ease),
    transform 260ms ease,
    background var(--motion-fast) var(--motion-ease);
}

.closer-module[data-expanded="true"] .panel-close {
  opacity: 1;
  transform: scale(1);
}

.model-reference {
  position: absolute;
  z-index: 4;
  right: clamp(22px, 2.5vw, 38px);
  bottom: clamp(66px, 5vw, 78px);
  width: clamp(86px, 7.5vw, 112px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 7px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 2px #2e7d52,
    0 14px 34px rgba(21, 25, 26, 0.16);
  padding: 0;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.88);
  transition:
    opacity 440ms ease 180ms,
    transform 700ms var(--motion-ease) 120ms;
}

.mobile-overview-copy {
  display: none;
}

.model-pagination {
  display: none;
}

.model-reference img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: 31% center;
}

.model-reference__label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: max-content;
  padding: 9px 14px;
  border-radius: 10px;
  background: #2e7d52;
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(21, 25, 26, 0.16);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.model-reference__label::before {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #2e7d52;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.closer-module[data-expanded="true"] .model-reference {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.model-reference:focus-visible,
.model-lightbox__close:focus-visible {
  outline: 3px solid rgba(190, 207, 153, 0.9);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .closer-module[data-expanded="true"] .model-reference:hover {
    transform: translateY(0) scale(1.045);
  }
}

/* Enlarged model overlay: JavaScript owns visibility and scroll/focus coordination; CSS owns the overlay and transition presentation. */
.model-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  background: rgba(21, 25, 26, 0.42);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 360ms ease,
    visibility 0s linear 360ms;
}

.model-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  animation: nka-modal-backdrop-enter var(--modal-backdrop-enter) var(--modal-motion-ease) both;
}

.model-lightbox.is-open.is-closing {
  pointer-events: none;
  animation: nka-modal-backdrop-exit var(--modal-backdrop-exit) var(--modal-motion-ease) both;
}

body.model-viewer-open {
  overflow: hidden;
}

.model-lightbox__surface {
  position: relative;
  width: min(96vw, 1800px);
  max-height: calc(100dvh - clamp(28px, 4vw, 72px));
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(235, 229, 218, 0.9);
  border-radius: clamp(18px, 2vw, 26px);
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(21, 25, 26, 0.28);
  transform: translateY(16px) scale(0.965);
  transition: transform 620ms var(--motion-ease-soft);
}

.model-lightbox.is-open .model-lightbox__surface {
  transform: translateY(0) scale(1);
  animation: nka-modal-panel-enter var(--modal-panel-enter) var(--modal-motion-ease) both;
}

.model-lightbox.is-open.is-closing .model-lightbox__surface {
  animation: nka-modal-panel-exit var(--modal-panel-exit) var(--modal-motion-ease) both;
}

.model-lightbox__surface > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.model-lightbox__close {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  width: var(--close-control-size);
  height: var(--close-control-size);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  color: var(--color-brand);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.model-lightbox__close span,
.model-lightbox__close span::before {
  width: var(--close-control-mark);
  height: var(--close-control-stroke);
  border-radius: 999px;
  background: currentColor;
}

.model-lightbox__close span {
  position: relative;
  display: block;
  transform: rotate(45deg);
}

.model-lightbox__close span::before {
  position: absolute;
  content: "";
  inset: 0;
  transform: rotate(90deg);
}

.model-signature {
  min-height: 58px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px clamp(8px, 1vw, 16px) 0;
  color: var(--evergreen);
  text-align: right;
  pointer-events: none;
}

.model-signature span {
  color: #6e9c56;
  font-size: clamp(8px, 0.65vw, 10px);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.model-signature strong {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 600;
  line-height: 1.08;
  white-space: nowrap;
}

.panel-close:hover,
.model-lightbox__close:hover {
  background: var(--color-brand-accent);
  color: var(--color-text-inverse);
}

.closer-module[data-expanded="true"] .panel-close:hover {
  transform: scale(1);
}

.panel-arrows button:hover {
  background: #ffffff;
}

.panel-close:focus-visible,
.model-lightbox__close:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.panel-close:disabled,
.panel-arrows button:disabled {
  pointer-events: none;
}

.panel-close span,
.panel-close span::before {
  width: var(--close-control-mark);
  height: var(--close-control-stroke);
  border-radius: 999px;
  background: currentColor;
}

.panel-close span {
  position: relative;
  display: block;
  transform: rotate(45deg);
}

.panel-close span::before {
  position: absolute;
  content: "";
  inset: 0;
  transform: rotate(90deg);
}

.look-nav {
  position: absolute;
  z-index: 4;
  left: var(--module-pad-x);
  top: 50%;
  width: min(440px, 37vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transform: translateY(-50%);
  transition: transform 920ms var(--motion-ease-soft);
}

.look-tab {
  --tab-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(247, 244, 238, 0.78));
  position: relative;
  z-index: 4;
  min-height: 44px;
  max-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  padding: 0 22px 0 15px;
  background: #ffffff;
  color: #005746;
  box-shadow: inset 0 0 0 1px rgba(21, 25, 26, 0.05);
  font: inherit;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition:
    background 620ms var(--motion-ease-soft),
    min-height 400ms ease-in-out,
    max-height 400ms ease-in-out,
    padding 400ms ease-in-out,
    opacity 120ms ease-in-out,
    transform 400ms ease-in-out,
    box-shadow 400ms ease-in-out;
}

.look-tab::before {
  position: absolute;
  content: "";
  inset: 0;
  background: var(--tab-gradient);
  opacity: 0;
  transition: opacity 720ms var(--motion-ease-soft);
}

.look-tab::after {
  position: absolute;
  content: "";
  inset: 0;
  background-image: var(--nka-grain);
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 720ms var(--motion-ease-soft);
}

.look-tab > span {
  position: relative;
  z-index: 1;
}

.look-divider {
  width: 278px;
  max-width: 100%;
  height: 1px;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-block: 8px;
  background: rgba(0, 87, 70, 0.16);
  opacity: 0;
}

.closer-module[data-panel="purpose"] .look-divider,
.closer-module[data-panel="governance"] .look-divider,
.closer-module[data-panel="ai-condition"] .look-divider,
.closer-module[data-panel="design"] .look-divider {
  background: rgba(255, 255, 255, 0.34);
}

.look-tab[data-panel="purpose"] {
  --tab-gradient: linear-gradient(135deg, rgba(0, 87, 70, 0.28) 0%, rgba(110, 156, 86, 0.48) 48%, rgba(248, 209, 193, 0.68) 100%);
}

.look-tab[data-panel="structure"] {
  --tab-gradient: linear-gradient(135deg, rgba(243, 182, 165, 0.58) 0%, rgba(247, 241, 226, 0.76) 48%, rgba(190, 207, 153, 0.58) 100%);
}

.look-tab[data-panel="governance"] {
  --tab-gradient: linear-gradient(135deg, rgba(51, 73, 94, 0.34) 0%, rgba(0, 87, 70, 0.38) 48%, rgba(175, 201, 180, 0.62) 100%);
}

.look-tab[data-panel="experience"] {
  --tab-gradient: linear-gradient(135deg, rgba(247, 244, 238, 0.88) 0%, rgba(243, 182, 165, 0.5) 45%, rgba(149, 175, 203, 0.62) 100%);
}

.look-tab[data-panel="systems"] {
  --tab-gradient: linear-gradient(135deg, rgba(248, 209, 193, 0.72) 0%, rgba(247, 241, 226, 0.78) 48%, rgba(149, 175, 203, 0.5) 100%);
}

.look-tab[data-panel="ai-condition"] {
  --tab-gradient: linear-gradient(135deg, rgba(0, 87, 70, 0.32) 0%, rgba(110, 156, 86, 0.54) 52%, rgba(190, 207, 153, 0.7) 100%);
}

.look-tab[data-panel="design"] {
  --tab-gradient: linear-gradient(135deg, rgba(0, 87, 70, 0.28) 0%, rgba(190, 207, 153, 0.64) 54%, rgba(247, 241, 226, 0.76) 100%);
}

.look-tab[data-panel="impact"] {
  --tab-gradient: linear-gradient(135deg, rgba(149, 175, 203, 0.48) 0%, rgba(247, 241, 226, 0.82) 48%, rgba(243, 182, 165, 0.56) 100%);
}

.look-tab[data-panel="implement"] {
  --tab-gradient: linear-gradient(135deg, rgba(184, 150, 90, 0.54) 0%, rgba(248, 209, 193, 0.66) 42%, rgba(190, 207, 153, 0.64) 72%, rgba(110, 156, 86, 0.5) 100%);
}

.look-tab[data-panel="fabric"] {
  --tab-gradient: linear-gradient(135deg, rgba(0, 87, 70, 0.3) 0%, rgba(110, 156, 86, 0.58) 50%, rgba(247, 241, 226, 0.74) 100%);
}

.look-tab:not(.is-selected):hover {
  background: var(--content);
  box-shadow: inset 0 0 0 1px rgba(21, 25, 26, 0.06), 0 12px 26px rgba(21, 25, 26, 0.09);
  transform: translateX(3px);
}

.look-tab:not(.is-selected):hover::before,
.look-tab:not(.is-selected):hover::after {
  opacity: 0;
}

.look-tab.is-selected {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(110, 156, 86, 0.34), 0 16px 34px rgba(21, 25, 26, 0.08);
}

.look-tab.is-selected::before {
  opacity: 0;
}

.look-tab.is-selected::after {
  opacity: 0;
}

.look-tab[aria-expanded="true"] {
  min-height: 0;
  max-height: 0;
  padding-block: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  box-shadow: none;
}

.look-tab[aria-expanded="true"]::before {
  opacity: 0.86;
}

.look-tab[aria-expanded="true"]::after {
  opacity: 0.14;
}

@media (min-width: 761px) {
  .closer-module[data-expanded="true"] .look-nav {
    gap: 6px;
  }

  .closer-module[data-expanded="true"] .look-tab:not([aria-expanded="true"]) {
    min-height: 38px;
    max-height: 38px;
    gap: 11px;
    padding-inline: 13px 18px;
    font-size: clamp(12px, 1.08vw, 15px);
  }

  .closer-module[data-expanded="true"] .look-divider {
    margin-block: 5px;
  }

  .closer-module[data-expanded="true"] .look-tab:not([aria-expanded="true"]) .look-icon {
    width: 18px;
    height: 18px;
  }

  .closer-module[data-expanded="true"] .look-tab:not([aria-expanded="true"]) .look-icon::before,
  .closer-module[data-expanded="true"] .look-tab:not([aria-expanded="true"]) .look-icon::after {
    width: 10px;
    height: 1.5px;
  }
}

.look-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #6e9c56;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.9;
}

.look-tab.is-selected .look-icon {
  border-color: transparent;
  background: #ffffff;
}

.look-icon::before,
.look-icon::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 520ms var(--motion-ease-soft), opacity 440ms var(--motion-ease-soft);
}

.look-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.look-tab[aria-expanded="true"] .look-icon::after,
.look-tab.is-selected:not([aria-expanded="true"]) .look-icon::before,
.look-tab.is-selected:not([aria-expanded="true"]) .look-icon::after {
  opacity: 0;
}

/* The active model narrative is moved between tabs by script.js; its collapsed and expanded styles must not depend on a fixed DOM parent. */
.story-panel {
  --story-ease: cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  z-index: 3;
  left: auto;
  top: auto;
  width: min(100%, 430px);
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: -6px 0;
  padding: 0 clamp(24px, 2.7vw, 34px);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(21, 25, 26, 0.1), inset 0 0 0 1px rgba(235, 229, 218, 0.72);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -6px, 0) scale(0.98);
  transition:
    min-height 650ms var(--story-ease),
    max-height 650ms var(--story-ease),
    margin 650ms var(--story-ease),
    opacity 250ms ease-in-out,
    padding 650ms var(--story-ease),
    transform 400ms ease-in-out;
}

.closer-module[data-expanded="true"] .story-panel {
  min-height: 180px;
  max-height: 220px;
  margin: 2px 0 4px;
  padding-block: 20px;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.closer-module.is-switching .story-panel {
  min-height: 0;
  max-height: 0;
  margin: -6px 0;
  padding-block: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -6px, 0) scale(0.98);
  transition-duration: 600ms, 600ms, 600ms, 300ms, 600ms, 400ms;
}

.story-copy {
  width: 100%;
  margin: 0;
  color: rgba(21, 25, 26, 0.9);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.48;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 300ms ease-in-out,
    transform 400ms ease-in-out;
}

.closer-module[data-expanded="true"] .story-copy {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 600ms ease-in-out 220ms,
    transform 400ms ease-in-out 80ms;
}

.story-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.story-body {
  display: block;
}

.story-marker {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin-right: 0;
  border-radius: 50%;
  background: #6e9c56;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-1px);
}

.story-marker[hidden] {
  display: none;
}

.story-copy strong {
  font-weight: 600;
}

.panel-arrows {
  position: absolute;
  z-index: 4;
  left: var(--arrow-inset);
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translate3d(-10px, -50%, 0);
  transition: opacity 260ms ease, transform 260ms ease;
}

.closer-module[data-expanded="true"] .panel-arrows {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

.panel-arrows button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #6e9c56;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: background 260ms ease, transform 260ms ease;
}

.panel-arrows button:hover {
  transform: scale(1.04);
}

.panel-arrows span {
  width: 11px;
  height: 11px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(2px) rotate(225deg);
}

.panel-arrows button:last-child span {
  transform: translateY(-2px) rotate(45deg);
}

@keyframes sceneDrift {
  0% {
    transform: translate3d(-1%, -1%, 0) scale(1);
  }

  50% {
    transform: translate3d(1.5%, 1%, 0) scale(1.04);
  }

  100% {
    transform: translate3d(-0.5%, 2%, 0) scale(1.02);
  }
}

@keyframes sceneRevealNext {
  0% {
    opacity: 0;
    transform: translate3d(3.5%, 0, 0) scale(1.08);
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sceneRevealPrevious {
  0% {
    opacity: 0;
    transform: translate3d(-3.5%, 0, 0) scale(1.08);
  }

  62% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes bannerBlend {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  42% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes headingWordReveal {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(-10px, 0, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes introSublineReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

}

/* The stage keeps generous outer gutters on laptops and compact desktops.
   Tighten only the header across that intermediate range so the complete
   navigation and contact action remain inside the white page canvas. */
@media (min-width: 1025px) and (max-width: 1600px) {
  .header-rail {
    width: calc(100% - 32px);
    gap: 14px;
  }

  .brand-link {
    width: 132px;
  }

  .site-nav {
    min-width: 0;
    gap: clamp(7px, 0.7vw, 11px);
  }

  .nav-link,
  .contact-link {
    font-size: 13px;
  }

  .nav-link {
    gap: 5px;
  }

  .contact-link {
    padding-inline: 14px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .stage {
    --stage-pad: clamp(18px, 3.4vw, 40px);
    padding: 0 var(--stage-pad);
  }

  .header-rail {
    width: min(1040px, calc(100% - clamp(38px, 6vw, 64px)));
    gap: 28px;
  }

  .brand-link {
    width: 138px;
  }

  .site-nav {
    gap: clamp(9px, 1.2vw, 16px);
  }

  .nav-link,
  .contact-link {
    font-size: 13px;
  }

  .contact-link {
    min-height: 40px;
    padding-inline: 16px;
  }

  .industry-mega {
    width: min(1040px, calc(100% - clamp(38px, 6vw, 64px)));
  }

  .what-mega {
    width: min(1040px, calc(100% - clamp(38px, 6vw, 64px)));
  }

  .about-mega {
    width: min(1040px, calc(100% - clamp(38px, 6vw, 64px)));
  }

  .about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-card {
    min-height: 470px;
  }

  .what-mega__layout {
    grid-template-columns: 1fr;
  }

  .what-mega__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    margin: clamp(18px, 2vw, 24px) 0 0;
    border-top: 1px solid rgba(0, 87, 70, 0.18);
    border-left: 0;
    padding: clamp(18px, 2vw, 24px) 0 0;
  }

  .what-hub-card {
    min-height: 230px;
  }

  .what-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .implementation-feature {
    min-height: 260px;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
    grid-template-rows: 1fr auto;
  }

  .implementation-feature__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .implementation-feature__media {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .implementation-feature__link {
    grid-column: 1;
    grid-row: 2;
  }

  .industry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .industry-card {
    min-height: 330px;
  }

  .wide-rail {
    width: min(980px, calc(100% - clamp(64px, 8vw, 104px)));
  }

  .closer-module {
    --module-pad-x: clamp(42px, 5vw, 60px);
    --module-pad-y: clamp(58px, 6vw, 76px);
    --arrow-inset: clamp(26px, 3vw, 32px);
    aspect-ratio: auto;
    min-height: clamp(800px, 92vw, 880px);
  }

  .look-nav {
    left: var(--module-pad-x);
    top: 50%;
    width: min(360px, 46vw);
    gap: 8px;
  }

  .look-tab {
    min-height: 44px;
    padding-inline: 15px 22px;
    font-size: clamp(13px, 1.45vw, 15px);
  }

  .story-panel {
    width: min(100%, 350px);
  }

  .closer-module[data-expanded="true"] .story-panel {
    max-height: 250px;
  }

  .scene-layer--media[data-scene="purpose"] picture,
  .scene-layer--media[data-scene="structure"] picture,
  .scene-layer--media[data-scene="governance"] picture {
    inset: 14% 20% 14% 53%;
  }

  .panel-arrows {
    left: var(--arrow-inset);
  }

  .phase-editorial {
    width: min(980px, calc(100% - 64px));
  }

  .strategy-article {
    width: min(980px, calc(100% - 64px));
  }

  .full-model-plate {
    width: min(980px, calc(100% - 64px));
  }

  .strategy-article__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .strategy-article__header {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .strategy-article__header p {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    max-width: 680px;
    margin-top: 14px;
  }

  .phase-editorial__row {
    grid-template-columns: minmax(250px, 360px) minmax(0, 1fr);
    gap: 40px;
  }

  .phase-editorial__row--ethos {
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 0;
  }

  .cosd-ethos {
    min-height: auto;
  }

  .phase-editorial__row--ethos {
    aspect-ratio: auto;
    min-height: 0;
  }

  .cosd-ethos__stage {
    width: min(380px, 74vw);
    height: clamp(610px, 72vw, 690px);
  }

  .cosd-ethos__tabs {
    width: min(720px, 100%);
  }

  .phase-editorial__row--ethos .cosd-ethos__card {
    min-height: 100%;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .model-intro h2 {
    width: min(100%, 720px);
    font-size: 21px;
    line-height: 1.5;
  }

  .model-section-intro p {
    width: min(100%, 720px);
    font-size: 21px;
    line-height: 1.5;
  }

  .closer-module {
    min-height: clamp(720px, 92vw, 880px);
  }

  .model-signature {
    min-height: 82px;
    justify-content: center;
    gap: 12px;
    padding-top: 24px;
    text-align: center;
  }

  .model-signature span {
    font-size: 11px;
  }

  .model-signature strong {
    font-size: 22px;
  }

  .look-nav {
    top: 58px;
    transform: none;
  }

  .scene-layer--media[data-scene="purpose"] picture,
  .scene-layer--media[data-scene="structure"] picture,
  .scene-layer--media[data-scene="governance"] picture {
    inset: auto 12% 16% auto;
    width: 46%;
    height: auto;
    aspect-ratio: 1;
  }

}

@media (min-width: 901px) and (max-width: 1024px) {
  .look-nav {
    top: 8%;
    width: min(300px, 38vw);
    transform: none;
  }

  .scene-layer--media[data-scene="purpose"] picture,
  .scene-layer--media[data-scene="structure"] picture,
  .scene-layer--media[data-scene="governance"] picture {
    inset: auto 12% 16% auto;
    width: 46%;
    height: auto;
    aspect-ratio: 1;
  }
}

@media (max-width: 1024px) {
  /* Opening a compact menu changes body overflow, which can make a sticky
     header snap back to its document position in mobile browsers. Pin the
     complete header shell to the viewport while any menu is open so its
     drawer and mega panels remain visible at the user's current scroll depth. */
  body:is(.mobile-nav-open, .mega-open) .site-header {
    position: fixed;
    top: 0;
    left: 50%;
    width: min(1520px, calc(100vw - (2 * var(--stage-pad))));
    transform: translateX(-50%);
  }

  body.compact-menu-scroll-locked {
    position: fixed;
    top: calc(-1 * var(--compact-menu-scroll-y));
    right: 0;
    left: 0;
    width: 100%;
  }

  body.mega-open {
    overflow: hidden;
  }

  body {
    padding-bottom: 82px;
  }

  .back-to-top {
    left: 24px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }

  .site-footer {
    margin-bottom: -82px;
    padding-bottom: 82px;
  }

  .quick-menu {
    top: auto;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    align-items: flex-end;
    transform: translateX(-50%);
  }

  .quick-menu__trigger {
    width: auto;
    min-width: 132px;
    height: 48px;
    min-height: 48px;
    flex-direction: row;
    gap: 9px;
    padding: 9px 17px 9px 10px;
  }

  .quick-menu__trigger-icon {
    width: 28px;
    height: 28px;
  }

  .quick-menu__trigger-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    max-width: 205px;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .quick-menu__panel {
    top: auto;
    right: 50%;
    bottom: 58px;
    /* Use more of the available phone width, while retaining a clear edge around the drawer. */
    width: min(420px, calc(100vw - 32px));
    max-height: min(68vh, 430px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    border-radius: 22px;
    padding: 17px;
    transform: translate(50%, 16px) scale(0.98);
    transform-origin: center bottom;
  }

  /* Reusable mobile modal scroller: content remains swipe-scrollable while
     native rails and arrow buttons never break a rounded panel edge. */
  .nka-touch-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .nka-touch-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Touch layouts scroll by swipe: never let native rails or arrow buttons break rounded panel edges. */
  .quick-menu__panel,
  .industry-mega,
  .what-mega,
  .about-mega,
  .family-mega,
  .consent-dialog__inner {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .quick-menu__panel::-webkit-scrollbar,
  .industry-mega::-webkit-scrollbar,
  .what-mega::-webkit-scrollbar,
  .about-mega::-webkit-scrollbar,
  .family-mega::-webkit-scrollbar,
  .consent-dialog__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .quick-menu:hover .quick-menu__panel {
    opacity: 0;
    visibility: hidden;
    transform: translate(50%, 16px) scale(0.98);
  }

  .quick-menu:focus-within .quick-menu__panel,
  .quick-menu.is-open .quick-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translate(50%, 0) scale(1);
  }

  .quick-menu__link {
    min-height: 50px;
    grid-template-columns: 56px minmax(0, 1fr) 17px;
    font-size: 12px;
  }

  .quick-menu__thumb {
    width: 50px;
  }

  .stage {
    --stage-pad: 12px;
    --header-height: 76px;
    padding: 0 var(--stage-pad);
  }

  .site-header,
  .header-rail {
    min-height: 76px;
  }

  .header-rail {
    width: calc(100% - 40px);
  }

  .brand-link {
    width: 132px;
  }

  .menu-toggle {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 50%;
    padding: 0;
    background: var(--content);
    color: #6e9c56;
    cursor: pointer;
  }

  .menu-toggle::before,
  .menu-toggle span {
    width: 18px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: #6e9c56;
    transform-origin: center;
    translate: 0 0;
    rotate: 0deg;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition:
      opacity 100ms var(--motion-ease),
      scale 120ms var(--motion-ease),
      rotate 160ms var(--motion-ease),
      translate 160ms var(--motion-ease) 140ms;
  }

  .menu-toggle::before {
    content: "";
  }

  .menu-toggle[aria-expanded="true"]::before {
    translate: 0 6px;
    rotate: 45deg;
    transition:
      translate 140ms var(--motion-ease),
      rotate 220ms var(--motion-ease) 110ms;
  }

  .menu-toggle span:first-child {
    visibility: visible;
    scale: 1 1;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    opacity: 0;
    visibility: hidden;
    scale: 0 1;
    transition:
      opacity 90ms var(--motion-ease),
      scale 110ms var(--motion-ease),
      visibility 0s linear 110ms;
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    translate: 0 -6px;
    rotate: -45deg;
    transition:
      translate 140ms var(--motion-ease),
      rotate 220ms var(--motion-ease) 110ms;
  }

  .site-nav {
    position: absolute;
    z-index: 4;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0 20px;
    border-bottom: 1px solid transparent;
    background: #ffffff;
    box-shadow: 0 22px 36px rgba(21, 25, 26, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      max-height 480ms var(--motion-ease),
      padding 360ms var(--motion-ease),
      opacity 220ms ease,
      transform 360ms var(--motion-ease),
      visibility 0s linear 480ms;
  }

  .site-nav.is-open {
    height: calc(100svh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-block: 14px 22px;
    border-bottom-color: var(--border);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .nav-link {
    min-height: 48px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(235, 229, 218, 0.72);
    padding-inline: 6px;
    font-size: var(--type-mobile-nav-label-size);
  }

  .mega-trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(110, 156, 86, 0.14);
  }

  /* Mobile dropdowns remain within the open navigation drawer so their
     contents expand naturally instead of appearing as detached popovers. */
  .nav-dropdown {
    width: 100%;
    border-bottom: 1px solid rgba(235, 229, 218, 0.72);
  }

  .nav-dropdown__trigger {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    border-bottom: 0;
    padding-inline: 6px;
    text-align: left;
  }

  .nav-dropdown__menu,
  .nav-dropdown--signal .nav-dropdown__menu {
    position: static;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    gap: 2px;
    border: 0;
    border-radius: 0;
    padding: 0 8px;
    background: #f8faf6;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition:
      max-height 420ms var(--motion-ease),
      padding 300ms var(--motion-ease),
      visibility 0s linear 420ms;
  }

  .nav-dropdown.is-open .nav-dropdown__menu {
    max-height: 420px;
    padding-block: 10px 13px;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav-dropdown__menu a,
  .nav-dropdown__item {
    min-height: 40px;
    padding-inline: 12px;
  }

  .industry-mega,
  .what-mega,
  .about-mega {
    top: 100%;
    width: 100%;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    transform: translate3d(-50%, -8px, 0);
  }

  .industry-mega.is-open,
  .what-mega.is-open,
  .about-mega.is-open {
    transform: translate3d(-50%, 0, 0);
  }

  .what-mega__inner {
    padding: 72px 20px 28px;
  }

  .about-mega__inner {
    padding: 66px 20px 28px;
  }

  .about-mega__heading {
    min-height: 0;
    margin-bottom: 18px;
    padding-right: 64px;
  }

  .about-mega__heading h2 {
    font-size: 24px;
  }

  .about-mega__close {
    top: 20px;
    right: 20px;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-card {
    min-height: 184px;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .about-card__media {
    width: 128px;
    height: 100%;
    min-height: 184px;
  }

  .about-card__body {
    min-height: 184px;
    padding: 17px;
  }

  .about-card__body strong {
    margin-bottom: 8px;
    font-size: 18px;
    color: #2e7d52;
    line-height: 1.14;
  }

  .about-card__link {
    padding-top: 12px;
    font-size: 13px;
  }

  .what-mega__close {
    top: 20px;
    right: 20px;
  }

  .industry-mega__close,
  .hold-mega__close,
  .signal-mega__close {
    top: 20px;
    right: 20px;
  }

  .what-mega__layout,
  .what-grid {
    grid-template-columns: 1fr;
  }

  .what-mega__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
  }

  .what-hub-card {
    min-height: 220px;
  }

  .what-hub-card strong {
    font-size: 27px;
  }

  .what-card {
    min-height: 144px;
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
  }

  .what-card__media {
    width: 124px;
    height: 100%;
    min-height: 144px;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }

  .what-card__body {
    min-height: 144px;
    padding: 17px;
  }

  .what-card__body strong {
    font-size: 18px;
    color: #2e7d52;
    line-height: 1.14;
  }

  .what-card__description {
    margin-top: 9px;
  }

  .implementation-feature {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
  }

  .implementation-feature__copy,
  .implementation-feature__media,
  .implementation-feature__link {
    grid-column: 1;
  }

  .implementation-feature__copy {
    grid-row: 1;
    padding-right: 0;
  }

  .implementation-feature__media {
    grid-row: 2;
    min-height: 220px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .implementation-feature__link {
    grid-row: 3;
    align-self: stretch;
  }

  .industry-mega__inner {
    padding: 22px 20px 28px;
  }

  .industry-mega__heading {
    margin-bottom: 18px;
  }

  .industry-mega__heading h2 {
    font-size: 24px;
  }

  .industry-grid {
    grid-template-columns: 1fr;
  }

  .industry-card {
    min-height: 0;
  }

  .industry-card__media {
    height: 140px;
  }

  .industry-card__content {
    padding: 18px;
  }

  /* Canonical mobile mega-menu cards: every menu uses the Industries stacked-card pattern. */
  .about-card,
  .what-card,
  .family-card,
  .industry-card {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--mega-menu-card-radius);
    background: var(--content);
  }

  .industry-card {
    border-radius: var(--mega-menu-card-radius);
    background: var(--card-surface-background);
  }

  .about-card__media,
  .what-card__media,
  .family-card__preview,
  .industry-card__media {
    width: 100%;
    height: 140px;
    min-height: 140px;
    flex: 0 0 140px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background:
      radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
      linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
    box-shadow: none;
  }

  .what-card__media img,
  .family-card__preview img,
  .industry-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .family-card__preview--cosd {
    border-bottom: 0;
    background: #f2f2f0;
  }

  .family-card__preview--iep,
  .family-card__preview--sdpf,
  .family-card__preview:has(img[src*="iep-mega-tablet-v1.png"]) {
    padding: 0;
    background: #f2f2f0;
  }

  .family-card__preview--cosd img,
  .family-card__preview--iep img,
  .family-card__preview--sdpf img,
  .family-card__preview:has(img[src*="iep-mega-tablet-v1.png"]) img {
    position: absolute;
    inset: 0;
    min-height: 100%;
    border-radius: inherit;
    object-fit: cover;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .about-card__body,
  .what-card__body,
  .industry-card__content {
    min-height: 0;
    flex: 1 1 auto;
    padding: 18px;
  }

  .family-card {
    padding: 0;
  }

  .family-card strong {
    margin: 0;
    padding: 18px 18px 0;
    color: #2e7d52;
    font-size: var(--type-mega-card-title);
    line-height: 1.14;
  }

  .family-card small {
    margin: 12px 0 0;
    padding: 0 18px;
    color: var(--slate);
    font-size: var(--type-mega-card-copy-size);
    font-weight: var(--type-mega-card-copy-weight);
    line-height: var(--type-mega-card-copy-line-height);
  }

  .family-card__link {
    margin-top: 16px;
    padding: 0 18px 18px;
  }

  .about-card__body strong,
  .what-card__body strong,
  .industry-card h3 {
    font-size: var(--type-mega-card-title);
  }

  .mega-scrim {
    inset: var(--header-height) 0 0;
  }

  .contact-link {
    min-height: 46px;
    margin-top: 14px;
    font-size: 15px;
  }

  .site-footer {
    min-height: 440px;
    margin-top: 44px;
  }

  .footer-inner {
    width: calc(100% - 48px);
    padding-block: 48px 28px;
  }

  .footer-top {
    min-height: 210px;
    display: block;
  }

  .footer-brand {
    width: 66px;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 28px 36px;
    margin-top: 34px;
    padding-top: 0;
    text-align: left;
  }

  .footer-nav__group {
    align-items: flex-start;
  }

  .footer-proservices {
    align-self: flex-start;
    margin: 30px 0 18px;
    justify-content: flex-start;
    padding: 24px 0 18px;
  }

  .footer-proservices__copy {
    width: calc(100% - 50px);
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 13px;
    padding-top: 20px;
  }

  .footer-bottom address {
    justify-content: flex-start;
    font-size: 11px;
    text-align: left;
  }

  .footer-address-break {
    display: initial;
  }

  .footer-legal {
    justify-content: flex-start;
    gap: 24px;
  }

  .model-intro {
    margin-bottom: 46px;
  }

  .model-intro h1 {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.22;
  }

  .model-intro h2 {
    font-size: 16px;
    line-height: 1.5;
  }

  .wide-rail {
    width: min(100%, calc(100% - 22px));
  }

  .closer-module {
    --module-pad-x: 28px;
    --module-pad-y: 56px;
    --arrow-inset: 18px;
    aspect-ratio: auto;
    min-height: 720px;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
  }

  .look-nav {
    display: contents;
  }

  .look-tab,
  .look-divider {
    display: none;
  }

  .scene-layer--media[data-scene="purpose"] picture,
  .scene-layer--media[data-scene="structure"] picture,
  .scene-layer--media[data-scene="governance"] picture {
    inset: 46px 16% 214px;
    width: auto;
    height: auto;
  }

  .scene-layer--media[data-scene="ai-condition"] {
    inset: 0;
  }

  .scene-layer--media[data-scene="ai-condition"] img {
    object-position: center;
  }

  .scene-layer--media[data-scene="ai-condition"]::before {
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 87, 70, 0.86) 0%,
      rgba(0, 87, 70, 0.54) 24%,
      rgba(0, 87, 70, 0.18) 48%,
      transparent 68%
    );
  }

  .scene-layer--mobile-media picture,
  .scene-layer--mobile-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .scene-layer--mobile-media img {
    object-fit: cover;
    object-position: center;
  }

  .scene-layer--mobile-media[data-scene="design"] img,
  .scene-layer--mobile-media[data-scene="impact"] img {
    height: calc(100% + 14px);
    object-position: center top;
  }


  .look-tab {
    min-height: 44px;
    padding-inline: 14px 18px;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }

  .look-icon {
    width: 22px;
    height: 22px;
  }

  .story-panel {
    position: absolute;
    z-index: 6;
    left: 18px;
    bottom: 54px;
    width: calc(100% - 36px);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
  }

  .closer-module[data-expanded="true"] .story-panel {
    min-height: 148px;
    max-height: 188px;
    margin: 0;
    padding: 20px 22px;
  }

  .story-copy {
    font-size: 14px;
    line-height: 1.42;
  }

  .story-heading {
    margin-bottom: 9px;
  }

  .story-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    text-align: center;
    transform: none;
  }

  .mobile-overview-copy {
    position: absolute;
    z-index: 6;
    left: 18px;
    bottom: 54px;
    width: calc(100% - 36px);
    display: block;
    border-radius: var(--radius-card);
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 48px rgba(21, 25, 26, 0.1);
    color: rgba(21, 25, 26, 0.9);
    backdrop-filter: blur(16px);
    transition: opacity 320ms ease, transform 500ms var(--motion-ease);
  }

  .mobile-overview-copy strong {
    display: block;
    color: var(--evergreen);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
  }

  .mobile-overview-copy p {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.42;
  }

  .closer-module:not([data-panel="overview"]) .mobile-overview-copy {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }

  .model-pagination {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transform: translateX(-50%);
  }

  .model-pagination button {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: width 260ms ease, border-radius 260ms ease, background 260ms ease;
  }

  .model-pagination button.is-active {
    width: 28px;
    border-radius: 999px;
    background: var(--pagination-active-color);
  }

  .model-pagination button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
  }

  .panel-close {
    display: none;
  }

  .model-reference {
    top: 18px;
    right: 18px;
    bottom: auto;
    width: 80px;
    display: grid;
    border-width: 4px;
    box-shadow: 0 12px 28px rgba(21, 25, 26, 0.18);
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .closer-module[data-expanded="true"] .model-reference {
    display: grid;
    opacity: 1;
    transform: none;
  }

  .model-reference__label {
    top: calc(100% + 6px);
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 9px;
  }

  .model-reference__label::before {
    display: none;
  }

  .model-signature {
    min-height: 58px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px 0;
    text-align: center;
  }

  .model-signature strong {
    font-size: 15px;
  }

  .phase-editorial {
    width: calc(100% - 40px);
    padding-top: 52px;
  }

  .strategy-article {
    width: calc(100% - 40px);
    padding-block: 50px 22px;
  }

  .full-model-plate {
    width: calc(100% - 24px);
    padding-block: 24px 22px;
  }

  .full-model-plate__inner {
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
  }

  .full-model-plate img {
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .full-model-plate--strategy .full-model-plate__inner {
    padding: 0;
  }

  .full-model-plate--strategy img {
    width: 900px;
    min-width: 900px;
  }

  .strategy-article__inner,
  .strategy-article__body {
    grid-template-columns: 1fr;
  }

  .strategy-article__inner {
    gap: 30px;
    padding-block: 38px;
  }

  .strategy-article__header {
    grid-template-columns: 1fr;
  }

  .strategy-article__body {
    gap: 24px;
  }

  .strategy-article__body > .strategy-article__column:first-child,
  .strategy-article__body > .strategy-article__column:nth-of-type(2),
  .strategy-article__rail,
  .strategy-article__closing {
    grid-column: auto;
    grid-row: auto;
  }

  .strategy-article__rail {
    grid-template-rows: auto;
    gap: 24px;
  }

  .strategy-article__visual {
    min-height: 180px;
  }

  .strategy-article__header h2 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .strategy-article__header p {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    margin-top: 14px;
    font-size: 20px;
    line-height: 1.52;
  }

  .strategy-article__column p,
  .strategy-article__closing {
    font-size: var(--type-editorial-body-mobile-size);
    line-height: 1.65;
  }

  .strategy-article__callout {
    min-height: 0;
    padding: 17px 18px;
  }

  .strategy-article__callout p {
    font-size: 18px;
  }

  .phase-editorial__row {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 54px;
  }

  .phase-editorial__heading h2 {
    font-size: 38px;
  }

  .phase-editorial__heading p {
    max-width: 310px;
    margin-top: 14px;
  }

  .phase-editorial__copy p {
    font-size: 16px;
    line-height: 1.65;
  }

  .panel-arrows {
    display: none;
  }

  .closer-module[data-expanded="true"] .panel-arrows {
    transform: none;
  }
}

@media (min-width: 600px) and (max-width: 1024px) {
  .quick-menu__panel {
    width: min(520px, calc(100vw - 56px));
  }

  .quick-menu__link > .quick-menu__text {
    white-space: nowrap;
  }

  .scene-floating-art--experience,
  .scene-floating-art--systems {
    top: 70px;
    right: auto;
    left: 50%;
    width: min(78%, 600px);
    transform: translateX(-50%);
  }

  .closer-module {
    min-height: 980px;
  }

  .scene-layer--media[data-scene="purpose"] picture,
  .scene-layer--media[data-scene="structure"] picture,
  .scene-layer--media[data-scene="governance"] picture {
    inset: auto;
    top: 120px;
    left: 50%;
    width: 58%;
    height: auto;
    aspect-ratio: 1;
    transform: translateX(-50%);
  }

  .story-panel,
  .mobile-overview-copy {
    bottom: 100px;
  }

  .model-pagination {
    bottom: 60px;
  }
}

@media (max-width: 599px) {
  .scene-floating-art--experience,
  .scene-floating-art--systems {
    top: 100px;
    right: 50%;
    width: min(82%, 330px);
    transform: translateX(50%);
  }
}

/* Team and legal pages flow directly into the shared footer. */
.team-page .site-footer,
.legal-page .site-footer {
  margin-top: 0;
}

/* Prevent the outer gradient from appearing as a separate band below the
   footer when mobile browser chrome changes the available viewport height. */
@media (max-width: 760px) {
  html,
  body,
  .stage {
    background: #005746;
  }

  .stage {
    --stage-pad: 0px;
    padding-inline: 0;
  }

  .page {
    width: 100%;
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }

  .site-footer {
    margin-bottom: 0;
  }

  .phase-editorial,
  .strategy-article,
  .full-model-plate {
    width: min(100% - 36px, 680px);
  }

  .phase-editorial__row,
  .phase-editorial__row--ethos {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 42px;
  }

  .phase-editorial__row--ethos {
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  .phase-editorial__row--ethos::before {
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
  }

  .phase-editorial__heading p {
    max-width: none;
  }

  .cosd-ethos {
    min-height: auto;
    padding-top: 0;
  }

  .cosd-ethos__bridge-copy {
    width: 100%;
    margin-top: 22px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1.42;
    text-align: left;
  }

  .phase-editorial__row--ethos .cosd-ethos__bridge-copy {
    width: min(100%, 420px);
    margin: 26px auto 26px;
    font-size: 18px;
    line-height: 1.24;
    text-align: center;
  }

  .phase-editorial__row--ethos .cosd-ethos__bridge-copy::before {
    margin-bottom: 12px;
    font-size: 42px;
  }

  .cosd-ethos__card {
    min-height: 0;
  }

  .cosd-ethos__stage {
    width: min(100%, 380px);
    height: clamp(620px, 162vw, 680px);
  }

  .cosd-ethos__card-top {
    min-height: 0;
    padding: 28px 22px 30px;
  }

  .cosd-ethos__card h3 {
    font-size: 30px;
    line-height: 1.06;
  }

  .cosd-ethos__card-top p {
    font-size: 16px;
    line-height: 1.3;
  }

  .phase-editorial__row--ethos {
    aspect-ratio: auto;
    gap: 26px;
    padding: 22px 16px 30px;
  }

  .phase-editorial__model-tile {
    width: 100%;
  }

  .phase-editorial__row--ethos .cosd-ethos__card {
    min-height: 0;
  }

  .phase-editorial__row--ethos .cosd-ethos__card-icon {
    width: 150px;
    height: 150px;
  }

  .cosd-ethos__tabs {
    width: 100%;
    margin-top: 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px;
    border-radius: 24px;
    scroll-snap-type: x mandatory;
  }

  .cosd-ethos__tab {
    min-width: 124px;
    min-height: 66px;
    scroll-snap-align: center;
  }
}

/* Image-template evaluation layer
   Template image -> directional shade -> grain -> live HTML content. */
:root {
  --nka-template-hero: url("assets/image-templates/01-hero-desktop-2560x1440.png?v=mega-label-readable-1");
  --nka-template-mega-service: url("assets/image-templates/06-mega-service-1600x900.png?v=mega-label-readable-1");
  --nka-template-mega-about: url("assets/image-templates/07-mega-about-1800x900.png?v=mega-label-readable-1");
  --nka-template-implementation: url("assets/image-templates/10-implementation-mobile-1200x1200.png?v=implementation-square-1");
  --nka-template-editorial: url("assets/image-templates/11-editorial-desktop-1920x1200.png?v=how-hold-placeholder-1");
  --nka-template-icon: url("assets/image-templates/19-icon-ethos-1024x1024.png?v=mega-label-readable-1");
}

/* Shared landing heroes use the art-directed template as their bottom layer.
   Their existing ::before remains the dark fade behind readable copy. */
.about-landing-hero,
.ethos-hero {
  background-color: #005746;
  background-image: var(--nka-template-hero);
  background-position: center;
  background-size: cover;
}

/* Real imagery replaces the reusable grid template completely. Add this class
   whenever a landing hero receives art-directed photo or illustration media.
   The Ethos hero always has responsive artwork, so its loading fallback is a
   clean brand gradient rather than the old specification grid. */
.about-landing-hero.has-hero-artwork {
  background-image: none;
}

.ethos-hero {
  background-image: linear-gradient(145deg, #005746 0%, #2e7d52 54%, #6e9c56 100%);
}

/* Industry pages are now moving to art-directed photography. Keep the
   template grid off from the very first paint, before JavaScript mounts it. */
.industry-landing-page .about-landing-hero {
  background-image: none;
}

.about-landing-hero::after,
.ethos-hero::after {
  z-index: 1;
  background: var(--nka-grain);
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.14;
  transform: none;
  animation: none;
}

/* Image-free product-family cards get a real 16:9 test asset while their
   existing highlight and hover layers remain in place. */
.family-card__preview:not(:has(img)),
.quick-menu__thumb:empty {
  background-color: #005746;
  background-image: var(--nka-template-mega-service);
  background-position: center;
  background-size: cover;
}

/* The functional-personas destination previews the real floating-card wall.
   Two evenly spaced rows keep the small preview legible. Each sequence is
   duplicated in the DOM so its continuous horizontal loop has no hard jump. */
.signal-mega .family-card__preview--personas {
  display: block;
  padding: 0;
  background: linear-gradient(145deg, #064f40 0%, #19704e 58%, #5c9657 100%);
}

.signal-mega .family-card__preview--personas::before {
  display: block;
  z-index: 3;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 50, 41, 0.18), transparent 38%, rgba(219, 235, 205, 0.08));
  opacity: 1;
  pointer-events: none;
  transform: none;
}

.signal-mega .family-card__preview--personas::after {
  position: absolute;
  z-index: 4;
  content: "";
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(0, 50, 41, 0.42), transparent 18%, transparent 82%, rgba(0, 50, 41, 0.46));
  pointer-events: none;
}

.signal-mega .family-card__persona-lane {
  position: absolute;
  z-index: 2;
  left: 0;
  display: flex;
  width: max-content;
  height: calc((100% - 24px) / 2);
  flex-direction: row;
  gap: 8px;
  animation: signalMegaPersonaGlide var(--motion-mega-persona-glide) linear infinite;
  will-change: transform;
}

.signal-mega .family-card__persona-lane--1 {
  top: 8px;
}

.signal-mega .family-card__persona-lane--2 {
  bottom: 8px;
  animation-direction: reverse;
  animation-duration: var(--motion-mega-persona-glide-reverse);
}

.signal-mega .family-card__preview--personas .family-card__persona-lane img {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 1px solid rgba(238, 242, 230, 0.72);
  border-radius: 9px;
  box-shadow: 0 7px 14px rgba(0, 50, 41, 0.22);
  object-fit: cover;
  transform: none;
  transition: none;
}

.signal-mega .family-card:hover .family-card__preview--personas img {
  transform: none;
}

@keyframes signalMegaPersonaGlide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 4px), 0, 0); }
}

/* Approved Market Signals & Shifts artwork. This selector is intentionally
   shared by the repeated global navigation on every route. */
.signal-mega .family-mega__grid--signal .family-card:nth-child(2) .family-card__preview {
  background-color: #071a14;
  background-image: url("assets/optimized/market-signals-shifts-mega.webp?v=hq1");
  background-position: center 46%;
  background-size: cover;
}

.signal-mega .family-mega__grid--signal .family-card:nth-child(2) .family-card__preview::before {
  display: none;
}

/* Technology now has dedicated gallery artwork. Its visible-image treatment
   is declared with the other approved Industries imagery below. */
.industry-card--technology .industry-card__media {
  background-color: #efe5d4;
}

/* Functional Persona Signals uses one animated collection feature and a
   compact role index. This is shared by every instance of the global menu. */
.signal-mega .family-mega__grid--signal {
  gap: clamp(16px, 1.8vw, 26px);
}

.signal-mega__quick-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0;
}

.signal-mega__quick-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px 16px;
  border-bottom: 1px solid var(--border);
}

.signal-mega__quick-heading strong {
  color: var(--evergreen);
  font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.signal-mega__quick-heading small {
  max-width: 250px;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

.signal-mega__persona-carousel {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding-top: 0;
}

.signal-mega__persona-viewport {
  position: relative;
  /* Pages crossfade in place; allow the shared card shadow to extend
     past the viewport without clipping. Inactive pages remain hidden. */
  overflow: visible;
  flex: 1;
  min-height: 286px;
}

.signal-mega__persona-track {
  position: relative;
  height: 100%;
}

.signal-mega__persona-page {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 620ms cubic-bezier(0.37, 0, 0.63, 1);
}

.signal-mega__persona-page.is-active,
.signal-mega__persona-page.is-leaving {
  visibility: visible;
}

.signal-mega__persona-page.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.signal-mega__persona-page.is-leaving {
  opacity: 0;
  z-index: 1;
}

.signal-mega__quick-link {
  position: relative;
  display: flex;
  overflow: hidden;
  min-width: 0;
  min-height: 286px;
  flex-direction: column;
  border-width: 1px;
  border-style: solid;
  color: var(--evergreen);
  text-decoration: none;
}

.signal-mega__quick-media {
  position: relative;
  display: block;
  overflow: hidden;
  height: 204px;
  flex: 0 0 204px;
  background: #e6ede2;
  isolation: isolate;
}

.signal-mega__quick-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 560ms ease 80ms,
    transform var(--card-media-zoom-duration) var(--card-media-zoom-ease);
}

.signal-mega__quick-media.is-loaded img {
  opacity: 1;
  transform: scale(1);
}



@media (hover: hover) and (pointer: fine) {
  .signal-mega__quick-link:hover .signal-mega__quick-media.is-loaded img {
    transform: scale(var(--card-media-zoom-scale));
  }
}

.signal-mega__quick-body {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 11px 10px 10px;
}

.signal-mega__quick-acronym {
  display: inline-flex;
  min-width: 48px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf1e3;
  color: var(--evergreen);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.045em;
}

.signal-mega__quick-label {
  color: var(--slate);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.signal-mega__quick-body > svg,
.signal-mega__quick-body > i {
  width: var(--mega-card-cta-arrow-size);
  height: var(--mega-card-cta-arrow-size);
  flex: 0 0 auto;
  color: var(--mega-card-cta-color);
  transition: transform var(--mega-card-cta-motion-duration) var(--mega-card-cta-motion-ease);
}

.signal-mega__quick-link:hover .signal-mega__quick-body > svg,
.signal-mega__quick-link:focus-visible .signal-mega__quick-body > svg {
  transform: translateX(var(--mega-card-cta-arrow-hover-distance));
}

@media (min-width: 821px) {
  .signal-mega .family-mega__grid--signal {
    grid-template-columns: minmax(390px, 0.88fr) minmax(0, 1.12fr);
    grid-auto-rows: minmax(286px, auto);
  }

  .signal-mega .family-mega__grid--signal .signal-mega__feature {
    display: grid;
    min-height: 286px;
    height: auto;
    grid-template-columns: minmax(190px, 42%) minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: 0;
    padding: 0;
  }

  .signal-mega .family-mega__grid--signal .signal-mega__feature .family-card__preview {
    width: 100%;
    height: 100%;
    min-height: 286px;
    grid-column: 1;
    grid-row: 1 / -1;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 0;
  }

  .signal-mega__feature-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--color-surface);
    transition: background-color 480ms var(--motion-ease-soft);
  }

  .signal-mega .family-mega__grid--signal .signal-mega__feature .signal-mega__feature-body > strong {
    grid-row: 1;
    padding: 28px 28px 0;
    font-size: clamp(22px, 1.55vw, 28px);
  }

  .signal-mega .family-mega__grid--signal .signal-mega__feature .signal-mega__feature-body > small {
    grid-row: 2;
    margin-top: 12px;
    padding: 0 28px;
    font-size: 15px;
    line-height: 1.48;
  }

  .signal-mega .family-mega__grid--signal .signal-mega__feature .signal-mega__feature-body > .family-card__link {
    grid-row: 3;
    margin-top: 0;
    padding: 18px 28px 24px;
  }

  .signal-mega__feature-body > strong,
  .signal-mega__feature-body > small,
  .signal-mega__feature-body > .family-card__link {
    transition: color 480ms var(--motion-ease-soft);
  }

}

@media (max-width: 1100px) and (min-width: 821px) {
  .signal-mega .family-mega__grid--signal {
    grid-template-columns: minmax(330px, 0.92fr) minmax(0, 1.08fr);
  }

  .signal-mega__persona-page { gap: 8px; }
}

@media (max-width: 820px) {
  .signal-mega__feature-body {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .signal-mega__quick-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .signal-mega__quick-heading small {
    max-width: none;
    text-align: left;
  }

  .signal-mega__persona-page {
    grid-template-columns: 1fr;
  }

  .signal-mega__persona-viewport {
    min-height: 296px;
  }

  .signal-mega__quick-link {
    min-height: 92px;
    flex-direction: row;
  }

  .signal-mega__quick-media {
    width: 92px;
    height: auto;
    flex: 0 0 92px;
  }

  .signal-mega__quick-body {
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-mega__persona-page {
    transition: none;
  }

  .signal-mega .family-card__persona-lane {
    animation: none;
  }

  .signal-mega .family-card__persona-lane--2 {
    transform: translateX(calc(-50% - 4px));
  }

  .signal-mega__persona-track,
  .signal-mega__feature-body,
  .signal-mega__feature-body > strong,
  .signal-mega__feature-body > small,
  .signal-mega__feature-body > .family-card__link,
  .signal-mega__quick-media img {
    animation: none;
    transition: none;
  }

  .signal-mega__persona-page.is-active .signal-mega__quick-link,
  .signal-mega__persona-page.is-leaving .signal-mega__quick-link {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .signal-mega__quick-link .signal-mega__quick-media.is-loaded img,
  .signal-mega__quick-link:hover .signal-mega__quick-media.is-loaded img {
    transform: none;
  }
}

/* During the sizing audit, every mega-menu media family shows its matching
   grid template. Existing real images remain in the DOM and can be restored
   simply by removing this evaluation block. */
.what-card__media {
  background-color: #005746;
  background-image: var(--nka-template-mega-service);
  background-position: center;
  background-size: cover;
}

.about-card__media {
  background-color: #005746;
  background-image: var(--nka-template-mega-about);
  background-position: center;
  background-size: cover;
}

.industry-card__media {
  background-color: #005746;
  background-image: var(--nka-template-mega-service);
  background-position: center;
  background-size: cover;
}

.implementation-feature__media {
  background-color: #005746;
  background-image: var(--nka-template-implementation);
  background-position: center;
  background-size: cover;
  aspect-ratio: 1 / 1;
}

.what-card__media > img,
.about-card__media > img,
.industry-card__media > img,
.implementation-feature__media > img {
  opacity: 0 !important;
}

/* Keep both collaborators and the illuminated physical network table legible
   in the shared shallow mega-menu crop. */
.industry-card--technology .industry-card__media {
  background-image: none;
}

.industry-card--technology .industry-card__media > img {
  opacity: 1 !important;
  object-position: center 50%;
}

/* Preferred Partners has approved imagery: keep all three collaborators in
   the wide mega-menu crop while the remaining About cards retain templates. */
.about-card--partners .about-card__media {
  background-image: none;
}

.about-card--partners .about-card__media > img {
  opacity: 1 !important;
  object-position: center 18%;
}

/* About Us and Team use supplied gallery photography; keep images visible
   above the legacy placeholder treatment with a centered menu crop. */
.about-card--about .about-card__media,
.about-card--team .about-card__media {
  background: var(--color-surface);
}

.about-card--about .about-card__media > img,
.about-card--team .about-card__media > img {
  opacity: 1 !important;
  object-position: center;
}

/* Our Ethos uses the approved Context sculpture staged in a real gallery. */
.about-card--ethos .about-card__media {
  background: var(--color-surface);
}

.about-card--ethos .about-card__media > img {
  opacity: 1 !important;
  object-position: center 42%;
}

/* Energy is the first industry with approved imagery: reveal its dedicated
   mega-menu visual while the remaining industries retain their sizing grids. */
.industry-card--energy .industry-card__media {
  background-image: none;
}

.industry-card--energy .industry-card__media > img {
  opacity: 1 !important;
  object-position: 58% center;
}

/* Retail has an approved jewelry image for its shared Industries mega-menu card. */
.industry-card--retail .industry-card__media {
  background-image: none;
}

.industry-card--retail .industry-card__media > img {
  opacity: 1 !important;
  object-position: center;
}

/* The Financial Services artwork is already a native 16:9 composition. A
   slightly right-and-low focal point keeps the leader's face and the material
   interaction legible together in the mega menu's shallow image window. */
.industry-card--finance .industry-card__media {
  background-image: none;
}

.industry-card--finance .industry-card__media > img {
  opacity: 1 !important;
  object-position: 60% 56%;
}

/* Government of Canada now has approved artwork for the shared Industries
   mega-menu card, so it follows the same visible-image treatment. */
.industry-card--government .industry-card__media {
  background-image: none;
}

.industry-card--government .industry-card__media > img {
  opacity: 1 !important;
  object-position: center;
}

/* Four art-directed Energy images crossfade behind the existing text-safe
   overlay. The sequence is decorative; the heading and copy carry context. */
.industry-energy-hero {
  background-image: none;
  background-color: #063f32;
}

.industry-energy-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.industry-energy-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms var(--motion-ease-soft), transform 7s var(--motion-ease-soft);
  will-change: opacity, transform;
}

.industry-energy-hero__media img.is-active {
  opacity: 1;
  transform: scale(1.08);
}

/* Keep the full figure visible in the solar-disc composition at wide hero
   ratios, where cover cropping otherwise trims the lower edge of the frame. */
.industry-energy-hero__media picture:first-child img {
  object-position: center 68%;
}

/* This ribbon frame carries its focal detail on the title side. Mirror it so the
   left-hand copy fade stays clear and the figure remains visible. */
.industry-energy-hero__media picture:nth-child(2) img {
  transform: scale(1.03);
}

.industry-energy-hero__media picture:nth-child(2) img.is-active {
  transform: scale(1.08);
}

.industry-hero__dots,
.industry-energy-hero__dots,
.adidas-case-hero__dots {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 5vw, 78px);
  bottom: clamp(24px, 4vw, 58px);
}

.industry-financial-hero {
  margin-top: -1px;
  background-color: #0a4033;
  background-image: none;
}

.industry-financial-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.industry-financial-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 69% center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms var(--motion-ease-soft), transform 7s var(--motion-ease-soft);
}

.industry-financial-hero__media img.is-active {
  opacity: 0.88;
  transform: scale(1.08) translate3d(-1.4%, 0.6%, 0);
}

.industry-financial-hero__media picture:nth-child(2) img {
  object-position: 66% top;
  transform-origin: center top;
}

.industry-financial-hero__media picture:nth-child(2) img.is-active {
  transform: scale(1.04);
}

/* The growth portrait is top-anchored. Keep its motion above the frame so the
   green hero ground cannot appear as a horizontal seam during activation. */
@media (min-width: 1101px) {
  .industry-financial-hero__media picture:nth-child(2) img {
    --ken-burns-from-y: -2px;
    --ken-burns-to-y: -10px;
  }
}

.industry-government-hero {
  margin-bottom: 0;
  background-color: #0a4033;
  /* Real industry artwork replaces the design-template grid. The content
     fade and grain remain on the hero pseudo-elements above the artwork. */
  background-image: none;
}

.industry-government-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.industry-government-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 58% center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms var(--motion-ease-soft), transform 7s var(--motion-ease-soft);
}

.industry-government-hero__media img.is-active {
  opacity: 0.88;
  transform: scale(1.08) translate3d(-1.2%, 0.4%, 0);
}

.industry-government-hero__media picture:first-child img {
  object-position: center;
}

.industry-government-hero__media picture:first-child img.is-active {
  transform: scale(1.06);
}

.industry-government-hero__media picture:nth-child(2) img {
  object-position: 82% top;
  transform-origin: center top;
}

.industry-government-hero__media picture:nth-child(2) img.is-active {
  transform: scale(1.035) translate3d(0.5%, 0, 0);
}

/* This frame is anchored to its top edge. Keep its shared Ken Burns drift
   above the frame so the hero background never peeks through as a thin line. */
@media (min-width: 1101px) {
  .industry-government-hero__media picture:nth-child(2) img {
    --ken-burns-from-y: -2px;
    --ken-burns-to-y: -10px;
  }
}

.industry-technology-hero {
  background-color: #0a4033;
  background-image: none;
}

.industry-technology-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.industry-technology-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 60% center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms var(--motion-ease), transform 7s var(--motion-ease-soft);
}

.industry-technology-hero__media img.is-active {
  opacity: 0.86;
  transform: scale(1.08) translate3d(-1.3%, 0.5%, 0);
}

.industry-technology-hero__media picture:first-child img {
  /* Anchor the collaboration photograph above the copy so faces survive wide hero crops. */
  object-position: right top;
  transform: scale(1.03);
}

.industry-technology-hero__media picture:first-child img.is-active {
  transform: scale(1.08) translate3d(-1.3%, 0.5%, 0);
}

.industry-technology-hero__media picture:nth-child(2) img {
  object-position: 61% center;
}

.industry-technology-hero__media picture:nth-child(2) img.is-active {
  transform: scale(1.08) translate3d(1.1%, -0.4%, 0);
}

.industry-retail-hero {
  background-color: #0a4033;
  background-image: none;
}

.industry-retail-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.industry-retail-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 61% center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms var(--motion-ease-soft), transform 7s var(--motion-ease-soft);
}

.industry-retail-hero__media picture:first-child img,
.industry-retail-hero__media picture:nth-child(2) img,
.industry-retail-hero__media picture:nth-child(3) img {
  transform: scaleX(-1) scale(1.03);
}

.industry-retail-hero__media img.is-active {
  opacity: 0.86;
  transform: scale(1.08) translate3d(-1.2%, 0.5%, 0);
}

.industry-retail-hero__media picture:first-child img.is-active,
.industry-retail-hero__media picture:nth-child(2) img.is-active,
.industry-retail-hero__media picture:nth-child(3) img.is-active {
  transform: scaleX(-1) scale(1.08) translate3d(-1.2%, 0.5%, 0);
}

/* The opening Retail composition is art-directed with the subject on the
   right. Keep it in that orientation so the left-side copy has clear space. */
.industry-retail-hero__media picture:first-child img {
  transform: scale(1.03);
}

.industry-retail-hero__media picture:first-child img.is-active {
  transform: scale(1.08) translate3d(-1.2%, 0.5%, 0);
}

/* Mirror the gallery frame so its subject and architectural focal point sit
   to the right of the persistent Retail copy. */
.industry-retail-hero__media picture:nth-child(2) img {
  transform: scale(1.03);
}

.industry-retail-hero__media picture:nth-child(2) img.is-active {
  transform: scale(1.08) translate3d(-1.2%, 0.5%, 0);
}

/* Mirror the installation frame so its visual weight clears the copy column
   and resolves on the right, consistently at every responsive size. */
.industry-retail-hero__media picture:nth-child(3) img {
  transform: scale(1.03);
}

.industry-retail-hero__media picture:nth-child(3) img.is-active {
  transform: scale(1.08) translate3d(-1.2%, 0.5%, 0);
}

/* The opening frame is a wide, copy-safe composition. Lift its focal point so
   the artisan's face and the object remain visible in the shallow hero. */
.industry-retail-hero__media picture:first-child img {
  object-position: 50% 10%;
}

/* Shared industry-hero motion contract. Home and every industry carousel now
   consume the same Ken Burns scale, drift, duration, and easing tokens. A
   keyframe makes the opening slide animate on first paint and restarts the
   motion whenever another slide becomes active. */
:is(
  .industry-energy-hero__media,
  .industry-financial-hero__media,
  .industry-government-hero__media,
  .industry-technology-hero__media,
  .industry-retail-hero__media
) img {
  --ken-burns-from-scale: var(--hero-ken-burns-from-scale);
  --ken-burns-from-x: var(--hero-ken-burns-from-x);
  --ken-burns-from-y: var(--hero-ken-burns-from-y);
  --ken-burns-to-scale: var(--hero-ken-burns-to-scale);
  --ken-burns-to-x: var(--hero-ken-burns-to-x);
  --ken-burns-to-y: var(--hero-ken-burns-to-y);
}

:is(
  .industry-energy-hero__media,
  .industry-financial-hero__media,
  .industry-government-hero__media,
  .industry-technology-hero__media,
  .industry-retail-hero__media
) img.is-active {
  animation: shared-hero-ken-burns var(--hero-ken-burns-pass-duration) var(--hero-ken-burns-pass-ease) both;
}

@keyframes shared-hero-ken-burns {
  from {
    transform: translate3d(
        var(--ken-burns-from-x),
        var(--ken-burns-from-y),
        0
      )
      scale(var(--ken-burns-from-scale));
  }

  to {
    transform: translate3d(
        var(--ken-burns-to-x),
        var(--ken-burns-to-y),
        0
      )
      scale(var(--ken-burns-to-scale));
  }
}

@media (max-width: 820px) {
  .industry-energy-hero__dots {
    right: 18px;
    bottom: 22px;
  }

  /* The financial portrait needs a shallower stage and a top-anchored zoom on
     phones so the subject's face remains inside the crop. */
  .industry-financial-hero {
    min-height: clamp(520px, 72svh, 580px);
  }

  .industry-financial-hero__media img {
    object-position: 72% center;
  }

  .industry-financial-hero__media picture:nth-child(2) img {
    object-position: 68% top;
    transform-origin: center top;
  }

  .industry-financial-hero__media picture:nth-child(2) img.is-active {
    transform: scale(1.04);
  }

  .industry-government-hero__media img {
    object-position: 60% center;
  }

  .industry-government-hero__media picture:nth-child(2) img {
    object-position: 76% top;
  }

  .industry-government-hero__media picture:nth-child(2) img.is-active {
    transform: scale(1.025);
  }

  .industry-technology-hero__media img {
    object-position: 63% center;
  }

  .industry-retail-hero__media img {
    object-position: 64% center;
  }

  .industry-retail-hero__media picture:first-child img {
    object-position: 90% top;
  }

  /* Preserve the same right-weighted composition on mobile. */
  .industry-retail-hero__media picture:first-child img {
    transform: scale(1.03);
  }

  .industry-retail-hero__media picture:first-child img.is-active {
    transform: scale(1.08) translate3d(-1.2%, 0.5%, 0);
  }

  /* The portrait installation crop is already supplied flipped. */
  .industry-retail-hero__media picture:nth-child(3) img {
    transform: scale(1.03);
  }

  .industry-retail-hero__media picture:nth-child(3) img.is-active {
    transform: scale(1.08) translate3d(-1.2%, 0.5%, 0);
  }

}

@media (min-width: 721px) and (max-width: 1100px) {
  :is(
    .industry-energy-hero__media,
    .industry-financial-hero__media,
    .industry-government-hero__media,
    .industry-technology-hero__media,
    .industry-retail-hero__media
  ) img {
    --ken-burns-from-scale: var(--hero-banner-tablet-motion-from-scale);
    --ken-burns-from-x: 0px;
    --ken-burns-from-y: 0px;
    --ken-burns-to-scale: var(--hero-banner-tablet-motion-to-scale);
    --ken-burns-to-x: 0px;
    --ken-burns-to-y: 0px;
    transform-origin: var(--hero-banner-tablet-motion-transform-origin);
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry-energy-hero__media img { transition: none; }
  .industry-financial-hero__media img { animation: none; }
  .industry-government-hero__media img { animation: none; }
  .industry-technology-hero__media img { transition: none; }
  .industry-retail-hero__media img { animation: none; }
  :is(
    .industry-energy-hero__media,
    .industry-financial-hero__media,
    .industry-government-hero__media,
    .industry-technology-hero__media,
    .industry-retail-hero__media
  ) img.is-active {
    animation: none;
  }
}


/* Three-phase motion inside the How We Implement feature. The same calm,
   reversible panel rhythm is used by the site's longer-form carousel modules. */
.implementation-feature__media {
  overflow: hidden;
}

.implementation-feature__panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 500ms var(--motion-ease), transform 720ms var(--motion-ease-soft);
}

.implementation-feature__panel.is-active {
  opacity: 1;
  transform: scale(1);
}

.implementation-feature__panel img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  animation: none;
}

.implementation-feature__panel img.implementation-feature__image--series {
  width: 164%;
  height: 168%;
  object-fit: contain !important;
  opacity: 1;
}

.implementation-feature__panel--implement {
  background:
    linear-gradient(145deg, rgba(0, 87, 70, 0.94), rgba(110, 156, 86, 0.9)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

.implementation-feature__panel-grid {
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(217, 205, 128, 0.72);
  border-radius: 2px;
}

.implementation-feature__tabs {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  gap: 6px;
}

.implementation-feature__tabs button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: width 220ms var(--motion-ease), background-color 220ms var(--motion-ease);
}

.implementation-feature__tabs button.is-active {
  width: 20px;
  background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .implementation-feature__panel,
  .implementation-feature__tabs button {
    transition: none;
  }
}

/* The implementation carousel moves the whole banner. There is deliberately
   no secondary media tile: each phase owns the complete card surface. */
.implementation-feature[data-implementation-carousel] {
  position: relative;
  display: block;
  padding: 0;
  isolation: isolate;
  container-type: inline-size;
}

.implementation-feature__full-panel {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  padding: clamp(24px, 2.4vw, 34px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(4%) scale(0.985);
  transition: opacity 440ms var(--motion-ease), transform 620ms var(--motion-ease-soft);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(145deg, #00624e 0%, #287d59 58%, #79a65c 100%);
  background-size: 30px 30px, 30px 30px, auto;
}

.implementation-feature__full-panel::before {
  position: absolute;
  z-index: 0;
  content: "";
  inset: clamp(28px, 8%, 62px) clamp(30px, 9%, 70px);
  border: 1px dashed rgba(218, 201, 111, 0.76);
  pointer-events: none;
}

.implementation-feature__full-panel > * {
  position: relative;
  z-index: 1;
}

.implementation-feature__full-panel.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.implementation-feature__full-panel:nth-of-type(2) {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(145deg, #075943 0%, #3b8759 56%, #86a95e 100%);
  background-size: 30px 30px, 30px 30px, auto;
}

.implementation-feature__full-panel:nth-of-type(3) {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(145deg, rgba(0, 87, 70, 0.96), rgba(110, 156, 86, 0.92));
  background-size: 30px 30px, 30px 30px, auto;
}

.implementation-feature__full-panel .implementation-feature__copy {
  align-self: start;
}

.implementation-feature__full-panel .implementation-feature__link {
  align-self: end;
  justify-self: stretch;
}

@container (min-width: 650px) {
  .implementation-feature__full-panel .implementation-feature__copy {
    width: min(100%, 470px);
    padding-right: 0;
    gap: 18px;
  }

  .implementation-feature__full-panel .implementation-feature__copy strong {
    font-size: clamp(26px, 2vw, 34px);
  }

  .implementation-feature__full-panel .implementation-feature__copy > span {
    max-width: 100%;
    font-size: clamp(16px, 1.25vw, 19px);
  }

  .implementation-feature__full-panel .implementation-feature__link {
    width: 210px;
    justify-self: start;
  }
}

.implementation-feature[data-implementation-carousel] > .implementation-feature__tabs {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .implementation-feature__full-panel {
    transition: none;
  }
}

/* How We Hold article rail image: keep the site tint/noise treatment while
   using the sizing placeholder grid as the fallback layer. */
.strategy-article__visual {
  background-color: #005746;
  background-image: var(--nka-template-editorial);
  background-position: center;
  background-size: cover;
}

/* Small legal and consent artwork uses the square template. The dark wash and
   grain are separate pseudo layers so neither needs to be baked into artwork. */
.nka-gradient-banner {
  background-color: #005746;
  background-image: var(--nka-template-icon);
  background-position: center;
  background-size: cover;
}

.nka-gradient-banner::before {
  position: absolute;
  z-index: 1;
  content: "";
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 66, 52, 0.5), rgba(9, 66, 52, 0.08));
}

.nka-gradient-banner::after {
  z-index: 2;
}

@media (max-width: 1100px) {
  :root {
    --nka-template-hero: url("assets/image-templates/02-hero-tablet-2048x1536.png?v=mega-label-readable-1");
  }
}

@media (max-width: 820px) {
  :root {
    --nka-template-hero: url("assets/image-templates/03-hero-mobile-1080x1620.png?v=mega-label-readable-1");
    --nka-template-implementation: url("assets/image-templates/10-implementation-mobile-1200x1200.png?v=implementation-square-1");
  }
}

/* How We Hold family placeholder landing pages. */
.hold-detail-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 12%, rgba(190, 207, 153, 0.22), transparent 30%),
    linear-gradient(180deg, #fbfcf8 0%, #f4f7ee 58%, #edf3e7 100%);
  color: var(--ink);
}

.hold-landing-nav {
  width: min(1180px, calc(100% - clamp(36px, 7vw, 112px)));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 36px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hold-landing-nav img {
  width: clamp(156px, 17vw, 218px);
  height: auto;
  display: block;
}

.hold-landing-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  font-size: 14px;
  font-weight: 600;
}

.hold-landing-nav__links a {
  color: var(--deep-green);
  text-decoration: none;
}

.hold-landing-nav__links a:hover,
.hold-landing-nav__links a:focus-visible {
  color: var(--green);
}

.hold-landing-hero,
.hold-opening,
.hold-related {
  width: min(1180px, calc(100% - clamp(36px, 7vw, 112px)));
  margin-inline: auto;
}

.hold-landing-hero {
  padding: clamp(42px, 7vw, 92px) 0 clamp(32px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.78fr);
  align-items: center;
  gap: clamp(34px, 6vw, 84px);
}

.hold-landing-hero__eyebrow,
.hold-opening__eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hold-landing-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--deep-green);
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.hold-landing-hero__lede {
  max-width: 780px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  color: var(--slate);
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.45;
}

.hold-landing-hero__visual {
  min-height: clamp(280px, 36vw, 468px);
  border: 1px solid rgba(0, 87, 70, 0.12);
  border-radius: var(--radius-card);
  background-color: #005746;
  background-image: var(--nka-template-editorial);
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 70px rgba(0, 55, 44, 0.13);
}

.hold-landing-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

.hold-opening {
  padding: clamp(34px, 5vw, 72px) 0;
  border-top: 1px solid rgba(0, 87, 70, 0.16);
}

.hold-opening__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
}

.hold-opening h2 {
  margin: 0;
  color: var(--deep-green);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.hold-opening__copy {
  display: grid;
  gap: 18px;
}

.hold-opening__copy p {
  margin: 0;
  color: var(--slate);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.62;
}

.hold-related {
  padding: 0 0 clamp(56px, 8vw, 110px);
}

.hold-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hold-related__card {
  min-height: 190px;
  padding: clamp(22px, 2.8vw, 34px);
  border: 1px solid rgba(0, 87, 70, 0.12);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(0, 55, 44, 0.07);
}

.hold-related__card span {
  display: block;
  margin-bottom: 16px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hold-related__card h3 {
  margin: 0 0 12px;
  color: var(--deep-green);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.12;
}

.hold-related__card p {
  margin: 0;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.55;
}

.hold-landing-footer {
  width: min(1180px, calc(100% - clamp(36px, 7vw, 112px)));
  margin: 0 auto;
  padding: 28px 0 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(0, 87, 70, 0.16);
  color: var(--slate);
  font-size: 14px;
}

.hold-landing-footer a {
  color: var(--deep-green);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 900px) {
  .hold-landing-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .hold-landing-hero,
  .hold-opening__grid,
  .hold-related__grid {
    grid-template-columns: 1fr;
  }

  .hold-landing-hero__visual {
    min-height: clamp(240px, 62vw, 420px);
  }
}

@media (max-width: 560px) {
  .hold-landing-nav__links {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
  }
}

/* Global all-caps eyebrow/token normalization.
   Keeps section kickers, mega-menu labels, legal labels, and contact labels
   on the same size + tracking specification. */
.quick-menu__trigger-label,
.quick-menu__eyebrow,
.nav-dropdown__eyebrow,
.nav-dropdown__item small,
.industry-mega__eyebrow,
.strategy-article__eyebrow,
.strategy-article__callout span,
.phase-editorial__heading span,
.hold-landing-hero__eyebrow,
.hold-opening__eyebrow,
.hold-related__card span,
.contact-details__eyebrow,
.contact-form__heading > span,
.contact-details dt,
.office-gallery__caption span,
.legal-hero span,
.legal-kicker,
.not-found-kicker,
.consent-always {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

/* Keep right-side quick-menu labels visually quieter than section eyebrows. */
.quick-menu__trigger-label {
  font-weight: 500;
}

/* Retail landing: keep the route intentionally spare—hero, then one story banner. */
.retail-industry-page .retail-story-feature {
  padding: clamp(20px, 3vw, 48px);
  background: #fbfaf6;
}

.retail-industry-page .retail-story-card {
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  min-height: clamp(320px, 30vw, 430px);
  border-radius: var(--radius-card);
}

.retail-industry-page .retail-story-card__visual {
  padding: clamp(28px, 3vw, 44px);
}

.retail-industry-page .retail-story-card__visual > span {
  font-size: clamp(34px, 3.5vw, 54px);
}

.retail-industry-page .retail-story-card__body {
  padding: clamp(32px, 4vw, 60px);
}

.retail-industry-page .retail-story-card__meta {
  margin-bottom: clamp(26px, 4vw, 52px);
}

.retail-industry-page .retail-story-card__body > strong {
  max-width: 15ch;
  font-size: clamp(32px, 3.2vw, 50px);
}

.retail-industry-page .retail-story-card__summary {
  max-width: 52ch;
  font-size: 15px;
}

.retail-industry-page .retail-story-card__link {
  align-self: flex-start;
  margin-top: 28px;
}

@media (max-width: 760px) {
  .retail-industry-page .retail-story-feature {
    padding: 16px;
  }

  .retail-industry-page .retail-story-card {
    grid-template-columns: 1fr;
  }

  .retail-industry-page .retail-story-card__visual {
    min-height: 300px;
  }
}

/* Adidas story polish: controlled editorial scale and reliable text measures. */
.client-value-story-page .story-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(460px, 0.88fr);
  min-height: 720px;
  max-width: 1600px;
  margin-inline: auto;
}

.client-value-story-page .story-hero__copy {
  justify-content: flex-start;
  min-width: 0;
  padding: clamp(42px, 4.5vw, 72px) clamp(42px, 5.5vw, 88px) clamp(48px, 5vw, 80px);
}

.client-value-story-page .story-breadcrumb {
  margin-bottom: clamp(64px, 7vw, 96px);
}

.client-value-story-page .story-hero__copy > .section-eyebrow {
  margin-bottom: 14px;
  font-size: 11px;
}

.story-client {
  margin: 0 0 20px;
  color: var(--evergreen);
  font-family: var(--font-body);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.client-value-story-page .story-hero h1 {
  max-width: 17ch;
  font-size: var(--type-client-story-hero-heading-size);
  letter-spacing: -0.032em;
  line-height: 1.02;
  overflow-wrap: normal;
  text-wrap: balance;
}

.client-value-story-page .story-hero__dek {
  max-width: 40ch;
  margin-top: 24px;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
}

.client-value-story-page .story-facts {
  gap: 24px;
  margin-top: clamp(44px, 5vw, 66px);
  padding-top: 20px;
}

.client-value-story-page .story-hero__visual {
  min-width: 0;
  min-height: 720px;
  padding: clamp(38px, 4vw, 60px);
}

.client-value-story-page .gradient-grid__label {
  max-width: 10ch;
  font-size: clamp(42px, 4.2vw, 64px);
  line-height: 0.98;
  overflow-wrap: normal;
  text-wrap: balance;
}

.client-value-story-page .story-section {
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
  gap: clamp(46px, 7vw, 104px);
  width: min(100% - clamp(48px, 10vw, 160px), 1220px);
  padding-block: clamp(92px, 10vw, 144px);
}

.client-value-story-page .story-section__body {
  max-width: 740px;
}

.client-value-story-page .story-section__body h2 {
  max-width: 17ch;
  margin-bottom: clamp(38px, 5vw, 60px);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
}

.client-value-story-page .story-section__body > p {
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.72;
}

.client-value-story-page .story-section__body > .story-lead {
  font-size: clamp(19px, 1.65vw, 23px);
  line-height: 1.58;
}

.client-value-story-page .story-quote {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.38fr);
  gap: clamp(42px, 6vw, 88px);
  width: min(100% - clamp(40px, 7vw, 112px), 1320px);
  padding: clamp(54px, 6.5vw, 88px);
}

.client-value-story-page .story-quote blockquote {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.22;
}

.client-value-story-page .story-solution {
  width: 100%;
  max-width: none;
  padding-inline: max(clamp(48px, 10vw, 160px), calc((100vw - 1220px) / 2));
}

.client-value-story-page .story-method {
  margin-block: clamp(48px, 6vw, 72px);
}

.client-value-story-page .story-method article {
  padding: clamp(24px, 2.4vw, 34px);
}

.client-value-story-page .story-method h3 {
  margin-top: 38px;
  font-size: 23px;
}

.client-value-story-page .story-image-break {
  min-height: clamp(480px, 52vw, 720px);
  max-width: 1440px;
  margin-inline: auto;
}

.client-value-story-page .story-image-break > span {
  max-width: 10ch;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 0.94;
  text-wrap: balance;
}

.client-value-story-page .story-outcomes li {
  font-size: 19px;
}

.client-value-story-page .story-next {
  width: min(100% - clamp(48px, 10vw, 160px), 1220px);
  padding-block: clamp(90px, 10vw, 140px);
}

.client-value-story-page .story-next h2 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
}

@media (max-width: 1080px) {
  .client-value-story-page .story-hero {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.78fr);
  }

  .client-value-story-page .story-hero__copy {
    padding-inline: 44px;
  }

  .client-value-story-page .story-hero h1 {
    font-size: var(--type-client-story-hero-heading-size);
  }
}

@media (max-width: 860px) {
  .client-value-story-page .story-hero {
    grid-template-columns: 1fr;
  }

  .client-value-story-page .story-hero__visual {
    order: 0;
    min-height: 460px;
  }

  .client-value-story-page .story-hero__copy {
    order: -1;
  }

  .client-value-story-page .story-quote,
  .client-value-story-page .story-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .client-value-story-page .story-hero__copy {
    padding: 32px 24px 48px;
  }

  .client-value-story-page .story-breadcrumb {
    margin-bottom: 52px;
  }

  .client-value-story-page .story-hero h1 {
    max-width: 100%;
    font-size: var(--type-client-story-hero-heading-mobile-size);
  }

  .client-value-story-page .story-facts {
    grid-template-columns: 1fr;
  }

  .client-value-story-page .story-section {
    gap: 34px;
    width: calc(100% - 48px);
    padding-block: 76px;
  }

  .client-value-story-page .story-solution {
    width: 100%;
    padding-inline: 24px;
  }

  .client-value-story-page .story-quote {
    width: calc(100% - 32px);
    padding: 40px 28px;
  }

  .client-value-story-page .story-image-break {
    margin-inline: 16px;
  }

  .client-value-story-page .story-next {
    width: calc(100% - 48px);
  }
}

/* Retail client-story navigation and associated story panels. */
.retail-industry-page .page {
  background: #ffffff;
}

.retail-client-nav {
  position: sticky;
  z-index: 9;
  top: 96px;
  padding: clamp(30px, 4vw, 52px) clamp(20px, 4vw, 64px);
  border-top: 1px solid rgba(0, 87, 70, 0.08);
  border-bottom: 1px solid rgba(0, 87, 70, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(21, 25, 26, 0.08);
  backdrop-filter: blur(16px);
}

.retail-client-nav__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.retail-client-nav__label {
  color: var(--forest);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.retail-client-nav__pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  padding: 9px;
  border-radius: 34px;
  background: linear-gradient(135deg, #005746 0%, #21734e 58%, #6e9c56 100%);
  box-shadow: 0 16px 44px rgba(0, 87, 70, 0.18);
  overflow: hidden;
}

.retail-client-pill {
  display: flex;
  min-width: 0;
  height: 72px;
  align-items: center;
  justify-content: center;
  padding: 10px clamp(16px, 2.2vw, 28px);
  border: 0;
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 39, 30, 0.08);
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
}

.retail-client-pill img {
  display: block;
  width: 100%;
  max-width: 134px;
  height: 32px;
  filter: none;
  opacity: 0.72;
  object-fit: contain;
  transition:
    filter var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease);
}

.retail-client-pill:hover,
.retail-client-pill:focus-visible {
  background: #ffffff;
  transform: translateY(-1px);
}

.retail-client-pill:hover img,
.retail-client-pill:focus-visible img {
  opacity: 1;
}

.retail-client-pill:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.retail-client-pill.is-current {
  background: #ffffff;
  box-shadow:
    inset 0 0 0 3px var(--forest),
    0 10px 24px rgba(21, 25, 26, 0.14);
}

.retail-client-pill.is-current img {
  filter: none;
  opacity: 1;
}

.retail-industry-page .retail-story-feature {
  scroll-margin-top: 190px;
  background: #ffffff;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: 50% 10%;
  transition:
    opacity 480ms var(--motion-ease),
    transform 520ms var(--motion-ease);
}

.retail-industry-page .retail-story-feature--secondary {
  padding-top: clamp(20px, 3vw, 48px);
}

.retail-story-deck {
  position: relative;
  min-height: clamp(420px, 42vw, 596px);
  overflow: hidden;
  background: #ffffff;
}

/* The featured story already supplies its own bottom breathing room. Let the
   retail page flow directly into the shared footer instead of stacking the
   footer's global top gap beneath it as a second white band. */
.retail-industry-page .site-footer {
  margin-top: 0;
}

.retail-story-feature[hidden] {
  display: none;
}

.retail-industry-page .retail-story-feature.is-entering {
  opacity: 0;
  transform: translateY(28px) scale(0.992);
}

.retail-industry-page .retail-story-feature.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px) scale(0.992);
}

.retail-industry-page .retail-story-card {
  grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
  height: clamp(500px, 34vw, 620px);
  min-height: 0;
}

.retail-story-card--preview {
  color: inherit;
}

.retail-story-card__visual--photo {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: var(--moss-soft);
}

.retail-industry-page .retail-story-card__visual--photo,
.retail-industry-page .retail-story-card__visual--template {
  padding: 0;
}

.retail-story-card__visual--photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 34%;
  transition: transform 650ms var(--motion-ease);
}

.retail-story-card__visual--template {
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: #005746;
}

.retail-story-card__visual--template picture,
.retail-story-card__visual--template img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.retail-story-card__visual--template img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.25);
}

.retail-story-card__visual--placeholder {
  --retail-placeholder-gradient:
    radial-gradient(circle at 76% 24%, rgba(190, 207, 153, 0.58), transparent 34%),
    radial-gradient(circle at 24% 82%, rgba(0, 87, 70, 0.42), transparent 42%),
    linear-gradient(135deg, #005746 0%, #3f865a 58%, #92b56f 100%);
  position: relative;
  display: grid;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  background: #005746;
  isolation: isolate;
}

.retail-story-card__visual--placeholder::before,
.retail-story-card__visual--placeholder::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.retail-story-card__visual--placeholder::before {
  z-index: -2;
  inset: -5%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    var(--retail-placeholder-gradient);
  background-size: 56px 56px, 56px 56px, auto, auto, auto;
  transition: transform 900ms var(--motion-ease);
}

.retail-story-card__visual--placeholder::after {
  z-index: -1;
  inset: 0;
  background: var(--nka-grain);
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.13;
}

.retail-story-placeholder__form {
  position: relative;
  width: clamp(138px, 15vw, 210px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(255, 255, 255, 0.07),
    0 0 0 56px rgba(255, 255, 255, 0.04);
}

.retail-story-placeholder__form::before,
.retail-story-placeholder__form::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
  content: "";
  transform-origin: left center;
}

.retail-story-placeholder__form::before {
  transform: rotate(38deg);
}

.retail-story-placeholder__form::after {
  transform: rotate(142deg);
}

.retail-story-card__visual--lululemon {
  --retail-placeholder-gradient:
    radial-gradient(circle at 72% 26%, rgba(248, 209, 193, 0.46), transparent 34%),
    radial-gradient(circle at 24% 80%, rgba(0, 87, 70, 0.42), transparent 40%),
    linear-gradient(135deg, #005746 0%, #4a8c62 58%, #a4bd83 100%);
}

.retail-story-card__visual--holt {
  --retail-placeholder-gradient:
    radial-gradient(circle at 70% 24%, rgba(247, 241, 226, 0.62), transparent 33%),
    radial-gradient(circle at 26% 78%, rgba(46, 125, 82, 0.4), transparent 40%),
    linear-gradient(140deg, #164f46 0%, #729a72 56%, #becf99 100%);
}

.retail-story-card__visual--specialized {
  --retail-placeholder-gradient:
    radial-gradient(circle at 74% 22%, rgba(149, 175, 203, 0.38), transparent 34%),
    radial-gradient(circle at 22% 82%, rgba(0, 87, 70, 0.44), transparent 42%),
    linear-gradient(135deg, #33495e 0%, #28705f 54%, #88aa70 100%);
}

.retail-story-card:hover .retail-story-card__visual--placeholder::before,
.retail-story-card:focus-visible .retail-story-card__visual--placeholder::before {
  transform: scale(1.035);
}

.retail-story-card:hover .retail-story-card__visual--photo img,
.retail-story-card:focus-visible .retail-story-card__visual--photo img {
  transform: scale(1.025);
}

.retail-industry-page .retail-story-card__body > strong {
  max-width: 18ch;
  font-size: clamp(32px, 3.15vw, 48px);
  text-wrap: balance;
}

.retail-industry-page .retail-story-card__body {
  min-height: 0;
  justify-content: flex-start;
}

.retail-industry-page .retail-story-card__link {
  margin-top: auto;
}

.retail-industry-page .retail-story-card__summary {
  max-width: 58ch;
  text-wrap: pretty;
}

.retail-story-status {
  align-self: flex-start;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: #6f7e78;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.retail-story-card__link--pending {
  margin-top: auto;
  opacity: 0.62;
  pointer-events: none;
}

@media (max-width: 980px) {
  .retail-client-nav__inner {
    gap: 10px;
  }

  .retail-industry-page .retail-story-card {
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  }
}

@media (max-width: 760px) {
  .retail-client-nav {
    top: 82px;
    padding: 22px 0 24px;
  }

  .retail-client-nav__label {
    align-self: flex-start;
    padding-inline: 20px;
  }

  .retail-client-nav__pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    width: calc(100% - 32px);
    padding: 7px;
    border-radius: 28px;
    scrollbar-width: none;
  }

  .retail-client-nav__pills::-webkit-scrollbar {
    display: none;
  }

  .retail-client-pill {
    flex: 0 0 142px;
    height: 54px;
    padding: 9px 18px;
    border-radius: 22px;
  }

  .retail-client-pill img {
    max-width: 96px;
    height: 25px;
  }

  .retail-industry-page .retail-story-feature {
    scroll-margin-top: 165px;
  }

  .retail-industry-page .retail-story-feature--secondary {
    padding-top: 16px;
  }

  .retail-industry-page .retail-story-card {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .retail-story-card__visual--photo {
    height: auto;
    min-height: 340px;
    aspect-ratio: 4 / 3;
  }

  .retail-story-card__visual--template {
    height: auto;
    min-height: 340px;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retail-industry-page .retail-story-feature,
  .retail-story-card__visual--placeholder::before,
  .retail-story-card__visual--photo img,
  .retail-client-pill {
    transition: none;
  }
}

/* Adidas value story v3: centered editorial hero + visual bento gallery. */
.adidas-value-hero {
  padding: clamp(92px, 10vw, 150px) 24px clamp(70px, 8vw, 116px);
  background: #fbfaf7;
  text-align: center;
}

.adidas-value-hero__inner {
  width: min(100%, 980px);
  margin-inline: auto;
}

.adidas-value-hero .section-eyebrow {
  margin: 0 0 28px;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.adidas-value-hero h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.adidas-value-hero__brand img {
  display: block;
  width: clamp(116px, 11vw, 154px);
  height: auto;
}

.adidas-value-hero h2 {
  max-width: 17ch;
  margin: 28px auto 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(46px, 5.4vw, 78px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}

.adidas-value-hero__inner > p:last-child {
  max-width: 47ch;
  margin: 30px auto 0;
  color: var(--slate);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
  text-wrap: balance;
}

.adidas-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.35vw, 20px);
  width: min(100% - clamp(32px, 5vw, 80px), 1440px);
  margin-inline: auto;
  padding-bottom: clamp(90px, 10vw, 150px);
}

.adidas-bento-card {
  grid-column: span 2;
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 87, 70, 0.06);
  border-radius: var(--radius-card);
  background: #f2f4f0;
}

.adidas-bento-card--lead {
  grid-column: span 4;
  min-height: 480px;
}

.adidas-bento-card--strategy {
  grid-column: span 2;
  min-height: 480px;
}

.adidas-bento-card--wide {
  grid-column: span 3;
  min-height: 330px;
}

.adidas-bento-visual {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  overflow: hidden;
  background: #005746
    url("assets/image-templates/11-editorial-desktop-1920x1200.png") center / cover
    no-repeat;
}

.adidas-bento-visual::after {
  position: absolute;
  inset: 0;
  background: var(--nka-grain);
  content: "";
  mix-blend-mode: soft-light;
  opacity: 0.1;
  pointer-events: none;
}

.adidas-bento-caption {
  min-height: 112px;
  padding: 22px clamp(20px, 2.2vw, 32px) 26px;
  background: rgba(251, 251, 248, 0.96);
  text-align: center;
}

.adidas-bento-caption > span {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.adidas-bento-caption h3 {
  max-width: 34ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: balance;
}

.adidas-bento-visual--shift {
  gap: clamp(24px, 4vw, 64px);
  --bento-gradient: linear-gradient(135deg, #005746 0%, #4c9163 56%, #b9d093 100%);
}

.adidas-bento-mark,
.adidas-bento-year {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 86px);
  line-height: 1;
}

.adidas-bento-visual--shift i {
  position: relative;
  z-index: 1;
  width: clamp(68px, 9vw, 132px);
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
}

.adidas-bento-visual--shift i::after {
  position: absolute;
  top: -4px;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  border-right: 1px solid rgba(255, 255, 255, 0.72);
  content: "";
  transform: rotate(45deg);
}

.adidas-bento-visual--strategy {
  --bento-gradient: radial-gradient(circle at 72% 24%, #f8d1c1 0%, #afc9b4 42%, #33495e 100%);
}

.adidas-bento-year {
  font-size: clamp(60px, 7vw, 96px);
}

.adidas-bento-visual--collaboration {
  gap: 12px;
  --bento-gradient: linear-gradient(145deg, #e6eddf 0%, #a6c09e 48%, #6e9c56 100%);
}

.adidas-bento-visual--collaboration span {
  position: relative;
  z-index: 1;
  width: clamp(54px, 6vw, 82px);
  height: clamp(54px, 6vw, 82px);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 36px rgba(0, 87, 70, 0.12);
}

.adidas-bento-visual--feedback {
  gap: 14px;
  --bento-gradient: linear-gradient(145deg, #33495e 0%, #477f78 52%, #afc9b4 100%);
}

.adidas-bento-visual--feedback i {
  position: relative;
  z-index: 1;
  width: 9px;
  height: clamp(72px, 9vw, 126px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}

.adidas-bento-visual--feedback i:nth-child(2) {
  height: clamp(110px, 13vw, 172px);
}

.adidas-bento-visual--leadership {
  --bento-gradient: radial-gradient(circle at 50% 46%, #f7f1e2 0%, #becf99 38%, #6e9c56 72%, #005746 100%);
}

.adidas-bento-visual--leadership span {
  position: relative;
  z-index: 1;
  width: clamp(118px, 13vw, 180px);
  height: clamp(118px, 13vw, 180px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow:
    0 0 0 24px rgba(255, 255, 255, 0.08),
    0 0 0 48px rgba(255, 255, 255, 0.05);
}

.adidas-bento-visual--playbook {
  --bento-gradient: linear-gradient(135deg, #f3b6a5 0%, #f7f1e2 48%, #becf99 100%);
}

.adidas-bento-visual--outcome {
  --bento-gradient: linear-gradient(135deg, #005746 0%, #6e9c56 54%, #f8d1c1 100%);
}

.adidas-bento-visual--playbook > span,
.adidas-bento-visual--outcome > span {
  position: relative;
  z-index: 1;
  max-width: 13ch;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}

.adidas-bento-visual--outcome > span {
  color: #fff;
}

@media (max-width: 920px) {
  .adidas-bento-card,
  .adidas-bento-card--lead,
  .adidas-bento-card--strategy,
  .adidas-bento-card--wide {
    grid-column: span 3;
  }

  .adidas-bento-card--lead {
    grid-column: span 6;
  }
}

@media (max-width: 620px) {
  .adidas-value-hero {
    padding: 72px 24px 58px;
  }

  .adidas-value-hero h2 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .adidas-bento {
    grid-template-columns: 1fr;
    width: calc(100% - 28px);
    gap: 12px;
  }

  .adidas-bento-card,
  .adidas-bento-card--lead,
  .adidas-bento-card--strategy,
  .adidas-bento-card--wide {
    grid-column: 1;
    min-height: 360px;
  }

  .adidas-bento-card--lead {
    min-height: 420px;
  }

  .adidas-bento-visual--shift {
    gap: 18px;
  }

  .adidas-bento-visual {
    background-image: url("assets/image-templates/12-editorial-mobile-1200x1500.png");
  }
}

/* Final Adidas story caption hierarchy: editorial scale and shared alignment. */
.adidas-bento-caption,
.adidas-bento-card--lead .adidas-bento-caption,
.adidas-bento-card--strategy .adidas-bento-caption {
  min-height: 210px;
  padding: clamp(28px, 2.8vw, 40px);
  text-align: left;
}

.adidas-bento-caption > span {
  margin-bottom: 12px;
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.2;
  text-align: left;
}

.adidas-bento-caption h3 {
  max-width: none;
  margin: 0;
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.28;
  text-align: left;
}

.adidas-bento-caption p {
  max-width: 60ch;
  margin: 16px 0 0;
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.58;
  text-align: left;
}

@media (max-width: 620px) {
  .adidas-bento-caption,
  .adidas-bento-card--lead .adidas-bento-caption,
  .adidas-bento-card--strategy .adidas-bento-caption {
    min-height: 0;
    padding: 26px 24px 30px;
  }
}

/* Retail client stories: use the same split-card language as the Ethos system. */
.retail-industry-page .retail-story-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: clamp(580px, 42vw, 720px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(184, 150, 90, 0.24);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 24px 64px rgba(21, 25, 26, 0.1);
}

.retail-industry-page .retail-story-card__visual--photo,
.retail-industry-page .retail-story-card__visual--template {
  height: 100%;
  min-height: 0;
  padding: 0;
}

.retail-industry-page .retail-story-card__visual--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}

.retail-industry-page .retail-story-card__visual--template {
  background: #005746 url("assets/image-templates/19-icon-ethos-1024x1024.png") center / cover no-repeat;
}

.retail-industry-page .retail-story-card__visual--template picture {
  display: none;
}

.retail-industry-page .retail-story-card__body {
  justify-content: flex-start;
  min-height: 0;
  padding: clamp(52px, 5.8vw, 92px);
}

.retail-industry-page .retail-story-card__meta {
  align-self: flex-start;
  gap: 10px;
  margin-bottom: clamp(34px, 4vw, 56px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #e9f0dd;
  color: var(--evergreen);
  font-size: clamp(11px, 0.8vw, 13px);
  line-height: 1.2;
}

.retail-industry-page .retail-story-card__meta i {
  width: 12px;
  background: currentColor;
}

.retail-industry-page .retail-story-card__body > strong {
  max-width: 15ch;
  font-size: clamp(42px, 3.9vw, 64px);
  line-height: 1.04;
  text-wrap: balance;
}

.retail-industry-page .retail-story-card__summary {
  max-width: 38ch;
  margin-top: clamp(24px, 2.4vw, 34px);
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.5;
  text-wrap: pretty;
}

.retail-industry-page .retail-story-status {
  margin-top: 24px;
}

.retail-industry-page .retail-story-card__link {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 980px) {
  .retail-industry-page .retail-story-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: clamp(540px, 62vw, 640px);
  }

  .retail-industry-page .retail-story-card__body {
    padding: clamp(40px, 5vw, 56px);
  }

  .retail-industry-page .retail-story-card__body > strong {
    font-size: clamp(38px, 5vw, 52px);
  }
}

@media (max-width: 760px) {
  .retail-industry-page .retail-story-card {
    grid-template-columns: 1fr;
    height: auto;
    border-radius: var(--radius-card);
  }

  .retail-industry-page .retail-story-card__visual--photo,
  .retail-industry-page .retail-story-card__visual--template {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .retail-industry-page .retail-story-card__body {
    padding: 36px 28px 40px;
  }

  .retail-industry-page .retail-story-card__meta {
    margin-bottom: 30px;
  }

  .retail-industry-page .retail-story-card__body > strong {
    max-width: 16ch;
    font-size: clamp(38px, 11vw, 50px);
  }

  .retail-industry-page .retail-story-card__summary {
    font-size: 18px;
  }

  .retail-industry-page .retail-story-card__link {
    margin-top: 32px;
  }
}

/* Adidas client value story: long-form editorial case study. */
.adidas-case-study-page [hidden] {
  display: none !important;
}

.adidas-case-study-page .stage {
  background: var(--nka-stage-field);
  background-size: 180% 180%;
}

.adidas-case-study-page .page {
  width: min(1520px, 100%);
  min-width: 0;
  max-width: 100%;
  background: var(--white);
}

.adidas-case-study {
  --client-story-divider-color: rgba(0, 87, 70, 0.22);
  --client-story-divider-space: clamp(64px, 6vw, 88px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* The carousel rail clips its own scrolling content. Keep the page wrapper
     visible so the related-stories surface and soft shadows can dissipate all
     the way to the viewport instead of ending at the inner page boundary. */
  overflow: visible;
  padding: 0 0 clamp(56px, 5vw, 80px);
  background: var(--white);
}

/* The related-stories rail is the closing section on this page and already
   provides its own measured end spacing. Do not stack the footer's global
   top margin beneath it, which otherwise reads as an empty white panel. */
.adidas-case-study-page .site-footer {
  margin-top: 0;
}

.adidas-case-study__paper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.adidas-case-hero {
  /* Adidas-only colour study: a neutral black photographic veil replaces the
     global green hero veil without changing any other page or component. */
  --adidas-hero-overlay: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.82) 28%,
    rgba(0, 0, 0, 0.58) 42%,
    rgba(0, 0, 0, 0.25) 55%,
    rgba(0, 0, 0, 0) 68%
  );
  --adidas-hero-overlay-mobile: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 34%,
    rgba(0, 0, 0, 0.36) 49%,
    rgba(0, 0, 0, 0.72) 65%,
    rgba(0, 0, 0, 0.93) 100%
  );
  position: relative;
  min-height: var(--hero-banner-min-height);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #151515;
  color: #ffffff;
  isolation: isolate;
  text-align: left;
}

.adidas-case-hero::before,
.adidas-case-hero::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.adidas-case-hero::before {
  inset: 0;
  background: var(--adidas-hero-overlay);
}

.adidas-case-hero::after {
  display: none;
}

.adidas-case-hero__media,
.adidas-case-hero__media picture,
.adidas-case-hero__media img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.adidas-case-hero__media {
  z-index: 0;
  display: block;
  overflow: hidden;
}

.adidas-case-hero__media picture {
  display: block;
}

.adidas-case-hero__media img {
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* Each frame keeps its final overscanned state while inactive. The active
     frame animates from its start values into this state, avoiding a visible
     reverse jump while the outgoing image crossfades. */
  transform: translate3d(var(--adidas-hero-x-to, 0), var(--adidas-hero-y-to, 0), 0) scale(var(--adidas-hero-scale-to, 1.1));
  transform-origin: center;
  transition: opacity 1100ms var(--motion-ease-soft);
  will-change: opacity, transform;
}

.adidas-case-hero__media img.is-active {
  opacity: 1;
  animation: adidas-case-hero-zoom var(--hero-ken-burns-pass-duration) var(--hero-ken-burns-pass-ease) both;
}

/* The opening product frame retains the rightward art direction requested for
   copy clearance; the two editorial frames use a centred, gentler push-in. */
.adidas-case-hero__media picture:first-child img {
  --adidas-hero-scale-from: 1.14;
  --adidas-hero-scale-to: 1.22;
  --adidas-hero-x-from: 4%;
  --adidas-hero-x-to: 8%;
}

.adidas-case-hero__media picture:nth-child(2) img {
  --adidas-hero-scale-from: 1.04;
  --adidas-hero-scale-to: 1.1;
  object-position: center 52%;
}

.adidas-case-hero__media picture:nth-child(3) img {
  --adidas-hero-scale-from: 1.03;
  --adidas-hero-scale-to: 1.09;
  object-position: center 58%;
}

/* The lululemon frames are individually art-directed with copy-safe negative
   space, so they use a restrained push-in without the legacy adidas offsets. */
.lululemon-case-study-page .adidas-case-hero__media img {
  --adidas-hero-scale-from: 1.01;
  --adidas-hero-scale-to: 1.055;
  --adidas-hero-x-from: 0;
  --adidas-hero-x-to: 0;
  --adidas-hero-y-from: 0;
  --adidas-hero-y-to: 0;
  object-position: center;
}

/* Keep the IPH hero on the shared client-story composition: copy remains on
   the left on desktop. Its source photography places people and animals on
   the left, so mirror only the photographic frames to preserve those focal
   points in the right image field without reversing the page layout. */
@media (min-width: 1181px) {
  body[data-client-story="independence-pet-holdings"] .adidas-case-hero__media picture {
    transform: scaleX(-1);
  }

  body[data-client-story="independence-pet-holdings"] .adidas-case-hero__media img {
    --adidas-hero-scale-from: 1.01;
    --adidas-hero-scale-to: 1.055;
    --adidas-hero-x-from: 0;
    --adidas-hero-x-to: 0;
    --adidas-hero-y-from: 0;
    --adidas-hero-y-to: 0;
    object-position: center;
  }
}

/* Holt Renfrew's store, runway, and street-style frames are already composed
   at their final banner ratios. Keep the shared Adidas zoom from enlarging the
   bags or cropping faces as the carousel advances. */
@media (min-width: 821px) {
  body[data-client-story="holt-renfrew"] .adidas-case-hero__media img {
    --adidas-hero-scale-from: 1;
    --adidas-hero-scale-to: 1.035;
    --adidas-hero-x-from: 0;
    --adidas-hero-x-to: 0;
    --adidas-hero-y-from: 0;
    --adidas-hero-y-to: 0;
  }

  body[data-client-story="holt-renfrew"] .adidas-case-hero__media picture:first-child img {
    object-position: center;
  }

  body[data-client-story="holt-renfrew"] .adidas-case-hero__media picture:nth-child(2) img {
    object-position: center 48%;
  }

  body[data-client-story="holt-renfrew"] .adidas-case-hero__media picture:nth-child(3) img {
    object-position: center 48%;
  }

  /* The helmet artwork has a dark left field designed for copy. Move the
     product farther into the right half without changing its vertical centre. */
  body[data-client-story="specialized"] .adidas-case-hero__media picture:nth-child(3) img {
    --adidas-hero-scale-from: 1;
    --adidas-hero-scale-to: 1.025;
    --adidas-hero-x-from: 17%;
    --adidas-hero-x-to: 19%;
    --adidas-hero-y-from: 0;
    --adidas-hero-y-to: 0;
    object-position: center;
  }
}

@keyframes adidas-case-hero-zoom {
  from {
    transform: translate3d(var(--adidas-hero-x-from, 0), var(--adidas-hero-y-from, 0), 0) scale(var(--adidas-hero-scale-from, 1.03));
  }
  to {
    transform: translate3d(var(--adidas-hero-x-to, 0), var(--adidas-hero-y-to, 0), 0) scale(var(--adidas-hero-scale-to, 1.1));
  }
}

.adidas-case-hero__content {
  position: relative;
  z-index: 2;
  /* Long client-story titles use the standard hero gutter while reserving the
     right half for the case-study image. */
  width: var(--hero-banner-content-width);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--hero-banner-content-gap);
  margin-right: auto;
  margin-left: var(--hero-banner-gutter);
  padding: 0 0 var(--hero-banner-pad-bottom);
}

.adidas-case-kicker {
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.adidas-case-hero .adidas-case-kicker {
  color: var(--moss);
  font-family: var(--type-hero-eyebrow-font-family);
  font-size: var(--type-hero-eyebrow-size);
  font-weight: var(--type-hero-eyebrow-weight);
  line-height: var(--type-hero-eyebrow-line-height);
  letter-spacing: var(--type-hero-eyebrow-letter-spacing);
  text-transform: var(--type-hero-eyebrow-text-transform);
}

.adidas-case-hero .adidas-case-kicker::after {
  display: none;
}

.adidas-case-kicker::after {
  display: block;
  width: 110px;
  height: 1px;
  margin: 18px auto 30px;
  background: #b8cb94;
  content: "";
}

.adidas-case-hero h1 {
  width: min(100%, 1040px);
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  /* Preserve the shared hero hierarchy without letting this unusually long
     title intrude into the product focal area. */
  font-size: var(--type-client-story-hero-heading-size);
  font-weight: 500;
  line-height: var(--type-hero-heading-line-height);
  letter-spacing: -0.02em;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.34);
  text-wrap: normal;
}

.adidas-case-deck {
  width: min(100%, 880px);
  max-width: var(--type-hero-copy-width);
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--type-hero-copy-size);
  font-weight: 300;
  line-height: var(--type-hero-copy-line-height);
  letter-spacing: 0;
  text-wrap: balance;
}

.adidas-case-section {
  width: calc(100% - (2 * var(--hero-banner-gutter)));
  margin-inline: auto;
  padding: clamp(28px, 3vw, 44px) 0 clamp(68px, 7vw, 92px);
}

.adidas-case-section + .adidas-case-section {
  padding-top: var(--client-story-divider-space);
  border-top: 1px solid var(--client-story-divider-color);
}

.adidas-case-hero + .adidas-case-section {
  padding-top: clamp(70px, 7vw, 104px);
}

.adidas-case-section > h2 {
  margin: 0 0 clamp(34px, 4vw, 52px);
  padding: 0;
  background: transparent;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.08;
  text-align: left;
}

.adidas-case-lead {
  max-width: 980px;
  margin: 0 0 clamp(34px, 4vw, 48px);
  color: #2e7d52;
  font-family: var(--font-body);
  font-size: clamp(25px, 2.45vw, 36px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.42;
  text-wrap: pretty;
}

/* Editorial pull statement: typography carries the emphasis without placing
   the opening narrative inside a separate card or panel. */
.adidas-case-editorial-callout {
  position: relative;
  max-width: 1080px;
  margin: 0 0 clamp(40px, 5vw, 62px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.adidas-case-editorial-callout > span {
  display: block;
  margin-bottom: clamp(18px, 2vw, 26px);
  color: var(--evergreen);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.adidas-case-editorial-callout p {
  max-width: 980px;
  margin: 0;
  color: #2e7d52;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.45vw, 36px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-wrap: pretty;
}

.adidas-case-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

/* Editorial reading system: mirrors the How We Think / How We Hold long-form rhythm. */
.adidas-case-columns p,
.adidas-case-results > p,
.adidas-case-results__body p {
  margin: 0 0 18px;
  color: var(--slate);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.72;
}

.adidas-case-columns strong,
.adidas-case-results strong {
  color: var(--ink);
  font-weight: 600;
}

.adidas-case-columns p:last-child,
.adidas-case-results > p:last-child,
.adidas-case-results__body p:last-child {
  margin-bottom: 0;
}

/* Client value stories use the same restrained article opening as the
   How We Hold family: one drop cap starts the body copy in each section.
   Pull statements, quotations, and secondary columns keep their hierarchy. */
.adidas-case-columns
  > div:first-child
  > p:first-child::first-letter,
.adidas-case-results__body
  > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 4.45em;
  font-weight: 600;
  line-height: 0.78;
}

.adidas-case-quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(46px, 5vw, 66px) 0 0;
  padding: var(--testimonial-logo-top-inset) clamp(28px, 6vw, 76px) clamp(38px, 5vw, 58px);
  text-align: center;
}

/* The shared testimonial surface is intentionally flat; page-specific
   texture and gradients are disabled so every client quote stays aligned. */
.adidas-case-quote::before {
  display: none;
  content: none;
}

.adidas-case-quote__logo {
  display: block;
  margin: 0 auto var(--testimonial-logo-bottom-gap);
}

.adidas-case-quote blockquote {
  margin: 0 auto;
}

.adidas-case-quote figcaption {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--testimonial-attribution-avatar-gap);
  margin-top: var(--testimonial-attribution-top-gap);
}

.adidas-case-quote__author {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--testimonial-attribution-stack-gap);
  color: var(--testimonial-role-color);
  line-height: 1.45;
}

.adidas-case-quote__portrait {
  position: relative;
  display: block;
  width: var(--testimonial-avatar-size);
  height: var(--testimonial-avatar-size);
}

.adidas-case-quote__portrait > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(0, 87, 70, 0.22);
}

.adidas-case-quote__portrait > span {
  position: absolute;
  right: var(--testimonial-avatar-badge-inline-offset);
  bottom: var(--testimonial-avatar-badge-block-offset);
  display: grid;
  width: var(--testimonial-avatar-badge-size);
  height: var(--testimonial-avatar-badge-size);
  border-radius: 50%;
  background: #fff;
  place-items: center;
}

.adidas-case-quote__portrait > span img {
  width: var(--testimonial-avatar-badge-logo-width);
  max-height: var(--testimonial-avatar-badge-logo-height);
  object-fit: contain;
}

.adidas-case-quote figcaption strong {
  color: var(--testimonial-author-color);
  font-size: var(--testimonial-author-size);
  font-weight: 600;
}

.adidas-case-quote figcaption small {
  color: var(--testimonial-role-color);
  font-size: var(--testimonial-role-size);
  line-height: 1.45;
}

.adidas-case-results {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: start;
}

.adidas-case-results__body {
  display: grid;
  grid-column: 2;
  align-content: start;
}

.adidas-case-results .adidas-case-results__statement {
  color: #2e7d52;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 650;
  line-height: 1.72;
}

/* Every long-form section begins with the same editorial voice as the opening
   Opportunity statement; supporting copy retains the quieter body system. */
.adidas-case-editorial-callout p.adidas-case-opening,
.adidas-case-lead.adidas-case-opening,
.adidas-case-results .adidas-case-results__statement.adidas-case-opening {
  max-width: 980px;
  color: #2e7d52;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.45vw, 36px);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-wrap: pretty;
}

.adidas-related {
  /* Horizontal scroll containers clip transformed children at their scrollport.
     This inset gives the premium shadow and hover scale a safe rendering area. */
  --related-shadow-safe-area: clamp(20px, 2vw, 30px);
  /* Keep a small buffer beyond the shadow-safe inset. Equal values can expose
     a one-pixel antialiased edge from the next off-screen card. */
  --related-rail-gap: calc(var(--related-shadow-safe-area) + 4px);
  width: var(--page-rail-width);
  min-width: 0;
  max-width: var(--content-max);
  margin: clamp(68px, 7vw, 96px) auto 0;
  padding-top: var(--client-story-divider-space);
  border-top: 1px solid var(--client-story-divider-color);
  position: relative;
  isolation: isolate;
  scroll-margin-top: calc(var(--header-height) + 28px);
}

/* Keep the related-stories surface within the normal page canvas. A previous
   100vw pseudo-element created visible white side bands against the shell. */
.adidas-related::before {
  display: none;
  content: none;
}

.adidas-related > .adidas-case-kicker {
  color: var(--green);
  text-align: center;
}

.adidas-related > .adidas-case-kicker::after {
  background: #b8cb94;
}

.adidas-related > h2 {
  margin: -8px 0 38px;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
}

.adidas-related__grid {
  display: flex;
  /* The scrollport extends only by the shadow-safe allowance. Its matching
     padding cancels that extension, keeping the first and third card edges on
     the canonical page rail. */
  width: calc(100% + (2 * var(--related-shadow-safe-area)));
  margin-inline: calc(-1 * var(--related-shadow-safe-area));
  padding:
    42px
    var(--related-shadow-safe-area)
    72px;
  gap: var(--related-rail-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: auto;
  scroll-padding-inline: var(--related-shadow-safe-area);
  /* Proximity snapping keeps touch/trackpad navigation tidy without forcing a
     second correction after the scripted rail has already landed. */
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

/* Custom animation controls the intermediate frames; snap resumes only once
   the destination card is exact, preventing the browser from tugging mid-glide. */
.adidas-related__grid.is-auto-scrolling {
  scroll-snap-type: none;
}

.adidas-related__grid::-webkit-scrollbar {
  display: none;
}

.adidas-related__grid::after {
  display: none;
  content: none;
}

.adidas-related__controls {
  margin: 2px auto 0;
}

/* Related-story cards use one CTA stretched over the panel. Rail entrance and scroll states override the base card transform below. */
.adidas-related__card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-surface-border);
  border-radius: var(--card-surface-radius);
  background: var(--card-surface-background);
  flex-direction: column;
  flex: 0 0 calc(
    (100% - var(--related-rail-gap) - var(--related-rail-gap)) / 3
  );
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    opacity 700ms var(--motion-ease-soft),
    transform 760ms var(--motion-ease-soft),
    box-shadow 280ms var(--motion-ease);
}

.adidas-related.has-related-motion .adidas-related__card {
  opacity: 0;
  transform: translateX(-56px);
}

.adidas-related.has-related-motion.is-visible .adidas-related__card {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(var(--story-index, 0) * 170ms);
}

.adidas-related.has-related-motion.is-visible.is-settled .adidas-related__card {
  transition:
    transform 560ms var(--motion-ease-soft),
    box-shadow 560ms var(--motion-ease-soft),
    border-color 560ms var(--motion-ease-soft);
  transition-delay: 0ms;
  transform-origin: center;
}

/* The story rail has a higher-specificity entrance transform. Once settled,
   this adapter delegates its hover/focus state back to the shared card tokens. */
@media (hover: hover) and (pointer: fine) {
  .adidas-related.has-related-motion.is-visible.is-settled .nka-elevated-card:hover {
    border-color: var(--card-surface-border-hover);
    box-shadow: var(--card-surface-shadow-hover);
    transform: translateY(var(--card-lift-distance)) scale(var(--card-lift-scale));
  }
}

.adidas-related.has-related-motion.is-visible.is-settled .nka-elevated-card:focus-within {
  border-color: var(--card-surface-border-hover);
  box-shadow: var(--card-surface-shadow-hover);
  transform: translateY(var(--card-lift-distance)) scale(var(--card-lift-scale));
}

/* While the rail is gliding, keep every card on one composited plane. Without
   this guard, cards repeatedly lift as they cross a stationary pointer, which
   reads as a stutter even when the horizontal interpolation is smooth. */
.adidas-related.has-related-motion.is-visible.is-settled .adidas-related__grid.is-auto-scrolling .nka-elevated-card,
.adidas-related.has-related-motion.is-visible.is-settled .adidas-related__grid.is-auto-scrolling .nka-elevated-card:hover,
.adidas-related.has-related-motion.is-visible.is-settled .adidas-related__grid.is-auto-scrolling .nka-elevated-card:focus-within {
  border-color: var(--card-surface-border);
  box-shadow: var(--card-surface-shadow);
  transform: translateY(0) scale(1);
}

/* The horizontal rail clips large translucent shadows at its scrollport edges,
   which reads as a cut-off green gradient behind the card row. Keep the lift
   interaction here, but remove the rail cards' shadow field at every state. */
.adidas-related .nka-elevated-card,
.adidas-related .nka-elevated-card:hover,
.adidas-related .nka-elevated-card:focus-within,
.adidas-related.has-related-motion.is-visible.is-settled .nka-elevated-card:hover,
.adidas-related.has-related-motion.is-visible.is-settled .nka-elevated-card:focus-within,
.adidas-related.has-related-motion.is-visible.is-settled .adidas-related__grid.is-auto-scrolling .nka-elevated-card,
.adidas-related.has-related-motion.is-visible.is-settled .adidas-related__grid.is-auto-scrolling .nka-elevated-card:hover,
.adidas-related.has-related-motion.is-visible.is-settled .adidas-related__grid.is-auto-scrolling .nka-elevated-card:focus-within {
  box-shadow: none;
}

.adidas-related.has-related-motion .adidas-related__grid.is-auto-scrolling .adidas-related__card:hover .adidas-related__visual,
.adidas-related.has-related-motion .adidas-related__grid.is-auto-scrolling .adidas-related__card:focus-within .adidas-related__visual,
.adidas-related.has-related-motion .adidas-related__grid.is-auto-scrolling .adidas-related__card:hover .adidas-related__visual--slide.is-active,
.adidas-related.has-related-motion .adidas-related__grid.is-auto-scrolling .adidas-related__card:focus-within .adidas-related__visual--slide.is-active {
  transform: scale(1);
}

.adidas-related__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--card-media-aspect-ratio);
  overflow: hidden;
}

.adidas-related__brand-badge {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 14px;
  display: flex;
  width: 98px;
  height: 44px;
  padding: 7px 11px;
  border: 1px solid rgba(0, 87, 70, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(12, 42, 34, 0.16);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.adidas-related__brand-badge img {
  display: block;
  width: auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.adidas-related__brand-badge--adidas {
  width: 98px;
}

.adidas-related__brand-badge--microsoft,
.adidas-related__brand-badge--lululemon,
.adidas-related__brand-badge--iqmetrix {
  width: 108px;
}

.adidas-related__brand-badge--holt {
  width: 120px;
}

.adidas-related__brand-badge--specialized {
  width: 124px;
}

.adidas-related__brand-badge--iph {
  width: 186px;
}

.adidas-related__visual {
  display: block;
  width: 100%;
  height: 100%;
  background: #005746 url("assets/image-templates/19-icon-ethos-1024x1024.png") center / cover no-repeat;
  transform: scale(1);
  transform-origin: center;
  transition: transform 1.8s var(--motion-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .adidas-related__card:hover .adidas-related__visual {
    transform: scale(var(--card-media-zoom-scale));
  }
}

.adidas-related__card:focus-within .adidas-related__visual {
  transform: scale(var(--card-media-zoom-scale));
}

.adidas-related__visual--image {
  background: #000;
  object-fit: contain;
  object-position: center;
}

.adidas-related__visual--cover {
  object-fit: cover;
}

.adidas-related__visual--top {
  object-position: center top;
}

.adidas-related__visual--holt-shopping {
  object-position: center 8%;
}

.adidas-related__visual--adidas-neon {
  object-position: center 18%;
}

.adidas-related__visual--iph-woman {
  object-position: 12% center;
}

.adidas-related__media--brand {
  display: grid;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
}

.adidas-related__media--brand::before,
.adidas-related__media--brand::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.adidas-related__media--brand::before {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(120deg, #005746 0%, #287c59 58%, #80a563 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.adidas-related__media--brand::after {
  width: 65%;
  aspect-ratio: 1;
  right: -12%;
  bottom: -72%;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.04), 0 0 0 62px rgba(255, 255, 255, 0.025);
}

.adidas-related__media--microsoft::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(120deg, #073f36 0%, #176a55 58%, #7b9e61 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.adidas-related__media--iph::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(120deg, #163f3a 0%, #4e755a 60%, #c1ce96 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.adidas-related__media--iqmetrix::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(120deg, #143a35 0%, #476a59 56%, #9faf76 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.adidas-related__brand-mark {
  width: min(52%, 190px);
  max-height: 78px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(0, 31, 25, 0.18);
  object-fit: contain;
}

.adidas-related__brand-mark--wide {
  width: min(68%, 250px);
}

.adidas-related__media--carousel {
  position: relative;
  background: #000;
}

.adidas-related__media--carousel .adidas-related__visual--slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 1.45s cubic-bezier(.37, 0, .63, 1),
    transform 1.8s var(--motion-ease-soft);
}

.adidas-related__media--carousel .adidas-related__visual--slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .adidas-related__card:hover .adidas-related__media--carousel .adidas-related__visual--slide.is-active {
    transform: scale(var(--card-media-zoom-scale));
  }
}

.adidas-related__card:focus-within .adidas-related__media--carousel .adidas-related__visual--slide.is-active {
  transform: scale(var(--card-media-zoom-scale));
}

.adidas-related__copy {
  display: flex;
  flex: 1 1 auto;
  min-height: 210px;
  padding: var(--card-content-padding);
  flex-direction: column;
}

.adidas-related__copy small {
  margin-bottom: 12px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.adidas-related__copy strong {
  margin-bottom: 30px;
  color: var(--card-title-color);
  font-family: var(--card-title-font);
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  line-height: var(--card-title-line-height);
}

.adidas-related__copy > .button {
  align-self: flex-start;
  margin-top: auto;
  margin-bottom: 0;
}

/* The card already supplies the lift interaction. Keep this button stationary
   so its full-card pseudo-element retains the card as its containing block. */
.adidas-related__copy > .button:hover,
.adidas-related__copy > .button:focus-visible,
.adidas-related__copy > .button:active {
  transform: none;
}

/* The visible CTA remains the single semantic link while its hit area spans
   the complete card. */
.adidas-related__copy > .button::after {
  position: absolute;
  content: "";
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .adidas-related__nav-button {
    transition: none;
  }

  .adidas-related.has-related-motion .adidas-related__card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .adidas-related__progress-dot {
    transition: none;
  }

  .adidas-related__visual,
  .adidas-related__card:hover .adidas-related__visual,
  .adidas-related__card:focus-within .adidas-related__visual {
    transform: none;
    transition: none;
  }

  .adidas-related__media--carousel .adidas-related__visual--slide,
  .adidas-related__media--carousel .adidas-related__visual--slide.is-active,
  .adidas-related__card:hover .adidas-related__media--carousel .adidas-related__visual--slide.is-active,
  .adidas-related__card:focus-within .adidas-related__media--carousel .adidas-related__visual--slide.is-active {
    transform: none;
    transition: none;
  }

  .adidas-related.has-related-motion.is-visible.is-settled .adidas-related__card,
  .adidas-related.has-related-motion.is-visible.is-settled .adidas-related__card:hover,
  .adidas-related.has-related-motion.is-visible.is-settled .adidas-related__card:focus-within {
    transform: none;
    transition: none;
  }
}

@media (max-width: 820px) {
  .adidas-case-study {
    padding-inline: 0;
  }

  /* Client stories inherit the completed How We Think / How We Hold mobile
     reading contract: 20px page gutters, editorial display headings, an
     italic green introduction, and 16px light-weight body copy. */
  .adidas-case-section {
    width: var(--hero-banner-mobile-content-width);
    margin-inline: auto;
    padding: 50px 0 44px;
    border-top: 0;
  }

  .adidas-case-section + .adidas-case-section {
    padding-top: 44px;
    border-top: 1px solid var(--client-story-divider-color);
  }

  .adidas-case-hero + .adidas-case-section {
    margin-top: 50px;
    padding-top: 38px;
  }

  .adidas-case-section > h2 {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--evergreen);
    font-family: var(--font-display);
    font-size: clamp(31px, 9vw, 42px);
    font-weight: 500;
    line-height: 1.12;
    text-align: left;
  }

  .adidas-case-lead {
    max-width: 100%;
    margin: 20px 0 30px;
    color: var(--green);
    font-family: var(--font-body);
    font-size: clamp(21px, 5.6vw, 25px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
  }

  .adidas-case-editorial-callout {
    margin: 26px 0 34px;
    padding: 0;
  }

  .adidas-case-editorial-callout > span {
    margin-bottom: 16px;
  }

  .adidas-case-editorial-callout p {
    /* Keep the editorial emphasis on small screens without turning the long
       statement into an oversized wall of type. */
    font-size: clamp(21px, 5.6vw, 25px);
    line-height: 1.34;
  }

  .adidas-case-columns {
    gap: 24px;
  }

  .adidas-case-columns p,
  .adidas-case-results > p,
  .adidas-case-results__body p,
  .adidas-case-results .adidas-case-results__statement {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
  }

  .adidas-related {
    width: var(--page-rail-width);
    max-width: var(--content-max);
    margin-top: 52px;
    padding-top: 44px;
  }

  .adidas-case-study__paper {
    width: 100%;
    border-radius: 0;
  }

  .adidas-case-columns,
  .adidas-case-results {
    grid-template-columns: 1fr;
  }

  .adidas-case-results__body {
    grid-column: 1;
  }

  .adidas-case-results .adidas-case-results__statement {
    margin-bottom: 0;
  }

  .adidas-case-editorial-callout p.adidas-case-opening,
  .adidas-case-lead.adidas-case-opening,
  .adidas-case-results .adidas-case-results__statement.adidas-case-opening {
    font-size: clamp(21px, 5.6vw, 25px);
    line-height: 1.34;
  }

  .adidas-related__grid {
    padding-block: 38px 68px;
  }

  .adidas-related__card,
  .adidas-related__card:nth-child(3),
  .adidas-related__card:nth-child(6) {
    flex-basis: 100%;
    margin-right: 0;
  }
}

/* Client-story heroes use the same mobile banner contract as every How We
   Think / How We Hold page: shared height, inset, rhythm, and type scale. */
@media (max-width: 820px) {
  .adidas-case-hero {
    min-height: var(--hero-banner-mobile-min-height);
    align-items: end;
    justify-items: stretch;
    text-align: left;
  }

  .adidas-case-hero::before {
    background: var(--adidas-hero-overlay-mobile);
  }

  .adidas-case-hero__media img {
    --adidas-hero-scale-from: 1.03;
    --adidas-hero-scale-to: 1.08;
    --adidas-hero-x-from: 0;
    --adidas-hero-x-to: 0;
    object-position: center;
  }

  .adidas-case-hero__media picture:nth-child(2) img {
    object-position: 52% center;
  }

  .adidas-case-hero__media picture:nth-child(3) img {
    object-position: 46% center;
  }

  .lululemon-case-study-page .adidas-case-hero__media img {
    --adidas-hero-scale-from: 1;
    --adidas-hero-scale-to: 1.035;
    object-position: center;
  }

  .adidas-case-hero__dots {
    right: 18px;
    bottom: 22px;
  }

  .adidas-case-hero__content {
    width: var(--hero-banner-mobile-content-width);
    align-items: flex-start;
    gap: var(--hero-banner-mobile-content-gap);
    margin-inline: auto;
    padding: 0 0 var(--hero-banner-mobile-pad-bottom);
  }

  /* The rotating photography can be light or dark behind the eyebrow. A
     compact opaque pill preserves the client-story label on every frame. */
  .adidas-case-hero .adidas-case-kicker {
    width: max-content;
    max-width: 100%;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(0, 31, 25, 0.18);
    color: var(--evergreen);
    font-size: var(--type-hero-eyebrow-size);
    letter-spacing: var(--type-hero-eyebrow-letter-spacing);
    line-height: var(--type-hero-eyebrow-line-height);
    white-space: nowrap;
  }

  .adidas-case-hero h1 {
    max-width: 100%;
    font-size: var(--type-client-story-hero-heading-mobile-size);
    letter-spacing: -0.02em;
  }

  .adidas-case-deck {
    max-width: var(--type-hero-copy-width);
    margin: 0;
    font-size: var(--type-hero-copy-mobile-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .adidas-case-hero__media img {
    animation: none;
    transition: none;
    transform: none;
  }
}

@media (max-width: 560px) {
  .adidas-case-study {
    padding: 0 0 72px;
  }

  .adidas-case-section {
    width: var(--hero-banner-mobile-content-width);
    padding: 50px 0 44px;
  }

  .adidas-case-section > h2 {
    margin: 0;
    padding: 0;
    font-size: clamp(31px, 9vw, 42px);
  }

  .adidas-case-lead {
    margin: 20px 0 30px;
    font-size: clamp(21px, 5.6vw, 25px);
  }

  .adidas-case-columns p,
  .adidas-case-results > p,
  .adidas-case-results__body p {
    font-size: 16px;
  }

  .adidas-case-results .adidas-case-results__statement {
    font-size: 16px;
  }

  .adidas-case-quote blockquote {
    font-size: var(--testimonial-quote-size);
  }

  .adidas-case-quote figcaption {
    align-items: center;
  }
}

@media (max-width: 420px) {
  .adidas-case-study {
    padding: 0 0 60px;
  }

  .adidas-case-study__paper {
    border-radius: 0;
  }

  .adidas-case-section {
    width: var(--hero-banner-mobile-content-width);
    padding: 50px 0 44px;
  }

  .adidas-case-section > h2 {
    padding: 0;
  }

  .adidas-case-quote blockquote {
    font-size: var(--testimonial-quote-size);
  }

  .adidas-related__copy {
    min-height: 190px;
    padding: 20px;
  }
}

/* Retail Adidas visual is always the shared gradient-grid placeholder. */
.retail-industry-page #story-adidas .retail-story-card__visual {
  background: #005746 url("assets/image-templates/19-icon-ethos-1024x1024.png") center / cover no-repeat !important;
}

.retail-industry-page #story-adidas .retail-story-card__visual img,
.retail-industry-page #story-adidas .retail-story-card__visual picture {
  display: none !important;
}

/* Retail story heading scale: balanced against the 50/50 card layout. */
.retail-industry-page .retail-story-card__body > strong {
  max-width: 17ch;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.1;
}

@media (max-width: 980px) {
  .retail-industry-page .retail-story-card__body > strong {
    font-size: clamp(32px, 4vw, 42px);
  }
}

@media (max-width: 760px) {
  .retail-industry-page .retail-story-card__body > strong {
    font-size: clamp(32px, 9vw, 42px);
  }
}

/* Retail CTA spacing; interaction comes from the shared button component. */
.retail-industry-page .retail-story-card__link {
  margin-top: clamp(32px, 3vw, 44px);
}

/* Retail story cards: compact, collision-safe mobile composition. The media
   becomes landscape, metadata stays on one line, and the CTA reserves enough
   trailing space to clear the persistent mobile navigation controls. */
@media (max-width: 760px) {
  .retail-industry-page .retail-story-card {
    width: 100%;
    max-width: 100%;
  }

  .retail-industry-page .retail-story-card__visual--photo,
  .retail-industry-page .retail-story-card__visual--template {
    aspect-ratio: 4 / 3;
  }

  .retail-industry-page .retail-story-card__body {
    padding: 30px 24px 88px;
  }

  .retail-industry-page .retail-story-card__meta {
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 24px;
    padding: 9px 13px;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .retail-industry-page .retail-story-card__body > strong {
    max-width: 100%;
    font-size: clamp(32px, 9vw, 38px);
    line-height: 1.08;
  }

  .retail-industry-page .retail-story-card__summary {
    max-width: 100%;
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.55;
  }

  .retail-industry-page .retail-story-card__link {
    width: 100%;
    min-height: 58px;
    justify-content: space-between;
    margin-top: 30px;
    padding-inline: 20px;
    font-size: 16px;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .retail-industry-page .retail-story-card__body {
    padding-inline: 20px;
  }

  .retail-industry-page .retail-story-card__meta {
    gap: 6px;
    padding-inline: 11px;
    font-size: 9px;
  }

  .retail-industry-page .retail-story-card__body > strong {
    font-size: clamp(30px, 9.2vw, 35px);
  }

  .retail-industry-page .retail-story-card__link {
    padding-inline: 16px;
    font-size: 15px;
  }
}

/* Global page-rail contract. These shared top-level surfaces use one maximum
   width and one symmetric responsive gutter across pages. */
.page-rail,
[data-page-rail],
.wide-rail,
.phase-editorial,
.strategy-article,
.full-model-plate,
.adidas-related {
  width: var(--page-rail-width);
  margin-inline: auto;
}

/* Footer content follows the same capped rail as every top-level section, so
   its brand, navigation, supplier line, and legal row share identical edges. */
.footer-inner {
  width: var(--page-rail-width);
  margin-inline: auto;
}


/* Government procurement qualifications: compact evidence records pair each
   supplied badge with the verified arrangement details it represents. */
.government-procurement-badges {
  padding: clamp(42px, 4.2vw, 64px) var(--page-rail-inset);
  background: var(--color-surface-cream);
}

.government-procurement-badges__inner {
  width: 100%;
  margin-inline: auto;
  padding-block: clamp(22px, 2.4vw, 32px);
}

.government-procurement-badges__heading {
  display: block;
  padding-bottom: clamp(22px, 2.4vw, 32px);
  border-bottom: 1px solid rgba(0, 87, 70, 0.18);
  margin-bottom: clamp(36px, 3.8vw, 54px);
}

.government-procurement-badges__heading p {
  margin: 0 0 9px;
  color: #6e9c56;
  font: 600 13px/1.4 "Poppins", sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.government-procurement-badges__heading h2 {
  max-width: none;
  margin: 0;
  color: #005746;
  font-family: "Noto Serif Display", Georgia, serif;
  font-size: clamp(28px, 2.45vw, 40px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.government-procurement-badges__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.2vw, 68px);
  align-items: stretch;
  margin-inline: auto;
}

.government-procurement-qualification {
  display: grid;
  grid-template-columns: minmax(144px, 176px) minmax(0, 1fr);
  gap: 22px clamp(24px, 3vw, 46px);
  align-items: start;
  padding-top: 0;
}

.government-procurement-badge {
  display: grid;
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  align-items: start;
  justify-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.government-procurement-badge img {
  display: block;
  width: min(100%, 176px);
  height: auto;
}

.government-procurement-badges.has-badge-reveal .government-procurement-badge {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.96);
  will-change: opacity, transform;
}

.government-procurement-badges.has-badge-reveal.is-badge-reveal-visible .government-procurement-badge {
  animation: procurement-badge-reveal 1800ms var(--motion-ease-soft) both;
  animation-delay: calc(var(--procurement-badge-index, 0) * 240ms);
}

@keyframes procurement-badge-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.government-procurement-qualification__copy {
  min-width: 0;
  padding-top: 12px;
}

.government-procurement-qualification__program {
  margin: 0 0 6px;
  color: #2e7d52;
  font: 600 11px/1.45 "Poppins", sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.government-procurement-qualification h3 {
  margin: 0 0 17px;
  color: #005746;
  font: 500 clamp(18px, 1.45vw, 22px)/1.25 "Poppins", sans-serif;
}

.government-procurement-qualification__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 17px;
}

.government-procurement-qualification__details div {
  min-width: 0;
}

.government-procurement-qualification__details dt {
  margin: 0 0 3px;
  color: #71807d;
  font: 600 10px/1.35 "Poppins", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.government-procurement-qualification__details dd {
  margin: 0;
  color: #26374a;
  font: 400 13px/1.5 "Poppins", sans-serif;
}

.government-procurement-qualification__services {
  display: grid;
  grid-column: 1 / -1;
  /* Compact service labels remain secondary to the qualification details. */
  grid-template-columns: repeat(auto-fit, minmax(100px, 108px));
  gap: var(--space-2);
  justify-content: start;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.government-procurement-qualification__services li {
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #d5dcda;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.46);
  color: #52645f;
  font: 500 13px/1.4 var(--font-body);
  text-align: center;
}

.government-procurement-qualification__cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
}

.government-procurement-qualification__cta svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

@media (max-width: 1040px) {
  .government-procurement-badges__grid {
    grid-template-columns: 1fr;
  }

  .government-procurement-qualification {
    grid-template-columns: minmax(128px, 158px) minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .government-procurement-qualification {
    grid-template-columns: minmax(104px, 128px) minmax(0, 1fr);
    gap: 18px;
  }

  .government-procurement-qualification__details {
    grid-template-columns: 1fr;
    gap: 10px;
  }

}

@media (max-width: 430px) {
  .government-procurement-qualification {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .government-procurement-qualification__services {
    grid-template-columns: repeat(2, minmax(0, 108px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .government-procurement-badges.has-badge-reveal .government-procurement-badge {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Chart.js owns the shared sector-pulse doughnut geometry, animation, hit
   testing, and responsive canvas resolution. HTML carries the narrative data. */
.retail-data-chart {
  padding: var(--sector-pulse-section-padding-block) var(--page-rail-inset);
  background: #ffffff;
}

.retail-data-chart__inner {
  width: 100%;
  display: grid;
  grid-template-columns: var(--sector-pulse-layout-columns);
  gap: var(--sector-pulse-layout-gap);
  align-items: var(--sector-pulse-card-align);
  margin-inline: auto;
  padding-block: var(--sector-pulse-inner-padding-block);
  border-top: 1px solid var(--sector-pulse-divider-color);
  border-bottom: 1px solid var(--sector-pulse-divider-color);
}

#government-data-chart .retail-data-chart__inner {
  border-top: 0;
}

.retail-data-chart__visual {
  min-width: 0;
}

.retail-data-chart__canvas-wrap {
  position: relative;
  width: var(--sector-pulse-chart-width);
  aspect-ratio: 1;
  margin-inline: auto;
}

.retail-data-chart__canvas-wrap canvas {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  inset: 0;
}

.retail-data-chart__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sector-pulse-center-width);
  height: var(--sector-pulse-center-height);
  display: grid;
  grid-template-rows: var(--sector-pulse-center-rows);
  gap: var(--sector-pulse-center-gap);
  align-content: center;
  align-items: center;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
}

.retail-data-chart__center small {
  color: var(--green);
  font-family: var(--font-body);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.retail-data-chart__center span {
  color: var(--retail-chart-active-color, var(--evergreen));
  font-family: var(--font-display);
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 0.95;
}

.retail-data-chart__center strong {
  align-self: stretch;
  display: block;
  width: 120%;
  min-height: 46px;
  margin-left: -10%;
  padding-top: 6px;
  color: var(--slate);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.retail-data-chart__center.is-changing span,
.retail-data-chart__center.is-changing strong {
  animation: retail-chart-center-arrive var(--sector-pulse-center-motion-duration) var(--motion-ease-soft) both;
  transform-origin: center;
}

.retail-data-chart__center.is-changing strong {
  animation-delay: var(--sector-pulse-center-motion-delay);
}

@keyframes retail-chart-center-arrive {
  0% {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(7px) scale(0.88);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.retail-data-chart__hint {
  max-width: 52ch;
  margin: var(--sector-pulse-hint-offset) auto 0;
  color: #6f7f77;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.retail-data-chart__eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.retail-data-chart__content h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: clamp(38px, 3.9vw, 56px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.04;
  text-wrap: balance;
}

.retail-data-chart__introduction {
  max-width: 47ch;
  margin: 24px 0 0;
  color: var(--slate);
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.65;
}

.retail-data-chart__legend {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--sector-pulse-legend-gap);
  margin-top: var(--sector-pulse-legend-offset);
}

.retail-data-chart__item {
  --retail-chart-color: var(--sector-pulse-color-1);
  --retail-chart-ink: var(--evergreen);
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: var(--sector-pulse-card-columns);
  gap: var(--sector-pulse-card-gap);
  align-items: center;
  height: 100%;
  min-height: var(--sector-pulse-card-min-height);
  padding: var(--sector-pulse-card-padding);
  border: 1px solid transparent;
  border-radius: var(--sector-pulse-card-radius);
  background: #f1f3f2;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    background-color 320ms var(--motion-ease-soft),
    border-color 280ms var(--motion-ease),
    box-shadow 360ms var(--motion-ease-soft);
}

.retail-data-chart__item--commerce {
  --retail-chart-color: var(--sector-pulse-color-2);
}

.retail-data-chart__item--operations {
  --retail-chart-color: var(--sector-pulse-color-3);
}

.retail-data-chart__item--ecosystem {
  --retail-chart-color: var(--sector-pulse-color-4);
}

.retail-data-chart__item:hover,
.retail-data-chart__item:focus-visible {
  border-color: color-mix(in srgb, var(--retail-chart-color) 32%, transparent);
  background: #f7f8f7;
  box-shadow: 0 10px 24px rgba(0, 87, 70, 0.05);
}

.retail-data-chart__item.is-active {
  border-color: color-mix(in srgb, var(--retail-chart-color) 42%, transparent);
  background: #f7f8f7;
  box-shadow: 0 10px 24px rgba(0, 87, 70, 0.06);
}

.retail-data-chart__item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Theme percentages are readable HTML alongside the canvas; retail-sector-chart.js consumes these values rather than maintaining a second dataset. */
.retail-data-chart__metric {
  display: grid;
  align-self: start;
  width: var(--sector-pulse-metric-width);
  height: var(--sector-pulse-metric-height);
  place-items: center;
  border-radius: var(--sector-pulse-metric-radius);
  background: #ffffff;
  color: var(--retail-chart-color);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1;
  transition:
    box-shadow 420ms var(--motion-ease-soft),
    transform 420ms var(--motion-ease-soft);
}

.retail-data-chart__item:hover .retail-data-chart__metric,
.retail-data-chart__item:focus-visible .retail-data-chart__metric,
.retail-data-chart__item.is-active .retail-data-chart__metric {
  box-shadow: 0 9px 20px color-mix(in srgb, var(--retail-chart-color) 14%, transparent);
  transform: translateY(-2px);
}

.retail-data-chart__item-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-block: var(--sector-pulse-copy-padding-block);
  padding-right: 18px;
  font-family: var(--font-body);
}

.retail-data-chart__item-copy strong {
  color: var(--retail-chart-ink);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.retail-data-chart__item-copy small {
  color: var(--retail-chart-ink);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .retail-data-chart {
    --sector-pulse-layout-columns: minmax(390px, 1fr) minmax(310px, 0.9fr);
    --sector-pulse-layout-gap: 36px;
    --sector-pulse-card-columns: 76px minmax(0, 1fr);
    --sector-pulse-card-gap: 15px;
    --sector-pulse-card-padding: 14px 16px 14px 10px;
    --sector-pulse-copy-padding-block: 6px;
    --sector-pulse-metric-width: 76px;
    --sector-pulse-metric-height: 90px;
  }

  .retail-data-chart__metric { font-size: 27px; }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .retail-data-chart {
    --sector-pulse-layout-columns: minmax(0, 1fr) minmax(330px, 0.92fr);
    --sector-pulse-layout-gap: 48px 36px;
  }

  .retail-data-chart__inner {
    align-items: start;
  }

  .retail-data-chart__content {
    display: contents;
  }

  .retail-data-chart__heading {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 16px 48px;
    align-items: end;
  }

  .retail-data-chart__eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .retail-data-chart__introduction {
    margin-top: 0;
  }

  .retail-data-chart__visual {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .retail-data-chart__legend {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    margin-top: 0;
  }
}

@media (max-width: 820px) {
  .retail-data-chart {
    --sector-pulse-layout-columns: 1fr;
    --sector-pulse-layout-gap: 48px;
    --sector-pulse-chart-width: var(--sector-pulse-chart-width-stacked);
  }

  .retail-data-chart__content {
    display: contents;
  }

  .retail-data-chart__heading {
    order: 1;
    display: block;
    width: 100%;
    max-width: 640px;
  }

  .retail-data-chart__visual {
    order: 2;
  }

  .retail-data-chart__legend {
    order: 3;
    width: 100%;
    max-width: 640px;
    margin-top: 0;
  }

}

@media (max-width: 560px) {
  .retail-data-chart {
    --sector-pulse-section-padding-block: 36px;
    --sector-pulse-inner-padding-block: 64px;
    --sector-pulse-card-columns: 72px minmax(0, 1fr);
    --sector-pulse-card-gap: 14px;
    --sector-pulse-card-padding: 12px 14px 12px 10px;
    --sector-pulse-copy-padding-block: 5px;
    --sector-pulse-metric-width: 72px;
    --sector-pulse-metric-height: 94px;
  }

  .retail-data-chart__content h2 {
    font-size: clamp(35px, 10.5vw, 46px);
  }

  .retail-data-chart__hint {
    max-width: 30ch;
    margin-inline: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  .retail-data-chart__center.is-changing span,
  .retail-data-chart__center.is-changing strong,
  .retail-data-chart__item {
    animation: none;
    transition: none;
  }

  .retail-data-chart__metric {
    transition: none;
  }
}


/* Industry landing-page body modules must start and end on the same rail as
   their hero copy and the shared footer. Retail is the only industry route
   with a full-width story deck, so its section padding consumes the rail inset
   directly and the story card fills the resulting canonical content width. */
.retail-industry-page .retail-story-feature {
  padding-inline: var(--page-rail-inset);
}

/* Ethos previously kept a separate extra-wide card rail. Its primary body
   modules now consume the same capped rail as the hero copy and footer. */
.ethos-intro,
.ethos-principles,
.ethos-application,
.ethos-cta {
  width: var(--page-rail-width);
  max-width: var(--content-max);
  margin-inline: auto;
}

/* How We Hold nests its major modules inside `.wide-rail`; nested modules must
   fill that rail rather than applying the global viewport gutter again. */
.wide-rail > .strategy-article,
.wide-rail > .full-model-plate,
.wide-rail > .model-section-intro {
  width: 100%;
  margin-inline: 0;
}

.wide-rail > .model-section-intro {
  padding-inline: 0;
}

/* The upcoming How We Hold preview sits alongside live model links as an
   informational card without a destination. */
.family-mega__grid--hold .family-card--ai-condition {
  position: relative;
  isolation: isolate;
  min-height: 324px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: clamp(22px, 2vw, 30px);
  border-color: transparent;
  border-radius: var(--mega-menu-card-radius);
  background-color: var(--evergreen);
  background-image: url("assets/optimized/ai-design-condition.webp?v=hq1");
  background-position: center;
  background-size: cover;
  color: var(--color-text-inverse);
}

.family-mega__grid--hold .family-card--ai-condition::before {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
  display: block;
  background: linear-gradient(
    145deg,
    rgba(0, 48, 39, 0.985) 0%,
    rgba(0, 69, 56, 0.95) 56%,
    rgba(0, 77, 62, 0.91) 100%
  );
  transition: opacity 420ms var(--motion-ease);
}

.family-mega__grid--hold .family-card--ai-condition .family-card__preview {
  display: none;
}

.family-mega__grid--hold .family-card--ai-condition .family-card__eyebrow {
  margin-bottom: 12px;
  color: rgba(226, 238, 234, 0.84);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  line-height: var(--type-eyebrow-line-height);
  text-transform: uppercase;
}

.family-mega__grid--hold .family-card--ai-condition strong {
  max-width: 10ch;
  margin: 0;
  padding: 0;
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: clamp(25px, 2vw, 32px);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}

.family-mega__grid--hold .family-card--ai-condition small {
  max-width: 26ch;
  margin: 14px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  line-height: 1.42;
}

.family-mega__grid--hold .family-card--ai-condition small b {
  font-weight: 600;
}

.family-mega__grid--hold .family-card--ai-condition .family-card__link {
  margin-top: auto;
  padding: 20px 0 0;
  color: var(--color-text-inverse);
}

@media (max-width: 820px) {
  .family-mega__grid--hold .family-card--ai-condition {
    min-height: 360px;
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .family-mega__grid--hold .family-card--ai-condition,
  .family-mega__grid--hold .family-card--ai-condition::before {
    transition: none;
  }
}

/* The How We Hold model pages share one model-to-article rhythm.
   Pages whose article sits after the model rail must not stack the rail's
   bottom padding with the article's own top padding. */
body:is(
  [data-page="human-systems-organizational-design"],
  [data-page="integrated-enterprise-planning"],
  [data-page="strategic-development-planning-facilitation"],
  [data-page="cosd"]
) .strategy-article {
  padding-top: 0;
}

body:is(
  [data-page="human-systems-organizational-design"],
  [data-page="integrated-enterprise-planning"],
  [data-page="strategic-development-planning-facilitation"]
) .wide-rail {
  padding-bottom: 0;
}

@media (max-width: 760px) {
  :root {
    --page-gutter-inline: 20px;
  }
}

/* Canonical mobile rotating-hero layout. Industry artwork may be declared in
   HTML or injected by `script.js`; both paths use the same dot and copy rules. */
@media (max-width: 820px) {
  .industry-landing-page .industry-hero__dots,
  .industry-landing-page .industry-energy-hero__dots,
  .adidas-case-study-page .adidas-case-hero__dots {
    right: var(--hero-pagination-mobile-inline);
    bottom: var(--hero-pagination-mobile-bottom);
    left: auto;
  }

  .industry-landing-page .about-landing-hero__content,
  .adidas-case-study-page .adidas-case-hero__content {
    padding-bottom: var(--hero-pagination-mobile-content-clearance);
  }
}

/* Portrait tablets use the portrait hero sources, but their wider stage can
   otherwise pull faces above the crop. Anchor the two people-led industry
   compositions to the top while leaving phone and landscape framing intact. */
@media (min-width: 600px) and (max-width: 820px) and (orientation: portrait) {
  .industry-financial-hero__media img,
  .industry-financial-hero__media picture:nth-child(2) img {
    object-position: 68% top;
    transform-origin: center top;
  }

  .industry-government-hero__media img,
  .industry-government-hero__media picture:first-child img,
  .industry-government-hero__media picture:nth-child(2) img {
    object-position: 80% top;
    transform-origin: center top;
  }
}

@media (max-width: 760px) {
  .what-mega__rail {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ethos-hero__image {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
    will-change: auto;
  }
}

/* COSD and HSOD model-level rows lead with the level copy, then anchor the circle
   beneath it while the explanatory copy stays on the right. */
body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__row--level {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas:
    "heading copy"
    "visual copy";
  column-gap: clamp(20px, 2.2vw, 32px);
  row-gap: 28px;
  align-items: start;
}

body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__row--level > .phase-editorial__level-visual {
  grid-area: visual;
}

body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__row--level > .phase-editorial__heading {
  grid-area: heading;
}

body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__row--level > .phase-editorial__copy {
  grid-area: copy;
}

body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__heading p {
  max-width: min(100%, 40ch);
  color: #2e7d52;
  text-wrap: pretty;
}

body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__copy p {
  text-wrap: pretty;
}

body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__heading p {
  max-width: min(100%, 40ch);
  color: #2e7d52;
  text-wrap: pretty;
}

body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__copy p {
  text-wrap: pretty;
}

body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__row--context {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas:
    "heading copy"
    "visual copy";
  column-gap: clamp(20px, 2.2vw, 32px);
  row-gap: 28px;
  align-items: start;
}

body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__row--context > .phase-editorial__level-visual {
  grid-area: visual;
}

body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__row--context > .phase-editorial__heading {
  grid-area: heading;
}

body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__row--context > .phase-editorial__copy {
  grid-area: copy;
}

/* On wide layouts, align model-level explanatory copy with the large heading
   rather than the smaller eyebrow label above it. */
@media (min-width: 1025px) {
  body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__row--level > .phase-editorial__copy,
  body[data-page="integrated-enterprise-planning"] .phase-editorial__row--context > .phase-editorial__copy,
  body[data-page="strategic-development-planning-facilitation"] .phase-editorial__row--context > .phase-editorial__copy {
    padding-top: 30px;
  }

  body[data-page="cosd"] .wide-rail,
  body[data-page="integrated-enterprise-planning"] .wide-rail {
    padding-bottom: 56px;
  }

  body[data-page="cosd"] .wide-rail > .strategy-article,
  body[data-page="integrated-enterprise-planning"] .wide-rail > .strategy-article {
    padding-bottom: 40px;
  }

  body[data-page="cosd"] .strategy-article__inner,
  body[data-page="integrated-enterprise-planning"] .strategy-article__inner,
  body[data-page="strategic-development-planning-facilitation"] .strategy-article__inner {
    padding-bottom: 44px;
  }

  body[data-page="strategic-development-planning-facilitation"] .strategy-article {
    padding-bottom: 40px;
  }
}

/* Planning phase columns are desktop-only; smaller screens inherit the shared
   single-column layout so each description follows its own phase heading. */
@media (min-width: 1025px) {
  body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial--framework > .phase-editorial__row:not(.phase-editorial__row--context):not(.phase-editorial__row--ethos) {
    grid-template-columns: minmax(300px, 404px) minmax(0, 1fr);
    gap: clamp(32px, 3vw, 40px);
    min-height: clamp(340px, 24vw, 390px);
    padding-block: clamp(50px, 5.6vw, 78px);
  }
}

/* Every How We Hold framework uses this shared compact ethos carousel between
   the model-level and phase sections. One modifier owns its tone, responsive
   layout, automatic advancement, keyboard tabs, and reduced-motion treatment. */
.phase-editorial__row--ethos-shared {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "heading carousel"
    "bridge carousel";
  align-items: start;
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  gap: 14px clamp(32px, 4vw, 64px);
  margin-inline: auto;
  margin-block: clamp(18px, 2vw, 28px);
  padding: clamp(30px, 3.2vw, 44px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 8% 15%, rgba(190, 207, 153, 0.18), transparent 34%),
    linear-gradient(145deg, #faf8f3 0%, #f6f2eb 100%);
}

.phase-editorial__row--ethos-shared > .phase-editorial__heading {
  grid-area: heading;
  display: block;
  align-self: end;
  max-width: none;
  margin: 0;
  text-align: left;
}

.phase-editorial__row--ethos-shared .phase-editorial__heading span {
  margin-bottom: 8px;
}

.phase-editorial__row--ethos-shared .phase-editorial__heading h2 {
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1;
}

.phase-editorial__row--ethos-shared .cosd-ethos__bridge-copy {
  grid-area: bridge;
  align-self: start;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--slate);
  font-size: clamp(15px, 1.12vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}

.phase-editorial__row--ethos-shared .cosd-ethos__bridge-copy::before {
  display: none;
}

.phase-editorial__row--ethos-shared > .cosd-ethos {
  grid-area: carousel;
  align-self: stretch;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.phase-editorial__row--ethos-shared .cosd-ethos__stage {
  width: 100%;
  height: clamp(210px, 17vw, 232px);
  min-height: 210px;
}

.phase-editorial__row--ethos-shared .cosd-ethos__card {
  min-height: 0;
  border: 1px solid rgba(0, 87, 70, 0.08);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(21, 25, 26, 0.075);
  transform: translate3d(22px, 0, 0) scale(0.985);
}

.phase-editorial__row--ethos-shared .cosd-ethos__card.is-active {
  transform: translate3d(0, 0, 0) scale(1);
}

.phase-editorial__row--ethos-shared .cosd-ethos__card-top {
  display: grid;
  grid-template-columns: clamp(132px, 10vw, 150px) minmax(0, 1fr);
  grid-template-areas:
    "icon kicker"
    "icon title"
    "icon copy";
  align-content: center;
  align-items: center;
  column-gap: clamp(20px, 2.4vw, 32px);
  row-gap: 7px;
  padding: clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 34px);
  text-align: left;
}

.phase-editorial__row--ethos-shared .cosd-ethos__card-icon {
  grid-area: icon;
  width: clamp(132px, 10vw, 150px);
  height: clamp(132px, 10vw, 150px);
  margin: 0;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0, 87, 70, 0.12);
}

.phase-editorial__row--ethos-shared .cosd-ethos__card-kicker {
  grid-area: kicker;
  align-self: end;
  justify-self: start;
  min-height: 22px;
  margin: 0;
}

.phase-editorial__row--ethos-shared .cosd-ethos__card h3 {
  grid-area: title;
  margin: 0;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.04;
  text-align: left;
}

.phase-editorial__row--ethos-shared .cosd-ethos__card-top p {
  grid-area: copy;
  max-width: 620px;
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.38;
  text-align: left;
  text-wrap: pretty;
}

.phase-editorial__row--ethos-shared .cosd-ethos__tabs {
  width: 100%;
  margin-top: 0;
  gap: 4px;
  padding: 5px;
  border-radius: 21px;
  box-shadow: 0 10px 28px rgba(0, 87, 70, 0.14);
}

.phase-editorial__row--ethos-shared .cosd-ethos__tab {
  min-height: 50px;
  gap: 3px;
  padding: 6px;
  border-radius: 16px;
}

.phase-editorial__row--ethos-shared .cosd-ethos__tab span {
  font-size: 9px;
}

.phase-editorial__row--ethos-shared .cosd-ethos__tab strong {
  font-size: clamp(11px, 0.82vw, 13px);
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "heading carousel"
    "bridge carousel";
  align-items: start;
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  gap: 14px clamp(32px, 4vw, 64px);
  margin-inline: auto;
  margin-block: clamp(18px, 2vw, 28px);
  padding: clamp(30px, 3.2vw, 44px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 8% 15%, rgba(190, 207, 153, 0.18), transparent 34%),
    linear-gradient(145deg, #faf8f3 0%, #f6f2eb 100%);
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) > .phase-editorial__heading {
  grid-area: heading;
  display: block;
  align-self: end;
  max-width: none;
  margin: 0;
  text-align: left;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .phase-editorial__heading span {
  margin-bottom: 8px;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .phase-editorial__heading h2 {
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__bridge-copy {
  grid-area: bridge;
  align-self: start;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--slate);
  font-size: clamp(15px, 1.12vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__bridge-copy::before {
  display: none;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) > .cosd-ethos {
  grid-area: carousel;
  align-self: stretch;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__stage {
  width: 100%;
  height: clamp(210px, 17vw, 232px);
  min-height: 210px;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card {
  min-height: 0;
  border: 1px solid rgba(0, 87, 70, 0.08);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(21, 25, 26, 0.075);
  transform: translate3d(22px, 0, 0) scale(0.985);
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card.is-active {
  transform: translate3d(0, 0, 0) scale(1);
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-top {
  display: grid;
  grid-template-columns: clamp(132px, 10vw, 150px) minmax(0, 1fr);
  grid-template-areas:
    "icon kicker"
    "icon title"
    "icon copy";
  align-content: center;
  align-items: center;
  column-gap: clamp(20px, 2.4vw, 32px);
  row-gap: 7px;
  padding: clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 34px);
  text-align: left;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-icon {
  grid-area: icon;
  width: clamp(132px, 10vw, 150px);
  height: clamp(132px, 10vw, 150px);
  margin: 0;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0, 87, 70, 0.12);
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-kicker {
  grid-area: kicker;
  align-self: end;
  justify-self: start;
  min-height: 22px;
  margin: 0;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card h3 {
  grid-area: title;
  margin: 0;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.04;
  text-align: left;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-top p {
  grid-area: copy;
  max-width: 620px;
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.38;
  text-align: left;
  text-wrap: pretty;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__tabs {
  width: 100%;
  margin-top: 0;
  gap: 4px;
  padding: 5px;
  border-radius: 21px;
  box-shadow: 0 10px 28px rgba(0, 87, 70, 0.14);
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__tab {
  min-height: 50px;
  gap: 3px;
  padding: 6px;
  border-radius: 16px;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__tab span {
  font-size: 9px;
}

.phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__tab strong {
  font-size: clamp(11px, 0.82vw, 13px);
}

@media (max-width: 1024px) {
  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "bridge"
      "carousel";
    gap: 14px;
    padding: 30px 24px;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) > .phase-editorial__heading,
  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__bridge-copy {
    width: min(100%, 660px);
    margin-inline: auto;
    text-align: center;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) > .cosd-ethos {
    width: min(100%, 760px);
    margin: 10px auto 0;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__stage {
    width: 100%;
    height: 220px;
    min-height: 220px;
  }

  .phase-editorial__row--ethos-shared {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "bridge"
      "carousel";
    gap: 14px;
    padding: 30px 24px;
  }

  .phase-editorial__row--ethos-shared > .phase-editorial__heading,
  .phase-editorial__row--ethos-shared .cosd-ethos__bridge-copy {
    width: min(100%, 660px);
    margin-inline: auto;
    text-align: center;
  }

  .phase-editorial__row--ethos-shared > .cosd-ethos {
    width: min(100%, 760px);
    margin: 10px auto 0;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__stage {
    width: 100%;
    height: 220px;
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) {
    padding: 26px 16px 28px;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__stage {
    height: 362px;
    min-height: 362px;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker"
      "icon"
      "title"
      "copy";
    justify-items: center;
    row-gap: 8px;
    padding: 22px 22px 24px;
    text-align: center;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-icon {
    width: min(42vw, 138px);
    height: min(42vw, 138px);
    border-radius: 22px;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-kicker {
    justify-self: center;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card h3 {
    font-size: clamp(26px, 7vw, 31px);
    line-height: 1.02;
    text-align: center;
    text-wrap: balance;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__card-top p {
    max-width: 30ch;
    font-size: 13.5px;
    line-height: 1.34;
    text-align: center;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__tab {
    min-width: 0;
    min-height: 54px;
    flex: initial;
    scroll-snap-align: none;
  }

  .phase-editorial--framework .phase-editorial__row--ethos:not(.phase-editorial__row--ethos-shared) .cosd-ethos__tab:last-child {
    grid-column: 1 / -1;
  }

  .phase-editorial__row--ethos-shared {
    padding: 26px 16px 28px;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__stage {
    height: 362px;
    min-height: 362px;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__card-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker"
      "icon"
      "title"
      "copy";
    justify-items: center;
    row-gap: 8px;
    padding: 22px 22px 24px;
    text-align: center;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__card-icon {
    width: min(42vw, 138px);
    height: min(42vw, 138px);
    border-radius: 22px;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__card-kicker {
    justify-self: center;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__card h3 {
    font-size: clamp(26px, 7vw, 31px);
    line-height: 1.02;
    text-align: center;
    text-wrap: balance;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__card-top p {
    max-width: 30ch;
    font-size: 13.5px;
    line-height: 1.34;
    text-align: center;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__tab {
    min-width: 0;
    min-height: 54px;
    flex: initial;
    scroll-snap-align: none;
  }

  .phase-editorial__row--ethos-shared .cosd-ethos__tab:last-child {
    grid-column: 1 / -1;
  }
}

body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__level-visual {
  width: min(100%, 172px);
  aspect-ratio: 1;
  margin: 0;
  justify-self: start;
}

body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__level-visual {
  width: min(100%, 172px);
  aspect-ratio: 1;
  margin: 0;
  justify-self: start;
}

body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__level-visual img,
body[data-page="integrated-enterprise-planning"] .phase-editorial__level-visual img,
body[data-page="strategic-development-planning-facilitation"] .phase-editorial__level-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* SDPF uses the same circular model-detail position as COSD and IEP. These
   intentionally neutral placeholders can be replaced by supplied artwork
   without changing the shared row component or its spacing. */
body[data-page="strategic-development-planning-facilitation"] .phase-editorial__level-visual--placeholder {
  position: relative;
  display: grid;
  place-content: center;
  gap: 5px;
  overflow: hidden;
  border: 1px dashed rgba(0, 87, 70, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(190, 207, 153, 0.22), transparent 38%),
    #f6f2eb;
  color: rgba(0, 87, 70, 0.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

body[data-page="strategic-development-planning-facilitation"] .phase-editorial__placeholder-index {
  color: var(--green);
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* Preserve supplied How We Hold tablet artwork without the shared brown tint or
   grain treatment. An inset ring follows the complete rounded shape and avoids
   the small antialiasing seam that appeared in the standard border. */
body[data-page="human-systems-organizational-design"] .strategy-article__visual--clean,
body[data-page="cosd"] .strategy-article__visual--clean,
body[data-page="integrated-enterprise-planning"] .strategy-article__visual--clean,
body[data-page="strategic-development-planning-facilitation"] .strategy-article__visual--clean {
  position: relative;
  border: 0;
  background-color: #f7f7f5;
  background-image: none;
  box-shadow: 0 16px 36px rgba(21, 25, 26, 0.055);
}

body[data-page="human-systems-organizational-design"] .strategy-article__visual--clean::after,
body[data-page="cosd"] .strategy-article__visual--clean::after,
body[data-page="integrated-enterprise-planning"] .strategy-article__visual--clean::after,
body[data-page="strategic-development-planning-facilitation"] .strategy-article__visual--clean::after {
  position: absolute;
  z-index: 2;
  content: "";
  inset: 0;
  border: 1px solid rgba(0, 87, 70, 0.12);
  border-radius: inherit;
  box-sizing: border-box;
  background: none;
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
}

body[data-page="human-systems-organizational-design"] .strategy-article__visual--clean img,
body[data-page="cosd"] .strategy-article__visual--clean img,
body[data-page="integrated-enterprise-planning"] .strategy-article__visual--clean img,
body[data-page="strategic-development-planning-facilitation"] .strategy-article__visual--clean img {
  filter: none;
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--card-media-zoom-duration) var(--card-media-zoom-ease);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="human-systems-organizational-design"] .strategy-article__visual--clean:hover img,
  body[data-page="cosd"] .strategy-article__visual--clean:hover img,
  body[data-page="integrated-enterprise-planning"] .strategy-article__visual--clean:hover img,
  body[data-page="strategic-development-planning-facilitation"] .strategy-article__visual--clean:hover img {
    transform: scale(var(--card-media-zoom-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="human-systems-organizational-design"] .strategy-article__visual--clean img,
  body[data-page="cosd"] .strategy-article__visual--clean img,
  body[data-page="integrated-enterprise-planning"] .strategy-article__visual--clean img,
  body[data-page="strategic-development-planning-facilitation"] .strategy-article__visual--clean img {
    transform: none;
    transition: none;
  }
}

@media (max-width: 1024px) {
  body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__row--level,
  body[data-page="integrated-enterprise-planning"] .phase-editorial__row--context,
  body[data-page="strategic-development-planning-facilitation"] .phase-editorial__row--context {
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "heading"
      "copy";
    gap: 24px;
  }

  body:is([data-page="cosd"], [data-page="human-systems-organizational-design"]) .phase-editorial__level-visual {
    width: min(42vw, 156px);
  }

  body:is([data-page="integrated-enterprise-planning"], [data-page="strategic-development-planning-facilitation"]) .phase-editorial__level-visual {
    width: min(42vw, 156px);
  }
}

/* Canonical mega-menu interaction contract. Menu IDs deliberately outrank the
   historical card-family and elevated-card rules above. The card never moves;
   only clipped artwork zooms. Keep non-menu cards and page diagrams independent. */
:is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card, .what-hub-card, .implementation-feature, .industry-card, .family-card, .signal-mega__quick-link, .about-card) {
  --card-lift-distance: 0px;
  --card-lift-scale: 1;
  border: 1px solid var(--mega-menu-card-border);
  border-radius: var(--mega-menu-card-radius);
  box-shadow: var(--mega-menu-card-shadow);
  transform: none;
  translate: none;
  scale: none;
  will-change: auto;
  transition: border-color var(--mega-menu-card-duration) var(--mega-menu-card-ease),
    box-shadow var(--mega-menu-card-duration) var(--mega-menu-card-ease),
    opacity var(--motion-slow) var(--motion-ease);
  transition-delay: 0s;
}

:is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card, .what-hub-card, .implementation-feature, .industry-card, .family-card, .signal-mega__quick-link, .about-card):is(:hover, :focus-visible, :focus-within) {
  border-color: var(--mega-menu-card-border-hover);
  box-shadow: var(--mega-menu-card-shadow-hover);
  transform: none;
  translate: none;
  scale: none;
}

:is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card__media, .implementation-feature__media, .industry-card__media, .family-card__preview, .signal-mega__quick-media, .about-card__media) {
  border-bottom-color: var(--mega-menu-card-border);
}

:is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card__media, .implementation-feature__media, .industry-card__media, .family-card__preview, .signal-mega__quick-media, .about-card__media) img {
  transform: translateZ(0) scale(1);
  transition: transform var(--mega-menu-media-duration) var(--mega-menu-media-ease),
    opacity var(--motion-slow) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card, .what-hub-card, .implementation-feature, .industry-card, .family-card, .signal-mega__quick-link, .about-card):is(:hover, :focus-visible, :focus-within) :is(.what-card__media, .implementation-feature__media, .industry-card__media, .family-card__preview, .signal-mega__quick-media, .about-card__media) img {
    transform: translateZ(0) scale(var(--mega-menu-media-scale));
  }
}

/* Reset legacy hover transforms for touch and reduced-motion environments. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  :is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card, .what-hub-card, .implementation-feature, .industry-card, .family-card, .signal-mega__quick-link, .about-card):is(:hover, :focus-visible, :focus-within) :is(.what-card__media, .implementation-feature__media, .industry-card__media, .family-card__preview, .signal-mega__quick-media, .about-card__media) img {
    transform: translateZ(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card, .what-hub-card, .implementation-feature, .industry-card, .family-card, .signal-mega__quick-link, .about-card),
  :is(#what-menu, #industries-menu, #how-we-hold-menu, #signal-evo-menu, #about-menu) :is(.what-card__media, .implementation-feature__media, .industry-card__media, .family-card__preview, .signal-mega__quick-media, .about-card__media) img {
    transition: none;
  }
}

/* Global image component. Paint pending native images in place: no wrapper, changed
   dimensions, source replacement, or interference with loaded-image hover transforms. */
img[data-nka-image-state="loading"] {
  background: transparent !important;
  opacity: 0 !important;
  animation: none !important;
}
img[data-nka-image-state="error"] {
  opacity: 1 !important;
}
svg image[data-nka-image-state="loading"] { visibility: hidden; }
/* The shared controller owns readiness; old components retain only their reveal
   and hover effects, not an additional loading placeholder. */
[data-image-reveal].is-loading { opacity: 1; }

/* Compact mega-menu copy grows together without changing desktop cards or drawer labels. */
@media (max-width: 1024px) {
  :is(.what-mega, .industry-mega, .about-mega) {
    --type-mega-card-title: 1.25rem;
    --type-mega-card-copy-size: .96875rem;
    --mega-card-cta-font-size: .90625rem;
    --type-mobile-mega-heading: 1.625rem;
  }

  :is(.industry-mega, .about-mega:not(.family-mega)) h2 {
    font-size: var(--type-mobile-mega-heading);
  }

  .signal-mega .family-mega__grid--signal .signal-mega__feature .signal-mega__feature-body > small,
  .family-mega .family-mega__grid .family-card small {
    font-size: var(--type-mega-card-copy-size);
  }

  .family-mega .family-mega__grid .family-card:not(.family-card--ai-condition) strong {
    font-size: var(--type-mega-card-title);
  }

  :is(.what-mega, .industry-mega, .about-mega) :is(.about-card__description, .what-card__description, .industry-card p, .family-card small) {
    font-size: var(--type-mega-card-copy-size);
  }

  :is(.what-mega, .industry-mega, .about-mega) :is(.about-card__link, .what-card__link, .industry-card__link, .family-card__link) {
    font-size: var(--mega-card-cta-font-size);
  }
}