@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --navy: #0d1b2a;
  --navy-2: #13263b;
  --line: rgba(255, 255, 255, 0.07);
  --blue: #2d6fb6;
  --blue-deep: #1f4f86;
  --yellow: #ffc515;
  --white: #ffffff;
  --mist: #e8eef5;
  --steel: #b9c6d4;
  --ink: #0d1b2a;
  --muted: #4a5a6c;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--navy); color: var(--white); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--yellow); color: var(--ink); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 14px var(--gutter); background: rgba(13, 27, 42, 0.94); border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: baseline; gap: 6px; text-decoration: none; }
.mark { flex: none; align-self: center; margin-right: 4px; overflow: visible; fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.mark-final path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mark-roof, .build-roof { stroke: var(--yellow); stroke-width: 4; }
.mark-walls, .build-walls { stroke: var(--white); stroke-width: 3; }
.mark-k, .build-k { stroke: var(--yellow); stroke-width: 3.5; }
/*
  Mark frames itself up once on load: K stem, K arms, floor, walls, then the roof drops with dust.
  A build layer animates; at 1.75s it drops out and the untouched approved mark takes over.
  Unanimated, only the approved mark shows, so reduced motion gets the static mark.
  Nothing fills forwards, so no animation stays attached to the resting mark.
*/
.mark * { transform-box: view-box; }
.mark-build { opacity: 0; animation: mark-present 1.75s step-end; }
.mark-final { animation: mark-hold 1.75s step-end; }
.build-drawn { stroke-dasharray: 1; }
.build-stem { animation: mark-draw 0.35s ease-out backwards; }
.build-arm { animation: mark-draw 0.3s 0.3s ease-out backwards; }
.build-floor { transform-origin: 24px 44px; animation: mark-floor 0.3s 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.build-wall { animation: mark-draw 0.35s 0.82s ease-out backwards; }
.build-roof { animation: mark-roof-drop 0.6s 1.15s backwards; }
.mark-dust circle { opacity: 0; fill: var(--steel); transform-box: fill-box; transform-origin: center; animation: mark-puff 0.5s 1.52s ease-out; }
.dust-l { --dx: -4px; }
.dust-r { --dx: 4px; }
.dust-hi { --dy: -2.5px; }
.dust-lo { --dy: -0.5px; }
@keyframes mark-present { from, to { opacity: 1; } }
@keyframes mark-hold { from, to { opacity: 0; } }
@keyframes mark-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes mark-floor { from { transform: scaleX(0); } }
@keyframes mark-puff {
  0% { opacity: 0; transform: scale(0.3); }
  25% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.7); }
}
@keyframes mark-roof-drop {
  0% { transform: translateY(-14px); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  15% { opacity: 1; }
  65% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  82% { transform: translateY(-1.8px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  100% { transform: translateY(0); }
}
.wordmark-name { font: 800 1.9rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.wordmark-tag { font-weight: 600; font-size: 0.82rem; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.12em; }
.site-header > nav { margin-left: auto; }
.site-header ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.site-header > nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--steel); }
.site-header > nav a:hover { color: var(--white); }
.call { text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 10px 16px; border: 2px solid var(--yellow); color: var(--yellow); white-space: nowrap; }
.call:hover { background: var(--yellow); color: var(--ink); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 0.95rem; padding: 10px 16px; border: 2px solid var(--line); color: var(--white); white-space: nowrap; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; color: var(--yellow); }
.menu[open] summary::after { content: " ▴"; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; padding: 8px 20px 16px; background: var(--navy-2); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.site-header .menu-panel ul { display: block; }
.menu-panel a { display: block; padding: 10px 0; text-decoration: none; font-weight: 600; color: var(--white); border-bottom: 1px solid var(--line); }
.menu-panel a:hover { color: var(--yellow); }
.menu-label { margin: 14px 0 2px; font: 600 0.72rem/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--yellow); }

/* Shared */
.kicker { margin: 0 0 14px; font: 600 0.8rem/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--yellow); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(2.8rem, 7vw, 5.2rem); margin-bottom: 18px; }
.section-head p:last-child { margin: 0; font-size: 1.15rem; color: var(--steel); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; font-weight: 600; text-decoration: none; border: 2px solid transparent; transition: background 0.2s, color 0.2s, transform 0.2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--yellow); color: var(--ink); }
.button.ghost { border-color: rgba(255, 255, 255, 0.35); color: var(--white); }
.button.ghost:hover { border-color: var(--white); }
.button.outline { border-color: var(--ink); color: var(--ink); }
.button.outline:hover { background: var(--ink); color: var(--white); }

