/*
 * Glacier Capital legacy-site optical system, 2026-07-19.
 * Presentation only. This layer never changes copy, figures, order, links, or business logic.
 */

:root {
  --glacier-aura-gold: #c9a961;
  --glacier-aura-gold-bright: #f2dda1;
  --glacier-aura-ice: #6fc3df;
  --glacier-aura-navy: #081a34;
  --glacier-aura-deep: #050d1a;
  --glacier-aura-ease: cubic-bezier(.22, 1, .36, 1);
  --glacier-pointer-x: 0px;
  --glacier-pointer-y: 0px;
  --glacier-pointer-x-soft: 0px;
  --glacier-pointer-y-soft: 0px;
}

/* A quieter, more architectural shell around the existing navigation. */
header.fixed {
  border-bottom-color: rgba(232, 209, 150, .13) !important;
  background:
    linear-gradient(180deg, rgba(6, 17, 33, .94), rgba(7, 17, 31, .84)) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, .12),
    inset 0 -1px 0 rgba(111, 195, 223, .025);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
}

header.fixed::after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: -1px;
  left: 5%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .10), rgba(111, 195, 223, .12), transparent);
}

/* Deep-space cockpit: three light fields, orbit lines, star dust, then calm. */
#hero > section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at calc(79% + var(--glacier-pointer-x)) calc(23% + var(--glacier-pointer-y)), rgba(232, 209, 150, .13), transparent 26rem),
    radial-gradient(circle at calc(18% - var(--glacier-pointer-x)) calc(78% - var(--glacier-pointer-y)), rgba(111, 195, 223, .075), transparent 25rem),
    radial-gradient(ellipse at 50% 108%, rgba(23, 67, 103, .18), transparent 46%),
    linear-gradient(145deg, var(--glacier-aura-navy) 0%, #09162a 52%, var(--glacier-aura-deep) 100%);
}

#hero > section > canvas {
  z-index: 0;
  opacity: .62;
  mix-blend-mode: screen;
  filter: saturate(.86) contrast(1.02);
  transform: scale(1.015);
  transform-origin: 50% 50%;
  transition: opacity 1.2s var(--glacier-aura-ease);
}

#hero > section::before {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 22%, rgba(246, 221, 150, .76) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 63%, rgba(111, 195, 223, .62) 0 1px, transparent 2px),
    radial-gradient(circle at 29% 79%, rgba(246, 221, 150, .50) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 42% 14%, rgba(111, 195, 223, .48) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 28%, rgba(246, 221, 150, .66) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 71% 82%, rgba(111, 195, 223, .54) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 61%, rgba(246, 221, 150, .62) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 31%,
      transparent 0 13.9rem,
      rgba(111, 195, 223, .115) 14rem,
      transparent 14.1rem 20rem,
      rgba(201, 169, 97, .10) 20.1rem,
      transparent 20.2rem 28rem,
      rgba(111, 195, 223, .065) 28.1rem,
      transparent 28.2rem),
    linear-gradient(rgba(232, 209, 150, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 209, 150, .026) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000 3%, #000 77%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 3%, #000 77%, transparent 100%);
  opacity: .68;
  transform: translate3d(var(--glacier-pointer-x-soft), var(--glacier-pointer-y-soft), 0) scale(1.01);
  animation: glacierHeroStars 9s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

#hero > section::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(108deg,
      transparent 38%,
      rgba(201, 169, 97, .035) 45%,
      rgba(232, 209, 150, .12) 49%,
      rgba(255, 240, 195, .18) 50%,
      rgba(111, 195, 223, .055) 53%,
      transparent 63%);
  transform: translate3d(-72%, 0, 0) rotate(.001deg);
  animation: glacierHeroSweep 3.1s .48s var(--glacier-aura-ease) 1 both;
  will-change: transform, opacity;
}

#hero > section > div.absolute.inset-0.flex {
  z-index: 2;
}

#hero > section > div.absolute.bottom-0 {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, #0a1628 3%, rgba(10, 22, 40, .72) 34%, transparent) !important;
}

/* The whole thought enters once, then the page settles into stillness. */
#hero .text-center.max-w-5xl {
  position: relative;
}

#hero .text-center.max-w-5xl::before {
  content: "";
  position: absolute;
  top: -15%;
  left: 50%;
  width: min(74vw, 860px);
  height: min(74vw, 860px);
  pointer-events: none;
  border: 1px solid rgba(111, 195, 223, .055);
  border-radius: 50%;
  opacity: .72;
  transform: translate3d(calc(-50% - var(--glacier-pointer-x-soft)), calc(0px - var(--glacier-pointer-y-soft)), 0);
  box-shadow:
    0 0 0 9vw rgba(201, 169, 97, .018),
    0 0 0 18vw rgba(111, 195, 223, .012);
}

