/* =========================================================
   Golden Circle Group — Homepage
   Visual identity matches goldencircle.group:
   - Orange #FF4F16 base
   - Soft cream/white ink
   - Open Sans, large and quiet
   - Generous space, editorial pacing
========================================================= */

:root {
  /* Palette (light, editorial) */
  --orange: #FF4F16;            /* accent only — display headlines, eyebrows */
  --orange-deep: #E03D08;
  /* Dark editorial palette */
  --paper: #000000;             /* page background */
  --paper-soft: #000000;        /* same — no banding */
  --ink: #FFFFFF;               /* body text */
  --ink-soft: rgba(255, 255, 255, 0.78);
  --ink-dim: rgba(255, 255, 255, 0.55);
  --ink-ghost: rgba(255, 255, 255, 0.22);
  --ink-line: rgba(255, 255, 255, 0.18);

  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 64px);
  --pad-y: clamp(80px, 14vh, 160px);

  --t-display: clamp(40px, 7vw, 96px);
  --t-hero: clamp(48px, 9vw, 132px);
  --t-2xl: clamp(32px, 5vw, 64px);
  --t-xl: clamp(22px, 2.4vw, 32px);
  --t-lg: clamp(18px, 1.6vw, 22px);
  --t-base: 16px;
  --t-sm: 14px;
  --t-xs: 12px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  /* Helvetica Neue first — Mac/iOS native; fallback to Inter (Tight) / system grotesques. */
  font-family: 'Helvetica Neue', 'HelveticaNeue', Helvetica, 'Inter', 'Arial', system-ui, -apple-system, sans-serif;
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--orange); color: #FFF; }

/* =========================================================
   Site header
========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background 280ms var(--ease-out), backdrop-filter 280ms var(--ease-out), padding 280ms var(--ease-out);
}
/* Absolutely center the nav cluster horizontally, top-justify vertically */
.site-header__nav {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  align-items: flex-start;
}
.site-header.is-scrolled .site-header__nav {
  top: 16px;
}
@media (max-width: 860px) {
  .site-header__nav { position: static; transform: none; }
}
.site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 12px var(--gutter);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.site-header.is-scrolled .site-header__logo,
.site-header.is-scrolled .site-header__wordmark {
  color: var(--ink);
}
.site-header.is-scrolled .site-header__nav > a,
.site-header.is-scrolled .site-header__nav .nav-group__trigger {
  color: var(--ink);
}
.site-header.is-scrolled .site-header__nav > a:hover,
.site-header.is-scrolled .site-header__nav .nav-group__trigger:hover,
.site-header.is-scrolled .site-header__nav .nav-group.is-open .nav-group__trigger {
  color: var(--orange);
}
.site-header.is-scrolled .site-header__nav > a::after,
.site-header.is-scrolled .site-header__nav .nav-group__trigger::after {
  background: var(--orange);
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.logo-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  color: var(--ink);
  flex: 0 0 auto;
}
.site-header__lockup {
  height: 22px;
  width: auto;
  display: block;
}
.site-header.is-scrolled .site-header__lockup {
  height: 20px;
}
.site-header__wordmark {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.site-header__nav {
  display: flex;
  gap: clamp(20px, 2.6vw, 38px);
  align-items: flex-start;
}
.site-header__nav > a,
.site-header__nav .nav-group__trigger {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  font-weight: 500;
  transition: color 200ms ease;
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  height: 13px;
  text-decoration: none;
}
/* Wrapper that contains the dropdown trigger — keep it the same height as a plain
   anchor so all five top-level items share a baseline. */
.site-header__nav .nav-group {
  display: inline-flex;
  align-items: center;
  height: 13px;
  line-height: 1;
}
.site-header__nav .nav-group__trigger {
  /* Center contents to match the wrapper so caret + label sit on the same
     baseline as the plain <a> links next to them. */
  align-items: center;
  height: 13px;
}
.site-header__nav > a:hover,
.site-header__nav .nav-group__trigger:hover,
.site-header__nav .nav-group.is-open .nav-group__trigger {
  color: var(--orange);
}
.site-header__nav > a::after,
.site-header__nav .nav-group__trigger::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out);
}
.site-header__nav > a:hover::after,
.site-header__nav .nav-group__trigger:hover::after,
.site-header__nav .nav-group.is-open .nav-group__trigger::after {
  transform: scaleX(1);
}

