/* Beers Labs: a port of the Anduril layout system. Numbers are in DESIGN-NOTES-ANDURIL.md. Mobile first. */
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/inter-tight-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --black: #000; --ink: #0b0b0a; --bone: #f0efe9; --mist: #d7d8d3; --stone: #8b908e; --field: #4b5142; --brass: #e0b24a; --white: #fff;
  --line-dark: rgba(255, 255, 255, .28); --line-light: rgba(11, 11, 10, .28);
  /* bright edges: a white hairline on dark and mid grounds; on light grounds a white inner line plus a dark outer ring and a soft lift */
  --edge-dark: rgba(255, 255, 255, .8); --edge-dark-hover: rgba(255, 255, 255, .98);
  --edge-light: rgba(255, 255, 255, .95);
  --edge-ring: rgba(11, 11, 10, .5);
  --edge-shadow: 0 0 0 1px var(--edge-ring), 0 16px 34px -18px rgba(11, 11, 10, .6);
  --m: 1.428rem; --gap: 1.25rem; --tile-gap: .357rem; --hdr: 3.75rem;
  --t-display: 4rem; --t-feature: 2.43rem; --t-h1: 2.43rem; --t-h2: 2.286rem; --t-h3: 1.93rem; --t-card: 1.714rem;
  --t-lead: 1.286rem; --t-body: 1.143rem; --t-small: 1.071rem; --t-eyebrow: .929rem;
  --expo: cubic-bezier(.19, 1, .22, 1); --cubic: cubic-bezier(.215, .61, .355, 1);
}
@media (min-width: 769px) {
  :root { --m: 2rem; --gap: 1.125rem; --tile-gap: 1.125rem; --hdr: 4.4375rem;
    --t-display: 8rem; --t-feature: 3.5rem; --t-h1: 3.5rem; --t-h2: 2.5rem; --t-h3: 2rem; --t-card: 1.5rem;
    --t-lead: 1.125rem; --t-body: 1.05rem; --t-small: .938rem; --t-eyebrow: .75rem; }
}
html { font-size: 14px; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (min-width: 1280px) { html { font-size: 16px; } }
@media (min-width: 1920px) { html { font-size: 18px; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; font-size: var(--t-body); line-height: 1.25; letter-spacing: -.0085em;
  font-feature-settings: "ss01" 0; color: var(--ink); background: var(--bone); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.dark { background: var(--black); color: var(--white); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 100; background: var(--brass); color: var(--black); padding: .6rem 1rem; }
.skip:focus { top: .6rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type roles */
.eyebrow { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.t-display { font-size: var(--t-display); font-weight: 500; line-height: .8; letter-spacing: -.019em; text-transform: uppercase; }
.t-feature { font-size: var(--t-feature); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.t-h1 { font-size: var(--t-h1); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.t-h2 { font-size: var(--t-h2); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.t-h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.t-card { font-size: var(--t-card); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.t-lead { font-size: var(--t-lead); line-height: 1.3; }
.t-small { font-size: var(--t-small); line-height: 1.25; letter-spacing: -.01em; }
.t-strong { font-weight: 500; }
@media (min-width: 769px) { .t-display { line-height: .9; } }

/* links: text plus arrow, underline grows on hover */
.lnk { display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-small); line-height: 1.2; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size .5s var(--cubic); }
.lnk svg { width: .72em; height: .72em; flex: none; transition: transform .3s ease-out; }
.lnk:hover { background-size: 0 1px; }
.lnk:hover svg { transform: translate(2px, -2px); }
.lnk-plain { background-size: 0 1px; }
.lnk-plain:hover { background-size: 100% 1px; }

/* grid */
.wrap { padding-left: var(--m); padding-right: var(--m); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.g12 > * { grid-column: 1 / -1; min-width: 0; }
.hair { height: 1px; background: currentColor; opacity: .3; transform-origin: left; }

/* header */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); color: var(--ink); transition: transform .5s var(--cubic), background-color .3s ease-out, color .3s ease-out; }
.dark .hd { color: var(--white); }
.hd-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.hd.solid { background: var(--bone); }
.dark .hd.solid { background: var(--black); }
.hd.hide { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.brand-mark { width: 1.05rem; height: 1.05rem; flex: none; }
.hd-nav, .hd-right { display: none; }
.hd-nav a, .hd-right a { font-size: var(--t-small); line-height: 1.2; padding: .3rem 0; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .5s var(--cubic); }
.hd-nav a:hover, .hd-right a:hover, .hd-nav a[aria-current="page"] { background-size: 100% 1px; }
.hd-menu { background: none; border: 0; padding: .6rem 0 .6rem .6rem; cursor: pointer; display: inline-flex; flex-direction: column; gap: 6px; }
.hd-menu span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--cubic); }
.hd-menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.hd-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 49; background: var(--black); color: var(--white); padding: calc(var(--hdr) + 2rem) var(--m) 2rem; display: none; flex-direction: column; gap: 2.5rem; overflow-y: auto; }
.menu.open { display: flex; }
.menu-open .hd { color: var(--white); background: var(--black); transform: none; }
.menu ul { display: grid; gap: .9rem; }
.menu a { font-size: 1.643rem; line-height: 1.3; letter-spacing: -.01em; }
.menu .eyebrow { opacity: .6; margin-bottom: .2rem; }
@media (min-width: 1024px) {
  .hd-menu, .menu { display: none !important; }
  .hd-nav { display: flex; gap: 2.7rem; position: absolute; left: 50%; transform: translateX(-50%); }
  .hd-right { display: flex; gap: 2.7rem; }
}

/* home hero: ambient real-work loop, inset by the page margins on desktop */
.hero { position: relative; height: calc(100svh - 2.4rem); min-height: 34rem; background: var(--black); color: var(--white); }
.hero-media { position: absolute; inset: 0; overflow: hidden; background: #0d0e0e; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .72) 30%, rgba(0, 0, 0, .15) 62%, rgba(0, 0, 0, .35) 100%); }
.hero-copy { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: 1.6rem; display: grid; gap: 1.4rem; }
.hero-copy h1 { max-width: 15em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: block; }
@media (min-width: 769px) {
  .hero { height: 100svh; min-height: 40rem; }
  .hero-media { inset: var(--hdr) var(--m) 2.25rem; }
  .hero-copy { left: calc(var(--m) * 2); right: calc(var(--m) * 2); bottom: calc(2.25rem + 2rem); grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .hero-copy .hero-title { grid-column: 1 / 9; }
  .hero-copy .hero-meta { grid-column: 9 / -1; justify-content: flex-end; }
  .hero-copy h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.05; letter-spacing: -.02em; }
}
.hero-title .eyebrow { margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; }
.dot { width: .5rem; height: .5rem; background: var(--brass); flex: none; }

.media { overflow: hidden; background: #1a1b1b; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }

/* work tiles */
.tiles { display: grid; gap: var(--tile-gap); margin: var(--tile-gap) var(--m) 0; }
.tile { position: relative; display: block; overflow: hidden; color: var(--white); background: #161717; }
.tile::before { content: ""; display: block; padding-top: 100%; }
.tile > .media { position: absolute; inset: 0; }
.tile > .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .3) 34%, rgba(0, 0, 0, 0) 58%); }
.tile .media img, .tile .media video { transition: transform .6s var(--cubic); object-position: center top; }
.tile:hover .media img, .tile:hover .media video { transform: scale(1.05); }
.tile-copy { position: absolute; left: 1.125rem; right: 3rem; bottom: 1.125rem; z-index: 1; display: grid; gap: .35rem; }
.tile-arrow { position: absolute; right: 1.125rem; bottom: 1.2rem; z-index: 1; width: .85rem; height: .85rem; transition: transform .3s ease-out; }
.tile:hover .tile-arrow { transform: translate(3px, -3px); }
.tile.text { background: var(--field); }
.tile.text .tile-copy { top: 1.125rem; bottom: 1.125rem; align-content: space-between; right: 1.125rem; }
.tiles-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 4rem var(--m) 1.5rem; }
@media (min-width: 769px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile.w2 { grid-column: span 2; }
  .tile.w2::before { display: none; }
  .tiles-head { padding-top: 6rem; }
}

/* track rows: full-bleed bands, title left, media right */
.trow { padding: 2.25rem 0 2.6rem; }
.trow.black { background: var(--black); color: var(--white); }
.trow.stone { background: var(--stone); color: var(--ink); }
.trow.field { background: var(--field); color: var(--white); }
.trow .g12 { row-gap: 1.8rem; }
.trow-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.trow-copy .desc { display: grid; gap: 1rem; max-width: 26rem; }
.trow-media { position: relative; }
.trow-media::before { content: ""; display: block; padding-top: 42%; }
.trow-media .media { position: absolute; inset: 0; }
.trow + .trow { border-top: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 769px) {
  .trow { padding: 3rem 0; }
  .trow-copy { grid-column: 1 / 6 !important; }
  .trow-media { grid-column: 6 / -1 !important; }
  .trow-media::before { padding-top: 34%; }
}

/* light sections */
.band { padding: 4rem 0; }
.band.bone { background: var(--bone); color: var(--ink); }
.band.mist { background: var(--mist); color: var(--ink); }
.band.black { background: var(--black); color: var(--white); }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-light); }
.black .band-head, .dark .band-head { border-color: var(--line-dark); }
@media (min-width: 769px) { .band { padding: 3rem 0 5rem; } .band-head { padding-bottom: 2rem; } }

/* data list rows */
.drows { display: grid; }
.drow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-light); }
.black .drow, .dark .drow { border-color: var(--line-dark); }
.drow dt, .drow .k { opacity: .62; }
.drow dd small { display: block; opacity: .62; margin-top: .25rem; font-size: var(--t-small); }
.split { row-gap: 2rem; padding-top: 2rem; }
@media (min-width: 769px) {
  .split > .a { grid-column: 1 / 6; }
  .split > .b { grid-column: 7 / -1; }
}