#hero .text-center.max-w-5xl > * {
  position: relative;
  z-index: 1;
}

#hero .text-center.max-w-5xl > :not(.grid) {
  animation: glacierCopyArrival .92s var(--glacier-aura-ease) both;
}

#hero .text-center.max-w-5xl > :nth-child(1) { animation-delay: .06s; }
#hero .text-center.max-w-5xl > :nth-child(2) { animation-delay: .14s; }
#hero .text-center.max-w-5xl > :nth-child(3) { animation-delay: .24s; }
#hero .text-center.max-w-5xl > :nth-child(4) { animation-delay: .34s; }
#hero .text-center.max-w-5xl > :nth-child(5) { animation-delay: .44s; }

#hero h1 {
  text-shadow: 0 20px 58px rgba(0, 0, 0, .21);
}

#hero h1 > span {
  background:
    linear-gradient(112deg,
      #bd9439 0%,
      #dfc474 24%,
      #f5e6b4 46%,
      #fff4cf 50%,
      #c5963d 72%,
      #f0dca2 100%) !important;
  background-size: 240% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 14px 34px rgba(201, 169, 97, .15));
  animation: glacierGoldArrival 2.35s .16s var(--glacier-aura-ease) both;
}

/* The metrics read as an instrument cabinet rather than four loose labels. */
#hero .grid.grid-cols-2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(10px, 1.2vw, 16px) clamp(8px, 1vw, 14px);
  border: 1px solid rgba(232, 209, 150, .18);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(30, 38, 59, .48), rgba(7, 18, 34, .24));
  box-shadow:
    0 26px 78px rgba(0, 0, 0, .17),
    inset 0 1px 0 rgba(255, 255, 255, .04),
    inset 0 -1px 0 rgba(111, 195, 223, .035);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
  backdrop-filter: blur(8px) saturate(112%);
}

#hero .grid.grid-cols-2::before {
  content: "";
  position: absolute;
  inset: -92% auto -92% -25%;
  z-index: 3;
  width: 14%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 174, .35), transparent);
  transform: rotate(12deg) translateX(-260%);
  animation: glacierCabinetGlint 3.05s .92s var(--glacier-aura-ease) 1 both;
}

#hero .grid.grid-cols-2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 24.8%, rgba(201, 169, 97, .10) 25%, transparent 25.2%, transparent 49.8%, rgba(111, 195, 223, .075) 50%, transparent 50.2%, transparent 74.8%, rgba(201, 169, 97, .10) 75%, transparent 75.2%);
}

#hero .grid.grid-cols-2 > div {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: glacierMetricArrival .78s var(--glacier-aura-ease) both;
}

#hero .grid.grid-cols-2 > div:nth-child(1) { animation-delay: .40s; }
#hero .grid.grid-cols-2 > div:nth-child(2) { animation-delay: .49s; }
#hero .grid.grid-cols-2 > div:nth-child(3) { animation-delay: .58s; }
#hero .grid.grid-cols-2 > div:nth-child(4) { animation-delay: .67s; }

#hero .grid.grid-cols-2 > div > div:first-child {
  filter: drop-shadow(0 8px 20px rgba(201, 169, 97, .11));
}

/* A restrained optical glint on the existing calls to action. */
#hero button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#hero button::after {
  content: "";
  position: absolute;
  inset: -70% auto -70% -46%;
  z-index: 2;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 193, .62), transparent);
  transform: rotate(14deg) translate3d(-190%, 0, 0);
  transition: transform .78s var(--glacier-aura-ease);
}

/* Subtle system continuity beyond the first screen. */
#portfolio .grid.grid-cols-2 > .group::after,
#thesis a::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 20%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(232, 209, 150, .055), transparent);
  transform: skewX(-12deg) translateX(-160%);
  transition: transform 1s var(--glacier-aura-ease);
}

#thesis a {
  position: relative;
  overflow: hidden;
}

html.glacier-aura-paused #hero > section::before {
  animation-play-state: paused;
}

html.glacier-aura-settled #hero > section::after {
  animation: none;
  opacity: 0;
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  #hero button:hover::after {
    transform: rotate(14deg) translate3d(640%, 0, 0);
  }

  #portfolio .grid.grid-cols-2 > .group:hover::after,
  #thesis a:hover::after {
    transform: skewX(-12deg) translateX(780%);
  }
}

@keyframes glacierHeroStars {
  from { opacity: .52; transform: translate3d(-.2%, -.15%, 0) scale(1.006); }
  to   { opacity: .80; transform: translate3d(.25%, .22%, 0) scale(1.016); }
}

