/* site-v2.css — additive layer for the v2 homepage build.
   Imports the original site.css (and tokens), then adds only the NEW
   patterns the handoff calls for: hero eyebrow treatments, the Trusted-by
   band detail, the Proof (testimonials) section, and a few copy-driven
   tweaks. The original site.css is left untouched so the v1 reference is
   byte-identical. */
@import url('site.css');

/* =============================================================
   SIGNATURE COLOUR BAR — "Drift" animation
   Slow, seamless left-to-right colour current (Speed 2.2× → ~9.1s).
   Overrides the static gradient imported from site.css.
   ============================================================= */
.footer-bar {
  background: linear-gradient(90deg,
     var(--ol-teal) 0%, var(--ol-sage) 12.5%, var(--ol-rose) 25%, var(--ol-orange) 37.5%,
     var(--ol-teal) 50%, var(--ol-sage) 62.5%, var(--ol-rose) 75%, var(--ol-orange) 87.5%, var(--ol-teal) 100%);
  background-size: 200% 100%;
  animation: footer-bar-drift 9.1s linear infinite;
}
@keyframes footer-bar-drift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .footer-bar { animation: none; } }

/* Logo link carries the global orange link underline — remove it. */
.site-nav .brand a { border-bottom: 0; }

/* =============================================================
   HERO — EYEBROW TREATMENTS (hero layout itself is unchanged)
   ============================================================= */

/* Shared: give the eyebrow a touch more air above the title in all three. */
.hero.centered .eyebrow { margin-bottom: 6px; }

/* A · Crown — compass sits above a standard combined eyebrow line. */
.eyebrow-crown { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* B · Legend lockup — the compass is set inline within the eyebrow rule,
   reading like an instrument on a map legend. */
.eyebrow-legend {
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: nowrap;
}
.eyebrow-legend .legend-compass { display: inline-flex; align-items: center; }
.eyebrow-legend .legend-sep {
  width: 1px; height: 22px; background: var(--border-divider);
}

/* C · Corner instrument — eyebrow is the tagline alone; the compass and
   coordinate cluster into the hero's top-right corner. */
.hero .hero-compass-corner {
  position: absolute; top: 44px; right: 56px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero .hero-compass-corner .coord-cap {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ol-purple-mid);
}

/* =============================================================
   TRUSTED BY — sits directly under the hero
   ============================================================= */
.trustband { padding-top: 150px; padding-bottom: 80px; }
.trustband .trust-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 120px; margin-bottom: 36px; gap: 32px;
}
.trustband .trust-head .audience {
  font-family: var(--font-body); font-size: 14px; color: var(--ol-purple-mid);
  max-width: 440px; text-align: right; line-height: 1.5;
}
.trustband .clients {
  justify-content: space-between; gap: 16px;
  padding-bottom: 36px; border-bottom: 1px solid var(--border-divider);
}
.trustband .clients .logo {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  height: 90px; padding: 12px 18px; background: #fff;
}
.trustband .clients .logo img {
  max-height: 42px; max-width: 88%; width: auto; object-fit: contain;
  display: block; opacity: 0.88; transition: opacity .2s var(--ease-out);
}
.trustband .clients .logo:hover img { opacity: 1; }
.trustband .clients .logo.square img { max-height: 62px; max-width: 98%; }
.trustband .clients .logo.big img { max-height: 84px; max-width: 100%; }
.sector-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 36px; padding-top: 32px;
  border-top: 1px solid var(--border-divider);
}
.sector-tags .tag {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.06em; color: var(--ol-teal);
  padding: 6px 13px; border: 1px solid var(--border-soft);
  border-radius: 999px; background: rgba(255,255,255,0.5);
}

/* =============================================================
   WHAT WE DO — Horizontal bands (map panel left, content right)
   ============================================================= */
#services .svc-lede {
  font-size: 18px; line-height: 1.6; color: var(--ol-purple-mid);
  max-width: 760px; margin: 0 0 12px; text-wrap: pretty;
}
#services .svc-bands { display: flex; flex-direction: column; }
/* Equal spacing between the section-head grey line (above) and the first
   svc-band grey line (below) and the intro paragraph between them. */