/* page hero (inner pages) */
.phero { min-height: min(63svh, 37rem); padding-top: calc(var(--hdr) + 5.5rem); padding-bottom: 2.2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
.phero h1 { max-width: 15em; margin-top: 2.2rem; }
.phero .t-lead { max-width: 34rem; margin-top: 1.6rem; }
.phero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.down { width: 1.6rem; height: 1.6rem; }
@media (min-width: 769px) { .phero { padding-top: calc(var(--hdr) + 6.8rem); } }

.bleed { position: relative; background: #111; }
.bleed::before { content: ""; display: block; padding-top: 62.5%; }
.bleed .media { position: absolute; inset: 0; }
@media (min-width: 769px) { .bleed::before { padding-top: min(62.5%, 100svh); } }

/* two-column statement */
.lede { padding-top: 4rem; padding-bottom: 4rem; row-gap: 1.5rem; }
@media (min-width: 769px) { .lede { padding-top: 4rem; padding-bottom: 7rem; } .lede > .eyebrow { grid-column: 1 / 5; } .lede > .t-h3 { grid-column: 7 / -1; } }

/* big uppercase statement */
.statement { text-align: center; padding: 5rem var(--m); }
@media (min-width: 769px) { .statement { padding: 7rem var(--m); } .statement .t-display { max-width: 11em; margin: 0 auto; } }

/* feature rows: hairline, headline, sub, description */
.frows { display: grid; }
.frow { position: relative; padding: 1.1rem 0 2.6rem; row-gap: 1rem; }
.frow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .3; transform-origin: left; }
.frow .sub { font-weight: 500; }
.frow .desc { display: grid; gap: .9rem; }
.frow .desc ul { display: grid; gap: .55rem; }
.frow .desc li { padding-left: 1.1em; position: relative; }
.frow .desc li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45em; height: 1px; background: currentColor; }
.frow .facts { display: grid; gap: .35rem; opacity: .7; }
@media (min-width: 769px) {
  .frow { padding: 1.1rem 0 3rem; }
  .frow > .h { grid-column: 1 / 5; }
  .frow > .sub { grid-column: 5 / 8; }
  .frow > .desc { grid-column: 9 / -1; }
  .frow.two > .desc { grid-column: 7 / -1; }
}