/* Hero with blueprint grid */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: var(--max); margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--gutter); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hero h1 { font-size: clamp(3.4rem, 8.5vw, 7rem); margin-bottom: 26px; }
.hero h1 span { display: block; color: var(--yellow); }
.lede { max-width: 34em; margin: 0 0 32px; font-size: 1.2rem; color: var(--steel); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-media { position: relative; margin: 0; }
.hero-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.15); }
.hero-media::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 2px solid var(--blue); }
.spec { position: absolute; font: 600 0.72rem/1 var(--body); text-transform: uppercase; letter-spacing: 0.18em; background: var(--navy); color: var(--yellow); padding: 7px 10px; border: 1px solid var(--yellow); }
.spec-a { top: -14px; left: 24px; }
.spec-b { top: 45%; right: -18px; }
.spec-c { bottom: -14px; left: 40%; }

/* Company logo cards */
.brands { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(40px, 6vw, 72px); }
.brands ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 14px; height: 100%; padding: 22px 18px 18px; background: var(--white); color: var(--ink); text-decoration: none; border-bottom: 4px solid var(--yellow); transition: transform 0.2s, box-shadow 0.2s; }
.brand:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.brand img { height: 84px; width: auto; max-width: 100%; object-fit: contain; }
.brand > span { font-weight: 600; font-size: 0.92rem; color: var(--blue-deep); }
/* Logos rise from the ground line, one after another */
.js .brand.reveal { opacity: 1; transform: none; }
.js .brand.reveal img { clip-path: inset(100% 0 0 0); transform: translateY(12px); transition: clip-path 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .brand.reveal.is-visible img { clip-path: inset(0); transform: none; }
.brands li:nth-child(2) img { transition-delay: 0.15s; }
.brands li:nth-child(3) img { transition-delay: 0.3s; }

.tape { height: 22px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 22px, var(--ink) 22px 44px); }

/* Companies */
.companies { background: var(--mist); color: var(--ink); padding: clamp(64px, 9vw, 120px) var(--gutter); background-image: linear-gradient(rgba(45, 111, 182, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 111, 182, 0.08) 1px, transparent 1px); background-size: 48px 48px; }
.companies > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.companies .kicker { color: var(--blue-deep); }
.companies .section-head p:last-child { color: var(--muted); }
.paths { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 28px; }
.path { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(20px, 3vw, 44px); align-items: center; background: var(--white); border-left: 6px solid var(--blue); padding: clamp(22px, 3vw, 40px); }
.path:nth-child(2) { border-left-color: var(--yellow); }
.path:nth-child(3) { border-left-color: var(--navy); }
.path-number { font: 800 6rem/0.8 var(--display); color: transparent; -webkit-text-stroke: 2px var(--blue); }
.path h3 { font: 800 clamp(1.9rem, 3.4vw, 2.7rem)/1 var(--display); text-transform: uppercase; margin-bottom: 10px; }
.path-company { margin: 0 0 10px; font-weight: 600; color: var(--blue-deep); letter-spacing: 0.04em; }
.path-body p:not(.path-company) { margin: 0 0 18px; color: var(--muted); }
.path-link { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--yellow); }
.path-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Work reel layered over the photo; the photo stays as the fallback */
.path-media { position: relative; }
.path-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.path-media.is-playing video { opacity: 1; }
.reel-controls { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.reel-toggle { padding: 7px 11px; border: 0; background: rgba(13, 27, 42, 0.82); color: var(--white); font: 600 0.8rem/1 var(--body); cursor: pointer; }
.reel-toggle:hover { background: var(--navy); }

/* Videos */
.videos { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.filters button { font: 600 0.95rem var(--body); color: var(--white); background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); padding: 10px 16px; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.filter-status { margin: 0 0 28px; font-size: 0.9rem; color: var(--steel); }
.video-grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; }
.video[hidden] { display: none; }
.play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--navy-2); cursor: pointer; }
.play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity 0.2s; }
.play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%230d1b2a'/%3E%3C/svg%3E") center / 28px no-repeat; opacity: 0; transition: opacity 0.2s; }
.play:not(:disabled):hover::after, .play:not(:disabled):focus-visible::after { opacity: 1; }
.play:disabled { cursor: default; }
.duration { position: absolute; right: 8px; bottom: 8px; background: rgba(13, 27, 42, 0.88); font-size: 0.8rem; font-weight: 600; padding: 3px 7px; }
.video h3 { margin-top: 12px; font: 600 1.02rem/1.35 var(--body); }
.video h3 a { text-decoration: none; }
.video h3 a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }
.videos .button.outline { border-color: var(--white); color: var(--white); }
.videos .button.outline:hover { background: var(--white); color: var(--ink); }