/* Dropdown groups */
.nav-group {
  position: relative;
}
.nav-group__caret {
  width: 9px;
  height: 6px;
  color: currentColor;
  transition: transform 220ms var(--ease-out);
  /* Force baseline alignment so caret can't shift the button's text baseline */
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.nav-group.is-open .nav-group__caret {
  transform: rotate(180deg);
}
.nav-group__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, -4px);
  background: transparent; padding: 0;
  display: flex; gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 220ms ease; z-index: 250;
}
.nav-group.is-open .nav-group__menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.nav-group__menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-group__menu a {
  display: flex; align-items: flex-end; justify-content: flex-start;
  width: 96px; height: 116px; padding: 12px 10px 12px;
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,241,232,0.7);
  color: #FFF1E8;
  font-size: 11px; line-height: 1.1; letter-spacing: 0.02em;
  text-transform: none; white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.nav-group__menu a:hover,
.nav-group__menu a:focus-visible {
  color: var(--orange); border-color: var(--orange); background: rgba(10,10,10,0.72);
}
.nav-group__menu a::after { display: none; }
.nav-group__menu a[aria-current="page"] { color: var(--orange); border-color: var(--orange); }

/* Brand chips show logos instead of text labels.
   Override default bottom-align: center the logo in the 96×116 tile. */
.nav-group__menu a.nav-chip {
  align-items: center; justify-content: center;
  padding: 14px;
}
.nav-chip__logo {
  display: block;
  width: 100%;
  max-width: 72px;
  max-height: 36px;
  object-fit: contain;
  transition: opacity 200ms ease, transform 200ms ease;
}
/* Per-brand sizing tuned to logo aspect ratios.
   686 / NVL-GARDE — ratio 2.48:1
   framework      — ratio 4.78:1 (very wide)
   reclab         — ratio 3.92:1 (wide)                                  */
.nav-chip__logo--nvl       { max-width: 76px; max-height: 32px; }
.nav-chip__logo--framework { max-width: 78px; max-height: 18px; }
.nav-chip__logo--reclab    { max-width: 80px; max-height: 22px; filter: invert(1); }
.nav-group__menu a.nav-chip:hover .nav-chip__logo,
.nav-group__menu a.nav-chip:focus-visible .nav-chip__logo { opacity: 0.85; }