/* case media */
.case { scroll-margin-top: var(--hdr); }
.case-media { position: relative; margin-bottom: 1.25rem; }
.case-media::before { content: ""; display: block; padding-top: 62.5%; }
.case-media .media { position: absolute; inset: 0; }
.case-media .media img, .case-media .media video { object-position: center top; }
.case + .case { margin-top: 3rem; }
@media (min-width: 769px) { .case-media::before { padding-top: 50%; } .case + .case { margin-top: 5rem; } }

/* black cards (the Lattice feature boxes) */
.bcards { display: grid; gap: var(--tile-gap); margin-top: 2rem; }
.bcard { background: var(--black); color: var(--white); padding: 1.25rem; min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.bcard svg { width: 1.1rem; height: 1.1rem; color: var(--brass); }
@media (min-width: 769px) { .bcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bcard { min-height: 15rem; } }

.track { scroll-margin-top: var(--hdr); padding-top: 4rem; padding-bottom: 5rem; }
.track + .track { border-top: 1px solid var(--line-light); }
.track-head { row-gap: 1.5rem; padding-bottom: 3rem; }
@media (min-width: 769px) { .track-head > .eyebrow { grid-column: 1 / 5; } .track-head > .tx { grid-column: 7 / -1; } }
.tx { display: grid; gap: 1.2rem; }

/* downloads */
.dls { display: grid; }
.dls a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid currentColor; border-color: rgba(127, 127, 127, .45); }
.dls a span:first-child { font-size: var(--t-card); letter-spacing: -.01em; }
.dls a small { font-size: var(--t-eyebrow); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; opacity: .7; display: inline-flex; align-items: center; gap: .5rem; }
.dls svg { width: .8rem; height: .8rem; transition: transform .3s ease-out; }
.dls a:hover svg { transform: translateY(2px); }

/* copy block */
.copybox pre { font: inherit; font-size: var(--t-small); line-height: 1.55; white-space: pre-wrap; background: rgba(11, 11, 10, .05); padding: 1.25rem; margin: 0 0 1rem; border-top: 1px solid var(--line-light); }
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 1.25rem; border: 1px solid currentColor; background: none; cursor: pointer; font-size: var(--t-small); transition: background-color .3s ease-out, color .3s ease-out; }
.btn:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.copy-status { margin-left: 1rem; font-size: var(--t-small); }

/* paired media cards before the footer */
.cards2 { display: grid; }
.card2 { padding: 2.6rem var(--m) var(--m); display: flex; flex-direction: column; gap: 1.6rem; }
.card2.field { background: var(--field); color: var(--white); }
.card2.stone { background: var(--stone); color: var(--ink); }
.card2-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid currentColor; border-color: rgba(127, 127, 127, .55); }
.card2-media { position: relative; }
.card2-media::before { content: ""; display: block; padding-top: 56.25%; }
.card2-media .media { position: absolute; inset: 0; }
.card2-media .media img { object-position: center top; }
.big-contact { display: grid; gap: .4rem; }
.big-contact a { font-size: var(--t-h2); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
@media (min-width: 769px) { .cards2 { grid-template-columns: 1fr 1fr; } .card2 { padding: 3rem var(--m) var(--m); } }

/* footer */
.ft { background: var(--black); color: var(--white); padding: 3.5rem 0 2rem; }
.ft .g12 { row-gap: 2.5rem; }
.ft h2 { margin-bottom: 1.1rem; opacity: .6; }
.ft ul { display: grid; gap: .45rem; }
.ft li, .ft a { font-size: var(--t-small); line-height: 1.3; }
.ft a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ft-legal { margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; opacity: .7; }
.ft-legal p { font-size: var(--t-eyebrow); letter-spacing: .02em; }
@media (min-width: 769px) {
  .ft .ft-brand { grid-column: 1 / 6; }
  .ft .ft-c1 { grid-column: 7 / 9; }
  .ft .ft-c2 { grid-column: 9 / 11; }
  .ft .ft-c3 { grid-column: 11 / -1; }
}

/* motion: only when .motion is on (no Reduce Motion, or ?motion=on) */
.motion .reveal { opacity: 0; transform: translateY(2rem); transition: opacity 1s var(--expo), transform 1s var(--expo); }
.motion .reveal.x { transform: translateX(-10%); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .frow.reveal { transform: none; opacity: 1; }
.motion .frow.reveal::before { transform: scaleX(0); transition: transform 1.5s var(--expo); }
.motion .frow.reveal > * { opacity: 0; transform: translateX(-10%); transition: opacity 1s var(--expo), transform 1s var(--expo); }
.motion .frow.reveal > :nth-child(1) { transition-delay: .2s; }
.motion .frow.reveal > :nth-child(2) { transition-delay: .3s; }
.motion .frow.reveal > :nth-child(3) { transition-delay: .4s; }
.motion .frow.reveal.in::before { transform: none; }
.motion .frow.reveal.in > * { opacity: 1; transform: none; }
.motion .media.reveal { opacity: 1; transform: none; }
.motion .media.reveal > img, .motion .media.reveal > video { transform: scale(1.08); transition: transform 2s var(--expo); }
.motion .media.reveal.in > img, .motion .media.reveal.in > video { transform: none; }
.motion .tile:hover .media.reveal.in > img, .motion .tile:hover .media.reveal.in > video { transform: scale(1.05); transition-duration: .6s; transition-timing-function: var(--cubic); }
.motion .hero-media video { opacity: 0; transition: opacity 1s var(--expo); }
.motion .hero-media video.ready { opacity: 1; }
.motion .line > span { transform: translateY(105%); transition: transform 1s var(--expo); }
.motion .lines-in .line > span { transform: none; }
.motion .lines-in .line:nth-child(2) > span { transition-delay: .08s; }
.motion .lines-in .line:nth-child(3) > span { transition-delay: .16s; }
.motion .lines-in .line:nth-child(4) > span { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) *, html:not(.motion-forced) *::before, html:not(.motion-forced) *::after { transition: none !important; animation: none !important; }
  html:not(.motion-forced) .reveal, html:not(.motion-forced) .reveal > *, html:not(.motion-forced) .line > span { opacity: 1 !important; transform: none !important; }
}
@media print { .hd, .menu, .hero-media video { display: none; } .reveal, .reveal > * { opacity: 1 !important; transform: none !important; } }

/* fixes after first build */
.facts .k { opacity: 1; font-weight: 500; }
.frow .facts { opacity: 1; }
.statement.band { padding-left: var(--m); padding-right: var(--m); }
.phero .big-contact { margin-top: 1rem; }

/* media grade: the hero capture shows at full brightness, shaded only by one band behind the headline */
.hero-media video, .hero-media img { filter: none; }
.hero-media::after { background: radial-gradient(ellipse 66% 52% at 0% 100%, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .8) 45%, rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, 0) 100%), linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 17%); }
.tile .media img, .tile .media video, .trow-media .media img, .trow-media .media video { filter: saturate(.8); }
.trow-media .media img, .trow-media .media video { object-position: center 20%; }

