/* The agency band. A thin strip: the label and four seals over the anglerfish film.
   Structure and loading are explained in AgencyBand.astro. */

.agency-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(18px, 2.2vw, 28px);
  background: var(--abyss);
  box-shadow:
    inset 0 1px 0 var(--card-edge),
    inset 0 -1px 0 var(--card-edge);
}

/* The film. Poster and video share one box and one crop; the video takes over once it is
   actually playing, the same hand-off the capability statement uses. The edges fade into the
   abyss so the strip reads as a window into water rather than a rectangle of video. */
.agency-water {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.agency-ocean-poster,
.agency-ocean-film {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.agency-ocean-film {
  opacity: 0;
}
.agency-ocean-film.video-ready {
  opacity: 1;
}
.agency-water:has(.video-ready) .agency-ocean-poster {
  visibility: hidden;
}

.agency-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
}

@media (min-width: 760px) {
  .agency-inner {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
  }
}

/* The film is live and a lit fish can swim straight behind the words, so a glow on the letters
   is not enough: measured, it let the label fall to 1.6:1. The label sits in its own soft
   patch of dark water instead, which holds whatever passes behind it. */
.agency-label {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(10 8 6 / 0.88);
  box-shadow: 0 0 18px 10px rgb(10 8 6 / 0.88);
  color: var(--text);
  font-family: var(--font-data);
  font-size: var(--t-data);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agency-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agency-seal img {
  display: block;
  width: auto;
  height: clamp(48px, 5.4vw, 72px);
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.7));
}

/* High Contrast throws the film away along with every other decoration. */
@media (forced-colors: active) {
  .agency-water {
    display: none;
  }
}
/* The home page. Dark sections let the light and the creature show through; white sections, every
   container and the parts the inner pages share with this one come from
   src/styles/components.css. The header and footer are in src/chrome/, the light behind it all in
   src/lure/. Only the shapes no other page has are here. */

/* Hero: the headline sits bottom-left, the lure hangs top-right. Along its foot, the one line
   under the headline with two buttons, and the three credentials as pills. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: 112px var(--gutter) clamp(28px, 5svh, 56px);
}

.headline {
  --h1: min(calc((100vw - 2 * var(--gutter)) * 0.145), 16svh);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h1);
  font-stretch: 62%;
  font-style: italic;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
}
.headline span {
  display: block;
  white-space: nowrap;
}

/* The lure lights the headline. The letters are a window onto a pool of light whose centre sits
   where the lure bulb hangs: the home view puts it at 0.86 across and 0.4 down the screen
   (VIEWS.home in src/lure/geometry.ts, mirrored in src/lure/lure.css). The pool is placed in the
   headline's own box rather than the viewport, because the headline carries a scroll transform
   and a viewport-anchored background would be dragged around by it; over a pool this wide the
   difference is a few dozen pixels and invisible.

   The two ends of the pool are declared on :root, not on the headline, for two reasons. A
   property declared on the headline itself would beat an inherited one, so anything wrapping the
   hero to try another strength would be ignored and the comparison board at
   /prototype/hero-light would show four identical panels. And tools/qa/contrast.mjs reads
   --lamp-cold off the headline to know what colour the letters actually are, which only works
   if the value is inherited from somewhere.

   --lamp-hot is the colour at the lure, 17.5:1 on --abyss. --lamp-cold is the far end, and it is
   the one number with a rule attached: the dimmest letter must stay at or above --text-3, the
   quietest text the site allows (5.6:1 on --abyss). #a89e8a is --text-2, 7.5:1. The settings
   tried and the pick are in docs/decisions.md. */
:root {
  --lamp-hot: #f6efdf;
  --lamp-cold: #a89e8a;
}
.headline {
  --lamp-x: 95%;
  --lamp-y: 30%;
  --lamp-reach-x: 125%;
  --lamp-reach-y: 150%;
}
/* Guarded, because without background-clip the transparent fill would leave the headline
   invisible rather than merely unlit. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .headline {
    background-image: radial-gradient(
      ellipse var(--lamp-reach-x) var(--lamp-reach-y) at var(--lamp-x) var(--lamp-y),
      var(--lamp-hot) 0%,
      var(--lamp-hot) 16%,
      var(--lamp-cold) 82%,
      var(--lamp-cold) 100%
    );
    /* The pool is drawn at the size of the headline's box and pinned by its own centre, so the
       breath in home-experience.css can grow the box without sliding the lamp sideways: a
       background-position percentage lines up that point of the image with the same point of
       the box, and the gradient's centre is at exactly that point. */
    background-size: 100% 100%;
    background-position: var(--lamp-x) var(--lamp-y);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  /* Both fallbacks put the ink back: in forced colours the system picks the colour, and on
     paper the headline has no lamp behind it to explain the fade. */
  @media (forced-colors: active) {
    .headline {
      background-image: none;
      color: CanvasText;
      -webkit-text-fill-color: CanvasText;
    }
  }
  @media print {
    .headline {
      background-image: none;
      color: #000;
      -webkit-text-fill-color: #000;
    }
  }
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: clamp(24px, 4svh, 44px);
}
.hero-lead {
  display: grid;
  gap: clamp(18px, 2.4svh, 26px);
}
.positioning {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The family strip: the four marks drift slowly past, the SBA badge holds still at the end. */
.marks {
  position: relative;
  padding-block: clamp(20px, 2.6vw, 32px);
  background: rgb(14 11 8 / 0.95);
  box-shadow:
    inset 0 1px 0 var(--card-edge),
    inset 0 -1px 0 var(--card-edge);
}
.marks-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
@media (min-width: 900px) {
  .marks-inner {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    gap: clamp(24px, 3vw, 48px);
  }
}
.marks-label {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
}
.marks-window {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0), #000 6%, #000 94%, rgb(0 0 0 / 0));
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0), #000 6%, #000 94%, rgb(0 0 0 / 0));
}
.marks-track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(36px, 4.5vw, 64px);
  margin: 0;
  padding: 0 clamp(18px, 2.25vw, 32px);
  list-style: none;
}
.mark {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}
.mark img {
  width: auto;
  height: 48px;
}
/* The second copy is only there to make the loop seamless, so it exists only while it moves. */
.marks-track.is-copy {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .marks-track.is-copy {
    display: flex;
  }
  .js .marks-track {
    animation: marks-move 40s linear infinite;
  }
  /* It keeps moving under the mouse (Azhar, Sep 18, 2026). Keyboard focus still holds it, so
     anything focusable ever added to the strip can be reached before it slides away. */
  .motion-paused .marks-track,
  .marks-window:focus-within .marks-track {
    animation-play-state: paused;
  }
}
@keyframes marks-move {
  to {
    transform: translateX(-100%);
  }
}
/* Standing still (no script, or reduced motion), the row wraps instead of running off the edge. */
html:not(.js) .marks-window {
  -webkit-mask-image: none;
  mask-image: none;
}
html:not(.js) .marks-track {
  flex: 1 1 auto;
  flex-wrap: wrap;
  row-gap: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .marks-window {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marks-track {
    flex: 1 1 auto;
    flex-wrap: wrap;
    row-gap: 16px;
  }
}
.marks-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 14rem;
  color: var(--text-2);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.3;
}
.marks-badge img {
  width: auto;
  height: 56px;
}