@keyframes glacierHeroSweep {
  0%   { transform: translate3d(-72%, 0, 0); opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: .82; }
  100% { transform: translate3d(72%, 0, 0); opacity: 0; }
}

@keyframes glacierGoldArrival {
  from { background-position: 100% 50%; opacity: .68; }
  to   { background-position: 48% 50%; opacity: 1; }
}

@keyframes glacierCopyArrival {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes glacierCabinetGlint {
  0%   { transform: rotate(12deg) translateX(-260%); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: rotate(12deg) translateX(940%); opacity: 0; }
}

@keyframes glacierMetricArrival {
  to { opacity: 1; transform: none; }
}

/* iPhone / Android: keep the composition, remove expensive continuous effects. */
@media (max-width: 767px) {
  header.fixed {
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    backdrop-filter: blur(12px) saturate(112%);
  }

  #hero > section {
    background:
      radial-gradient(circle at 78% 19%, rgba(232, 209, 150, .11), transparent 17rem),
      radial-gradient(circle at 18% 76%, rgba(111, 195, 223, .06), transparent 18rem),
      linear-gradient(145deg, #081a34 0%, #09162a 52%, #050d1a 100%);
  }

  #hero > section::before {
    inset: 0;
    background-size: auto, auto, auto, auto, auto, auto, auto, auto, 28px 28px, 28px 28px;
    opacity: .64;
    animation: none;
    transform: none;
    will-change: auto;
  }

  #hero > section::after {
    inset: 0;
    opacity: .10;
    animation: none;
    transform: none;
    will-change: auto;
  }

  #hero > section > canvas {
    opacity: .40;
    transform: none;
    mix-blend-mode: normal;
  }

  #hero .text-center.max-w-5xl::before {
    top: 9%;
    width: 94vw;
    height: 94vw;
    opacity: .45;
    transform: translateX(-50%);
    box-shadow: 0 0 0 18vw rgba(201, 169, 97, .014);
  }

  #hero .grid.grid-cols-2 {
    padding: 8px 6px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  }

  #hero .grid.grid-cols-2::after {
    background:
      linear-gradient(90deg, transparent 49.7%, rgba(201, 169, 97, .095) 50%, transparent 50.3%),
      linear-gradient(transparent 49.7%, rgba(111, 195, 223, .065) 50%, transparent 50.3%);
  }

  #hero .grid.grid-cols-2::before,
  #hero button::after,
  #portfolio .grid.grid-cols-2 > .group::after,
  #thesis a::after {
    display: none;
  }
}

@media (max-width: 389px) {
  #hero .grid.grid-cols-2 {
    gap: 8px !important;
  }
}

/* Coarse pointers, tablets and Save-Data receive a composed static frame. */
html.glacier-aura-static #hero > section::before,
html.glacier-aura-static #hero > section::after,
html.glacier-aura-static #hero h1 > span,
html.glacier-aura-static #hero .text-center.max-w-5xl > :not(.grid),
html.glacier-aura-static #hero .grid.grid-cols-2::before,
html.glacier-aura-static #hero .grid.grid-cols-2 > div {
  animation: none !important;
}

html.glacier-aura-static #hero > section::before {
  transform: none;
  opacity: .62;
  will-change: auto;
}

html.glacier-aura-static #hero > section::after {
  opacity: .08;
  transform: none;
  will-change: auto;
}

html.glacier-aura-static #hero > section > canvas {
  mix-blend-mode: normal;
  filter: none;
  transform: none;
}

html.glacier-aura-static #hero .text-center.max-w-5xl > :not(.grid),
html.glacier-aura-static #hero .grid.grid-cols-2 > div {
  opacity: 1;
  transform: none;
  filter: none;
}

html.glacier-aura-static #hero .grid.grid-cols-2,
html.glacier-aura-static header.fixed {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Respect system choices and low-power browsing. All content remains visible. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  #hero > section::before,
  #hero > section::after,
  #hero h1 > span,
  #hero .text-center.max-w-5xl > :not(.grid),
  #hero .grid.grid-cols-2::before,
  #hero .grid.grid-cols-2 > div {
    animation: none !important;
  }

  #hero > section::before {
    transform: none;
    opacity: .62;
  }

  #hero .text-center.max-w-5xl > :not(.grid),
  #hero .grid.grid-cols-2 > div {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/*
 * Legacy midnight-navy calibration, 2026-07-20.
 * Presentation only: no copy, figures, order, links or business logic changes.
 */