/* =========================================================
   Mobile nav (hamburger → drop-sheet from top)
========================================================= */
.nav-toggle {
  display: none;
  background: transparent; border: 0; padding: 8px; margin: 0;
  cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* When the mobile sheet is open, lift the toggle OUT of the header's stacking
   context (header is z:50) by fixing it to the viewport with a much higher
   z-index so the X stays tappable above the sheet (z:190). */
.nav-toggle[aria-expanded="true"] {
  position: fixed;
  top: 10px;
  right: var(--gutter);
  z-index: 220;
  color: #FFF1E8;
}
.nav-toggle__bars { display: block; width: 22px; height: 14px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform 240ms ease, opacity 200ms ease, top 240ms ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 50%; transform: translateY(-50%); display: block; }
.nav-toggle__bars::after { top: calc(100% - 1.5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 50%; transform: translateY(-50%) rotate(-45deg); }

.mobile-sheet {
  position: fixed; top: 0; left: 0; right: 0;
  background: #0A0A0A;
  color: #FFF1E8;
  padding: 88px clamp(20px, 6vw, 36px) 32px;
  transform: translateY(-100%);
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
  z-index: 190;
  display: none;
  max-height: 100vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-sheet.is-open { transform: translateY(0); }
.mobile-sheet__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-sheet__list li { border-bottom: 1px solid rgba(255,241,232,0.14); }
.mobile-sheet__list a {
  display: block; padding: 18px 4px;
  color: #FFF1E8; text-decoration: none;
  font-size: 18px; letter-spacing: 0.01em;
  text-align: right;
  transition: color 200ms ease;
}
.mobile-sheet__list a:hover, .mobile-sheet__list a:focus-visible { color: #FF4F16; }
.mobile-sheet__group-label {
  display: block; padding: 16px 4px 6px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #FF4F16;
  text-align: right;
}
/* Sub-items: no divider between siblings, tighter spacing */
.mobile-sheet__list .mobile-sheet__sub { border-bottom: none; }
.mobile-sheet__list .mobile-sheet__sub a { padding: 8px 4px; }
.mobile-sheet__list .mobile-sheet__sub:first-of-type a { padding-top: 4px; }
.mobile-sheet__list .mobile-sheet__sub--last { border-bottom: 1px solid rgba(255,241,232,0.14); }
.mobile-sheet__list .mobile-sheet__sub--last a { padding-bottom: 14px; }
/* Group label sits flush with its siblings (no divider above the group block) */
.mobile-sheet__list .mobile-sheet__group-start { border-bottom: none; }

/* Mobile sheet brand chips — 2-up horizontal row mirroring desktop dropdown.
   Sits inside the existing right-aligned mobile-sheet list. */
.mobile-sheet__list .mobile-sheet__chips-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px 0 14px;
  border-bottom: 1px solid rgba(255,241,232,0.14);
}
.mobile-sheet__list .m-chip {
  display: flex; align-items: center; justify-content: center;
  height: 80px; padding: 14px;
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,241,232,0.7);
  text-decoration: none;
  /* Kill the default iOS tap highlight so our :active state shows clean */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 200ms ease, border-color 200ms ease;
}
.mobile-sheet__list .m-chip:hover,
.mobile-sheet__list .m-chip:focus-visible,
.mobile-sheet__list .m-chip:active {
  background: rgba(10,10,10,0.72);
  border-color: #FF4F16;
}
.m-chip__logo {
  display: block;
  width: 100%;
  max-width: 96px;
  max-height: 40px;
  object-fit: contain;
  transition: filter 200ms ease, opacity 200ms ease;
}
.m-chip__logo--nvl       { max-width: 96px; max-height: 36px; }
.m-chip__logo--framework { max-width: 110px; max-height: 22px; }
.m-chip__logo--reclab    { max-width: 112px; max-height: 28px; filter: invert(1); }
.mobile-sheet__list .m-chip:hover .m-chip__logo,
.mobile-sheet__list .m-chip:focus-visible .m-chip__logo,
.mobile-sheet__list .m-chip:active .m-chip__logo {
  filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(2100%) hue-rotate(347deg) brightness(101%) contrast(101%);
  opacity: 1;
}

@media (max-width: 860px) {
  .site-header__nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .mobile-sheet { display: block; }
}

/* =========================================================
   Hero
========================================================= */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--gutter);
  position: relative;
  background: var(--paper);
}
.hero__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  max-width: var(--max-w);
}
.hero__mark {
  width: clamp(72px, 9vw, 140px);
  flex: 0 0 auto;
  color: var(--ink);
}
.hero__mark svg,
.hero__mark img { width: 100%; height: auto; display: block; }
.hero__lockup {
  width: clamp(320px, 60vw, 880px);
  height: auto;
  display: block;
  margin: 0;
}
.hero__wordmark {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  color: var(--orange);
}
.hero__tag {
  display: none;
}
.hero__chevron {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  opacity: 0.7;
  animation: bob 2.4s ease-in-out infinite;
  transition: opacity 200ms ease;
}
.hero__chevron:hover { opacity: 1; }
.hero__chevron svg { width: 24px; height: 24px; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

@media (max-width: 720px) {
  .hero__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__mark { width: 80px; }
}

/* =========================================================
   Panels — shared layout
========================================================= */
.panel {
  padding: var(--pad-y) var(--gutter);
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: clamp(28px, 5vw, 80px);
  max-width: 1480px;
  margin: 0 auto;
  /* Inset hairline divider — starts ~14vw in, stops short of right edge for visual interest */
  position: relative;
}
.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14vw;
  right: 22vw;
  height: 1px;
  background: var(--ink-line);
}
/* No divider above the first panel (which immediately follows the hero) */
.hero + .panel::before { display: none; }
/* Alternate the inset side for rhythm */
.panel--structure::before  { left: 8vw;  right: 30vw; }
.panel--brands::before     { left: 26vw; right: 10vw; }
.panel--values::before     { left: 12vw; right: 28vw; }
.panel--leadership::before { left: 30vw; right: 14vw; }
.panel--contact::before    { left: 18vw; right: 24vw; }
.panel__index {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 96px;
  align-self: start;
  font-size: var(--t-sm);
  color: var(--ink-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.panel__num {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.panel__name {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-lg);
  text-transform: none;
  letter-spacing: -0.01em;
}
.panel__body { max-width: 880px; }

.lede {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 36px 0;
  color: var(--orange);
}
.big-quote {
  font-size: var(--t-xl);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 32px 0;
  color: var(--ink);
}
.copy {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px 0;
  max-width: 60ch;
}
.pull {
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 40px 0 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
  max-width: 22ch;
}
.pull--small {
  font-size: var(--t-lg);
  max-width: 38ch;
}
.rule {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}

.motto {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--orange);
}
.motto span:nth-child(2) {
  padding-left: 1.2em;
}

@media (max-width: 860px) {
  .panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .panel__index {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }
  .panel__name { font-size: var(--t-lg); }
}

/* =========================================================
   Operating System layers
========================================================= */
.os-layers {
  list-style: none;
  margin: 40px 0 0 0;
  padding: 0;
  border-top: 1px solid var(--ink-line);
}
.os-layer {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-line);
  align-items: start;
}
.os-layer__n {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.7;
  text-transform: uppercase;
  padding-top: 6px;
}
.os-layer__body h4 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px 0;
  color: var(--ink);
}
.os-layer__body p {
  font-size: var(--t-base);
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .os-layer { grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; }
  .os-layer__n { font-size: var(--t-sm); padding-top: 4px; }
}