#services .section-head { margin-bottom: 0; }
#services .svc-lede { margin: 44px 0; }
#services .svc-band {
  display: grid; grid-template-columns: 320px 1fr; gap: 56px;
  align-items: center; padding: 44px 0; border-top: 1px solid var(--border-divider);
}
#services .svc-band:last-child { border-bottom: 1px solid var(--border-divider); }
#services .svc-panel {
  position: relative; width: 320px; aspect-ratio: 1 / 1; height: auto;
  border: 1px solid var(--border-soft);
  border-radius: 14px; background: #fff; box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#services .svc-panel .num {
  position: absolute; top: 13px; left: 16px; z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ol-purple-mid);
}

/* Market Mapping icon — a little OS-style map SHEET with visible edges,
   rendered with the hero's own AscentMap. Subtle hover animation lives on
   the whole .svc-band. */
#services .svc-mapsheet {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
/* Compass placed at the map sheet's bottom-right corner, half over the map. */
#services .svc-mapsheet .map-compass {
  position: absolute; right: 4%; bottom: 20%; z-index: 5;
  filter: drop-shadow(0 3px 6px rgba(63, 58, 94, 0.22));
}
#services .sheet-frame {
  position: relative; width: 76%; aspect-ratio: 1440 / 800;
  background: var(--ol-paper); overflow: hidden; border-radius: 3px;
  border: 1px solid var(--border-strong);
  /* paper margin + neat-line — reads as the edge of a map sheet */
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--border-soft), var(--shadow-1);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
#services .sheet-frame > svg {
  transition: transform 1.1s var(--ease-out);
  transform-origin: 62% 30%;   /* ease toward the summit on hover */
}
/* registration ticks at the sheet corners */
#services .sheet-frame::before,
#services .sheet-frame::after {
  content: ''; position: absolute; width: 9px; height: 9px; z-index: 3;
  border: 0 solid var(--ol-teal); opacity: 0.5; pointer-events: none;
}
#services .sheet-frame::before { top: 5px; left: 5px; border-top-width: 1px; border-left-width: 1px; }
#services .sheet-frame::after  { bottom: 5px; right: 5px; border-bottom-width: 1px; border-right-width: 1px; }

/* Hover the whole Market Mapping band → the sheet lifts & the trail animates. */
#services .svc-band:hover .sheet-frame {
  transform: scale(1.04) rotate(-0.5deg);
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--ol-sage), var(--shadow-2);
}
#services .svc-band:hover .sheet-frame > svg { transform: scale(1.09); }
/* the dashed orange route "draws" along its path */
#services .sheet-frame > svg path[stroke-dasharray="7 5"] { stroke-dashoffset: 0; }
#services .svc-band:hover .sheet-frame > svg path[stroke-dasharray="7 5"] {
  animation: ol-route-draw 2.6s linear infinite;
}
@keyframes ol-route-draw { to { stroke-dashoffset: -48; } }

/* Pre-bid icon — a ZOOMED-IN map (white ground) with pin markers locating
   areas of interest. Pins drop-bounce in when the Pre-bid band is hovered.
   No sheet border here: the map fills the square card and fades at the edges. */