:root {
  --glacier-navy: #061429;
  --glacier-navy-deep: #030b18;
  --glacier-panel: #0a2038;
  --glacier-panel-soft: #102b47;
  --glacier-aura-navy: #0a2948;
  --glacier-aura-deep: #030b18;
}

html,
body,
#root {
  background: #061429;
}

body {
  background:
    radial-gradient(circle at 78% -8%, rgba(201, 169, 97, .105), transparent 34rem),
    radial-gradient(circle at 12% 38%, rgba(111, 195, 223, .065), transparent 32rem),
    linear-gradient(180deg, #0a2039 0%, #061429 48%, #030b18 100%);
}

header.fixed {
  background:
    linear-gradient(180deg, rgba(7, 28, 51, .975), rgba(3, 14, 28, .945)) !important;
  border-bottom-color: rgba(232, 209, 150, .13) !important;
  box-shadow:
    0 18px 52px rgba(0, 4, 12, .24),
    inset 0 -1px 0 rgba(111, 195, 223, .055);
}

#hero > section {
  background:
    radial-gradient(circle at calc(79% + var(--glacier-pointer-x)) calc(23% + var(--glacier-pointer-y)), rgba(240, 215, 145, .16), transparent 27rem),
    radial-gradient(circle at calc(18% - var(--glacier-pointer-x)) calc(78% - var(--glacier-pointer-y)), rgba(111, 195, 223, .085), transparent 26rem),
    radial-gradient(ellipse at 50% 108%, rgba(32, 90, 137, .20), transparent 48%),
    linear-gradient(145deg, #0a2948 0%, #071b32 53%, #030b18 100%) !important;
}

#hero > section > div.absolute.bottom-0 {
  background:
    linear-gradient(to top, #061429 3%, rgba(6, 20, 41, .78) 34%, transparent) !important;
}

#portfolio,
#thesis,
#testimonials,
#bridge {
  background:
    radial-gradient(circle at 84% 8%, rgba(111, 195, 223, .05), transparent 28rem),
    linear-gradient(180deg, #071b32, #041124) !important;
}

#philosophy,
footer#contact {
  background:
    radial-gradient(circle at 12% 18%, rgba(201, 169, 97, .065), transparent 28rem),
    linear-gradient(180deg, #06182c, #030d1c) !important;
}

#portfolio .grid.grid-cols-2 > .group,
#thesis a,
#testimonials details,
#philosophy [class*="bg-[#1A1A2E]"],
#bridge [class*="bg-[#1A1A2E]"],
#bridge a[data-office-contact-bound="true"],
.glacier-related-reading__card {
  background:
    linear-gradient(145deg, rgba(12, 39, 65, .92), rgba(5, 18, 34, .965)) !important;
  border-color: rgba(232, 209, 150, .13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 20px 54px rgba(0, 5, 16, .22);
}

#portfolio .aspect-square {
  background:
    radial-gradient(circle at 50% 38%, rgba(111, 195, 223, .115), transparent 48%),
    linear-gradient(145deg, #0d2a47, #06192f) !important;
}

#portfolio .aspect-square::before {
  inset: 14%;
  background:
    linear-gradient(145deg, rgba(218, 207, 175, .94), rgba(166, 159, 139, .86)) !important;
  box-shadow:
    0 16px 38px rgba(2, 10, 20, .23),
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 0 0 1px rgba(8, 29, 50, .18);
}

#portfolio .aspect-square img {
  width: 66% !important;
  height: 66% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  mix-blend-mode: multiply;
  filter: saturate(.92) contrast(1.08) brightness(.96);
  box-shadow: none !important;
}

.glacier-related-reading {
  background:
    radial-gradient(circle at 82% 14%, rgba(201, 169, 97, .105), transparent 30rem),
    linear-gradient(rgba(137, 202, 229, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137, 202, 229, .025) 1px, transparent 1px),
    linear-gradient(180deg, #071c33, #030f20) !important;
  background-size: auto, 44px 44px, 44px 44px, auto;
}

@media (max-width: 767px) {
  header.fixed {
    background:
      linear-gradient(180deg, rgba(7, 28, 51, .99), rgba(3, 14, 28, .975)) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(2, 10, 22, .12);
  }

  #hero > section {
    background:
      radial-gradient(circle at 78% 19%, rgba(232, 209, 150, .14), transparent 17rem),
      radial-gradient(circle at 18% 76%, rgba(111, 195, 223, .075), transparent 18rem),
      linear-gradient(145deg, #0a2948 0%, #071b32 54%, #030b18 100%) !important;
  }

  #portfolio .grid.grid-cols-2 > .group,
  #testimonials details,
  .glacier-related-reading__card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  }

  #portfolio .aspect-square::before {
    inset: 12%;
  }

  #portfolio .aspect-square img {
    width: 70% !important;
    height: 70% !important;
  }
}

