/* ══════════════════════════════════════════════════════════════════
   Unitech — about.
   Ported from the Claude Design file `Unitech - About (standalone)`:
   masthead · section rail · 01 lens · 02 field · 03 process ·
   04 layers · 05 belief · next step.

   The source sizes almost everything with clamp() rather than at
   breakpoints, so those clamps are carried over verbatim and the
   media queries at the bottom only handle what clamping cannot.
   ══════════════════════════════════════════════════════════════════ */

/* the anchors have to clear the header and the rail stuck above them */
html { scroll-padding-top: 132px; }

/* Shared by every band on this page — the source runs a single
   clamped rhythm rather than the homepage's fixed one. */
.alt__inner {
  padding-top: clamp(52px, 6vw, 80px);
  padding-bottom: clamp(52px, 6vw, 80px);
}
.alt-title {
  font-size: clamp(25px, 3.1vw, 41px);
  line-height: 1.32;
}

/* A heading and its detail side by side; the detail column is the
   wider of the two and both fall to full width when they run out. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 24px;
  align-items: flex-start;
}
.split__aside { flex: 1 1 330px; min-width: 0; }
.split__main  { flex: 1.3 1 420px; min-width: 0; }

/* the sentence each section rests on, against a red rule */
.pullquote {
  margin-top: 26px;
  padding-right: 18px;
  border-right: 3px solid var(--red);
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: var(--fw-bold);
  line-height: 1.75;
  color: var(--txs);
}
.pullquote--sm {
  margin-top: 24px;
  padding-right: 16px;
  font-size: 15.5px;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════
   MASTHEAD
   ══════════════════════════════════════════════════════════════════ */
.amast {
  position: relative;
  overflow: hidden;
  background: var(--amastBg);
  border-bottom: 1px solid var(--bd);
}
.amast__stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* graph paper, faded away from the headline's corner */
.amast__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--heroGridLine) 1px, transparent 1px),
    linear-gradient(270deg, var(--heroGridLine) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(86% 78% at 74% 26%, #000 0%, #0000 74%);
  mask-image: radial-gradient(86% 78% at 74% 26%, #000 0%, #0000 74%);
}
.amast__glow {
  position: absolute;
  width: 45%;
  height: 150%;
  border-radius: 50%;
  filter: blur(130px);
}
.amast__glow--red  { top: -34%; right: -8%; background: #E31F2612; }
.amast__glow--navy { bottom: -46%; left: -10%; background: #1B3A6A12; }

.amast__inner {
  position: relative;
  padding-top: clamp(60px, 8vw, 116px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
.amast__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--amastPill);
  border: 1px solid var(--bd);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  box-shadow: 0 1px 2px #32325d14;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--txs);
  animation: ut-rise .8s var(--ease) both;
}
.amast__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

/* the red rule runs the full height of the headline block */
.amast__lede {
  margin-top: clamp(22px, 2.8vw, 34px);
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 26px);
}
.amast__bar {
  flex-shrink: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--red) 0%, #E31F2600 92%);
  animation: ut-rise .8s var(--ease) .06s both;
}
.amast__text { min-width: 0; }
.amast__title {
  margin: 0;
  max-width: min(100%, 780px);
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.24;
  font-weight: var(--fw-black);
  letter-spacing: -0.035em;
  color: var(--txs);
  text-wrap: balance;
  animation: ut-rise .9s var(--ease) .1s both;
}
.amast__title span { color: var(--red); white-space: nowrap; }
.amast__sub {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  max-width: 640px;
  font-size: clamp(14.5px, 1.3vw, 17px);
  line-height: var(--lh-body);
  color: var(--tx);
  text-wrap: pretty;
  animation: ut-rise .9s var(--ease) .22s both;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION RAIL — sticks under the header, which shrinks on scroll,
   so its offset follows the header's own state rather than a
   hard-coded height.
   ══════════════════════════════════════════════════════════════════ */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 70;
  background: var(--nav);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd);
  transition: top .25s var(--ease);
}
.site-header.is-stuck ~ main .subnav { top: var(--nav-h-stuck); }

.subnav__inner {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__gap { flex: 1 1 auto; }

.subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--txm);
  white-space: nowrap;
  transition: color .22s ease, background .22s ease,
              border-color .22s ease, box-shadow .22s ease;
}
.subnav__link:hover { color: var(--txs); }
.subnav__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ring);
  flex-shrink: 0;
  transition: background .22s ease;
}
.subnav__link.is-here {
  color: var(--txs);
  background: var(--cardh);
  border-color: var(--bd2);
  box-shadow: 0 1px 2px #32325d1f;
}
.subnav__link.is-here .subnav__dot { background: var(--red); }