#services .svc-mapsheet.zoomed .sheet-frame.white {
  width: 100%; height: 100%; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none; background: #fff;
}
#services .svc-mapsheet.zoomed .sheet-frame::before,
#services .svc-mapsheet.zoomed .sheet-frame::after { display: none; }
#services .svc-mapsheet.zoomed .sheet-frame > svg {
  width: 100%; height: 100%; transform-origin: 50% 50%;
  -webkit-mask: radial-gradient(125% 125% at 50% 48%, #000 50%, transparent 86%);
          mask: radial-gradient(125% 125% at 50% 48%, #000 50%, transparent 86%);
}
#services .svc-band:hover .svc-mapsheet.zoomed .sheet-frame > svg { transform: scale(1.05); }
#services .map-pin {
  position: absolute; z-index: 4; transform: translate(-50%, -100%);
  transform-origin: center bottom; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(63, 58, 94, 0.28));
}
#services .map-pin svg { display: block; transition: none; }
#services .map-pin.p1 { left: 30%; top: 60%; }
#services .map-pin.p2 { left: 55%; top: 40%; }
#services .map-pin.p3 { left: 75%; top: 66%; }
@keyframes ol-pin-drop {
  0%   { transform: translate(-50%, -168%); opacity: 0; }
  55%  { transform: translate(-50%, -90%);  opacity: 1; }
  78%  { transform: translate(-50%, -106%); }
  100% { transform: translate(-50%, -100%); opacity: 1; }
}
#services .svc-band:hover .map-pin.p1 { animation: ol-pin-drop .5s var(--ease-out) both; }
#services .svc-band:hover .map-pin.p2 { animation: ol-pin-drop .5s var(--ease-out) .12s both; }
#services .svc-band:hover .map-pin.p3 { animation: ol-pin-drop .5s var(--ease-out) .24s both; }
/* Curved trail from bottom-centre up to the central pin (Pre-bid icon). */
#services .svc-mapsheet.zoomed .pin-trail { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#services .svc-mapsheet.zoomed .pin-trail svg { width: 100%; height: 100%; display: block; }
#services .svc-band:hover .svc-mapsheet.zoomed .pin-trail path { animation: ol-route-draw 8.8s linear infinite; }

/* Growth Strategy icon — side-elevation mountain with ascent routes. Fills the
   square, fades at the edges; routes flow and the summit flag waves on hover. */
#services .svc-mapsheet.profile .sheet-frame.white {
  width: 100%; height: 100%; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none; background: #fff;
}
#services .svc-mapsheet.profile .sheet-frame::before,
#services .svc-mapsheet.profile .sheet-frame::after { display: none; }
#services .svc-mapsheet.profile .sheet-frame { perspective: 540px; }
/* Filled mountain peak icon (Leg 03) */
#services .svc-mapsheet.peakicon { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
#services .svc-mapsheet.peakicon svg { width: 100%; height: 100%; transition: transform .9s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 88%; }
#services .svc-band:hover .svc-mapsheet.peakicon svg { transform: scale(1.04); }
#services .mtn-flag { transform-box: fill-box; transform-origin: left center; animation: ol-flagwave 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #services .mtn-flag { animation: none; } }
/* Sideview (Leg 03) — crisp baked-geometry summit; fills the square, faded edges. */
#services .svc-mapsheet.sideview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#services .svc-mapsheet.sideview .side-svg {
  width: 100%; height: 100%; transition: transform .9s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 60%;
  -webkit-mask: linear-gradient(#000 70%, transparent 100%); mask: linear-gradient(#000 70%, transparent 100%);
}
#services .svc-band:hover .svc-mapsheet.sideview .side-svg { transform: scale(1.05); }
#services .side-flag { transform-box: fill-box; transform-origin: left center; animation: ol-flagwave 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #services .side-flag { animation: none; } }
#services .svc-mapsheet.profile .sheet-frame > svg {
  width: 100%; height: 100%; transform-origin: 90% 56%;
  transform: rotateX(62deg) scale(1.86, 2.78) translateX(-7%) translateY(-3%);
  -webkit-mask: linear-gradient(#000 62%, transparent 100%);
          mask: linear-gradient(#000 62%, transparent 100%);
}
#services .svc-band:hover .svc-mapsheet.profile .sheet-frame > svg { transform: rotateX(57deg) scale(1.93, 2.86) translateX(-7%) translateY(-5%); }
/* Make the ascent route read at icon scale (stroke-width is in viewBox units). */
#services .svc-mapsheet.profile .sheet-frame > svg path[stroke-dasharray="7 5"] { stroke-width: 5.5; }
/* gently waving summit flag (AscentMap icons) */
@keyframes ol-flagwave { 0%, 100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(0.8) skewY(-5deg); } }
#services .ascent-flag { transform-box: fill-box; transform-origin: left center; animation: ol-flagwave 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #services .ascent-flag { animation: none; } }
/* upright waving flag planted at the route's summit end (Leg 03) */
#services .svc-mapsheet.profile .route-flag {
  position: absolute; left: 66.9%; top: 19.9%; width: 21px; height: 26px; z-index: 4; pointer-events: none;
  transform-origin: 12% 96%;   /* pole base */
  transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}