/* =========================================================
   Client roster (Framework)
========================================================= */
.client-roster {
  list-style: none;
  margin: 18px 0 22px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.client-roster li {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  padding: 5px 12px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  letter-spacing: 0.005em;
}

/* =========================================================
   Disciplines
========================================================= */
.disciplines {
  list-style: none;
  margin: 32px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink-line);
}
.disciplines li {
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--t-lg);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  position: relative;
}
.disciplines li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 14px;
  background: var(--ink);
  border-radius: 50%;
  transform: translateY(-3px);
}

/* =========================================================
   Brands / Divisions
========================================================= */
.brands {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 96px);
  max-width: none;
}
.division {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.division__name {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.division__lead {
  font-size: var(--t-base);
  color: var(--ink-soft);
  margin: 0 0 16px 0;
  max-width: 52ch;
}
.division__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
@media (max-width: 720px) {
  .division__grid { grid-template-columns: 1fr; }
}
.brand-card--wide { grid-column: 1 / -1; min-height: 0; }

.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  padding: 24px 24px 22px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out), transform 320ms var(--ease-out);
  overflow: hidden;
}
.brand-card:hover {
  background: rgba(255, 79, 22, 0.06);
  border-color: var(--orange);
  color: var(--orange);
}
.brand-card--logo:hover .brand-card__label,
.brand-card--logo:hover .brand-card__sub,
.brand-card--logo:hover .brand-card__arrow { color: var(--orange); }
.brand-card--logo:hover .brand-card__logo--image img {
  /* Flip white logos to orange on hover via a colored drop shadow trick using filter */
  filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(2100%) hue-rotate(347deg) brightness(101%) contrast(101%);
}
/* The featured (live) case study is the same shape as the others,
   but lifted with a brighter inner surface and a subtle ring. */
.brand-card--feature {
  background: var(--ink);
  color: var(--orange);
  border-color: var(--ink);
  cursor: pointer;
}
.brand-card--feature:hover {
  transform: translateY(-2px);
  background: var(--ink);
  border-color: var(--ink);
}
.brand-card--feature .brand-card__label,
.brand-card--feature .brand-card__sub,
.brand-card--feature .brand-card__cta {
  color: var(--orange);
}
.brand-card--feature .brand-card__title {
  color: var(--orange);
}
.brand-card--feature .brand-card__cta {
  border-top-color: rgba(224, 61, 8, 0.25);
}

