/* =============================================================
   2MORO Group Website — Shared styles
   ============================================================= */
@import url("./tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body::-webkit-scrollbar { display: none; }
body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

/* ---- container / layout ---- */
.container { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.container-wide { max-width: 1480px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 820px) {
  .container, .container-wide { padding: 0 24px; }
}

/* density tweak */
body[data-density="tight"]   { --pad-section: 64px; }
body[data-density="default"] { --pad-section: 96px; }
body[data-density="spacious"]{ --pad-section: 144px; }
body { --pad-section: 96px; }
.section { padding: var(--pad-section) 0; }

/* ---- type helpers ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--brand-blue);
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: currentColor;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.on-dark { color: var(--brand-blue); }
/* Numbered eyebrow — swap the rule for an ordinal so top-level sections have a spine */
.eyebrow[data-n]::before {
  content: attr(data-n);
  width: auto;
  height: auto;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: inherit;
  letter-spacing: 0.16em;
  color: currentColor;
}
.eyebrow[data-n] {
  gap: 14px;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 12vw, 188px);
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.display-sm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 7.6vw, 116px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.h-section {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.h-card {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.lede {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 56ch;
}
.body-md { font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.meta {
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3);
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 28px; border-radius: 6px;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn .arrow { width: 16px; height: 12px; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--brand-blue); color: #FFFFFF; }
.btn-primary:hover { background: var(--blue-500); }
.btn-primary:active { background: var(--blue-600); transform: scale(.98); }

.btn-outline { border-color: var(--brand-black); color: var(--brand-black); }
.btn-outline:hover { background: var(--brand-black); color: #fff; }
.btn-outline.on-dark { border-color: #fff; color: #fff; }
.btn-outline.on-dark:hover { background: #fff; color: var(--brand-black); }

.btn-ghost {
  padding: 6px 0; border-radius: 0;
  border-bottom: 2px solid var(--brand-blue);
  letter-spacing: 0.16em;
}
.btn-ghost.on-dark { color: #fff; }

/* ---- focus-visible: visible keyboard focus ring on interactive elements ---- */
:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav-links a:focus-visible,
.btn:focus-visible,
.project-card:focus-visible,
.proj-card:focus-visible,
.team-card:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}
.nav.on-dark :focus-visible,
.bg-black :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
}
/* hover-state arrow + underline already provide visual feedback; reinforce on focus */
a:focus-visible .arrow,
button:focus-visible .arrow { transform: translateX(4px); }

/* ---- skip-to-content link (a11y) ---- */
.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  background: var(--brand-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 180ms var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.main-anchor {
  position: absolute;
  width: 1px; height: 1px;
  pointer-events: none;
  outline: none;
}

/* ---- mobile nav body lock ---- */
body.nav-locked { overflow: hidden; }

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 0;
  background: var(--brand-black);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              padding var(--dur-slow) var(--ease-out);
}
.nav.on-light {
  background: #fff;
  backdrop-filter: none;
  border-bottom-color: rgba(0,0,0,.06);
}
.nav.on-light .nav-logo,
.nav.on-light .nav-links a { color: var(--brand-black); }
.nav.on-light .nav-links a.active { color: var(--brand-blue); }
.nav.on-light .nav-cta { border-color: var(--brand-black); color: var(--brand-black); }
.nav.on-light .nav-cta:hover { background: var(--brand-black); color: #fff; }
.nav.on-light .nav-hamburger span { background: var(--brand-black); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  display: flex; align-items: center;
  height: 60px;
  position: relative;
}
.nav-brandmark {
  height: 52px; width: auto; display: block;
  transition: height var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.nav-brandmark-dark {
  position: absolute; inset: 0; margin: auto 0;
  opacity: 0;
}
/* White nav bar (on-light) → black-text logo. Black nav bar (on-dark) → white-text logo. */
.nav.on-light .nav-brandmark-light { opacity: 0; }
.nav.on-light .nav-brandmark-dark  { opacity: 1; }
.nav.on-dark  .nav-brandmark-light { opacity: 1; }
.nav.on-dark  .nav-brandmark-dark  { opacity: 0; }
.nav.scrolled .nav-brandmark { height: 44px; }
.nav-logo .logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--brand-blue);
  clip-path: polygon(0 22%, 78% 22%, 100% 78%, 22% 78%);
}
.nav-links {
  display: flex; align-items: center; gap: 36px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 4px 0;
  color: #fff;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 2px; background: var(--brand-blue);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--brand-blue); }

.nav-cta { display: inline-flex; }

.nav.on-dark .nav-logo,
.nav.on-dark .nav-links a { color: #fff; }
.nav.on-dark .nav-logo .logo-mark { background: var(--brand-blue); }

.nav.scrolled {
  background: rgba(23, 23, 18, 0.92);
  backdrop-filter: blur(12px) saturate(110%);
  padding: 12px 0;
}
.nav.on-light.scrolled {
  background: #fff;
}
.nav.scrolled.on-dark .nav-links a { color: #fff; }

/* ---- case studies page ---- */
.case-study {
  padding: 72px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.case-study--alt { background: var(--neutral-50); }
.case-study-hero {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 80px;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--neutral-200);
  border-radius: 4px;
}
.case-study-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.case-study-hero-tag {
  position: absolute; left: 24px; bottom: 24px;
  display: flex; gap: 12px;
  background: rgba(23,23,18,0.75);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.case-study-hero-tag span:not(:last-child)::after {
  content: " ·";
  margin-left: 12px;
  color: rgba(255,255,255,.4);
}
.case-study-head {
  max-width: 880px;
  margin-bottom: 80px;
}
.case-study-facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 80px;
}
.case-study-fact-v {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.case-study-fact-value .case-study-fact-v {
  color: var(--brand-blue);
  font-size: 22px;
}
.case-study-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  margin-bottom: 80px;
}
.case-study-prose {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
}
.case-study-notable-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.case-study-notable-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 20px;
  border-top: 2px solid var(--brand-blue);
}
.case-study-notable-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-blue);
  line-height: 1;
  flex-shrink: 0;
}
.case-study-notable-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

@media (max-width: 900px) {
  .case-study { padding: 64px 0; }
  .case-study-hero { aspect-ratio: 4/3; margin: 0 0 48px; max-width: none; border-radius: 0; }
  .case-study-head { margin-bottom: 48px; }
  .case-study-facts { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 56px; }
  .case-study-body { grid-template-columns: 1fr; gap: 48px; margin-bottom: 56px; }
  .case-study-notable-list { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .case-study-facts { grid-template-columns: 1fr 1fr; }
  .case-study-hero-tag { left: 16px; bottom: 16px; padding: 8px 12px; font-size: 10px; gap: 8px; }
}

/* ---- project detail overlay ---- */
.proj-overlay {
  position: fixed; inset: 0; z-index: 180;
  pointer-events: none;
}
.proj-overlay.is-open { pointer-events: auto; }
.proj-overlay-scrim {
  position: absolute; inset: 0;
  background: rgba(23,23,18,0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.proj-overlay.is-open .proj-overlay-scrim { opacity: 1; }
.proj-overlay-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(720px, 100%);
  background: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 360ms var(--ease-out);
  box-shadow: none;
}
.proj-overlay.is-open .proj-overlay-panel { transform: translateX(0); box-shadow: -32px 0 64px rgba(23,23,18,0.18); }
.proj-overlay-close {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-1);
  cursor: pointer;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.proj-overlay-close:hover { background: var(--brand-black); border-color: var(--brand-black); color: #fff; }
.proj-overlay-close svg { width: 18px; height: 18px; }
.proj-overlay-body {
  padding: 56px 48px 64px;
}
.proj-overlay-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}
.proj-overlay-meta div { display: flex; flex-direction: column; gap: 6px; }
.proj-overlay-meta dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-3);
}
.proj-overlay-meta dd { font-size: 17px; font-weight: 500; color: var(--fg-1); letter-spacing: -0.005em; }
.proj-overlay-meta-value dd {
  color: var(--brand-blue);
  font-weight: 700;
}
.proj-overlay-highlights {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}
.proj-overlay-highlights ul { display: flex; flex-direction: column; gap: 16px; }
.proj-overlay-highlights li {
  display: flex; align-items: flex-start; gap: 16px;
  font-size: 16px; line-height: 1.5; color: var(--fg-2);
}
.proj-overlay-bullet {
  flex-shrink: 0;
  width: 12px; height: 12px;
  margin-top: 8px;
  background: var(--brand-blue);
  clip-path: polygon(0 22%, 78% 22%, 100% 78%, 22% 78%);
}
.proj-overlay-cta { margin-top: 48px; }

/* ---- gallery (extra project photos in overlay) ---- */
.proj-overlay-gallery {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}
.proj-overlay-gallery-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.proj-overlay-gallery-item {
  margin: 0;
  background: var(--neutral-50);
  overflow: hidden;
  border-radius: 2px;
}
.proj-overlay-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 640px) {
  .proj-overlay-panel { width: 100%; }
  .proj-overlay-body { padding: 40px 24px 56px; }
  .proj-overlay-meta { grid-template-columns: 1fr; gap: 20px; }
  .proj-overlay-close { top: 16px; right: 16px; }
}

/* ---- projects year accordion ---- */
.projects-year { border-bottom: 1px solid var(--brand-black); }
.projects-year-summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  user-select: none;
}
.projects-year-summary::-webkit-details-marker { display: none; }
.projects-year-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.01em;
  line-height: 1;
}
.projects-year-count { color: var(--fg-3); }
.projects-year-chev {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  transition: transform 220ms var(--ease-out);
  display: inline-block;
}
.projects-year[open] .projects-year-chev { transform: rotate(45deg); }
.projects-year-body { padding-bottom: 12px; }
.projects-year-body .projects-index-row { border-top: 1px solid var(--border-subtle); }

/* ---- page transition fade ---- */
body { opacity: 0; transition: opacity 320ms var(--ease-out); }
body.page-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body, body.page-ready { opacity: 1; transition: none; }
}
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  padding: 0; margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 18px; height: 2px; background: #fff;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.nav.mobile-open .nav-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.mobile-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav.mobile-open .nav-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile-panel {
  position: fixed; inset: 0;
  background: #0a0a08;
  padding: 96px 24px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-out), opacity 220ms var(--ease-out);
  opacity: 0;
  pointer-events: none;
  z-index: 150;
}
.nav-mobile-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav.mobile-open .nav-mobile-panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav.mobile-open .nav-mobile-panel {
  transform: translateY(0);
  pointer-events: auto;
}
.nav-mobile-links {
  display: flex; flex-direction: column; gap: 4px;
}
.nav-mobile-links a {
  color: #fff;
  font-family: 'DIN Pro', sans-serif;
  font-size: 32px; font-weight: 700; letter-spacing: -0.01em;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-mobile-links a.active { color: var(--brand-blue); }
.nav-mobile-foot {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.nav-mobile-foot a { color: rgba(255,255,255,.7); }

.nav-mobile-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.nav-mobile-close svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none !important; }
  .nav-hamburger { display: inline-flex; }
}

/* ---- footer ---- */
.footer {
  background: var(--brand-black); color: #fff;
  padding: 72px 0 40px;
  position: relative; overflow: hidden;
}
.footer::before {
  content: ""; position: absolute; left: -10%; bottom: -40%;
  width: 60%; height: 80%;
  background: var(--brand-blue);
  clip-path: polygon(0 var(--y1, 22%), 78% var(--y1, 22%), 100% var(--y2, 78%), 22% var(--y2, 78%));
  opacity: 0.06;
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand { max-width: 360px; }
.footer-logo {
  display: inline-block;
  margin-top: 32px;
  transition: opacity 200ms var(--ease-out);
  opacity: 0.85;
}
.footer-logo img {
  display: block;
  height: 40px;
  width: auto;
}
.footer-logo:hover { opacity: 1; }
.footer-brand .display-sm { color: #fff; margin-bottom: 24px; }
.footer-brand p { color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.6; }
.footer-col h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 10px; font-size: 14px; }
.footer-col ul li a {
  color: rgba(255,255,255,.78);
  transition: color var(--dur-base) var(--ease-out);
}
.footer-col ul li a:hover { color: var(--brand-blue); }
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--brand-blue);
  border: 1px solid rgba(31,186,217,.4);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.footer-social .social-icon:hover {
  color: var(--brand-black);
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 32px; gap: 24px;
  font-size: 12px; color: rgba(255,255,255,.5);
  letter-spacing: 0.05em;
}
.footer-bottom .meta { color: rgba(255,255,255,.5); }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--connect {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 28px;
    margin-top: 8px;
  }
  .footer-col--connect ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
  }
  .footer-col--connect ul li { margin-bottom: 0; }
  .footer-col--connect .footer-social { margin-top: 0; width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- 34° prism / holding shape ---- */
.prism {
  --y1: 22%; --y2: 78%;
  clip-path: polygon(0 var(--y1), 78% var(--y1), 100% var(--y2), 22% var(--y2));
}
.prism-img {
  /* tighter prism for photo masking */
  clip-path: polygon(0 8%, 86% 8%, 100% 92%, 14% 92%);
}
.prism-edge-l { clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%); }
.prism-edge-r { clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }

