/* ==========================================================================
   LESIS: main stylesheet
   1. Tokens          7. Home hero              13. Footer
   2. Base            8. Sections & type        14. Page transitions
   3. Utilities       9. Cards & components     15. Print
   4. Motion         10. Dark section           16. Reduced motion
   5. Buttons & pills 11. Forms
   6. Header & nav   12. Service pages
   ========================================================================== */

/* Fonts: self-hosted variable fonts (Latin subset), preloaded in base.njk */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --navy-950: #060e1d;
  --navy-900: #0b1a33;
  --navy-800: #102549;
  --navy-700: #193663;
  --blue-500: #3a6fd8;
  --blue-400: #6593ee;
  --gold-500: #d8a74e;
  --gold-400: #e6bd6b;
  --gold-300: #f2d595;
  --gold-50: #fbf4e4;

  --ink: #0e1726;
  --ink-soft: #334155;
  --muted: #596678;
  --line: #e3e8ef;
  --line-strong: #cfd7e3;
  --bg: #ffffff;
  --bg-alt: #f4f6fa;
  --bg-input: #f7f9fc;

  --success: #13774a;
  --success-bg: #e7f6ee;
  --danger: #b42318;
  --danger-bg: #fdecea;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgb(11 26 51 / 0.05), 0 2px 6px rgb(11 26 51 / 0.05);
  --shadow: 0 2px 6px rgb(11 26 51 / 0.04), 0 12px 32px rgb(11 26 51 / 0.08);
  --shadow-lg: 0 8px 20px rgb(11 26 51 / 0.08), 0 30px 70px rgb(11 26 51 / 0.14);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 80px;
  --section-y: clamp(80px, 10vw, 136px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

/* Sticky panels sit below the header, and move up when it hides. */
:root {
  --sticky-top: calc(var(--header-h) + 32px);
}

/* Set on the sticky panels themselves rather than on the root, so hiding the
   header restyles just these instead of every element on the page. */
.header-hidden :is(.about__head, .form-split__intro, .aside-sticky) {
  --sticky-top: 32px;
}

/* The page behind the open mobile menu shouldn't scroll. */
.nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* A long unbroken string (a URL or email in content) wraps instead of widening the page. */
  overflow-wrap: break-word;
}

/* Elements hidden with the hidden attribute stay hidden even if a class sets display. */
[hidden] {
  display: none !important;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--navy-900);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--blue-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--navy-700);
}

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

img {
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--gold-300);
  color: var(--navy-950);
}

:focus-visible {
  outline: 3px solid var(--focus, var(--blue-500));
  outline-offset: 3px;
  border-radius: 4px;
}

.hero,
.page-hero,
.section--dark,
.site-footer {
  --focus: var(--gold-400);
}

main:focus {
  outline: none;
}

.icon {
  flex-shrink: 0;
}

/* 3. Utilities ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--blue-400));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.2s, visibility 0s linear 0.3s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.to-top:hover {
  background: var(--navy-700);
  color: #fff;
}

.to-top > * {
  grid-area: 1 / 1;
}

.to-top__ring {
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}

.to-top__ring circle {
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--progress, 0) * 100);
  stroke-linecap: round;
}

/* Where the browser can drive an animation from the scroll position, the
   progress bar and ring follow it directly instead of main.js setting
   --progress every frame. (main.js checks the same conditions.) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: scroll-progress linear both;
      animation-timeline: scroll(root);
    }

    .to-top__ring circle {
      animation: scroll-ring linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes scroll-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes scroll-ring {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* 4. Motion ---------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Page titles and intro lines are the main content, so they never start
   invisible (that would delay when the page counts as loaded); they only rise. */
.hero__title,
.hero__lead,
.page-hero__title,
.page-hero__lead {
  animation: rise 0.9s var(--ease-out) both;
}

.hero__lead,
.page-hero__lead {
  animation-delay: 0.08s;
}

@keyframes rise {
  from {
    transform: translateY(18px);
  }
}

/* Cards that both reveal on scroll and react to hover: keep both transitions,
   and apply the stagger delay to the reveal only. */
.js .card[data-reveal] {
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    translate 0.4s var(--ease),
    border-color 0.4s var(--ease);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s, 0s;
}