.brand-card__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-card__title {
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-top: auto;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
.brand-card__sub {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.brand-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-card__cta svg {
  width: 18px; height: 18px;
  transition: transform 320ms var(--ease-out);
}
.brand-card:hover .brand-card__cta svg { transform: translateX(6px); }
.brand-card__cta--mute { color: var(--ink-dim); }
.brand-card--soon { cursor: default; }
.brand-card--soon .brand-card__title { color: var(--ink-soft); }

/* =========================================================
   Brand cards — logo variant (section 03)
========================================================= */
.brand-card--logo {
  cursor: pointer;
  min-height: 360px;
  padding: 26px 26px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  gap: 18px;
}
.brand-card--logo .brand-card__label {
  color: var(--ink-soft);
  justify-content: flex-start;
}
.brand-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 180px;
  padding: 12px 8px;
}
/* Uniform optical size across logos with very different aspect ratios.
   Each logo is constrained by BOTH a max height and a max width so wide
   lockups (RECLAB ~10:1, Framework ~5:1) read at the same visual weight
   as the squarer marks (686, NVL-GARDE ~2.5:1). */
.brand-card__logo--image img {
  width: auto;
  height: auto;
  /* Default cap (used by 686 + NVL-GARDE — both 2.48:1). */
  max-width: 260px;
  max-height: 110px;
  object-fit: contain;
  /* Force logos to white so they read on black */
  filter: brightness(0) invert(1);
  transition: transform 420ms var(--ease-out), filter 280ms var(--ease-out);
}
/* Per-brand tuning so the optical mass matches across very different aspect ratios.
   686 + NVL-GARDE are 2.48:1 — use defaults above.
   Framework is 4.78:1 — height clamp keeps the wordmark legible.
   RECLAB compass is 3.92:1 — boldest mark, gets the most pixels. */
.brand-card__logo--image img[src*="framework"] {
  max-width: 280px; max-height: 60px;
}
/* RECLAB compass mark — sized to sit comfortably within the card with breathing
   room on either side (was 320px, pushed to edges). */
.brand-card__logo--image img[src*="reclab"] {
  max-width: 240px; max-height: 80px;
}
.brand-card--logo:hover .brand-card__logo--image img {
  transform: scale(1.03);
}
.brand-card__sub {
  text-align: center;
}
/* Reserve a fixed 3-line copy block on logo cards so the arrows align
   across cards regardless of copy length, and the copy sits at the
   TOP of that reserved block (extra space falls below the text, just
   above the arrow). */
.brand-card--logo .brand-card__sub {
  margin-top: 0;
  text-align: center;
  align-self: start;     /* top-justify inside its grid row */
  min-height: calc(1.5em * 3); /* 3 lines @ line-height 1.5 */
}
@media (max-width: 720px) {
  .brand-card--logo .brand-card__sub { min-height: calc(1.5em * 3); }
}

/* Animated arrow affordance — replaces the CTA */
.brand-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  color: var(--ink);
  opacity: 0.85;
}
.brand-card__arrow svg {
  width: 30px;
  height: 30px;
  animation: brand-arrow-pulse 1.8s var(--ease-out) infinite;
  transition: transform 320ms var(--ease-out);
}
.brand-card--logo:hover .brand-card__arrow {
  opacity: 1;
}
.brand-card--logo:hover .brand-card__arrow svg {
  animation-play-state: paused;
  transform: translateX(8px);
}
@keyframes brand-arrow-pulse {
  0%   { transform: translateX(0);    opacity: 0.55; }
  50%  { transform: translateX(8px);  opacity: 1; }
  100% { transform: translateX(0);    opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-card__arrow svg { animation: none; }
}

/* =========================================================
   Alternating panel shades — full-bleed bands so 01/02/03…
   read as discrete sections against the orange field.
========================================================= */
/* Uniform black background — sections separated by offset hairlines */
.panel--vision     { --panel-bg: var(--paper); }
.panel--structure  { --panel-bg: var(--paper); }
.panel--brands     { --panel-bg: var(--paper); }
.panel--values     { --panel-bg: var(--paper); }
.panel--leadership { --panel-bg: var(--paper); }
.panel--contact    { --panel-bg: var(--paper); }

.panel {
  position: relative;
  background: var(--panel-bg, var(--paper));
  /* Full-bleed: extend the section background past the centered max-width */
  box-shadow: 0 0 0 100vmax var(--panel-bg, var(--paper));
  clip-path: inset(0 -100vmax);
}

/* =========================================================
   Values list
========================================================= */
.values-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.values-list li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--ink-line);
  font-size: var(--t-xl);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.values-list li:last-child { border-bottom: 1px solid var(--ink-line); }
.values-list__n {
  font-size: var(--t-sm);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-weight: 600;
}