/* ---- placeholder photo block (no photography available) ---- */
.photo {
  background: var(--neutral-200);
  position: relative; overflow: hidden;
}
.photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(34deg,
      rgba(23,23,18,0.04) 0 1px, transparent 1px 14px);
}
.photo-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(23,23,18,.55);
  background: rgba(255,255,255,.85);
  padding: 6px 10px; border-radius: 2px;
}
.photo-dark { background: var(--neutral-700); }
.photo-dark .photo-tag { color: rgba(255,255,255,.7); background: rgba(0,0,0,.4); }
.photo-blue { background: var(--brand-blue); }
.photo-blue::after { opacity: .35; }

/* ---- project cards (hover states) ---- */
.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.project-card-photo {
  overflow: hidden;
  transition: transform 320ms var(--ease-out);
  will-change: transform;
}
.project-card-photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(23,23,18,0.35) 100%);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
}
.project-card:hover .project-card-photo::before { opacity: 1; }
.project-card:hover .project-card-photo {
  transform: translateY(-2px);
}
.project-card-photo .photo-tag { z-index: 2; }

.project-card .h-card {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size 320ms var(--ease-out);
  padding-bottom: 2px;
  display: inline;
}
.project-card:hover .h-card { background-size: 100% 1px; }

.project-card-meta {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.project-card-cta { color: var(--brand-blue); display: inline-flex; align-items: baseline; gap: 6px; }
.project-card-arrow {
  display: inline-block;
  transition: transform 240ms var(--ease-out);
}
.project-card:hover .project-card-arrow { transform: translateX(6px); }

/* ---- stat row (with dividers + caption + footnote) ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat {
  padding: 0 40px;
  border-left: 1px solid rgba(255,255,255,0.14);
  position: relative;
}
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--brand-blue);
  font-size: clamp(48px, 5vw, 72px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.stat-tick {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(50,176,224,0.16);
  color: var(--brand-blue);
}
.stat-caption {
  margin-top: 20px;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.55;
  max-width: 26ch;
}
.stat-foot {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
/* Stat underline — draws left→right as the stat row scrolls into view. */
.stat-num { position: relative; }
.stat-num::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 3px;
  background: var(--brand-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 820ms var(--ease-expo);
}
.stat-row.in .stat-num::after { transform: scaleX(1); }
.stat-row.in .stat:nth-child(1) .stat-num::after { transition-delay: 260ms; }
.stat-row.in .stat:nth-child(2) .stat-num::after { transition-delay: 420ms; }
.stat-row.in .stat:nth-child(3) .stat-num::after { transition-delay: 580ms; }
@media (prefers-reduced-motion: reduce) {
  .stat-num::after { transition: none; transform: scaleX(1); }
}
@media (max-width: 900px) {
  .stat-row { grid-template-columns: 1fr; gap: 0; }
  .stat { padding: 28px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .stat:first-child { padding-top: 0; border-top: 0; }
  .stat:last-child { padding-bottom: 0; }
}

/* ---- glass button (outline on dark backgrounds, e.g. over video) ---- */
.btn-outline.btn-glass.on-dark {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-color: rgba(255,255,255,0.45);
}
.btn-outline.btn-glass.on-dark:hover {
  background: #fff;
  color: var(--brand-black);
  border-color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- sectors grid (4 cards, responsive) ---- */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) {
  .sectors-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .sectors-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    /* bleed to full viewport width so the carousel ignores container padding */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* 11% horizontal pad = even peek of prev/next around the active (78%) card */
    padding: 4px 11% 16px;
    scrollbar-width: none;
    /* edge fades — visual hint that the lane scrolls horizontally */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .sectors-grid::-webkit-scrollbar { display: none; }
  .sectors-grid > .sector-card {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: center;
  }
  .sector-card-frame { aspect-ratio: 4/5; }
}

.sector-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; }
.sector-card:hover .sector-card-label,
.sector-card:focus-visible .sector-card-label { color: var(--brand-blue); }
.sector-card-frame.has-cover .sector-card-label,
.sector-card:hover .sector-card-frame.has-cover .sector-card-label,
.sector-card:focus-visible .sector-card-frame.has-cover .sector-card-label { color: #fff; }

/* arrow inside the card frame — appears on hover */
.sector-card-arrow {
  position: absolute;
  right: 18px; bottom: 18px;
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  z-index: 3;
}
.sector-card-arrow svg { width: 14px; height: 10px; }
.sector-card:hover .sector-card-arrow,
.sector-card:focus-visible .sector-card-arrow {
  opacity: 1;
  transform: translateX(0);
}
.sector-card-frame.has-cover .sector-card-arrow { background: var(--brand-blue); }
.sector-card-frame {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
}
.sector-card-num {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 40px; height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(23,23,18,0.5);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-black);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sector-card-frame.photo-dark .sector-card-num,
.sector-card-frame.photo-blue .sector-card-num {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.25);
}
.sector-card-label {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  font-size: clamp(26px, 2vw, 32px);
  color: var(--brand-black);
  white-space: nowrap;
}
.sector-card-frame.photo-dark .sector-card-label,
.sector-card-frame.photo-blue .sector-card-label { color: #fff; }

/* ---- sector card: with real photo cover ---- */
.sector-card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 600ms var(--ease-out);
}
.sector-card-frame.has-cover {
  background: var(--neutral-900);
}
.sector-card-frame.has-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,8,0.0) 0%, rgba(10,10,8,0.15) 50%, rgba(10,10,8,0.7) 100%);
  z-index: 1;
}
.sector-card-frame.has-cover .sector-card-num,
.sector-card-frame.has-cover .sector-card-label {
  z-index: 2;
  color: #fff;
}
.sector-card-frame.has-cover .sector-card-num {
  border-color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sector-card:hover .sector-card-img { transform: scale(1.04); }

.sector-card-tags {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sector-card-tags li { position: relative; padding-left: 16px; }
.sector-card-tags li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: var(--brand-blue);
  transform: translateY(-50%);
}

/* ---- our belief band: photo background with graduated scrim ---- */
.belief-band {
  background: var(--brand-black);
}
.belief-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.belief-bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
/* Two-stop scrim: very dark top-left where text sits, lighter bottom-right where the crane + skyline are. */
.belief-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(10,10,8,0.88) 0%, rgba(10,10,8,0.72) 36%, rgba(10,10,8,0.45) 62%, rgba(10,10,8,0.7) 100%),
    linear-gradient(180deg, rgba(10,10,8,0.2) 0%, rgba(10,10,8,0.85) 100%);
}
/* Stats sit on a flat dark band at the bottom, separated from the photo by a hairline rule.
   No blur — keeps the numbers crisp and the editorial mood intact. */
