/* Built from css/modules/ edit modules, then: npm run build:css */
/* Auto-generated entry — do not edit; rebuild with npm run build:css */

/* <<< fonts.css */
/* Forma DJR Display and Forma DJR Micro are loaded from Adobe Fonts in index.html. */

/* >>> fonts.css */


/* <<< tokens.css */
/* Package reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Native smooth scroll fights ScrollTrigger scrub — keep auto for buttery pins */
  scroll-behavior: auto;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
video {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
}

/* Prefer comfortable reading measure in prose blocks */
p,
.arctic-wolf-spotlight-reveal__description,
.arctic-wolf-tile-grid__card-description,
.arctic-wolf-scroll-tiles__tile-description {
  font-family: var(--font-body);
  font-weight: 500;
  text-wrap: pretty;
}
/*
p {
  font-size: 1rem !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}*/

/* >>> tokens.css */


/* <<< tokens-colors.css */
/* ==========================================================================
   Arctic Wolf — baked brand color tokens (single-client package)
   Edit here; no JSON or runtime token files required.
   ========================================================================== */

:root,
.client-theme {
  /* --- Brand palette --- */
  --color-brand: #0059b2;
  --color-brand-hover: #121c42;
  --color-accent: #2eeded;
  --color-text-primary: #24a3e3;
  --color-text-secondary: #1c1c1c;
  --color-bg-page: #f7eef7;
  --color-bg-subtle: #e4edfa;
  --color-bg-dark: #182a3a;

  /* --- Extended neutrals / helpers --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-ink: #1c1c1c;
  --color-navy: #121c42;
  --color-blue: #0059b2;
  --color-sky: #24a3e3;
  --color-cyan: #2eeded;
  --color-aqua: #00aaff;
  --color-btn-start: #0066ff;
  --color-btn-end: #47fffa;
  --color-btn-text: #0b122a;

  /* --- Semantic aliases --- */
  --color-text-on-brand: var(--color-white);
  --color-text-inverse: var(--color-white);
  --color-border: color-mix(in srgb, var(--color-navy) 12%, transparent);
  --color-border-strong: color-mix(in srgb, var(--color-navy) 22%, transparent);

  /* --- Typography stacks --- */
  --font-display: 'forma-djr-display', system-ui, sans-serif;
  --font-body: 'forma-djr-micro', system-ui, sans-serif;

  /* Shared CTA gradient defaults */
  --aw-btn-gradient-start: var(--color-btn-start);
  --aw-btn-gradient-end: var(--color-btn-end);
  --aw-btn-text: var(--color-btn-text);
}

/* >>> tokens-colors.css */


/* <<< tokens-typography.css */
/* ==========================================================================
   TOKENS / TYPOGRAPHY
   Uses Forma DJR Display and Forma DJR Micro from Adobe Fonts
   ========================================================================== */

:root {
  --font-display: 'forma-djr-display', system-ui, sans-serif;
  --font-body:     'forma-djr-micro', system-ui, sans-serif;
  --font-mono:     'forma-djr-micro', system-ui, sans-serif;

  --text-xs:    0.64rem;
  --text-sm:    0.8rem;
  --text-base:  1rem;
  --text-md:    1.25rem;
  --text-lg:    1.563rem;
  --text-xl:    1.953rem;
  --text-2xl:   2.441rem;
  --text-3xl:   3.052rem;
  --text-4xl:   3.815rem;
  --text-5xl:   4.768rem;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;
  --leading-loose:    2.0;

  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  --font-heading:      var(--font-display);
  --font-subheading:   var(--font-body);
  --font-label:        var(--font-body);
  --font-cta:          var(--font-body);
}

/* >>> tokens-typography.css */


/* <<< tokens-spacing.css */
/* ==========================================================================
   TOKENS / SPACING
   ========================================================================== */

:root {
  --space-0:    0;
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;
  --space-40:   10rem;
  --space-48:   12rem;

  --section-padding-sm:   var(--space-12);
  --section-padding-md:   var(--space-20);
  --section-padding-lg:   var(--space-32);
  --section-padding-xl:   var(--space-40);

  /* Section shell — replaces Tailwind py-* on page builder roots */
  --section-shell-y: var(--space-16);
  --section-shell-y-md: var(--space-24);
  --section-shell-y-compact: var(--space-12);
  --section-shell-y-compact-md: var(--space-16);
  --section-shell-y-faq-md: var(--space-20);
  --section-shell-y-tight: var(--space-8);
  --section-shell-y-tight-md: var(--space-10);
  --section-shell-y-footer-md: var(--space-20);

  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;
  --container-2xl:   1440px;
  --container-full:  100%;

  --container-default: var(--container-xl);
  --container-padding: var(--space-6);

  /* Brand/content containers (used by brand blocks via var(--content-max-width)) */
  /* Go big on large screens: up to ~1920px max */
  --content-max-width: clamp(72rem, 94vw, 120rem);

  --radius-none:   0;
  --radius-sm:     0.25rem;
  --radius-md:     0.5rem;
  --radius-lg:     0.75rem;
  --radius-xl:     1rem;
  --radius-2xl:    1.5rem;
  --radius-3xl:    2rem;
  --radius-full:   9999px;

  --radius-default: var(--radius-lg);

  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  --z-below:     -1;
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;
}

/* >>> tokens-spacing.css */


/* <<< tokens-motion.css */
/* ==========================================================================
   TOKENS / MOTION
   Animation duration, easing, and delay tokens.
   Used by both CSS animations and GSAP utilities.
   ========================================================================== */

:root {

  /* --- Durations --- */
  --duration-instant:   0ms;
  --duration-fast:      150ms;
  --duration-normal:    300ms;
  --duration-slow:      500ms;
  --duration-slower:    800ms;
  --duration-crawl:     1200ms;

  /* --- Easings (CSS) --- */
  --ease-linear:        linear;
  --ease-in:            cubic-bezier(0.4, 0, 1, 1);
  --ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy:        cubic-bezier(0.2, 0, 0, 1);
  --ease-smooth:        cubic-bezier(0.45, 0, 0.15, 1);

  /* --- Stagger Delays --- */
  --stagger-xs:   50ms;
  --stagger-sm:   80ms;
  --stagger-md:   120ms;
  --stagger-lg:   180ms;
  --stagger-xl:   250ms;

  /* --- Semantic Aliases --- */
  --transition-default:   var(--duration-normal) var(--ease-out);
  --transition-fast:      var(--duration-fast) var(--ease-out);
  --transition-bounce:    var(--duration-slow) var(--ease-bounce);
  --transition-smooth:    var(--duration-slower) var(--ease-smooth);

}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* >>> tokens-motion.css */


/* <<< section-shell.css */
/* Shared section root layout — import in component CSS files as needed */

.section-shell {
  position: relative;
  width: 100%;
}

.section-shell--default {
  padding-block: var(--section-shell-y);
}

@media (min-width: 48rem) {
  .section-shell--default {
    padding-block: var(--section-shell-y-md);
  }
}

.section-shell--compact {
  padding-block: var(--section-shell-y-compact);
}

@media (min-width: 48rem) {
  .section-shell--compact {
    padding-block: var(--section-shell-y-compact-md);
  }
}

.section-shell--faq {
  padding-block: var(--section-shell-y-compact);
}

@media (min-width: 48rem) {
  .section-shell--faq {
    padding-block: var(--section-shell-y-faq-md);
  }
}

.section-shell--tight {
  padding-block: var(--section-shell-y-tight);
}

@media (min-width: 48rem) {
  .section-shell--tight {
    padding-block: var(--section-shell-y-tight-md);
  }
}

.section-shell--footer {
  padding-block: var(--section-shell-y);
}

@media (min-width: 48rem) {
  .section-shell--footer {
    padding-block: var(--section-shell-y-footer-md);
  }
}

.section-shell--overflow-hidden {
  overflow: hidden;
}

/* >>> section-shell.css */


/* <<< liquid-gradient.css */
/* ==========================================================================
   COMPONENT: Liquid Gradient
   File: components/liquid/liquid-gradient.css

   Mesh of stacked radial-gradient() layers (matches CSS snippet syntax).
   Motion drifts gradient center positions — not separate blob shapes.

   BEM: .liquid-gradient
   Modifiers: --intensity-subtle | --intensity-medium | --intensity-bold
              --mode-static | --mode-loop | --mode-scroll
   ========================================================================== */

.liquid-gradient {
  --liquid-gradient-base: #000000;
  --liquid-gradient-blend: normal;
  --liquid-gradient-drift-x: 10%;
  --liquid-gradient-drift-y: 6%;
  --liquid-gradient-fade: 50%;

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  mix-blend-mode: var(--liquid-gradient-blend);
}

.liquid-gradient--intensity-subtle {
  --liquid-gradient-drift-x: 5%;
  --liquid-gradient-drift-y: 3%;
}

.liquid-gradient--intensity-medium {
  --liquid-gradient-drift-x: 10%;
  --liquid-gradient-drift-y: 6%;
}

.liquid-gradient--intensity-bold {
  --liquid-gradient-drift-x: 16%;
  --liquid-gradient-drift-y: 10%;
}

.liquid-gradient__base,
.liquid-gradient__static,
.liquid-gradient__mesh {
  position: absolute;
  inset: 0;
}

.liquid-gradient__base {
  z-index: 0;
  background: var(--liquid-gradient-base);
}

.liquid-gradient__static {
  z-index: 1;
  background: var(--liquid-gradient-static);
}

.liquid-gradient__mesh {
  z-index: 2;
}

.liquid-gradient__layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    at var(--gx) var(--gy),
    var(--gc) 0px,
    transparent var(--liquid-gradient-fade)
  );
  will-change: background;
}

/* Static mode + reduced motion: single baked gradient */
.liquid-gradient--mode-static .liquid-gradient__mesh,
.liquid-gradient.is-reduced-motion .liquid-gradient__mesh,
.liquid-gradient.is-motion-static .liquid-gradient__mesh {
  display: none;
}

.liquid-gradient--mode-static .liquid-gradient__static,
.liquid-gradient.is-reduced-motion .liquid-gradient__static,
.liquid-gradient.is-motion-static .liquid-gradient__static {
  opacity: 1;
}

.liquid-gradient--mode-static .liquid-gradient__base,
.liquid-gradient.is-reduced-motion .liquid-gradient__base,
.liquid-gradient.is-motion-static .liquid-gradient__base {
  display: none;
}

/* Animated mesh replaces flat composite once motion is ready */
.liquid-gradient--mode-loop.is-motion-ready .liquid-gradient__static,
.liquid-gradient--mode-scroll.is-motion-ready .liquid-gradient__static {
  opacity: 0;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-gradient__mesh {
    display: none;
  }

  .liquid-gradient__base {
    display: none;
  }

  .liquid-gradient__static {
    opacity: 1 !important;
  }
}

/* >>> liquid-gradient.css */


/* <<< arctic-wolf-cta-button.css */
/* Shared Arctic Wolf gradient CTA — used in nav, video CTA, etc. */

.arctic-wolf-video-cta__cta {
  --aw-btn-gradient-start: #0066ff;
  --aw-btn-gradient-end: #47fffa;
  --aw-btn-text: #0b122a;

  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  margin-top: 0.35rem;
  min-height: 3.25rem;
  padding: 0 2rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  background: linear-gradient(
    105deg,
    var(--aw-btn-gradient-start) 0%,
    color-mix(in srgb, var(--aw-btn-gradient-start) 35%, var(--aw-btn-gradient-end)) 48%,
    var(--aw-btn-gradient-end) 100%
  );
  color: var(--aw-btn-text) !important;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.arctic-wolf-video-cta__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    var(--aw-btn-gradient-end) 0%,
    color-mix(in srgb, var(--aw-btn-gradient-end) 40%, var(--aw-btn-gradient-start)) 52%,
    var(--aw-btn-gradient-start) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.arctic-wolf-video-cta__cta:hover::before {
  opacity: 1;
}

.arctic-wolf-video-cta__cta:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 28px rgba(0, 102, 255, 0.38),
    0 2px 10px rgba(0, 0, 0, 0.22);
}

.arctic-wolf-video-cta__cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--aw-btn-gradient-end) 70%, #fff);
  outline-offset: 3px;
}

.arctic-wolf-video-cta__cta-label {
  position: relative;
  z-index: 1;
}

.arctic-wolf-cta__arrow {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 0.75rem;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: visible;
}

.arctic-wolf-video-cta__cta:hover .arctic-wolf-cta__arrow,
.arctic-wolf-scroll-tiles__cta:hover .arctic-wolf-cta__arrow,
.arctic-wolf-mesh-gradient__tile-cta:hover .arctic-wolf-cta__arrow {
  transform: translateX(2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-cta__arrow {
    transition: none;
  }

  .arctic-wolf-video-cta__cta:hover .arctic-wolf-cta__arrow,
  .arctic-wolf-scroll-tiles__cta:hover .arctic-wolf-cta__arrow,
  .arctic-wolf-mesh-gradient__tile-cta:hover .arctic-wolf-cta__arrow {
    transform: none !important;
  }
}

/* >>> arctic-wolf-cta-button.css */


/* <<< arctic-wolf-nav-minimal.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Nav Minimal
   BEM: .arctic-wolf-nav-minimal
   Overlay — logo left, demo CTA right. Styling TBD.
   ========================================================================== */

.arctic-wolf-nav-minimal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  will-change: opacity, transform;
}

.arctic-wolf-nav-minimal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.5rem, 8vw, 6rem);
  pointer-events: auto;
}

.arctic-wolf-nav-minimal__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.arctic-wolf-nav-minimal__logo-image {
  display: block;
  height: auto;
  max-height: 2rem;
  width: auto;
}

.arctic-wolf-nav-minimal__logo-text {
  font-family: var(--font-display) !important;
  font-size: 1rem;
  line-height: 1;
}

/* Gradient stroke CTA — overrides shared filled .arctic-wolf-video-cta__cta */
.arctic-wolf-nav-minimal .arctic-wolf-video-cta__cta {
  --aw-btn-gradient-start: #0066ff;
  --aw-btn-gradient-end: #47fffa;

  margin-top: 0;
  width: auto;
  padding: 14px 35px;
  border: 2px solid transparent;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.5;
  text-align: center;
  box-shadow: none;
  transition: all 0.3s linear;
  background: transparent;
  background: linear-gradient(-99deg, #83d6ff, #0099ff, #0066ff);
}

.arctic-wolf-nav-minimal .arctic-wolf-video-cta__cta::before {
  content: none;
}

.arctic-wolf-nav-minimal .arctic-wolf-video-cta__cta:after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(-99deg, #83d6ff, #0099ff, #0066ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -2;
  pointer-events: none;
}

.arctic-wolf-nav-minimal .arctic-wolf-video-cta__cta:hover {
  transform: none !important;
  box-shadow: none;
  color: #fff;
  background:
    linear-gradient(
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.06)
    )
    padding-box,
    linear-gradient(
      105deg,
      var(--aw-btn-gradient-end) 0%,
      color-mix(in srgb, var(--aw-btn-gradient-end) 40%, var(--aw-btn-gradient-start)) 52%,
      var(--aw-btn-gradient-start) 100%
    )
    border-box;
}

@media (max-width: 900px) {
  .arctic-wolf-nav-minimal__bar {
    padding: 1rem clamp(1rem, 4vw, 1.5rem);
    padding-top: max(1rem, env(safe-area-inset-top));
    gap: 0.75rem;
  }

  .arctic-wolf-nav-minimal__logo {
    min-width: 0;
  }

  .arctic-wolf-nav-minimal__logo-image {
    max-height: 1.625rem;
    max-width: min(42vw, 9.5rem);
  }

  .arctic-wolf-nav-minimal .arctic-wolf-video-cta__cta {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 13px;
    letter-spacing: 0.4px;
  }
}

/* >>> arctic-wolf-nav-minimal.css */


/* <<< arctic-wolf-hero-angled.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Hero Angled
   BEM: .arctic-wolf-hero-angled
   Auto intro slit reveal; after reveal the stage is fixed while the next
   section scrolls up immediately and covers it (spacer + sibling z-index).

   Font family from client brandTokens; type scale is module-specific for now.
   ========================================================================== */