.js .value-card[data-reveal] {
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    border-color 0.35s var(--ease);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0s;
}

/* Failsafe: if main.js never takes over the reveals (it failed to load, was
   blocked, or the browser is too old to run it), hidden content fades in after
   4 seconds anyway. main.js adds .reveal-ready once it's handling them. */
.js:not(.reveal-ready) [data-reveal] {
  animation: reveal-failsafe 0.6s var(--ease-out) 4s forwards;
}

@keyframes reveal-failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Cursor-following highlight on cards (position set by main.js). */
.spotlight {
  position: relative;
  isolation: isolate;
}

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(216 167 78 / 0.13), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.spotlight:hover::after {
  opacity: 1;
}

/* 5. Buttons & pills ------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0.65em 1.35em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.button .icon {
  transition: transform 0.25s var(--ease);
}

@media (hover: hover) {
  .button:hover .icon {
    transform: translateX(3px);
  }
}

.button:active {
  transform: scale(0.98);
}

.button--lg {
  min-height: 54px;
  padding: 0.8em 1.7em;
  font-size: 1rem;
}

.button--primary {
  background: var(--navy-900);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 6px 16px rgb(11 26 51 / 0.18);
}

.button--primary:hover {
  background: var(--navy-700);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 10px 26px rgb(11 26 51 / 0.26);
}

.button--accent {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--navy-950);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 8px 24px rgb(216 167 78 / 0.3);
}

.button--accent:hover {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-400));
  color: var(--navy-950);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 12px 32px rgb(216 167 78 / 0.42);
}

.button--glass {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.button--glass:hover {
  border-color: rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button-row--center {
  justify-content: center;
}

.pill,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-700);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before,
.pill__dot {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px rgb(216 167 78 / 0.18);
}

.pill--glass,
.eyebrow--light {
  border-color: rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.09);
  color: rgb(255 255 255 / 0.88);
}

.pill__dot {
  animation: pulse 2.4s ease-in-out 4;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 7px rgb(216 167 78 / 0);
  }
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-50), #fff);
  color: var(--gold-500);
  box-shadow: inset 0 0 0 1px rgb(216 167 78 / 0.25);
}

.icon-tile--sm {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.icon-tile--glass {
  margin-bottom: 20px;
  background: rgb(255 255 255 / 0.08);
  color: var(--gold-400);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

/* 6. Header & navigation --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Nearly opaque rather than a frosted-glass backdrop-filter: a blur behind a
     sticky header has to be recomputed on every frame of scrolling. */
  background: rgb(255 255 255 / 0.96);
  border-bottom: 1px solid rgb(11 26 51 / 0.06);
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.45s var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 30px rgb(11 26 51 / 0.07);
}

.site-header.is-hidden {
  box-shadow: none;
  transform: translateY(-100%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy-900);
  text-decoration: none;
  flex-shrink: 0;
}

.brand:hover {
  color: var(--navy-900);
}

.brand__mark {
  color: var(--navy-900);
  transition: color 0.3s var(--ease);
}

.brand__mark-ink {
  stroke: #fff;
  transition: stroke 0.3s var(--ease);
}

.brand__mark-accent {
  stroke: var(--gold-500);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand__tagline {
  max-width: 220px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
  transition: color 0.3s var(--ease);
}

.brand--inverse,
.brand--inverse:hover {
  color: #fff;
}

.brand--inverse .brand__mark {
  color: #fff;
}

.brand--inverse .brand__mark-ink {
  stroke: var(--navy-900);
}

.brand--inverse .brand__tagline {
  color: rgb(255 255 255 / 0.72);
}

/* Mobile-first navigation */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--navy-900);
  cursor: pointer;
}

/* Drawn with borders, not backgrounds: Windows High Contrast mode removes
   backgrounds, which would leave an empty button, but keeps borders. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 0;
  border-top: 2px solid currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), border-color 0.2s;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

/* Offsets are measured from below the middle bar's border, hence -9px / 5px
   for an even 5px gap on each side. */
.nav-toggle__bars::before {
  top: -9px;
}