.belief-band .stat-row {
  position: relative;
  padding: 48px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 820px) {
  /* Mobile: photo lives only behind the headline; stats sit on flat matte black below.
     Cleaner two-act rhythm — photo carries the belief, stats carry the data. */
  .belief-scrim {
    background:
      linear-gradient(180deg,
        rgba(10,10,8,0.78) 0%,
        rgba(10,10,8,0.55) 28%,
        rgba(10,10,8,0.95) 52%,
        var(--brand-black) 60%,
        var(--brand-black) 100%);
  }
  .belief-bg img { object-position: 30% 35%; }
  /* Hide the decorative prism on mobile — it competes with the photo at narrow widths. */
  .belief-band > div[style*="clip-path"] { display: none !important; }
  .belief-band .stat-row {
    margin-top: 56px !important;
    padding-top: 40px;
    gap: 40px;
  }
  .belief-band .stat { padding-bottom: 8px; }
}

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translate3d(-14px, 14px, 0); transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translate3d(-14px, 14px, 0); transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 90ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 180ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 270ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 360ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 450ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 540ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 630ms; opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(n+9) { transition-delay: 720ms; opacity: 1; transform: none; }

/* ---- hero load reveal (line-by-line rise) ---- */
.hero-rise-line { overflow: hidden; display: flex; justify-content: center; }
.hero-rise {
  opacity: 0;
  transform: translateY(115%);
  animation: heroRise 1150ms var(--ease-expo) both;
}
.hero-fade {
  opacity: 0;
  transform: translateY(28px);
  animation: heroFade 1100ms var(--ease-expo) both;
}
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rise, .hero-fade { animation: none; opacity: 1; transform: none; }
}

/* ---- interior page-head: orchestrated on-load entrance ----------------
   The big headline rises out of a mask; eyebrow, lede, crumbs and the decor
   diamond sequence in behind it for a composed, premium page open. These run
   on load (CSS animation, no observer) so the choreography is deterministic. */
.ph-mask { overflow: hidden; padding-bottom: 0.1em; }
.ph-rise { transform: translateY(112%); opacity: 0; animation: phRise 1150ms var(--ease-expo) both; }
.ph-fade { opacity: 0; transform: translateY(20px); animation: phFade 1000ms var(--ease-expo) both; }
.ph-decor-anim { opacity: 0; transform: scale(0.62) rotate(-10deg); transform-origin: center; animation: phDecor 1500ms var(--ease-expo) both; }
@keyframes phRise  { to { opacity: 1; transform: translateY(0); } }
@keyframes phFade  { to { opacity: 1; transform: translateY(0); } }
@keyframes phDecor { to { opacity: 1; transform: scale(1) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .ph-rise, .ph-fade, .ph-decor-anim { animation: none; opacity: 1; transform: none; }
}

/* ---- project grid: signature media unveil ----------------------------
   Each photo unveils with a downward curtain (clip-path) while its image
   settles from a slight zoom. Staggered card-by-card via the --ci index. */
.projects-grid.reveal-stagger > * { transform: none; }
.projects-grid .photo { clip-path: inset(0 0 100% 0); }
.projects-grid .photo > img { transform: scale(1.12); transition: transform 1300ms var(--ease-expo); }
.projects-grid.in .photo {
  animation: photoUnveil 1150ms var(--ease-expo) both;
  animation-delay: calc(var(--ci, 0) * 60ms);
}
.projects-grid.in .photo > img { transform: scale(1); transition-delay: calc(var(--ci, 0) * 60ms + 120ms); }
@keyframes photoUnveil { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .projects-grid .photo { clip-path: none; animation: none; }
  .projects-grid .photo > img { transform: none; }
}



/* ---- reusable scroll-triggered mask rise (headings) ------------------- */
.mask-rise { overflow: hidden; padding-bottom: 0.1em; }
.mask-rise > .rise-line {
  display: block; transform: translateY(112%); opacity: 0;
  transition: transform var(--dur-reveal) var(--ease-expo), opacity var(--dur-reveal) var(--ease-expo);
}
.mask-rise.in > .rise-line { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mask-rise > .rise-line { transform: none; opacity: 1; }
}

/* ---- scroll-reactive headers: gentle parallax drift as they pass through
   the viewport. Pure CSS scroll-driven animation — no JS, and simply does
   nothing on browsers without view-timeline support. Excludes mask-rise
   headings (they own their own transform). ------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .display-sm,
    .h-section:not(.rise-line) {
      animation: headDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes headDrift {
  from { transform: translateY(26px); }
  to   { transform: translateY(-26px); }
}

/* ---- archive index: line-by-line reveal ------------------------------
   As the archive scrolls in, each divider draws left→right and the row text
   rises, cascading down the list — the same choreography as the grid above.
   --yi = year index, --ri = sequential row/summary index (set in JSX). */
.projects-index.archive-reveal .projects-year { border-bottom-color: transparent; position: relative; }
.projects-index.archive-reveal .projects-year::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--brand-black); transform: scaleX(0); transform-origin: left;
}
.projects-index.archive-reveal .projects-index-row { position: relative; }
.projects-index.archive-reveal .projects-year-body .projects-index-row { border-top-color: transparent; }
.projects-index.archive-reveal .projects-index-row::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--border-subtle); transform: scaleX(0); transform-origin: left;
}
.projects-index.archive-reveal .projects-index-row > *,
.projects-index.archive-reveal .projects-year-summary > * { opacity: 0; transform: translateY(14px); }
.projects-index.archive-reveal.in .projects-year::after {
  animation: lineDraw 760ms var(--ease-expo) both;
  animation-delay: calc(var(--yi, 0) * 110ms);
}
.projects-index.archive-reveal.in .projects-index-row::before {
  animation: lineDraw 680ms var(--ease-expo) both;
  animation-delay: calc(var(--ri, 0) * 52ms);
}
.projects-index.archive-reveal.in .projects-index-row > *,
.projects-index.archive-reveal.in .projects-year-summary > * {
  animation: rowRise 820ms var(--ease-expo) both;
  animation-delay: calc(var(--ri, 0) * 52ms + 90ms);
}
@keyframes lineDraw { to { transform: scaleX(1); } }
@keyframes rowRise  { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .projects-index.archive-reveal .projects-year { border-bottom-color: var(--brand-black); }
  .projects-index.archive-reveal .projects-year-body .projects-index-row { border-top-color: var(--border-subtle); }
  .projects-index.archive-reveal .projects-year::after,
  .projects-index.archive-reveal .projects-index-row::before { display: none; }
  .projects-index.archive-reveal .projects-index-row > *,
  .projects-index.archive-reveal .projects-year-summary > * { opacity: 1; transform: none; animation: none; }
}

/* ---- page-head headline: line-by-line rise on load (all pages) -------
   Each line of the headline rises out of its own mask, staggered. Runs on
   load via CSS animation (no observer), so the header is always shown.
   crumbs + lede use the load-based ph-fade. */
.hl-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hl-rise { display: inline-block; transform: translateY(116%); opacity: 0; animation: hlRise 1150ms var(--ease-expo) both; }
@keyframes hlRise { to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hl-rise { animation: none; transform: none; opacity: 1; } }

/* ---- media grids: image curtain unveil (home, case studies) ----------
   Opt-in via .media-grid. Each photo unveils with a downward curtain while
   the image settles from a slight zoom; the curtain stagger mirrors the
   wrapper's per-card fade so card and image move together. */
.media-grid .photo, .media-grid .cs-card-media { clip-path: inset(0 0 100% 0); }
.media-grid .photo > img, .media-grid .cs-card-media > img { transform: scale(1.1); transition: transform 1300ms var(--ease-expo); }
.media-grid.in .photo, .media-grid.in .cs-card-media { animation: photoUnveil 1150ms var(--ease-expo) both; }
.media-grid.in .photo > img, .media-grid.in .cs-card-media > img { transform: scale(1); transition-delay: 160ms; }
.media-grid.reveal-stagger.in > *:nth-child(1) .photo, .media-grid.reveal-stagger.in > *:nth-child(1) .cs-card-media { animation-delay: 0ms; }
.media-grid.reveal-stagger.in > *:nth-child(2) .photo, .media-grid.reveal-stagger.in > *:nth-child(2) .cs-card-media { animation-delay: 90ms; }
.media-grid.reveal-stagger.in > *:nth-child(3) .photo, .media-grid.reveal-stagger.in > *:nth-child(3) .cs-card-media { animation-delay: 180ms; }
.media-grid.reveal-stagger.in > *:nth-child(4) .photo, .media-grid.reveal-stagger.in > *:nth-child(4) .cs-card-media { animation-delay: 270ms; }
.media-grid.reveal-stagger.in > *:nth-child(5) .photo, .media-grid.reveal-stagger.in > *:nth-child(5) .cs-card-media { animation-delay: 360ms; }
.media-grid.reveal-stagger.in > *:nth-child(6) .photo, .media-grid.reveal-stagger.in > *:nth-child(6) .cs-card-media { animation-delay: 450ms; }
.media-grid.reveal-stagger.in > *:nth-child(n+7) .photo, .media-grid.reveal-stagger.in > *:nth-child(n+7) .cs-card-media { animation-delay: 540ms; }
@media (prefers-reduced-motion: reduce) {
  .media-grid .photo, .media-grid .cs-card-media { clip-path: none; animation: none; }
  .media-grid .photo > img, .media-grid .cs-card-media > img { transform: none; }
}

