/* ============================================================================
 * ALASKA BRAND SYSTEM v1.0  —  fully isolated & revertible.
 *
 * Implements planning/BRAND-STYLE-GUIDE.md: premium, calm, cinematic; Alaska
 * through light/color/atmosphere, not clichés. NOT a redesign — colors, tokens,
 * atmosphere, and micro-interactions only.
 *
 * Every rule is scoped under  html[data-alaska].  To REVERT the entire system,
 * remove the ALASKA-THEME script block in Base.astro (drops the attribute) and
 * all of this goes inert — the site snaps back to its previous look.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------------- */

:root[data-alaska] {
  color-scheme: light;

  /* -- brand ---------------------------------------------------------- */
  --awd-blue: #4d7fa6;
  --awd-blue-hover: #5389b3; /* ~8% brighter */
  --awd-gold: #c7a46b; /* Anchor Gold — warm, understated, <5% of UI */

  /* -- core tokens (Midnight-Sun / "Alaskan summer morning") ----------- */
  --color-background: #f6f8fa;
  --color-background-2: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: #eef3f7;
  --color-primary: var(--awd-blue);
  --color-primary-hover: var(--awd-blue-hover);
  --color-gold: var(--awd-gold);
  --color-text: #162437;
  --color-text-secondary: #506172;
  --color-text-muted: #7a8895;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-shadow: rgba(22, 36, 55, 1);

  /* -- systems --------------------------------------------------------- */
  --awd-radius-button: 14px;
  --awd-radius-card: 16px;
  --awd-radius-input: 12px;
  --awd-radius-image: 18px;
  --awd-radius-modal: 20px;
  --awd-radius-badge: 999px;
  --awd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --awd-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --awd-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
  --awd-fast: 150ms;
  --awd-normal: 250ms;
  --awd-slow: 400ms;
  --awd-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* -- map onto the Webflow semantic tokens ---------------------------- */
  --base-color-neutral--white: #ffffff;
  --base-color-neutral--black: #162437;
  --base-color-neutral--neutral-lightest: #eef3f7;
  --base-color-neutral--neutral-lighter: #dbe3ea;
  --base-color-neutral--neutral-light: #eef3f7;
  --base-color-neutral--neutral-darker: #223345;

  --base-color-brand--ignite-red: var(--awd-blue);
  --base-color-brand--ignite-blue: var(--awd-blue);
  --base-color-brand--ignite-green: var(--awd-gold);
  --base-color-brand--ignite-purple: #d9bc8c;
  --base-color-brand--black: #0a1b2e;

  --background-color--background-primary: var(--color-background);
  --background-color--background-secondary: var(--color-surface);
  --background-color--background-tertiary: var(--color-surface-hover);
  --background-color--background-alternate: #0a1b2e; /* dark sections in light mode */
  --background-color--background-accent: var(--awd-blue);
  --background-color--background-alternate-accent: var(--awd-blue);

  --text-color--text-primary: var(--color-text);
  --text-color--text-secondary: var(--color-text-secondary);
  /* Light text used on dark sections + filled buttons — light in BOTH themes. */
  --text-color--text-alternate: #f6f8fa;
  --text-color--text-accent: var(--awd-blue);
  --link-color--link-primary: var(--awd-blue);
  --link-color--link-alternate: #f6f8fa;
  --border-color--border-secondary: var(--color-border);
  --initial-color: var(--color-text);

  /* Hero rotating words: brand gold, not yellow. */
  --industry-color--future-tech: var(--awd-gold);
  --industry-color--education: var(--awd-gold);
  --industry-color--not-for-profit: var(--awd-gold);
}

/* -- Northern-Night / "Alaskan winter evening" ------------------------------ */
:root[data-alaska][data-theme='dark'] {
  color-scheme: dark;

  --color-background: #0a1b2e;
  --color-background-2: #171a1f;
  --color-surface: #1f2935;
  --color-surface-hover: #243140;
  --color-text: #f6f8fa;
  --color-text-secondary: #cbd5de;
  --color-text-muted: #8fa1b1;
  --color-border: rgba(255, 255, 255, 0.08);

  --awd-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --awd-shadow-md: 0 10px 34px rgba(0, 0, 0, 0.4);
  --awd-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);

  --base-color-neutral--white: #f6f8fa;
  --base-color-neutral--black: #0a1b2e;
  --base-color-neutral--neutral-lightest: #1f2935;
  --base-color-neutral--neutral-lighter: #2b3a4b;
  --base-color-neutral--neutral-light: #243140;
  --base-color-neutral--neutral-darker: #cbd5de;

  --background-color--background-primary: var(--color-background);
  --background-color--background-secondary: #171a1f;
  --background-color--background-tertiary: var(--color-surface);
  --background-color--background-alternate: #171a1f;

  --text-color--text-primary: var(--color-text);
  --text-color--text-secondary: var(--color-text-secondary);
  --text-color--text-alternate: #f6f8fa;
  --text-color--text-accent: #7fa9c6; /* lightened blue for AA on navy */
  --link-color--link-primary: #7fa9c6;
  --link-color--link-alternate: #f6f8fa;
  --border-color--border-secondary: var(--color-border);
  --initial-color: var(--color-text);
}

/* ---------------------------------------------------------------------------
 * 2. ATMOSPHERE — gradients + grain + hero light
 * ------------------------------------------------------------------------- */

/* Air → light → surface: three stops, wider range so the illumination reads. */
:root[data-alaska] body {
  background-color: var(--color-background);
  background-image: linear-gradient(180deg, #ffffff 0%, #eef4f9 46%, #dbe6f0 100%);
  background-attachment: fixed;
  color: var(--color-text);
}
:root[data-alaska][data-theme='dark'] body {
  background-image: linear-gradient(180deg, #10294a 0%, #0b1e33 52%, #10151b 100%);
  background-attachment: fixed;
}
/* Sections that painted the flat token now let the gradient breathe through. */
:root[data-alaska] :is(.section-home-hero, .section_featured-work, .section_testimonials, .section_featured-blog) {
  background-color: transparent;
}
:root[data-alaska] .page-wrapper {
  background: transparent;
  color: var(--color-text);
}

/* 2% film grain — enriches surfaces without being consciously visible. */
:root[data-alaska] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Soft global vignette: corners microscopically darker (≤3%) -------------
 * One fixed environmental layer instead of per-section hacks. Below the grain,
 * pointer-events:none so it can never affect interaction or cursor sampling. */
:root[data-alaska] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9989;
  pointer-events: none;
  /* horizon band (widescreen ellipse, brightest just above center) + vignette,
   * breathing on a ~80s cycle so the page never feels static */
  background:
    radial-gradient(150% 55% at 50% 30%, rgba(255, 252, 244, 0.1), transparent 70%),
    radial-gradient(120% 115% at 42% 38%, transparent 60%, rgba(10, 27, 46, 0.09) 100%);
  animation: awd-breathe 80s ease-in-out infinite alternate;
}
:root[data-alaska][data-theme='dark'] body::before {
  background:
    radial-gradient(150% 55% at 50% 30%, rgba(77, 127, 166, 0.1), transparent 70%),
    radial-gradient(120% 115% at 42% 38%, transparent 56%, rgba(0, 0, 0, 0.28) 100%);
}
@keyframes awd-breathe {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* --- Hero: layered morning light + the "living sky" ambient ------------------
 * Layer 1: static radial light behind the headline (upper-left, feathered).
 * Layer 2 (::before): ONE slow ambient drift — soft aurora-hint in dark mode,
 * soft moving daylight in light mode. 48–64s loops (a full cycle should take
 * the better part of a minute — felt, never seen), ≤6% opacity, no stars, no
 * neon. pointer-events:none; sits under the content (.z-index-1). Disabled
 * under prefers-reduced-motion. */
:root[data-alaska] .section-home-hero {
  position: relative;
  overflow: clip;
  /* the gigantic light source behind the headline — much larger than the
   * viewport, biased upper-left, strong enough to actually read */
  background-image:
    radial-gradient(140% 100% at 26% 34%, rgba(77, 127, 166, 0.16), transparent 60%),
    radial-gradient(70% 55% at 85% 4%, rgba(96, 148, 186, 0.09), transparent 70%);
}
:root[data-alaska][data-theme='dark'] .section-home-hero {
  background-image:
    radial-gradient(140% 100% at 26% 34%, rgba(96, 148, 186, 0.22), transparent 60%),
    radial-gradient(70% 55% at 85% 4%, rgba(127, 169, 198, 0.12), transparent 70%);
}
:root[data-alaska] .section-home-hero::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 24% 22%, rgba(255, 252, 244, 0.14), transparent 70%),
    radial-gradient(52% 40% at 72% 12%, rgba(77, 127, 166, 0.12), transparent 72%);
  animation: awd-sky-drift 52s ease-in-out infinite alternate;
  will-change: transform;
}
/* SHIPPED AURORA (dark) — the approved 4400-mockup ribbons, minus stars:
 * softly-blurred green/cyan/purple bands drifting on 24–28s loops. */