.nav-toggle__bars::after {
  top: 5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  border-top-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 28px;
  background: #fff;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}

.site-nav.is-open {
  display: block;
  animation: menu-in 0.35s var(--ease-out);
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.site-nav__list {
  list-style: none;
}

.site-nav__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.site-nav__link {
  flex: 1;
  padding: 16px 0;
  color: var(--navy-900);
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--blue-500);
}

.submenu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--navy-900);
  cursor: pointer;
}

.submenu-toggle svg {
  transition: transform 0.25s var(--ease);
}

.submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.submenu {
  display: none;
  flex-basis: 100%;
  list-style: none;
  padding: 0 0 14px;
}

.submenu-toggle[aria-expanded="true"] + .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.4;
  text-decoration: none;
}

.submenu a:hover,
.submenu a[aria-current="page"] {
  background: var(--bg-alt);
  color: var(--navy-900);
}

.site-nav__cta {
  width: 100%;
  margin-top: 22px;
}

@media (max-width: 380px) {
  .brand__tagline {
    display: none;
  }
}

/* Without JavaScript the menu button can't open the menu, so on small screens
   the menu is shown inline under the logo, with its dropdown links expanded. */
@media (max-width: 1023px) {
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
  }

  html:not(.js) .nav-toggle,
  html:not(.js) .submenu-toggle {
    display: none;
  }

  html:not(.js) .site-nav {
    position: static;
    display: block;
    flex-basis: 100%;
    max-height: none;
    padding: 0 0 16px;
    border: 0;
    box-shadow: none;
  }

  html:not(.js) .submenu {
    display: block;
  }
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 20px;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .site-nav__item {
    flex-wrap: nowrap;
    border: 0;
  }

  .site-nav__link {
    position: relative;
    padding: 10px 4px 10px 14px;
    font-size: 0.94rem;
    transition: color 0.2s var(--ease);
  }

  .site-nav__item:not(.has-submenu) .site-nav__link {
    padding-right: 14px;
  }

  /* Underline that grows on hover and marks the section in view */
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .has-submenu .site-nav__link::after {
    right: 4px;
  }

  .site-nav__link:hover::after,
  .site-nav__link[aria-current="location"]::after {
    transform: scaleX(1);
  }

  .submenu-toggle {
    width: 24px;
    height: 36px;
    margin-right: 6px;
  }

  .submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    display: block;
    min-width: 320px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgb(255 255 255 / 0.96);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transform-origin: top left;
    transition:
      opacity 0.2s var(--ease),
      transform 0.25s var(--ease-out),
      visibility 0.2s;
  }

  /* Invisible bridge so the menu stays open while the pointer moves onto it */
  .submenu::before {
    content: "";
    position: absolute;
    inset: -12px 0 auto;
    height: 12px;
  }

  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu,
  .submenu-toggle[aria-expanded="true"] + .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .submenu a {
    padding: 11px 14px;
  }

  .site-nav__cta {
    width: auto;
    margin: 0;
  }

  /* Transparent header over a dark hero, until the page scrolls */
  .js .has-dark-hero .site-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
  }

  .js .has-dark-hero .site-header:not(.is-scrolled) .brand,
  .js .has-dark-hero .site-header:not(.is-scrolled) .brand__mark,
  .js .has-dark-hero .site-header:not(.is-scrolled) .site-nav__link,
  .js .has-dark-hero .site-header:not(.is-scrolled) .submenu-toggle {
    color: #fff;
  }

  .js .has-dark-hero .site-header:not(.is-scrolled) .brand__mark-ink {
    stroke: var(--navy-900);
  }

  .js .has-dark-hero .site-header:not(.is-scrolled) .brand__tagline {
    color: rgb(255 255 255 / 0.65);
  }

  .js .has-dark-hero .site-header:not(.is-scrolled) .site-nav__cta {
    background: #fff;
    color: var(--navy-900);
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .brand__tagline {
    display: none;
  }
}