/*
 * Brothers / founder voice: semiconductor-grade champagne tracework.
 * Presentation only: no copy, sequence, links, disclosure behavior or DOM changes.
 */
#testimonials {
  --glacier-voice-gold: 201, 169, 97;
  --glacier-voice-gold-light: 232, 209, 150;
  --glacier-voice-ice: 111, 195, 223;
  position: relative;
  isolation: isolate;
}

#testimonials details {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(var(--glacier-voice-gold-light), .34) !important;
  border-radius: 3px;
  background:
    radial-gradient(circle at 96% 8%, rgba(var(--glacier-voice-gold-light), .11), transparent 15rem),
    radial-gradient(circle at 12% 112%, rgba(var(--glacier-voice-ice), .055), transparent 18rem),
    linear-gradient(145deg, rgba(10, 32, 55, .96), rgba(3, 13, 27, .985)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 0 0 1px rgba(var(--glacier-voice-gold), .025),
    0 20px 54px rgba(0, 4, 14, .19);
  transition:
    border-color .42s var(--glacier-aura-ease),
    box-shadow .42s var(--glacier-aura-ease),
    transform .42s var(--glacier-aura-ease),
    background .42s var(--glacier-aura-ease);
}

/* Inner package edge: the quiet metal frame around a finished die. */
#testimonials details::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 1px solid rgba(var(--glacier-voice-gold), .105);
  border-radius: 1px;
  pointer-events: none;
  transition: border-color .42s var(--glacier-aura-ease);
}

/* Bond pads and routing lines, kept to the right so the quotation stays calm. */
#testimonials details::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(48%, 560px);
  pointer-events: none;
  background:
    radial-gradient(circle at 91% 22%, rgba(var(--glacier-voice-gold-light), .78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 22%, rgba(var(--glacier-voice-gold), .58) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 68%, rgba(var(--glacier-voice-gold-light), .68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 68%, rgba(var(--glacier-voice-ice), .44) 0 1px, transparent 1.8px),
    linear-gradient(90deg, transparent 0 71.7%, rgba(var(--glacier-voice-gold), .20) 71.9% 72.2%, transparent 72.4%),
    linear-gradient(0deg, transparent 0 21.7%, rgba(var(--glacier-voice-gold), .17) 21.9% 22.2%, transparent 22.4%),
    linear-gradient(90deg, transparent 0 47.7%, rgba(var(--glacier-voice-ice), .105) 47.9% 48.2%, transparent 48.4%),
    linear-gradient(0deg, transparent 0 67.7%, rgba(var(--glacier-voice-gold), .16) 67.9% 68.2%, transparent 68.4%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 24%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 24%, #000 68%);
  opacity: .72;
  transform: translate3d(0, 0, 0);
  transition: opacity .42s var(--glacier-aura-ease), transform .7s var(--glacier-aura-ease);
}

#testimonials details > * {
  position: relative;
  z-index: 1;
}

#testimonials details[open] {
  border-color: rgba(var(--glacier-voice-gold-light), .52) !important;
  background:
    radial-gradient(circle at 94% 10%, rgba(var(--glacier-voice-gold-light), .15), transparent 17rem),
    radial-gradient(circle at 12% 112%, rgba(var(--glacier-voice-ice), .075), transparent 19rem),
    linear-gradient(145deg, rgba(11, 36, 61, .98), rgba(3, 13, 27, .995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 0 0 1px rgba(var(--glacier-voice-gold), .045),
    0 24px 68px rgba(0, 4, 14, .26),
    0 0 34px rgba(var(--glacier-voice-gold), .055);
}

#testimonials details:focus-within {
  border-color: rgba(var(--glacier-voice-gold-light), .64) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--glacier-voice-gold-light), .10),
    0 0 0 2px rgba(var(--glacier-voice-gold-light), .10),
    0 24px 64px rgba(0, 4, 14, .24);
}

#testimonials details summary:focus-visible {
  outline: 2px solid rgba(var(--glacier-voice-gold-light), .72);
  outline-offset: -6px;
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  #testimonials details:hover {
    border-color: rgba(var(--glacier-voice-gold-light), .58) !important;
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      inset 0 0 0 1px rgba(var(--glacier-voice-gold), .05),
      0 28px 76px rgba(0, 4, 14, .28),
      0 0 38px rgba(var(--glacier-voice-gold), .055);
  }

  #testimonials details:hover::before {
    border-color: rgba(var(--glacier-voice-gold-light), .18);
  }

  #testimonials details:hover::after {
    opacity: .96;
    transform: translate3d(-4px, 0, 0);
  }
}