:root[data-alaska][data-theme='dark'] .section-home-hero::before {
  background:
    linear-gradient(100deg, rgba(77, 127, 166, 0.2), rgba(34, 211, 238, 0.09) 48%, transparent 72%),
    radial-gradient(50% 40% at 72% 10%, rgba(139, 92, 246, 0.15), transparent 70%);
  filter: blur(70px);
  animation-duration: 64s;
}
:root[data-alaska][data-theme='dark'] .section-home-hero::after {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46% 36% at 22% 34%, rgba(111, 168, 217, 0.13), transparent 70%);
  filter: blur(85px);
  animation: awd-sky-drift-b 48s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes awd-sky-drift {
  to {
    transform: translate(6%, 4%) rotate(2.4deg) scale(1.12);
  }
}
@keyframes awd-sky-drift-b {
  to {
    transform: translate(-7%, 5%) rotate(-3deg) scale(1.14);
  }
}

/* --- Section lighting identities + tonal separation --------------------------
 * Each major surface gets its own near-invisible light character, all sourced
 * upper-left, all larger than the viewport (horizon-style, not blobs).
 * Light: a family of whites. Dark: a family of navies. */
:root[data-alaska] .section_featured-work {
  /* neutral daylight */
  background-image: linear-gradient(178deg, rgba(255, 255, 255, 0.55), rgba(246, 248, 250, 0) 70%);
}
:root[data-alaska] .section_testimonials {
  /* gentle reflected light, from below-left like water */
  background-image: radial-gradient(90% 70% at 18% 96%, rgba(77, 127, 166, 0.08), transparent 70%);
}
:root[data-alaska] .section_featured-blog {
  background-color: rgba(249, 250, 251, 0.6);
}
:root[data-alaska] .section_form-embed {
  /* the CTA — the warmest point on the page (still barely there) */
  background-image: radial-gradient(80% 65% at 22% 8%, rgba(199, 164, 107, 0.09), transparent 70%);
}
:root[data-alaska] .footer_component {
  /* low evening ambient */
  background-image: linear-gradient(184deg, rgba(0, 0, 0, 0.2), transparent 55%);
}
:root[data-alaska][data-theme='dark'] .section_featured-work {
  background-image: linear-gradient(178deg, rgba(16, 33, 55, 0.5), rgba(10, 27, 46, 0) 70%);
}
:root[data-alaska][data-theme='dark'] .section_testimonials {
  background-image: radial-gradient(90% 70% at 18% 96%, rgba(77, 127, 166, 0.1), transparent 70%);
}
:root[data-alaska][data-theme='dark'] .section_featured-blog {
  background-color: rgba(16, 30, 48, 0.55);
}

/* Dark sections keep their deep-navy identity in light mode. */
:root[data-alaska] .section_scrub-intro {
  background-color: #0a1b2e;
}

/* Delight stack panels — light → deep → deepest, per theme. */
:root[data-alaska] .delight_sticky-wrapper .section_delight_new:nth-child(1) {
  background-color: var(--color-background);
}
:root[data-alaska] .delight_sticky-wrapper .section_delight_new:nth-child(2) {
  background-color: #0a1b2e;
}
:root[data-alaska] .delight_sticky-wrapper .section_delight_new:nth-child(3) {
  background-color: #06121f;
}
:root[data-alaska][data-theme='dark'] .delight_sticky-wrapper .section_delight_new:nth-child(1) {
  background-color: #171a1f;
}

/* ---------------------------------------------------------------------------
 * 3. TYPE WEIGHTS & TRACKING (Manrope system — family set in app.css)
 * ------------------------------------------------------------------------- */