.subnav__cta {
  flex-shrink: 0;
  padding: 8px 4px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--eyebrow);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   01 · LENS — the eight layers that move together
   ══════════════════════════════════════════════════════════════════ */
.lens__lead { margin-top: 20px; font-size: clamp(14.5px, 1.25vw, 16.5px); }
.lens__note { margin-top: 14px; font-size: 14.5px; }
.lens__pull { margin-top: 26px; }

.domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: 10px;
}
.domain {
  background: var(--cardh);
  border: 1px solid var(--bdw);
  border-radius: var(--radius-12);
  padding: 14px 15px 15px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.domain:hover {
  border-color: var(--badge-bd);
  box-shadow: 0 12px 24px -14px #32325d59;
  transform: translateY(-2px);
}
.domain__code {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--codeTx);
}
.domain__name {
  margin-top: 8px;
  font-size: 15.5px;
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--txs);
}
/* the rule lengthens and deepens down the list */
.domain__rule {
  display: block;
  margin-top: 12px;
  height: 3px;
  width: var(--w, 26px);
  border-radius: 2px;
  background: var(--red);
  opacity: var(--a, 100%);
}

/* ══════════════════════════════════════════════════════════════════
   02 · FIELD — where the experience came from
   ══════════════════════════════════════════════════════════════════ */
.field__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 48px);
  margin-top: 22px;
}
.field__head .sec-title { flex: 1 1 380px; margin: 0; }
.field__head .sec-lead  { flex: 1 1 300px; margin: 0; font-size: clamp(14.5px, 1.25vw, 16.5px); }

.grounds {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
/* The photo is painted on the element, so a file that has not been
   exported yet reads as a colour block rather than a broken image. */
.ground {
  position: relative;
  margin: 0;
  height: clamp(180px, 19vw, 236px);
  border-radius: var(--radius-14);
  overflow: hidden;
  border: 1px solid var(--bd);
  background: var(--navy-ink);
  box-shadow: var(--cardShadow);
}
.ground__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.02);
  transition: transform .6s var(--ease);
}
.ground:hover .ground__shot { transform: scale(1.07); }
.ground__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #07172B0F 0%, #07172B33 46%, #07172BEB 100%);
}
.ground__cap {
  position: absolute;
  right: 15px; left: 15px; bottom: 14px;
  pointer-events: none;
}
.ground__mark {
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}
.ground__name {
  display: block;
  margin-top: 9px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.55;
  color: var(--white);
}

/* what a delivered project has to keep being */
.qualities {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--bd2);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}
.qualities__lede { flex: 1 1 340px; min-width: 0; }
.qualities__claim {
  font-size: clamp(17px, 1.7vw, 19px);
  font-weight: var(--fw-bold);
  line-height: 1.75;
  color: var(--txs);
  text-wrap: pretty;
}
.qualities__note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--txm);
}
.qualities__grid {
  flex: 1 1 380px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 18px 14px;
}
.quality {
  padding-top: 13px;
  border-top: 2px solid var(--red);
  /* the rule is the only thing that deepens, so the tint rides on it */
  border-top-color: color-mix(in srgb, var(--red) var(--a, 100%), transparent);
}
.quality__code {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--codeTxm);
}
.quality:last-child .quality__code { color: var(--eyebrow); }
.quality__name {
  margin-top: 7px;
  font-size: 15.5px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--txs);
}

/* ══════════════════════════════════════════════════════════════════
   03 · PROCESS — three stages on one line
   ══════════════════════════════════════════════════════════════════ */
.process__title { margin: 22px 0 0; max-width: 880px; }
.process__lead  { margin: 16px 0 0; max-width: 780px; font-size: clamp(14.5px, 1.25vw, 16.5px); }

.track {
  position: relative;
  margin-top: 40px;
}
.track__line,
.track__fill {
  position: absolute;
  top: 20px;
  height: 2px;
}
.track__line { right: 0; left: 0; background: var(--bdw); }
.track__fill {
  right: 0;
  width: 100%;
  background: linear-gradient(270deg, var(--nvy), var(--red));
  transform-origin: right center;
  animation: ut-bar 1.1s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .track__fill { animation: none; }
}