/* ---- ticker / running line ---- */
.ticker {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
  padding: 22px 0;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex; gap: 48px;
  animation: ticker 140s linear infinite;
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 48px; color: var(--fg-1); }
.ticker-track span::after {
  content: ""; width: 14px; height: 14px; background: var(--brand-blue);
  display: inline-block;
  clip-path: polygon(0 22%, 78% 22%, 100% 78%, 22% 78%);
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}
@keyframes scan {
  from { transform: translateY(-20%); }
  to   { transform: translateY(20%); }
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---- about stats band: team photo, face-friendly scrim ---- */
/* Faces sit in the vertical middle of the frame. We anchor a soft dark pad in
   the top-left corner so the headline reads on shadow rather than clashing with
   the back-row heads, keep the team band itself fairly bright, and darken the
   bottom where the stats land. */
.team-band .belief-bg img { object-position: center 34%; }
.belief-scrim.team-scrim {
  background:
    radial-gradient(132% 118% at -4% -12%,
      rgba(10,10,8,0.88) 0%,
      rgba(10,10,8,0.58) 25%,
      rgba(10,10,8,0.2) 47%,
      rgba(10,10,8,0) 64%),
    linear-gradient(180deg,
      rgba(10,10,8,0.4) 0%,
      rgba(10,10,8,0.14) 32%,
      rgba(10,10,8,0.18) 54%,
      rgba(10,10,8,0.58) 82%,
      rgba(10,10,8,0.94) 100%);
}
/* The stacked mobile photo is hidden on desktop (which uses the full-bleed overlay). */
.team-photo-flow { display: none; }

@media (min-width: 821px) {
  /* Lift the headline up into the open sky so it sits clear above the team's
     heads; the space we remove from the top padding is added back as a gap
     before the stats, so the stats stay put over the lower bodies. A lower
     object-position shows more sky and drops the team below the headline. */
  .team-band { padding-top: 56px; }
  .team-band .belief-bg img { object-position: center 18%; }
  .team-band .container > .reveal:first-child { margin-bottom: 152px !important; }
}
@media (max-width: 820px) {
  /* On a narrow column there isn't enough sky to float the headline clear of a
     full-width group, so we switch to a clean stacked layout: the headline sits
     on flat black up top, then the whole team in a full-width photo band (the
     tight mobile crop, so nobody is cut off), then the stats on flat black. */
  .team-band .belief-bg,
  .team-band .belief-scrim.team-scrim { display: none; }
  .team-band { background: var(--brand-black); }
  .team-band .container > .reveal:first-child { margin-bottom: 20px !important; }
  .team-photo-flow {
    display: block;
    position: relative;
    overflow: hidden;
    /* Break out of the container's side padding to sit full-bleed edge-to-edge. */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    margin-bottom: 56px;
    /* Dissolve the photo's top and bottom edges into the black band so it
       reads as part of the section rather than a hard-cut rectangle. */
    /* Eased alpha curve (approx ease-in-out) over a wider fade band so the
       photo melts into the black band instead of cutting against it. Linear
       gradients ramp alpha linearly — which reads as a hard seam at the point
       it hits 0 — so we hand-stop the curve. */
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0.04) 4%,
      rgba(0,0,0,0.14) 8%,
      rgba(0,0,0,0.32) 12%,
      rgba(0,0,0,0.55) 16%,
      rgba(0,0,0,0.78) 20%,
      rgba(0,0,0,0.92) 24%,
      #000             28%,
      #000             72%,
      rgba(0,0,0,0.92) 76%,
      rgba(0,0,0,0.78) 80%,
      rgba(0,0,0,0.55) 84%,
      rgba(0,0,0,0.32) 88%,
      rgba(0,0,0,0.14) 92%,
      rgba(0,0,0,0.04) 96%,
      rgba(0,0,0,0)    100%);
    mask-image: linear-gradient(180deg,
      rgba(0,0,0,0)    0%,
      rgba(0,0,0,0.04) 4%,
      rgba(0,0,0,0.14) 8%,
      rgba(0,0,0,0.32) 12%,
      rgba(0,0,0,0.55) 16%,
      rgba(0,0,0,0.78) 20%,
      rgba(0,0,0,0.92) 24%,
      #000             28%,
      #000             72%,
      rgba(0,0,0,0.92) 76%,
      rgba(0,0,0,0.78) 80%,
      rgba(0,0,0,0.55) 84%,
      rgba(0,0,0,0.32) 88%,
      rgba(0,0,0,0.14) 92%,
      rgba(0,0,0,0.04) 96%,
      rgba(0,0,0,0)    100%);
  }
  .team-photo-flow img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ---- modern brand gradients ---- */
.gradient-band .gradient-mesh {
  position: absolute; inset: -10%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 60% at 12% 18%, rgba(31,186,217,0.55) 0%, rgba(31,186,217,0) 60%),
    radial-gradient(40% 56% at 88% 80%, rgba(31,186,217,0.30) 0%, rgba(31,186,217,0) 65%),
    radial-gradient(60% 80% at 50% 110%, rgba(85,202,220,0.18) 0%, rgba(23,23,18,0) 70%);
  filter: blur(20px) saturate(1.05);
  mix-blend-mode: screen;
  animation: meshDrift 18s ease-in-out infinite;
}
.gradient-band > .container,
.gradient-band > div:not(.gradient-mesh) { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .gradient-band > div[style*="clip-path"],
  .gradient-band > div[style*="clipPath"] {
    width: 200px !important; height: 90px !important;
    right: -20% !important;
    opacity: 0.35 !important;
  }
}

.gradient-soft {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 56% at 8% 12%, rgba(31,186,217,0.28) 0%, rgba(31,186,217,0) 65%),
    radial-gradient(42% 60% at 100% 100%, rgba(23,23,18,0.10) 0%, rgba(23,23,18,0) 70%),
    linear-gradient(135deg, rgba(31,186,217,0.06) 0%, rgba(255,255,255,0) 50%);
  filter: blur(10px);
}

/* ---- full-bleed hero banner ---- */
.hero-banner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  max-height: 1080px;
  overflow: hidden;
  background: var(--brand-black);
  display: flex; align-items: center;
}
.hero-banner-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  border: 0;
}
iframe.hero-banner-video {
  /* Overscan to hide the Drive player's chrome (title bar + controls bar). */
  width: 130%;
  height: 160%;
  top: -30%;
  left: -15%;
  inset: auto;
  pointer-events: none;
}
/* Vimeo background-mode embed: no chrome to hide, just cover the area at 16:9. */
iframe.hero-banner-video--iframe {
  inset: auto;
  top: 50%;
  left: 50%;
  width: max(100%, calc((100vh + 2px) * 16 / 9));
  height: max(100%, calc((100vw + 2px) * 9 / 16));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-banner-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--brand-black) 0%, #2a2a25 50%, var(--brand-black) 100%);
  z-index: 0; overflow: hidden;
}
.hero-banner-scan {
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(34deg,
    rgba(31,186,217,0.0) 0 80px,
    rgba(31,186,217,0.10) 80px 84px,
    rgba(31,186,217,0.0) 84px 240px);
  animation: scan 12s linear infinite;
}
.hero-banner-placeholder-tag {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  color: rgba(255,255,255,.7);
}
.hero-banner-placeholder-tag span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}
.hero-banner-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(23,23,18,0.6) 0%, rgba(23,23,18,0.25) 30%, rgba(23,23,18,0.55) 75%, rgba(23,23,18,0.92) 100%),
    linear-gradient(90deg, rgba(23,23,18,0.5) 0%, rgba(23,23,18,0.0) 60%);
  pointer-events: none;
}
.hero-banner-prism { display: none; }
.hero-banner-content {
  position: relative; z-index: 2;
  padding-bottom: 96px;
  padding-top: 160px;
  width: 100%;
}
.hero-banner-centered {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
}
.hero-logo {
  width: clamp(180px, 28vw, 360px);
  height: auto; display: block;
}
.hero-subheading {
  margin-top: 32px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 28px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.hero-banner-stats {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.18);
  max-width: 920px;
  width: 100%;
  text-align: left;
}
@media (max-width: 820px) {
  .hero-banner { min-height: 88vh; height: auto; }
  .hero-banner-content { padding-top: 140px; padding-bottom: 64px; }
  .hero-banner-stats { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
  .hero-banner-prism { width: 240px; height: 110px; right: -10%; top: 14%; }
}

/* ---- side index (page chrome) ---- */
.side-index {
  position: fixed; left: 32px; top: 50%; transform: translateY(-50%);
  z-index: 5;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--fg-3);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}
.side-index .dot {
  display: inline-block; width: 6px; height: 6px; background: var(--brand-blue);
  border-radius: 999px; margin: 8px 0;
}
@media (max-width: 1100px) { .side-index { display: none; } }

/* ---- projects page ---- */
.projects-filterbar {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 20px 0; flex-wrap: wrap; gap: 16px;
}
.projects-filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.projects-filters-label { margin-right: 16px; }