/* phone: the header owns the top band, the loop starts under it, and the headline flows freely */
@media (max-width: 768px) {
  .dark .hd { background: var(--black); }
  .hero-media { top: var(--hdr); }
  .hero-media video, .hero-media img { object-position: center bottom; }
  .hero-media::after { background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .8) 30%, rgba(0, 0, 0, .55) 39%, rgba(0, 0, 0, 0) 50%); }
  .hero-copy h1 .line, .hero-copy h1 .line > span { display: inline; }
  .hero-copy h1 .line::after { content: " "; }
}

/* secondary text: a solid colour per ground, never opacity (opacity reads as an unfinished reveal and fails contrast on stone) */
.ihero, .ctrack.black, .ctrack.field, .cs.black, .cs.field, .pindex, .facts-strip, .stmt { --soft: rgba(255, 255, 255, .74); }
.ctrack.stone, .cs.stone { --soft: var(--ink); }
.cs.bone, .band { --soft: #4a4c4a; }
.band.black { --soft: rgba(255, 255, 255, .74); }

/* inner hero: the home hero's ground and type, with the real-work media inset below the title (Anduril careers) */
.ihero { background: var(--black); color: var(--white); padding-top: calc(var(--hdr) + 3.5rem); }
.ihero-head { row-gap: 2rem; padding-bottom: 2.5rem; }
.ihero-title .eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.ihero-title h1 { max-width: 15em; }
.ihero-meta { display: grid; gap: 1.4rem; align-content: end; }
.ihero-meta .t-small { max-width: 30rem; opacity: .82; }
.ihero-links { display: flex; flex-wrap: wrap; gap: .8rem 2rem; }
.ihero-media { position: relative; margin: 0 var(--m); }
.ihero-media::before { content: ""; display: block; padding-top: 75%; }
.ihero-media .media { position: absolute; inset: 0; }
.ihero-media .media video, .ihero-media .media img { object-position: center top; }
.ihero-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tile-gap); margin: 0 var(--m); }
.ihero-mosaic .media { position: relative; aspect-ratio: 4 / 3; }
.ihero-mosaic .media:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.ihero-mosaic .media img, .ihero-mosaic .media video { position: absolute; inset: 0; object-position: center top; filter: saturate(.85); }
@media (min-width: 769px) {
  .ihero { padding-top: calc(var(--hdr) + 5rem); }
  .ihero-head { padding-bottom: 3rem; align-items: end; }
  .ihero-head > .ihero-title { grid-column: 1 / 8; }
  .ihero-head > .ihero-meta { grid-column: 9 / -1; }
  .ihero-title h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.05; }
  .ihero-media::before { padding-top: min(52%, calc(100svh - var(--hdr) - 16rem)); }
  .ihero-mosaic { grid-template-columns: 2fr 1fr 1fr; height: min(34vw, calc(100svh - var(--hdr) - 16rem)); min-height: 18rem; }
  .ihero-mosaic .media, .ihero-mosaic .media:first-child { grid-column: auto; aspect-ratio: auto; height: 100%; }
}

/* capability tracks: a coloured band per buyer, big bold name and media like the home rows, then a numbered grid */
.ctrack { padding: 3rem 0 3.5rem; scroll-margin-top: var(--hdr); }
.ctrack.black { background: var(--black); color: var(--white); }
.ctrack.stone { background: var(--stone); color: var(--ink); }
.ctrack.field { background: var(--field); color: var(--white); }
.ctrack + .ctrack { border-top: 1px solid rgba(255, 255, 255, .12); }
.ctrack-head { row-gap: 2rem; }
.ctrack-copy { display: grid; gap: 1.2rem; align-content: start; }
.ctrack-copy .t-feature { max-width: 14em; }
.ctrack-copy .t-lead { max-width: 32rem; }
.ctrack-links { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin-top: .6rem; }
.ctrack-media .media { position: relative; aspect-ratio: 16 / 10; }
.ctrack-media .media img, .ctrack-media .media video { position: absolute; inset: 0; object-position: center top; filter: saturate(.85); }
.cap { margin-top: .7rem; color: var(--soft); }
.cgrid { display: grid; gap: 0 var(--gap); margin-top: 3rem; counter-reset: none; }
.cell { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: .5rem; row-gap: .5rem; padding: 1.25rem 0 1.6rem; border-top: 1px solid currentColor; border-color: rgba(127, 127, 127, .5); }
.cell .num { grid-row: 1 / span 2; font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding-top: .35rem; color: var(--soft); }
.cell .t-small { color: var(--soft); max-width: 28rem; }
.cred .cell { grid-template-columns: minmax(0, 1fr); }
.cred .cell .num { grid-row: auto; padding-top: 0; }
.why { margin-top: 2.5rem; display: grid; gap: 1.2rem; }
.why .eyebrow { color: var(--soft); }
.why ul { display: grid; gap: var(--tile-gap); }
.why li { display: flex; gap: .8rem; align-items: baseline; padding: 1rem 1.1rem; background: rgba(127, 127, 127, .16); font-size: var(--t-small); line-height: 1.3; }
.why li::before { content: ""; width: .45rem; height: .45rem; flex: none; background: var(--brass); transform: translateY(-.1rem); }
@media (min-width: 769px) {
  .ctrack { padding: 5rem 0; }
  .ctrack-head > .ctrack-copy { grid-column: 1 / 6; }
  .ctrack-head > .ctrack-media { grid-column: 7 / -1; }
  .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4rem; }
  .cell { min-height: 11rem; align-content: start; }
  .why { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; margin-top: 3rem; }
  .why ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why li { min-height: 6.5rem; flex-direction: column; justify-content: space-between; }
  .why li::before { transform: none; }
}