.track__stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.stage { min-width: 0; }
.stage__dot-row { display: flex; justify-content: center; }
.stage__dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--fw-black);
  color: var(--white);
  /* the ring punches the dot out of the connecting line */
  box-shadow: 0 0 0 6px var(--s1-solid);
}
.stage__dot--1 { background: #E31F26; }
.stage__dot--2 { background: #9E2A46; }
.stage__dot--3 { background: #1B3A6A; }

.stage__card {
  margin-top: 16px;
  box-sizing: border-box;
  background: var(--cardh);
  border: 1px solid var(--bd);
  border-radius: var(--radius-14);
  box-shadow: 0 2px 5px -1px #32325d14;
  padding: 20px 20px 22px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.stage__card:hover {
  border-color: var(--badge-bd);
  box-shadow: 0 14px 30px -18px #32325d80;
  transform: translateY(-3px);
}
.stage__title {
  font-size: clamp(16px, 1.6vw, 18.5px);
  font-weight: var(--fw-bold);
  line-height: 1.55;
  color: var(--txs);
}
.stage__body {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--tx);
}

/* what every executable path is written down as */
.written {
  margin-top: 28px;
  background: var(--chip);
  border: 1px solid var(--bd);
  border-radius: var(--radius-14);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.written__label {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--eyebrow);
  white-space: nowrap;
}
.written__sep {
  width: 1px;
  height: 20px;
  background: var(--bd2);
}
.written__list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.written__item {
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: var(--badge-tx);
  background: var(--badge-bg);
  border: 1px solid var(--badge-bd);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* ══════════════════════════════════════════════════════════════════
   04 · LAYERS — six rows, each reaching further than the last
   ══════════════════════════════════════════════════════════════════ */
.layers__pull { margin-top: 24px; }

.lrow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) clamp(56px, 9vw, 108px);
  align-items: center;
  gap: 14px;
  padding: 13px 10px 13px 12px;
  border-radius: var(--radius-10);
  border-bottom: 1px solid var(--lrowBd);
  transition: background .25s ease, box-shadow .25s ease;
}
.lrow:hover {
  background: var(--cardh);
  box-shadow: 0 8px 20px -14px #32325d80;
}
.lrow--last { border-bottom-color: var(--bd2); }
.lrow__code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--codeTx);
}
.lrow--last .lrow__code { color: var(--eyebrow); }
.lrow__name {
  font-size: clamp(14px, 1.35vw, 15.5px);
  font-weight: var(--fw-bold);
  line-height: 1.65;
  color: var(--txs);
}
/* the bar grows out of the right edge of its cell */
.lrow__bar {
  display: block;
  height: 3px;
  width: var(--w, 100%);
  margin-right: auto;
  border-radius: 2px;
  background: var(--red);
  opacity: var(--a, 100%);
  transform-origin: right center;
  animation: ut-bar .9s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .lrow__bar { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   05 · BELIEF — the navy band the page closes its argument on
   ══════════════════════════════════════════════════════════════════ */
.belief {
  position: relative;
  overflow: hidden;
  background: var(--navy-ink);
}
.belief__stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.belief__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .13;
  filter: grayscale(.5);
}
.belief__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0A2540E6 0%, #0A2540F2 60%, #0A2540 100%);
}
.belief__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#FFFFFF0A 1px, transparent 1px),
    linear-gradient(270deg, #FFFFFF0A 1px, transparent 1px);
  background-size: 56px 56px;
}
.belief__glow {
  position: absolute;
  top: -40%; left: -8%;
  width: 46%;
  height: 160%;
  border-radius: 50%;
  filter: blur(120px);
  background: #E31F261A;
}

.belief__inner {
  position: relative;
  padding-top: clamp(34px, 4vw, 54px);
  padding-bottom: clamp(34px, 4vw, 54px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
}
.belief__aside { flex: 1 1 300px; min-width: 0; }
.belief__title {
  margin: 14px 0 0;
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.4;
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-h2);
  color: var(--deepTxs);
  text-wrap: pretty;
}
.belief__lead {
  margin: 10px 0 0;
  max-width: 460px;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  color: #A8BAD4;
}

.belief__list {
  flex: 1.1 1 380px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
}
.outcome {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 4px 16px;
  border-left: 1px solid #FFFFFF1F;
}
.outcome--last { padding-left: 0; border-left: 0; }
.outcome__mark {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--red);
  opacity: var(--a, 100%);
}
.outcome span {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--deepTxs);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   Responsive — the clamps above carry most of it; these are the
   compositions clamping cannot express.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  html { scroll-padding-top: 118px; }

  /* the connecting line means nothing once the stages stack */
  .track__line, .track__fill { display: none; }
  .stage__dot-row { justify-content: flex-start; }

  .written { padding: 18px 18px; gap: 12px; }
  .written__sep { display: none; }
}

@media (max-width: 620px) {
  .qualities { margin-top: 30px; }
  /* the last chip keeps its divider off, the rest lose theirs on wrap */
  .outcome { padding: 4px 12px 4px 0; border-left: 0; }
}