:root[data-alaska] body {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
}
:root[data-alaska] .home-hero_title {
  font-weight: 800;
  letter-spacing: -0.03em !important;
  line-height: 0.96; /* Bible: hero ~95% */
}
:root[data-alaska] :is(h1, h2, h3, [class*='heading-style-h1'], [class*='heading-style-h2']) {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
:root[data-alaska] :is(h4, h5, h6, .heading-style-h5, .heading-style-h6) {
  font-weight: 600;
}
:root[data-alaska] .button_text {
  font-weight: 600;
  letter-spacing: 0.01em;
}
:root[data-alaska] .nav_component :is(.menu-button-text, .menu-button-text p) {
  font-weight: 500;
  letter-spacing: 0.02em;
}
:root[data-alaska] .text-style-subtitle {
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------------
 * 4. NAVIGATION — transparent at top → blurred glass after scroll
 * ------------------------------------------------------------------------- */

:root[data-alaska] .nav_component {
  transition: background-color 300ms ease, backdrop-filter 300ms ease, box-shadow 300ms ease,
    border-color 300ms ease;
  /* Frosted glass even at rest — the bar reads as an object above the page,
   * not paint on it. Scrolled state below deepens the same material. */
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  background-color: color-mix(in srgb, var(--color-background) 10%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(10, 27, 46, 0.05);
}
:root[data-alaska][data-scrolled] .nav_component {
  background-color: color-mix(in srgb, var(--color-background) 75%, transparent);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border-bottom-color: var(--color-border);
  box-shadow: var(--awd-shadow-sm);
}
/* Nav text always the theme's text colour so logo + menu stay readable. */
:root[data-alaska] .nav_component,
:root[data-alaska] .nav_component :is(.brand-wordmark_name, .brand-wordmark_tag, .brand-wordmark_text),
:root[data-alaska] .nav_component .menu-button-text,
:root[data-alaska] .nav_component .menu-button-text p {
  color: var(--color-text) !important;
}
/* The anchor logo never animates, glows, or casts shadows (Bible: flat, clean). */
:root[data-alaska] .brand-wordmark_mark {
  filter: none;
  transition: none;
}

/* ---------------------------------------------------------------------------
 * 5. COMPONENTS — buttons, cards, links, logos, forms
 * ------------------------------------------------------------------------- */

/* Primary buttons: brand blue, lift on hover, soft shadow. */
:root[data-alaska] .button:not(.is-link) {
  border-radius: var(--awd-radius-button);
  transition: background-color var(--awd-normal) var(--awd-ease),
    transform var(--awd-normal) var(--awd-ease), box-shadow var(--awd-normal) var(--awd-ease);
}
:root[data-alaska] .button:not(.is-link):hover {
  background-color: var(--awd-blue-hover);
  transform: translateY(-2px);
  box-shadow: var(--awd-shadow-md);
}
/* Text/secondary buttons: gold affordance on hover. */
:root[data-alaska] .button.is-link:hover .button_text {
  color: var(--awd-gold);
}
:root[data-alaska] .button.is-link .button_line {
  background-color: currentColor;
}
/* True secondary buttons (bordered): transparent, 1px border → gold on hover. */
:root[data-alaska] .button.is-alternate {
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--awd-radius-button);
}
:root[data-alaska] .button.is-alternate:hover {
  background-color: transparent;
  border-color: var(--awd-gold);
  transform: none;
  box-shadow: none;
}
:root[data-alaska] .button.is-alternate:hover .button_text {
  color: var(--awd-gold);
}

/* Footer-outro "Where to next?" links sit on the accent-blue band — pure white
 * at bold large-text weight so they clear AA (were 4.0 at weight 500). */
:root[data-alaska] .supercharged_links-wrapper .button_text {
  color: #ffffff;
  font-weight: 700;
}

/* "Switch to Eternal Winter / Midnight Sun" — was styled like every other
 * plain-text footer link (underline on hover), which buried the one control
 * that changes the whole site's colour system. Reads as an actual button now,
 * with a frosted-ice treatment (pale, translucent, glowing) rather than the
 * flat brand-blue used elsewhere — a deliberate "winter" material distinct
 * from the rest of the UI. */
:root[data-alaska] .footer-theme-switch {
  --frost: color-mix(in srgb, var(--awd-blue) 30%, white);
  display: inline-flex;
}
:root[data-alaska] .footer-theme-switch .button.is-link {
  align-items: center;
  padding: 0.7rem 1.5rem;
  border-radius: var(--awd-radius-badge);
  border: 1px solid color-mix(in srgb, var(--frost) 55%, transparent);
  background: color-mix(in srgb, var(--frost) 16%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 25%, transparent),
    0 4px 18px color-mix(in srgb, var(--frost) 20%, transparent);
  transition: background-color var(--awd-normal) var(--awd-ease),
    border-color var(--awd-normal) var(--awd-ease), box-shadow var(--awd-normal) var(--awd-ease),
    transform var(--awd-fast) var(--awd-ease);
}
:root[data-alaska] .footer-theme-switch .button_line {
  display: none; /* the border already reads as a button; the underline is redundant */
}
:root[data-alaska] .footer-theme-switch:hover .button.is-link {
  border-color: color-mix(in srgb, var(--frost) 90%, transparent);
  background: color-mix(in srgb, var(--frost) 26%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 35%, transparent),
    0 8px 26px color-mix(in srgb, var(--frost) 30%, transparent);
  transform: translateY(-2px);
}
:root[data-alaska] .footer-theme-switch:hover .button_text {
  color: var(--color-text);
}

/* Client-name strip: hairline divider above + more breathing room between items. */
:root[data-alaska] .home-hero_marquee-wrapper {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}
:root[data-alaska] .home-hero_logo-marquee .marquee_track {
  --marquee-gap: 2.4em;
}

/* Type constraints (Bible Rules 6–8): reading widths + tighter display leading. */
:root[data-alaska] .home-hero_subtitle {
  max-width: 540px;
}
:root[data-alaska] .text-align-center p.text-size-large,
:root[data-alaska] .max-width-large p.text-size-large {
  max-width: 620px;
  margin-inline: auto;
}
@media (min-width: 992px) {
  :root[data-alaska] .home-hero_title {
    /* wider measure = bigger type without gaining a line (the hero must fit
     * one screen, so line count is the hard constraint, not font size) */
    max-width: 94%;
  }
}

/* Cards: one system — surface, hairline border, 16px radius, lift on hover.
 * (.collage_card excluded — its content is open-layout, and a wrapping border
 * read as a broken outline; its screenshot keeps the blue frame instead.) */
:root[data-alaska]
  :is(.reviews_card, .testimonials_card, .work_item_content, .blog_item-background, .horizontal-blog_background) {
  border-radius: var(--awd-radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--awd-shadow-sm);
  transition: transform var(--awd-normal) var(--awd-ease), box-shadow var(--awd-normal) var(--awd-ease),
    border-color var(--awd-normal) var(--awd-ease);
}
:root[data-alaska] :is(.testimonials_card, .work_item_content) {
  background-color: var(--color-surface);
}
:root[data-alaska][data-theme='dark'] :is(.testimonials_card, .work_item_content) {
  /* navy-rich card — the spec charcoal #1F2935 read as greyed-out on the navy page */
  background-color: #182b44;
  border-color: rgba(255, 255, 255, 0.11);
}
:root[data-alaska]
  :is(.reviews_card:hover, .testimonials_card:hover, .work_item_content:hover) {
  transform: translateY(-2px); /* reassurance, not a jump (review: 2px lift) */
  border-color: var(--awd-blue);
  box-shadow: var(--awd-shadow-md);
}
:root[data-alaska] .collage_card {
  border: none;
  box-shadow: none;
}
/* Screenshot inside a hovered card: gentle zoom (600ms, subtle). */
:root[data-alaska] :is(.collage_card, .work_item_content, .home-tabs_link-block) img {
  transition: transform 600ms var(--awd-ease);
}
:root[data-alaska]
  :is(.collage_card:hover .collage_card-image, .work_item_content:hover .work_item_image, .home-tabs_link-block:hover .home-tabs_hover-image) {
  transform: scale(1.025);
}
/* Button arrows nudge forward on hover. */
:root[data-alaska] .button .button_icon {
  transition: transform var(--awd-normal) var(--awd-ease);
}
:root[data-alaska] .button:hover .button_icon {
  transform: translateX(3px);
}
/* Menu links: gold slide on hover. */
:root[data-alaska] .menu-link:hover .menu-link-heading {
  color: var(--awd-gold);
  transition: color var(--awd-normal) var(--awd-ease);
}
/* The flip cards manage their own transform — exempt them from the lift. */
:root[data-alaska] .reviews_flip,
:root[data-alaska] .reviews_flip:hover {
  transform: none;
  border: none;
  box-shadow: none;
}

/* Client-name strip: 70% resting → 100% hover (they were nearly disappearing). */
:root[data-alaska] .marquee_item.is-logos .marquee_name {
  opacity: 0.7;
  color: var(--color-text);
  transition: opacity var(--awd-normal) var(--awd-ease);
}
:root[data-alaska] .marquee_item.is-logos:hover .marquee_name {
  opacity: 1;
}

/* Capability screenshot frames track the brand blue. */
:root[data-alaska] .collage_card-visual-wrapper {
  border-color: var(--awd-blue);
  border-radius: var(--awd-radius-image);
}
:root[data-alaska] .testimonials_client-name {
  color: #3f6b8e; /* blue darkened for AA on the white card (brand blue is 4.3) */
}
:root[data-alaska][data-theme='dark'] .testimonials_client-name {
  color: #7fa9c6; /* lightened blue for AA on the dark card */
}
/* The reference multiply-blended the profile block so client LOGOS sank into
 * the white card. With real screenshots (and navy cards in dark) multiply
 * darkened the whole image — kill it so the screenshot renders true-colour in
 * both themes. */
:root[data-alaska] .testimonials_profile-wrapper {
  mix-blend-mode: normal;
}
/* Quote text follows the card, full strength (was washing to muted blue). */
:root[data-alaska] .testimonials_card .testimonials_text,
:root[data-alaska] .testimonials_card .testimonials_text p {
  color: var(--color-text) !important;
}
/* Pill tags: readable on both themes (were near-invisible in dark). */
:root[data-alaska] .pill-tag {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--awd-radius-badge);
}
:root[data-alaska] .pill-tag p {
  color: inherit;
}

/* Forms: calm premium inputs. */
:root[data-alaska] .form_input {
  min-height: 52px;
  border-radius: var(--awd-radius-input);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--awd-fast) var(--awd-ease), box-shadow var(--awd-fast) var(--awd-ease);
}
:root[data-alaska] .form_input.is-text-area {
  border-radius: var(--awd-radius-card);
}
:root[data-alaska] .form_input::placeholder {
  color: var(--color-text-muted);
}
:root[data-alaska] .form_input:focus {
  border-color: var(--awd-blue);
  box-shadow: 0 0 0 3px rgba(77, 127, 166, 0.18);
  outline: none;
}