@media (max-width: 767px) {
  #testimonials details {
    border-color: rgba(var(--glacier-voice-gold-light), .30) !important;
    border-radius: 2px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .035),
      0 14px 34px rgba(0, 4, 14, .17);
  }

  #testimonials details::before {
    inset: 5px;
  }

  #testimonials details::after {
    width: 50%;
    opacity: .46;
  }

  #testimonials details[open] {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .04),
      0 18px 44px rgba(0, 4, 14, .22);
  }
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  #testimonials details,
  #testimonials details::before,
  #testimonials details::after {
    transition: none !important;
  }
}

/*
 * Portfolio: independent semiconductor carriers for every company we back.
 * Presentation only: no copy, figures, ordering, links, assets or DOM changes.
 */
#portfolio {
  --glacier-portfolio-gold: 201, 169, 97;
  --glacier-portfolio-gold-light: 232, 209, 150;
  --glacier-portfolio-ice: 111, 195, 223;
  position: relative;
  isolation: isolate;
}

/* Each company receives its own low-light package, rather than one shared frame. */
#portfolio .grid.grid-cols-2 > .group {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(var(--glacier-portfolio-gold-light), .29) !important;
  border-radius: 3px;
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--glacier-portfolio-gold-light), .095), transparent 10rem),
    radial-gradient(circle at 8% 102%, rgba(var(--glacier-portfolio-ice), .052), transparent 12rem),
    linear-gradient(145deg, rgba(10, 33, 57, .97), rgba(3, 13, 27, .99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .038),
    inset 0 0 0 1px rgba(var(--glacier-portfolio-gold), .022),
    0 20px 52px rgba(0, 4, 14, .205);
  transform: translate3d(0, 0, 0);
  transition:
    border-color .42s var(--glacier-aura-ease),
    box-shadow .42s var(--glacier-aura-ease),
    transform .42s var(--glacier-aura-ease),
    background .42s var(--glacier-aura-ease);
}

/* Quiet bond pads and short routing traces inside every individual card. */
#portfolio .grid.grid-cols-2 > .group::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(var(--glacier-portfolio-gold), .09);
  border-radius: 1px;
  background:
    radial-gradient(circle at 92% 92%, rgba(var(--glacier-portfolio-gold-light), .70) 0 1px, transparent 1.7px),
    radial-gradient(circle at 75% 92%, rgba(var(--glacier-portfolio-gold), .48) 0 1px, transparent 1.7px),
    radial-gradient(circle at 92% 74%, rgba(var(--glacier-portfolio-ice), .40) 0 1px, transparent 1.7px),
    linear-gradient(90deg, transparent 0 74.7%, rgba(var(--glacier-portfolio-gold), .13) 74.9% 75.2%, transparent 75.4%),
    linear-gradient(0deg, transparent 0 73.7%, rgba(var(--glacier-portfolio-ice), .085) 73.9% 74.2%, transparent 74.4%),
    linear-gradient(90deg, transparent 0 91.7%, rgba(var(--glacier-portfolio-gold), .14) 91.9% 92.2%, transparent 92.4%),
    linear-gradient(0deg, transparent 0 91.7%, rgba(var(--glacier-portfolio-gold), .12) 91.9% 92.2%, transparent 92.4%);
  -webkit-mask-image: linear-gradient(135deg, transparent 0 44%, rgba(0, 0, 0, .30) 64%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 0 44%, rgba(0, 0, 0, .30) 64%, #000 100%);
  opacity: .72;
  transition: border-color .42s var(--glacier-aura-ease), opacity .42s var(--glacier-aura-ease);
}

/* A single optical pass, only on deliberate hover; no continuous animation. */
#portfolio .grid.grid-cols-2 > .group::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0 auto 0 -38%;
  z-index: 3;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--glacier-portfolio-gold-light), .105), transparent);
  opacity: .64;
  transform: skewX(-12deg) translateX(-170%);
  transition: transform .9s var(--glacier-aura-ease), opacity .42s var(--glacier-aura-ease);
}

#portfolio .grid.grid-cols-2 > .group > * {
  position: relative;
  z-index: 2;
}