/* past performance index: numbered rows, the Anduril benefits list */
.pindex { background: var(--black); color: var(--white); padding-top: 3rem; padding-bottom: 3.5rem; }
.pindex ol { display: grid; border-bottom: 1px solid var(--line-dark); }
.pindex a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--line-dark); transition: background-color .3s ease-out, padding .3s var(--cubic); }
.pindex .num { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .04em; color: var(--soft); }
.pindex .nm { font-size: var(--t-card); letter-spacing: -.01em; line-height: 1.15; }
.pindex .ds { grid-column: 2 / 3; font-size: var(--t-small); color: var(--soft); }
.pindex svg { grid-row: 1; grid-column: 3; width: .8rem; height: .8rem; transition: transform .3s ease-out; }
.pindex a:hover { background: rgba(255, 255, 255, .06); }
.pindex a:hover svg { transform: translate(2px, 2px) rotate(90deg); }
@media (min-width: 769px) {
  .pindex { padding-top: 4rem; padding-bottom: 5rem; }
  .pindex a { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr) 2rem; padding: 1.1rem .4rem; }
  .pindex .ds { grid-column: 3; }
  .pindex svg { grid-column: 4; justify-self: end; }
}

/* case studies: alternating grounds, media 7 columns, copy 5 */
.cs { padding: 3rem 0 3.5rem; scroll-margin-top: var(--hdr); }
.cs.black { background: var(--black); color: var(--white); }
.cs.bone { background: var(--bone); color: var(--ink); }
.cs.stone { background: var(--stone); color: var(--ink); }
.cs.field { background: var(--field); color: var(--white); }
.cs .g12 { row-gap: 2rem; }
.cs-media .media { position: relative; aspect-ratio: 16 / 10; }
.cs-media .media img, .cs-media .media video { position: absolute; inset: 0; object-position: center top; filter: saturate(.85); }
.cs-copy { display: grid; gap: 1.2rem; align-content: start; }
.cs-copy .lnk { justify-self: start; }
.cs-facts { display: grid; border-top: 1px solid currentColor; border-color: rgba(127, 127, 127, .5); }
.cs-facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(127, 127, 127, .5); font-size: var(--t-small); }
.cs-facts dt { color: var(--soft); }
.ticks { display: grid; gap: .6rem; font-size: var(--t-small); line-height: 1.3; }
.ticks li { position: relative; padding-left: 1.2em; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .42rem; height: .42rem; background: var(--brass); }
.cs.stone .ticks li::before, .cs.bone .ticks li::before { background: var(--ink); }
.mods-steps { display: grid; gap: var(--tile-gap); }
.mods-steps li { background: rgba(11, 11, 10, .1); padding: 1.25rem; min-height: 9rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.mods-steps .num { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .04em; }
.mods-steps .t-card { font-weight: 400; }
@media (min-width: 769px) {
  .cs { padding: 5rem 0; }
  .cs .g12 { align-items: start; }
  .cs-media { grid-column: 1 / 8 !important; }
  .cs-copy { grid-column: 9 / -1 !important; }
  .cs.flip .cs-media { grid-column: 6 / -1 !important; grid-row: 1; }
  .cs.flip .cs-copy { grid-column: 1 / 5 !important; grid-row: 1; }
  .cs.mods .cs-copy { grid-column: 1 / 6 !important; }
  .mods-steps { grid-column: 7 / -1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mods-steps li { min-height: 14rem; }
}

/* company: a strip of four headline facts under the hero */
.facts-strip { background: var(--black); color: var(--white); padding-top: 3rem; padding-bottom: 3.5rem; }
.facts-strip dl { row-gap: 0; }
.facts-strip dl > div { display: grid; gap: .55rem; align-content: start; padding: 1.2rem 0 1.4rem; border-top: 1px solid var(--line-dark); }
.facts-strip dt { color: var(--soft); }
.facts-strip dd.t-small { color: var(--soft); }
@media (min-width: 769px) {
  .facts-strip { padding-top: 4rem; padding-bottom: 5rem; }
  .facts-strip dl > div { grid-column: span 3; }
}
.band > .lede { padding-top: 0; padding-bottom: 0; }

/* capability statement preview: the page itself inside the site, a switch between the three, and the PDF on request */
.stmt { background: var(--black); color: var(--white); padding-top: calc(var(--hdr) + 3rem); padding-bottom: 4rem; row-gap: 2.5rem; }
.stmt-side { display: grid; gap: 1.4rem; align-content: start; }
.stmt-side .eyebrow { display: flex; align-items: center; gap: .6rem; }
.stmt-side .t-lead { max-width: 30rem; opacity: .85; }
.stabs { display: flex; flex-wrap: wrap; gap: var(--tile-gap); margin-top: .6rem; }
.stab { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-dark); font-size: var(--t-small); transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out; }
.stab:hover { border-color: var(--white); }
.stab[aria-current="page"] { background: var(--white); color: var(--black); border-color: var(--white); }
.stmt-dl .lnk svg { width: .8rem; height: .8rem; }
.stmt-note { opacity: .75; }
.stmt-page { margin: 0; background: var(--white); border: 1px solid var(--line-dark); }
.stmt-page img { width: 100%; height: auto; }
.stmt-cols { display: grid; gap: .5rem; }
.stmt-cols h3 { margin-top: 1.6rem; color: var(--soft); }
.stmt-cols ul { display: grid; gap: .5rem; }
.stmt-cols li { font-size: var(--t-small); line-height: 1.35; padding-bottom: .5rem; border-bottom: 1px solid var(--line-light); }
.stmt-text .g12 { row-gap: 1.5rem; }
@media (min-width: 769px) {
  .stmt { padding-top: calc(var(--hdr) + 4rem); padding-bottom: 6rem; }
  .stmt-side { grid-column: 1 / 5 !important; position: sticky; top: calc(var(--hdr) + 2rem); }
  .stmt-page { grid-column: 6 / -1 !important; }
  .stmt-text .a { grid-column: 1 / 5; }
  .stmt-text .b { grid-column: 6 / -1; }
}
.stmt-details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .8rem 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); cursor: pointer; font-size: var(--t-card); letter-spacing: -.01em; }
.stmt-details summary::-webkit-details-marker { display: none; }
.stmt-details .plus { position: relative; width: 1rem; height: 1rem; flex: none; }
.stmt-details .plus::before, .stmt-details .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .3s var(--cubic); }
.stmt-details .plus::after { transform: rotate(90deg); }
.stmt-details[open] .plus::after { transform: rotate(0deg); }
.stmt-details .stmt-cols { padding-top: .5rem; }