/* ---- year dropdown ---- */
.projects-yearfilter {
  display: flex; align-items: center; gap: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--border-subtle);
  margin-left: 4px;
}
.projects-yearfilter-label { color: var(--fg-2); }
.projects-yearfilter-select-wrap {
  position: relative; display: inline-flex; align-items: center;
}
.projects-yearfilter-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 8px 36px 8px 16px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.projects-yearfilter-select:hover { border-color: var(--brand-black); }
.projects-yearfilter-select:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}
.projects-yearfilter-chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 6px;
  color: var(--fg-2);
  pointer-events: none;
}
.projects-filters-count { margin-left: auto; }
@media (max-width: 640px) {
  .projects-yearfilter {
    padding-left: 0;
    border-left: 0;
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .projects-filters-count { width: 100%; text-align: right; }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 32px;
}

/* ---- Mission section — tinted editorial panel with cyan numeric marker ---- */
.mission-section {
  position: relative;
  background: var(--neutral-100);
  overflow: hidden;
}
.mission-section .container { z-index: 1; }
.mission-prism { display: none; }
.mission-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 80px;
  align-items: start;
}
.mission-marker { padding-top: 6px; }
.mission-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(96px, 11vw, 168px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--brand-blue);
  display: block;
}
.mission-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--brand-black);
  margin-bottom: 56px;
  max-width: 18ch;
}
.mission-body { max-width: 56ch; }

@media (max-width: 820px) {
  .mission-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mission-prism {
    right: -60%;
    top: 4%;
    width: 360px;
    height: 160px;
  }
  .mission-heading { margin-bottom: 32px; }
}

/* ---- Mission section — compact 2-col with vertical centering to avoid negative space ---- */
.mission-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 820px) {
  .mission-row { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* ---- "Show more" prompt below the initial 6 projects ---- */
.projects-loadmore {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}
.projects-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 18px 28px 18px 22px;
  background: transparent;
  border: 1px solid var(--brand-blue);
  border-radius: 999px;
  color: var(--brand-blue);
  cursor: pointer;
  transition: background 260ms var(--ease-out), color 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.projects-loadmore-btn:hover {
  background: var(--brand-blue);
  color: #fff;
  transform: translateY(-2px);
}
.projects-loadmore-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  color: inherit;
}
.projects-loadmore-icon svg { width: 100%; height: 100%; }
.projects-loadmore-label {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2px;
}
.projects-loadmore-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.projects-loadmore-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.projects-index-row {
  display: grid;
  grid-template-columns: 60px 2.5fr 1fr 1fr 60px;
  gap: 24px;
  padding: 24px 0;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 220ms var(--ease-out), padding 220ms var(--ease-out);
}
.projects-index-row:hover { padding-left: 16px; padding-right: 16px; }
.projects-index-title { font-weight: 700; font-size: 20px; letter-spacing: -0.005em; }
.projects-index-arrow { text-align: right; color: var(--brand-blue); font-weight: 700; }

@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .projects-grid > a,
  .projects-grid > button { grid-column: span 1 !important; }
  .projects-grid > a .photo,
  .projects-grid > button .photo { aspect-ratio: 4/3 !important; }
  .projects-index-row {
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 2px 16px;
    padding: 20px 0;
    align-items: start;
  }
  .projects-index-num { grid-row: 1; grid-column: 1; align-self: center; }
  .projects-index-title { grid-row: 1; grid-column: 2; font-size: 17px; align-self: center; }
  .projects-index-arrow { grid-row: 1; grid-column: 3; align-self: center; }
  .projects-index-loc { grid-row: 2; grid-column: 2 / 4; }
  .projects-index-meta { grid-row: 3; grid-column: 2 / 4; }
  .projects-index-row:hover { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 560px) {
  .projects-grid { grid-template-columns: 1fr; gap: 28px; }
  .projects-filters-label { display: none; }
  .projects-filters { gap: 6px; }
  .projects-filters button { padding: 7px 12px !important; font-size: 10px !important; }
}

/* ---- universal mobile collapse for inline-grid layouts ---- */
@media (max-width: 820px) {
  .container [style*="height: 620"] {
    height: auto !important;
    aspect-ratio: 4/5 !important;
  }
  /* Section paddings tighten */
  .section { padding-top: 56px; padding-bottom: 56px; }
  .display { font-size: clamp(40px, 9vw, 64px); }
  .display-sm { font-size: clamp(32px, 7vw, 48px); }
  .h-section { font-size: clamp(28px, 6vw, 40px); }
  /* Hero brandmark sized down */
  .hero-brandmark { width: 56vw !important; max-width: 280px !important; }
  /* Big inset paddings inside grey/black panels */
  .reveal[style*="padding: 96px"] { padding: 48px 24px !important; }
  .reveal[style*="padding: 48px"] { padding: 32px 24px !important; }
  /* Remove huge offset stickers used for desktop drama */
  .reveal[style*="left: -40"] { display: none !important; }
}

/* ---- tablet tier: keep grids at 2 cols instead of jumping straight to 1 ---- */
@media (min-width: 561px) and (max-width: 820px) {
  .container div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .section { padding-top: 64px; padding-bottom: 64px; }
}

@media (max-width: 560px) {
  /* Generic: any inline-grid layout inside .container collapses to one column */
  .container div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 560px) {
  .container, .container-wide { padding: 0 20px; }
  .display { font-size: clamp(36px, 11vw, 56px); line-height: 1.05; }
  .lede { font-size: 17px; }
  .crumbs { font-size: 11px; }
  /* Buttons full-width-ish so they aren't tiny */
  .btn { padding: 12px 20px; font-size: 13px; }
  /* Photo aspect ratios stay sane */
  .photo[style*="height: 620"] { height: auto !important; aspect-ratio: 4/5 !important; }
}

/* ---- page header band (used on inner pages) ---- */
.page-head {
  padding: 200px 0 72px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) {
  .page-head { padding: 128px 0 32px; }
  .page-head .crumbs { margin-bottom: 20px; }
  .page-head .lede { margin-top: 20px; }
}
@media (max-width: 560px) {
  .page-head { padding: 112px 0 28px; }
}
.page-head .crumbs {
  display: flex; gap: 12px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 32px;
}
.page-head .crumbs a:hover { color: var(--brand-blue); }
.page-head .display { max-width: 16ch; }
.page-head .lede { margin-top: 32px; max-width: 60ch; }
.page-head-decor { display: none; }

/* ---- tweaks panel (custom, simple) ---- */
.tweaks-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 320px;
  background: #fff; color: var(--fg-1);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: var(--shadow-3);
  padding: 18px 20px;
  font-size: 13px;
}
.tweaks-panel header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.tweaks-panel h3 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.tweaks-panel .close { font-size: 18px; line-height: 1; padding: 4px 8px; }
.tweaks-row { margin-bottom: 16px; }
.tweaks-row label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 8px;
}
.tweaks-row input[type="text"], .tweaks-row textarea {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  resize: vertical;
}
.tweaks-row textarea { min-height: 80px; line-height: 1.3; }
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--neutral-100); padding: 4px; border-radius: 6px;
}
.seg button {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 4px; border-radius: 4px;
  color: var(--fg-2);
}
.seg button.on { background: #fff; color: var(--fg-1); box-shadow: var(--shadow-1); }

/* utilities */
.u-flex { display: flex; }
.u-grid { display: grid; }
.u-gap-4 { gap: 16px; } .u-gap-6 { gap: 32px; } .u-gap-8 { gap: 64px; }
.u-mt-4 { margin-top: 16px; } .u-mt-6 { margin-top: 32px; } .u-mt-8 { margin-top: 64px; }
.text-blue { color: var(--brand-blue); }
.text-light { color: rgba(255,255,255,.7); }
.bg-black { background: var(--brand-black); color: #fff; }
.bg-blue { background: var(--brand-blue); color: #fff; }
.bg-grey { background: var(--brand-grey); }
.divider { height: 1px; background: var(--border-subtle); margin: 64px 0; }
.divider.on-dark { background: rgba(255,255,255,.12); }

/* ====================================================================== */
/* TEAM LIST — stacked profile blocks (portrait left), expand bio on click */
/* ====================================================================== */
.team-list { display: flex; flex-direction: column; }
.team-member {
  display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start;
  padding: 48px 0; border-top: 1px solid var(--border-subtle);
}
.team-member:first-child { border-top: 0; padding-top: 8px; }
.tm-portrait {
  width: 100%; aspect-ratio: 4/5; max-height: 420px; object-fit: cover; object-position: center top;
  border-radius: 10px; background: var(--neutral-200); display: block;
}
.tm-role { margin-top: 14px; font-size: 18px; font-weight: 500; color: var(--brand-blue); letter-spacing: 0.04em; }
.tm-toggle {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--brand-blue); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.tm-toggle svg { transition: transform 300ms var(--ease-out); }
.tm-toggle.open svg { transform: rotate(180deg); }
.tm-collapse { overflow: hidden; max-height: 0; transition: max-height 400ms var(--ease-out); }
.tm-collapse.open { max-height: 1600px; }
.tm-collapse-inner { padding-top: 24px; }
.tm-collapse-inner .acc-bio { max-width: 60ch; }

/* ---- management team: 3-up cards (portrait on top) ---- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
.team-grid-secondary {
  grid-template-columns: repeat(2, minmax(0, calc((100% - 96px) / 3)));
  justify-content: start;
}
.team-card { display: flex; flex-direction: column; }
.tm-subhead-rule { display: inline-block; width: 40px; height: 1px; background: var(--brand-black); }
.tc-portrait {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top;
  border-radius: 10px; background: var(--neutral-200); display: block;
}
.tc-name { margin: 24px 0 0; font-size: 30px; line-height: 1.02; letter-spacing: -0.015em; }
.team-card .tm-collapse.open { max-height: 1400px; }
@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; gap: 44px; max-width: 460px; }
  .tc-portrait { max-width: 300px; }
}
@media (max-width: 820px) {
  .team-member { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .tm-portrait { max-width: 260px; max-height: none; }
}

/* ---- values grid: 4-up → 2-up → 1-up ---- */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 1000px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- accreditations: 4-up logo + line ---- */
.accred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.accred-grid-compact { gap: 24px; }
.accred-card-compact { padding-top: 20px; }
.accred-card-compact .accred-logo { height: 56px; margin-bottom: 14px; }
.accred-card-compact .accred-logo img { max-height: 48px; }
.accred-card-compact .accred-name { font-size: 16px; }
.accred-card-compact .accred-sub { font-size: 13px; color: var(--fg-2); margin-top: 2px; }
@media (max-width: 820px) {
  .accred-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
.accred-card {
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}
.accred-logo {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 22px;
}
.accred-logo img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.accred-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  width: 88px;
  border: 1.5px dashed var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-condensed, var(--font-sans));
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--fg-2);
  padding: 8px;
  line-height: 1.05;
}
.accred-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.accred-sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-top: 8px;
}
.accred-desc { margin-top: 14px; color: var(--fg-2); }
@media (max-width: 1000px) {
  .accred-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; }
}
@media (max-width: 560px) {
  .accred-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ====================================================================== */
/* TEAM SWITCHER — selectable name cards + fixed profile panel            */
/* ====================================================================== */
.team-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 44px; }
.team-tab {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--border-subtle); border-radius: 10px; background: #fff;
  cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.team-tab:hover { border-color: var(--brand-black); }