.arctic-wolf-hero-angled {
  --aw-angle: 35;
  --aw-line-top: calc(50% - 50% * tan(var(--aw-angle) * 1deg));
  --aw-line-bottom: calc(50% + 50% * tan(var(--aw-angle) * 1deg));
  --aw-headline-size: clamp(2.5rem, 8vw, 7rem);
  --aw-description-size: clamp(1.125rem, 2.5vw, 2rem);
  --aw-copy-inset-x: clamp(1.5rem, 8vw, 5rem);
  --aw-copy-inset-y: clamp(1.5rem, 10vh, 5rem);
  --aw-copy-gap: 0.65rem;
  /* Soft-indent under a heavy display capital (T) for optical alignment */
  --aw-copy-desc-optical-inset: 0.75em;
  /* Nudges the flex-centered stack slightly above geometric mid (~45%) */
  --aw-copy-optical-lift: 0;
  position: relative;
  z-index: 0;
  width: 100%;
  /* Spacer keeps flow height after stage becomes fixed */
  min-height: 100vh;
  min-height: 100dvh;
  background: #0c0c0c;
}

/* Following sections scroll over the revealed hero */
main > .arctic-wolf-hero-angled ~ * {
  position: relative;
  z-index: 1;
}

.arctic-wolf-hero-angled:not(.is-motion-init) .arctic-wolf-hero-angled__headline,
.arctic-wolf-hero-angled:not(.is-motion-init) .arctic-wolf-hero-angled__description {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-hero-angled:not(.is-motion-init) .arctic-wolf-hero-angled__headline,
  .arctic-wolf-hero-angled:not(.is-motion-init) .arctic-wolf-hero-angled__description {
    opacity: 1;
  }

  .arctic-wolf-hero-angled__mask {
    display: none !important;
  }
}

.arctic-wolf-hero-angled__stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0c0c0c;
}

.arctic-wolf-hero-angled.is-hero-revealed .arctic-wolf-hero-angled__stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
}

.arctic-wolf-hero-angled__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

.arctic-wolf-hero-angled__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      rgba(11, 26, 36, 0.58) 0%,
      rgba(11, 26, 36, 0.32) 26%,
      rgba(11, 26, 36, 0.08) 48%,
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      rgba(11, 26, 36, 0.22) 0%,
      transparent 35%,
      transparent 68%,
      rgba(11, 26, 36, 0.42) 100%
    );
}

.arctic-wolf-hero-angled__mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--color-brand-hover);
  will-change: transform;
}

.arctic-wolf-hero-angled__mask--top {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% var(--aw-line-top),
    0% var(--aw-line-bottom)
  );
}

.arctic-wolf-hero-angled__mask--bottom {
  clip-path: polygon(
    0% var(--aw-line-bottom),
    100% var(--aw-line-top),
    100% 100%,
    0% 100%
  );
}

.arctic-wolf-hero-angled__content {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--aw-copy-gap);
  padding: 0 var(--aw-copy-inset-x) 15vh;
  will-change: transform, opacity;
}

.arctic-wolf-hero-angled__headline {
  position: relative;
  font-family: var(--font-display) !important;
  font-size: var(--aw-headline-size) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0;
  color: #fff;
  max-width: min(14ch, calc(100% - var(--aw-copy-inset-x) * 2));
  text-align: center;
  white-space: pre-line;
  will-change: transform, opacity;
}

.arctic-wolf-hero-angled__description {
  position: relative;
  margin-left: var(--aw-copy-desc-optical-inset);
  font-family: var(--font-display) !important;
  font-size: var(--aw-description-size) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: var(--color-white);
  max-width: min(34ch, calc(100% - var(--aw-copy-inset-x) * 2));
  text-align: center;
  white-space: pre-line;
  will-change: transform, opacity;
}

/* --- Mobile: stacked copy, tighter scroll, stronger legibility scrim --- */

@media (max-width: 768px) {
  .arctic-wolf-hero-angled {
    --aw-headline-size: clamp(1.75rem, 9vw, 2.75rem);
    --aw-description-size: clamp(0.9375rem, 3.8vw, 1.125rem);
    --aw-copy-inset-x: 1.25rem;
    --aw-copy-inset-y: max(1.25rem, env(safe-area-inset-bottom, 0px));
    --aw-copy-gap: 0.5rem;
    --aw-copy-desc-optical-inset: 0;
    --aw-copy-optical-lift: 6vh;
  }

  .arctic-wolf-hero-angled__stage {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .arctic-wolf-hero-angled__video {
    object-position: center center;
  }

  .arctic-wolf-hero-angled__grade {
    background:
      linear-gradient(
        to right,
        rgba(11, 26, 36, 0.62) 0%,
        rgba(11, 26, 36, 0.34) 36%,
        rgba(11, 26, 36, 0.1) 58%,
        transparent 72%
      ),
      linear-gradient(
        to bottom,
        rgba(11, 26, 36, 0.18) 0%,
        transparent 34%,
        rgba(11, 26, 36, 0.4) 72%,
        rgba(11, 26, 36, 0.72) 100%
      );
  }

  .arctic-wolf-hero-angled__content {
    align-items: stretch;
  }

  .arctic-wolf-hero-angled__headline,
  .arctic-wolf-hero-angled__description {
    max-width: min(22ch, 100%);
    text-wrap: balance;
  }

  .arctic-wolf-hero-angled__description {
    max-width: min(34ch, 100%);
    margin-left: 0;
    text-wrap: pretty;
  }
}

/* >>> arctic-wolf-hero-angled.css */


/* <<< arctic-wolf-aurora-band.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Aurora Band
   BEM: .arctic-wolf-aurora-band
   Shared aurora background spanning spotlight + video-cta so the mid-page
   reads as one continuous surface (scroll modules unchanged).
   ========================================================================== */

.arctic-wolf-aurora-band {
  --aw-aurora-band-fallback: #121c42;
  position: relative;
  z-index: 1!important;
  width: 100%;
  isolation: isolate;
  background: var(--aw-aurora-band-fallback);
  overflow: visible;
}

/*
 * Absolute cover: one image stretched across the full band so it stays
 * continuous behind spotlight + video-cta (including while video pin is fixed).
 */
.arctic-wolf-aurora-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.arctic-wolf-aurora-band__bg-image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Child sections sit above the photo; solid fills must stay gone */
.arctic-wolf-aurora-band > .arctic-wolf-spotlight-reveal,
.arctic-wolf-aurora-band > .arctic-wolf-video-cta {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.arctic-wolf-aurora-band .arctic-wolf-spotlight-reveal__bg {
  background-color: transparent !important;
  background-image: none !important;
}

.arctic-wolf-aurora-band .arctic-wolf-spotlight-reveal__bg-wash {
  display: none;
}

.arctic-wolf-aurora-band .arctic-wolf-video-cta {
  --aw-vcta-text: #ffffff;
  --aw-vcta-bg: transparent;
  --aw-vcta-accent: #84e4f9;
  /* Let the band aurora show through pinned / fixed descendants */
  overflow: visible;
  isolation: auto;
}

.arctic-wolf-aurora-band .arctic-wolf-video-cta__pin-stage,
.arctic-wolf-aurora-band .arctic-wolf-video-cta__split {
  background: transparent;
}

@media (max-width: 900px) {
  .arctic-wolf-aurora-band__bg-image {
    object-position: left center;
  }

  /* Anchor the darker left side of the aurora photo for legible copy */
  .arctic-wolf-aurora-band__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--aw-aurora-band-fallback) 82%, transparent) 0%,
      color-mix(in srgb, var(--aw-aurora-band-fallback) 38%, transparent) 42%,
      transparent 68%
    );
    pointer-events: none;
  }

  .arctic-wolf-aurora-band .arctic-wolf-spotlight-reveal__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  .arctic-wolf-aurora-band .arctic-wolf-spotlight-reveal__cta.arctic-wolf-video-cta__cta {
    width: 100%;
    align-self: stretch;
    justify-content: center;
  }
}

/* >>> arctic-wolf-aurora-band.css */


/* <<< arctic-wolf-spotlight-content-callout-reveal.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Spotlight Content Callout Reveal
   BEM: .arctic-wolf-spotlight-reveal
   Scrubbed card expand + copy reveal over full-bleed section background.
   ========================================================================== */

.arctic-wolf-spotlight-reveal {
  --aw-spotlight-radius: 20px;
  --aw-spotlight-card-width: min(94vw, 1400px);
  --aw-spotlight-card-min-height: auto;
  --aw-spotlight-card-start-scale-x: 0.76;
  --aw-spotlight-border-glow: 0;
  --aw-spotlight-copy-max-center: 56rem;
  --aw-spotlight-copy-max-left: 48rem;
  --aw-spotlight-graphic-opacity: 0.85;
  --aw-spotlight-graphic-aspect: 3 / 5;
  --aw-spotlight-graphic-max-width: none;
  --aw-spotlight-box-pad: clamp(2rem, 5vw, 4rem);
  --aw-spotlight-box-pad-bottom: clamp(3rem, 7vw, 5.5rem);
  --aw-spotlight-graphic-gap: clamp(1.5rem, 4vw, 3rem);
  --aw-spotlight-headline-min: clamp(1.75rem, 3vw, 2.5rem);
  --aw-spotlight-headline-fluid: 3.4vw;
  --aw-spotlight-headline-max: clamp(2.25rem, 4.8vw, 3.5rem);
  --aw-btn-gradient-start: #0066ff;
  --aw-btn-gradient-end: #47fffa;
  --aw-btn-text: #0b122a;
  position: relative;
  width: 100%;
  min-height: auto;
  isolation: isolate;
  overflow: hidden;
}

/*
.arctic-wolf-spotlight-reveal:before {    
  content: "";
  position: absolute;
  top: 5vw;
  right: -40vw;
  width: 100vw;
  height: 70vw;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 60% 40%, rgba(0, 153, 255, 0.65) 0%, rgba(0, 42, 255, 0.45) 25%, rgba(0, 64, 180, .38) 45%, rgba(3, 11, 52, 0) 70%);
  filter: blur(80px);
}
*/

.arctic-wolf-spotlight-reveal__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--color-brand-hover);
  background-image: url('../assets/aw-bg-aurora-blur--right.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* —— Stage + card —— */

.arctic-wolf-spotlight-reveal__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.arctic-wolf-spotlight-reveal__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--aw-spotlight-card-width);
  min-height: var(--aw-spotlight-card-min-height);
  transform-origin: center center;
  will-change: transform;
  border-radius: 20px;
  border-top-left-radius: 20px;
  background-image: url('../assets/aw-bg-aurora-blur--right.jpg');
  background-size: cover;
}

.arctic-wolf-spotlight-reveal__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.8vw, 1.15rem);
  width: 100%;
  padding: var(--aw-spotlight-box-pad);
  padding-bottom: var(--aw-spotlight-box-pad-bottom);
  color: var(--aw-spotlight-text, #fff);
  text-align: left;
  transform-origin: center center;
  will-change: transform, opacity;
}

.arctic-wolf-spotlight-reveal__box {
  width: 100%;
  min-height: inherit;
  padding: 2px;
  border-radius: var(--aw-spotlight-radius);
  /* 
  background: linear-gradient(
    135deg,
    var(--aw-spotlight-border-start, #00aaff) 0%,
    color-mix(in srgb, var(--aw-spotlight-border-start, #00aaff) 45%, var(--aw-spotlight-border-end, #47fffa)) 48%,
    var(--aw-spotlight-border-end, #47fffa) 100%
  );*/
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--aw-spotlight-border-start, #00aaff) 18%, transparent),
    0 18px 48px rgba(0, 20, 40, 0.22),
    0 0 calc(36px * var(--aw-spotlight-border-glow, 0))
      color-mix(in srgb, var(--aw-spotlight-border-end, #00aaff) 55%, transparent);
    background: #071b4b5c;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: 0;
    overflow: visible;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.arctic-wolf-spotlight-reveal__box-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--aw-spotlight-card-min-height);
  border-radius: calc(var(--aw-spotlight-radius) - 1px);
  background: #071b4b5c;
  overflow: hidden;
  border-radius: 20px;
}

.arctic-wolf-spotlight-reveal__box-inner--has-graphic {
  display: grid;
  align-items: stretch;
  gap: var(--aw-spotlight-graphic-gap);
  padding: var(--aw-spotlight-box-pad);
  padding-bottom: var(--aw-spotlight-box-pad-bottom);
}

/* —— Card graphic —— */

.arctic-wolf-spotlight-reveal__graphic {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--aw-spotlight-graphic-aspect);
  align-self: stretch;
  justify-self: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(var(--aw-spotlight-radius) - 3px);
}

.arctic-wolf-spotlight-reveal__graphic .arctic-wolf-spotlight-reveal__graphic-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.arctic-wolf-spotlight-reveal__box-inner--has-graphic .arctic-wolf-spotlight-reveal__copy {
  position: relative;
  z-index: 1;
  padding: 0;
}

/* —— Copy layout —— */

.arctic-wolf-spotlight-reveal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.90rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--aw-spotlight-text, #fff) 72%, var(--aw-spotlight-accent, #00aaff));
}