/* The logo bay is a dark ceramic carrier with a warm metal die, never a white tile. */
#portfolio .aspect-square {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(var(--glacier-portfolio-gold-light), .30) !important;
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 39%, rgba(var(--glacier-portfolio-gold-light), .115), transparent 43%),
    radial-gradient(circle at 86% 12%, rgba(var(--glacier-portfolio-ice), .09), transparent 34%),
    linear-gradient(rgba(var(--glacier-portfolio-gold), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--glacier-portfolio-ice), .028) 1px, transparent 1px),
    linear-gradient(145deg, #0d2e4e, #051426 74%) !important;
  background-size: auto, auto, 22px 22px, 22px 22px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 0 0 1px rgba(var(--glacier-portfolio-gold), .025),
    0 15px 34px rgba(0, 4, 14, .21);
  transition:
    border-color .42s var(--glacier-aura-ease),
    box-shadow .42s var(--glacier-aura-ease),
    background .42s var(--glacier-aura-ease);
}

/* The restrained champagne die absorbs white pixels through multiply blending. */
#portfolio .aspect-square::before {
  content: "";
  position: absolute;
  inset: 13%;
  z-index: 0;
  border: 1px solid rgba(var(--glacier-portfolio-gold-light), .33);
  border-radius: 2px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 247, 220, .38), transparent 34%),
    linear-gradient(145deg, rgba(217, 203, 162, .95), rgba(145, 132, 99, .91)) !important;
  box-shadow:
    0 15px 34px rgba(0, 3, 12, .27),
    0 0 24px rgba(var(--glacier-portfolio-gold), .055),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 0 0 1px rgba(5, 25, 44, .16);
  transition: border-color .42s var(--glacier-aura-ease), box-shadow .42s var(--glacier-aura-ease);
}

/*
 * Every company carries an independent, restrained energy field.
 * The phases are intentionally staggered: the portfolio reads as a living
 * system of companies being continuously supported, not as a synchronized
 * advertising marquee.
 */
@keyframes glacier-portfolio-circuit-breathe {
  0%, 100% {
    opacity: .50;
  }
  46% {
    opacity: .84;
  }
}

@keyframes glacier-portfolio-die-breathe {
  0%, 100% {
    background-position: 18% 14%, 0 0;
    box-shadow:
      0 15px 34px rgba(0, 3, 12, .27),
      0 0 22px rgba(var(--glacier-portfolio-gold), .045),
      inset 0 1px 0 rgba(255, 255, 255, .30),
      inset 0 0 0 1px rgba(5, 25, 44, .16);
  }
  50% {
    background-position: 76% 68%, 0 0;
    box-shadow:
      0 17px 38px rgba(0, 3, 12, .30),
      0 0 34px rgba(var(--glacier-portfolio-gold-light), .10),
      inset 0 1px 0 rgba(255, 255, 255, .37),
      inset 0 0 0 1px rgba(5, 25, 44, .18);
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  #portfolio .grid.grid-cols-2 > .group::before {
    animation: glacier-portfolio-circuit-breathe 7.8s ease-in-out infinite;
  }

  #portfolio .aspect-square::before {
    background-size: 190% 190%, auto;
    animation: glacier-portfolio-die-breathe 9.6s ease-in-out infinite;
  }

  #portfolio .grid.grid-cols-2 > .group:nth-child(4n + 2)::before,
  #portfolio .grid.grid-cols-2 > .group:nth-child(4n + 2) .aspect-square::before {
    animation-delay: -2.1s;
  }

  #portfolio .grid.grid-cols-2 > .group:nth-child(4n + 3)::before,
  #portfolio .grid.grid-cols-2 > .group:nth-child(4n + 3) .aspect-square::before {
    animation-delay: -4.4s;
  }

  #portfolio .grid.grid-cols-2 > .group:nth-child(4n + 4)::before,
  #portfolio .grid.grid-cols-2 > .group:nth-child(4n + 4) .aspect-square::before {
    animation-delay: -6.3s;
  }
}

/* Fine die traces and four quiet bond pads; deliberately dim beneath the logo. */
#portfolio .aspect-square::after {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(var(--glacier-portfolio-gold), .08);
  border-radius: 2px;
  background:
    radial-gradient(circle at 13% 13%, rgba(var(--glacier-portfolio-gold-light), .68) 0 1px, transparent 1.7px),
    radial-gradient(circle at 87% 13%, rgba(var(--glacier-portfolio-gold), .52) 0 1px, transparent 1.7px),
    radial-gradient(circle at 13% 87%, rgba(var(--glacier-portfolio-ice), .44) 0 1px, transparent 1.7px),
    radial-gradient(circle at 87% 87%, rgba(var(--glacier-portfolio-gold-light), .58) 0 1px, transparent 1.7px),
    linear-gradient(90deg, transparent 0 12.7%, rgba(var(--glacier-portfolio-gold), .12) 12.9% 13.2%, transparent 13.4% 86.7%, rgba(var(--glacier-portfolio-gold), .11) 86.9% 87.2%, transparent 87.4%),
    linear-gradient(0deg, transparent 0 12.7%, rgba(var(--glacier-portfolio-ice), .085) 12.9% 13.2%, transparent 13.4% 86.7%, rgba(var(--glacier-portfolio-gold), .10) 86.9% 87.2%, transparent 87.4%);
  opacity: .68;
  transition: opacity .42s var(--glacier-aura-ease), transform .7s var(--glacier-aura-ease);
}