.team-tab.active { border-color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.team-tab-thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--neutral-100); }
.team-tab-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.team-tab-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team-tab-name { font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--fg-1); }
.team-tab-role { font-size: 12px; color: var(--brand-blue); font-weight: 700; letter-spacing: 0.03em; }

.team-profile { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; animation: tprofIn 300ms var(--ease-out); }
@keyframes tprofIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.team-profile-portrait { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; border-radius: 10px; background: var(--neutral-200); display: block; }
.team-profile-role { margin-top: 16px; font-size: 18px; font-weight: 500; color: var(--brand-blue); letter-spacing: 0.04em; }
@media (min-width: 561px) and (max-width: 820px) {
  .team-tabs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .team-tab { padding: 12px; gap: 10px; }
  .team-tab-thumb { width: 44px; height: 44px; }
  .team-tab-name { font-size: 14px; }
  .team-profile { grid-template-columns: 240px 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .team-tabs { grid-template-columns: 1fr; gap: 10px; margin-bottom: 32px; }
  .team-profile { grid-template-columns: 1fr; gap: 24px; }
  .team-profile-portrait { max-width: 220px; }
}

/* ====================================================================== */
/* TEAM ACCORDION — compact expandable profiles                           */
/* ====================================================================== */
.team-accordion { display: flex; flex-direction: column; gap: 12px; }
.acc-item {
  border: 1px solid var(--border-subtle); border-radius: 10px; background: #fff;
  overflow: hidden; transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.acc-item:hover { border-color: var(--brand-black); }
.acc-item.open { border-color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 20px;
  padding: 16px 24px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.acc-thumb {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px;
  overflow: hidden; background: var(--neutral-100);
}
.acc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.acc-id { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.acc-name { font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--fg-1); }
.acc-role { font-size: 13px; color: var(--brand-blue); font-weight: 700; letter-spacing: 0.04em; }
.acc-chevron {
  flex: 0 0 auto; color: var(--fg-2); display: flex;
  transition: transform 300ms var(--ease-out), color 220ms var(--ease-out);
}
.acc-item.open .acc-chevron { transform: rotate(180deg); color: var(--brand-blue); }
/* When open, the large portrait in the panel is the photo — hide the tiny row thumbnail to avoid duplication */
.acc-item.open .acc-thumb { display: none; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; min-height: 0; }
.acc-content { padding: 10px 24px 28px 24px; display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; }
.acc-portrait { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; border-radius: 8px; background: var(--neutral-100); display: block; }
.acc-bio { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-1); max-width: 60ch; }
.acc-quote {
  margin: 24px 0 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--brand-blue);
  font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--fg-1); font-style: normal; max-width: 56ch;
}
.acc-meta {
  display: flex; gap: 40px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.acc-meta-val { font-weight: 700; font-size: 16px; margin-top: 6px; color: var(--fg-1); }
.acc-meta-link { font-weight: 700; font-size: 13px; margin-top: 6px; display: block; color: var(--brand-blue); word-break: break-word; }
@media (max-width: 560px) {
  .acc-head { gap: 14px; padding: 14px 16px; }
  .acc-thumb { width: 48px; height: 48px; }
  .acc-name { font-size: 18px; }
  .acc-content { padding: 10px 16px 24px; grid-template-columns: 1fr; gap: 24px; }
  .acc-portrait { max-width: 220px; }
  .acc-meta { gap: 24px; }
}

/* ====================================================================== */
/* CASE STUDIES — index cards                                             */
/* ====================================================================== */
.cs-index { display: flex; flex-direction: column; gap: 8px; }
.cs-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  gap: 0;
  min-height: clamp(380px, 32vw, 520px);
  border-top: 1px solid var(--border-subtle);
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding: 0;
  color: inherit;
}
.cs-card:last-child { border-bottom: 1px solid var(--border-subtle); }
.cs-card-media {
  position: relative;
  overflow: hidden;
  background: var(--neutral-200);
}
.cs-card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-expo);
}
.cs-card:hover .cs-card-media img { transform: scale(1.08); }
.cs-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(23,23,18,0) 40%, rgba(23,23,18,0.18) 100%);
  opacity: 0; transition: opacity 600ms var(--ease-expo);
}
.cs-card:hover .cs-card-media::after { opacity: 1; }
.cs-card-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px clamp(32px, 5vw, 88px);
  gap: 0;
}
.cs-card-index {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.18em; color: var(--brand-blue);
}
.cs-card-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 28px;
}
.cs-card-meta span.dot { width: 4px; height: 4px; border-radius: 999px; background: var(--brand-blue); }
.cs-card-title {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(30px, 3.2vw, 52px); line-height: 0.98; letter-spacing: -0.025em;
  text-transform: uppercase; margin: 16px 0 0;
  color: var(--brand-black);
}
.cs-card-brief {
  font-size: 17px; line-height: 1.55; color: var(--fg-2);
  max-width: 46ch; margin-top: 24px;
}
.cs-card-cue {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 36px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-black);
}
.cs-card-cue .arrow { transition: transform 320ms var(--ease-expo); }
.cs-card:hover .cs-card-cue .arrow { transform: translateX(8px); }
.cs-card:hover .cs-card-cue { color: var(--brand-blue); }
@media (max-width: 860px) {
  .cs-card { grid-template-columns: 1fr; min-height: 0; }
  .cs-card-media { aspect-ratio: 16/10; }
  .cs-card-body { padding: 32px 24px 48px; }
}

/* ====================================================================== */
/* CASE STUDIES — immersive experience overlay                            */
/* ====================================================================== */
.cs-exp {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--neutral-50, #fff);
  overflow-y: auto; overflow-x: hidden;
  opacity: 0; transform: translateY(24px);
  transition: opacity 520ms var(--ease-expo), transform 520ms var(--ease-expo);
  -webkit-overflow-scrolling: touch;
}
.cs-exp.is-open { opacity: 1; transform: none; }
body.cs-locked { overflow: hidden; }

.cs-exp-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--brand-blue); z-index: 1003;
  transition: width 80ms linear;
}
.cs-close {
  position: fixed; top: 24px; right: 24px; z-index: 1002;
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23,23,18,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.cs-close:hover { background: var(--brand-blue); transform: rotate(90deg); }
.cs-close svg { width: 18px; height: 18px; }

/* Hero */
.cs-hero {
  position: relative; min-height: 92vh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--brand-black);
}
.cs-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.cs-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(23,23,18,0.45) 0%, rgba(23,23,18,0.05) 35%, rgba(23,23,18,0.35) 70%, rgba(23,23,18,0.85) 100%);
}
.cs-hero-content {
  position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(24px, 6vw, 120px) clamp(56px, 7vw, 96px);
  color: #fff;
}
.cs-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff;
}
.cs-hero-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--brand-blue); }
.cs-hero-title {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(44px, 6.5vw, 112px); line-height: 0.92; letter-spacing: -0.03em;
  text-transform: uppercase; margin: 24px 0 0; max-width: 18ch;
  text-wrap: balance;
}
.cs-hero-facts {
  display: flex; flex-wrap: wrap; gap: 48px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.cs-hero-fact .meta { color: rgba(255,255,255,0.6); }
.cs-hero-fact-v { font-size: 18px; font-weight: 600; margin-top: 8px; color: #fff; }
.cs-scrollcue {
  position: absolute; right: clamp(24px, 6vw, 120px); bottom: clamp(56px, 7vw, 96px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.cs-scrollcue .line { width: 1px; height: 48px; background: rgba(255,255,255,0.4); position: relative; overflow: hidden; }
.cs-scrollcue .line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: var(--brand-blue); animation: csScroll 1.8s var(--ease-in-out) infinite;
}
@keyframes csScroll { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }
@media (max-width: 860px) { .cs-scrollcue { display: none; } }

/* Section shell */
.cs-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 120px); }
.cs-brief-section { padding: clamp(80px, 10vw, 160px) 0; }
.cs-brief-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-blue); margin-bottom: 32px;
  display: inline-flex; align-items: center; gap: 14px;
}
.cs-brief-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--brand-blue); }
.cs-brief-text {
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px); line-height: 1.28; letter-spacing: -0.015em;
  color: var(--brand-black); max-width: 22ch; text-wrap: balance;
}
.cs-brief-lede {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--fg-2);
  max-width: 58ch; margin-top: 40px;
}