/* contact: a short branching form, one step at a time */
.ihero-short { padding-bottom: 1rem; }
.lead-sec { --soft: #4a4c4a; }
.lead-sec .g12 { row-gap: 2.5rem; }
.lead-aside { display: grid; gap: 2.5rem; align-content: start; }
.lf-steps { display: none; }
.lf-steps li { display: flex; gap: 1rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid var(--line-light); font-size: var(--t-card); letter-spacing: -.01em; color: var(--soft); }
.lf-steps .num { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .04em; min-width: 1.6rem; }
.lf-steps li.on { color: var(--ink); }
.lf-steps li.on .num::before { content: ""; display: inline-block; width: .45rem; height: .45rem; background: var(--brass); margin-right: .5rem; }
.lead-ids { display: grid; }
.lead-ids > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line-light); font-size: var(--t-small); }
.lead-ids dt { color: var(--soft); }
.no-js .lf { display: none; }
.lf { display: grid; gap: 2rem; }
.lf-head { display: grid; gap: .8rem; }
.lf-bar { height: 2px; background: var(--line-light); overflow: hidden; }
.lf-bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.25); transition: transform .6s var(--expo); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lf-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.4rem; }
.lf-step[hidden] { display: none; }
.lf-step legend { padding: 0; margin-bottom: 1.4rem; }
.lf-step legend:focus { outline: none; }
.lf-step legend:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.lf-choices { display: grid; gap: var(--tile-gap); }
.choice { position: relative; display: grid; gap: .35rem; padding: 1.1rem 1.1rem 1.1rem 3rem; background: var(--white); border: 1px solid var(--line-light); cursor: pointer; transition: border-color .2s ease-out, background-color .2s ease-out; }
.choice:hover { border-color: var(--ink); }
.choice input { position: absolute; left: 1.1rem; top: 1.2rem; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); }
.choice .c-t { font-size: var(--t-card); letter-spacing: -.01em; line-height: 1.2; }
.choice .c-d { font-size: var(--t-small); color: var(--soft); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.f { display: grid; gap: .45rem; min-width: 0; }
.f2 { display: grid; gap: 1.4rem; }
.f label { font-size: var(--t-small); font-weight: 500; }
.f .opt { font-weight: 400; color: var(--soft); margin-left: .3rem; }
.f input, .f select, .f textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1px solid #6f726f; border-radius: 0; }
.f textarea { resize: vertical; line-height: 1.4; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--ink); }
.f [aria-invalid="true"] { border-color: #a3261b; box-shadow: inset 0 0 0 1px #a3261b; }
.hint { font-size: var(--t-small); color: var(--soft); }
.err { font-size: var(--t-small); color: #a3261b; font-weight: 500; }
.err:empty { display: none; }
.lf-review { display: grid; border-top: 1px solid var(--line-light); }
.lf-review > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-light); font-size: var(--t-small); }
.lf-review dt { color: var(--soft); }
.lf-review dd { overflow-wrap: anywhere; white-space: pre-line; }
.lf-ts { min-height: 65px; }
.lf-nav { display: flex; justify-content: space-between; gap: 1rem; }
.lf-nav .lf-next { margin-left: auto; }
.btn-solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn-solid:hover { background: var(--black); }
.btn[disabled] { opacity: .6; cursor: progress; }
.lf-done { display: grid; gap: 1.4rem; align-content: start; }
.lf-done:focus { outline: none; }
.lf-done .eyebrow { display: flex; align-items: center; gap: .6rem; }
/* a keyframe, not a class added later: if the animation never runs (a hidden tab), the step is simply visible */
@keyframes lf-in { from { opacity: 0; transform: translateY(.8rem); } }
.motion .lf-step:not([hidden]) { animation: lf-in .5s var(--expo); }
.lf[hidden], .lf-done[hidden] { display: none; }
@media (max-width: 768px) { .lead-sec .g12 > .b { order: -1; } }
@media (min-width: 769px) {
  .lead-sec .g12 > .a { grid-column: 1 / 5; position: sticky; top: calc(var(--hdr) + 2rem); align-self: start; }
  .lead-sec .g12 > .b { grid-column: 6 / -1; }
  .lf-steps { display: block; }
  .f2 { grid-template-columns: 1fr 1fr; }
  .lf-choices { grid-template-columns: 1fr 1fr; }
}