/* On mobile the transparent header still needs contrast for the menu button */
@media (max-width: 1023px) {
  .js .has-dark-hero .site-header:not(.is-scrolled):not(.is-open) {
    background: transparent;
    border-bottom-color: transparent;
  }

  .js .has-dark-hero .site-header:not(.is-scrolled):not(.is-open) .brand,
  .js .has-dark-hero .site-header:not(.is-scrolled):not(.is-open) .brand__mark,
  .js .has-dark-hero .site-header:not(.is-scrolled):not(.is-open) .nav-toggle {
    color: #fff;
  }

  .js .has-dark-hero .site-header:not(.is-scrolled):not(.is-open) .brand__mark-ink {
    stroke: var(--navy-900);
  }

  .js .has-dark-hero .site-header:not(.is-scrolled):not(.is-open) .brand__tagline {
    color: rgb(255 255 255 / 0.65);
  }
}

/* Pages with a dark hero slide it up underneath the transparent header */
.js .has-dark-hero main {
  margin-top: calc(var(--header-h) * -1);
}

/* 7. Home hero ------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  padding: calc(var(--header-h) + 56px) 0 140px;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: -6% 0;
  z-index: -2;
}

.hero__media picture,
.hero__media img {
  width: 100%;
  height: 100%;
}

.hero__media img {
  object-fit: cover;
  object-position: 65% 40%;
  animation: kenburns 22s var(--ease-out) both;
}

@keyframes kenburns {
  from {
    transform: scale(1.14);
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 85% 10%, rgb(58 111 216 / 0.28), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgb(216 167 78 / 0.16), transparent 60%),
    linear-gradient(100deg, rgb(6 14 29 / 0.96) 0%, rgb(11 26 51 / 0.86) 40%, rgb(11 26 51 / 0.45) 75%, rgb(11 26 51 / 0.6) 100%),
    linear-gradient(0deg, rgb(6 14 29 / 0.9) 0%, transparent 35%);
}

/* On narrow screens the text spans the full width, so the photo is darkened
   evenly instead of only on the left. */
@media (max-width: 767px) {
  .hero::before {
    background:
      radial-gradient(50% 60% at 10% 100%, rgb(216 167 78 / 0.14), transparent 60%),
      linear-gradient(180deg, rgb(6 14 29 / 0.82) 0%, rgb(11 26 51 / 0.8) 50%, rgb(6 14 29 / 0.92) 100%);
  }
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000, transparent 75%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1100px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 64px;
  }
}

.hero__title {
  max-width: 13ch;
  margin-bottom: 24px;
  color: #fff;
  font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold-300) 0%, var(--gold-500) 40%, var(--gold-300) 60%, var(--gold-500) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 580px;
  margin-bottom: 40px;
  color: rgb(255 255 255 / 0.8);
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.65;
}

.hero-panel {
  padding: 22px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-lg);
  /* No backdrop-filter: the photo behind is moving (Ken Burns zoom), so a
     blur here would be recomputed every frame. */
  background: linear-gradient(160deg, rgb(11 26 51 / 0.9), rgb(11 26 51 / 0.8));
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

@media (max-width: 1099px) {
  .hero-panel {
    display: none;
  }
}

.hero-panel__title {
  margin: 0 0 12px 6px;
  color: rgb(255 255 255 / 0.82);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-panel__list {
  display: grid;
  gap: 4px;
  list-style: none;
}

.hero-panel__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}

.hero-panel__link:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.hero-panel__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgb(216 167 78 / 0.16);
  color: var(--gold-400);
}

.hero-panel__text {
  flex: 1;
}