.arctic-wolf-spotlight-reveal__headline {
  margin: 0;
  max-width: 28ch;
  font-family: var(--font-display) !important;
  font-size: clamp(
    var(--aw-spotlight-headline-min),
    calc(
      var(--aw-spotlight-headline-min) + var(--brand-headline-scale, 1) * var(--aw-spotlight-headline-fluid)
    ),
    var(--aw-spotlight-headline-max)
  ) !important;
  font-weight: var(--brand-headline-weight, 700) !important;
  line-height: 1.05 !important;
  white-space: pre-line;
  text-wrap: balance;
  color: var(--aw-spotlight-text, #fff);
}

.arctic-wolf-spotlight-reveal__headline span {
  color: var(--aw-spotlight-accent, #00aaff);
}

.arctic-wolf-spotlight-reveal--headline-large {
  --aw-spotlight-headline-max: clamp(2.35rem, 5vw, 3.75rem);
}

.arctic-wolf-spotlight-reveal__subheadline {
  margin: 0.15rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
  color: color-mix(in srgb, var(--aw-spotlight-text, #fff) 94%, transparent);
}

.arctic-wolf-spotlight-reveal__description {
  max-width: 70%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--aw-rc-text);
}

/* —— CTAs —— */

.arctic-wolf-spotlight-reveal__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-top: 0.65rem;
}

.arctic-wolf-spotlight-reveal__cta.arctic-wolf-video-cta__cta {
  margin-top: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 3.25rem;
  padding-block: 0;
  line-height: 1;
}

.arctic-wolf-spotlight-reveal__cta--secondary {
  background: transparent;
  border: 2px solid var(--aw-spotlight-cta-stroke, #00aaff);
  color: var(--color-white);
  box-shadow: none;
  min-height: 3.25rem;
}

.arctic-wolf-spotlight-reveal__cta--secondary::before {
  display: none;
}

.arctic-wolf-spotlight-reveal__cta--secondary:hover {
  transform: translateY(-2px) !important;
  background: color-mix(in srgb, var(--aw-spotlight-cta-stroke, #00aaff) 12%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--aw-spotlight-cta-stroke, #00aaff) 22%, transparent);
}

/* —— Motion (FOUC guard) —— */

.arctic-wolf-spotlight-reveal:not(.is-motion-init) .arctic-wolf-spotlight-reveal__frame {
  transform: scaleX(var(--aw-spotlight-card-start-scale-x));
}

.arctic-wolf-spotlight-reveal:not(.is-motion-init) .arctic-wolf-spotlight-reveal__copy {
  transform: scaleX(calc(1 / var(--aw-spotlight-card-start-scale-x)));
}

.arctic-wolf-spotlight-reveal--placement-lede:not(.is-motion-init) .arctic-wolf-spotlight-reveal__frame,
.arctic-wolf-spotlight-reveal--placement-lede:not(.is-motion-init) .arctic-wolf-spotlight-reveal__copy {
  transform: none;
}

.arctic-wolf-spotlight-reveal:not(.is-motion-init) [data-spotlight-animate] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-spotlight-reveal:not(.is-motion-init) .arctic-wolf-spotlight-reveal__frame,
  .arctic-wolf-spotlight-reveal:not(.is-motion-init) .arctic-wolf-spotlight-reveal__copy {
    transform: none;
  }

  .arctic-wolf-spotlight-reveal:not(.is-motion-init) [data-spotlight-animate] {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .arctic-wolf-spotlight-reveal {
    --aw-spotlight-card-width: min(94vw, 1600px);
  }

  .arctic-wolf-spotlight-reveal__headline {
    max-width: min(22ch, 100%);
    text-wrap: balance;
  }

  .arctic-wolf-spotlight-reveal__subheadline,
  .arctic-wolf-spotlight-reveal__description {
    max-width: min(40ch, 100%);
  }

}

/* ==========================================================================
   Placement: first content after hero editorial lede (not a card callout)
   ========================================================================== */

.arctic-wolf-spotlight-reveal--placement-lede {
  --aw-spotlight-card-width: 100%;
  --aw-spotlight-card-min-height: auto;
  --aw-spotlight-box-pad: 0;
  --aw-spotlight-box-pad-bottom: 0;
  --aw-spotlight-graphic-gap: clamp(2rem, 5vw, 4.5rem);
  --aw-spotlight-graphic-aspect: 3 / 4;
  /* ~20% smaller than first draft */
  --aw-spotlight-headline-min: clamp(1.9rem, 3.35vw, 2.6rem);
  --aw-spotlight-headline-fluid: 3.7vw;
  --aw-spotlight-headline-max: clamp(2.6rem, 5vw, 3.5rem);
  --brand-headline-scale: 1;
  min-height: 100%;
  color: var(--aw-spotlight-text, #fff);
}
/*
.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__bg {
  
  background-color: #ffffff;
  overflow: hidden;
}*/

/*
.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__bg-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, #050b14 42%, transparent) 0%,
    transparent 42%,
    transparent 78%,
    color-mix(in srgb, #ffffff 35%, transparent) 100%
  );
  pointer-events: none;
}
*/

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__stage {
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100%;
  padding:
    clamp(4.5rem, 10vh, 7rem)
    clamp(1.5rem, 6vw, 5.5rem)
    clamp(3.5rem, 8vh, 5.5rem);
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__frame {
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  min-height: 0;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box,
.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box-inner {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 0;
  overflow: visible;

  padding: 3rem;
    border: 0;
    border-radius: 0;
    background: #071b4b5c;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-height: 0;
    overflow: visible;
    border-radius: 20px;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(185deg, rgba(0, 102, 255, 0.55), rgba(0, 102, 255, 0.22), rgba(132, 228, 249, 0.45), #0066ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box-inner--has-graphic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(14rem, 0.85fr);
  align-items: center;
  gap: var(--aw-spotlight-graphic-gap);
  width: 100%;
  padding: 0;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box-inner:not(.arctic-wolf-spotlight-reveal__box-inner--has-graphic) {
  display: block;
  width: 100%;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__copy {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.45rem);
  max-width: 42rem;
  padding: 0;
  width: 100%;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.46em;
  color: color-mix(in srgb, var(--aw-spotlight-text, #fff) 78%, var(--aw-spotlight-accent, #00aaff));
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__headline {
  max-width: 14ch;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.arctic-wolf-spotlight-reveal--placement-lede.arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__headline {
  max-width: min(1400px, 100%);
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__headline span {
  color: var(--aw-spotlight-accent, #00aaff);
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__subheadline {
  margin: 0.15rem 0 0;
  max-width: 28ch;
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--aw-spotlight-text, #fff) 92%, transparent);
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__description {
  margin: 0.15rem 0 0;
  max-width: 42ch;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  color: color-mix(in srgb, var(--aw-spotlight-text, #fff) 100%, transparent);
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__ctas {
  margin-top: 1.15rem;
  gap: 0.85rem 1.15rem;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__graphic {
  width: min(100%, 28rem);
  max-width: none;
  height: auto;
  min-height: clamp(22rem, 58vh, 34rem);
  aspect-ratio: var(--aw-spotlight-graphic-aspect);
  border-radius: 0;
  justify-self: end;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 88%,
    transparent 100%
  );
}

.arctic-wolf-spotlight-reveal--placement-lede.arctic-wolf-spotlight-reveal--hide-graphic .arctic-wolf-spotlight-reveal__graphic,
.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__graphic[hidden] {
  display: none !important;
}

.arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__graphic-image {
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.05) contrast(1.04);
}

/* —— Copy layouts —— */

.arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__copy {
  max-width: min(1400px, 100%);
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__headline,
.arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__subheadline {
  max-width: min(1400px, 100%);
}

.arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__description {
  max-width: 800px;
}

.arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__ctas {
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .arctic-wolf-spotlight-reveal--placement-lede {
    min-height: auto;
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__stage {
    min-height: auto;
    padding-block: clamp(3.25rem, 9vh, 5rem);
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box-inner--has-graphic {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__copy {
    max-width: 40rem;
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__eyebrow {
    letter-spacing: 0.22em;
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__headline {
    max-width: 16ch;
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__graphic {
    width: min(100%, 18rem);
    min-height: 16rem;
    justify-self: start;
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }

  /* Match phone chrome-less lede through tablet for a consistent mobile band */
  .arctic-wolf-spotlight-reveal__frame {
    background: transparent;
    background-image: none;
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box,
  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box-inner {
    background: transparent;
    padding: 0;
    border: none;
  }

  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__box:before {
    content: none;
  }

  .arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__copy {
    text-align: left;
    justify-items: start;
    margin-inline: 0;
    max-width: min(1400px, 100%);
  }

  .arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__headline,
  .arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__subheadline {
    max-width: min(1400px, 100%);
  }

  .arctic-wolf-spotlight-reveal--copy-layout-center .arctic-wolf-spotlight-reveal__ctas {
    justify-content: flex-start;
  }

  .arctic-wolf-aurora-band .arctic-wolf-spotlight-reveal__ctas {
    max-width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .arctic-wolf-spotlight-reveal--placement-lede .arctic-wolf-spotlight-reveal__stage {
    padding-block: clamp(2.75rem, 8vh, 4rem);
  }
}
/* >>> arctic-wolf-spotlight-content-callout-reveal.css */


/* <<< arctic-wolf-video-cta.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Video CTA
   BEM: .arctic-wolf-video-cta
   Layout: (default split) | --centered
   Split — bold copy + CTA left, 55% video rail right with 35° slit.
   Centered — copy above, 16:7 video rail, CTA below video.
   ========================================================================== */

.arctic-wolf-video-cta {
  --aw-angle: 35;
  --aw-line-top: calc(50% - 50% * tan(var(--aw-angle) * 1deg));
  --aw-line-bottom: calc(50% + 50% * tan(var(--aw-angle) * 1deg));
  --aw-vcta-pad-x: clamp(1.25rem, 4vw, 3rem);
  --aw-vcta-rail-width: 55%;
  --aw-vcta-headline-min: clamp(2rem, 3.8vw, 3.25rem);
  --aw-vcta-headline-fluid: 4.5vw;
  --aw-vcta-headline-max: clamp(2.75rem, 6vw, 4.5rem);
  --aw-vcta-description-base: clamp(1.125rem, 2vw, 1.4rem);
  position: relative;
  width: 100%;
  color: var(--aw-vcta-text, #fff);
  background: var(--aw-vcta-bg, #0b1a24);
  padding: 0.5rem 0 clamp(3rem, 8vh, 6.25rem);
  overflow: clip;
  isolation: isolate;
}

.arctic-wolf-video-cta:not(.is-motion-init) .arctic-wolf-video-cta__copy,
.arctic-wolf-video-cta:not(.is-motion-init) .arctic-wolf-video-cta__cta-below {
  opacity: 0;
}

.arctic-wolf-video-cta__pin-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
}

.arctic-wolf-video-cta__split {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
}

.arctic-wolf-video-cta__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(2rem, 5vh, 3.5rem) var(--aw-vcta-pad-x);
  text-align: left;
  transform-origin: left center;
  will-change: transform, opacity;
}

.arctic-wolf-video-cta__headline {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display) !important;
  font-size: clamp(
    var(--aw-vcta-headline-min),
    calc(
      var(--aw-vcta-headline-min) + var(--brand-headline-scale, 1) * var(--aw-vcta-headline-fluid)
    ),
    var(--aw-vcta-headline-max)
  )  !important;
  font-weight: var(--brand-headline-weight, 600)  !important;
  line-height: 0.98  !important;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--aw-vcta-text, #fff);
}

.arctic-wolf-video-cta__headline span {
  color: var(--aw-vcta-accent, #00aaff);
  font-weight: 300;
}

.arctic-wolf-video-cta__headline sup {
  font-size: 0.7em;
  font-weight: 500;
  line-height: 0;
  vertical-align: super;
  margin-inline: 0.05em;
}

.arctic-wolf-video-cta--headline-medium {
  --aw-vcta-headline-max: clamp(2.35rem, 5.5vw, 3.75rem);
}

.arctic-wolf-video-cta__description {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--aw-vcta-description-base);
  font-weight: 500;
  line-height: 1.58;
  color: var(--color-white);
}

/* —— Video rail: 55% right, diagonal slit on left edge —— */

.arctic-wolf-video-cta__video-rail {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: var(--aw-vcta-rail-width);
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
}

.arctic-wolf-video-cta__video-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: polygon(
    0% var(--aw-line-top),
    100% 0%,
    100% 100%,
    0% var(--aw-line-bottom)
  );
}

.arctic-wolf-video-cta__video-media {
  --aw-vcta-border-glow: 1;
  position: absolute;
  inset: 0;
  overflow: visible;
  transform-origin: center center;
  will-change: transform;
  box-shadow:0 267px 75px 0 rgba(57,157,219,0),0 171px 68px 0 rgba(57,157,219,.01),0 96px 58px 0 rgba(57,157,219,.05),0 43px 43px 0 rgba(57,157,219,.09),0 11px 23px 0 rgba(57,157,219,.1);
  border-radius: 20px;
}

.arctic-wolf-video-cta__video-media:before {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 20px;
  padding: 1px;
  background: radial-gradient(circle at right, transparent 15%, #0066ff 50%, #0066ff, #83D6FF);
  mask: radial-gradient(#000 0 0) content-box, radial-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: var(--aw-vcta-border-glow);
}

.arctic-wolf-video-cta__video-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  transition: filter 0.35s ease;
}

.arctic-wolf-video-cta__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.arctic-wolf-video-cta__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  padding-left: 0.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--aw-vcta-accent, #0b1a24) 100%, transparent);
  backdrop-filter: blur(6px);
  color: var(--aw-btn-text, #fff);
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 transparent;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.28s ease,
    box-shadow 0.28s ease,
    color 0.28s ease;
}

/* Brand conic ring — spins while idle to signal play */
.arctic-wolf-video-cta__play::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #0066ff 0deg,
    #84e4f9 90deg,
    #2eeded 160deg,
    #83d6ff 230deg,
    #0059b2 300deg,
    #0066ff 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, #84e4f9 35%, transparent));
  transition: opacity 0.4s ease, filter 0.28s ease;
}

.arctic-wolf-video-cta__play.is-pulsing::after {
  opacity: 0.95;
  animation: aw-vcta-play-ring-spin 3.8s linear infinite;
}

.arctic-wolf-video-cta__play:hover,
.arctic-wolf-video-cta__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
  background: color-mix(in srgb, var(--aw-vcta-accent, #84e4f9) 88%, #fff 12%);
  box-shadow: 0 0 32px color-mix(in srgb, var(--aw-vcta-accent, #84e4f9) 42%, transparent);
  color: #0a1620;
  outline: none;
}

.arctic-wolf-video-cta__play:hover::after,
.arctic-wolf-video-cta__play:focus-visible::after {
  opacity: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, #2eeded 55%, transparent));
  animation-duration: 2.2s;
}

.arctic-wolf-video-cta__play-triangle {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.42rem 0 0.42rem 0.72rem;
  border-color: transparent transparent transparent currentColor;
}

@keyframes aw-vcta-play-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

/* —— Centered layout —— */

.arctic-wolf-video-cta--centered:not(.is-motion-init) [data-video-cta-media],
.arctic-wolf-video-cta--centered:not(.is-motion-init) .arctic-wolf-video-cta__play {
  opacity: 0;
  pointer-events: none;
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__pin-stage {
  min-height: 0;
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__split {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1vw, 0.875rem);
  min-height: 0;
  padding: clamp(2rem, 5vh, 3.5rem) var(--aw-vcta-pad-x);
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__copy {
  width: 100%;
  min-height: auto;
  padding: 0;
  gap: clamp(0.75rem, 1.35vw, 1.125rem);
  text-align: center;
  align-items: center;
  transform-origin: center center;
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__description {
  max-width: 42ch;
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__video-rail {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: 100%;
  min-height: auto;
  aspect-ratio: 7 / 2;
  overflow: visible;
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__video-viewport {
  border-radius: 10px;
  clip-path: none;
  overflow: visible;
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__video-media {
  --aw-vcta-border-glow: 0.28;
  transform-origin: center center;
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__video-rail:hover .arctic-wolf-video-cta__video-media video,
.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__video-rail:focus-within .arctic-wolf-video-cta__video-media video {
  filter: brightness(1.08) saturate(1.06);
}

.arctic-wolf-video-cta--centered .arctic-wolf-video-cta__cta-below {
  display: flex;
  margin: 25px 0 50px;
  justify-content: center;
  width: 100%;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* —— Video overlay —— */

.arctic-wolf-video-cta__overlay {
  --aw-overlay-pad-x: clamp(1rem, 3vw, 2rem);
  --aw-overlay-top: 15vh;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--aw-overlay-top) var(--aw-overlay-pad-x) clamp(1.25rem, 3vh, 2rem);
  background: transparent;
}

.arctic-wolf-video-cta__overlay-backdrop {
  position: absolute;
  inset: -12%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.arctic-wolf-video-cta__overlay-backdrop-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: blur(56px) saturate(1.35) brightness(0.55) hue-rotate(-8deg);
}

.arctic-wolf-video-cta__overlay-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 88% 72% at 78% 38%, color-mix(in srgb, #0066ff 28%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 64% at 14% 82%, color-mix(in srgb, #2eeded 14%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 48% at 50% 50%, color-mix(in srgb, #0059b2 18%, transparent), transparent 72%),
    linear-gradient(
      168deg,
      color-mix(in srgb, #121c42 88%, #0066ff) 0%,
      color-mix(in srgb, #0a1424 92%, transparent) 48%,
      color-mix(in srgb, #121c42 84%, #0059b2) 100%
    );
    opacity: 0.94;
  pointer-events: auto;
  cursor: pointer;
}

body.arctic-wolf-video-cta--overlay-open {
  overflow: hidden;
}

.arctic-wolf-video-cta__overlay-stage {
  --aw-vcta-border-glow: 1;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: min(calc(80vh * 16 / 9), calc(100vw - 2 * var(--aw-overlay-pad-x, clamp(1rem, 3vw, 2rem))));
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 20px;
  overflow: visible;
  box-shadow:
    0 267px 75px 0 rgba(57, 157, 219, 0),
    0 171px 68px 0 rgba(57, 157, 219, 0.01),
    0 96px 58px 0 rgba(57, 157, 219, 0.05),
    0 43px 43px 0 rgba(57, 157, 219, 0.09),
    0 11px 23px 0 rgba(57, 157, 219, 0.1);
}

.arctic-wolf-video-cta__overlay-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: radial-gradient(circle at right, transparent 15%, #0066ff 50%, #0066ff, #83d6ff);
  -webkit-mask: radial-gradient(#000 0 0) content-box, radial-gradient(#000 0 0);
  mask: radial-gradient(#000 0 0) content-box, radial-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: var(--aw-vcta-border-glow);
}

.arctic-wolf-video-cta__overlay-close {
  position: absolute;
  top: -3rem;
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, #121c42 72%, #0066ff 28%);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Match play button brand conic ring */
.arctic-wolf-video-cta__overlay-close::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #0066ff 0deg,
    #84e4f9 90deg,
    #2eeded 160deg,
    #83d6ff 230deg,
    #0059b2 300deg,
    #0066ff 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, #84e4f9 35%, transparent));
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.arctic-wolf-video-cta__overlay-close span {
  display: block;
  font-size: 1.85rem;
  font-weight: 300;
  line-height: 1;
  /* × glyph sits optically high in most fonts — nudge into true center */
  transform: translateY(0);
}

.arctic-wolf-video-cta__overlay-close:hover {
  transform: scale(1.05);
  background: color-mix(in srgb, #121c42 58%, #0066ff 42%);
  box-shadow: 0 0 18px color-mix(in srgb, #84e4f9 28%, transparent);
}

.arctic-wolf-video-cta__overlay-close:hover::after {
  opacity: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, #2eeded 55%, transparent));
}

.arctic-wolf-video-cta__overlay-close:focus-visible {
  outline: none;
  transform: scale(1.1);
  box-shadow: 0 0 18px color-mix(in srgb, #84e4f9 28%, transparent);
}

.arctic-wolf-video-cta__overlay-close:focus-visible::after {
  opacity: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, #2eeded 55%, transparent));
}

.arctic-wolf-video-cta__overlay-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: #121c42;
  object-fit: cover;
  vertical-align: top;
}

/* —— Mobile —— */

@media (max-width: 900px) {
  .arctic-wolf-video-cta {
    --aw-vcta-rail-width: 100%;
  }

  .arctic-wolf-video-cta__split {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .arctic-wolf-video-cta__copy {
    width: 100%;
    min-height: auto;
    padding-bottom: 1.25rem;
    text-align: center;
    align-items: center;
  }

  .arctic-wolf-video-cta__headline {
    max-width: min(18ch, 100%);
  }

  .arctic-wolf-video-cta__description {
    max-width: min(36ch, 100%);
  }

  .arctic-wolf-video-cta__cta {
    align-self: center;
  }

  .arctic-wolf-video-cta__video-rail {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    min-height: auto;
    height: min(62svh, 28rem);
    padding: 0 var(--aw-vcta-pad-x) clamp(2rem, 5vh, 3rem);
  }

  .arctic-wolf-video-cta__video-viewport {
    border-radius: 0.5rem;
    clip-path: none;
  }

  .arctic-wolf-video-cta__play {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .arctic-wolf-video-cta__play:hover,
  .arctic-wolf-video-cta__play:focus-visible {
    transform: translate(-50%, -50%) scale(1.1);
  }

  .arctic-wolf-video-cta__overlay {
    --aw-overlay-pad-x: max(1rem, env(safe-area-inset-right));
    align-items: center;
    justify-content: center;
    padding:
      max(1rem, env(safe-area-inset-top))
      var(--aw-overlay-pad-x)
      max(1rem, env(safe-area-inset-bottom));
  }

  .arctic-wolf-video-cta__overlay-stage {
    width: min(calc(80vh * 16 / 9), calc(100vw - 2 * var(--aw-overlay-pad-x)));
    margin-block: auto;
  }

  .arctic-wolf-video-cta__overlay-close {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    width: 2.75rem;
    height: 2.75rem;
  }

  .arctic-wolf-video-cta--centered .arctic-wolf-video-cta__split {
    min-height: auto;
    padding-bottom: clamp(2rem, 5vh, 3rem);
  }

  .arctic-wolf-video-cta--centered .arctic-wolf-video-cta__video-rail {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .arctic-wolf-video-cta {
    --aw-vcta-pad-x: 1.125rem;
    --aw-vcta-headline-min: clamp(1.75rem, 7vw, 2.35rem);
    --aw-vcta-headline-fluid: 3.2vw;
  }

  .arctic-wolf-video-cta--headline-medium {
    --aw-vcta-headline-max: clamp(2rem, 8vw, 2.75rem);
  }

  .arctic-wolf-video-cta--centered .arctic-wolf-video-cta__copy {
    margin-bottom: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-video-cta:not(.is-motion-init) .arctic-wolf-video-cta__copy,
  .arctic-wolf-video-cta:not(.is-motion-init) .arctic-wolf-video-cta__cta-below {
    opacity: 1;
  }

  .arctic-wolf-video-cta__video-media {
    transform: none !important;
    opacity: 1 !important;
    --aw-vcta-border-glow: 1;
  }

  .arctic-wolf-video-cta__play {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .arctic-wolf-video-cta__play.is-pulsing::after {
    animation: none;
    opacity: 0.85;
    background: linear-gradient(
      135deg,
      #0066ff 0%,
      #84e4f9 45%,
      #2eeded 100%
    );
  }

  .arctic-wolf-video-cta__play:hover,
  .arctic-wolf-video-cta__play:focus-visible {
    transform: translate(-50%, -50%);
  }

  .arctic-wolf-video-cta__video-rail:hover .arctic-wolf-video-cta__video-media video,
  .arctic-wolf-video-cta__video-rail:focus-within .arctic-wolf-video-cta__video-media video {
    filter: none;
  }

  .arctic-wolf-video-cta__cta:hover {
    transform: none !important;
  }
}

/* >>> arctic-wolf-video-cta.css */


/* <<< arctic-wolf-tile-grid.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Tile Grid
   BEM: .arctic-wolf-tile-grid
   Centered header + glass card grid on optional full-bleed background.
   ========================================================================== */

.arctic-wolf-tile-grid {
  --aw-tg-pad-x: clamp(1.25rem, 4vw, 3rem);
  --aw-tg-pad-y: clamp(3.25rem, 8vh, 6rem);
  --aw-tg-headline-min: clamp(1.5rem, 2.8vw, 2.25rem);
  --aw-tg-headline-fluid: 3.2vw;
  --aw-tg-headline-max: clamp(2rem, 4.5vw, 3rem);
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--aw-tg-text, #fff);
  background: var(--aw-tg-bg, #0b1a24);
  overflow: visible;
  isolation: isolate;
}

/* —— Rounded top/bottom SVG separators —— */

.arctic-wolf-tile-grid .aw-rounded-sep {
  --sep-h: 64px;
  --notch-w: min(20%, 12rem);
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: var(--sep-h);
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.arctic-wolf-tile-grid .aw-rounded-sep--top {
  top: calc(var(--sep-h) * -1);
}

.arctic-wolf-tile-grid .aw-rounded-sep--bottom {
  bottom: calc(var(--sep-h) * -1);
  transform: scaleY(-1);
}

.arctic-wolf-tile-grid .aw-rounded-sep--bottom .aw-notch-cap {
  fill: #0059b2;
}

.arctic-wolf-tile-grid .aw-notch {
  position: absolute;
  top: 0;
  display: block;
  width: var(--notch-w);
  height: 100%;
}

.arctic-wolf-tile-grid .aw-notch--left {
  left: 0;
}

.arctic-wolf-tile-grid .aw-notch--right {
  right: 0;
}

.arctic-wolf-tile-grid .aw-rounded-sep-blank {
  position: absolute;
  top: 0;
  left: var(--notch-w);
  right: var(--notch-w);
  height: 100%;
  background: transparent;
}

.arctic-wolf-tile-grid .aw-notch-cap {
  fill: var(--aw-tg-bg, #0b1a24);
}

.arctic-wolf-tile-grid--pad-spacious {
  --aw-tg-pad-y: clamp(5rem, 12vh, 9rem);
}

.arctic-wolf-tile-grid:not(.is-motion-init) .arctic-wolf-tile-grid__header,
.arctic-wolf-tile-grid:not(.is-motion-init) .arctic-wolf-tile-grid__tile {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-tile-grid:not(.is-motion-init) .arctic-wolf-tile-grid__header,
  .arctic-wolf-tile-grid:not(.is-motion-init) .arctic-wolf-tile-grid__tile {
    opacity: 1;
  }
}

/* —— Full-bleed background —— */

.arctic-wolf-tile-grid__bg {
  position: absolute;
  
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.arctic-wolf-tile-grid__bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 20%;
}

.arctic-wolf-tile-grid__frame {
  position: relative;
  z-index: 2;
  margin-inline: auto;
  max-width: 76rem;
  padding: var(--aw-tg-pad-y) var(--aw-tg-pad-x);
}

/* —— Header —— */

.arctic-wolf-tile-grid__header {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.5vw, 1.15rem);
  max-width: 100%;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.arctic-wolf-tile-grid--align-center .arctic-wolf-tile-grid__header {
  align-items: center;
  text-align: center;
}

.arctic-wolf-tile-grid__headline {
  margin: 0;
  max-width: min(92%, 52rem);
}

.arctic-wolf-tile-grid--align-center .arctic-wolf-tile-grid__headline,
.arctic-wolf-tile-grid--align-center .arctic-wolf-tile-grid__description {
  margin-inline: auto;
}

.arctic-wolf-tile-grid__headline-text {
  display: block;
  padding-bottom: 15px;
  font-family: var(--font-display) !important;
  font-size: clamp(
    var(--aw-tg-headline-min),
    calc(
      var(--aw-tg-headline-min) + var(--brand-headline-scale, 1) * var(--aw-tg-headline-fluid)
    ),
    var(--aw-tg-headline-max)
  ) !important;
  font-weight: var(--brand-headline-weight, 700) !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--aw-tg-text, #fff);
  background: linear-gradient(120deg, #fff 18%, #84e4f9 52%, #0066ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.arctic-wolf-tile-grid__headline-text sup {
  font-size: 0.42em;
  font-weight: 500;
  line-height: 0;
  vertical-align: super;
  margin-inline: 0.05em;
}

.arctic-wolf-tile-grid__headline-text span {
  color: var(--aw-tg-headline-accent, #00aaff);
  font-weight: 500;
}

.arctic-wolf-tile-grid--headline-xsmall {
  --aw-tg-headline-max: clamp(1.35rem, 3.5vw, 2rem);
}

.arctic-wolf-tile-grid--headline-small {
  --aw-tg-headline-max: clamp(1.5rem, 4vw, 2.35rem);
}

.arctic-wolf-tile-grid--headline-medium {
  --aw-tg-headline-max: clamp(1.75rem, 4.5vw, 2.75rem);
}

.arctic-wolf-tile-grid--headline-large {
  --aw-tg-headline-max: clamp(2rem, 7vw, 4.25rem);
}

.arctic-wolf-tile-grid__description {
  margin: 0;
  max-width: 1000px;
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: pretty;
  color: var(--aw-tg-text, #fff);
}

/* —— Glass card grid —— */

.arctic-wolf-tile-grid__grid {
  display: grid;
  align-items: stretch;
  gap: clamp(1.35rem, 2.4vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 0.35rem;
}

.arctic-wolf-tile-grid--count-2 .arctic-wolf-tile-grid__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arctic-wolf-tile-grid--count-4 .arctic-wolf-tile-grid__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arctic-wolf-tile-grid__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 0;
  color: var(--aw-tg-card-text, #fff);
  isolation: isolate;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  min-height: 0;
  border-radius: 20px;
  backdrop-filter: blur(25px);
  padding:
    clamp(1.85rem, 3vw, 2.35rem)
    clamp(1.35rem, 2.2vw, 1.75rem)
    clamp(1.35rem, 2.2vw, 1.75rem);
  box-shadow: 0px 8px 42px 0px rgb(17 26 68 / 39%);
}

.arctic-wolf-tile-grid__card-headline {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin: 0 0 0 clamp(0.85rem, 1.6vw, 1.15rem);
  padding-inline: 0.15rem;
  max-width: calc(100% - 1.5rem);
  font-family: var(--font-display) !important;
  font-size: clamp(1.59375rem, 2.25vw, 2rem)  !important;
  font-weight: 700  !important;
  line-height: 1.12  !important;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--aw-tg-card-text, #fff);
}

.arctic-wolf-tile-grid__card-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  min-height: 0;
  backdrop-filter: blur(25px);
  padding:
    clamp(1.85rem, 3vw, 2.35rem)
    clamp(1.35rem, 2.2vw, 1.75rem)
    clamp(1.35rem, 2.2vw, 1.75rem);
}

.arctic-wolf-tile-grid__tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  background-image: var(--aw-tg-tile-frame-image, url('../assets/blue-gradient.png'));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(145deg, rgba(0, 102, 255, 0), rgba(0, 102, 255, .3137254902), rgba(0, 102, 255, .5647058824), #06f);
    background: linear-gradient(185deg, rgba(0, 102, 255, .5647058824), rgba(0, 102, 255, .3137254902), rgba(0, 102, 255, .5647058824), #06f);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.arctic-wolf-tile-grid__card-panel > * {
  position: relative;
  z-index: 1;
}

.arctic-wolf-tile-grid--tile-bg-transparent .arctic-wolf-tile-grid__card-panel {
  background: transparent;
}

.arctic-wolf-tile-grid__card-description {
  margin: 0;
  flex: 1;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.125rem);;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.65;
  color: var(--aw-tg-card-text, #fff);
}

@media (max-width: 900px) {
  .arctic-wolf-tile-grid {
    --aw-tg-pad-y: clamp(2.5rem, 6vh, 4rem);
  }

  .arctic-wolf-tile-grid--pad-spacious {
    --aw-tg-pad-y: clamp(3rem, 8vh, 5rem);
  }

  .arctic-wolf-tile-grid--headline-large {
    --aw-tg-headline-max: clamp(1.85rem, 7vw, 2.65rem);
  }

  .arctic-wolf-tile-grid br {
    display: none;
  }

  .arctic-wolf-tile-grid__grid,
  .arctic-wolf-tile-grid--count-2 .arctic-wolf-tile-grid__grid,
  .arctic-wolf-tile-grid--count-4 .arctic-wolf-tile-grid__grid {
    grid-template-columns: 1fr;
  }

  .arctic-wolf-tile-grid__headline,
  .arctic-wolf-tile-grid__description {
    max-width: 100%;
  }
}

/* >>> arctic-wolf-tile-grid.css */


/* <<< arctic-wolf-sticky-steps.css */
/* Arctic Wolf — sticky scroll steps with pinned expanding media */

.arctic-wolf-sticky-steps {
  --aw-ss-frame-width: min(100%, calc(100dvh * 3 / 4));
  --aw-ss-headline-min: clamp(1.75rem, 3.2vw, 2.35rem);
  --aw-ss-headline-fluid: 4vw;
  --aw-ss-headline-max: clamp(2.25rem, 5.5vw, 3.25rem);
  min-height: 100dvh;
  position: relative;
  z-index: 0;
  /* Do not clip — sticky media needs an unclipped containing block */
  isolation: isolate;
  font-family: var(--font-body);
  color: var(--aw-ss-text, #fff);
  background: var(--aw-ss-bg-live, var(--aw-ss-bg, #0b1a24));
}

.arctic-wolf-sticky-steps::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--aw-ss-wash-strength, 1);
  background:
    radial-gradient(ellipse 70% 55% at 12% 28%, rgba(132, 228, 249, 0.16), transparent 62%),
    radial-gradient(ellipse 55% 45% at 88% 72%, var(--aw-ss-wash, rgba(18, 28, 66, 0.35)), transparent 68%);
}

.arctic-wolf-sticky-steps__mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arctic-wolf-sticky-steps__mark-svg {
  width: auto;
  height: min(72dvh, 85%);
  max-width: min(92%, 48rem);
  overflow: visible;
  transform-origin: center center;
  will-change: transform;
}

.arctic-wolf-sticky-steps__mark-base {
  fill: var(--aw-ss-bg-live, var(--aw-ss-bg, #0059b2));
}

.arctic-wolf-sticky-steps__mark-fill-base {
  fill: #01152d;
}

.arctic-wolf-sticky-steps__mark-mesh-layer {
  mix-blend-mode: normal;
}

.arctic-wolf-sticky-steps__mark-sheen {
  mix-blend-mode: screen;
  opacity: 0.55;
}

.arctic-wolf-sticky-steps__mark-edge {
  pointer-events: none;
  opacity: 0.85;
}

.arctic-wolf-sticky-steps__mark-edge-bloom {
  opacity: 0.7;
}

.arctic-wolf-sticky-steps__mark-edge-core {
  opacity: 1;
}

.arctic-wolf-sticky-steps__frame[hidden] {
  display: none !important;
}

.arctic-wolf-sticky-steps__container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3em;
  padding-right: 0;
  position: relative;
  z-index: 2;
}

.arctic-wolf-sticky-steps__collection {
  min-height: var(--aw-ss-scroll-distance, 240vh);
  position: relative;
  z-index: 1;
  background: inherit;
}

.arctic-wolf-sticky-steps__list {
  grid-column-gap: max(20dvh, 4rem);
  grid-row-gap: max(20dvh, 4rem);
  flex-flow: column;
  min-height: calc(var(--aw-ss-scroll-distance, 240vh) - 2rem);
  padding-top: calc(50dvh - 7.5em);
  padding-bottom: calc(50dvh - 7.5em);
  justify-content: space-between;
  display: flex;
}

.arctic-wolf-sticky-steps__step {
  position: relative;
}

.arctic-wolf-sticky-steps__copy {
  position: relative;
  grid-column-gap: 1.15em;
  grid-row-gap: 1.15em;
  flex-flow: column;
  width: 50%;
  max-width: 28rem;
  padding-right: 6em;
  display: flex;
}

.arctic-wolf-sticky-steps__index {
  position: absolute;
  top: -0.35em;
  left: -0.08em;
  z-index: 0;
  font-family: var(--font-display) !important;
  font-size: clamp(5.5rem, 14vw, 9.5rem) !important;
  font-weight: 700 !important;
  line-height: 0.8 !important;
  letter-spacing: -0.04em;
  color: var(--aw-ss-index, rgba(132, 228, 249, 0.14));
  pointer-events: none;
  user-select: none;
  transition:
    color 0.35s ease-out,
    opacity 0.35s ease-out,
    transform 0.35s ease-out;
}

.arctic-wolf-sticky-steps__headline,
.arctic-wolf-sticky-steps__description {
  position: relative;
  z-index: 1;
}

.arctic-wolf-sticky-steps__headline {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 15px;
  font-size: clamp(
    var(--aw-ss-headline-min),
    calc(
      var(--aw-ss-headline-min) + var(--brand-headline-scale, 1) * var(--aw-ss-headline-fluid)
    ),
    var(--aw-ss-headline-max)
  ) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  text-wrap: balance;
  color: var(--aw-ss-text, #fff);
  transition: color 0.35s ease-out;
}

.arctic-wolf-sticky-steps--headline-large {
  --aw-ss-headline-max: clamp(2.35rem, 6vw, 3.5rem);
}

.arctic-wolf-sticky-steps__description {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 36ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--aw-ss-text, #fff);
  opacity: 0.88;
}

.arctic-wolf-sticky-steps__media {
  width: 50%;
  height: 100dvh;
  padding-left: 3em;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background: transparent;
}

@media screen and (min-width: 992px) {
  .arctic-wolf-sticky-steps__collection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'copy media';
  }

  .arctic-wolf-sticky-steps__container {
    grid-area: copy;
    width: 100%;
    max-width: none;
    padding-left: 3em;
    padding-right: 0;
  }

  .arctic-wolf-sticky-steps__copy {
    width: 100%;
    max-width: min(28rem, 100%);
  }

  .arctic-wolf-sticky-steps__media {
    grid-area: media;
    position: sticky;
    top: 0;
    right: auto;
    left: auto;
    align-self: start;
    width: 100%;
    height: 100dvh;
  }
}

.arctic-wolf-sticky-steps__pin {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.arctic-wolf-sticky-steps__frame {
  aspect-ratio: 3 / 4;
  width: var(--aw-ss-frame-width);
  max-height: 100dvh;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(8, 18, 42, 0.32);
}

.arctic-wolf-sticky-steps__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    165deg,
    rgba(132, 228, 249, 0.45),
    rgba(0, 102, 255, 0.15) 42%,
    rgba(255, 255, 255, 0.08)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.arctic-wolf-sticky-steps__image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  will-change: transform, opacity, clip-path;
}

.arctic-wolf-sticky-steps__image--layer {
  opacity: 0;
}

/* —— Desktop step status states —— */

@media screen and (min-width: 992px) {
  [data-aw-ss-cinematic-step-status] .arctic-wolf-sticky-steps__copy {
    transition:
      opacity 0.4s ease-out,
      transform 0.4s ease-out;
    opacity: 0.32;
    transform: translateY(0.55rem);
  }

  [data-aw-ss-cinematic-step-status='before'] .arctic-wolf-sticky-steps__copy {
    opacity: 0.38;
    transform: translateY(-0.35rem);
  }

  [data-aw-ss-cinematic-step-status='after'] .arctic-wolf-sticky-steps__copy {
    opacity: 0.28;
    transform: translateY(0.65rem);
  }

  [data-aw-ss-cinematic-step-status='active'] .arctic-wolf-sticky-steps__copy {
    opacity: 1;
    transform: translateY(0);
  }

  [data-aw-ss-cinematic-step-status] .arctic-wolf-sticky-steps__index {
    opacity: 0.35;
    transform: translateY(0.2em);
  }

  [data-aw-ss-cinematic-step-status='before'] .arctic-wolf-sticky-steps__index {
    opacity: 0.22;
    transform: translateY(-0.12em);
  }

  [data-aw-ss-cinematic-step-status='after'] .arctic-wolf-sticky-steps__index {
    opacity: 0.18;
  }

  [data-aw-ss-cinematic-step-status='active'] .arctic-wolf-sticky-steps__index {
    opacity: 1;
    color: var(--aw-ss-index, rgba(132, 228, 249, 0.22));
    transform: translateY(0);
  }

  [data-aw-ss-cinematic-step-status='active'] .arctic-wolf-sticky-steps__headline {
    background: linear-gradient(
      115deg,
      #ffffff 0%,
      #ffffff 42%,
      var(--aw-ss-accent, #84e4f9) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  [data-aw-ss-cinematic-step-status]:not([data-aw-ss-cinematic-step-status='active'])
    .arctic-wolf-sticky-steps__headline {
    color: rgba(255, 255, 255, 0.72);
    background: none;
    -webkit-text-fill-color: unset;
  }

  [data-aw-ss-cinematic-step-status]:not([data-aw-ss-cinematic-step-status='active'])
    .arctic-wolf-sticky-steps__description {
    opacity: 0.7;
  }
}

/* ≤991: leave desktop sticky grid. Mark becomes a section watermark;
   steps stack in flow. Aligned with JS DESKTOP_MQ (min-width: 992px). */
@media screen and (max-width: 991px) {
  .arctic-wolf-sticky-steps__collection {
    display: flex;
    flex-flow: column;
    gap: clamp(2.5rem, 6vh, 4rem);
    min-height: auto;
    padding: clamp(3.5rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3rem);
  }

  .arctic-wolf-sticky-steps__container {
    display: contents;
    padding-left: 0;
    padding-right: 0;
  }

  .arctic-wolf-sticky-steps__list {
    display: contents;
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
  }

  .arctic-wolf-sticky-steps__copy {
    width: 100%;
    max-width: 40rem;
    padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
    padding-right: 0;
    padding-left: 0;
    opacity: 1;
    transform: none;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .arctic-wolf-sticky-steps__index {
    position: static;
    display: block;
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--aw-ss-accent, #84e4f9);
    opacity: 0.85;
  }

  .arctic-wolf-sticky-steps__headline {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    background: linear-gradient(
      115deg,
      #ffffff 0%,
      #ffffff 42%,
      var(--aw-ss-accent, #84e4f9) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .arctic-wolf-sticky-steps__description {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    opacity: 0.92;
  }

  /* Watermark media — not a flex item between steps */
  .arctic-wolf-sticky-steps__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    padding: 0;
    pointer-events: none;
  }

  .arctic-wolf-sticky-steps__pin {
    position: absolute;
    inset: 0;
    display: block;
    height: auto;
  }

  .arctic-wolf-sticky-steps__mark {
    position: absolute;
    top: 8%;
    left: 50%;
    translate: -50% 0;
    z-index: 0;
    width: min(72vw, 18rem);
    height: auto;
    min-height: 0;
    padding: 0;
    opacity: 1;
  }

  .arctic-wolf-sticky-steps__mark-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    will-change: auto;
  }

  .arctic-wolf-sticky-steps__mark-base {
    fill: rgba(132, 228, 249, 0.16);
  }

  .arctic-wolf-sticky-steps__mark-fill-base {
    fill: rgba(1, 21, 45, 0.55);
  }

  .arctic-wolf-sticky-steps__mark-mesh-layer {
    opacity: 0.55;
  }

  .arctic-wolf-sticky-steps__mark-sheen {
    opacity: 0.5;
  }

  .arctic-wolf-sticky-steps__mark-edge {
    display: none;
  }

  .arctic-wolf-sticky-steps__step {
    position: relative;
    z-index: 2;
  }

  .arctic-wolf-sticky-steps__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: none;
  }

  /* One still per stack step on mobile — only show the active layer via z-index order */
  .arctic-wolf-sticky-steps__image--layer {
    opacity: 0;
  }

  .arctic-wolf-sticky-steps__image--base,
  .arctic-wolf-sticky-steps__image[data-aw-ss-cinematic-image-index='0'] {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-aw-ss-cinematic-step-status] .arctic-wolf-sticky-steps__copy,
  [data-aw-ss-cinematic-step-status] .arctic-wolf-sticky-steps__index {
    transition: none;
  }

  .arctic-wolf-sticky-steps__image--layer {
    opacity: 1;
  }
}

/* >>> arctic-wolf-sticky-steps.css */


/* <<< arctic-wolf-scroll-tiles.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Scroll Tiles
   BEM: .arctic-wolf-scroll-tiles
   Sticky left messaging + 34° slash gutter + standard glass tile rows.
   Exit wash: brand dark overlay scrubs in for a clean handoff.
   Glass blur lives on .__tile-glass; never animate opacity on that layer.
   ========================================================================== */

.arctic-wolf-scroll-tiles {
  --aw-angle: 34;
  --aw-line-top: calc(50% - 50% * tan(var(--aw-angle) * 1deg));
  --aw-line-bottom: calc(50% + 50% * tan(var(--aw-angle) * 1deg));
  --aw-st-pad-x: clamp(1.25rem, 4vw, 3rem);
  --aw-st-split-max: 76rem;
  --aw-st-copy-max: 30rem;
  --aw-st-tile-max: 34rem;
  --aw-st-headline-min: clamp(2rem, 3.6vw, 2.85rem);
  --aw-st-headline-fluid: 4.2vw;
  --aw-st-headline-max: clamp(2.5rem, 5.5vw, 3.75rem);
  --aw-st-tile-gap: clamp(1rem, 1.8vw, 1.35rem);
  --aw-st-tile-accent: #0066ff;
  --aw-st-wash: #000000;
  --aw-btn-gradient-start: #0066ff;
  --aw-btn-gradient-end: #47fffa;
  --aw-btn-text: #0b122a;
  position: relative;
  z-index: 0;
  width: 100%;
  /* overflow visible so sticky bg can lock to the viewport within the section */
  overflow: visible;
  isolation: isolate;
  color: var(--aw-st-text, #fff);
  background: var(--aw-st-wash, #121c42);
}

.arctic-wolf-scroll-tiles__bg-media {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  /* Pull following content up so the sticky photo sits behind the section */
  margin-bottom: calc(-100vh);
  margin-bottom: calc(-100svh);
  margin-bottom: calc(-100dvh);
  overflow: hidden;
  pointer-events: none;
}

.arctic-wolf-scroll-tiles__bg-image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
}

.arctic-wolf-scroll-tiles .liquid-gradient {
  --liquid-gradient-fade: 56%;
  --liquid-gradient-drift-x: 22%;
  --liquid-gradient-drift-y: 12%;
  --liquid-gradient-cycle-duration: 14;
}

.arctic-wolf-scroll-tiles__gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.arctic-wolf-scroll-tiles--section-bg-gradient {
  background: var(--aw-st-wash, #121c42);
}

/* Entrance scrim — black → transparent bridge from the section above */
.arctic-wolf-scroll-tiles__top-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(10rem, 32vh, 18rem);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #000 0%,
    color-mix(in srgb, #000 72%, transparent) 38%,
    color-mix(in srgb, #000 28%, transparent) 68%,
    transparent 100%
  );
}

/* Mid-scroll color shift (blue brand glow → deeper navy) */
.arctic-wolf-scroll-tiles__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, #0059b2 42%, transparent) 0%,
      color-mix(in srgb, #0066ff 18%, transparent) 38%,
      color-mix(in srgb, #121c42 55%, transparent) 100%
    );
}

/* Exit wash — solid brand dark for handoff to the next section */
.arctic-wolf-scroll-tiles__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--aw-st-wash, #121c42) 0%, transparent) 0%,
      color-mix(in srgb, var(--aw-st-wash, #121c42) 55%, transparent) 42%,
      var(--aw-st-wash, #121c42) 78%,
      var(--aw-st-wash, #121c42) 100%
    );
}

.arctic-wolf-scroll-tiles__frame {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Clip rotated slash AABB so it can't widen the page */
  overflow-x: clip;
  padding:
    clamp(4rem, 10vh, 7rem)
    var(--aw-st-pad-x)
    clamp(5rem, 12vh, 8rem);
  box-sizing: border-box;
}

.arctic-wolf-scroll-tiles--with-resource-callout .arctic-wolf-scroll-tiles__frame {
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* Resource callout nested inside scroll-tiles — shares sticky photo + wash */
.arctic-wolf-scroll-tiles .arctic-wolf-resource-callout--embedded {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: clamp(2.5rem, 15vh, 8.5rem)
  var(--aw-st-pad-x)
  clamp(4rem, 10vh, 7rem)
}

.arctic-wolf-scroll-tiles .arctic-wolf-resource-callout--embedded .arctic-wolf-resource-callout__frame {
  max-width: var(--aw-st-split-max);
}

.arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__intro {
  opacity: 0;
}

.arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__tile {
  opacity: 0;
  transform: translate3d(0, 2.25rem, 0);
}

/* —— Split: sticky copy left, slash gutter, tile rows right —— */

.arctic-wolf-scroll-tiles__split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(18rem, 1.15fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  width: 100%;
  max-width: var(--aw-st-split-max);
  margin-inline: auto;
}

/* Luminous brand slash in the gutter */
.arctic-wolf-scroll-tiles__slash {
  position: absolute;
  top: -8%;
  bottom: -8%;
  left: 44%;
  z-index: 1;
  width: 2px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, #84e4f9 55%, transparent) 18%,
    #84e4f9 42%,
    #0066ff 58%,
    color-mix(in srgb, #0066ff 45%, transparent) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 18px color-mix(in srgb, #84e4f9 55%, transparent),
    0 0 42px color-mix(in srgb, #0066ff 35%, transparent);
  transform: rotate(calc(var(--aw-angle) * 1deg));
  transform-origin: center center;
  opacity: 0.85;
}

.arctic-wolf-scroll-tiles__intro {
  position: sticky;
  top: clamp(5.5rem, 14vh, 7.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.95rem, 1.8vw, 1.25rem);
  width: 100%;
  max-width: var(--aw-st-copy-max);
  padding-block: 0.35rem;
  padding: 10vh clamp(0.5rem, 2vw, 1.25rem) 0 0;
  text-align: left;
}

.arctic-wolf-scroll-tiles__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--aw-st-text, #fff);
}

.arctic-wolf-scroll-tiles__headline {
  margin: 0;
  padding-bottom: 15px;
  max-width: 12ch;
  font-family: var(--font-display) !important;
  font-size: clamp(
    var(--aw-st-headline-min),
    calc(
      var(--aw-st-headline-min) + var(--brand-headline-scale, 1) * var(--aw-st-headline-fluid)
    ),
    var(--aw-st-headline-max)
  ) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--aw-st-text, #fff);
  background: linear-gradient(120deg, #fff 18%, #84e4f9 52%, #0066ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.arctic-wolf-scroll-tiles--headline-medium {
  --aw-st-headline-max: clamp(2.35rem, 5.5vw, 3.75rem);
}

.arctic-wolf-scroll-tiles__description {
  margin: 0;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.35vw, 1.1rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  color: var(--aw-st-text, #fff);
}

.arctic-wolf-scroll-tiles__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.25rem;
  min-height: 3.25rem;
  padding: 0 2rem;
  border: none;
  background: linear-gradient(
    105deg,
    var(--aw-btn-gradient-start) 0%,
    color-mix(in srgb, var(--aw-btn-gradient-start) 35%, var(--aw-btn-gradient-end)) 48%,
    var(--aw-btn-gradient-end) 100%
  );
  color: var(--aw-btn-text) !important;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.arctic-wolf-scroll-tiles__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    var(--aw-btn-gradient-end) 0%,
    color-mix(in srgb, var(--aw-btn-gradient-end) 40%, var(--aw-btn-gradient-start)) 52%,
    var(--aw-btn-gradient-start) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.arctic-wolf-scroll-tiles__cta:hover::before {
  opacity: 1;
}

.arctic-wolf-scroll-tiles__cta:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 28px rgba(0, 102, 255, 0.38),
    0 2px 10px rgba(0, 0, 0, 0.22);
}

.arctic-wolf-scroll-tiles__cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--aw-btn-gradient-end) 70%, #fff);
  outline-offset: 3px;
}

.arctic-wolf-scroll-tiles__cta-label {
  position: relative;
  z-index: 1;
}

/* —— Standard glass tile rows —— */

.arctic-wolf-scroll-tiles__rows {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--aw-st-tile-gap);
  width: 100%;
  max-width: var(--aw-st-tile-max);
  min-width: 0;
  margin-left: auto;
  padding-top: 50vh;
}

.arctic-wolf-scroll-tiles__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 20px;
  color: var(--aw-st-tile-text, #e4edfa);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
}

.arctic-wolf-scroll-tiles__tile-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: color-mix(in srgb, #0b1a24 28%, transparent);
  /* Own compositor layer so parent entrance transforms don't thrash backdrop-filter */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.arctic-wolf-scroll-tiles--tile-bg-glass .arctic-wolf-scroll-tiles__tile-glass {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, #ffffff 14%, transparent) 0%,
      color-mix(in srgb, #0066ff 10%, transparent) 48%,
      color-mix(in srgb, #0b1a24 35%, transparent) 100%
    );
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #84e4f9 18%, transparent);
}

.arctic-wolf-scroll-tiles__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    185deg,
    rgba(0, 102, 255, 0.55),
    rgba(0, 102, 255, 0.22),
    rgba(132, 228, 249, 0.45),
    #0066ff
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.arctic-wolf-scroll-tiles__tile-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding:
    clamp(1.55rem, 2.6vw, 2.1rem)
    clamp(1.4rem, 2.4vw, 1.9rem)
    clamp(1.4rem, 2.2vw, 1.75rem);
}

.arctic-wolf-scroll-tiles__tile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.arctic-wolf-scroll-tiles__tile-headline {
  margin: 0 0 35px;
  max-width: 20ch;
  font-family: var(--font-body) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--aw-st-tile-text, #e4edfa);
}

.arctic-wolf-scroll-tiles__tile-description {
  margin: 0 0 15px;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.125rem);;
  font-weight: 400;
  line-height: 1.65;
  color: var(--aw-st-tile-text, #e4edfa);
}

.arctic-wolf-scroll-tiles__tile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
  min-height: 2.5rem;
  color: var(--aw-btn-gradient-end) !important;
  font-family: var(--font-body);
  font-size:  clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color 0.28s ease,
    gap 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.arctic-wolf-scroll-tiles__tile-link:hover {
  color: color-mix(in srgb, var(--aw-st-tile-accent, #0066ff) 55%, #fff) !important;
  gap: 0.7rem;
}

.arctic-wolf-scroll-tiles__tile-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--aw-st-tile-accent, #0066ff) 65%, #fff);
  outline-offset: 3px;
}

.arctic-wolf-scroll-tiles__tile-link-arrow {
  display: inline-block;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.arctic-wolf-scroll-tiles__tile-link:hover .arctic-wolf-scroll-tiles__tile-link-arrow {
  transform: translateX(3px);
}

/* —— Mobile —— */

@media (max-width: 900px) {
  .arctic-wolf-scroll-tiles__frame {
    padding-block: clamp(2.75rem, 8vh, 4.5rem) clamp(3.5rem, 9vh, 5.5rem);
  }

  .arctic-wolf-scroll-tiles__split {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vh, 2.75rem);
  }

  .arctic-wolf-scroll-tiles__slash {
    display: none;
  }

  .arctic-wolf-scroll-tiles__intro {
    position: relative;
    top: auto;
    max-width: 36rem;
    padding-right: 0;
  }

  .arctic-wolf-scroll-tiles__eyebrow {
    letter-spacing: 0.22em;
  }

  .arctic-wolf-scroll-tiles__headline {
    max-width: min(14ch, 100%);
  }

  .arctic-wolf-scroll-tiles__description {
    max-width: min(36ch, 100%);
  }

  .arctic-wolf-scroll-tiles__tile-link {
    min-height: 2.75rem;
    padding: 0.35rem 0;
  }

  .arctic-wolf-scroll-tiles__rows {
    max-width: 100%;
    margin-left: 0;
    padding-top: clamp(1.25rem, 4vh, 2rem);
  }

  .arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__intro {
    opacity: 1;
  }

  .arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__tile {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__intro {
    opacity: 1;
  }

  .arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__tile {
    opacity: 1;
    transform: none;
  }

  .arctic-wolf-scroll-tiles__tint,
  .arctic-wolf-scroll-tiles__wash {
    opacity: 0.55;
  }
}

/* >>> arctic-wolf-scroll-tiles.css */


/* <<< arctic-wolf-sticky-steps-cinematic.css */
/* Arctic Wolf — cinematic duo: 50/50 slash split, viewport entrance */

.arctic-wolf-sticky-steps-cinematic {
  --aw-angle: 22;
  --aw-line-top: calc(50% - 50% * tan(var(--aw-angle) * 1deg));
  --aw-line-bottom: calc(50% + 50% * tan(var(--aw-angle) * 1deg));
  --aw-ss-cine-pad-x: clamp(1.5rem, 4vw, 3.5rem);
  --aw-ss-cine-copy-max: min(52rem, 92%);
  --aw-ss-cine-headline-min: clamp(2.5rem, 5.2vw, 4.75rem);
  --aw-ss-cine-headline-fluid: 6.5vw;
  --aw-ss-cine-headline-max: clamp(3rem, 7.5vw, 5.25rem);
  --aw-ss-cine-description: clamp(0.96875rem, 1.75vw, 1.75rem);
  --aw-ss-cine-pane-overlap: clamp(1rem, 2.5vw, 2rem);
  position: relative;
  width: 100%;
  min-height: 200vh;
  min-height: 200dvh;
  overflow: visible;
  isolation: isolate;
  background: var(--aw-ss-cine-bg-right, #0b1a24);
}

.arctic-wolf-sticky-steps-cinematic--headline-small {
  --aw-ss-cine-headline-max: clamp(2.5rem, 6vw, 4rem);
}

.arctic-wolf-sticky-steps-cinematic--headline-medium {
  --aw-ss-cine-headline-max: clamp(3.25rem, 8vw, 3.5rem);
}

.arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) .arctic-wolf-sticky-steps-cinematic__pane-inner,
.arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) [data-ss-cine-form-copy],
.arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) [data-ss-cine-form-panel] {
  opacity: 0;
}

.arctic-wolf-sticky-steps-cinematic__bg {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin-bottom: -100vh;
  margin-bottom: -100dvh;
  overflow: hidden;
  pointer-events: none;
}

.arctic-wolf-sticky-steps-cinematic__bg-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  will-change: transform;
}

.arctic-wolf-sticky-steps-cinematic__bg-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.arctic-wolf-sticky-steps-cinematic__bg-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  will-change: transform;
}

.arctic-wolf-sticky-steps-cinematic__bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 90% 80% at 12% 38%, color-mix(in srgb, #121c42 58%, transparent), transparent 72%),
    radial-gradient(ellipse 85% 75% at 88% 62%, color-mix(in srgb, #0b1a24 42%, transparent), transparent 74%),
    radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, #050b14 28%, transparent), transparent 78%);
  pointer-events: none;
}

.arctic-wolf-sticky-steps-cinematic__bg-wash {
  position: absolute;
  inset: -12%;
  z-index: 3;
  overflow: visible;
  opacity: 0.78;
  pointer-events: none;
}

.arctic-wolf-sticky-steps-cinematic__bg-wash-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.arctic-wolf-sticky-steps-cinematic__bg-wash-layer--a {
  background:
    radial-gradient(
      ellipse 95% 85% at 10% 36%,
      color-mix(in srgb, #0066ff 18%, transparent) 0%,
      color-mix(in srgb, #0066ff 8%, transparent) 42%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 80% 72% at 72% 68%,
      color-mix(in srgb, #2eeded 12%, transparent) 0%,
      color-mix(in srgb, #2eeded 5%, transparent) 38%,
      transparent 76%
    );
  animation: aw-ss-cine-wash-a 14s ease-in-out infinite;
}

.arctic-wolf-sticky-steps-cinematic__bg-wash-layer--b {
  background:
    radial-gradient(
      ellipse 88% 78% at 58% 24%,
      color-mix(in srgb, #84e4f9 14%, transparent) 0%,
      color-mix(in srgb, #84e4f9 6%, transparent) 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 76% 68% at 30% 82%,
      color-mix(in srgb, #0059b2 16%, transparent) 0%,
      color-mix(in srgb, #0059b2 7%, transparent) 44%,
      transparent 78%
    );
  animation: aw-ss-cine-wash-b 18s ease-in-out infinite;
}

@keyframes aw-ss-cine-wash-a {
  0%,
  100% {
    opacity: 0.42;
    transform: translate3d(-2.5%, -1.5%, 0) scale(1.04);
  }

  50% {
    opacity: 0.68;
    transform: translate3d(2.5%, 2%, 0) scale(1.1);
  }
}

@keyframes aw-ss-cine-wash-b {
  0%,
  100% {
    opacity: 0.34;
    transform: translate3d(2%, 1%, 0) scale(1.06);
  }

  50% {
    opacity: 0.58;
    transform: translate3d(-2%, -2.5%, 0) scale(1.12);
  }
}

.arctic-wolf-sticky-steps-cinematic__stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

/* Soft center blend — feathers the 50/50 column seam */
.arctic-wolf-sticky-steps-cinematic__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 42% 120% at 50% 50%,
      color-mix(in srgb, #121c42 22%, transparent) 0%,
      color-mix(in srgb, #0b1a24 10%, transparent) 38%,
      transparent 72%
    );
}

.arctic-wolf-sticky-steps-cinematic__pane {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  background: transparent;
}

.arctic-wolf-sticky-steps-cinematic__pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.arctic-wolf-sticky-steps-cinematic__pane--left::before {
  background:
    radial-gradient(
      ellipse 110% 95% at 4% 44%,
      color-mix(in srgb, #0066ff 14%, transparent) 0%,
      color-mix(in srgb, #0066ff 6%, transparent) 40%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 90% 80% at 62% 58%,
      color-mix(in srgb, var(--aw-ss-cine-bg-left, #121c42) 32%, transparent) 0%,
      color-mix(in srgb, var(--aw-ss-cine-bg-left, #121c42) 12%, transparent) 48%,
      transparent 82%
    );
}

.arctic-wolf-sticky-steps-cinematic__pane--right {
  width: calc(100% + var(--aw-ss-cine-pane-overlap));
  margin-left: calc(var(--aw-ss-cine-pane-overlap) * -1);
  color: var(--aw-ss-cine-text-right, #e4edfa);
}

.arctic-wolf-sticky-steps-cinematic__pane--right::before {
  clip-path: polygon(
    0% var(--aw-line-top),
    100% 0%,
    100% 100%,
    0% var(--aw-line-bottom)
  );
  background:
    radial-gradient(
      ellipse 105% 92% at 96% 56%,
      color-mix(in srgb, #2eeded 12%, transparent) 0%,
      color-mix(in srgb, #2eeded 5%, transparent) 42%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 88% 78% at 38% 62%,
      color-mix(in srgb, var(--aw-ss-cine-bg-right, #0b1a24) 28%, transparent) 0%,
      color-mix(in srgb, var(--aw-ss-cine-bg-right, #0b1a24) 10%, transparent) 46%,
      transparent 84%
    );
}

.arctic-wolf-sticky-steps-cinematic__pane--left {
  color: var(--aw-ss-cine-text-left, #e4edfa);
}

.arctic-wolf-sticky-steps-cinematic__pane-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.65rem, 1.2vw, 1rem);
  width: 100%;
  max-width: var(--aw-ss-cine-copy-max);
  will-change: transform, opacity;
}

.arctic-wolf-sticky-steps-cinematic__pane-inner p {
  color: #fff;
}

.arctic-wolf-sticky-steps-cinematic__pane--left .arctic-wolf-sticky-steps-cinematic__pane-inner {
  margin-left: auto;
  padding-left: var(--aw-ss-cine-pad-x);
  padding-right: clamp(1rem, 2vw, 1.5rem);
  text-align: left;
}

.arctic-wolf-sticky-steps-cinematic__pane--right .arctic-wolf-sticky-steps-cinematic__pane-inner {
  margin-right: auto;
  padding-right: var(--aw-ss-cine-pad-x);
  padding-left: clamp(2.5rem, 5vw, 4rem);
  text-align: left;
}

.arctic-wolf-sticky-steps-cinematic__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.46em;
  text-transform: uppercase;
}

.arctic-wolf-sticky-steps-cinematic__headline {
  margin: 0;
  padding-bottom: 2rem;
  max-width: none;
  font-family: var(--font-display) !important;
  font-size: clamp(
    var(--aw-ss-cine-headline-min),
    calc(var(--aw-ss-cine-headline-min) + var(--brand-headline-scale, 1) * var(--aw-ss-cine-headline-fluid)),
    var(--aw-ss-cine-headline-max)
  ) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0;
  text-wrap: balance;
  color: #fff;
}

.arctic-wolf-sticky-steps-cinematic__headline span {
  font-weight: 700;
}

.arctic-wolf-sticky-steps-cinematic__pane--left .arctic-wolf-sticky-steps-cinematic__headline span {
  color: var(--color-white, #84e4f9);
}

.arctic-wolf-sticky-steps-cinematic__pane--right .arctic-wolf-sticky-steps-cinematic__headline span {
  color: var(--aw-ss-cine-accent-right, #2eeded);
  background: linear-gradient(120deg, #fff 18%, #84e4f9 52%, #0066ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.arctic-wolf-sticky-steps-cinematic__description {
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--aw-ss-cine-description);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 500px;
}

@media screen and (max-width: 991px) {
  .arctic-wolf-sticky-steps-cinematic {
    min-height: auto;
    overflow-x: clip;
  }

  .arctic-wolf-sticky-steps-cinematic__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: auto;
    margin-bottom: 0;
  }

  .arctic-wolf-sticky-steps-cinematic__bg-wash {
    inset: 0;
  }

  .arctic-wolf-sticky-steps-cinematic__bg-wash-layer--a,
  .arctic-wolf-sticky-steps-cinematic__bg-wash-layer--b {
    animation: none;
    opacity: 0.5;
    transform: none;
  }

  .arctic-wolf-sticky-steps-cinematic__stage {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .arctic-wolf-sticky-steps-cinematic__pane--right {
    width: 100%;
    margin-left: 0;
  }

  .arctic-wolf-sticky-steps-cinematic__pane--right::before {
    clip-path: none;
  }

  .arctic-wolf-sticky-steps-cinematic__stage::before {
    display: none;
  }

  .arctic-wolf-sticky-steps-cinematic__pane {
    min-height: auto;
    padding-block: clamp(2.5rem, 6vh, 4rem);
  }

  .arctic-wolf-sticky-steps-cinematic__pane-inner,
  .arctic-wolf-sticky-steps-cinematic__pane--left .arctic-wolf-sticky-steps-cinematic__pane-inner,
  .arctic-wolf-sticky-steps-cinematic__pane--right .arctic-wolf-sticky-steps-cinematic__pane-inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--aw-ss-cine-pad-x);
  }

  .arctic-wolf-sticky-steps-cinematic__eyebrow {
    letter-spacing: 0.22em;
  }

  .arctic-wolf-sticky-steps-cinematic--headline-medium {
    --aw-ss-cine-headline-min: clamp(1.85rem, 7vw, 2.5rem);
    --aw-ss-cine-headline-max: clamp(2.15rem, 8vw, 2.85rem);
  }
}

@media screen and (max-width: 768px) {
  .arctic-wolf-sticky-steps-cinematic__pane--right::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) .arctic-wolf-sticky-steps-cinematic__pane-inner,
  .arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) [data-ss-cine-form-copy],
  .arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) [data-ss-cine-form-panel] {
    opacity: 1;
  }

  .arctic-wolf-sticky-steps-cinematic__bg-wash-layer--a,
  .arctic-wolf-sticky-steps-cinematic__bg-wash-layer--b {
    animation: none;
    opacity: 0.5;
    transform: none;
  }

  .arctic-wolf-sticky-steps-cinematic__bg-image,
  .arctic-wolf-sticky-steps-cinematic__bg-video-media {
    will-change: auto;
  }

  .arctic-wolf-sticky-steps-cinematic__bg-video {
    display: none;
  }
}

/* >>> arctic-wolf-sticky-steps-cinematic.css */


/* <<< arctic-wolf-resource-callout.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Resource Callout
   BEM: .arctic-wolf-resource-callout
   Gradient-bordered callout box — image + copy with layout variants.
   ========================================================================== */

.arctic-wolf-resource-callout {
  --aw-rc-pad-x: clamp(1.25rem, 4vw, 6rem);
  --aw-rc-pad-y: clamp(2.5rem, 6vh, 6rem);
  --aw-rc-box-pad: clamp(1.75rem, 4vw, 3rem);
  --aw-rc-radius: 20px;
  --aw-rc-headline-min: clamp(1.75rem, 3vw, 2.5rem);
  --aw-rc-headline-fluid: 3.4vw;
  --aw-rc-headline-max: clamp(2.25rem, 4.8vw, 3.5rem);
  --aw-rc-border-start: #00aaff;
  --aw-rc-border-mid: #0066ff;
  --aw-rc-border-end: #47fffa;
  --aw-btn-gradient-start: #0066ff;
  --aw-btn-gradient-end: #47fffa;
  --aw-btn-text: #0b122a;
  position: relative;
  width: 100%;
  padding: var(--aw-rc-pad-y) var(--aw-rc-pad-x);
  isolation: isolate;
}

.arctic-wolf-resource-callout__frame {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
}

/* —— Gradient border shell —— */

.arctic-wolf-resource-callout__box {
  padding: 1px;
  border-radius: var(--aw-rc-radius);
  background: linear-gradient(
    135deg,
    var(--aw-rc-border-start) 0%,
    color-mix(in srgb, var(--aw-rc-border-mid) 70%, var(--aw-rc-border-end)) 42%,
    var(--aw-rc-border-end) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--aw-rc-border-start) 18%, transparent),
    0 18px 48px rgba(0, 20, 40, 0.22);
  backface-visibility: hidden;
  transform: translateZ(0);
}

.arctic-wolf-resource-callout__box-inner {
  position: relative;
  border-radius: calc(var(--aw-rc-radius) - 1px);
  background: var(--aw-rc-bg, #0b1a24);
  overflow: hidden;
}

.arctic-wolf-resource-callout--bg-gradient .arctic-wolf-resource-callout__box-inner {
  background: linear-gradient(
    105deg,
    var(--aw-rc-bg-start, #0b2a3d) 0%,
    color-mix(in srgb, var(--aw-rc-bg-start, #0b2a3d) 55%, var(--aw-rc-bg-end, #050d14)) 48%,
    var(--aw-rc-bg-end, #050d14) 100%
  );
}

/* —— Featured image as background (105% of box-inner) —— */

.arctic-wolf-resource-callout__cover-bg {
  position: absolute;
  top: 50%;
  z-index: 0;
  height: 105%;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: hidden;
  opacity: var(--aw-rc-cover-opacity, 1);
}

.arctic-wolf-resource-callout--layout-left .arctic-wolf-resource-callout__cover-bg {
  left: 0;
}

.arctic-wolf-resource-callout__cover-bg-image {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

/* Soft fade into copy */
.arctic-wolf-resource-callout--cover-edge-soft.arctic-wolf-resource-callout--layout-left
  .arctic-wolf-resource-callout__cover-bg {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--aw-rc-cover-edge-solid, 58%),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 var(--aw-rc-cover-edge-solid, 58%),
    transparent 100%
  );
}

.arctic-wolf-resource-callout--cover-edge-soft {
  --aw-rc-cover-edge-solid: 62%;
}

/* Brand tint wash toward copy */
.arctic-wolf-resource-callout__cover-bg-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--aw-rc-bg, #0b1a24) 72%, transparent) 100%
  );
  opacity: 0.55;
}

.arctic-wolf-resource-callout--bg-gradient .arctic-wolf-resource-callout__cover-bg-tint {
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--aw-rc-bg-end, #050d14) 78%, transparent) 100%
  );
}

.arctic-wolf-resource-callout--cover-tint-soft .arctic-wolf-resource-callout__cover-bg-tint {
  opacity: 0.4;
}

.arctic-wolf-resource-callout--cover-bg .arctic-wolf-resource-callout__grid {
  position: relative;
  z-index: 1;
}

/* Reserve the image-side column so copy fills the opposite half */
.arctic-wolf-resource-callout--cover-bg.arctic-wolf-resource-callout--layout-left .arctic-wolf-resource-callout__grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.arctic-wolf-resource-callout--cover-bg.arctic-wolf-resource-callout--layout-left .arctic-wolf-resource-callout__copy {
  grid-column: 2;
}

/* —— Grid layouts —— */

.arctic-wolf-resource-callout__grid {
  display: grid;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding: var(--aw-rc-box-pad);
}

/* —— Copy —— */

.arctic-wolf-resource-callout__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.8vw, 1.15rem);
  color: var(--aw-rc-text, #fff);
  text-align: left;
  min-width: 0;
}

.arctic-wolf-resource-callout__headline {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display) !important;
  font-size: clamp(
    var(--aw-rc-headline-min),
    calc(
      var(--aw-rc-headline-min) + var(--brand-headline-scale, 1) * var(--aw-rc-headline-fluid)
    ),
    var(--aw-rc-headline-max)
  ) !important;
  font-weight: var(--brand-headline-weight, 400) !important;
  line-height: 1.05 !important;
  white-space: pre-line;
  text-wrap: balance;
  color: var(--aw-rc-text, #fff);
}

.arctic-wolf-resource-callout__headline span {
  color: var(--aw-rc-accent, #00aaff);
}

.arctic-wolf-resource-callout--headline-medium {
  --aw-rc-headline-max: clamp(2rem, 4.5vw, 3rem);
}

.arctic-wolf-resource-callout__subheadline {
  margin: 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.3875rem);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--aw-rc-text);
}

.arctic-wolf-resource-callout__description {
  margin: 15px 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--aw-rc-text);
}

.arctic-wolf-resource-callout__cta {
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* —— Motion (FOUC guard) —— */

.arctic-wolf-resource-callout:not(.is-motion-init) .arctic-wolf-resource-callout__box,
.arctic-wolf-resource-callout:not(.is-motion-init) [data-rc-animate] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .arctic-wolf-resource-callout:not(.is-motion-init) .arctic-wolf-resource-callout__box,
  .arctic-wolf-resource-callout:not(.is-motion-init) [data-rc-animate] {
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .arctic-wolf-resource-callout--cover-bg.arctic-wolf-resource-callout--layout-left .arctic-wolf-resource-callout__grid {
    grid-template-columns: 1fr !important;
  }

  .arctic-wolf-resource-callout--cover-bg .arctic-wolf-resource-callout__copy {
    grid-column: 1;
  }

  .arctic-wolf-resource-callout__copy {
    text-align: left;
    align-items: flex-start;
  }

  /* Keep a short visual strip instead of dropping the cover entirely */
  .arctic-wolf-resource-callout--cover-bg .arctic-wolf-resource-callout__cover-bg {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: clamp(9rem, 28vw, 12rem);
    transform: none;
    opacity: 0.9;
  }

  .arctic-wolf-resource-callout--cover-bg .arctic-wolf-resource-callout__cover-bg-image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
  }

  .arctic-wolf-resource-callout--cover-edge-soft.arctic-wolf-resource-callout--layout-left
    .arctic-wolf-resource-callout__cover-bg {
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }

  .arctic-wolf-resource-callout__headline {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
}

@media (max-width: 768px) {
  .arctic-wolf-resource-callout--cover-bg .arctic-wolf-resource-callout__cover-bg {
    display: none;
  }
}

/* >>> arctic-wolf-resource-callout.css */


/* <<< arctic-wolf-form-primary.css */
/* ==========================================================================
   COMPONENT: Arctic Wolf Form Primary
   BEM: .arctic-wolf-form-primary
   Two-column form — copy left, Marketo (or placeholder) right over liquid gradient.
   ========================================================================== */

.arctic-wolf-form-primary {
  --aw-fp-pad-x: clamp(1.25rem, 4vw, 3rem);
  --aw-fp-pad-y: clamp(3.5rem, 9vh, 6rem);
  --aw-fp-headline-min: clamp(2rem, 3.6vw, 3rem);
  --aw-fp-headline-fluid: 4.2vw;
  --aw-fp-headline-max: clamp(2.5rem, 5.5vw, 4rem);
  --aw-fp-base: #121c42;
  /* Form container (panel + Marketo embed shell) */
  --aw-fp-panel-bg: #0e1733;
  --aw-fp-panel-border: rgba(0, 102, 255, 0.32);
  --aw-fp-panel-radius: 12px;
  --aw-fp-panel-padding: clamp(1.5rem, 3vw, 2rem);
  --aw-fp-panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 56px rgba(0, 0, 0, 0.32);
  --aw-btn-gradient-start: #0066ff;
  --aw-btn-gradient-end: #47fffa;
  --aw-btn-text: #0b122a;
  position: relative;
  width: 100%;
  min-height: clamp(32rem, 72vh, 44rem);
  color: var(--aw-fp-text, #fff);
  background: var(--aw-fp-base);
  overflow: hidden;
}

.arctic-wolf-form-primary--cinematic-embedded {
  z-index: 4;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
}

.arctic-wolf-form-primary__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 15% 50%, rgba(18, 28, 66, 0.42) 0%, transparent 62%),
    radial-gradient(ellipse 55% 80% at 85% 40%, rgba(18, 28, 66, 0.28) 0%, transparent 58%),
    linear-gradient(
      to bottom,
      rgba(18, 28, 66, 0.45) 0%,
      transparent 22%,
      transparent 78%,
      rgba(18, 28, 66, 0.38) 100%
    );
}

.arctic-wolf-form-primary__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 35px;
}

.arctic-wolf-form-primary__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.35rem);
  text-align: left;
}

.arctic-wolf-form-primary__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--color-white);
}

.arctic-wolf-form-primary__headline {
  margin: 0;
  padding-bottom: 15px;
  max-width: 13ch;
  font-family: var(--font-display) !important;
  font-size: clamp(
    var(--aw-fp-headline-min),
    calc(
      var(--aw-fp-headline-min) + var(--brand-headline-scale, 1) * var(--aw-fp-headline-fluid)
    ),
    var(--aw-fp-headline-max)
  ) !important;
  font-weight: var(--brand-headline-weight, 800) !important;
  line-height: 0.98 !important;
  white-space: pre-line;
  text-wrap: balance;
  color: var(--aw-fp-text, #fff);
  background: linear-gradient(120deg, #fff 18%, #84e4f9 52%, #0066ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.arctic-wolf-form-primary__headline span {
  color: var(--aw-fp-accent, #00aaff);
}

.arctic-wolf-form-primary--headline-xsmall {
  --aw-fp-headline-max: clamp(1.75rem, 4vw, 2.5rem);
}

.arctic-wolf-form-primary--headline-small {
  --aw-fp-headline-max: clamp(2rem, 4.5vw, 3rem);
}

.arctic-wolf-form-primary--headline-medium {
  --aw-fp-headline-max: clamp(2.35rem, 5.5vw, 3.75rem);
}

.arctic-wolf-form-primary--headline-large {
  --aw-fp-headline-max: clamp(2.75rem, 6vw, 4.5rem);
}

.arctic-wolf-form-primary__description {
  margin: 0;
  max-width: 90%;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--aw-rc-text);
}

.arctic-wolf-form-primary__form-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: var(--aw-fp-panel-padding);
  border: 1px solid var(--aw-fp-panel-border);
  border-radius: var(--aw-fp-panel-radius);
  background: var(--aw-fp-panel-bg);
  box-shadow: var(--aw-fp-panel-shadow);
  backdrop-filter: blur(14px);
}

.arctic-wolf-form-primary__form-headline {
  margin: 0;
  font-family: var(--font-display) !important;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--aw-fp-text, #fff);
}

.arctic-wolf-form-primary__form-description {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--aw-fp-text, #fff) 72%, transparent);
}

.arctic-wolf-form-primary__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.arctic-wolf-form-primary__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.arctic-wolf-form-primary__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.arctic-wolf-form-primary__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--aw-fp-text, #fff) 68%, transparent);
}

.arctic-wolf-form-primary__field input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(180, 230, 255, 0.16);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--aw-fp-text, #fff);
  background: rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.arctic-wolf-form-primary__field input::placeholder {
  color: color-mix(in srgb, var(--aw-fp-text, #fff) 38%, transparent);
}

.arctic-wolf-form-primary__field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--aw-fp-accent, #00aaff) 55%, transparent);
  background: rgba(255, 255, 255, 0.09);
}

.arctic-wolf-form-primary__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.arctic-wolf-form-primary__privacy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--aw-fp-text, #fff) 52%, transparent);
}

.arctic-wolf-form-primary__marketo-wrap {
  position: relative;
  width: 100%;
  min-height: 8rem;
}

.arctic-wolf-form-primary__marketo-status {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--aw-fp-text, #fff) 62%, transparent);
}

.arctic-wolf-form-primary__marketo.is-error + .arctic-wolf-form-primary__marketo-status,
.arctic-wolf-form-primary__marketo-wrap:has(.arctic-wolf-form-primary__marketo.is-error)
  .arctic-wolf-form-primary__marketo-status {
  color: #ffb4b4;
}

/* Marketo Forms 2.0 — override embed defaults to match the panel */
.arctic-wolf-form-primary__marketo.mktoForm,
.arctic-wolf-form-primary__form-panel form.mktoForm {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  color: var(--aw-fp-text, #fff) !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoFormRow {
  margin-bottom: 0.875rem !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoOffset,
.arctic-wolf-form-primary__marketo.mktoForm .mktoGutter {
  display: none !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoFieldDescriptor,
.arctic-wolf-form-primary__marketo.mktoForm .mktoFieldWrap {
  float: none !important;
  width: 100% !important;
}

.arctic-wolf-form-primary__marketo.mktoForm label.mktoLabel {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 0.4rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--aw-fp-text, #fff) 68%, transparent) !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoAsterix {
  color: var(--aw-fp-accent, #00aaff) !important;
  padding-left: 0.15rem !important;
}

.arctic-wolf-form-primary__marketo.mktoForm input.mktoField,
.arctic-wolf-form-primary__marketo.mktoForm select.mktoField,
.arctic-wolf-form-primary__marketo.mktoForm textarea.mktoField {
  width: 100% !important;
  min-height: 2.75rem !important;
  padding: 0.625rem 0.875rem !important;
  border: 1px solid rgba(180, 230, 255, 0.16) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--aw-fp-text, #fff) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.arctic-wolf-form-primary__marketo.mktoForm textarea.mktoField {
  min-height: 6rem !important;
}

.arctic-wolf-form-primary__marketo.mktoForm input.mktoField:focus,
.arctic-wolf-form-primary__marketo.mktoForm select.mktoField:focus,
.arctic-wolf-form-primary__marketo.mktoForm textarea.mktoField:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--aw-fp-accent, #00aaff) 55%, transparent) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoButtonRow {
  margin-top: 0.75rem !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoButtonWrap {
  margin: 0 !important;
}

.arctic-wolf-form-primary__marketo.mktoForm button.mktoButton {
  min-height: 2.75rem !important;
  padding: 0.75rem 1.5rem !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--aw-btn-text, #0b122a) !important;
  background: linear-gradient(
    105deg,
    var(--aw-btn-gradient-start, #0066ff) 0%,
    color-mix(in srgb, var(--aw-btn-gradient-start, #0066ff) 35%, var(--aw-btn-gradient-end, #47fffa))
      48%,
    var(--aw-btn-gradient-end, #47fffa) 100%
  ) !important;
  background-color: var(--aw-btn-gradient-start, #0066ff) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoError {
  color: #ffb4b4 !important;
}

.arctic-wolf-form-primary__marketo.mktoForm .mktoErrorMsg {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffb4b4 !important;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  .arctic-wolf-form-primary--cinematic-embedded {
    min-height: auto;
    padding-block: var(--aw-fp-pad-y);
  }

  .arctic-wolf-form-primary__inner {
    grid-template-columns: 1fr;
    padding: 0 var(--aw-fp-pad-x);
  }

  .arctic-wolf-form-primary__eyebrow {
    letter-spacing: 0.22em;
  }

  .arctic-wolf-form-primary__headline {
    max-width: min(14ch, 100%);
  }

  .arctic-wolf-form-primary__description {
    max-width: 100%;
  }

  .arctic-wolf-form-primary__field-row {
    grid-template-columns: 1fr;
  }
}

/* >>> arctic-wolf-form-primary.css */


/* <<< footer-minimal.css */
/* ==========================================================================
   COMPONENT: Footer — Minimal
   File: components/footer/footer__footer--minimal/footer__footer--minimal.css

   BEM REFERENCE:
     Block:     .footer-minimal
     Elements:  __container, __logo, __logo-text, __bottom, __links, __link, __copyright
     Modifiers: --light | --dark
   ========================================================================== */

.footer-minimal {
  --footer-text:       var(--color-text-secondary);
  --footer-link:       var(--color-text-secondary);
  --footer-link-hover: var(--color-text-primary);
  --footer-logo:       var(--color-text-primary);
  font-family: var(--font-body);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  margin-top: -30px;
}

.footer-minimal--light {
  background-color: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
}

.footer-minimal--dark {
  --footer-text:       #aaaaaa;
  --footer-link:       #aaaaaa;
  --footer-link-hover: var(--color-white);
  --footer-logo:       var(--color-white);
  background-color: var(--color-black);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-minimal__logo-text {
  color: var(--footer-logo);
}

.footer-minimal__link {
  color: var(--footer-link);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.footer-minimal__link:hover {
  color: var(--footer-link-hover);
}

.footer-minimal__copyright {
  display: block;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--footer-text);
}

/* >>> footer-minimal.css */


/* <<< export-layout.css */
/* Package layout helpers — Astro footer uses Tailwind utilities; recreate minimally */
.footer-minimal__container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 40rem) {
  .footer-minimal__container {
    flex-direction: column;
  }
}

.footer-minimal__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-minimal__logo-image {
  display: block;
  height: auto;
  max-height: 2rem;
  width: auto;
}

.footer-minimal__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.footer-minimal__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
}

.footer-minimal__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem 0 0;
}

.footer-minimal.section-shell--tight {
  padding-block: var(--section-shell-y-tight, 2rem);
}

@media (min-width: 48rem) {
  .footer-minimal.section-shell--tight {
    padding-block: var(--section-shell-y-footer-md, 5rem);
  }
}

.client-theme {
  position: relative;
  isolation: isolate;
}

/* >>> export-layout.css */


/* <<< export-resilience.css */
/* Failsafe: if motion never boots, still show content after paint */
@media (prefers-reduced-motion: no-preference) {
  html.aw-lp-motion-fallback .arctic-wolf-hero-angled:not(.is-motion-init) .arctic-wolf-hero-angled__headline,
  html.aw-lp-motion-fallback .arctic-wolf-hero-angled:not(.is-motion-init) .arctic-wolf-hero-angled__description,
  html.aw-lp-motion-fallback .arctic-wolf-video-cta:not(.is-motion-init) .arctic-wolf-video-cta__copy,
  html.aw-lp-motion-fallback .arctic-wolf-video-cta:not(.is-motion-init) .arctic-wolf-video-cta__cta-below,
  html.aw-lp-motion-fallback .arctic-wolf-video-cta--centered:not(.is-motion-init) [data-video-cta-media],
  html.aw-lp-motion-fallback .arctic-wolf-video-cta--centered:not(.is-motion-init) .arctic-wolf-video-cta__play,
  html.aw-lp-motion-fallback .arctic-wolf-tile-grid:not(.is-motion-init) .arctic-wolf-tile-grid__header,
  html.aw-lp-motion-fallback .arctic-wolf-tile-grid:not(.is-motion-init) .arctic-wolf-tile-grid__tile,
  html.aw-lp-motion-fallback .arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__intro,
  html.aw-lp-motion-fallback .arctic-wolf-scroll-tiles:not(.is-motion-init) .arctic-wolf-scroll-tiles__tile,
  html.aw-lp-motion-fallback .arctic-wolf-spotlight-reveal:not(.is-motion-init) [data-spotlight-animate],
  html.aw-lp-motion-fallback .arctic-wolf-resource-callout:not(.is-motion-init) .arctic-wolf-resource-callout__box,
  html.aw-lp-motion-fallback .arctic-wolf-resource-callout:not(.is-motion-init) [data-rc-animate],
  html.aw-lp-motion-fallback .arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) .arctic-wolf-sticky-steps-cinematic__pane-inner,
  html.aw-lp-motion-fallback .arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) [data-ss-cine-form-copy],
  html.aw-lp-motion-fallback .arctic-wolf-sticky-steps-cinematic:not(.is-motion-init) [data-ss-cine-form-panel] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

.arctic-wolf-video-cta__overlay[hidden] {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.arctic-wolf-hero-angled.is-hero-revealed .arctic-wolf-hero-angled__headline,
.arctic-wolf-hero-angled.is-hero-revealed .arctic-wolf-hero-angled__description {
  opacity: 1;
}

/* >>> export-resilience.css */


/* <<< brand-sections.css */
/* ==========================================================================
   Arctic Wolf — section color/theme defaults baked into CSS
   Values previously lived as inline styles on each section in index.html.
   ========================================================================== */

/* Spotlight reveal */
.arctic-wolf-spotlight-reveal {
  --aw-spotlight-text: #ffffff;
  --aw-spotlight-card-bg: #ffffff;
  --aw-spotlight-card-bg-start: #0059b2;
  --aw-spotlight-card-bg-end: #121c42;
  --aw-spotlight-border-start: #2eeded;
  --aw-spotlight-border-end: #24a3e3;
  --aw-spotlight-accent: #24a3e3;
  --aw-spotlight-section-bg: #121c42;
  --aw-spotlight-cta-stroke: #ffffff;
  --aw-spotlight-bg-a: #0a1424;
  --aw-spotlight-bg-b: #121c42;
  --aw-spotlight-bg-c: #0b1a28;
  --aw-spotlight-glow: 22;
  --brand-headline-scale: 0.75;
}

.arctic-wolf-spotlight-reveal--placement-lede {
  --brand-headline-scale: 1;
}

/* Video CTA — light type; fill is transparent inside .arctic-wolf-aurora-band */
.arctic-wolf-video-cta {
  --aw-angle: 50;
  --aw-vcta-text: #ffffff;
  --aw-vcta-bg: #121c42;
  --aw-vcta-accent: #84e4f9;
  --brand-headline-scale: 0.75;
}

.arctic-wolf-aurora-band > .arctic-wolf-video-cta {
  --aw-vcta-bg: transparent;
}

/* Tile grid */
.arctic-wolf-tile-grid {
  --aw-tg-text: #ffffff;
  --aw-tg-bg: #121c42;
  --aw-tg-headline-accent: #e4edfa;
  --aw-tg-tile-frame-image: url('../assets/blue-gradient.png');
  --brand-headline-scale: 1;
}

.arctic-wolf-tile-grid__tile {
  --aw-tg-card-bg: #f7eef7;
  --aw-tg-card-text: #f7eef7;
}

/* Sticky steps */
.arctic-wolf-sticky-steps {
  --aw-ss-text: #ffffff;
  --aw-ss-bg: #0059b2;
  --aw-ss-bg-end: #000000;
  --aw-ss-accent: #84e4f9;
  --aw-ss-wash: rgba(18, 28, 66, 0.35);
  --aw-ss-wash-strength: 1;
  --aw-ss-index: rgba(132, 228, 249, 0.14);
  --aw-ss-scroll-distance: 280vh;
  --brand-headline-scale: 1;
}

/* Scroll tiles */
.arctic-wolf-scroll-tiles {
  --aw-st-text: #ffffff;
  --aw-st-bg-1: #000000;
  --aw-st-bg-2: #01152d;
  --aw-st-bg-3: #0059b2;
  --aw-st-wash: #000000;
  --brand-headline-scale: 0.75;
}

.arctic-wolf-scroll-tiles__tile {
  --aw-st-tile-text: #e4edfa;
}

.liquid-gradient.arctic-wolf-scroll-tiles__gradient {
  --liquid-gradient-base: #000000;
  --liquid-gradient-static:
    radial-gradient(at 8% 16%, #01152d 0px, transparent 50%),
    radial-gradient(at 78% 10%, #000000 0px, transparent 50%),
    radial-gradient(at 38% 36%, #0059b2 0px, transparent 42%),
    radial-gradient(at 16% 58%, #000000 0px, transparent 50%),
    radial-gradient(at 92% 48%, #01152d 0px, transparent 50%),
    radial-gradient(at 52% 78%, #000000 0px, transparent 50%),
    radial-gradient(at 28% 24%, #000000 0px, transparent 50%),
    radial-gradient(at 68% 64%, #0059b2 0px, transparent 40%),
    radial-gradient(at 48% 18%, #01152d 0px, transparent 50%),
    radial-gradient(at 84% 82%, #000000 0px, transparent 50%),
    radial-gradient(at 12% 84%, #000000 0px, transparent 50%),
    radial-gradient(at 60% 46%, #01152d 0px, transparent 50%) #000000;
}

.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(1) {
  --gx: 8%;
  --gy: 16%;
  --gc: #01152d;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(2) {
  --gx: 78%;
  --gy: 10%;
  --gc: #000000;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(3) {
  --gx: 38%;
  --gy: 36%;
  --gc: #0059b2;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(4) {
  --gx: 16%;
  --gy: 58%;
  --gc: #000000;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(5) {
  --gx: 92%;
  --gy: 48%;
  --gc: #01152d;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(6) {
  --gx: 52%;
  --gy: 78%;
  --gc: #000000;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(7) {
  --gx: 28%;
  --gy: 24%;
  --gc: #000000;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(8) {
  --gx: 68%;
  --gy: 64%;
  --gc: #0059b2;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(9) {
  --gx: 48%;
  --gy: 18%;
  --gc: #01152d;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(10) {
  --gx: 84%;
  --gy: 82%;
  --gc: #000000;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(11) {
  --gx: 12%;
  --gy: 84%;
  --gc: #000000;
}
.arctic-wolf-scroll-tiles__gradient .liquid-gradient__layer:nth-child(12) {
  --gx: 60%;
  --gy: 46%;
  --gc: #01152d;
}

/* Sticky steps cinematic */
.arctic-wolf-sticky-steps-cinematic {
  --aw-ss-cine-bg-left: #121c42;
  --aw-ss-cine-bg-right: #0b1a24;
  --aw-ss-cine-text-left: #e4edfa;
  --aw-ss-cine-text-right: #e4edfa;
  --aw-ss-cine-accent: #84e4f9;
  --aw-ss-cine-accent-right: #2eeded;
  --brand-headline-scale: 0.9;
}

/* Resource callout */
.arctic-wolf-resource-callout {
  --aw-rc-text: #ffffff;
  --aw-rc-bg: #0059b2;
  --aw-rc-bg-start: #121c42;
  --aw-rc-bg-end: #0059b2;
  --aw-rc-accent: #2eeded;
  --aw-rc-section-bg: #ffffff;
  --aw-rc-section-bg-start: #0059b2;
  --aw-rc-section-bg-end: #121c42;
  --brand-headline-scale: 0.75;
}

/* Form primary */
.arctic-wolf-form-primary {
  --aw-fp-text: #ffffff;
  --aw-fp-accent: #00aaff;
  --brand-headline-scale: 0.75;
}

.liquid-gradient.arctic-wolf-form-primary__gradient {
  --liquid-gradient-base: #121c42;
  --liquid-gradient-static:
    radial-gradient(at 8% 16%, #0066ff 0px, transparent 50%),
    radial-gradient(at 78% 10%, #0059b2 0px, transparent 50%),
    radial-gradient(at 38% 36%, #2eeded 0px, transparent 50%),
    radial-gradient(at 16% 58%, #0059b2 0px, transparent 50%),
    radial-gradient(at 92% 48%, #0066ff 0px, transparent 50%),
    radial-gradient(at 52% 78%, #182a3a 0px, transparent 50%),
    radial-gradient(at 28% 24%, #0059b2 0px, transparent 50%),
    radial-gradient(at 68% 64%, #0066ff 0px, transparent 50%),
    radial-gradient(at 48% 18%, #2eeded 0px, transparent 50%),
    radial-gradient(at 84% 82%, #182a3a 0px, transparent 50%),
    radial-gradient(at 12% 84%, #121c42 0px, transparent 50%),
    radial-gradient(at 60% 46%, #0066ff 0px, transparent 50%) #121c42;
}

.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(1) {
  --gx: 8%;
  --gy: 16%;
  --gc: #0066ff;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(2) {
  --gx: 78%;
  --gy: 10%;
  --gc: #0059b2;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(3) {
  --gx: 38%;
  --gy: 36%;
  --gc: #2eeded;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(4) {
  --gx: 16%;
  --gy: 58%;
  --gc: #0059b2;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(5) {
  --gx: 92%;
  --gy: 48%;
  --gc: #0066ff;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(6) {
  --gx: 52%;
  --gy: 78%;
  --gc: #182a3a;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(7) {
  --gx: 28%;
  --gy: 24%;
  --gc: #0059b2;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(8) {
  --gx: 68%;
  --gy: 64%;
  --gc: #0066ff;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(9) {
  --gx: 48%;
  --gy: 18%;
  --gc: #2eeded;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(10) {
  --gx: 84%;
  --gy: 82%;
  --gc: #182a3a;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(11) {
  --gx: 12%;
  --gy: 84%;
  --gc: #121c42;
}
.arctic-wolf-form-primary__gradient .liquid-gradient__layer:nth-child(12) {
  --gx: 60%;
  --gy: 46%;
  --gc: #0066ff;
}

/* Sticky / cinematic image stack order (was inline z-index) */
[data-aw-ss-cinematic-image-index='0'] {
  z-index: 0;
}
[data-aw-ss-cinematic-image-index='1'] {
  z-index: 1;
}
[data-aw-ss-cinematic-image-index='2'] {
  z-index: 2;
}
[data-aw-ss-cinematic-image-index='3'] {
  z-index: 3;
}
[data-aw-ss-cinematic-image-index='4'] {
  z-index: 4;
}

/* Hero angle (layout, not color) — baked so HTML can stay lean */
.arctic-wolf-hero-angled {
  --aw-angle: 35;
}

/* >>> brand-sections.css */


/* <<< font-override.css */
/* Font stacks live in tokens-colors.css for this single-client package. */

/* >>> font-override.css */