/* Sticky-scroll storytelling */
.cs-sticky { background: var(--brand-grey); padding: clamp(40px, 6vw, 96px) 0; }
.cs-sticky-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.cs-sticky-media {
  position: sticky; top: 8vh; height: 84vh; border-radius: 4px; overflow: hidden;
  background: var(--neutral-200);
}
.cs-sticky-media .frame {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 700ms var(--ease-expo);
}
.cs-sticky-media .frame.active { opacity: 1; }
.cs-sticky-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.cs-sticky-media .frame-label {
  position: absolute; left: 20px; bottom: 20px;
  display: inline-flex; gap: 10px; padding: 8px 14px;
  background: rgba(23,23,18,0.7); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 4px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cs-chapters { display: flex; flex-direction: column; }
.cs-chapter {
  min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 0;
}
.cs-chapter-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-blue); margin-bottom: 24px;
}
.cs-chapter-h {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -0.025em;
  text-transform: uppercase; color: var(--brand-black); margin: 0 0 24px;
}
.cs-chapter-p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; color: var(--fg-2); max-width: 48ch; }
@media (max-width: 860px) {
  .cs-sticky-grid { grid-template-columns: 1fr; }
  .cs-sticky-media { position: relative; top: 0; height: 56vh; margin-bottom: 24px; }
  .cs-chapter { min-height: 0; padding: 24px 0; }
}

/* Pull quote */
.cs-quote-section { padding: clamp(80px, 11vw, 180px) 0; background: var(--brand-black); }
.cs-quote {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 76px); line-height: 1.04; letter-spacing: -0.03em;
  text-transform: uppercase; color: #fff; max-width: 18ch; text-wrap: balance;
}
.cs-quote .accent { color: var(--brand-blue); }
.cs-quote-attr {
  margin-top: 40px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Stats */
.cs-stats-section { padding: clamp(72px, 9vw, 140px) 0; background: var(--brand-black); border-top: 1px solid rgba(255,255,255,0.1); }
.cs-stats-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-blue); margin-bottom: 56px;
  display: inline-flex; align-items: center; gap: 14px;
}
.cs-stats-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--brand-blue); }
.cs-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-stat { padding: 32px 32px 32px 0; border-top: 2px solid var(--brand-blue); }
.cs-stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 5.5vw, 88px); line-height: 0.9; letter-spacing: -0.02em;
  color: #fff;
}
.cs-stat-label { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.6); margin-top: 16px; max-width: 18ch; }
@media (max-width: 860px) { .cs-stats-grid { grid-template-columns: 1fr 1fr; } }

/* Video */
.cs-video-section { background: var(--brand-black); }
.cs-video {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000;
}
.cs-video iframe, .cs-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video-cap {
  text-align: center; padding: 28px 24px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* Gallery */
.cs-gallery-section { padding: clamp(72px, 9vw, 140px) 0; }
.cs-gallery-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-blue); margin-bottom: 48px;
  display: inline-flex; align-items: center; gap: 14px;
}
.cs-gallery-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--brand-blue); }
.cs-gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cs-gallery-item {
  position: relative; overflow: hidden; cursor: zoom-in; background: var(--neutral-200);
  border-radius: 3px;
}
.cs-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-expo); display: block; }
.cs-gallery-item:hover img { transform: scale(1.05); }
.cs-gallery-item.span-3 { grid-column: span 3; aspect-ratio: 16/10; }
.cs-gallery-item.span-2 { grid-column: span 2; aspect-ratio: 4/3; }
.cs-gallery-item.span-6 { grid-column: span 6; aspect-ratio: 21/9; }
@media (max-width: 860px) {
  .cs-gallery-grid { grid-template-columns: 1fr; }
  .cs-gallery-item.span-3, .cs-gallery-item.span-2, .cs-gallery-item.span-6 { grid-column: span 1; aspect-ratio: 4/3; }
}

/* Lightbox */
.cs-lightbox {
  position: fixed; inset: 0; z-index: 1010;
  background: rgba(10,10,8,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 48px;
  opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-out);
  cursor: zoom-out;
}
.cs-lightbox.is-open { opacity: 1; pointer-events: auto; }
.cs-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 40px 120px rgba(0,0,0,0.6); }

/* Closing / next */
.cs-next-section { padding: clamp(72px, 9vw, 140px) 0 clamp(96px, 11vw, 180px); }
.cs-next-card {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end;
  padding: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 80px);
  background: var(--brand-black); color: #fff; border-radius: 12px;
  position: relative; overflow: hidden;
}
.cs-next-h { font-family: var(--font-sans); font-weight: 700; font-size: clamp(28px, 3.4vw, 56px); line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; color: #fff; }
.cs-next-link {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 28px; cursor: pointer; background: transparent; border: 0; padding: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-blue);
}
.cs-next-link .arrow { transition: transform 320ms var(--ease-expo); }
.cs-next-link:hover .arrow { transform: translateX(8px); }
@media (max-width: 860px) { .cs-next-card { grid-template-columns: 1fr; gap: 32px; } }

/* Reveal inside experience (own observer toggles .cs-in) */
.cs-reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-expo), transform 900ms var(--ease-expo); }
.cs-reveal.cs-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-exp, .cs-reveal { transition: none; opacity: 1; transform: none; }
}

/* ============================================================================
   CLIENT WALL — monochrome roster of organisations who commission our work
   ============================================================================ */
.client-wall { background: var(--neutral-50); border-top: 1px solid var(--border-subtle); }
.client-wall-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 4vw, 56px);
}
.client-wall-head .lede { max-width: 38ch; margin: 0; }

/* The roster: an institutional ledger of hairline-divided cells.
   14 logos → an even 7×2 on desktop/tablet, 2×7 on mobile. No orphans.
   Shorter cells than before so a larger roster reads in *less* height. */
.client-logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--neutral-0);
}
.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 22px 18px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
/* clear the right edge of each row's last cell, and the bottom edge of the last row.
   Gated to ≥701px so these higher-specificity :nth rules can't leak into the
   2-column mobile layout below and wipe out its row dividers. */
@media (min-width: 701px) {
  .client-logos .client-logo:nth-child(7n) { border-right: 0; }
  .client-logos .client-logo:nth-last-child(-n+7) { border-bottom: 0; }
}
.client-logo img {
  width: auto;
  max-width: 92%;
  max-height: 34px;
  object-fit: contain;
  /* Normalise wildly different brand colours into one quiet ink, then resolve
     to full colour on hover for a small moment of life. */
  filter: grayscale(1) opacity(0.5);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.client-logo:hover img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.03);
}

/* Optical balancing: every logo is capped to read at one consistent visual mass,
   regardless of its native aspect ratio or ink density. Outline / delicate marks
   are given more height; solid badges and heavy wordmarks are pulled smaller. */
.client-logo--mrc img        { max-height: 53px; }
.client-logo--endeavour img  { max-height: 36px; }
.client-logo--crown img      { max-height: 56px; }
.client-logo--stkevins img   { max-height: 56px; }
.client-logo--nightingale img{ max-height: 39px; }
.client-logo--gleneira img   { max-height: 53px; }
.client-logo--bayside img    { max-height: 42px; }
.client-logo--portphillip img{ max-height: 42px; }
/* new additions */
.client-logo--vsba img       { max-height: 45px; max-width: 96%; }
.client-logo--ndis img       { max-height: 48px; }
.client-logo--wickton img    { max-height: 34px; max-width: 96%; }
.client-logo--kia img        { max-height: 34px; }
.client-logo--nissan img     { max-height: 59px; }
.client-logo--ram img        { max-height: 34px; }