/* follow the route end exactly as the mountain scales on hover (measured delta) */
#services .svc-band:hover .svc-mapsheet.profile .route-flag { transform: translate(-2px, -22px) scale(1.05); }
#services .svc-mapsheet.profile .route-flag svg { width: 100%; height: 100%; overflow: visible; display: block; }
#services .svc-mapsheet.profile .route-flag .flag {
  transform-box: fill-box; transform-origin: left center; animation: ol-flagwave 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { #services .svc-mapsheet.profile .route-flag .flag { animation: none; } }
#services .sp-route { stroke-dashoffset: 0; }
#services .svc-band:hover .sp-route   { animation: ol-route-draw 2.4s linear infinite; }
#services .svc-band:hover .sp-route.r2 { animation-delay: .25s; }
#services .svc-band:hover .sp-route.r3 { animation-delay: .5s; }
#services .sp-flag { transform-box: fill-box; transform-origin: left bottom; }
#services .svc-band:hover .sp-flag { animation: ol-flag-wave 1.8s var(--ease-in-out) infinite; }
@keyframes ol-flag-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } }

@media (prefers-reduced-motion: reduce) {
  #services .svc-band:hover .sheet-frame,
  #services .svc-band:hover .sheet-frame > svg { transform: none; }
  #services .svc-band:hover .sheet-frame > svg path[stroke-dasharray="7 5"] { animation: none; }
  #services .svc-band:hover .map-pin { animation: none !important; }
  #services .svc-band:hover .sp-route,
  #services .svc-band:hover .sp-flag { animation: none !important; }
  #services .svc-band:hover .svc-mapsheet.profile .sheet-frame > svg { transform: none; }
}
#services .svc-leglabel {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ol-orange);
  display: block; margin-bottom: 12px;
}
#services .svc-band-body h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  line-height: 1.12; color: var(--ol-navy); margin: 0 0 14px; letter-spacing: -0.01em;
}
#services .svc-band-body > p {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.62;
  color: var(--ol-purple-mid); margin: 0; max-width: 640px;
}
#services .svc-band-body .deliverables {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
#services .svc-band-body .deliverables .chip {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ol-navy); padding: 7px 13px; border: 1px solid var(--border-soft);
  border-radius: 999px; background: rgba(255,255,255,0.6);
}

/* =============================================================
   WHY US — 4-up dark tiles
   ============================================================= */
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tiles.four .tile { padding: 32px 28px; }
.tiles.four .tile h4 { font-size: 19px; line-height: 1.25; min-height: 2.5em; }

.tiles.five { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.tiles.five .tile { padding: 32px 26px; }
.tiles.five .tile .step { font-size: 13px; margin-bottom: 18px; }
.tiles.five .tile h4 { font-size: 20px; line-height: 1.2; min-height: 0; }
.tiles.five .tile p { font-size: 14px; line-height: 1.6; margin-top: 12px; }

/* Our-approach cards: subtle left-to-right entrance + gentle hover lift. */
.tiles.five .tile {
  opacity: 0;
  transition: transform .2s var(--ease-out),
              box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
  will-change: opacity, transform;
}
/* Staggered left-to-right entrance via animation-delay (kept off the
   transition so it never delays the hover lift — that stays uniform). */
.tiles.five.revealed .tile { opacity: 1; animation: tile-in .55s var(--ease-out) backwards; }
.tiles.five.revealed .tile:nth-child(1) { animation-delay: .05s; }
.tiles.five.revealed .tile:nth-child(2) { animation-delay: .15s; }
.tiles.five.revealed .tile:nth-child(3) { animation-delay: .25s; }
.tiles.five.revealed .tile:nth-child(4) { animation-delay: .35s; }
.tiles.five.revealed .tile:nth-child(5) { animation-delay: .45s; }
@keyframes tile-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tiles.five .tile:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .tiles.five .tile { opacity: 1; animation: none; transition: box-shadow .25s, border-color .25s; }
  .tiles.five .tile:hover { transform: none; }
}