.hero-panel__arrow {
  color: rgb(255 255 255 / 0.45);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.hero-panel__link:hover .hero-panel__arrow {
  color: var(--gold-400);
  transform: translate(2px, -2px);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 96px;
  display: none;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: scroll-cue 2s var(--ease) 5;
}

@keyframes scroll-cue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (min-width: 1100px) and (min-height: 760px) {
  .scroll-cue {
    display: block;
  }
}

/* Highlights strip overlapping the bottom of the hero */
.stats-wrap {
  position: relative;
  z-index: 3;
  margin-top: -80px;
}

.stats {
  display: grid;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
}

.stat + .stat {
  border-top: 1px solid var(--line);
}

.stat__value {
  color: var(--navy-900);
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  color: var(--muted);
  font-size: 0.95rem;
}

@media (min-width: 720px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat {
    padding: 34px 40px;
  }

  .stat + .stat {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

/* Scrolling capabilities strip */
.marquee {
  position: relative;
  margin-top: clamp(48px, 7vw, 80px);
}

.marquee__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 50s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track,
.marquee.is-offscreen .marquee__track {
  animation-play-state: paused;
}

.marquee__toggle {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.marquee__toggle:hover {
  border-color: var(--navy-900);
}

.marquee__toggle .icon-play,
.marquee.is-paused .marquee__toggle .icon-pause {
  display: none;
}

.marquee.is-paused .marquee__toggle .icon-play {
  display: block;
}

.marquee__list {
  display: flex;
  flex-shrink: 0;
  list-style: none;
}

.marquee__list li {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marquee__list li::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--gold-500);
  transform: rotate(45deg);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* 8. Sections & type ------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--alt {
  background: var(--bg-alt);
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head--split {
  display: grid;
  gap: 16px 64px;
  max-width: none;
  align-items: end;
}

@media (min-width: 960px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .section-head--split .section-title {
    margin-bottom: 0;
  }
}

.section-head__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.section-head__body > :last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.section-title--light {
  color: #fff;
}

.about {
  display: grid;
  gap: 24px 64px;
}

@media (min-width: 960px) {
  .about {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr);
  }

  .about__head {
    position: sticky;
    top: var(--sticky-top);
    transition: top 0.45s var(--ease-out);
    align-self: start;
  }
}

.statement {
  margin-bottom: 32px;
  color: var(--navy-900);
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

/* Prose */
.prose {
  color: var(--ink-soft);
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose--lg {
  font-size: 1.1rem;
}

.prose--light,
.prose--light p {
  color: rgb(255 255 255 / 0.78);
}

.prose.prose--light strong,
.prose--light strong {
  color: #fff;
}

.prose--article {
  font-size: 1.075rem;
}

.prose h2 {
  margin: 2.4em 0 0.75em;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 1.8em 0 0.6em;
  font-size: 1.2rem;
}

.prose strong {
  color: var(--navy-900);
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin: 0 0 1.5em;
  padding: 0;
  list-style: none;
}

.prose li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 1.75em;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.7em;
  width: 7px;
  height: 7px;
  background: var(--gold-500);
  transform: rotate(45deg);
}

.prose ol {
  counter-reset: item;
}

.prose ol > li::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--gold-500);
  font-family: var(--font-head);
  font-weight: 800;
}

/* Short lists (materials, processes) become a tidy two-column grid */
@media (min-width: 640px) {
  .prose--article ul:has(> li:nth-child(6)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }
}

/* 9. Cards & components ---------------------------------------------------- */
.values {
  display: grid;
  gap: 20px;
  list-style: none;
}

@media (min-width: 640px) {
  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.value-card {
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    border-color 0.35s var(--ease);
}

.value-card:hover {
  border-color: rgb(216 167 78 / 0.4);
}

.value-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.value-card__index {
  color: var(--line-strong);
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.value-card__title {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.value-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
}

/* Service cards */
.cards {
  display: grid;
  gap: 24px;
  list-style: none;
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .cards:not(.cards--feature) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .cards--feature {
    gap: 28px;
  }
}

.card {
  position: relative;
  isolation: isolate; /* keeps the hover shadow (::before) behind the card, not the page */
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    translate 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

/* The hover shadow sits on its own layer and fades in. Transitioning
   box-shadow itself would repaint the whole card every frame, which also
   happens mid-scroll as cards pass under the pointer. */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

@media (hover: hover) {
  .card:hover {
    border-color: rgb(216 167 78 / 0.45);
    translate: 0 -6px;
  }

  .card:hover::before {
    opacity: 1;
  }

  .card:hover .card__media img {
    transform: scale(1.06);
  }

  .card:hover .card__more .icon {
    transform: translateX(5px);
  }
}

/* The title link stretches over the whole card, so the card is one click
   target while screen readers hear just the service name. */
.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.card__link:hover {
  color: inherit;
}

.card__link:focus-visible {
  outline: none;
}

.card__link:focus-visible::after {
  outline: 3px solid var(--focus, var(--blue-500));
  outline-offset: 3px;
}

.card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 8px);
  background: var(--bg-alt);
}

.cards--feature .card__media {
  aspect-ratio: 16 / 9;
}

.card__media picture,
.card__media img {
  width: 100%;
  height: 100%;
}

.card__media img {
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 18px 18px;
}

.cards--feature .card__body {
  padding: 26px 24px 22px;
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card__index {
  color: var(--line-strong);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.card__title {
  margin-bottom: 10px;
  font-size: 1.2rem;
  line-height: 1.25;
}

.cards--feature .card__title {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
}

.card__text {
  flex: 1;
  color: var(--muted);
  font-size: 0.98rem;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--navy-900);
  font-family: var(--font-head);
  font-size: 0.93rem;
  font-weight: 700;
}

.card__more .icon {
  color: var(--gold-500);
  transition: transform 0.3s var(--ease);
}

.check-list {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-weight: 500;
}

.check-list .icon {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--gold-50);
  color: var(--gold-500);
  stroke-width: 2.6;
}

.check-list--light li {
  color: rgb(255 255 255 / 0.85);
}

.check-list--light .icon {
  background: rgb(216 167 78 / 0.16);
  color: var(--gold-400);
}

/* 10. Dark section --------------------------------------------------------- */
.section--dark {
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 0% 0%, rgb(58 111 216 / 0.16), transparent 60%),
    radial-gradient(45% 55% at 100% 100%, rgb(58 111 216 / 0.22), transparent 60%),
    linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: #fff;
  isolation: isolate;
}

.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 70% at 20% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 20% 30%, #000, transparent 75%);
}

.section--dark .inquiry-form {
  border-color: transparent;
  box-shadow: 0 40px 100px rgb(0 0 0 / 0.35);
}

.form-split {
  display: grid;
  gap: 48px;
}

@media (min-width: 960px) {
  .form-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: 80px;
    align-items: start;
  }

  .form-split__intro {
    position: sticky;
    top: var(--sticky-top);
    transition: top 0.45s var(--ease-out);
  }
}

/* 11. Forms ---------------------------------------------------------------- */
.inquiry-form {
  padding: clamp(18px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
}

.form-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

/* Floating labels: the label sits inside the field and moves up on focus/input */
.field {
  position: relative;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 26px 16px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-input);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.field textarea {
  min-height: 160px;
  padding-top: 30px;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%230b1a33' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  cursor: pointer;
}

.field label {
  position: absolute;
  left: 17px;
  top: 19px;
  max-width: calc(100% - 34px);
  overflow: hidden;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform 0.2s var(--ease),
    color 0.2s var(--ease);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field--select label {
  color: var(--navy-700);
  font-weight: 600;
  transform: translateY(-10px) scale(0.76);
}

/* Kept as its own rule: a browser that doesn't know this selector would drop
   every other selector grouped with it. */
.field input:-webkit-autofill + label {
  color: var(--navy-700);
  font-weight: 600;
  transform: translateY(-10px) scale(0.76);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #b3bfd0;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgb(58 111 216 / 0.14);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgb(180 35 24 / 0.1);
}

.field__req {
  color: var(--danger);
}

.field--trap {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

.inquiry-form__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.inquiry-form__note span {
  color: var(--danger);
}

.inquiry-form button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.8;
}

.inquiry-form button[aria-busy="true"] .icon {
  display: none;
}

.inquiry-form button[aria-busy="true"]::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.inquiry-form__status {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 500;
  animation: menu-in 0.35s var(--ease-out);
}

.inquiry-form__status.is-success {
  background: var(--success-bg);
  color: var(--success);
}

.inquiry-form__status.is-error {
  background: var(--danger-bg);
  color: var(--danger);
}

/* 12. Service pages -------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) 0 clamp(64px, 8vw, 104px);
  overflow: hidden;
  background:
    radial-gradient(55% 80% at 100% 0%, rgb(58 111 216 / 0.3), transparent 60%),
    radial-gradient(45% 70% at 0% 100%, rgb(216 167 78 / 0.16), transparent 60%),
    linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: #fff;
  isolation: isolate;
}

.page-hero__inner {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .page-hero__inner--media {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 72px;
  }
}

.page-hero__title {
  margin-bottom: 18px;
  color: #fff;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-hero__lead {
  max-width: 560px;
  margin-bottom: 32px;
  color: rgb(255 255 255 / 0.78);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
}

.page-hero__media {
  width: 100%;
  max-width: 600px;
  margin: 0;
}

@media (min-width: 1024px) {
  .page-hero__media {
    max-width: none;
  }
}

.page-hero__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 0.06);
  box-shadow: 0 40px 100px rgb(0 0 0 / 0.4);
  animation: frame-in 1s var(--ease-out) both;
}

@keyframes frame-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}

.page-hero__frame picture,
.page-hero__frame img {
  width: 100%;
  height: 100%;
}

.page-hero__frame img {
  border-radius: calc(var(--radius-xl) - 8px);
  object-fit: cover;
  background: #fff;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  list-style: none;
  font-size: 0.88rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(255 255 255 / 0.6);
}

.breadcrumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid rgb(255 255 255 / 0.4);
  border-right: 1.5px solid rgb(255 255 255 / 0.4);
  transform: rotate(45deg);
}

.breadcrumb a {
  color: rgb(255 255 255 / 0.85);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--gold-400);
}

/* Article + sticky sidebar */
.article-layout {
  display: grid;
  gap: 56px;
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 72px;
  }
}

.aside-sticky {
  display: grid;
  gap: 24px;
}

@media (min-width: 1024px) {
  .aside-sticky {
    position: sticky;
    top: var(--sticky-top);
    transition: top 0.45s var(--ease-out);
  }
}

.toc__title {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.toc ul {
  display: grid;
  list-style: none;
  border-left: 2px solid var(--line);
}

.toc a {
  display: block;
  margin-left: -2px;
  padding: 7px 0 7px 16px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.toc a:hover {
  color: var(--navy-900);
}

.toc a[aria-current="location"] {
  border-left-color: var(--gold-500);
  color: var(--navy-900);
  font-weight: 600;
}

@media (max-width: 1023px) {
  .toc {
    display: none;
  }
}

.aside-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(216 167 78 / 0.12), transparent 60%),
    var(--bg-alt);
  border: 1px solid var(--line);
}

.aside-card__title {
  margin: 18px 0 8px;
  color: var(--navy-900);
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.aside-card__text {
  color: var(--muted);
  font-size: 0.95rem;
}

.aside-card .button {
  width: 100%;
}

.subsection {
  margin-top: clamp(56px, 7vw, 88px);
}

.subsection:first-child {
  margin-top: 0;
}

.subsection--gallery {
  margin-top: 40px;
}

.subsection__title {
  margin-bottom: 32px;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Equipment */
.equipment {
  display: grid;
  gap: 20px;
  list-style: none;
}

@media (min-width: 700px) {
  .equipment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.equipment__item {
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.equipment__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  background: var(--bg-alt);
}

.equipment__media picture,
.equipment__media img {
  width: 100%;
  height: 100%;
}

.equipment__media img {
  object-fit: cover;
}

.equipment__body {
  padding: 20px 18px 14px;
}

.equipment__name {
  margin-bottom: 12px;
  font-size: 1.15rem;
}

.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.spec-list li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
}

.other-equipment {
  margin-top: 28px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}

.other-equipment__title {
  margin-bottom: 18px;
  font-size: 1.15rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.tag-list li {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 16px;
  list-style: none;
}

.gallery__item figure {
  margin: 0;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.gallery__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  background: #fff;
}

.gallery__media picture,
.gallery__media img {
  width: 100%;
  height: 100%;
}

.gallery__media img {
  object-fit: contain;
}

.gallery__item figcaption {
  padding: 12px 10px 6px;
  color: var(--navy-900);
  font-family: var(--font-head);
  font-weight: 700;
}

/* 404 */
.not-found {
  display: flex;
  align-items: center;
  min-height: max(560px, 80vh);
}

.not-found__inner {
  max-width: 760px;
  text-align: center;
}

.not-found .page-hero__lead {
  margin-inline: auto;
}

.not-found__code {
  margin: 0 0 8px;
  background: linear-gradient(180deg, var(--gold-300), rgb(216 167 78 / 0.2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-head);
  font-size: clamp(6rem, 4rem + 10vw, 11rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  list-style: none;
}

.not-found__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.92rem;
  text-decoration: none;
}

.not-found__links a:hover {
  border-color: var(--gold-500);
  color: #fff;
}

.not-found__links .icon {
  color: var(--gold-400);
}

/* 13. Footer --------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-top: clamp(64px, 8vw, 96px);
  overflow: hidden;
  background: var(--navy-950);
  color: rgb(255 255 255 / 0.68);
  font-size: 0.97rem;
  isolation: isolate;
}

.site-footer__glow {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 70%;
  background: radial-gradient(50% 80% at 50% 100%, rgb(58 111 216 / 0.22), transparent 70%);
  pointer-events: none;
}

.site-footer__grid {
  display: grid;
  gap: 40px;
  padding-bottom: 56px;
}

@media (min-width: 800px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 56px;
  }
}

.site-footer__about p {
  max-width: 380px;
  margin: 20px 0 0;
}

.site-footer__about .brand__tagline {
  display: block;
  max-width: 260px;
}

.site-footer__heading {
  margin-bottom: 18px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer__col ul {
  display: grid;
  gap: 4px;
  list-style: none;
}

.site-footer__col a {
  display: inline-block;
  padding-block: 6px;
}

.site-footer a {
  color: rgb(255 255 255 / 0.72);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-footer a:hover {
  color: var(--gold-400);
}

.site-footer .brand,
.site-footer .brand:hover {
  color: #fff;
}

.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 24px;
  font-size: 0.88rem;
}

.site-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: rgb(255 255 255 / 0.1);
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__top {
  display: inline-block;
  padding-block: 8px;
}

.site-footer__wordmark {
  margin: 0 0 -0.16em;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-head);
  font-size: clamp(5rem, 25vw, 22rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

/* 14. Page transitions ----------------------------------------------------- */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

/* A service card's image grows into the service page's hero image. main.js
   gives the clicked card this name as the page is left. */
.page-hero__frame {
  view-transition-name: service-image;
}

/* Arriving through a page transition, the cross-fade is the entrance. The
   hero shows straight away rather than also fading and rising in, which would
   leave it blank in the browser's snapshot of the new page and then pop in. */
.vt-arrived :is(.hero, .page-hero) [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.vt-arrived :is(.hero__title, .hero__lead, .page-hero__title, .page-hero__lead, .page-hero__frame) {
  animation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

::view-transition-group(*) {
  animation-duration: 0.55s;
  animation-timing-function: var(--ease-out);
}

/* 15. Print ---------------------------------------------------------------- */
/* Browsers drop background colors when printing, which would leave the white
   text of the dark sections invisible, and anything not yet scrolled into
   view would still be faded out. */
@media print {
  .site-header,
  .scroll-progress,
  .to-top,
  .skip-link,
  .scroll-cue,
  .hero__media,
  .hero__grid,
  .hero-panel,
  .marquee,
  .inquiry-form,
  .aside-card,
  .toc,
  .site-footer__glow,
  .site-footer__wordmark,
  .button-row {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .has-dark-hero main {
    margin-top: 0;
  }

  .hero,
  .page-hero,
  .section--dark,
  .site-footer {
    min-height: 0;
    padding-block: 24px;
    background: none !important;
    color: #000;
  }

  .hero::before,
  .section--dark::before {
    display: none;
  }

  .hero__title,
  .hero__lead,
  .page-hero__title,
  .page-hero__lead,
  .section-title--light,
  .prose--light,
  .prose--light p,
  .prose--light strong,
  .check-list--light li,
  .eyebrow--light,
  .pill--glass,
  .breadcrumb li,
  .breadcrumb a,
  .not-found__code,
  .site-footer,
  .site-footer a,
  .site-footer__heading,
  .brand--inverse {
    color: #000 !important;
  }

  .hero__title em,
  .not-found__code {
    background: none;
    color: #000 !important;
  }

  .stats-wrap {
    margin-top: 0;
  }

  .stats,
  .card,
  .value-card,
  .equipment__item,
  .page-hero__frame {
    box-shadow: none;
    break-inside: avoid;
  }

  .page-hero__frame {
    max-width: 320px;
  }
}

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

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    flex-wrap: wrap;
    width: auto;
    animation: none;
  }

  .marquee__list[aria-hidden="true"],
  .marquee__toggle {
    display: none;
  }

  .marquee__list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }

  @view-transition {
    navigation: none;
  }
}