@media (max-width: 1000px) {
  /* still 7-up so rows stay even */
  .client-logo { min-height: 116px; padding: 18px 14px; }
}
@media (max-width: 700px) {
  .client-logos { grid-template-columns: repeat(2, 1fr); }
  .client-logo { min-height: 100px; padding: 18px 16px; }
  /* reset desktop divider rules, then re-derive for 2 columns */
  .client-logos .client-logo { border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
  .client-logos .client-logo:nth-child(2n) { border-right: 0; }
  .client-logos .client-logo:nth-last-child(-n+2) { border-bottom: 0; }
  /* compact caps so the roster stays short on a phone */
  .client-logo img             { max-height: 39px; }
  .client-logo--mrc img        { max-height: 42px; }
  .client-logo--endeavour img  { max-height: 31px; }
  .client-logo--crown img      { max-height: 48px; }
  .client-logo--stkevins img   { max-height: 48px; }
  .client-logo--nightingale img{ max-height: 34px; }
  .client-logo--gleneira img   { max-height: 45px; }
  .client-logo--bayside img    { max-height: 36px; }
  .client-logo--portphillip img{ max-height: 36px; }
  .client-logo--vsba img       { max-height: 36px; }
  .client-logo--ndis img       { max-height: 39px; }
  .client-logo--wickton img    { max-height: 31px; }
  .client-logo--kia img        { max-height: 31px; }
  .client-logo--nissan img     { max-height: 53px; }
  .client-logo--ram img        { max-height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-logo img, .client-logo:hover img { transition: none; }
}


/* Quiet accreditation strip — sits between hero video and the mission row.
   Visual goal: low-key trust signal. Tiny eyebrow label, grayscale logos at a
   restrained height, thin top/bottom hairlines. Not a "look at us" banner. */
.accred-strip {
  padding: 22px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--neutral-0);
}
.accred-strip-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.accred-strip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6b66);
  flex-shrink: 0;
}
.accred-strip-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: center;
}
.accred-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.accred-strip-item img {
  height: 44px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity var(--dur-slow, 400ms) var(--ease-out, ease), transform var(--dur-slow, 400ms) var(--ease-out, ease);
}
.accred-strip-item:hover img { opacity: 1; transform: scale(1.03); }
.accred-strip-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6b66);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  flex-shrink: 0;
}
.accred-strip-link:hover { color: var(--brand-black, #000); }

@media (max-width: 700px) {
  .accred-strip { padding: 18px 0; }
  .accred-strip-row { gap: 16px; justify-content: center; }
  .accred-strip-label { width: 100%; text-align: center; }
  .accred-strip-logos { gap: 24px; }
  .accred-strip-item img { height: 30px; max-width: 88px; }
  .accred-strip-link { width: 100%; text-align: center; }
}


/* Editorial accreditation ribbon — replaces the logo strip. Typographic chips
   in a single hairline-bordered row on desktop, 2×2 grid on mobile. Reads as
   credentials, not a logo wall. */
.accred-ribbon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.accred-ribbon-item,
.accred-ribbon-link {
  padding: 22px 24px;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
}
.accred-ribbon-item:last-of-type,
.accred-ribbon-link { border-right: 0; }
.accred-ribbon-code {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-black, #17171a);
  line-height: 1;
}
.accred-ribbon-label {
  font-size: 12px;
  color: var(--text-muted, #6b6b66);
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.accred-ribbon-link { justify-content: center; }
.accred-ribbon-link a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6b66);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}
.accred-ribbon-link a::after {
  content: '→';
  transition: transform var(--dur-slow, 400ms) var(--ease-out, ease);
}
.accred-ribbon-link a:hover { color: var(--brand-black, #17171a); }
.accred-ribbon-link a:hover::after { transform: translateX(4px); }

@media (max-width: 820px) {
  .accred-ribbon { grid-template-columns: repeat(2, 1fr); }
  .accred-ribbon-item,
  .accred-ribbon-link { padding: 18px 18px; min-height: 72px; }
  /* re-derive dividers for 2 columns */
  .accred-ribbon-item:nth-child(2n) { border-right: 0; }
  .accred-ribbon-item:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); }
  /* link spans full width on the third row */
  .accred-ribbon-link {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-subtle);
    border-right: 0;
    align-items: center;
  }
  .accred-ribbon-link a { align-self: center; }
  /* the 3rd & 4th items still need a divider between them */
  .accred-ribbon-item:nth-child(3) { border-right: 1px solid var(--border-subtle); }
}
@media (max-width: 480px) {
  .accred-ribbon-code { font-size: 13px; }
  .accred-ribbon-label { font-size: 11px; }
}


/* Logo + text version of the ribbon. Logo sits left of the code/label, both
   pinned to a consistent baseline so the row feels engineered, not pasted. */
.accred-ribbon-item { flex-direction: row !important; align-items: center; gap: 14px !important; }
.accred-ribbon-logo {
  height: 44px;
  width: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.accred-ribbon-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
@media (max-width: 820px) {
  .accred-ribbon-logo { height: 38px; width: 38px; }
  .accred-ribbon-item { gap: 12px !important; }
}
@media (max-width: 480px) {
  .accred-ribbon-logo { height: 34px; width: 34px; }
}


/* Mobile refinement: drop the verbose discipline labels and the divider lines,
   stack each accreditation vertically (logo over code), and use a tight 4-up
   grid so the credentials sit as a single tidy row instead of a 2x2 block. */
@media (max-width: 820px) {
  .accred-ribbon {
    grid-template-columns: repeat(4, 1fr) !important;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
  }
  .accred-ribbon-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 8px !important;
    padding: 18px 8px !important;
    min-height: 100px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .accred-ribbon-logo { height: 40px !important; width: 40px !important; }
  .accred-ribbon-code { font-size: 11px; letter-spacing: 0.1em; }
  /* hide the long discipline label on mobile — logo + code is the credential */
  .accred-ribbon-label { display: none; }
  /* link drops to its own row, centered, less heavy */
  .accred-ribbon-link {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 14px 16px !important;
    min-height: 0 !important;
    justify-content: center;
    align-items: center;
  }
  .accred-ribbon-link a { align-self: center; font-size: 10px; }
}
@media (max-width: 420px) {
  .accred-ribbon-item { padding: 14px 4px !important; gap: 6px !important; }
  .accred-ribbon-logo { height: 34px !important; width: 34px !important; }
  .accred-ribbon-code { font-size: 10px; }
}


/* Accreditation strip — on-dark variant, sits inside the belief band beneath
   the stats. Hairline rule on top, small caps "Accredited" label, four logo
   tiles (white via filter), and a quiet "View certifications" link. */
.accred-onDark { color: rgba(255,255,255,0.85); position: relative; }
.accred-onDark-rule {
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin-bottom: 28px;
}
.accred-onDark-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.accred-onDark-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.accred-onDark-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.accred-onDark-item img {
  height: 40px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
  /* nudge brand-coloured PNGs toward white so they read as a uniform credential row */
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: opacity var(--dur-slow, 400ms) var(--ease-out, ease);
}
.accred-onDark-item:hover img { opacity: 1; }
.accred-onDark-code {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  line-height: 1;
}
.accred-onDark-link {
  margin-left: auto;
}
.accred-onDark-link a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.accred-onDark-link a::after {
  content: '→';
  transition: transform var(--dur-slow, 400ms) var(--ease-out, ease);
}
.accred-onDark-link a:hover { color: #fff; }
.accred-onDark-link a:hover::after { transform: translateX(4px); }

@media (max-width: 820px) {
  .accred-onDark { margin-top: 48px !important; }
  .accred-onDark-row { gap: 24px; justify-content: flex-start; }
  .accred-onDark-label { width: 100%; }
  .accred-onDark-item { gap: 8px; }
  .accred-onDark-item img { height: 32px; max-width: 46px; }
  .accred-onDark-code { font-size: 11px; }
  .accred-onDark-link { margin-left: 0; width: 100%; margin-top: 8px; }
}
@media (max-width: 480px) {
  .accred-onDark-row { gap: 16px; }
  .accred-onDark-item img { height: 28px; max-width: 40px; }
  .accred-onDark-code { font-size: 10px; }
}

/* =======================================================================
   CONTACT PAGE — find-us storefront photo
   ======================================================================= */
.contact-findus {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.contact-findus-copy { max-width: 42ch; }
.contact-findus-photo {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 5;
  background: var(--neutral-100);
}
.contact-findus-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 32% 60%;
}
.contact-findus-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(10,10,8,0.72) 100%);
  pointer-events: none;
}
.contact-findus-addr {
  position: absolute; left: 28px; right: 28px; bottom: 24px;
  display: flex; flex-direction: column; gap: 6px;
  color: #fff;
}
.contact-findus-addr-label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-blue);
}
.contact-findus-addr-line {
  font-size: 19px; font-weight: 600; line-height: 1.3;
}
@media (max-width: 860px) {
  .contact-findus { grid-template-columns: 1fr; gap: 32px; }
  .contact-findus-copy { max-width: none; }
  .contact-findus-photo { aspect-ratio: 3 / 4; }
}

/* =======================================================================
   SERVICES PAGE — sticky number/title, cascading capabilities
   ======================================================================= */
.svc-scroll {
  position: relative;
  padding: 72px 0;
}
.svc-scroll + .svc-scroll { border-top: 1px solid var(--border-subtle); }
.svc-scroll-inner {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: 80px;
  align-items: start;
}
.svc-sticky {
  position: sticky;
  top: 140px;
  align-self: start;
}
.svc-mega {
  display: flex;
  align-items: center;
  gap: 24px;
}
.svc-mega-num {
  font-family: var(--font-display);
  font-size: clamp(88px, 10vw, 168px);
  font-weight: 700;
  line-height: 0.85;
  color: var(--brand-blue);
  letter-spacing: -0.02em;
  display: inline-block;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 900ms var(--ease-expo), opacity 900ms var(--ease-expo);
}
.svc-mega-rule {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-expo) 200ms;
}
.svc-sticky.in .svc-mega-num { opacity: 1; transform: none; }
.svc-sticky.in .svc-mega-rule { transform: scaleX(1); }
.svc-title {
  margin-top: 16px;
  max-width: 14ch;
}
.svc-body {
  padding-top: 16px;
}
.svc-lede {
  font-size: 24px;
  line-height: 1.4;
  color: var(--brand-black);
  max-width: 52ch;
  margin-bottom: 20px;
}
.svc-blurb {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 60ch;
  margin-bottom: 40px;
}
.svc-caps-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}
.svc-caps-count {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.08em;
}
.svc-caps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-cap {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}
.svc-cap:last-child { border-bottom: none; }
.svc-cap-n {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--brand-blue);
}
.svc-cap-t {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-black);
}

@media (max-width: 900px) {
  .svc-scroll { padding: 48px 0; }
  .svc-scroll-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .svc-sticky {
    position: relative;
    top: auto;
  }
  .svc-mega-num { font-size: clamp(80px, 22vw, 140px); }
  .svc-title { margin-top: 12px; max-width: none; }
  .svc-body { padding-top: 0; }
  .svc-lede { font-size: 20px; margin-bottom: 24px; }
  .svc-blurb { margin-bottom: 40px; }
  .svc-cap { grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; }
  .svc-cap-t { font-size: 17px; }
}