/* Process */
.process { background: var(--blue-deep); padding: clamp(64px, 9vw, 120px) var(--gutter); }
.process > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.process .section-head p:last-child { color: #d6e2ef; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; border-top: 2px solid var(--yellow); }
.steps li { counter-increment: step; padding: 26px 24px 0 0; position: relative; }
.steps li::before { content: "0" counter(step); display: block; font: 800 3rem/1 var(--display); color: var(--yellow); margin-bottom: 14px; }
.steps li::after { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; background: var(--yellow); }
.steps h3 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; margin-bottom: 10px; }
.steps p { margin: 0; color: #d6e2ef; }

/* About */
.about { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 18px 18px 0 var(--yellow); }
.about h2 { font-size: clamp(2.8rem, 6vw, 4.6rem); margin-bottom: 22px; }
.about-copy > p { color: var(--steel); font-size: 1.1rem; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts span { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--yellow); padding-top: 3px; }

/* Reviews */
.words { background: var(--white); color: var(--ink); padding: clamp(56px, 8vw, 100px) var(--gutter); }
.words > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.words .kicker { color: var(--blue-deep); }
.quotes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0; margin-bottom: 28px; }
.quotes blockquote { margin: 0; padding: 0 28px; border-left: 3px solid var(--yellow); }
.quotes blockquote:first-child p { font-size: 1.6rem; }
.quotes p { margin: 0 0 14px; font: 600 1.15rem/1.4 var(--body); }
.quotes footer { color: var(--muted); font-size: 0.92rem; }
.words .text-link { display: block; }
.text-link { font-weight: 600; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Contact and footer */
.contact { text-align: center; padding: clamp(64px, 9vw, 120px) var(--gutter); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.contact h2 { font-size: clamp(2.8rem, 7vw, 5.6rem); margin-bottom: 14px; }
.contact p { color: var(--steel); margin: 0 0 30px; font-size: 1.15rem; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.site-footer { border-top: 6px solid var(--yellow); padding: 28px var(--gutter); text-align: center; color: var(--steel); font-size: 0.9rem; }
.site-footer p { margin: 4px 0; }
.concept-note { color: var(--yellow); }

/* Player dialog */
dialog { width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; background: var(--navy); color: var(--white); }
dialog::backdrop { background: rgba(5, 10, 18, 0.86); }
.player-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 2px solid var(--yellow); }
.player-bar h2 { font: 600 1rem/1.3 var(--body); text-transform: none; margin-right: auto; }
#close-player { font: 600 0.95rem var(--body); background: var(--yellow); color: var(--ink); border: 0; padding: 8px 14px; cursor: pointer; }
.player-frame { aspect-ratio: 16 / 9; background: #000; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Reveal on scroll, only when JS and motion are allowed */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-header > nav { display: none; }
  .call { margin-left: auto; }
  .site-header { gap: 12px; }
  .hero, .about { grid-template-columns: 1fr; }
  .hero-media::after { inset: 10px -8px -10px 8px; }
  .spec-b { right: -6px; }
  .path { grid-template-columns: 1fr; }
  .path-number { font-size: 4rem; }
  .brands ul { grid-template-columns: 1fr; }
  .brand { flex-direction: row; justify-content: space-between; padding: 14px 18px; }
  .brand img { height: 56px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .quotes { grid-template-columns: 1fr; gap: 28px; }
  .quotes blockquote:first-child p { font-size: 1.3rem; }
}
@media (max-width: 520px) {
  .wordmark { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; row-gap: 2px; }
  .mark { grid-row: span 2; width: 36px; height: 36px; margin: 0; }
  .wordmark-name { font-size: 1.6rem; }
  .wordmark-tag { font-size: 0.66rem; line-height: 1; }
  .call { padding: 8px 10px; font-size: 0.85rem; }
  .menu summary { padding: 8px 10px; font-size: 0.85rem; }
  .menu { position: static; }
  .menu-panel { left: 0; right: 0; width: auto; top: 100%; padding: 4px var(--gutter) 16px; }
  .steps { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: 1fr; gap: 2px; }
  .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}