/* =============================================================
   PROOF — testimonials (new pattern)
   ============================================================= */
.proof .featured {
  display: grid; grid-template-columns: 1fr 200px; gap: 56px;
  align-items: start;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 16px; box-shadow: var(--shadow-2);
  padding: 56px 56px 48px;
}
.proof .featured .mark {
  font-family: var(--font-display); font-weight: 700; font-size: 80px;
  color: var(--ol-orange); line-height: 0.5; margin-bottom: 8px;
}
.proof .featured blockquote {
  font-family: var(--font-display); font-weight: 600;
  font-size: 27px; line-height: 1.4; color: var(--ol-navy);
  margin: 0; letter-spacing: -0.01em; text-wrap: pretty;
}
.proof .attrib { margin-top: 28px; }
.proof .attrib .name {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--ol-navy);
}
.proof .attrib .role {
  font-family: var(--font-body); font-size: 14px; color: var(--ol-purple-mid);
  margin-top: 3px;
}
.proof .featured .logo-slot {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 120px;
  border-left: 1px solid var(--border-divider); padding-left: 56px;
}
.proof .featured .logo-slot .logo-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: 0.04em; color: var(--ol-navy); opacity: 0.85;
}
.proof .featured .logo-slot .logo-img {
  max-width: 100%; max-height: 54px; width: auto; object-fit: contain;
  display: block;
}
.proof .support {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 24px;
}
.proof .support .tcard {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 14px; box-shadow: var(--shadow-1);
  padding: 30px 30px 28px; display: flex; flex-direction: column;
}
.proof .support .tcard .mark {
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  color: var(--ol-orange); line-height: 0.4; margin-bottom: 14px;
}
.proof .support .tcard p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--ol-navy); margin: 0 0 22px; flex: 1;
}
.proof .support .tcard .attrib { margin-top: 0; }
.proof .support .tcard .attrib .name { font-size: 14px; }
.proof .support .tcard .attrib .role { font-size: 12.5px; }
.proof .support .tcard .tlogo {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border-divider);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; color: var(--ol-teal);
}
.proof .support .tcard .tlogo img {
  display: block; width: auto; object-fit: contain;
}
.proof .support .tcard .tlogo img.firetrace { max-height: 46px; max-width: 80%; }
.proof .support .tcard .tlogo img.ffe { max-height: 46px; max-width: 80%; }
.proof .support .tcard .tlogo img.fortress { max-height: 11px; max-width: 32%; }
.proof .sector-strip {
  margin-top: 40px; text-align: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ol-purple-mid);
}

/* =============================================================
   SECTION HEAD — allow a single-sentence heading variant
   ============================================================= */
.section-title-1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 40px; line-height: 1.12; letter-spacing: -0.015em;
  color: var(--ol-navy); margin: 16px 0 0; max-width: 760px;
  text-wrap: balance;
}
.band.dark .section-title-1 { color: #fff; }
.band.dark .section-title-1 .hl { color: var(--ol-gold); }

/* Our-approach contour map: keep the field over the right + lower band, but
   clear the top-left corner entirely (no pattern behind the header). */
#approach .map-layer {
  -webkit-mask-image: radial-gradient(88% 96% at -6% -4%, transparent 0%, transparent 26%, #000 62%);
          mask-image: radial-gradient(88% 96% at -6% -4%, transparent 0%, transparent 26%, #000 62%);
}

/* =============================================================
   PHILOSOPHY — word from the founder
   ============================================================= */
.band.muted .founder-head { text-align: center; max-width: 880px; margin: 0 auto; }
.band.muted .founder-head .eyebrow { justify-content: center; }
.band.muted .founder-head .section-title-2 { font-size: 46px; margin-top: 14px; }
.band.muted .founder-lead { padding: 28px 0 36px; }
.band.muted .founder-lead blockquote { max-width: 880px; margin: 0 auto; }
.founder-note {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 300px 1fr; gap: 56px;
  align-items: center; max-width: 940px; margin: 0 auto;
}
.founder-note .portrait image-slot {
  display: block; width: 300px; height: 380px;
  box-shadow: var(--shadow-2); border-radius: 16px;
}
.founder-note .note-body .eyebrow { margin-bottom: 6px; }
.founder-note .note-body p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.72;
  color: var(--ol-purple-mid); margin: 16px 0 0; max-width: 540px;
  text-wrap: pretty;
}
.founder-note .signature { margin-top: 28px; }
.founder-note .note-body .btn.ghost { margin-top: 26px; }
.founder-note .signature .sig-name {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--ol-navy);
}
.founder-note .signature .sig-role {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ol-orange);
  margin-top: 5px;
}