#portfolio .aspect-square img {
  position: relative;
  z-index: 2;
  width: 64% !important;
  height: 64% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  mix-blend-mode: multiply;
  filter:
    saturate(.94)
    contrast(1.10)
    brightness(.95)
    drop-shadow(0 8px 16px rgba(2, 11, 22, .13));
  box-shadow: none !important;
  transition: transform .42s var(--glacier-aura-ease), filter .42s var(--glacier-aura-ease);
}

#portfolio .grid.grid-cols-2 > .group:focus-within {
  border-color: rgba(var(--glacier-portfolio-gold-light), .62) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--glacier-portfolio-gold-light), .09),
    0 0 0 2px rgba(var(--glacier-portfolio-gold-light), .09),
    0 24px 62px rgba(0, 4, 14, .25);
}

@media (hover: hover) and (pointer: fine) {
  #portfolio .grid.grid-cols-2 > .group:hover {
    border-color: rgba(var(--glacier-portfolio-gold-light), .54) !important;
    transform: translate3d(0, -3px, 0);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      inset 0 0 0 1px rgba(var(--glacier-portfolio-gold), .04),
      0 28px 72px rgba(0, 4, 14, .28),
      0 0 34px rgba(var(--glacier-portfolio-gold), .045);
  }

  #portfolio .grid.grid-cols-2 > .group:hover::before {
    border-color: rgba(var(--glacier-portfolio-gold-light), .15);
    opacity: .96;
  }

  #portfolio .grid.grid-cols-2 > .group:hover::after {
    opacity: .92;
    transform: skewX(-12deg) translateX(820%);
  }

  #portfolio .grid.grid-cols-2 > .group:hover .aspect-square {
    border-color: rgba(var(--glacier-portfolio-gold-light), .52) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .045),
      inset 0 0 0 1px rgba(var(--glacier-portfolio-gold), .04),
      0 19px 44px rgba(0, 4, 14, .25),
      0 0 28px rgba(var(--glacier-portfolio-gold), .05);
  }

  #portfolio .grid.grid-cols-2 > .group:hover .aspect-square::before {
    border-color: rgba(var(--glacier-portfolio-gold-light), .48);
    box-shadow:
      0 17px 38px rgba(0, 3, 12, .30),
      0 0 30px rgba(var(--glacier-portfolio-gold), .075),
      inset 0 1px 0 rgba(255, 255, 255, .34),
      inset 0 0 0 1px rgba(5, 25, 44, .18);
  }

  #portfolio .grid.grid-cols-2 > .group:hover .aspect-square::after {
    opacity: .90;
    transform: scale(.985);
  }
}

@media (max-width: 767px) {
  #portfolio .grid.grid-cols-2 > .group {
    border-color: rgba(var(--glacier-portfolio-gold-light), .26) !important;
    border-radius: 2px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .032),
      0 12px 30px rgba(0, 4, 14, .17);
  }

  #portfolio .grid.grid-cols-2 > .group::before {
    inset: 5px;
    opacity: .45;
  }

  #portfolio .grid.grid-cols-2 > .group::after {
    opacity: .24;
  }

  #portfolio .aspect-square {
    border-color: rgba(var(--glacier-portfolio-gold-light), .27) !important;
    background-size: auto, auto, 18px 18px, 18px 18px, auto;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .03),
      0 10px 24px rgba(0, 4, 14, .16);
  }

  #portfolio .aspect-square::before {
    inset: 11%;
    box-shadow:
      0 10px 24px rgba(0, 3, 12, .22),
      inset 0 1px 0 rgba(255, 255, 255, .28),
      inset 0 0 0 1px rgba(5, 25, 44, .14);
  }

  #portfolio .aspect-square::after {
    opacity: .44;
  }

  #portfolio .aspect-square img {
    width: 68% !important;
    height: 68% !important;
    filter: saturate(.94) contrast(1.08) brightness(.96);
  }
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  #portfolio .grid.grid-cols-2 > .group,
  #portfolio .grid.grid-cols-2 > .group::before,
  #portfolio .grid.grid-cols-2 > .group::after,
  #portfolio .aspect-square,
  #portfolio .aspect-square::before,
  #portfolio .aspect-square::after,
  #portfolio .aspect-square img {
    animation: none !important;
    transition: none !important;
  }
}