/* Round 5: bright edges on every boxed element. Drawn with inset shadows and an overlay, so no box changes size. */
.media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px var(--edge-dark); }
.tile:hover .media::before, a:hover > .media::before, .ihero-mosaic .media:hover::before { box-shadow: inset 0 0 0 1px var(--edge-dark-hover); }
.card2, .why li, .mods-steps li { box-shadow: inset 0 0 0 1px var(--edge-dark); }
.stab { border-color: var(--edge-dark); }
.stab:hover { border-color: var(--edge-dark-hover); }
.stmt-page { border-color: var(--edge-dark); }
.facts-strip dl > div { border-top-color: var(--edge-dark); }
.ctrack.black .cell, .ctrack.field .cell, .ctrack.stone .cell { border-top-color: var(--edge-dark); }
/* light grounds: a white line alone would vanish */
.bone .media, .mist .media, .stone .media { box-shadow: var(--edge-shadow); }
.bone .media::before, .mist .media::before, .stone .media::before { box-shadow: inset 0 0 0 2px var(--edge-light); }
.bone .mods-steps li, .mist .mods-steps li, .stone .mods-steps li { box-shadow: inset 0 0 0 2px var(--edge-light), var(--edge-shadow); }
.choice { box-shadow: inset 0 0 0 2px var(--edge-light), var(--edge-shadow); }
.choice:hover { box-shadow: inset 0 0 0 2px var(--edge-light), 0 0 0 1px rgba(11, 11, 10, .28), 0 14px 30px -18px rgba(11, 11, 10, .6); }
.choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--ink), var(--edge-shadow); }
.f input, .f select, .f textarea { box-shadow: var(--edge-shadow); }
/* the Scopeweb capture carries its name panel on the right: keep that half when a square tile crops it */
.tile.obj-r .media img { object-position: right top; }
/* map tile credit: kept whole, never clipped by a crop */
.tile-credit { margin-top: .4rem; font-size: .6875rem; line-height: 1.3; color: rgba(255, 255, 255, .82); }
.media .credit { position: absolute; right: .4rem; bottom: .4rem; z-index: 3; max-width: calc(100% - .8rem); padding: .1rem .35rem; font-size: .625rem; line-height: 1.3; color: #222; background: rgba(255, 255, 255, .85); }

/* Round 6: TBN's signature pieces in our type and colour. Values measured from tbn-website demo.html / tbn.css / tbn.js. */
.tile.obj-r .media video { object-position: right top; }

/* scroll progress hairline (TBN: fixed, 2px, scaleX of scroll fraction, origin left) */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* home hero carousel: stacked slides, the WebGL canvas above them while a morph runs */
.hero-media { z-index: 0; }
.hero-media .slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; visibility: hidden; }
.slide.is-on, .slide.is-out { visibility: visible; }
.slide.is-on { z-index: 2; }
.slide.is-out { z-index: 1; }
.slide picture { display: block; width: 100%; height: 100%; }
.slide img, .slide video { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.motion .slide.is-in { animation: slide-in var(--fade, .6s) ease both; }
@keyframes slide-in { from { opacity: 0; } to { opacity: 1; } }
.hero-gl { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: none; pointer-events: none; }
.hero-gl.on { display: block; }
.hero-media::after { z-index: 4; pointer-events: none; }
/* chevrons: TBN .hero-nav icon, 48px circle, rgba(10,10,10,.32) ground, 1px rgba(255,255,255,.4) ring, 6px blur, .72 to 1 */
.hero-nav { position: absolute; z-index: 5; top: 38%; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; }
.hero-nav.prev { left: .5rem; }
.hero-nav.next { right: .5rem; }
.hero-nav > span { width: 2.375rem; height: 2.375rem; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 10, 10, .32); border: 1px solid rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .72; transition: opacity .25s ease, transform .25s ease, background-color .25s ease; }
.hero-nav svg { width: 1.1rem; height: 1.1rem; }
.hero-nav:hover > span, .hero-nav:focus-visible > span { opacity: 1; background: rgba(10, 10, 10, .5); }
.hero-nav.prev:hover > span { transform: translateX(-3px); }
.hero-nav.next:hover > span { transform: translateX(3px); }
.hero-media.dragging { cursor: grabbing; }
/* live caption: TBN name clamp(1.5rem,3.2vw,2.6rem), sub uppercase .18em 10-12px at .78 white; dashes 34x2, gap 10, .35 inactive */
.hero-meta { display: grid; gap: 1.25rem; }
.hero-links { display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; }
.hero-cap { display: grid; gap: .75rem; }
.hero-dashes { display: flex; gap: .625rem; }
.hero-dash { width: 1rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero-dash::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, .35); transition: background-color .25s ease; }
.hero-dash.is-on::before { background: var(--white); }
.hero-dash:hover::before { background: rgba(255, 255, 255, .7); }
.hero-cap-link { display: grid; gap: .35rem; }
.hero-cap-name, .hero-cap-sub { display: block; overflow: hidden; }
.hero-cap-name > span, .hero-cap-sub > span { display: block; }
.hero-cap-name { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; }
.hero-cap-sub { font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.hero-cap-link:hover .hero-cap-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.motion .hero-cap.swap .hero-cap-name > span, .motion .hero-cap.swap .hero-cap-sub > span { animation: cap-in .7s var(--expo) both; }
.motion .hero-cap.swap .hero-cap-name > span { animation-delay: .08s; }
.motion .hero-cap.swap .hero-cap-sub > span { animation-delay: .16s; }
@keyframes cap-in { from { transform: translateY(105%); } to { transform: none; } }
@media (min-width: 769px) {
  .hero-nav { top: 50%; margin-top: -1.75rem; width: 4rem; height: 4rem; }
  .hero-nav.prev { left: 1rem; }
  .hero-nav.next { right: 1rem; }
  .hero-nav > span { width: 3rem; height: 3rem; }
  .hero-dash { width: 2.125rem; }
  .hero-copy .hero-meta { justify-items: start; align-self: end; }
  .hero-media::after { background: radial-gradient(ellipse 66% 52% at 0% 100%, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .8) 45%, rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse 44% 48% at 100% 100%, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .72) 45%, rgba(0, 0, 0, .4) 75%, rgba(0, 0, 0, 0) 100%), linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 17%); }
}