/* About us — Option 1 (consistent header + narrative/founders split) */
.band.muted .about-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 0.92fr; gap: 72px;
  align-items: stretch;
}
.band.muted .about-left { max-width: 540px; display: flex; flex-direction: column; }
.band.muted .about-left .about-quote { margin-top: auto; }
.band.muted .about-intro {
  font-family: var(--font-body); font-size: 16px; line-height: 1.62;
  color: var(--ol-purple-mid); margin: 0; max-width: 520px; text-wrap: pretty;
}
.band.muted .about-intro p { margin: 0 0 15px; }
.band.muted .about-intro p:last-child { margin: 0; }
.band.muted .about-intro strong { color: var(--ol-navy); font-weight: 600; }
.band.muted .about-quote {
  margin-top: 40px; padding: 6px 0 6px 30px;
  border-left: 3px solid var(--ol-orange);
}
.band.muted .about-quote blockquote {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  line-height: 1.34; color: var(--ol-navy); margin: 0;
  letter-spacing: -0.01em; text-wrap: pretty;
}
.band.muted .about-quote cite {
  font-style: normal; display: block; margin-top: 18px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ol-purple-mid);
}
.band.muted .about-quote cite b { color: var(--ol-orange); font-weight: 700; }
.band.muted .about-founders {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
}
.band.muted .about-founders .founder { position: relative; }
.band.muted .about-founders .portrait-frame image-slot {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3;
  border-radius: 14px; box-shadow: var(--shadow-2);
  border: 1px solid var(--border-soft);
}
.band.muted .about-founders .name {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--ol-navy); margin: 20px 0 3px;
}
.band.muted .about-founders .role {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ol-orange);
  line-height: 1.5;
}
.band.muted .about-founders .bio {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.6;
  color: var(--ol-purple-mid); margin: 13px 0 0; text-wrap: pretty;
}

/* =============================================================
   "What we do" — DECK variant (one-screen, slideshow). Title persists;
   the region below crossfades intro copy → each service in turn. Square
   rounded icon tiles. Scoped to .wwd-deck so the live site is untouched.
   ============================================================= */
/* Whole slide is locked to the window height — never scrolls. */
.deck #slide-services { overflow: hidden; }
.deck .slide > .band.wwd-deck {
  min-height: 100svh; height: 100svh; box-sizing: border-box;
  padding: 88px 56px 56px;          /* top padding clears the fixed nav bar */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
.wwd-deck .band-inner { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Stage fills the height left under the section head, so the intro's even
   spacing scales with the window. Every sub-step shares this footprint. */
.wwd-stage { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 0; }
.wwd-panel {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .55s var(--ease-out, ease), visibility 0s linear .55s;
  display: flex; flex-direction: column; justify-content: center;
}
.wwd-panel.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .55s var(--ease-out, ease); }

/* Intro: even, window-height-driven spacing between the top grey line
   (section divider), the text, and the bottom grey line (keyline). The two
   1fr rows above and below the text stay equal at any height. */
.wwd-intro {
  display: grid; grid-template-rows: 1fr auto 1fr auto auto;
  justify-items: center; text-align: center; padding-top: 0;
}
.wwd-intro .svc-lede {
  grid-row: 2; font-size: 21px; line-height: 1.7; color: var(--ol-purple-mid);
  max-width: 820px; margin: 0 auto; text-wrap: pretty; text-align: center;
}
/* Grey divider — same weight/colour as the section-head rule above. */
.wwd-keyline {
  grid-row: 4; width: 100%; max-width: 980px; height: 1px;
  background: var(--border-divider); margin: 0 auto;
}
/* Thin, clickable key-services row. */
.wwd-keyservices {
  grid-row: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px; margin: 20px auto 0; max-width: 980px;
}
.wwd-keyservices .kslabel {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ol-orange);
}
.wwd-keyservices .kssep { color: var(--border-strong); font-weight: 300; }
.wwd-keyservices a {
  font-family: var(--font-body); font-weight: 300; font-size: 15px;
  color: var(--ol-navy); text-decoration: none; border: 0; letter-spacing: 0.01em;
  transition: color .2s var(--ease-out);
}
.wwd-keyservices a:hover { color: var(--ol-orange); }