/* =========================================================
   Leadership / People
========================================================= */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin: 56px 0 32px 0;
  border-top: 1px solid var(--ink-line);
}
.person {
  padding: 24px 0 24px 0;
  border-bottom: 1px solid var(--ink-line);
  padding-right: 24px;
}
.person__name {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.person__title {
  margin: 4px 0 10px 0;
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.person__bio {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36ch;
}

/* =========================================================
   Contact
========================================================= */
.contact {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact__cta {
  display: inline-block;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  width: fit-content;
  transition: padding 240ms var(--ease-out), opacity 200ms ease;
}
.contact__cta:hover {
  opacity: 0.8;
  padding-bottom: 10px;
}
.contact__sub {
  margin-top: 24px;
  color: var(--ink-dim);
  font-size: var(--t-sm);
}

/* =========================================================
   Footer
========================================================= */
.site-footer {
  padding: 32px var(--gutter);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22vw;
  right: 18vw;
  height: 1px;
  background: var(--ink-line);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 600px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Reveal on scroll (added by JS via .reveal)
========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__chevron { animation: none; }
}

/* =========================================================
   Editorial breaks — full-bleed photo moments with overlay type
   Inspired by sports-magazine spread layouts (B&W + orange caps)
========================================================= */
.editorial {
  position: relative;
  width: 100%;
  background: #0A0A0A;
  overflow: hidden;
  color: #FFF1E8;
}
.editorial__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(1) contrast(1.08) brightness(0.78);
  opacity: 0.78;
  z-index: 1;
}
.editorial__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 35%, rgba(10,10,10,0.55) 100%);
  z-index: 2;
}
.editorial__inner {
  position: relative; z-index: 3;
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 180px) clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column;
}
.editorial__eyebrow {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,241,232,0.62);
  margin: 0 0 18px;
}
.editorial__display {
  font-family: var(--font-display, 'Open Sans'), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 14vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: #FF4F16;
  margin: 0;
  text-transform: none;
}
.editorial__display em {
  font-style: normal;
  color: #FFF1E8;
  display: block;
}
.editorial__sub {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  max-width: 540px;
  color: rgba(255,241,232,0.86);
  margin: 28px 0 0;
}

/* Stats row — Wilder-style "51 KO's" numeric callouts */
.editorial__stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(32px, 5vh, 56px);
  padding-top: 28px;
  border-top: 1px solid rgba(255,241,232,0.18);
}
.editorial__stat {
  display: flex; flex-direction: column;
}
.editorial__stat-num {
  font-family: var(--font-display, 'Open Sans'), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.9;
  color: #FF4F16;
  letter-spacing: -0.02em;
}
.editorial__stat-label {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,241,232,0.7);
  margin-top: 10px;
}

/* Variant: side-by-side photo+pull-quote (for "ghost" image) */
.editorial--split {
  background: #FFF1E8;
  color: #1F1A14;
}
.editorial--split .editorial__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 64px);
}
.editorial--split .editorial__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
}
.editorial--split .editorial__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(1) contrast(1.05);
  display: block;
}
.editorial--split .editorial__pull {
  font-family: var(--font-display, 'Open Sans'), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1F1A14;
  margin: 0;
}
.editorial--split .editorial__pull em {
  font-style: italic;
  color: #FF4F16;
}
.editorial--split .editorial__attr {
  margin-top: 28px;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(31,26,20,0.55);
}

/* Hero photo layer — adds a B&W image to the right edge of hero, softly */
.hero__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 42%;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.02) brightness(1.05);
  opacity: 0.32;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 30%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 30%, #000 80%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }
.hero__chevron { z-index: 2; }

@media (max-width: 860px) {
  .hero__photo {
    width: 100%;
    opacity: 0.28;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 60%, #000 100%);
  }
  .editorial--split .editorial__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .editorial--split .editorial__photo { aspect-ratio: 4 / 5; }
  .editorial__stats { gap: 24px; }
}

/* ============================================================
   MOBILE: lock horizontal scroll
   Page was sliding left/right on phones — same fix as RECLAB.
============================================================ */
html, body {
  overflow-x: clip;
  max-width: 100vw;
  overscroll-behavior-x: none;
}
@media screen and (max-width: 860px) {
  html, body {
    overflow-x: clip;
    max-width: 100vw;
    width: 100%;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }
  /* Killswitch: nothing in the document can be wider than the viewport */
  body * { max-width: 100vw; }
  /* Common leak sources: full-bleed images, iframes, wide tables */
  img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
}

/* Brand-chip hover: tint logo orange to match border */
.nav-group__menu a.nav-chip:hover .nav-chip__logo,
.nav-group__menu a.nav-chip:focus-visible .nav-chip__logo {
  filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(2100%) hue-rotate(347deg) brightness(101%) contrast(101%);
  opacity: 1;
}
.nav-group__menu a.nav-chip:hover .nav-chip__logo--reclab,
.nav-group__menu a.nav-chip:focus-visible .nav-chip__logo--reclab {
  filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(2100%) hue-rotate(347deg) brightness(101%) contrast(101%);
}