/* About: the founding story, its first sentence beside the rest (.split in components.css). */
.founding-story {
  margin-top: 22px;
}
.founding-lead {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.founding-body {
  max-width: 40rem;
  margin: 0;
  color: var(--white-ink-2);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}
/* Services: the four chapter words as four bands, the word on the left and its
   services as equal cells across (HomeChapters.astro). Azhar's pick of Sep 15, 2026, over four
   equal cards and one four-column board; the write-up is in docs/decisions.md. */
.chapters {
  display: grid;
  gap: clamp(16px, 1.6vw, 24px);
}
.chapter {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.chapter-head {
  display: flex;
  align-items: start;
  gap: 16px;
  padding-bottom: 20px;
  box-shadow: 0 1px 0 var(--card-edge);
}
.chapter-number {
  margin: 0 0 5px;
  color: var(--amber);
  font-family: var(--font-data);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.chapter-word {
  margin: 0;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.chapter-sub {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: var(--t-small);
}
.chapter-services {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0 14px;
}
.service + .service {
  box-shadow: inset 0 1px 0 var(--card-edge);
}
.service-icon {
  margin-top: 2px;
  color: var(--amber);
}
.service-text {
  display: grid;
  align-content: start;
}
.service-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
}
.service-subtitle {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 0.96875rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.service-more {
  margin-top: 8px;
}
.service-more > summary {
  display: inline-block;
  min-height: 32px;
  padding: 4px 2px;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-color: var(--text-3);
  text-underline-offset: 0.2em;
  white-space: nowrap;
  cursor: pointer;
}
.service-more > summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .service-more > summary:hover {
    text-decoration-color: var(--text);
  }
}
.service-more-hide,
.service-more[open] .service-more-read {
  display: none;
}
.service-more[open] .service-more-hide {
  display: inline;
}
/* On a phone the paragraph simply opens in place under its read line; the row above it already
   carries the title and the icon. */
.service-panel-icon,
.service-panel-title {
  display: none;
}
.service-body {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* From a tablet up, the paragraph opens over the rows instead: the rows go invisible but keep
   their place, and the open disclosure is laid over the whole list, its title where the first
   row's title was and Close where the last row's read line was. Nothing changes size. The read
   line sits in a track of its own (8 above, 32 for the line), so the row keeps its height when
   the line leaves the flow. Without :has() the paragraph opens in place, as on a phone. Screen
   only: on paper every paragraph prints in its row (print.css). */
@media screen and (min-width: 720px) {
  .service-text {
    grid-template-rows: auto auto 40px;
  }
  .chapter-services:has(.service-more[open]) > .service {
    visibility: hidden;
  }
  .service-more[open] {
    position: absolute;
    inset: 0;
    z-index: 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 18px 0 14px;
    overflow: auto;
    visibility: visible;
  }
  .service-more[open] > summary {
    order: 2;
    margin: auto 0 0 34px;
  }
  .service-panel {
    order: 1;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 14px;
    animation: service-open var(--d-open) var(--e-standard) both;
  }
  .service-panel-icon {
    display: block;
    margin-top: 2px;
    color: var(--amber);
  }
  .service-panel-title {
    display: block;
    margin: 0 0 10px;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.3;
  }
  .service-body {
    margin: 0;
  }
}
@keyframes service-open {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

/* Wide: the word in a column on the left and the services as equal cells across the rest.
   Each band fits its own content. Only from 1200px: narrower than that, Prevail's three cells cannot hold
   a service name and its read line on one line each. */
@media screen and (min-width: 1200px) {
  .chapters {
    grid-auto-rows: auto;
  }
  .chapter {
    grid-template-columns: 15rem minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: clamp(24px, 3vw, 48px);
  }
  .chapter-head {
    padding-bottom: 0;
    padding-right: clamp(24px, 3vw, 48px);
    box-shadow: 1px 0 0 var(--card-edge);
  }
  /* Tall enough for the longest paragraph and its Close, so a band never has to scroll. */
  .chapter-services {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: clamp(20px, 2vw, 32px);
    min-height: 13.5rem;
  }
  .service {
    padding: 0;
  }
  .service + .service {
    padding-left: clamp(20px, 2vw, 32px);
    box-shadow: inset 1px 0 0 var(--card-edge);
  }
  /* The read line at the foot of every cell, whatever the one line above it wraps to. */
  .service-text {
    grid-template-rows: auto minmax(0, 1fr) 40px;
  }
  .service-more[open] {
    padding: 0;
  }
  .service-body {
    max-width: 72ch;
  }
}
@media (forced-colors: active) {
  .chapter {
    border: 1px solid CanvasText;
  }
}

/* Below Services the page is drawn the way /services and /family are, and every section is a
   different shape (Azhar's pick from three directions, Sep 15 night, docs/decisions.md): the
   problems on a horizon line, the creature lit with the reasons fanned from its lamp, the
   beliefs as five lures, the record as a white tag, the light at rest on the email. Every
   screen has a lamp in frame at a different distance. */

/* ------------------------------------------------------------ the gap: five contacts on a horizon */
/* One line with five unlit rings on it and a problem under each: what is out there before the
   light reaches it. Wide, the line is the horizon; narrow, it turns and runs down the left. */
.horizon {
  position: relative;
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.horizon::before {
  content: "";
  position: absolute;
  background: var(--line-strong);
}
.problem {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
}
/* the unlit lamp: a ring on the line with the problem's icon inside it */
.problem-ring {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 9px;
  border-radius: 50%;
  color: var(--text-2);
  background: var(--abyss);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.problem-lead {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.problem-body {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-small);
  line-height: 1.5;
  text-wrap: pretty;
}
@media (min-width: 1100px) {
  .horizon {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-top: 20px;
  }
  .horizon::before {
    inset: 20px 0 auto;
    height: 1px;
  }
  .problem {
    padding-right: 20px;
  }
  .problem-ring {
    margin-top: -20px;
  }
}
@media (max-width: 1099px) {
  .horizon {
    gap: 28px;
  }
  .horizon::before {
    inset: 0 auto 0 19px;
    width: 1px;
  }
  .problem {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
    align-items: center;
  }
  .problem-body {
    grid-column: 2;
  }
}
/* the sentence that closes the set, large under the five */
.gap-close {
  max-width: 70ch;
  margin: clamp(36px, 4vw, 56px) 0 0;
  font-size: var(--t-statement);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* ------------------------------------------------- why: the creature, and what its light shows */
/* The drawing on the left, six lines of text on the right pinned at the heights the leaders
   arrive at (ENDS in HomeDifferentiators.astro). The lamp's glow runs past the drawing's box,
   so the section clips it at the page's edge. */
.why {
  overflow: hidden;
}
.shown {
  display: grid;
  gap: 32px;
}
@media (min-width: 1000px) {
  .shown {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 0;
    align-items: stretch;
  }
}
.shown-art {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1;
  margin-inline: auto;
}
.shown-glow {
  position: absolute;
  left: 85.5%;
  top: 57.5%;
  width: 70%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 214 150 / 0.34), rgb(221 154 51 / 0.14) 35%, transparent 68%);
}
.shown-drawing {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* The traced paths sit under potrace's scale(0.1), so a stroke width set here is in their
   units: 50 is 5 units of the 3334 box, about a pixel at this size. */
.shown-fish {
  fill: none;
  stroke: rgb(239 233 220 / 0.2);
  stroke-width: 50;
  stroke-linejoin: round;
}
.shown-fish.is-lit {
  stroke: var(--amber-lit);
  stroke-width: 60;
}
.shown-cup {
  filter: drop-shadow(0 0 140px rgb(255 214 150 / 0.75));
}
.shown-leaders polyline {
  fill: none;
  stroke: rgb(221 154 51 / 0.5);
  stroke-width: 1px;
}
.reasons {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reason {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.reason-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber-lit);
  box-shadow: 0 0 10px 2px rgb(221 154 51 / 0.6);
}
.reason-icon {
  color: var(--amber);
}
.reason-text {
  margin: 0;
  font-size: var(--t-read);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
@media (min-width: 1000px) {
  .reason {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }
  .reason.is-1 { top: 16%; }
  .reason.is-2 { top: 30%; }
  .reason.is-3 { top: 44%; }
  .reason.is-4 { top: 58%; }
  .reason.is-5 { top: 72%; }
  .reason.is-6 { top: 86%; }
  .reason-dot {
    margin-left: -4px;
  }
}
@media (max-width: 999px) {
  .shown-leaders {
    display: none;
  }
  .shown-art {
    max-width: 440px;
  }
  .reasons {
    display: grid;
  }
  .reason {
    padding: 16px 0;
    border-top: 1px solid var(--line);
  }
}

/* ------------------------------------------------------------------ beliefs: five lures */
/* Each lure is the fish's own stalk and cup, cut out of the traced logo and faded toward the
   head (the defs are in HomeBeliefs.astro). Wide, five in a row with the words under each;
   between, three and two; narrow, one lure and its line per row. */
.beliefs-head {
  max-width: 44rem;
}
.lures {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.belief {
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
}
.belief-lure {
  display: block;
  width: 78px;
  height: auto;
  overflow: visible;
}
.belief-stalk {
  fill: #6f5b41;
}
.belief-cup {
  filter: drop-shadow(0 0 90px rgb(255 214 150 / 0.7));
}
.belief-text {
  max-width: 26ch;
  margin: 18px 0 0;
  font-size: var(--t-read);
  line-height: 1.45;
  text-wrap: pretty;
}
@media (min-width: 1100px) {
  .lures {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .lures {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .belief {
    grid-column: span 2;
  }
  .belief:nth-child(4) {
    grid-column: 2 / span 2;
  }
}
@media (max-width: 719px) {
  .lures {
    gap: 0;
  }
  .belief {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    justify-items: start;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    text-align: left;
  }
  .belief-lure {
    width: 44px;
    justify-self: center;
  }
  .belief-text {
    max-width: none;
    margin: 0;
  }
}

/* ------------------------------------------------------ company data: a white tag on the water */
.tag {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--radius);
  color: var(--white-ink);
  background: var(--white-card);
  box-shadow:
    inset 0 0 0 1px var(--white-edge),
    0 24px 60px -30px rgb(0 0 0 / 0.8);
}
@media (min-width: 900px) {
  .tag {
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: start;
  }
}
.tag-rows {
  margin: 0;
}
.tag-row {
  display: grid;
  gap: 6px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--white-edge);
}
.tag-row:first-child {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 640px) {
  .tag-row {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: baseline;
  }
}
.tag-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white-ink-2);
  font-size: var(--t-small);
  font-weight: 500;
}
.tag-icon {
  color: var(--white-accent);
}
.tag-value {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.4;
}
.tag-value.is-data {
  font-family: var(--font-data);
  font-size: var(--t-read);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tag-row.is-code .tag-value {
  font-size: clamp(1.75rem, 2.6vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
.tag-side {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: 22px;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--white-edge);
}
.tag-badge {
  width: 100px;
  height: auto;
}
.tag-supports {
  margin: 0;
  color: var(--white-ink-2);
  font-size: var(--t-small);
  line-height: 1.5;
}
/* the tag is white, so its focus rings are the white sections' bronze */
.tag :focus-visible {
  outline-color: var(--bronze);
}

/* ------------------------------------------------------ contact: the light rests on the address */
.contact-inner {
  display: grid;
  gap: 22px;
  padding-block: clamp(24px, 6vw, 72px);
}
.contact-email {
  justify-self: start;
  max-width: 100%;
  font-size: clamp(1.375rem, 4.2vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.024em;
  overflow-wrap: anywhere;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--amber);
  text-underline-offset: 0.14em;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 8px;
}
.contact-phone {
  font-family: var(--font-data);
  font-size: var(--t-read);
  font-variant-numeric: tabular-nums;
}

/* In High Contrast the light goes: the rings, the dots and the leaders become plain marks, the
   tag keeps a border, and the lures are drawn in the text colour. */
@media (forced-colors: active) {
  .horizon::before,
  .problem-ring,
  .tag {
    border: 1px solid CanvasText;
  }
  .reason-dot {
    background: CanvasText;
    box-shadow: none;
  }
  .shown-fish,
  .shown-fish.is-lit,
  .shown-leaders polyline {
    stroke: CanvasText;
  }
  .shown-cup,
  .belief-cup {
    fill: CanvasText;
    filter: none;
  }
  .belief-stalk {
    fill: CanvasText;
  }
  .shown-glow,
  .belief-halo {
    display: none;
  }
}
/* Home choreography. All copy stays visible; motion only changes decorative layers.
   Native timelines keep the existing script budget and pause preference intact. */
.hero-service-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-inline: var(--gutter);
  background: var(--abyss);
  border-block: 1px solid var(--line);
}
.hero-service-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
  padding: 16px 24px;
  color: var(--text);
  text-decoration: none;
  border-left: 1px solid var(--line);
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  font-weight: 650;
}
.hero-service-index a:last-child { border-right: 1px solid var(--line); }
.hero-service-index svg { color: var(--amber); }
.hero-service-index a:hover,
.hero-service-index a:focus-visible { background: var(--deep); }

.chapters .chapter {
  position: relative;
  isolation: isolate;
  border-radius: 0;
  background: linear-gradient(110deg, #19140d, #100e0a 58%);
  box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line);
}
.chapters .chapter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--amber);
  transform-origin: top;
}
.chapters .chapter:focus-within,
.chapters .chapter:hover {
  background: linear-gradient(110deg, #241b10, #100e0a 58%);
}
.chapters .chapter-head > .chip { border-radius: 50%; }
.chapters .chapter-number { display: none; }
.chapters .chapter-word {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-size: clamp(2rem, 3.3vw, 3.25rem);
}

/* The entire service band tips toward the mouse; reading and touch stay still. */
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.motion-ready:not(.motion-paused) .chapters .chapter {
    transform: perspective(1100px) translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
    transition: transform 380ms ease-out, box-shadow 380ms ease-out;
  }
  html.motion-ready:not(.motion-paused) .chapters .chapter:hover:not(:focus-within):not(:has(details[open])) {
    transform: perspective(1100px) translateY(-5px) rotateX(calc(var(--surface-y, 0) * 5deg)) rotateY(calc(var(--surface-x, 0) * -2deg)) scale(1.008);
    box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line), 0 24px 42px -10px #000c, 0 5px 16px #0006;
    z-index: 1;
    transition-duration: 180ms;
  }
  html.motion-ready:not(.motion-paused) .chapters .chapter::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid transparent;
    border-image: radial-gradient(ellipse at var(--surface-light-x, 50%) var(--surface-light-y, 50%), #ffd184, #d99a3240 38%, transparent 75%) 1;
    opacity: 0;
    transition: opacity 300ms ease-out;
  }
  html.motion-ready:not(.motion-paused) .chapters .chapter:hover:not(:focus-within):not(:has(details[open]))::after {
    opacity: 1;
  }
}

.why {
  /* Clip the lamp's bleed without creating a scroll container for the view timeline. */
  overflow: clip;
  padding-block: clamp(56px, 8svh, 96px);
}
.why .sec-head { max-width: 44rem; }
.why .sec-title { font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: 1.04; }
.shown-fish:not(.is-lit) { stroke: rgb(239 233 220 / 0.32); }
.shown-leaders polyline { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reason-text { transition: color 180ms ease; }
.problem-lead,
.problem-body,
.reason-text {
  background: rgb(10 8 6 / 0.94);
  box-shadow: 0 0 12px 8px rgb(10 8 6 / 0.94);
}
.reason:hover .reason-text { color: var(--amber-lit); }
.shown:has(.reason:hover) .shown-leaders polyline { stroke-opacity: 0.25; }
.shown:has(.reason.is-1:hover) .shown-leaders polyline:nth-child(1),
.shown:has(.reason.is-2:hover) .shown-leaders polyline:nth-child(2),
.shown:has(.reason.is-3:hover) .shown-leaders polyline:nth-child(3),
.shown:has(.reason.is-4:hover) .shown-leaders polyline:nth-child(4),
.shown:has(.reason.is-5:hover) .shown-leaders polyline:nth-child(5),
.shown:has(.reason.is-6:hover) .shown-leaders polyline:nth-child(6) {
  stroke: var(--amber-lit);
  stroke-opacity: 1;
  stroke-width: 2px;
}
.belief-lure { transform-origin: 50% 0; }

@media (min-width: 1100px) {
  .belief:nth-child(even) { padding-top: 56px; }
  .belief-lure { width: 92px; }
}
@media (max-width: 719px) {
  .hero-service-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-service-index a { min-height: 60px; padding: 14px 16px; }
  .hero-service-index a:nth-child(2) { border-right: 1px solid var(--line); }
  .hero-service-index a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .why { padding-block: 56px; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.motion-paused) .hero {
      view-timeline-name: --home-opening;
      view-timeline-axis: block;
    }
    /* Two animations on one element, so they have to be declared together: the scroll-driven
       depth the hero already had, and the lamp on the headline breathing on the clock. The
       breath grows the pool the letters are cut out of (home.css) and starts and ends at the
       size the page shows with no script, for the same reason the /services lamp does. */
    html.js:not(.motion-paused) .hero .headline {
      animation: home-title-depth linear both, home-lamp-breathe 9s ease-in-out infinite;
      animation-timeline: --home-opening, auto;
      animation-range: exit 0% exit 100%, normal;
    }
    html.js:not(.motion-paused) .hero-foot {
      animation: home-foot-depth linear both;
      animation-timeline: --home-opening;
      animation-range: exit 0% exit 100%;
    }
    html.js:not(.motion-paused) .chapter {
      view-timeline-name: --service-band;
      view-timeline-axis: block;
    }
    html.js:not(.motion-paused) .chapter::before {
      animation: home-band-light linear both;
      animation-timeline: --service-band;
      animation-range: entry 0% entry 100%;
    }
    html.js:not(.motion-paused) .shown-art {
      view-timeline-name: --fish-emergence;
      view-timeline-axis: block;
      timeline-scope: --fish-emergence;
    }
    html.js:not(.motion-paused) .shown-fish {
      animation: home-fish-emerge linear both;
      animation-timeline: --fish-emergence;
      animation-range: entry 0% entry 90%;
    }
    html.js:not(.motion-paused) .shown-leaders {
      animation: home-light-paths linear both;
      animation-timeline: --fish-emergence;
      animation-range: entry 35% entry 100%;
    }
    html.js:not(.motion-paused) .shown-leaders polyline {
      stroke-dashoffset: inherit;
    }
    html.js:not(.motion-paused) .belief {
      view-timeline-name: --hanging-lure;
      view-timeline-axis: block;
    }
    html.js:not(.motion-paused) .belief-lure {
      animation: home-lure-sway linear both;
      animation-timeline: --hanging-lure;
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes home-title-depth { to { transform: translateY(64px); } }
@keyframes home-lamp-breathe {
  from, to { background-size: 100% 100%; }
  50% { background-size: 116% 126%; }
}
@keyframes home-foot-depth { to { transform: translateY(24px); } }
@keyframes home-band-light { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes home-fish-emerge {
  from { clip-path: inset(0 0 0 100%); opacity: 0.15; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes home-light-paths { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes home-lure-sway {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}
@media (forced-colors: active) {
  .hero-service-index a { border-color: CanvasText; }
  .chapters .chapter { background: Canvas; }
}
@media print {
  .hero-service-index { display: none; }
  .chapters .chapter { background: none; }
  .why { padding-block: 0; }
}
/* The original mark as a live relief, the clear-water transition. */
.living-hero { position: relative; isolation: isolate; overflow: clip; background: #090907; min-height: 0; padding: 145px 6vw 32px; display: block; }
.living-hero-copy { position: relative; z-index: 2; max-width: 63%; pointer-events: none; }
.living-hero-copy a { pointer-events: auto; }
.living-hero .headline { --h1: clamp(60px, 7vw, 104px); line-height: .97; letter-spacing: -.02em; background-image: none; color: #eee9dd; -webkit-text-fill-color: #eee9dd; }
.living-hero .headline span { white-space: normal; }
.living-hero .hero-foot { display: block; margin-top: 26px; }
.living-hero .positioning { max-width: 29em; color: #e0d6c2; font-size: clamp(18px, 1.4vw, 21px); }
.living-hero .hero-actions { margin-top: 22px; }
.living-hero .pills { margin-top: 24px; }
.living-hero .sculpture-art { inset: 110px 2vw 32px 50%; }
.living-hero .live-viewport { inset: 0; }
.living-hero .logo-still { height: 100%; display: grid; place-items: center; }
.living-hero .logo-still .material-mark { width: min(100%, 65vh); }
.living-hero .sculpture-shade { background: linear-gradient(90deg, #09090770, transparent 24%); }
html.js .living-hero .headline, html.js .living-hero .hero-foot { animation: none; }
.living-gap { position: relative; isolation: isolate; overflow: clip; background: #090a09; view-timeline-name: --gap-arrival; view-timeline-axis: block; }
.gap-atmosphere { position: absolute; inset: 0; z-index: -1; }
.gap-atmosphere img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.gap-atmosphere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #090a09dc, #090a09b8), linear-gradient(0deg, #090a09, transparent 40%); }
.gap-atmosphere video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; opacity: 0; }
.gap-atmosphere video.video-ready { opacity: 1; }
.gap-atmosphere:has(video.video-ready) img { opacity: 0; }
.living-clarity { position: relative; background: #090a09; view-timeline-name: --clarity-arrival; view-timeline-axis: block; }
.living-clarity .shown-art { isolation: isolate; }
.clarity-murk { position: absolute; inset: -10%; z-index: 3; background: radial-gradient(ellipse at 83% 60%, transparent 2%, #090a09ce 37%, #090a09 75%); opacity: 0; pointer-events: none; }
@supports (animation-timeline: view()) {
  html.motion-ready:not(.motion-paused) .living-clarity .clarity-murk { animation: clarity-uncover 1s linear both; animation-timeline: --clarity-arrival; animation-range: entry 5% cover 55%; }
  html.motion-ready:not(.motion-paused) .living-clarity .dimensional-fish { animation: clarity-depth 1s linear both; animation-timeline: --clarity-arrival; animation-range: entry 5% cover 55%; }
}
@keyframes clarity-uncover { from { opacity: .94; translate: -3% 3%; } to { opacity: 0; translate: 5% -2%; } }
@keyframes clarity-depth { from { scale: .9; } to { scale: 1; } }
@media (max-width: 1050px) {
  .living-hero { padding-top: 145px; }
  .living-hero-copy { max-width: 67%; }
  .living-hero .headline { --h1: 7vw; }
}
@media (max-width: 700px) {
  body[data-view="home"] .site-header { position: relative; background: #090907; }
  .living-hero { padding: 286px 22px 28px; }
  .living-hero-copy { max-width: none; }
  .living-hero .headline { --h1: clamp(42px, 11.8vw, 70px); line-height: 1; }
  .living-hero .sculpture-art { inset: 0 20px auto; height: 270px; }
  .living-hero .logo-still .material-mark { width: 270px; max-width: 100%; }
  .living-hero .sculpture-shade { display: none; }
  .living-hero .hero-foot { margin-top: 22px; }
  .living-hero .positioning { font-size: 18px; }
  .living-hero .pills { gap: 8px; }
  .living-hero .pills li { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .living-gap *, .living-clarity * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .gap-atmosphere, .clarity-murk { display: none; }
  .living-hero, .living-gap, .living-clarity { color: CanvasText; background: Canvas; }
  .living-hero .headline { color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .living-hero { min-height: auto; padding-top: 140px; }
}
@media print {
  .living-hero, .living-gap, .living-clarity { background: white; color: black; min-height: 0; padding: 0; }
  .gap-atmosphere, .clarity-murk { display: none; }
  .living-hero-copy { max-width: none; }
  .living-hero .headline { color: black; -webkit-text-fill-color: black; font-size: 32pt; }
}
.gap-grid-content[data-astro-cid-pp3j7zix] {
  color: #eee9dd;
}

.gap-grid-intro[data-astro-cid-pp3j7zix] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 70px;
  align-items: end;
}

.gap-grid-label[data-astro-cid-pp3j7zix] {
  grid-column: 1 / -1;
  margin: 0 0 16px;
  color: #d6b87e;
  font-size: 15px;
}

.gap-grid-title[data-astro-cid-pp3j7zix] {
  margin: 0;
  font-size: clamp(40px, 4.4vw, 66px);
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.gap-grid-intro-copy[data-astro-cid-pp3j7zix] {
  max-width: 540px;
  margin: 0;
  color: #cecbbf;
  font-size: 17px;
  line-height: 1.6;
}

.gap-grid-items[data-astro-cid-pp3j7zix] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
  max-width: 1130px;
  margin: 45px 0 0;
  padding: 0;
  list-style: none;
}

.gap-grid-item[data-astro-cid-pp3j7zix] {
  padding: 24px 0;
  border-top: 1px solid #c5b38455;
}

.gap-grid-item-heading[data-astro-cid-pp3j7zix] {
  display: flex;
  gap: 15px;
  align-items: center;
}

.gap-grid-item-heading[data-astro-cid-pp3j7zix] svg {
  color: #d6b87e;
  flex-shrink: 0;
}

.gap-grid-item-heading[data-astro-cid-pp3j7zix] [data-astro-cid-pp3j7zix]:is(h2, h3) {
  margin: 0;
  font-size: 25px;
  font-weight: 550;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.gap-grid-body[data-astro-cid-pp3j7zix] {
  max-width: 55ch;
  margin: 15px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: #d2cec3;
}

.gap-grid-item[data-astro-cid-pp3j7zix]:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}

.gap-grid-item[data-astro-cid-pp3j7zix]:last-child .gap-grid-body[data-astro-cid-pp3j7zix] {
  margin-top: 0;
}

.gap-grid-closing[data-astro-cid-pp3j7zix] {
  max-width: 740px;
  margin-top: 22px;
}

.gap-grid-takeaway[data-astro-cid-pp3j7zix] {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -.02em;
  font-weight: 500;
}

.gap-grid-context[data-astro-cid-pp3j7zix] {
  margin: 0;
  color: #c6c5bb;
  font-size: 16px;
  line-height: 1.65;
}

@media (width <= 700px) {
  .gap-grid-intro[data-astro-cid-pp3j7zix], .gap-grid-items[data-astro-cid-pp3j7zix], .gap-grid-item[data-astro-cid-pp3j7zix]:last-child {
    display: block;
  }

  .gap-grid-title[data-astro-cid-pp3j7zix] {
    font-size: 45px;
  }

  .gap-grid-intro-copy[data-astro-cid-pp3j7zix] {
    margin-top: 20px;
    font-size: 16px;
  }

  .gap-grid-items[data-astro-cid-pp3j7zix] {
    margin-top: 30px;
  }

  .gap-grid-item-heading[data-astro-cid-pp3j7zix] [data-astro-cid-pp3j7zix]:is(h2, h3) {
    font-size: 22px;
  }

  .gap-grid-body[data-astro-cid-pp3j7zix] {
    font-size: 16px;
  }

  .gap-grid-item[data-astro-cid-pp3j7zix]:last-child .gap-grid-body[data-astro-cid-pp3j7zix] {
    margin-top: 15px;
  }

  .gap-grid-takeaway[data-astro-cid-pp3j7zix] {
    font-size: 21px;
  }

  .gap-grid-takeaway[data-astro-cid-pp3j7zix] br[data-astro-cid-pp3j7zix] {
    display: none;
  }
}

@media (forced-colors: active) {
  .gap-grid-content[data-astro-cid-pp3j7zix], .gap-grid-content[data-astro-cid-pp3j7zix] p[data-astro-cid-pp3j7zix], .gap-grid-item-heading[data-astro-cid-pp3j7zix] svg {
    color: canvastext;
  }

  .gap-grid-item[data-astro-cid-pp3j7zix] {
    border-color: canvastext;
  }
}

@media print {
  .gap-grid-content[data-astro-cid-pp3j7zix], .gap-grid-content[data-astro-cid-pp3j7zix] p[data-astro-cid-pp3j7zix], .gap-grid-item-heading[data-astro-cid-pp3j7zix] svg {
    color: #000;
  }

  .gap-grid-item[data-astro-cid-pp3j7zix] {
    break-inside: avoid;
  }
}
/* Home: retain the lurking scene and leaders, give the foreground fish actual material. */
.shown:has(.is-dimensional) { isolation: isolate; }
 .dimensional-fish { position: absolute; inset: 0; z-index: 1; overflow: clip; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 88%, transparent); }
.dimensional-fish img {
  display: block; position: absolute; width: 150%; max-width: none; height: 100%; left: -40%; top: 0;
  object-fit: contain; mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 66% 46% at 58% 50%, #000 54%, transparent 98%);
}
.is-dimensional .shown-drawing { pointer-events: none; z-index: 2; }
.is-dimensional .shown-glow { opacity: .35; left:84.1%; top:61.1%; }
.shown:has(.is-dimensional) .reason:hover .reason-dot { transform: scale(1.35); }

@media print, (forced-colors:active) { .dimensional-fish { display:none!important; } }
/* One open folio: identification at left, qualifications at right, documents below. */
.company-folio .sec-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 32px;
}
.company-folio .folio-intro {
  max-width: 42ch;
  margin: 0;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.65;
}
.folio {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border: 1px solid #55432b;
  border-radius: 4px;
  background: #100e0a;
  box-shadow: 0 24px 70px #0005;
}
.folio::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dd9a33 20%, #f1d4a2 46%, #79531f 65%, transparent);
  pointer-events: none;
}
.folio dl, .folio dd { margin: 0; }
.folio dt {
  color: #b7aa93;
  font-size: .875rem;
  line-height: 1.5;
  font-weight: 500;
}
.folio-identity {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 54px;
  padding: clamp(28px, 4vw, 58px);
  border-right: 1px solid #55432b;
  background: radial-gradient(ellipse at 12% 0%, #dd9a331c, transparent 65%), linear-gradient(115deg, #ffffff03, transparent 60%);
}
.folio .folio-code dd {
  margin-top: 18px;
  color: #efe9dc;
  font-family: var(--font-data);
  font-size: clamp(3.5rem, 6.6vw, 6.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.075em;
  text-shadow: 0 2px 0 #000;
}
.folio-certification {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid #55432b;
}
.folio-certification img {
  width: 70px;
  height: auto;
  flex: 0 0 auto;
  padding: 7px;
  background: #fff;
  border-radius: 2px;
}
.folio-certification dd {
  max-width: 19ch;
  margin-top: 8px;
  color: var(--text);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  font-weight: 550;
}
.folio-details { padding: clamp(28px, 4vw, 58px); }
.folio-clearance dt { display: flex; align-items: center; gap: 10px; }
.folio-clearance dd {
  margin-top: 14px;
  color: var(--text);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 550;
  line-height: 1.3;
}
.folio-group { margin-top: 30px; padding-top: 24px; border-top: 1px solid #413b31; }
.folio-group ul { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 14px 0 0; }
.folio-group li { color: var(--text); font-size: 1.125rem; line-height: 1.5; }
.folio-naics ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.folio-naics li { font-family: var(--font-data); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.folio-documents { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr; border-top: 1px solid #55432b; }
.folio-documents a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 22px clamp(28px, 4vw, 58px);
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: #8e7757;
  text-underline-offset: 5px;
  transition: background .2s;
}
.folio-documents a + a { border-left: 1px solid #55432b; }
.folio-documents a > :last-child { margin-left: auto; flex-shrink: 0; }
.folio-documents a:hover { background: #dd9a3312; text-decoration-color: var(--amber); }
.folio-documents a:focus-visible { outline: 2px solid var(--amber); outline-offset: -6px; }
@media (max-width: 1000px) {
  .company-folio .sec-head { display: block; }
  .company-folio .folio-intro { margin-top: 22px; max-width: 55ch; }
  .folio-naics ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .folio { grid-template-columns: minmax(0, 1fr); }
  .folio-identity { gap: 32px; border-right: 0; border-bottom: 1px solid #55432b; }
  .folio .folio-code dd { font-size: clamp(3.5rem, 15vw, 6.5rem); }
  .folio-certification img { width: 58px; }
  .folio-certification { gap: 20px; }
  .folio-details { padding-block: 32px; }
  .folio-naics ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .folio-naics li { font-size: .875rem; }
  .folio-documents { grid-template-columns: minmax(0, 1fr); }
  .folio-documents a { min-height: 80px; gap: 12px; }
  .folio-documents a + a { border-left: 0; border-top: 1px solid #55432b; }
}
@media (max-width: 359px) {
  .folio-naics ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .folio-documents a { transition: none; }
}
@media (forced-colors: active) {
  .folio, .folio-identity { background: Canvas; box-shadow: none; }
  .folio::before { display: none; }
  .folio, .folio * { border-color: CanvasText; }
  .folio-certification img { forced-color-adjust: none; }
}
@media print {
  .folio { display: block; background: white; color: black; box-shadow: none; border: 1px solid #777; }
  .folio::before { display: none; }
  .folio-identity { background: white; border-right: 0; gap: 24px; }
  .folio-identity, .folio-details { padding: 20px; }
  .folio dt, .folio dd, .folio li, .folio-documents a, .company-folio .folio-intro { color: black; text-shadow: none; }
  .folio .folio-code dd { color: black; font-size: 36pt; }
  .folio-group, .folio-certification, .folio-clearance { break-inside: avoid; }
}
.contact-light {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 68svh, 720px);
  overflow: clip;
  padding-block: clamp(64px, 6vw, 96px);
  background: #080907;
  color: #eee9dd;
  scroll-margin-top: 100px;
  view-timeline: --contact-light-view block;
}

.contact-light-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.contact-light-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080907fa 0%, #080907eb 34%, #080907a6 49%, transparent 66%),
    linear-gradient(0deg, #080907, transparent 20%, transparent 88%, #08090799);
}

.contact-light-camera {
  position: absolute;
  top: 50%;
  right: 0;
  width: max(100%, 1360px);
  aspect-ratio: 1.8;
  translate: 0 -50%;
  transform-origin: 74% 73%;
}

.contact-light-drift,
.contact-light-sculpture { position: relative; width: 100%; height: 100%; }
.contact-light-drift { transform-origin: 78% 0; }
.contact-light-sculpture img { display: block; width: 100%; height: 100%; }
.contact-light-bulb,
.contact-light-rake { position: absolute; pointer-events: none; }

.contact-light-bulb {
  left: 74%;
  top: 73%;
  width: 20%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd99580 0%, #e398312b 24%, #c9761810 44%, transparent 67%);
  mix-blend-mode: screen;
  opacity: .38;
}

.contact-light-rake {
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at var(--surface-light-x, 74%) var(--surface-light-y, 50%), #edbd7359, transparent 44%);
  mask-image: radial-gradient(ellipse 25% 60% at 75% 48%, #000 30%, transparent 100%);
  mix-blend-mode: screen;
}

.contact-light-wrap { position: relative; z-index: 1; width: 100%; }
.contact-light-content { max-width: 49%; }
.contact-light-title {
  margin: 0 0 34px;
  color: #eee9dd;
  font-family: var(--font-display);
  font-size: clamp(64px, 8.2vw, 112px);
  font-stretch: 66%;
  font-weight: 850;
  font-style: italic;
  line-height: .96;
  letter-spacing: -.025em;
}

.contact-light-reach { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.contact-light .contact-light-email {
  display: inline-block;
  max-width: 100%;
  padding-block: 9px;
  color: #eee9dd;
  font-size: clamp(19px, 2.25vw, 32px);
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-decoration-color: #d4ad67;
  text-underline-offset: 7px;
}

.contact-light .contact-light-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #eee9dd;
  font-size: clamp(18px, 1.6vw, 23px);
  text-underline-offset: 5px;
}

.contact-light-parent { max-width: 29em; margin: 28px 0 0; color: #c7beb0; font-size: 1rem; line-height: 1.55; }
.contact-light-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; }
.contact-light-actions:empty { display: none; }
.contact-light-actions > a:not(.button-primary) { color: #eee9dd; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 6px; }
.contact-light :focus-visible { outline: 2px solid #ffd28c; outline-offset: 6px; }
.contact-light-intro { max-width: 11em; margin: 0 0 48px; font-size: clamp(30px, 4.1vw, 58px); line-height: 1.1; letter-spacing: -.025em; font-weight: 600; }

html.motion-ready:not(.motion-paused) .contact-light-drift { animation: contact-light-drift 10s ease-in-out infinite alternate; }
html.motion-ready:not(.motion-paused) .contact-light-bulb { animation: contact-light-breathe 9s ease-in-out infinite alternate; }
html.motion-ready:not(.motion-paused) .contact-light-sculpture {
  transform: translate(calc(var(--surface-x, 0) * 9px), calc(var(--surface-y, 0) * 5px));
  transition: transform 650ms ease-out;
}
html.motion-ready:not(.motion-paused) .contact-light-rake { opacity: .42; transition: opacity 650ms ease-out; }
html.motion-ready:not(.motion-paused) .contact-light:focus-within .contact-light-rake { opacity: .7; }

.contact-light:not(.material-in-view) .contact-light-drift,
.contact-light:not(.material-in-view) .contact-light-bulb,
html.motion-hidden .contact-light-drift,
html.motion-hidden .contact-light-bulb { animation-play-state: paused !important; }

@keyframes contact-light-drift {
  from { transform: translateY(-5px) rotate(-.35deg); }
  to { transform: translateY(6px) rotate(.35deg); }
}
@keyframes contact-light-breathe {
  from { opacity: .24; scale: .94; }
  to { opacity: .52; scale: 1.06; }
}
@keyframes contact-light-framing {
  from { transform: translateY(24px) scale(1.06); }
  to { transform: translateY(-16px) scale(1); }
}
@supports (animation-timeline: view()) {
  html.motion-ready:not(.motion-paused) .contact-light-camera {
    animation: contact-light-framing 1s linear both;
    animation-timeline: --contact-light-view;
    animation-range: entry 0% exit 80%;
  }
}

@media (max-width: 900px) {
  .contact-light { min-height: 0; padding-block: 280px 56px; scroll-margin-top: 76px; }
  .contact-light-art { bottom: auto; height: 400px; }
  .contact-light-camera { top: -35px; right: -4%; width: 680px; translate: none; }
  .contact-light-art::after { background: linear-gradient(0deg, #080907 0%, #080907e6 11%, transparent 48%); }
  .contact-light-content { max-width: 100%; }
  .contact-light-title { margin-bottom: 26px; font-size: clamp(56px, 12vw, 86px); }
  .contact-light .contact-light-email { font-size: clamp(18px, 4.7vw, 28px); }
  .contact-light-parent { font-size: .9375rem; }
  .contact-light-intro { font-size: clamp(32px, 7vw, 48px); margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-light *, .contact-light *::before, .contact-light *::after { animation: none !important; transition: none !important; }
  .contact-light-camera, .contact-light-drift, .contact-light-sculpture { transform: none !important; }
  .contact-light-rake { display: none; }
}
@media (forced-colors: active) {
  .contact-light { min-height: 0; padding-block: 56px; background: Canvas; color: CanvasText; }
  .contact-light-art { display: none; }
  .contact-light-content { max-width: 100%; }
  .contact-light-title, .contact-light-parent { color: CanvasText; }
  .contact-light .contact-light-email, .contact-light .contact-light-phone { color: LinkText; }
}
@media print {
  .contact-light *, .contact-light *::before, .contact-light *::after { animation: none !important; transition: none !important; }
  .contact-light { display: block; min-height: 0; padding: 6mm 0; overflow: visible; background: none; color: #000; }
  .contact-light-art, .contact-light-actions { display: none; }
  .contact-light-content { max-width: none; }
  .contact-light-title { margin-bottom: 3mm; color: #000; font-size: 22pt; }
  .contact-light .contact-light-email, .contact-light .contact-light-phone { min-height: 0; padding: 0; font-size: 11pt; color: #000; }
  .contact-light-reach { gap: 2mm; }
  .contact-light-parent { margin-top: 3mm; color: #000; font-size: 10pt; }
}