.wwd-service { display: grid; grid-template-columns: 168px 1fr; gap: 48px; align-items: start; }
/* Square rounded icon tile. */
.wwd-service .wwd-icon {
  width: 168px; height: 168px; border-radius: 18px;
  border: 1px solid var(--border-soft); background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: var(--shadow-1);
}
.wwd-service-body { max-width: 990px; }
.wwd-service-body .num {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ol-purple-mid);
}
.wwd-service-body .wwd-leglabel {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ol-orange); margin-top: 6px;
}
.wwd-service-body h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 32px;
  line-height: 1.12; color: var(--ol-navy); margin: 10px 0 0; letter-spacing: -0.01em;
}
.wwd-service-body > p {
  color: var(--ol-purple-mid); font-size: 16px; line-height: 1.65; margin: 16px 0 0;
}
.wwd-service-body .deliverables { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.wwd-service-body .deliverables .chip {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.02em;
  color: var(--ol-navy); padding: 7px 13px; border: 1px solid var(--border-soft);
  border-radius: 999px; background: rgba(255, 255, 255, 0.6);
}

/* =============================================================
   3D-HERO — scroll-driven terrain morph (replaces the static hero
   on the homepage). A tall stage pins a 100vh canvas; terrain3d.js
   tilts the bird's-eye map into a 3D landscape and fades the header.
   ============================================================= */
.hero-stage { position: relative; height: 280vh; }
.hero-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 8%, #ffffff 0%, #ffffff 55%, #FAF8F2 100%);
}
#terrain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hero-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 56px; will-change: opacity, transform;
}
.hero-overlay .hero-inner { max-width: 920px; }
.hero-overlay .hero-cta { justify-content: center; }

/* Caption that fades IN as the landscape stands up. */
.land-caption {
  position: absolute; left: 56px; bottom: 104px; z-index: 5; max-width: 460px;
  opacity: 0; will-change: opacity; pointer-events: none; text-align: left;
}
.land-caption .eyebrow { margin-bottom: 14px; }
.land-caption h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 32px;
  line-height: 1.12; color: var(--ol-navy); margin: 0; letter-spacing: -0.01em;
}
.land-caption p {
  color: var(--ol-purple-mid); font-size: 15px; line-height: 1.6; margin: 12px 0 0;
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 5;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ol-purple-mid);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  will-change: opacity; cursor: pointer; user-select: none;
  transition: color .2s var(--ease-out);
}
.scroll-hint:hover { color: var(--ol-orange); }
/* On short screens keep the hint pinned to the very bottom and hidden if it
   would overlap the hero buttons. */
@media (max-height: 720px) {
  .scroll-hint { bottom: 18px; }
}
@media (max-height: 560px) {
  .scroll-hint { display: none; }
}
.scroll-hint:focus-visible { outline: 2px solid var(--ol-orange); outline-offset: 6px; border-radius: 4px; }
.scroll-hint .chev {
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--ol-orange); border-bottom: 1.5px solid var(--ol-orange);
  transform: rotate(45deg); animation: heroBob 1.6s var(--ease-in-out) infinite;
}
@keyframes heroBob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(3px, 3px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint .chev { animation: none; }
}

/* Hero "See our services" ghost button: solid white fill so it stays crisp
   over the terrain map (rather than transparent). */
.hero-cta .btn.ghost {
  background: #fff;
  border-color: rgba(63, 58, 94, 0.18);
  box-shadow: 0 1px 2px rgba(63, 58, 94, 0.06);
}
.hero-cta .btn.ghost:hover {
  background: #fff;
  border-color: var(--ol-navy);
}