/* Reviews flip tiles: alternate across the brand palette. */
:root[data-alaska] .reviews_flip-front {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--awd-shadow-sm);
}
:root[data-alaska] .reviews_flip.is-tint-b .reviews_flip-front {
  background: var(--awd-blue);
  color: #ffffff;
  border: none;
}
:root[data-alaska] .reviews_flip.is-tint-c .reviews_flip-front {
  background: #0a1b2e;
  color: #f6f8fa;
  border: none;
}
:root[data-alaska] .reviews_flip.is-tint-d .reviews_flip-front {
  background: var(--awd-gold);
  color: #1c1508;
  border: none;
}
/* The quote sits inside .text-rich-text, which pins its own dark text colour —
 * `inherit` on the <p> was inheriting THAT, leaving dark text on the blue/navy
 * tiles. Recolour the wrapper too so the whole chain follows the tile. */
:root[data-alaska] .reviews_flip-front :is(.text-rich-text, .w-richtext, p, strong, .reviews_client, .reviews_person) {
  color: inherit !important;
}
:root[data-alaska] .reviews_flip-back {
  background: var(--awd-blue);
}
:root[data-alaska][data-theme='dark'] .reviews_flip.is-tint-c .reviews_flip-front {
  background: #06121f;
}

/* --- Environmental anchor watermark ------------------------------------------
 * One per page, architectural not decorative: an enormous, cropped, blurred
 * anchor painted via CSS mask in a glacier tint (NEVER gold). Static, behind
 * content, pointer-events:none. Hidden entirely when the brand system is
 * reverted (base rule outside [data-alaska] is display:none). */