/* statement band: TBN .below-hero. Glass card over full-bleed lines that alternate direction */
.stmt-band { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--black); color: var(--white); border-block: 1px solid rgba(255, 255, 255, .08); }
.stmt-lines { order: 2; display: flex; flex-direction: column; gap: clamp(8px, 1vw, 16px); padding-block: clamp(26px, 6vw, 40px); border-top: 1px solid rgba(255, 255, 255, .08); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.stmt-line { overflow: hidden; }
.stmt-track { display: inline-flex; width: max-content; align-items: center; }
.stmt-track > span { font-weight: 500; text-transform: uppercase; white-space: nowrap; font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1.1; letter-spacing: .01em; padding: 0 .42em; }
.stmt-track > .sep { color: rgba(255, 255, 255, .16); font-weight: 300; padding: 0 .04em; }
.stmt-track > .c1 { color: var(--brass); }
.stmt-track > .c2 { color: var(--bone); }
.stmt-track > .c3 { color: #a3ad86; }
.stmt-track > .c4 { color: var(--stone); }
.stmt-track > .c5 { color: #c8a27a; }
.motion .stmt-track { animation: band-run 80s linear infinite; will-change: transform; }
.motion .stmt-line:nth-child(even) .stmt-track { animation-direction: reverse; animation-duration: 96s; }
.motion .stmt-line:nth-child(3n) .stmt-track { animation-duration: 112s; }
.stmt-lines:hover .stmt-track { animation-play-state: paused; }
@keyframes band-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stmt-scrim { display: none; }
.stmt-inner { order: 1; position: relative; z-index: 2; padding: clamp(44px, 9vw, 64px) var(--m); }
.stmt-card { position: relative; padding: clamp(30px, 3.4vw, 54px) clamp(28px, 3vw, 50px); background: linear-gradient(152deg, rgba(24, 24, 28, .58), rgba(9, 9, 12, .34)); -webkit-backdrop-filter: blur(20px) saturate(125%); backdrop-filter: blur(20px) saturate(125%); box-shadow: inset 0 0 0 1px var(--edge-dark), 0 44px 100px -44px rgba(0, 0, 0, .8); }
.stmt-card::before { content: ""; display: block; width: 48px; height: 2px; background: var(--brass); margin-bottom: clamp(20px, 2vw, 30px); }
.stmt-card-title { font-size: clamp(1.85rem, 2.9vw, 2.7rem); font-weight: 400; line-height: 1.14; letter-spacing: -.02em; }
.stmt-card-lead { margin-top: clamp(18px, 1.8vw, 26px); font-size: clamp(1.08rem, 1.35vw, 1.32rem); line-height: 1.45; color: rgba(255, 255, 255, .82); }
@media (min-width: 861px) {
  .stmt-band { flex-direction: row; align-items: center; min-height: clamp(360px, 46vh, 500px); padding-block: clamp(44px, 5.5vw, 76px); }
  .stmt-lines { position: absolute; inset: 0; z-index: 0; justify-content: center; padding: 0; border: 0; }
  .stmt-track > span { font-size: clamp(1.3rem, 2.1vw, 2rem); }
  .stmt-scrim { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 100% at 18% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 62%); }
  .stmt-inner { width: 100%; padding: 0 var(--m); }
  .stmt-card { max-width: 52ch; }
}

/* work and credentials marquee: TBN .clients, 60s linear, mask 6%/94%, gap clamp(44px,6vw,90px), text marks */
.marks { padding: 4rem 0 4.5rem; background: var(--black); color: var(--white); }
.marks-title { padding: 0 var(--m); margin-bottom: 1.75rem; color: rgba(255, 255, 255, .74); }
.marks-view { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marks-track { flex-shrink: 0; display: flex; align-items: center; gap: clamp(44px, 6vw, 90px); padding-right: clamp(44px, 6vw, 90px); }
.marks-track li { white-space: nowrap; transition: color .3s ease; }
.mk-work { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.015em; color: rgba(255, 255, 255, .86); }
.mk-cred { font-size: clamp(.8125rem, 1.4vw, 1rem); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.mk-work:hover { color: var(--white); }
.motion .marks-track { animation: marks-run 60s linear infinite; }
.marks-view:hover .marks-track { animation-play-state: paused; }
@keyframes marks-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* image-wipe reveal on media (TBN: clip-path inset(0 0 101% 0) to inset(0), 1.05s cubic-bezier(.16,.84,.28,1)).
   The clip is widened by 2rem so the light-ground edge shadow is never cut once the wipe lands. */
.motion .media.reveal { clip-path: inset(-2rem -2rem 101% -2rem); transition: clip-path 1.05s cubic-bezier(.16, .84, .28, 1); }
.motion .media.reveal.in { clip-path: inset(-2rem); }
/* magnetic buttons ease back the way TBN's do */
[data-magnetic] { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.hero-links [data-magnetic] { display: inline-flex; }
.hero-media { touch-action: pan-y; }
.slide img { -webkit-user-drag: none; user-select: none; }
/* Every slide carries its own page text, so the copy block sits on a solid band of shade, never on their words. */
@media (max-width: 768px) {
  .hero-media::after { background: linear-gradient(to top, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .92) 56%, rgba(0, 0, 0, .5) 66%, rgba(0, 0, 0, 0) 76%); }
}
@media (min-width: 769px) {
  .hero-media::after { background: radial-gradient(ellipse 66% 52% at 0% 100%, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .4) 60%, rgba(0, 0, 0, 0) 100%), linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .84) 34%, rgba(0, 0, 0, .5) 47%, rgba(0, 0, 0, 0) 62%); }
}
/* each dash keeps a 24px target on phones (WCAG 2.5.8); the visible bar stays 16px */
@media (max-width: 768px) { .hero-dashes { gap: .25rem; } .hero-dash { width: 1.5rem; } .hero-dash::before { left: 4px; right: 4px; } }

/* Round 6b: on phones the slide owns the top of the fold and the copy sits on solid black below it,
   so no slide's page text can ever be behind our type. On desktop the band under the copy is opaque black. */
@media (max-width: 768px) {
  .hero { height: auto; min-height: 0; padding-top: var(--hdr); }
  .hero-media { position: relative; inset: auto; top: auto; height: 46svh; min-height: 17rem; }
  .hero-media::after { background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 22%); }
  .hero-copy { position: relative; left: auto; right: auto; bottom: auto; padding: 1.25rem var(--m) 2rem; background: #000; }
}
@media (min-width: 769px) {
  .hero-media::after { background: linear-gradient(to top, #000 0%, #000 39%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, 0) 62%); }
}

/* Round 6c: at 860px and below the chevrons leave the media and sit at the right end of the dash line,
   38px circles inside 44px targets, so they never cover a slide's own text. Swipe is unchanged. */
.hero-ctl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero-steps { display: none; gap: 4px; flex: none; }
.hero-step { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; }
.hero-step > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); transition: background-color .25s ease, border-color .25s ease; }
.hero-step svg { width: 18px; height: 18px; }
.hero-step:hover > span, .hero-step:focus-visible > span { border-color: var(--white); background: rgba(255, 255, 255, .14); }
@media (max-width: 860px) {
  .hero-nav { display: none; }
  .hero-steps { display: flex; }
  .hero-cap { width: 100%; }
}