.awd-watermark {
  display: none;
}
:root[data-alaska] .awd-watermark {
  display: block;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  background-color: #7f9fbd; /* glacier blue, deep enough to read on white */
  opacity: 0.09;
  -webkit-mask-image: url('/brand/anchorage-anchor-transparent.svg');
  mask-image: url('/brand/anchorage-anchor-transparent.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: blur(4px);
}
:root[data-alaska][data-theme='dark'] .awd-watermark {
  background-color: #1d3c60; /* muted navy, slightly lighter than the bg */
  opacity: 0.085;
}
/* Hosts get cropping context automatically. */
:root[data-alaska] section:has(> .awd-watermark),
:root[data-alaska] div:has(> .awd-watermark) {
  position: relative;
  overflow: clip;
}
/* Placements — cropped 30–60% visible, never centered, rotation ≤10°. */
:root[data-alaska] .awd-watermark--home {
  /* +8% per the design review — bigger, so even less of it is visible */
  /* Deliberately oversized: at this scale the silhouette stops reading as an
   * anchor and becomes surface texture. */
  width: 1900px;
  height: 1900px;
  right: -700px;
  top: -430px;
  transform: rotate(6deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}
/* Every anchor tilts to the cursor now — all hosts need 3D room. */
:root[data-alaska] :is(.section-home-hero, .section_form-embed, .footer_component,
  .section_team-feature, section:has(> .awd-watermark), div:has(> .awd-watermark)) {
  perspective: 1400px;
}
:root[data-alaska] .awd-watermark--work {
  width: 1600px;
  height: 1600px;
  right: -400px;
  bottom: -540px; /* lower curve, bottom-right */
  transform: rotate(-5deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}
:root[data-alaska] .awd-watermark--capabilities {
  width: 1650px;
  height: 1650px;
  right: -380px;
  top: -220px;
  transform: rotate(5deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}
:root[data-alaska] .awd-watermark--reviews {
  width: 1600px;
  height: 1600px;
  left: -420px;
  top: 220px;
  transform: rotate(-6deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}
:root[data-alaska] .awd-watermark--blog {
  width: 1500px;
  height: 1500px;
  right: -360px;
  bottom: -420px;
  transform: rotate(4deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}
:root[data-alaska] .awd-watermark--case {
  width: 1450px;
  height: 1450px;
  left: -360px;
  top: -180px;
  transform: rotate(-5deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}
:root[data-alaska] .awd-watermark--contact {
  width: 1500px;
  height: 1500px;
  right: -320px;
  top: -180px;
  transform: rotate(4deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}

/* Cursor dot: GOLD over dark surfaces, BLUE over light (tone set by cursor.ts). */
:root[data-alaska] .cursor .cursor_background {
  background-color: var(--awd-blue) !important;
  transition: background-color 200ms ease;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}
:root[data-alaska] body[data-cursor-tone='gold'] .cursor .cursor_background {
  background-color: var(--awd-gold) !important;
  box-shadow: 0 0 0 2px rgba(10, 27, 46, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

/* Footer wordmark matches the header lockup (light text on the dark footer). */
:root[data-alaska] .footer_component .brand-wordmark,
:root[data-alaska] .footer_component .brand-wordmark_text {
  color: #f6f8fa;
}

/* ---------------------------------------------------------------------------
 * 6. CHROME — selection, focus, scrollbar
 * ------------------------------------------------------------------------- */

:root[data-alaska] ::selection {
  background-color: var(--awd-blue);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
:root[data-alaska]
  :where(a, button, [role='button'], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--awd-blue);
  outline-offset: 2px;
}
:root[data-alaska] ::-webkit-scrollbar {
  width: 12px;
}
:root[data-alaska] ::-webkit-scrollbar-track {
  background: var(--color-background);
}
:root[data-alaska] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--awd-blue) 70%, var(--color-background));
  border-radius: 999px;
  border: 3px solid var(--color-background);
}
:root[data-alaska] ::-webkit-scrollbar-thumb:hover {
  background: var(--awd-blue);
}

/* ---------------------------------------------------------------------------
 * 7. THEME TRANSITION + REDUCED MOTION
 * ------------------------------------------------------------------------- */

:root[data-alaska] body,
:root[data-alaska] .nav_component,
:root[data-alaska] [class*='section_'],
:root[data-alaska] .footer_component,
:root[data-alaska] .delight_sticky-wrapper .section_delight_new,
:root[data-alaska] .button,
:root[data-alaska] :is(.reviews_card, .testimonials_card, .collage_card, .work_item_content) {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 600ms;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-alaska] * {
    transition-duration: 0.001ms !important;
  }
  :root[data-alaska] body::after {
    display: none;
  }
  /* Ambient sky drift off; static lighting stays. */
  :root[data-alaska] .section-home-hero::before {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * 8. THEME TOGGLE BUTTON
 * ------------------------------------------------------------------------- */

.awd-theme-toggle {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 10000;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
  color: var(--color-text, #111827);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--awd-shadow-md, 0 6px 20px rgba(0, 0, 0, 0.18));
  transition: background-color 600ms ease, color 600ms ease, border-color 600ms ease,
    transform 150ms ease;
  font-size: 1.2rem;
  line-height: 1;
}
.awd-theme-toggle:hover {
  transform: translateY(-2px);
}
:root:not([data-alaska]) .awd-theme-toggle {
  display: none;
}


/* Round, clean headshots for the real team. */
:root[data-alaska] .team-feature_member-image-wrapper.is-headshot {
  border-radius: 999px;
  overflow: hidden;
  /* The reference's flex:1 + stretch squashes the circle — pin it square. */
  flex: 0 0 auto;
  align-self: flex-start;
  width: min(240px, 60vw);
  height: min(240px, 60vw);
  aspect-ratio: 1;
  margin-bottom: 1.25rem;
  border: 2px solid color-mix(in srgb, var(--awd-gold) 55%, transparent);
  box-shadow: var(--awd-shadow-md);
}
:root[data-alaska] .team-feature_member-image.is-headshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

/* --- Team section (restored) — brand-system polish ---------------------------
 * Dark alternate surface via tokens; images get the system radius + a soft lift
 * on hover, matching the card language. */
:root[data-alaska] .team-feature_member-image-wrapper {
  overflow: hidden;
  border-radius: var(--awd-radius-image);
}
:root[data-alaska] .team-feature_member-image {
  transition: transform 600ms var(--awd-ease);
}
:root[data-alaska] .team-feature_member-item:hover .team-feature_member-image {
  transform: scale(1.02);
}

/* --- Anchor on every form section + footer (pseudo-element watermarks) -------
 * These surfaces are dark in both themes, so one tint works everywhere. Content
 * is lifted above via z-index on the sections' direct children. */
:root[data-alaska] :is(.section_form-embed, .footer_component) {
  position: relative;
  overflow: clip;
}
:root[data-alaska] :is(.section_form-embed, .footer_component) > * {
  position: relative;
  z-index: 1;
}
:root[data-alaska] :is(.section_form-embed, .footer_component)::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: #3d5f88; /* navy-lifted glacier, reads on both themes' dark surfaces */
  opacity: 0.09;
  -webkit-mask-image: url('/brand/anchorage-anchor-transparent.svg');
  mask-image: url('/brand/anchorage-anchor-transparent.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: blur(3px);
}
/* Forms: anchor sits behind the form itself rather than hugging the corner. */
:root[data-alaska] .section_form-embed::before {
  width: 1400px;
  height: 1400px;
  right: -180px;
  top: -160px;
  transform: rotate(5deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
}
/* Footers: anchor rising near the center, tilted, a touch more present. */
:root[data-alaska] .footer_component::before {
  width: 1550px;
  height: 1550px;
  left: 50%;
  bottom: -380px;
  transform: translateX(-50%) rotate(-12deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
  opacity: 0.12;
}

/* Team section: the right side under the last members runs empty on desktop —
 * part of the anchor fills that navy space from the bottom-right corner. */
:root[data-alaska] .section_team-feature {
  position: relative;
  overflow: clip;
}
:root[data-alaska] .section_team-feature > * {
  position: relative;
  z-index: 1;
}
:root[data-alaska] .section_team-feature::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 1000px;
  height: 1000px;
  /* fills the open space up and to the left of the corner (the gap between the
   * member rows) — the mask fade below keeps it off the bio text */
  right: -120px;
  bottom: -60px;
  transform: rotate(8deg) rotateX(var(--awd-tilt-x, 0deg)) rotateY(var(--awd-tilt-y, 0deg));
  background-color: #3d5f88;
  opacity: 0.1;
  -webkit-mask-image: url('/brand/anchorage-anchor-transparent.svg');
  mask-image: url('/brand/anchorage-anchor-transparent.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: blur(3px);
}

/* --- Mobile polish: watermark scale + section breathing room ----------------- */
@media (max-width: 767px) {
  :root[data-alaska] .awd-watermark--home {
    width: 820px;
    height: 820px;
    right: -330px;
    top: -100px;
  }
  :root[data-alaska] :is(.awd-watermark--capabilities, .awd-watermark--reviews, .awd-watermark--blog, .awd-watermark--work) {
    width: 700px;
    height: 700px;
  }
  :root[data-alaska] .section_form-embed::before,
  :root[data-alaska] .footer_component::before {
    width: 620px;
    height: 620px;
  }
  /* Keep the centered footer anchor visible at the smaller size. */
  :root[data-alaska] .footer_component::before {
    bottom: -120px;
  }
  :root[data-alaska] .section_team-feature::before {
    width: 640px;
    height: 640px;
    right: -190px;
    bottom: -140px;
  }
  /* Even vertical rhythm on small screens. */
  :root[data-alaska] .padding-section-large {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  :root[data-alaska] .padding-section-medium {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  :root[data-alaska] .team-feature_member-image-wrapper.is-headshot {
    margin-inline: auto;
  }
}

/* --- Gold accents, interspersed (small + rare, per the gold budget) ---------- */
:root[data-alaska] .text-style-subtitle {
  color: var(--awd-gold);
}
:root[data-alaska] .project-feature-list_item::before {
  background: var(--awd-gold);
}
:root[data-alaska] .home-hero_marquee-wrapper {
  border-top-color: color-mix(in srgb, var(--awd-gold) 45%, transparent);
}
:root[data-alaska] .prev-up-bar_item {
  color: var(--awd-gold);
}
:root[data-alaska] .eyebrow {
  color: var(--awd-gold);
}
:root[data-alaska] .footer_next-page_background p {
  color: var(--awd-gold);
}

/* ---------------------------------------------------------------------------
 * INVISIBLE LUXURY PASS — hover physics, light-catch, timing tiers
 * Everything here is sub-perceptual on its own; together the interface feels
 * like it's catching cold Alaskan sunlight. (Ideas 12/15 + hover spec.)
 * ------------------------------------------------------------------------- */

/* Timing tiers: nav 160ms · buttons 200ms · cards 260ms (bg stays 20s+). */
:root[data-alaska] .button:not(.is-link) {
  transition-duration: 200ms;
}
:root[data-alaska]
  :is(.reviews_card, .testimonials_card, .work_item_content, .blog_item-background, .horizontal-blog_background) {
  transition-duration: 260ms;
}

/* Cards catch ambient light: hairline top highlight, brighter while lifted.
 * Only meaningful on the dark navy cards — on white cards it's invisible. */
:root[data-alaska][data-theme='dark']
  :is(.reviews_card, .testimonials_card, .work_item_content, .blog_item-background, .horizontal-blog_background) {
  box-shadow: var(--awd-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-alaska][data-theme='dark']
  :is(.reviews_card:hover, .testimonials_card:hover, .work_item_content:hover) {
  box-shadow: var(--awd-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  /* half a step lighter than the resting #182b44 — reassurance, not fireworks */
  background-color: #1a2e48;
}

/* Primary CTA: polished metal catching light — a soft brightness gradient from
 * the upper-left fades in, no color change. */
:root[data-alaska] .button:not(.is-link) {
  position: relative;
  overflow: clip;
}
:root[data-alaska] .button:not(.is-link)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity 200ms var(--awd-ease);
}
:root[data-alaska] .button:not(.is-link):hover::after {
  opacity: 1;
}

/* Nav "Menu": a clean line draws in under the text on hover — the same
 * underline language as the fullscreen menu links. */
:root[data-alaska] .nav_component .menu-button-text {
  position: relative;
}
:root[data-alaska] .nav_component .menu-button-text::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -0.12em;
  height: 2px;
  background: var(--awd-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--awd-ease);
}
:root[data-alaska] .nav_component .menu-button:hover .menu-button-text::after {
  transform: scaleX(1);
}

/* Team favorites: gold eyebrow label, slightly quieter body. */
:root[data-alaska] .team-bio_favorites-label {
  color: var(--awd-gold);
}
:root[data-alaska] .team-bio_favorites {
  /* currentColor, not --color-text: the team section is a navy alternate
   * surface in BOTH themes, so the surrounding light text is the right base. */
  color: color-mix(in srgb, currentColor 78%, transparent);
}

/* Theme switch cross-fade: the toggle adds .awd-theme-anim for ~450ms so every
 * surface fades between Midnight Sun and Eternal Winter instead of snapping.
 * Scoped to that window only, so normal hover transitions are untouched. */
:root[data-alaska].awd-theme-anim *,
:root[data-alaska].awd-theme-anim *::before,
:root[data-alaska].awd-theme-anim *::after {
  transition:
    background-color 400ms var(--awd-ease),
    color 400ms var(--awd-ease),
    border-color 400ms var(--awd-ease),
    fill 400ms var(--awd-ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-alaska] .button:not(.is-link)::after {
    transition: none;
  }
}

/* Team LinkedIn links: interaction blue on the navy surface, gold on hover. */
:root[data-alaska] .team-linkedin {
  color: #7fa9c6;
  transition: color 160ms var(--awd-ease), transform 160ms var(--awd-ease);
}
:root[data-alaska] .team-linkedin:hover {
  color: var(--awd-gold);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
 * DEPTH TURNED UP (2026-07-30) — Rinaldo: "increase those things so they're a
 * bit more obvious, a bit less static and flat." Every atmosphere layer roughly
 * doubled from the sub-perceptual tuning; still light, never decoration.
 * ------------------------------------------------------------------------- */

/* Section lighting identities, now readable. */
:root[data-alaska] .section_featured-work {
  background-image: linear-gradient(178deg, rgba(255, 255, 255, 0.85), rgba(246, 248, 250, 0) 70%);
}
:root[data-alaska] .section_testimonials {
  background-image: radial-gradient(90% 70% at 18% 96%, rgba(77, 127, 166, 0.15), transparent 70%);
}
:root[data-alaska] .section_form-embed {
  background-image: radial-gradient(80% 65% at 22% 8%, rgba(199, 164, 107, 0.16), transparent 70%);
}
:root[data-alaska] .footer_component {
  background-image: linear-gradient(184deg, rgba(0, 0, 0, 0.32), transparent 55%);
}
:root[data-alaska][data-theme='dark'] .section_featured-work {
  background-image: linear-gradient(178deg, rgba(22, 44, 72, 0.7), rgba(10, 27, 46, 0) 70%);
}
:root[data-alaska][data-theme='dark'] .section_testimonials {
  background-image: radial-gradient(90% 70% at 18% 96%, rgba(77, 127, 166, 0.18), transparent 70%);
}

/* Floating navigation: a sheet of glass a centimetre above the page. */
:root[data-alaska][data-scrolled] .nav_component {
  background-color: color-mix(in srgb, var(--color-background) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: color-mix(in srgb, var(--color-border) 100%, transparent);
  box-shadow: 0 12px 32px rgba(10, 27, 46, 0.12);
}
:root[data-alaska][data-theme='dark'][data-scrolled] .nav_component {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* Cards as physical objects: top edge catches the light, the face is graded by
 * the upper-left source, the resting shadow is a touch more real. */
:root[data-alaska]
  :is(.reviews_card, .testimonials_card, .work_item_content, .blog_item-background, .horizontal-blog_background) {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 55%),
    linear-gradient(315deg, rgba(77, 127, 166, 0.06), transparent 50%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 3px 12px rgba(10, 27, 46, 0.08),
    0 14px 40px rgba(10, 27, 46, 0.06);
}
:root[data-alaska][data-theme='dark']
  :is(.reviews_card, .testimonials_card, .work_item_content, .blog_item-background, .horizontal-blog_background) {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.07), transparent 55%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 3px 14px rgba(0, 0, 0, 0.4),
    0 16px 44px rgba(0, 0, 0, 0.3);
}
:root[data-alaska][data-theme='dark']
  :is(.reviews_card:hover, .testimonials_card:hover, .work_item_content:hover) {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(0, 0, 0, 0.45),
    0 22px 56px rgba(0, 0, 0, 0.35);
}

/* Environmental anchors join the brighter atmosphere. */
:root[data-alaska] .awd-watermark--home {
  opacity: 0.2;
}
:root[data-alaska][data-theme='dark'] .awd-watermark--home {
  opacity: 0.19;
}
:root[data-alaska] :is(.section_form-embed, .footer_component, .section_team-feature)::before {
  opacity: 0.15;
}
:root[data-alaska] .footer_component::before {
  opacity: 0.17;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-alaska] body::before {
    animation: none;
  }
}

/* Blog cards are dark surfaces in BOTH themes — the light-theme "paper" grade
 * (bright white sheen) read as a strange silver corner on them. Dark-style
 * treatment instead. */
:root[data-alaska] :is(.blog_item-background, .horizontal-blog_background) {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 55%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 14px rgba(10, 27, 46, 0.25),
    0 16px 44px rgba(10, 27, 46, 0.15);
}

/* Fullscreen menu links: kill the skip-ink underline that peeked through the
 * clip box as broken little dashes — replace with one clean line that draws in
 * on hover. */
:root[data-alaska] .menu-link,
:root[data-alaska] .menu-link:hover {
  text-decoration: none !important;
}
:root[data-alaska] .menu-link .menu-link-heading {
  text-decoration: none !important;
  position: relative;
}
:root[data-alaska] .menu-link .menu-link-heading::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0.02em;
  height: 3px;
  background: var(--awd-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms var(--awd-ease);
}
:root[data-alaska] .menu-link:hover .menu-link-heading::after {
  transform: scaleX(1);
}

/* --- Design-review refinements (2026-07-30) ---------------------------------
 * CTA as polished metal: vertical finish over the brand blue — soft top
 * highlight, slightly darker bottom edge, brightness (not color) on hover. */
:root[data-alaska] .button:not(.is-link) {
  /* barely-there finish — the earlier stronger version read glossy/off-brand */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    var(--awd-shadow-sm);
}
:root[data-alaska] .button:not(.is-link):hover {
  filter: brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    var(--awd-shadow-md);
}

/* Light interaction: blog cards nearer the upper-left source catch a touch
 * more of it than the ones further away. */
:root[data-alaska] .blog_item:nth-child(3n + 1) .blog_item-background {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.09), transparent 55%);
}
:root[data-alaska] .blog_item:nth-child(3n) .blog_item-background {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 55%);
}

/* Team anchor: fade its upper-left flank away so member text never visually
 * cuts into it — the mark dissolves before it reaches the content column. */
:root[data-alaska] .section_team-feature::before {
  -webkit-mask-image: url('/brand/anchorage-anchor-transparent.svg'),
    linear-gradient(115deg, transparent 4%, #000 30%);
  mask-image: url('/brand/anchorage-anchor-transparent.svg'),
    linear-gradient(115deg, transparent 4%, #000 30%);
  -webkit-mask-size: contain, 100% 100%;
  mask-size: contain, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --- Pricing page, brand layer ---------------------------------------------- */
:root[data-alaska] .pricing-tier {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--awd-shadow-sm);
  transition: transform 260ms var(--awd-ease), box-shadow 260ms var(--awd-ease),
    border-color 260ms var(--awd-ease);
}
:root[data-alaska] .pricing-tier:hover {
  transform: translateY(-2px);
  border-color: var(--awd-blue);
  box-shadow: var(--awd-shadow-md);
}
:root[data-alaska][data-theme='dark'] .pricing-tier {
  background-color: #182b44;
  border-color: rgba(255, 255, 255, 0.11);
}
/* Flagship is the signature tier — the one gold accent on the page. */
:root[data-alaska] .pricing-tier.is-signature {
  border-color: color-mix(in srgb, var(--awd-gold) 55%, transparent);
}
:root[data-alaska] .pricing-tier.is-signature:hover {
  border-color: var(--awd-gold);
}
:root[data-alaska] .pricing-tier_examples-label {
  color: var(--awd-gold);
}
:root[data-alaska] .pricing-example {
  color: var(--awd-blue);
  transition: color 160ms var(--awd-ease);
}
:root[data-alaska][data-theme='dark'] .pricing-example {
  color: #7fa9c6;
}
:root[data-alaska] .pricing-example:hover {
  color: var(--awd-gold);
}

/* The reference's menu hover paints a second text copy one line-height below
 * (text-shadow: 0 1lh) and slides it up on hover. Manrope's taller glyphs let
 * that copy's tops peek out under every item — the "cut off lettering". Kill
 * the whole slide mechanic; the gold underline + color shift is the hover. */
:root[data-alaska] .menu-link .menu-link-heading,
:root[data-alaska] .menu-link:hover .menu-link-heading {
  text-shadow: none !important;
  transform: none !important;
  transition-property: color;
}

/* Blog cards: the reference drew a 2px pure-black divider above every item —
 * invisible on its white page, a harsh bar on navy. Cards with backgrounds
 * don't need the divider at all. */
:root[data-alaska] .blog_item:has(.blog_item-background) {
  border-top: none;
}

/* Nav "Get Started": same language as MENU — plain text at the same scale,
 * gold underline on hover. (It was a small filled pill next to 38px text.) */
:root[data-alaska] .nav_component .menu-button-text,
:root[data-alaska] .nav_component .button.is-nav .button_text {
  font-size: clamp(1.7rem, 1.2vw + 1.1rem, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}
:root[data-alaska] .nav_component .button.is-nav {
  background: transparent !important;
  background-image: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0;
  color: inherit;
  filter: none !important;
  transform: none !important;
}
:root[data-alaska] .nav_component .button.is-nav::after {
  display: none; /* no light sweep on a text link */
}
:root[data-alaska] .nav_component .button.is-nav .button_line {
  display: none; /* the reference's own line element — replaced by ours */
}
:root[data-alaska] .nav_component .button.is-nav .button_text {
  position: relative;
  color: inherit;
}
:root[data-alaska] .nav_component .button.is-nav .button_text::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -0.12em;
  height: 2px;
  background: var(--awd-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--awd-ease);
}
:root[data-alaska] .nav_component .button.is-nav:hover .button_text::after {
  transform: scaleX(1);
}
:root[data-alaska] .nav_component .button.is-nav .button_icon {
  width: 1em;
  height: 1em;
}

/* Hero: flat bottom (the reference rounded it). */
:root[data-alaska] .section-home-hero {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Get Started: the .button's overflow clip + the slide-up text mechanic were
 * eating the arrow and the underline. Text link — no clip, no slide. */
:root[data-alaska] .nav_component .button.is-nav {
  overflow: visible;
}
:root[data-alaska] .nav_component .button.is-nav .button_text,
:root[data-alaska] .nav_component .button.is-nav:hover .button_text {
  text-shadow: none !important;
  transform: none !important;
}
:root[data-alaska] .nav_component .button.is-nav .button_icon {
  flex: none;
}

/* Menu underlines: force gold everywhere a line can appear in the menu —
 * the heading hover line and the small is-link button lines alike. */
:root[data-alaska] .menu-link .menu-link-heading::after {
  background: var(--awd-gold) !important;
}
:root[data-alaska] .menu .button_line,
:root[data-alaska] .nav .button_line {
  background-color: var(--awd-gold) !important;
}

/* The underline lives on .button_text — which the reference clips (that's how
 * it hid the slide copy). Unclip the whole Get Started chain. */
:root[data-alaska] .nav_component :is(.button_component.is-nav, .button.is-nav, .button.is-nav .button_text) {
  overflow: visible !important;
}

/* --- Capabilities screenshots: lift + faint brand-colour glow on hover -------
 * Same alternating-palette idea as the reviews flip tiles, expressed as light
 * instead of fill: each card carries its own glow colour and rises slightly.
 * Scoped to the capabilities grid so the case-study collage cards are unaffected. */
:root[data-alaska] .collage_component.is-grid .collage_card {
  --card-glow: var(--awd-blue);
  /* Padding + radius so the glow reads as a soft rounded aura instead of a
   * hard-cornered rectangle cast off a 0-radius box. */
  padding: 18px;
  border-radius: 26px;
  /* The reference stretched each card to its grid row and bottom-aligned the
   * content (justify-content: flex-end), so a narrow card — short image, tall
   * row — grew a big empty area ABOVE the screenshot. Hug the content instead;
   * the row's leftover space now falls outside the tile. */
  align-self: start;
  justify-content: flex-start;
  transition: transform 260ms var(--awd-ease), box-shadow 260ms var(--awd-ease),
    background-color 260ms var(--awd-ease);
}
:root[data-alaska] .collage_component.is-grid .collage_card:nth-child(4n + 2) {
  --card-glow: var(--awd-gold);
}
:root[data-alaska] .collage_component.is-grid .collage_card:nth-child(4n + 3) {
  --card-glow: #7fa9c6;
}
:root[data-alaska] .collage_component.is-grid .collage_card:nth-child(4n) {
  --card-glow: #d9bc8c;
}
:root[data-alaska] .collage_component.is-grid .collage_card:hover {
  transform: translateY(-6px);
  background-color: color-mix(in srgb, var(--card-glow) 6%, transparent);
  /* pure light — no ring, no hard edge (the 1px outline read as a harsh box) */
  box-shadow:
    0 8px 30px color-mix(in srgb, var(--card-glow) 26%, transparent),
    0 24px 70px color-mix(in srgb, var(--card-glow) 20%, transparent);
}
/* The 2px blue frame was the hard-edged box — hairline it, and let the glow
 * carry the colour. */
:root[data-alaska] .collage_component.is-grid .collage_card .collage_card-visual-wrapper {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--card-glow) 22%, transparent);
  border-radius: 20px;
  transition: border-color 260ms var(--awd-ease);
}
:root[data-alaska] .collage_component.is-grid .collage_card:hover .collage_card-visual-wrapper {
  border-color: color-mix(in srgb, var(--card-glow) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-alaska] .collage_component.is-grid .collage_card:hover {
    transform: none;
  }
}

/* Team member panels: frosted rather than opaque, so the environmental anchor
 * stays visible (softly blurred) where it passes behind a member's card
 * instead of being erased by it. Both themes paint the same alternate token,
 * so one rule covers both. */
:root[data-alaska] .team-feature_member-item {
  /* Fully transparent: the anchor reads at the SAME strength behind a member
   * card as beside it (no blur, no tint) — the whole mark is simply painted a
   * little softer instead. */
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Team anchor: a touch softer overall now that nothing masks it. */
:root[data-alaska] .section_team-feature::before {
  opacity: 0.1;
}

/* --- Capabilities cards animate in from the sides --------------------------- */
:root[data-alaska] .collage_component.is-grid .collage_card {
  opacity: 0;
  transform: translateX(var(--card-from, -60px));
  transition: opacity 700ms var(--awd-ease), transform 700ms var(--awd-ease),
    box-shadow 260ms var(--awd-ease), background-color 260ms var(--awd-ease);
}
:root[data-alaska] .collage_component.is-grid .collage_card:nth-child(even) {
  --card-from: 60px;
}
:root[data-alaska] .collage_component.is-grid .collage_card.is-in {
  opacity: 1;
  transform: translateX(0);
}
:root[data-alaska] .collage_component.is-grid .collage_card.is-in:hover {
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-alaska] .collage_component.is-grid .collage_card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Team: Ignite-style hover reveal ---------------------------------------
 * At rest: big headshot + name + role + LinkedIn. On hover the portrait shrinks
 * a little and the bio (with the Alaskan-things line) expands underneath. */
/* Hover-reveal on wide screens only; narrow/touch keeps bios open (app.css).
 * Gated on WIDTH alone, deliberately: `pointer: fine` is unreliable (some
 * environments report `pointer: none`, which silently matched neither branch
 * and left the reveal dead). Width is always well-defined. */
@media (min-width: 992px) {
  :root[data-alaska] .team-feature_paragraph-wrapper {
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 480ms var(--awd-ease);
  }
  :root[data-alaska] .team-feature_member-item:hover .team-feature_paragraph-wrapper,
  :root[data-alaska] .team-feature_member-item:focus-within .team-feature_paragraph-wrapper {
    grid-template-rows: 1fr !important;
  }
  :root[data-alaska] .team-feature_member-image-wrapper.is-headshot {
    transition: width 480ms var(--awd-ease), height 480ms var(--awd-ease);
  }
  :root[data-alaska] .team-feature_member-item:hover .team-feature_member-image-wrapper.is-headshot,
  :root[data-alaska] .team-feature_member-item:focus-within .team-feature_member-image-wrapper.is-headshot {
    width: min(196px, 50vw);
    height: min(196px, 50vw);
  }
  /* Reserve the expanded height up front so BOTH states occupy exactly the same
   * box: at rest the portrait is large and the space below is empty; on hover
   * the portrait shrinks and the bio fills that same space. Nothing reflows,
   * so neighbouring cards and the page height never move. */
  :root[data-alaska] .team-feature_member-item {
    height: 620px !important; /* fits the longest expanded bio (measured 596) */
    justify-content: flex-start;
  }
  :root[data-alaska] .team-feature_item-wrapper {
    align-content: start;
  }
}


/* Blog tiles: the clipping parent was square while the card inside was rounded,
 * leaving a hard corner outside the radius. Match them. */
:root[data-alaska] .blog_item {
  border-radius: var(--awd-radius-card);
}
:root[data-alaska] .blog_item .blog_item-background {
  border-radius: var(--awd-radius-card);
}

/* ============================================================================
 * LIGHT AS A MATERIAL (2026-07-30)
 * One focal source upper-left, a real depth stack, and layers that drift at
 * different speeds. Four independent planes now move against each other:
 *   body::before  vignette + horizon    breathing, 80s
 *   .page-wrapper::before  drifting haze            96s   (slowest, furthest)
 *   hero ::before  ambient sky           52s
 *   hero ::after   counter-drift         48s   (fastest, nearest)
 * Different speeds are what produce the sense of dimension — the user reads
 * depth without identifying the effect.
 * ========================================================================== */

/* --- The focal light: upper-left, sized far beyond the viewport ------------- */
:root[data-alaska] .section-home-hero {
  background-image:
    /* 1. the primary source — huge, upper-left, the brightest point on the page */
    radial-gradient(120% 90% at 16% 18%, rgba(255, 252, 244, 0.16), transparent 58%),
    /* 2. it pools behind the headline, so the type sits in the light */
    radial-gradient(70% 55% at 34% 52%, rgba(160, 196, 224, 0.14), transparent 68%),
    /* 3. cool fill from the opposite corner keeps it from feeling one-sided */
    radial-gradient(65% 50% at 88% 6%, rgba(96, 148, 186, 0.1), transparent 72%);
}
:root[data-alaska][data-theme='dark'] .section-home-hero {
  background-image:
    radial-gradient(120% 90% at 16% 18%, rgba(150, 190, 225, 0.22), transparent 58%),
    radial-gradient(70% 55% at 34% 52%, rgba(96, 148, 186, 0.2), transparent 68%),
    radial-gradient(65% 50% at 88% 6%, rgba(127, 169, 198, 0.14), transparent 72%);
}

/* --- Drifting haze: the slowest plane, sits under the content -------------- */
:root[data-alaska] .page-wrapper::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 26% at 22% 30%, rgba(255, 255, 255, 0.055), transparent 72%),
    radial-gradient(46% 30% at 72% 62%, rgba(180, 210, 235, 0.045), transparent 74%);
  filter: blur(46px);
  animation: awd-haze-drift 96s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-alaska][data-theme='dark'] .page-wrapper::before {
  background:
    radial-gradient(38% 26% at 22% 30%, rgba(140, 180, 215, 0.075), transparent 72%),
    radial-gradient(46% 30% at 72% 62%, rgba(90, 130, 170, 0.06), transparent 74%);
}
@keyframes awd-haze-drift {
  to {
    transform: translate3d(5%, -3%, 0) scale(1.14);
  }
}

/* --- Surfaces catch the light: gradients angled from the source ------------ */
:root[data-alaska] :is(.section_featured-work, .section_testimonials, .section_featured-blog, .section_form-embed) {
  position: relative;
}
:root[data-alaska] :is(.section_featured-work, .section_testimonials)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* falloff toward the edges — nothing reads as a flat canvas */
  background: radial-gradient(80% 60% at 24% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
}
:root[data-alaska][data-theme='dark'] :is(.section_featured-work, .section_testimonials)::before {
  background: radial-gradient(80% 60% at 24% 0%, rgba(150, 190, 225, 0.07), transparent 70%);
}

/* --- The bar breathes: more air above it (review Option A + B together) ---- */
:root[data-alaska] .nav_component .nav_wrapper {
  /* Air on BOTH sides of the lockup — the nav's own padding-bottom is consumed
   * by the notch, so without this the "WEB DESIGN" line sat 1px off the bar's
   * lower edge. */
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

/* --- Hero paragraph: editorial ---------------------------------------------- */
:root[data-alaska] .home-hero_subtitle {
  font-size: 1.18rem;
  line-height: 1.72;
  font-weight: 350;
  max-width: 600px;
  letter-spacing: 0.004em;
}
@media (max-width: 767px) {
  :root[data-alaska] .home-hero_subtitle {
    font-size: 1.06rem;
    line-height: 1.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-alaska] .page-wrapper::before {
    animation: none;
  }
}

/* Delight touch hint — quiet, on-brand. */
:root[data-alaska] .delight-touch-hint {
  color: var(--awd-gold);
  background: color-mix(in srgb, #0a1b2e 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--awd-gold) 35%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Touch: scroll-activated equivalents of the desktop hover states -------- */
@media (max-width: 991px) {
  /* Capabilities: same lift + brand glow as :hover, triggered by scrolling past. */
  :root[data-alaska] .collage_component.is-grid .collage_card.is-in.is-active {
    transform: translateY(-6px);
    background-color: color-mix(in srgb, var(--card-glow) 6%, transparent);
    box-shadow:
      0 8px 30px color-mix(in srgb, var(--card-glow) 26%, transparent),
      0 24px 70px color-mix(in srgb, var(--card-glow) 20%, transparent);
  }
  :root[data-alaska] .collage_component.is-grid .collage_card.is-active .collage_card-visual-wrapper {
    border-color: color-mix(in srgb, var(--card-glow) 45%, transparent);
  }
  /* Reviews: flip as the tile passes the middle of the screen. */
  :root[data-alaska] .reviews_flip.is-active .reviews_flip-inner {
    transform: rotateY(180deg);
  }
}

/* FAQ cards follow the brand card language. */
:root[data-alaska] .faq_item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--awd-shadow-sm);
}
:root[data-alaska][data-theme='dark'] .faq_item {
  background-color: #182b44;
  border-color: rgba(255, 255, 255, 0.11);
}
:root[data-alaska] .faq_answer {
  color: color-mix(in srgb, currentColor 82%, transparent);
}


/* Mobile navbar must be opaque enough that scrolled content can't read through
 * the status-bar strip. Lives here (not app.css) because alaska-theme.css loads
 * last — the same-specificity rule in app.css was losing the cascade. */
/* Fully opaque, not frosted. At 88% with a backdrop blur the scrolled page read
 * straight through the bar on a phone — the giant outro heading was legible
 * behind the wordmark. Solid is also what makes the bar unmistakably a bar
 * sitting against the status bar, rather than a tint over the page. */
@media (max-width: 767px) {
  :root[data-alaska] .nav_component,
  :root[data-alaska][data-scrolled] .nav_component {
    background-color: var(--color-background);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Mobile team cards: reserve the expanded height so the page never reflows as
 * bios open/close on scroll, and shrink the portrait like the desktop hover. */
@media (max-width: 991px) {
  :root[data-alaska] .team-feature_member-item {
    height: 620px !important;
    justify-content: flex-start;
  }
  :root[data-alaska] .team-feature_member-image-wrapper.is-headshot {
    transition: width 480ms var(--awd-ease), height 480ms var(--awd-ease);
  }
  :root[data-alaska] .team-feature_member-item.is-active .team-feature_member-image-wrapper.is-headshot {
    width: min(196px, 46vw);
    height: min(196px, 46vw);
  }
}