/* ═══════════════════════════════════════════════
   SLM Home Page - style.css
   Design system: #F47721 orange / #111827 dark / #FFFFFF cream
═══════════════════════════════════════════════ */

/* ════════ PRIMARY DISPLAY FONT — ARCHIVO BLACK (local) ════════ */
@font-face {
  font-family: 'Archivo Black';
  src: url('../Font/Archivo_Black/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ════════ DESIGN TOKENS ════════ */
:root {
  /* Brand */
  --c-orange:       #F47721;
  --c-orange-dk:    #D96218;
  --c-orange-10:    rgba(244,119,33,0.10);
  --c-orange-25:    rgba(244,119,33,0.25);
  --c-orange-40:    rgba(244,119,33,0.40);

  /* Neutrals */
  --c-dark:         #111827;
  --c-dark-2:       #0B1220;
  --c-text:         #374151;
  --c-muted:        #6B7280;
  --c-muted-lt:     #9CA3AF;
  --c-border:       #E5E7EB;
  --c-border-lt:    #F3F4F6;
  --c-bg:           #FFFFFF;
  --c-bg-alt:       #FFFFFF;
  --c-bg-alt-2:     #FFFFFF;
  --c-bg-alt-3:     #F5F5F3;

  /* Type scale (use as refs) */
  --f-serif:        'Archivo Black', Georgia, serif;
  --f-sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Type scale tokens ──────────────────────────────────────────
     One consistent ladder for the whole site. Headings are fluid
     (clamp: mobile-min → desktop-max); text is fixed. Body = 15px.
     Decorative one-offs (watermark numbers, em-relative accents) and
     deliberate !important breakpoint overrides are intentionally not
     mapped to these. */
  --fs-h1:       clamp(32px, 5vw,   60px);   /* page-hero title (largest) */
  --fs-h2:       clamp(26px, 3.4vw, 42px);   /* major section title   */
  --fs-h3:       clamp(22px, 2.4vw, 30px);   /* sub-section title     */
  --fs-h4:       clamp(18px, 1.6vw, 22px);   /* card / minor heading  */
  --fs-lead:     18px;                        /* intro / lead copy     */
  --fs-body:     15px;                        /* default paragraph     */
  --fs-sm:       13px;                        /* dense / meta text     */
  --fs-caption:  12px;                        /* tiny labels / notes   */
  --fs-eyebrow:  11px;                        /* uppercase kicker      */
  --fs-micro:    10px;                        /* micro tags            */

  /* Motion */
  --ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --t-fast:         0.2s var(--ease-in-out);
  --t-base:         0.3s var(--ease-in-out);
  --t-slow:         0.5s var(--ease-out);
  --t-slower:       0.8s var(--ease-out);

  /* Elevation */
  --shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:      0 2px 10px rgba(0,0,0,0.04);
  --shadow-md:      0 8px 24px rgba(0,0,0,0.07);
  --shadow-lg:      0 18px 48px rgba(0,0,0,0.10);
  --shadow-xl:      0 28px 70px rgba(0,0,0,0.14);
  --shadow-glow:    0 8px 28px rgba(244,119,33,0.28);

  /* Radii */
  --r-0:            0;
  --r-sm:           2px;
  --r-md:           4px;
  --r-lg:           8px;

  /* Rhythm */
  --nav-h:          72px;

  /* ───────────────────────────────────────
     HERO TOKENS — Option C role-based presets
     ─ Storytelling: dark, cinematic (journey, leadership)
     ─ Directory:    light, compact    (tools, projects)
     ─────────────────────────────────────── */

  /* Shared — eyebrow / kicker */
  --hero-eb-size:      11px;
  --hero-eb-weight:    700;
  --hero-eb-tracking:  0.32em;
  --hero-eb-gap:       14px;
  --hero-eb-bar-w:     32px;
  --hero-eb-bar-h:     1px;
  --hero-eb-mb:        36px;

  /* Shared — container */
  --hero-max-w:        1280px;

  /* Storytelling preset */
  --hero-story-bg:         #0B1220;
  --hero-story-min-h:      90vh;
  --hero-story-pad-t:      120px;
  --hero-story-pad-b:      80px;
  --hero-story-pad-x:      24px;
  --hero-story-title-size: var(--fs-h2);
  --hero-story-title-weight: 700;
  --hero-story-title-lh:   1.08;
  --hero-story-title-tr:   -0.025em;
  --hero-story-title-mb:   36px;
  --hero-story-lead-size:  clamp(15px, 1.25vw, 18px);
  --hero-story-lead-color: rgba(255,255,255,0.55);

  /* Directory preset */
  --hero-dir-bg-top:       #FFFFFF;
  --hero-dir-bg-bot:       #FFFFFF;
  --hero-dir-pad-t-m:      56px;
  --hero-dir-pad-b-m:      48px;
  --hero-dir-pad-t-d:      96px;
  --hero-dir-pad-b-d:      80px;
  --hero-dir-pad-x-m:      24px;
  --hero-dir-pad-x-d:      48px;
  --hero-dir-title-size:   clamp(22px, 3.4vw, 40px);
  --hero-dir-title-weight: 600;
  --hero-dir-title-lh:     1;
  --hero-dir-title-tr:     -0.015em;
  --hero-dir-lead-size:    15px;
  --hero-dir-lead-color:   var(--c-muted);
}

/* ════════ SITE LOADER (full-screen brand video) ════════ */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0B1220;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.6s;
}
.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-loader.no-show { display: none; }
.loader-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Mobile: contain (show the full 16:9 video, letterbox top/bottom) so
   nothing is cropped on portrait phones. */
@media (max-width: 1023px) {
  .loader-video {
    object-fit: contain;
    background: #0B1220;
  }
}

/* Stage fades + lifts up on exit */
.loader-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.site-loader.is-hidden .loader-stage {
  opacity: 0;
  transform: translateY(-14px);
}

/* Logo clipped to its wrap, rises from below to reveal itself */
.loader-mark-wrap {
  width: 240px;
  height: 96px;
  overflow: hidden;
  position: relative;
}
.loader-mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(100%);
  animation: loaderRise 1.15s cubic-bezier(0.2, 0.9, 0.2, 1) 0.25s forwards;
}
@keyframes loaderRise {
  0%   { transform: translateY(100%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Orange bar draws left→right underneath */
.loader-bar {
  width: 140px;
  height: 2px;
  background: #F47721;
  transform: scaleX(0);
  transform-origin: left center;
  animation: loaderBarDraw 0.75s cubic-bezier(0.7, 0, 0.3, 1) 1s forwards;
  box-shadow: 0 0 14px rgba(244,119,33,0.55);
}
@keyframes loaderBarDraw {
  to { transform: scaleX(1); }
}

/* ════════ DARK THEME ════════ */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body {
  background: #0B1220;
  color: #D1D5DB;
}
/* Smooth swap */
body, html {
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

/* Known light surfaces -> dark surfaces */
[data-theme="dark"] .bg-white                 { background-color: #111827 !important; }
[data-theme="dark"] .bg-\[\#FFFFFF\]          { background-color: #0F1621 !important; }
[data-theme="dark"] .bg-\[\#FFFFFF\]          { background-color: #0F1621 !important; }
[data-theme="dark"] .bg-\[\#F5F5F3\]          { background-color: #0F1621 !important; }
[data-theme="dark"] .bg-off                   { background-color: #0F1621 !important; }

/* Text swaps */
[data-theme="dark"] .text-dark                { color: #F9FAFB !important; }
[data-theme="dark"] .text-muted               { color: #9CA3AF !important; }
[data-theme="dark"] .text-\[\#111827\]        { color: #F9FAFB !important; }
[data-theme="dark"] .text-\[\#374151\]        { color: #D1D5DB !important; }
[data-theme="dark"] .text-\[\#6B7280\]        { color: #9CA3AF !important; }
[data-theme="dark"] .text-\[\#9CA3AF\]        { color: #6B7280 !important; }

/* Borders */
[data-theme="dark"] .border-border            { border-color: #1F2937 !important; }
[data-theme="dark"] .border-\[\#E5E7EB\]      { border-color: #1F2937 !important; }

/* Component-specific surfaces */
[data-theme="dark"] .proj-thumb-card          { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .proj-cat-card            { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .service-item             { background: #111827; }
[data-theme="dark"] .pd-related-card          { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .pd-detail-card           { background: #0F1621; }
[data-theme="dark"] .pd-stats-bar             { background: #0F1621; border-color: #1F2937; }
[data-theme="dark"] .pd-stat                  { border-color: #1F2937; }

/* Journey */
[data-theme="dark"] .jn-tl                    { background: #0F1621; }
[data-theme="dark"] .jn-stats                 { background: #0B1220; border-color: #1F2937; }
[data-theme="dark"] .jn-quote                 { background: #0B1220; border-color: #1F2937; }
[data-theme="dark"] .jn-active                { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .jn-m-card                { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .jn-nav-item              { border-left-color: #1F2937; }
[data-theme="dark"] .jn-m-head                { color: #F9FAFB !important; }
[data-theme="dark"] .jn-m-body                { color: #D1D5DB !important; }
[data-theme="dark"] .jn-side-title            { color: #F9FAFB; }
[data-theme="dark"] .jn-side-sub              { color: #9CA3AF; }
[data-theme="dark"] .jn-nav-n                 { color: #D1D5DB; }
[data-theme="dark"] .jn-active-title          { color: #F9FAFB; }
[data-theme="dark"] .jn-h2                    { color: #F9FAFB; }
[data-theme="dark"] .jn-rail-bg               { background: linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.14) 20%, rgba(255,255,255,0.14) 80%, rgba(255,255,255,0.04)); }

/* Leadership */
[data-theme="dark"] .ld-intro                 { background: #0B1220; border-color: #1F2937; }
[data-theme="dark"] .ld-leaders               { background: #0F1621; }
[data-theme="dark"] .ld-card                  { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .ld-third-card            { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .ld-contact-tile          { background: #111827; color: #D1D5DB; }
[data-theme="dark"] .ld-contact-tile:not(.ld-contact-tile-static):hover { background: #1F2937; }
[data-theme="dark"] .ld-contact-strip         { background: #1F2937; border-color: #1F2937; }
[data-theme="dark"] .ld-stat                  { background: #0F1621; }
[data-theme="dark"] .ld-intro-big             { color: #F9FAFB; }
[data-theme="dark"] .ld-card-name             { color: #F9FAFB; }
[data-theme="dark"] .ld-card-bio              { color: #D1D5DB; }
[data-theme="dark"] .ld-third-name            { color: #F9FAFB; }
[data-theme="dark"] .ld-h2                    { color: #F9FAFB; }
[data-theme="dark"] .ld-quote-text            { color: #F9FAFB; }

/* Nav in dark mode (scrolled/solid state) */
[data-theme="dark"] #navbar.scrolled {
  background: rgba(15, 22, 33, 0.85) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 10px 32px rgba(0,0,0,0.3);
}
[data-theme="dark"] #navbar.scrolled .nav-link { color: #D1D5DB !important; }
[data-theme="dark"] #navbar.scrolled .nav-link:hover { color: var(--c-orange) !important; }
[data-theme="dark"] #navbar.scrolled #navName  { color: #F9FAFB !important; }
[data-theme="dark"] #navbar.scrolled #navSub   { color: #9CA3AF !important; }
[data-theme="dark"] #navbar.scrolled #menuBtn  { color: #F9FAFB !important; }
[data-theme="dark"] #mobileMenu                { background: #0F1621; border-color: #1F2937; }
[data-theme="dark"] #mobileMenu a              { color: #D1D5DB; border-color: #1F2937; }

/* Form inputs */
[data-theme="dark"] .footer-input              { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .footer-input:focus        { background: rgba(255,255,255,0.08); border-color: var(--c-orange); }

/* Projects list on light sub-page: breadcrumb text */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select                    { color-scheme: dark; }

/* Inline style override — muted greys used in dynamic content */
[data-theme="dark"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="color: #9CA3AF"] { color: #6B7280 !important; }

/* Scrollbar track in dark */
[data-theme="dark"] ::-webkit-scrollbar-track  { background: #0F1621; }
[data-theme="dark"] * { scrollbar-color: var(--c-orange) #0F1621; }

/* ── Dark theme: inline-style override safety net ──
   Many dynamic cards (project detail, flagship, etc.) use inline style="..."
   which has the highest specificity. These attribute-substring selectors
   catch every hardcoded hex and flip it for dark mode. */
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"]  { color: #F9FAFB !important; }
[data-theme="dark"] [style*="color:#1F2937"],
[data-theme="dark"] [style*="color: #1F2937"]  { color: #E5E7EB !important; }
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"]  { color: #D1D5DB !important; }
[data-theme="dark"] [style*="color:#4B5563"],
[data-theme="dark"] [style*="color: #4B5563"]  { color: #D1D5DB !important; }
[data-theme="dark"] [style*="color:#6B7280"],
[data-theme="dark"] [style*="color: #6B7280"]  { color: #9CA3AF !important; }
[data-theme="dark"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="color: #9CA3AF"]  { color: #6B7280 !important; }
[data-theme="dark"] [style*="color:#D1D5DB"],
[data-theme="dark"] [style*="color: #D1D5DB"]  { color: #9CA3AF !important; }

/* Background hex overrides in inline styles */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFFFFF"]     { background: #111827 !important; }
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"]    { background: #0F1621 !important; }
[data-theme="dark"] [style*="background:#F5F5F3"],
[data-theme="dark"] [style*="background: #F5F5F3"]    { background: #0F1621 !important; }
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"]    { background: #0F1621 !important; }

/* Flagship ghost number "01" etc. — hardcoded #EBEBEB (near-white) becomes invisible on dark */
[data-theme="dark"] [style*="color:#EBEBEB"],
[data-theme="dark"] [style*="color: #EBEBEB"]  { color: #1F2937 !important; }

/* Borders in inline styles */
[data-theme="dark"] [style*="border:1px solid #E5E7EB"],
[data-theme="dark"] [style*="border: 1px solid #E5E7EB"],
[data-theme="dark"] [style*="border-top:1px solid #E5E7EB"],
[data-theme="dark"] [style*="border-bottom:1px solid #E5E7EB"],
[data-theme="dark"] [style*="border-color:#E5E7EB"] { border-color: #1F2937 !important; }

/* Heading text color on cards — many elements have font-family inline plus color
   Also catch #E5E7EB backgrounds (placeholder/skeleton boxes) */
[data-theme="dark"] [style*="background:#E5E7EB"] { background: #1F2937 !important; }

/* Clients logos — dark mode shows original light ink directly,
   no filter or blend needed (PNG bg is transparent). */
[data-theme="dark"] .clients-logo-img {
  filter: none;
  opacity: 1;
}

/* Home we-build category rows */
[data-theme="dark"] .cat-row { border-bottom-color: #1F2937; }
[data-theme="dark"] .cat-row.active { background: #1F2937; border-left-color: var(--c-orange); }
[data-theme="dark"] .cat-row:hover { background: #1F2937; }
[data-theme="dark"] .cat-name { color: #D1D5DB; }
[data-theme="dark"] .cat-row.active .cat-name { color: #F9FAFB; }

/* Home testimonial / swiper — force card backgrounds dark */
[data-theme="dark"] .swiper-slide,
[data-theme="dark"] .swiper-slide > div { background-color: transparent; }

/* Project thumb cards — override heading/body text colors */
[data-theme="dark"] .proj-thumb-card h3 { color: #F9FAFB !important; }
[data-theme="dark"] .proj-thumb-card p  { color: #9CA3AF !important; }


/* Service item hover */
[data-theme="dark"] .service-item:hover { background: #1F2937; }

/* Founder card in home (bg-white with orange border) */
[data-theme="dark"] .founder-card,
[data-theme="dark"] .border-l-\[3px\].border-orange.bg-white { background: #111827 !important; }

/* Back-to-top button: stays orange, no change needed */

/* Journey strip year */
[data-theme="dark"] .jn-m-strip-year            { color: rgba(255,255,255,0.22); }
[data-theme="dark"] .jn-m.is-active .jn-m-strip-year { color: var(--c-orange); }
[data-theme="dark"] .jn-m-marker-dot            { background: #1F2937; border-color: rgba(255,255,255,0.3); box-shadow: 0 0 0 4px #0F1621; }
[data-theme="dark"] .jn-m.is-active .jn-m-marker-dot { background: var(--c-orange); border-color: var(--c-orange); box-shadow: 0 0 0 4px #0F1621, 0 0 0 10px rgba(244,119,33,0.18), 0 0 18px rgba(244,119,33,0.55); }
[data-theme="dark"] .jn-m-connector             { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .jn-m-strip-sep             { color: #6B7280; }
[data-theme="dark"] .jn-m-strip-tag             { color: #6B7280; }
[data-theme="dark"] .jn-rail-end-dot            { background: rgba(255,255,255,0.12); box-shadow: 0 0 0 4px #0F1621; }
[data-theme="dark"] .jn-stat-lbl                { color: #9CA3AF; }
[data-theme="dark"] .jn-active-lbl              { color: #6B7280; }
[data-theme="dark"] .jn-active-sep              { color: #4B5563; }
[data-theme="dark"] .jn-nav-y                   { color: #6B7280; }
[data-theme="dark"] .jn-active-rail             { background: #1F2937; }
[data-theme="dark"] .jn-tl-sub                  { color: #9CA3AF; }
[data-theme="dark"] .jn-quote-text              { color: #F9FAFB; }
[data-theme="dark"] .jn-m-meta                  { border-top-color: #1F2937; color: #9CA3AF; }

/* Leadership */
[data-theme="dark"] .ld-intro::before           { color: var(--c-orange); opacity: 0.06; }
[data-theme="dark"] .ld-intro-copy              { color: #9CA3AF; }
[data-theme="dark"] .ld-leaders-sub             { color: #9CA3AF; }
[data-theme="dark"] .ld-card-body               { color: #D1D5DB; }
[data-theme="dark"] .ld-card-divider            { background: #1F2937; }
[data-theme="dark"] .ld-card-sectors            { color: #9CA3AF; }
[data-theme="dark"] .ld-card-footer             { border-top-color: #1F2937; }
[data-theme="dark"] .ld-third-role              { color: #9CA3AF; }
[data-theme="dark"] .ld-stat-lbl                { color: #9CA3AF; }
[data-theme="dark"] .ld-quote-mark              { color: var(--c-orange); opacity: 0.22; }
[data-theme="dark"] .ld-quote-attr              { color: #6B7280; }
[data-theme="dark"] .ld-card-portrait           { background: linear-gradient(145deg, #1F2937 0%, #111827 100%); }

/* Project detail page — sticky sidebar card shell */
[data-theme="dark"] .pd-stat-value              { color: #F9FAFB; }
[data-theme="dark"] .pd-stat-label              { color: #9CA3AF; }
[data-theme="dark"] .pd-detail-lbl              { color: #9CA3AF; }
[data-theme="dark"] .pd-detail-val              { color: #F9FAFB; }
[data-theme="dark"] .pd-detail-row              { border-bottom-color: #1F2937; }
[data-theme="dark"] .pd-related-card            { background: #111827; }
[data-theme="dark"] .pd-related-card h3         { color: #F9FAFB; }
[data-theme="dark"] .pd-related-card p          { color: #9CA3AF; }

/* Timeline hero (journey) — grid pattern visibility on dark is fine, tweak alpha */
[data-theme="dark"] .jn-hero-grid               { background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); }

/* Category listing breadcrumb separators */
[data-theme="dark"] .opacity-50                 { opacity: 0.5; }

/* Lightbox already dark — OK */

/* Gallery grid item placeholder bg */
[data-theme="dark"] .pd-gallery-item            { background: #1F2937; }

/* ════════ THEME TOGGLE BUTTON ════════ */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    transform var(--t-base);
  flex-shrink: 0;
}
#navbar.scrolled .theme-toggle { border-color: rgba(17,24,39,0.18); }
[data-theme="dark"] #navbar.scrolled .theme-toggle { border-color: rgba(255,255,255,0.15); }
.theme-toggle:hover {
  background: rgba(244,119,33,0.10);
  border-color: var(--c-orange);
  color: var(--c-orange);
  transform: rotate(18deg);
}
.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
}
.theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }

/* ════════ BASE ════════ */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  overflow-x: hidden;
  background: var(--c-bg);
}

::selection { background: var(--c-orange); color: #fff; }
::-moz-selection { background: var(--c-orange); color: #fff; }

/* Focus accessibility */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible { outline-offset: 4px; }

/* ═══════════════════════════════════════
   SPLIT-TEXT WORD REVEAL
   Applied to any element with [data-split-words].
   JS breaks text into .split-word spans, each inheriting
   a staggered --split-delay CSS var.
═══════════════════════════════════════ */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  animation: splitWordRise 0.85s cubic-bezier(0.2, 0.9, 0.2, 1) var(--split-delay, 0s) forwards;
  will-change: transform, opacity;
}
@keyframes splitWordRise {
  to { opacity: 1; transform: translateY(0); }
}
/* When split-words is active on a title, silence the older line-level
   slide-up animation (.jn-line / .ld-line) so the per-word stagger is
   the only reveal. */
[data-split-words] .jn-line,
[data-split-words] .jn-line > em,
[data-split-words] .ld-line,
[data-split-words] .ld-line > em,
[data-split-words] .ld-num,
[data-split-words] .ld-num-lbl {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .split-word {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════
   MAGNETIC BUTTONS
   Any element with [data-magnetic] attracts toward the cursor on hover.
   JS applies the translate; CSS handles the smooth easing back.
═══════════════════════════════════════ */
[data-magnetic] {
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@media (hover: none) {
  [data-magnetic] { transform: none !important; }
}

/* Footer separator — thin hairline to visually divide the dark-on-dark
   transition from the site-wide CTA band into the footer. Plus a tiny
   centered orange accent line for a subtle brand touch. */
footer#contact {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
footer#contact::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 2px;
  background: #F47721;
  opacity: 0.9;
  box-shadow: 0 0 16px rgba(244, 119, 33, 0.35);
}

/* Buttons: subtle tactile press */
button, a[onclick], .footer-submit, .fp-cta, .po-close-btn, .po-back-btn, .gl-close, .gl-nav {
  -webkit-user-select: none;
  user-select: none;
}
button:active, .footer-submit:active, .fp-cta:active, .po-close-btn:active {
  transform: translateY(0) scale(0.985);
}
/* Lightbox nav/close buttons must preserve their own transform (they use translateY(-50%) to center) */
.gl-nav:active { transform: translateY(-50%) scale(0.96); }
.gl-close:active { transform: scale(0.96); }

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg-alt); }
::-webkit-scrollbar-thumb {
  background: var(--c-orange);
  border-radius: 3px;
  transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-orange-dk); }
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-orange) var(--c-bg-alt);
}

/* Images: default graceful fade-in when they finish loading */
img[loading="lazy"] {
  transition: opacity 0.5s ease, filter 0.5s ease;
}
img[loading="lazy"]:not(.is-loaded) {
  opacity: 0;
  filter: blur(4px);
}
img[loading="lazy"].is-loaded {
  opacity: 1;
  filter: blur(0);
}

/* ── Mobile menu items ── */
.mm-link {
  display: block;
  padding: 14px 0;
  color: #111827;
  font-size: var(--fs-body);
  font-weight: 500;
  border-bottom: 1px solid #E5E7EB;
  text-decoration: none;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.mm-link:active,
.mm-link:hover { color: var(--c-orange); padding-left: 4px; }

.mm-cta {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--c-orange);
  color: #fff !important;
  font-weight: 700;
  text-align: center;
  border-bottom: none !important;
  letter-spacing: 0.04em;
}
.mm-cta:active,
.mm-cta:hover { background: var(--c-orange-dk); color: #fff !important; }

.mm-group {
  border-bottom: 1px solid #E5E7EB;
}
.mm-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  color: #111827;
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.mm-chevron {
  color: var(--c-muted);
  transition: transform 0.3s var(--ease-out), color 0.3s;
}
.mm-group-toggle[aria-expanded="true"] .mm-chevron {
  transform: rotate(180deg);
  color: var(--c-orange);
}
.mm-group-toggle[aria-expanded="true"] { color: var(--c-orange); }

.mm-group-list {
  display: none;
  flex-direction: column;
  padding: 0 0 10px 16px;
  gap: 0;
}
.mm-group-toggle[aria-expanded="true"] + .mm-group-list { display: flex; }
.mm-sublink {
  padding: 11px 0;
  color: #4B5563;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast), padding-left var(--t-fast);
  position: relative;
}
.mm-sublink::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 1px;
  background: var(--c-muted-lt);
  transform: translateY(-50%);
  transition: width var(--t-fast), background var(--t-fast);
}
.mm-sublink:active,
.mm-sublink:hover {
  color: var(--c-orange);
  padding-left: 12px;
}
.mm-sublink:hover::before,
.mm-sublink:active::before {
  width: 8px;
  background: var(--c-orange);
}

/* Dark mode */
[data-theme="dark"] .mm-link,
[data-theme="dark"] .mm-group-toggle { color: #E5E7EB; }
[data-theme="dark"] .mm-link,
[data-theme="dark"] .mm-group { border-bottom-color: #1F2937; }
[data-theme="dark"] .mm-sublink { color: #9CA3AF; }

/* ── Nav ── */
#navbar {
  background: transparent;
  transition:
    background 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    backdrop-filter 0.35s var(--ease-out);
}
#navbar.scrolled {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(17,24,39,0.05), 0 10px 32px rgba(17,24,39,0.06);
}
#navbar.scrolled .nav-link      { color: var(--c-text) !important; }
#navbar.scrolled .nav-link:hover{ color: var(--c-orange) !important; }
#navbar.scrolled #navName       { color: var(--c-dark) !important; }
#navbar.scrolled #navSub        { color: var(--c-muted-lt) !important; }
#navbar.scrolled #menuBtn       { color: var(--c-dark) !important; }

.nav-link {
  position: relative;
  padding-bottom: 4px;
  transition: color var(--t-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--c-orange);
  transition: width 0.35s var(--ease-out);
}
.nav-link:hover::after,
.nav-link[style*="color: rgb(244, 119, 33)"]::after { width: 100%; }

/* Nav logo cross-fade: white (hero) → gray (scrolled) */
.nav-logo-stack {
  position: relative;
  display: block;
  width: 170px;
  height: 46px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .nav-logo-stack { width: 138px; height: 38px; }
}
.nav-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.35s var(--ease-in-out);
}
/* LIGHT mode: scroll-swap (logo 1 at top, logo 2 when scrolled) */
.nav-logo-default  { opacity: 1; }   /* logo 1 */
.nav-logo-scrolled { opacity: 0; }   /* logo 2 */
#navbar.scrolled .nav-logo-default  { opacity: 0; }
#navbar.scrolled .nav-logo-scrolled { opacity: 1; }

/* DARK mode: always logo 1, no scroll swap */
[data-theme="dark"] .nav-logo-default  { opacity: 1; }
[data-theme="dark"] .nav-logo-scrolled { opacity: 0; }
[data-theme="dark"] #navbar.scrolled .nav-logo-default  { opacity: 1; }
[data-theme="dark"] #navbar.scrolled .nav-logo-scrolled { opacity: 0; }

/* Get-In-Touch CTA gets a subtle lift */
#navCta {
  transition:
    background var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}
#navCta:hover {
  background: var(--c-orange-dk);
}

/* ── Hero ── */
.hero-section {
  min-height: 100svh;
  min-height: 100vh;
}

/* ═══════════════════════════════════════
   HERO SLIDESHOW — crossfade + scroll parallax
   — Images dissolve into each other every few seconds.
   — On scroll the slide container drifts down slower
     than the page (translateY driven by JS), creating
     depth without a Ken-Burns zoom.
═══════════════════════════════════════ */
.hero-slides {
  position: absolute;
  /* Extend vertically so parallax translateY doesn't reveal the bg */
  top: -12vh;
  left: 0;
  right: 0;
  bottom: -12vh;
  overflow: hidden;
  background: #0B1220;
  will-change: transform;
  transform: translate3d(0, 0, 0);   /* promote to own layer */
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hero-slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide  { transition: opacity 0.4s linear; }
  .hero-slides { transform: none !important; }       /* no parallax drift */
}

/* ═══════════════════════════════════════
   HOME REEL (video montage section)
═══════════════════════════════════════ */
/* Reel — brand video framed inside the white page. Centered title
   above the video, generous padding on all sides so the framed video
   reads as a polished poster rather than a full-bleed banner. */
.home-reel {
  margin: 0;
  padding: 64px 20px;          /* consistent section rhythm (mobile) */
  background: #FFFFFF;
  border-top: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
  width: 100%;
}
@media (min-width: 1024px) {
  .home-reel { padding: 96px 48px; }
}
.home-reel-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 24px;
}
@media (min-width: 1024px) { .home-reel-head { margin-bottom: 36px; } }
.home-reel-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 12px;
}
.home-reel-bar {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--c-orange);
}
.home-reel-title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-dark);
  margin: 0;
}
.home-reel-video {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(11, 18, 32, 0.18);
}
@media (min-width: 1024px) {
  .home-reel-video { border-radius: 20px; }
}

[data-theme="dark"] .home-reel { background: #0B1220; }
[data-theme="dark"] .home-reel-title { color: #F9FAFB; }

/* Scroll line pulse */
.scroll-line { animation: pulseHeight 2.5s ease-in-out infinite; }
@keyframes pulseHeight {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 0.8; transform: scaleY(1.2); }
}

/* ── We Build - category rows ── */
.cat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid #E5E7EB;
  cursor: pointer;
  transition: background 0.25s, border-left-color 0.25s, padding-left 0.25s;
}
.cat-row:last-child { border-bottom: none; }
.cat-row:hover {
  background: #FFFAF5;
  border-left-color: rgba(244,119,33,0.55);
  padding-left: 20px;
}
.cat-row:hover .cat-num   { color: #F47721; }
.cat-row:hover .cat-name  { color: #111827; }
.cat-row:hover .cat-arrow {
  color: #F47721;
  transform: translateX(2px);
}
.cat-row.active {
  border-left-color: #F47721;
  background: #FFF8F3;
}
.cat-num {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: #D1D5DB;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  flex-shrink: 0;
  transition: color 0.25s;
}
.cat-row.active .cat-num { color: #F47721; }
.cat-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: #6B7280;
  flex: 1;
  transition: color 0.25s, font-weight 0.25s;
}
.cat-row.active .cat-name {
  color: #111827;
  font-weight: 600;
}
.cat-arrow {
  color: transparent;
  transition: color 0.25s, transform 0.25s;
  flex-shrink: 0;
}
.cat-row.active .cat-arrow {
  color: #F47721;
  transform: translateX(2px);
}

/* ── We Build ticker strip ── */
.wb-ticker-track {
  display: flex;
  animation: wbTicker 20s linear infinite;
  width: max-content;
}
@keyframes wbTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.wb-ticker-item {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9CA3AF;
  padding: 0 28px;
}
.wb-ticker-dot {
  color: #F47721;
  font-size: var(--fs-body);
  line-height: 1;
}

/* ── Facts cards ── */
.facts-card {
  border-right: none;
}
.facts-card:last-child { border-right: none; }

/* ── Services ── */
.service-item {
  border-top: 2px solid transparent;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base),
    background var(--t-base);
}

/* ── Services image-background variant ── */
.service-item--img {
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  padding: 0 !important;
  overflow: hidden;
  color: #FFFFFF;
  border-top: 0;             /* no transparent border → no gray line at the top */
  transition: none;          /* card image stays fixed on hover — no movement */
}
@media (min-width: 1024px) {
  .service-item--img { min-height: 440px; }
}

.service-item--img .service-item-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(11, 18, 32, 0.20) 0%,
      rgba(11, 18, 32, 0.35) 40%,
      rgba(11, 18, 32, 0.88) 100%);
  transition: background 0.4s ease, opacity 0.4s ease;
  z-index: 1;
}

.service-item--img .service-item-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* icon → title → desc grouped at the bottom */
  gap: 12px;
}
@media (min-width: 1024px) {
  .service-item--img .service-item-inner { padding: 36px 32px; }
}

.service-item--img .service-item-top {
  display: flex;
  justify-content: flex-start;   /* icon left, above the title */
  align-items: flex-start;
}
.service-item--img .service-item-num { display: none; }

.service-item--img .service-item-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.service-item--img .service-item-body { margin-top: 0; }

.service-item--img .service-item-title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
}
@media (min-width: 1024px) {
  .service-item--img .service-item-title { font-size: var(--fs-h3); }
}

.service-item--img .service-item-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 10px 0 0;
  height: 3.4em;                  /* fixed reserve so every title aligns */
  overflow: hidden;
  opacity: 0;                     /* slides up + fades in on hover */
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.service-item--img .service-item-bar { display: none; }

/* Override the generic .service-item:hover treatment — image cards have their own */
.service-item--img:hover {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: none !important;
  transform: none !important;
  border-top-color: transparent !important;
}
/* Hover: card turns orange and reveals the icon + description */
.service-item--img:hover .service-item-overlay { background: #F47721; }
.service-item--img:hover .service-item-icon { opacity: 1; }
.service-item--img:hover .service-item-desc { opacity: 1; transform: translateY(0); }

/* Mobile-carousel sizing: cards keep the same h3/p typography (drop the
   generic overrides which would otherwise recolour the overlaid text) */
@media (max-width: 1023px) {
  .sv-track > .service-item--img h3 { font-size: 20px !important; color: #FFFFFF; }
  .sv-track > .service-item--img p  { font-size: var(--fs-sm); color: rgba(255,255,255,0.92); }
  /* touch devices have no hover — show icon + description by default */
  .sv-track > .service-item--img .service-item-icon { opacity: 1; }
  .sv-track > .service-item--img .service-item-desc { opacity: 1; transform: none; height: auto; max-height: none; margin-top: 10px; }
}

/* ════════ Services mobile carousel (< 1024px) ════════ */
.sv-dots { display: none; }

@media (max-width: 1023px) {
  .sv-track {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
    padding: 4px 20px 16px;
    margin: 0 -20px;
    gap: 16px;
    background: transparent !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sv-track::-webkit-scrollbar { display: none; }
  .sv-track > .service-item {
    flex: 0 0 85%;
    scroll-snap-align: start;
    padding: 24px !important;
    border: 1px solid var(--c-border);
    min-height: 44px;
  }
  .sv-track > .service-item h3 { font-size: var(--fs-lead); }
  .sv-track > .service-item p  { font-size: var(--fs-body); }

  /* Progress dots */
  .sv-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
  }
  .sv-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-border);
    transition: background 0.25s, width 0.25s, border-radius 0.25s;
  }
  .sv-dots span.active {
    background: var(--c-orange);
    width: 20px;
    border-radius: 3px;
  }
}
.service-item:hover {
  border-top-color: var(--c-orange);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  z-index: 1;
  position: relative;
  background: #fff;
}

/* ── Flagship scroll-jacked ── */
#fpTrackH { will-change: transform; }

/* ════════════════════════════════════════════════════════════════════
   FLAGSHIP — PINNED CINEMA REEL
   Pattern: section is (N+1) × 100vh tall. Inside, a sticky 100vh
   stage holds 5 absolutely-stacked images that cross-fade based on
   scroll position. Caption stack swaps the active project.
   Pure white + orange palette; deep navy used only as the
   bottom-of-image gradient for legibility.
═══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   FLAGSHIP — SCROLL STACK REVEAL (clip-path wipe)
   Pinned 100vh stage inside an N×100vh track. Five images are
   absolute-stacked (first on top); scrolling wipes each away from the
   right via clip-path: inset(0 X% 0 0), revealing the one beneath.
   A brand-orange edge line rides the wipe; caption + counter +
   segmented progress bar follow. JS = initScrollReveal in main.js.
════════════════════════════════════════════════════════════════ */
/* Shared section title — every section main heading uses this one size
   (matches the Flagship Projects title) so headings are consistent. */
.section-title {
  font-family: 'Archivo Black', 'Impact', sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #111827;
}
[data-theme="dark"] .section-title { color: #F9FAFB; }
.section-title--light { color: #FFFFFF; }


.sr-wrap {
  --sr-cards: 5;
  position: relative;
  height: calc(var(--sr-cards) * 100vh);
  background: #FFFFFF;
}
.sr-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.sr-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #FFFFFF;
}
.sr-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%,
    rgba(0,0,0,0) 55%, rgba(0,0,0,0.62) 100%);
}
.sr-card {
  position: absolute;
  inset: 0;
  display: block;
  will-change: clip-path;
  clip-path: inset(0 0 0 0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}
.sr-card:nth-child(1) { z-index: 5; }
.sr-card:nth-child(2) { z-index: 4; }
.sr-card:nth-child(3) { z-index: 3; }
.sr-card:nth-child(4) { z-index: 2; }
.sr-card:nth-child(5) { z-index: 1; }
.sr-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 7;
  right: var(--edgePos, 0);
  opacity: var(--edge, 0);
  background: linear-gradient(to bottom,
    rgba(244,119,33,0), rgba(244,119,33,0.85) 50%, rgba(244,119,33,0));
  transition: opacity 0.2s;
  pointer-events: none;
}

/* Section title — a band above the pinned stage (not an image overlay). */
.sr-head {
  background: #FFFFFF;
  border-top: 1px solid var(--c-border);
  padding: 64px clamp(24px, 5vw, 64px) 40px;   /* standard: 64px top (mobile), 40px header gap */
}
@media (min-width: 1024px) {
  .sr-head { padding-top: 80px; }              /* 80px top on desktop, matching other sections */
}

/* ══ Flagship — pinned horizontal scroll ══ */
.ph-wrap {
  position: relative;
  height: calc(var(--ph-cards, 5) * 75vh);   /* vertical scroll track that drives the horizontal travel */
  background: #FFFFFF;
}
.ph-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 64px;          /* clears the fixed nav */
  padding-bottom: 0;
}
.ph-head {
  flex: 0 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  margin-bottom: 14px;        /* tight so the card track fills the viewport */
}
.ph-track {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 2.4vw, 36px);
  padding: 0 clamp(24px, 5vw, 64px);
  will-change: transform;
}
.ph-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(300px, 42vw, 560px);
  height: 100%;               /* fill the track's vertical space */
  overflow: hidden;
  text-decoration: none;
  background: #0B1220;
}
.ph-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.ph-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,18,32,0.92) 0%, rgba(11,18,32,0.65) 34%, rgba(11,18,32,0.2) 62%, rgba(11,18,32,0) 88%);
}
.ph-card-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(22px, 3vw, 40px);
  color: #fff;
}
.ph-card-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 10px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);   /* keep legible over bright images */
}
.ph-card-title {
  font-family: 'Archivo Black', 'Impact', sans-serif;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.08;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
/* Progress dots (match the Clients section) */
.ph-dots {
  position: absolute;          /* overlay at the bottom so cards get the full height */
  left: 0; right: 0; bottom: 16px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}
.ph-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(17,24,39,0.25);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.ph-dot:hover { background: rgba(244,119,33,0.55); }
.ph-dot.is-active { background: #F47721; width: 26px; }
.ph-dot:focus-visible { outline: 2px solid #F47721; outline-offset: 4px; }
@media (max-width: 1023px) {
  /* mobile: no pin — header on top, native horizontal swipe for the cards */
  .ph-wrap { height: auto; }
  .ph-stage { position: static; height: auto; padding-top: 56px; }
  .ph-head { padding: 0 24px; margin-bottom: 24px; }
  .ph-track {
    overflow-x: auto; -webkit-overflow-scrolling: touch; transform: none !important;
    gap: 16px; padding: 0 24px 20px;
    align-items: flex-start;          /* don't stretch cards to the tallest — keep uniform */
    scroll-snap-type: x mandatory; scroll-padding: 24px;
    scrollbar-width: none;            /* hide the (orange) scrollbar thumb — the "orange bar" */
  }
  .ph-track::-webkit-scrollbar { display: none; }
  .ph-card { width: 82vw; height: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  /* fill the card uniformly (no letterbox bands) */
  .ph-card-img { background-size: cover; background-position: center; }

  /* Progress dots — matches the Services & Expertise carousel */
  .ph-dots {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 18px; margin-bottom: 36px;   /* breathing room above the next section */
    position: static; transform: none;
  }
  .ph-dot {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
    background: var(--c-border);
    transition: background 0.25s, width 0.25s, border-radius 0.25s;
  }
  .ph-dot.is-active { background: var(--c-orange); width: 20px; border-radius: 3px; }
}
.sr-head > * {
  max-width: var(--hero-max-w);
  margin-left: auto;
  margin-right: auto;
}
.sr-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: #F47721;
  margin-bottom: 14px;
}
.sr-bar { display: block; width: 28px; height: 1px; background: #F47721; }
.sr-h2 {
  font-family: 'Archivo Black', 'Impact', sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #111827;
}

.sr-caption {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  z-index: 30;
  text-align: center;
  width: 90%;
  max-width: 760px;
  pointer-events: none;
}
.sr-title {
  font-family: 'Archivo Black', 'Impact', sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  transition: opacity 0.35s;
}
.sr-sub {
  margin-top: 10px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  transition: opacity 0.35s;
}

.sr-hint {
  position: absolute;
  left: 50%;
  bottom: 3.2vh;
  transform: translateX(-50%);
  z-index: 30;
  color: rgba(255,255,255,0.55);
  font-size: var(--fs-caption);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  pointer-events: none;
}
.sr-arrow { display: inline-block; margin-left: 8px; animation: srBounce 1.6s ease-in-out infinite; }
@keyframes srBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.sr-track {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  height: 2px;
  display: flex;
  gap: 4px;
}
.sr-seg {
  flex: 1;
  position: relative;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.sr-seg::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 0%);
  background: #F47721;
}

@media (max-width: 640px) {
  .sr-label { font-size: 10px; padding: 8px 12px; gap: 8px; }
  .sr-caption { bottom: 13vh; }
}

.cr-section {
  --cr-panels: 5;
  position: relative;
  height: calc((var(--cr-panels) + 1) * 100vh);
  background: #FFFFFF;
}
.cr-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.cr-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}

/* Mobile-only chrome (hidden on desktop) */
.cr-mhead,
.cr-mdots { display: none; }

/* Each panel: absolute-stacked over the stage on desktop. Holds its
   own image, caption, and CTA so the mobile fallback can flow them. */
/* Scroll Stack Reveal: each panel slides up and stacks OVER the previous
   one (JS sets translateY / scale / z-index per scroll). The top-edge
   shadow makes an arriving panel read as laying on top of the one below. */
.cr-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform, filter;
  box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.42);
  backface-visibility: hidden;
}

/* Image: full-bleed background (always visible — stacking, not cross-fade) */
.cr-img {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  text-decoration: none;
}

/* Vignette overlay applied per-panel for legibility on desktop */
.cr-img::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(11,15,20,0.0) 30%,
      rgba(11,15,20,0.55) 75%,
      rgba(11,15,20,0.78) 100%),
    linear-gradient(to right,
      rgba(11,15,20,0.35) 0%,
      rgba(11,15,20,0.0) 45%);
}

/* Top-level fade (legacy hook — kept empty so the JS lookup works
   without throwing if the markup ever falls back to the old shape) */
.cr-fade { display: none; }

/* Top-left eyebrow */
.cr-eyebrow {
  position: absolute;
  top: clamp(28px, 6vh, 56px);
  left: clamp(24px, 5vw, 64px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #FFFFFF;
}
.cr-eyebrow-bar {
  display: block;
  width: 28px;
  height: 1px;
  background: #F47721;
}
.cr-eyebrow-text {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}

/* Top-right counter */
.cr-counter {
  position: absolute;
  top: clamp(24px, 5.5vh, 50px);
  right: clamp(24px, 5vw, 64px);
  z-index: 4;
  font-family: 'Archivo Black', sans-serif;
  color: #FFFFFF;
  display: flex;
  align-items: baseline;
  gap: 6px;
  user-select: none;
}
.cr-counter > span:first-child {
  font-size: var(--fs-h1);
  line-height: 1.12;          /* clearance so Archivo Black caps aren't clipped */
  padding-top: 0.04em;
  color: #F47721;
}
.cr-counter-sep,
.cr-counter-total {
  font-size: var(--fs-lead);
  opacity: 0.55;
  font-weight: 400;
}

/* Caption — bottom-left of the panel, only the active one is visible */
.cr-cap {
  position: absolute;
  left: clamp(24px, 5vw, 64px);
  bottom: clamp(72px, 12vh, 130px);
  right: clamp(24px, 5vw, 64px);
  z-index: 5;
  color: #FFFFFF;
  max-width: min(620px, 60%);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.cr-panel.is-active .cr-cap {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cr-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.78;
  margin-bottom: 18px;
  white-space: nowrap;
}
.cr-meta .cr-num {
  color: #F47721;
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
}
.cr-meta .cr-sep {
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.cr-title {
  font-family: 'Archivo Black', 'Impact', sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.02;
  font-weight: 700;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}
.cr-info {
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  opacity: 0.86;
  font-weight: 400;
  margin-bottom: 28px;
}

/* CTA — desktop: stacks below the caption text, left-aligned, never
   collides with the title even when it wraps to multiple lines.   */
.cr-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 14px 26px;
  border: 1px solid rgba(255,255,255,0.45);
  color: #FFFFFF;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.35s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.35s, color 0.35s,
              transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
  pointer-events: auto;
}
.cr-cta:hover {
  background: #F47721;
  border-color: #F47721;
  color: #FFFFFF;
}
.cr-cta:hover .cr-cta-arrow { transform: translateX(4px); }
.cr-cta-arrow {
  display: inline-flex;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
}

/* Bottom progress rail with tick marks */
.cr-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 4;
  background: rgba(255,255,255,0.16);
  pointer-events: none;
}
.cr-rail-fill {
  position: absolute;
  inset: 0;
  background: #F47721;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}
.cr-rail-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.cr-rail-ticks span {
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,0.4);
}
.cr-rail-ticks span:first-child,
.cr-rail-ticks span:last-child { background: transparent; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE (< lg): each panel becomes a stacked card.
   No pinned scroll, no cross-fade. Image on top, white card below.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .cr-section {
    height: auto !important;
    background: #FFFFFF;
  }
  .cr-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  .cr-stage {
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .cr-stage::-webkit-scrollbar { display: none; }

  /* Mobile dots — matched to the .sv-dots style on the
     Services & Expertise section: 6px circles that expand into a
     20px orange pill when active. */
  .cr-mdots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 18px 24px 36px;   /* extra bottom so the dots don't
                                  butt up against the next section */
  }
  .cr-mdot {
    width: 6px;
    height: 6px;
    padding: 0;
    background: var(--c-border);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s, width 0.25s, border-radius 0.25s;
  }
  .cr-mdot.is-active {
    background: var(--c-orange);
    width: 20px;
    border-radius: 3px;
  }

  /* Hide desktop-only chrome on mobile */
  .cr-eyebrow,
  .cr-counter,
  .cr-rail { display: none; }

  /* Section header for mobile */
  .cr-mhead {
    display: block;
    padding: 56px 24px 28px;
    background: #FFFFFF;
  }
  .cr-mhead-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #F47721;
    margin-bottom: 10px;
  }
  .cr-mhead-bar {
    display: block;
    width: 24px;
    height: 1px;
    background: #F47721;
  }
  .cr-mhead-title {
    font-family: 'Archivo Black', 'Impact', sans-serif;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.05;
    color: #111827;
    letter-spacing: -0.01em;
  }

  /* Each panel = one slide in the horizontal scroll-snap track */
  .cr-panel {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-bottom: 0;
    box-shadow: none;            /* stacking shadow is desktop-only */
    transform: none;
    will-change: auto;
  }

  /* Image: shorter block at top of card so the caption sits closer */
  .cr-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(180px, 36vh, 300px);
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Subtle bottom fade only (so the orange '01' on white card peeks against the image edge) */
  .cr-img::after {
    background:
      linear-gradient(to bottom,
        rgba(11,15,20,0) 60%,
        rgba(11,15,20,0.18) 100%);
  }

  /* Caption: white card below image, dark text */
  .cr-cap {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    padding: 28px 24px;
    color: #111827;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .cr-meta {
    color: #6B7280;
    opacity: 1;
    margin-bottom: 14px;
    flex-wrap: wrap;
    white-space: normal;
  }
  .cr-meta .cr-sep {
    background: #D1D5DB;
  }
  .cr-title {
    font-size: var(--fs-h2);
    color: #111827;
    margin-bottom: 14px;
  }
  .cr-info {
    color: #6B7280;
    opacity: 1;
    font-size: var(--fs-body);
    margin-bottom: 20px;
  }

  /* CTA: inline link inside the card, orange outline.
     Caption above is flex-column / align-items: flex-start, so the
     CTA sits flush-left with the title/info text — no extra margin. */
  .cr-cta {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    padding: 13px 22px;
    border-color: #F47721;
    color: #F47721;
    background: #FFFFFF;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    align-self: flex-start;
  }
  .cr-cta:hover,
  .cr-cta:active {
    background: #F47721;
    color: #FFFFFF;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Legacy flagship styles (.fp-* — replaced by .cr-* cinema reel).
   Kept untouched so the snapshot revert path is clean.
═══════════════════════════════════════════════════════════════════ */

/* Unified panel: image flush against info card, no gap */
.fp-panel {
  gap: 0;
  position: relative;
}
.fp-panel > .fp-media-wrap {
  height: 100%;
  min-height: 420px;
}
.fp-panel > .fp-panel-info {
  border-left: none;           /* flush against image */
  padding: 40px 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
  /* Active-state reveal: children fade up in sequence */
}
@media (max-width: 1023px) {
  .fp-panel > .fp-panel-info {
    border-left: 1px solid #E5E7EB;
    border-top: 3px solid #F47721;
    min-height: auto;
    padding: 28px 28px 26px;
  }
}
.fp-panel > .fp-panel-info > *       { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.fp-panel > .fp-panel-info > *:nth-child(1) { transition-delay: 0.15s; }
.fp-panel > .fp-panel-info > *:nth-child(2) { transition-delay: 0.25s; }
.fp-panel > .fp-panel-info > *:nth-child(3) { transition-delay: 0.35s; }
.fp-panel > .fp-panel-info > *:nth-child(4) { transition-delay: 0.45s; }
.fp-panel.fp-active > .fp-panel-info > * { opacity: 1; transform: translateY(0); }

/* Ken-burns style slow drift on the active image */
.fp-panel.fp-active .fp-media-img {
  transform: scale(1.05);
  transition: transform 8s linear;
}

/* Flagship: clickable media + badge */
.fp-media-wrap { position: relative; }
.fp-media-img {
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fp-media-wrap:hover .fp-media-img { transform: scale(1.04); }
.fp-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,18,32,0.55), rgba(11,18,32,0) 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.fp-media-wrap:hover .fp-media-overlay { opacity: 1; }
.fp-media-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: #F47721;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 9px 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(244,119,33,0.35);
}
.fp-media-wrap:hover .fp-media-badge {
  opacity: 1;
  transform: translateY(0);
}

/* ── Footer form ── */
.footer-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 7px;
}
/* Office location map block in the footer.
   Wrapper is an <a> that opens Google Maps in a new tab. The iframe
   inside has pointer-events disabled so the click always hits the
   wrapper — keeps interaction simple and consistent on touch. */
.footer-map {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  margin: 0 0 32px;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.footer-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  filter: grayscale(20%) contrast(95%);
  transition: filter 0.4s ease;
}
.footer-map-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(11,18,32,0.78);
  padding: 8px 14px;
  border-left: 2px solid #F47721;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.footer-map:hover {
  border-color: rgba(244,119,33,0.55);
}
.footer-map:hover iframe { filter: grayscale(0) contrast(100%); }
.footer-map:hover .footer-map-overlay {
  opacity: 1;
  transform: translateY(0);
}

.footer-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.footer-input::placeholder { color: rgba(255,255,255,0.25); }
.footer-input:focus {
  border-color: #F47721;
  background: rgba(255,255,255,0.08);
}
.footer-textarea { resize: none; min-height: 110px; }
.footer-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
  cursor: pointer;
}
.footer-select option { background: #1F2937; color: #fff; }
.footer-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: #F47721;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.footer-submit:hover {
  background: #D96218;
}

/* ── Back-to-top button polish ── */
#backTop {
  border-radius: 50%;
  transition:
    background var(--t-fast),
    transform var(--t-base),
    box-shadow var(--t-base),
    opacity var(--t-base);
  box-shadow: 0 6px 20px rgba(244,119,33,0.28), 0 2px 4px rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  display: none;
}
#backTop.is-visible {
  display: flex !important;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: backTopIn 0.45s var(--ease-out) both;
}
#backTop:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 28px rgba(244,119,33,0.42), 0 3px 8px rgba(0,0,0,0.08);
}
#backTop:active { transform: translateY(-1px) scale(0.98); }
@keyframes backTopIn {
  from { opacity: 0; transform: translateY(18px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Primary orange CTAs: unified shine on hover ── */
.bg-orange,
.footer-submit,
.fp-cta,
a[href="#contact"][style*="background:#F47721"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
a.inline-flex.bg-orange,
button.bg-orange,
.footer-submit {
  transition:
    background var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}
.footer-submit:hover {
  /* no transform lift — CTAs stay static */
}

/* ── We Build heading (responsive layout) ──
   Mobile: "We Build [Word]" inline on a single row.
   Desktop (lg+): each word stacks on its own line.       */
/* We Build — scroll-expand card. Starts as an inset rounded card, pins
   (sticky) and grows to full-bleed as you scroll; JS sets width/height/
   radius. Releases into the founder section once fully expanded. */
.we-expand { position: relative; background: #111827; height: 180vh; }
.we-expand-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.we-expand-card {
  width: 64%;
  height: 100%;
  border-radius: 0;
  background: #111827;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: width;
}
.we-expand-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  padding: 40px 24px;
}
.we-ticker-strip { flex: 0 0 auto; }
@media (max-width: 640px) {
  .we-expand { height: 165vh; }
  .we-expand-card { width: 86%; height: 100%; border-radius: 0; }
}

.wb-heading {
  display: flex;
  flex-direction: column;        /* always 2 rows: "We Build" / cycling word */
  align-items: center;
  row-gap: 0.06em;
}
.wb-heading .wb-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.28em;
}
.wb-heading .wb-word { display: inline-block; }
.wb-heading.is-center { justify-content: center; }

/* ── Clients 3-slide carousel.
   Track is a single grid cell that contains all 3 slides stacked
   on top of each other (grid-area: 1/1). The cell sizes to the
   largest slide (9 logos / 3 rows) so the section height is
   constant across slides — the 6-logo slide doesn't shrink it. */
.clients-carousel { position: relative; }
.clients-track {
  display: grid;
  grid-template-columns: 1fr;
}
.clients-slide {
  grid-area: 1 / 1;       /* stack all slides in the same cell */
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 × 3 logo grid */
  gap: 0;
  /* Hairline grid drawn on the container (not the cells): the logos carry a
     CSS filter that would recolor any border on the img itself, so the lines
     live here instead. Outer frame = border; interior rules = two gradients
     placing a 1px line at the right/bottom edge of every 1/3 tile. */
  border: 1px solid var(--c-border);
  background-image:
    linear-gradient(to right,  transparent calc(100% - 1px), var(--c-border) calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--c-border) calc(100% - 1px));
  background-size: calc(100% / 3) 100%, 100% calc(100% / 3);
  background-origin: padding-box;
  background-clip: padding-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.clients-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Dark mode: the section flips to a dark plate, so render the grid as a
   faint white hairline instead of the light-grey --c-border. */
[data-theme="dark"] .clients-slide {
  border-color: rgba(255, 255, 255, 0.12);
  background-image:
    linear-gradient(to right,  transparent calc(100% - 1px), rgba(255, 255, 255, 0.12) calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), rgba(255, 255, 255, 0.12) calc(100% - 1px));
}
.clients-slide .clients-logo-img {
  width: 100%;
  height: 140px;          /* taller cell → more padding; logo content stays ~64px */
  padding: 38px 56px;
  box-sizing: border-box;
  object-fit: contain;
}

/* "NA" placeholder for a missing client logo — matches the logo slot
   footprint so the 3×3 grid keeps a clean alignment. */
.clients-logo-na {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(17, 24, 39, 0.32);
  border: 1px dashed rgba(17, 24, 39, 0.18);
  background: transparent;
  user-select: none;
}
[data-theme="dark"] .clients-logo-na {
  color: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Dots */
.clients-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
}
.clients-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(17,24,39,0.2);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.clients-dot:hover { background: rgba(244,119,33,0.55); }
.clients-dot.is-active {
  background: #F47721;
  width: 26px;
}
.clients-dot:focus-visible {
  outline: 2px solid #F47721;
  outline-offset: 4px;
}

/* Tablet + mobile (< lg): shorter grid cells. */
@media (max-width: 1023px) {
  .clients-slide .clients-logo-img {
    height: 84px;
    padding: 16px 18px;
  }
  .clients-dots { margin-top: 28px; }
  .clients-dot { width: 8px; }
  .clients-dot.is-active { width: 24px; }
}

/* Phone: a hair tighter so the logos read well on narrow screens */
@media (max-width: 480px) {
  .clients-slide .clients-logo-img {
    height: 64px;
    padding: 12px 10px;
  }
}

/* ── Clients logos — uniform monochrome treatment.
   Two source families, both rendered as pure black-on-light /
   white-on-dark:
     1. Original macbook-exported PNGs (transparent bg + LIGHT ink)
        → light mode: invert(1) flips ink to dark, grayscale removes
          any residual hue.
        → dark mode: grayscale only.
     2. Logos exported via ffmpeg colorkey from JPG sources
        (transparent bg + DARK ink, optionally colored). Identified
        by the absence of "MacBook" in the src path.
        → light mode: grayscale + contrast only (no invert).
        → dark mode: add invert(1) so dark ink reads on dark plate.
*/
.clients-logo-img {
  height: 110px;
  width: auto;
  flex-shrink: 0;
  display: block;
  opacity: 0.6;           /* fade the logos so they read softer, not pure black */
  filter: invert(1) grayscale(100%);
}
.clients-logo-img:not([src*="MacBook"]) {
  filter: grayscale(100%) contrast(1.1);
}
[data-theme="dark"] .clients-logo-img {
  filter: grayscale(100%);
}
[data-theme="dark"] .clients-logo-img:not([src*="MacBook"]) {
  filter: invert(1) grayscale(100%) contrast(1.1);
}
/* Light-ink logos (white/pale artwork built for dark plates) — invert so they
   read as dark ink in light mode, leave as-is on the dark plate. Must follow the
   :not([src*="MacBook"]) rules above to win on equal specificity. */
.clients-logo-img.clients-logo-inv {
  filter: invert(1) grayscale(100%) contrast(1.1);
}
[data-theme="dark"] .clients-logo-img.clients-logo-inv {
  filter: grayscale(100%);
}
.clients-strip-fwd {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: clientFwd 55s linear infinite;
}
.clients-strip-rev {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: clientRev 55s linear infinite;
}
@keyframes clientFwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes clientRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* Tablet: moderately smaller + tighter gap */
@media (max-width: 1023px) {
  .clients-logo-img { height: 72px; }
  .clients-strip-fwd,
  .clients-strip-rev { gap: 24px; animation-duration: 40s; }
}
/* Phone: much smaller so logos read properly without huge horizontal overflow */
@media (max-width: 640px) {
  .clients-logo-img { height: 52px; }
  .clients-strip-fwd,
  .clients-strip-rev { gap: 14px; animation-duration: 32s; }
}

/* ── Page overlays (Projects + Detail + Journey + Leadership) ── */
#projectsOverlay,
#projectDetailOverlay,
#journeyOverlay,
#leadershipOverlay {
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 0.55s var(--ease-emphasized),
    opacity 0.3s ease;
  will-change: transform, opacity;
  contain: layout paint;
}
#projectsOverlay.open,
#projectDetailOverlay.open,
#journeyOverlay.open,
#leadershipOverlay.open {
  transform: translateX(0);
  opacity: 1;
}
/* Soft inner content stagger - gives the sliding panel a sense of depth */
#projectsOverlay.open > *,
#projectDetailOverlay.open > *,
#journeyOverlay.open > *,
#leadershipOverlay.open > * {
  animation: overlayContentIn 0.7s var(--ease-out) 0.1s both;
}
@keyframes overlayContentIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   JOURNEY PAGE - REDESIGN (jn-*)
═══════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes jnSlideUp   { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes jnFadeUp    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jnFadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes jnScrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.9; }
  50%      { transform: scaleY(0.55); opacity: 0.3; }
}
@keyframes jnGridShift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* ── Hero (Storytelling preset — shares tokens with .ld-hero) ── */
.jn-hero {
  position: relative;
  min-height: var(--hero-story-min-h);
  background: var(--hero-story-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--hero-story-pad-t) var(--hero-story-pad-x) var(--hero-story-pad-b);
}
.jn-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 25% 35%, rgba(244,119,33,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(244,119,33,0.08), transparent 55%);
  pointer-events: none;
}
.jn-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.8;
  animation: jnGridShift 35s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.jn-hero-inner {
  position: relative;
  max-width: var(--hero-max-w);
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}
.jn-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hero-eb-gap);
  font-size: var(--hero-eb-size);
  font-weight: var(--hero-eb-weight);
  letter-spacing: var(--hero-eb-tracking);
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 var(--hero-eb-mb);
  opacity: 0;
  animation: jnFadeUp 0.9s ease 0.15s forwards;
}
/* Force inline eyebrow bars in journey to standard width */
.jn-hero-eyebrow > span:not([class]),
.jn-hero-eyebrow .w-8 {
  display: block;
  width: var(--hero-eb-bar-w) !important;
  height: var(--hero-eb-bar-h) !important;
  background: var(--c-orange);
}
.jn-hero-title {
  font-family: var(--f-serif);
  font-weight: var(--hero-story-title-weight);
  font-size: var(--hero-story-title-size);
  line-height: var(--hero-story-title-lh);
  letter-spacing: var(--hero-story-title-tr);
  margin: 0 0 var(--hero-story-title-mb);
}
.jn-hero-title .jn-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;              /* breathing room so descenders (y, g) aren't clipped by the overflow mask */
}
.jn-hero-title .jn-line > em,
.jn-hero-title .jn-line {
  opacity: 0;
  transform: translateY(100%);
  animation: jnSlideUp 1s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}
.jn-hero-title .jn-line em { font-style: normal; font-weight: 400; color: rgba(255,255,255,0.65); }
.jn-hero-title .jn-line:nth-child(1) { animation-delay: 0.35s; }
.jn-hero-title .jn-line:nth-child(2) { animation-delay: 0.55s; }
.jn-hero-title .jn-line:nth-child(3) { animation-delay: 0.75s; }
.jn-hero-title .jn-accent {
  color: var(--c-orange);
  font-style: normal;
  font-weight: 700;
}
.jn-hero-sub {
  color: var(--hero-story-lead-color);
  font-size: var(--hero-story-lead-size);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
  font-weight: 300;
  opacity: 0;
  animation: jnFadeUp 0.9s ease 1.1s forwards;
}
.jn-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: jnFadeIn 0.6s ease 1.6s forwards;
  z-index: 3;
}
.jn-hero-scroll span {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.jn-scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, #F47721, transparent);
  transform-origin: top;
  animation: jnScrollPulse 2.2s ease-in-out infinite;
}

/* ── Stats ── */
.jn-stats {
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  padding: 80px 24px;
}
.jn-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 20px;
  text-align: center;
}
@media (min-width: 900px) {
  .jn-stats-inner { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
.jn-stat-num {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h1);
  font-weight: 700;
  color: #F47721;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
.jn-stat-num sup {
  font-size: 0.42em;
  font-weight: 400;
  margin-left: 2px;
  vertical-align: super;
}
.jn-stat-lbl {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0;
  position: relative;
  padding-top: 14px;
}
.jn-stat-lbl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: #F47721;
}

/* ═══════════════════════════════════════
   TIMELINE - sticky sidebar + right cards
═══════════════════════════════════════ */
.jn-tl {
  position: relative;
  padding: 100px 24px 140px;
  background: #FFFFFF;
  overflow-x: clip;         /* clip horizontal bleed without breaking position:sticky inside */
}
.jn-tl::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(244,119,33,0.04), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(244,119,33,0.03), transparent 50%);
  pointer-events: none;
}
.jn-tl-wrap {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 1024px) {
  .jn-tl-wrap {
    grid-template-columns: 340px 1fr;
    gap: 80px;
  }
}
@media (min-width: 1280px) {
  .jn-tl-wrap { grid-template-columns: 360px 1fr; gap: 100px; }
}

/* ── Left sidebar ── */
.jn-side {
  position: relative;
  align-self: start;
}
.jn-side-inner {
  position: static;
}
@media (min-width: 1024px) {
  .jn-side {
    align-self: stretch;
  }
  /* Fill the full column so the sticky child has room to move.
     Without height:100%, .jn-side-inner is only as tall as its content,
     which bounds position:sticky to a few hundred pixels of range. */
  .jn-side-inner {
    position: static;
    padding: 0;
    height: 100%;
  }
  /* Only the Currently-Viewing panel + quick-nav pin to the top —
     the eyebrow, title and sub paragraph above them scroll away normally */
  .jn-side-sticky {
    position: sticky;
    top: 96px;               /* clears the nav (≈78px) + 18px breathing room */
  }
}

/* ═══════════════════════════════════════
   JOURNEY — mobile-only: hide the Currently-Viewing
   panel + year nav (.jn-side-sticky) on phones/tablets
   so only the timeline cards remain.
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  .jn-side-sticky { display: none !important; }
}
.jn-side-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 18px;
}
.jn-side-title {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-dark);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.jn-side-sub {
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 24px;
  font-family: var(--f-sans);
  max-width: 320px;
}

/* Active block - live updating */
.jn-active {
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-orange);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.jn-active-lbl {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted-lt);
  margin: 0 0 8px;
}
.jn-active-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Archivo Black', serif;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1;
}
#jnCountNum {
  font-size: var(--fs-h2);
  color: var(--c-orange);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  letter-spacing: -0.02em;
}
#jnCountNum.flip {
  animation: jnNumFlip 0.5s var(--ease-out);
}
@keyframes jnNumFlip {
  0%   { opacity: 0; transform: translateY(14px) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.jn-active-sep {
  font-size: var(--fs-lead);
  color: #D1D5DB;
  font-weight: 400;
}
#jnCountTotal {
  font-size: var(--fs-lead);
  color: var(--c-muted-lt);
  font-weight: 400;
}
.jn-active-rail {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--c-border);
  margin-bottom: 14px;
  overflow: hidden;
}
#jnRailFill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(to right, var(--c-orange), var(--c-orange-dk));
  transition: width 0.75s var(--ease-out);
  box-shadow: 0 0 10px rgba(244,119,33,0.5);
}
.jn-active-title {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--c-dark);
  line-height: 1.25;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  min-height: 24px;
}
.jn-active-title.flip {
  animation: jnTextFlip 0.45s var(--ease-out);
}
@keyframes jnTextFlip {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.jn-active-year {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0;
}

/* Year nav list */
.jn-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
}
.jn-nav-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--c-border);
  cursor: pointer;
  transition:
    border-left-color var(--t-base),
    padding-left var(--t-base),
    background var(--t-fast);
  position: relative;
}
.jn-nav-item:hover,
.jn-nav-item.active {
  border-left-color: var(--c-orange);
  padding-left: 18px;
}
.jn-nav-item.active {
  background: linear-gradient(to right, rgba(244,119,33,0.04), transparent);
}
.jn-nav-y {
  font-family: var(--f-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-muted-lt);
  transition: color var(--t-fast);
  min-width: 38px;
}
.jn-nav-n {
  font-family: var(--f-sans);
  font-size: var(--fs-caption);
  color: var(--c-text);
  font-weight: 500;
  transition: color var(--t-fast);
}
.jn-nav-item:hover .jn-nav-y,
.jn-nav-item.active .jn-nav-y,
.jn-nav-item:hover .jn-nav-n,
.jn-nav-item.active .jn-nav-n {
  color: var(--c-orange);
}

/* ── Right column: cards + vertical rail ── */
.jn-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 20px 0 40px 76px;
}
@media (max-width: 1023px) {
  .jn-cards { gap: 72px; padding-left: 56px; }
}
@media (max-width: 640px) {
  .jn-cards { padding-left: 40px; gap: 56px; }
}

/* ── Continuous vertical progress rail ── */
.jn-rail-vert {
  position: absolute;
  left: 15px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 1023px) { .jn-rail-vert { left: 11px; } }
@media (max-width: 640px)  { .jn-rail-vert { left: 7px; } }
.jn-rail-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17,24,39,0.04) 0%,
    rgba(17,24,39,0.14) 8%,
    rgba(17,24,39,0.14) 92%,
    rgba(17,24,39,0.04) 100%
  );
}
.jn-rail-fill {
  position: absolute;
  top: 0; left: -1px; right: -1px;
  height: 0;
  background: linear-gradient(
    to bottom,
    rgba(244,119,33,0.7) 0%,
    var(--c-orange) 10%,
    var(--c-orange) 85%,
    var(--c-orange-dk) 100%
  );
  box-shadow: 0 0 16px rgba(244,119,33,0.45), 0 0 4px rgba(244,119,33,0.8);
  transition: height 0.7s var(--ease-out);
  will-change: height;
  border-radius: 2px;
}
/* Moving tip - a glow that follows the end of the fill */
.jn-rail-fill::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--c-orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(244,119,33,0.2), 0 0 16px rgba(244,119,33,0.8);
  animation: railTipGlow 2s ease-in-out infinite;
}
@keyframes railTipGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244,119,33,0.2), 0 0 16px rgba(244,119,33,0.8); }
  50%      { box-shadow: 0 0 0 8px rgba(244,119,33,0.1), 0 0 24px rgba(244,119,33,1); }
}

/* ── Rail end-cap below last card ── */
.jn-rail-end {
  position: relative;
  margin-top: 20px;
  padding: 24px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.jn-rail-end-dot {
  position: absolute;
  left: -69px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(17,24,39,0.12);
  box-shadow: 0 0 0 4px var(--c-bg-alt-2);
}
@media (max-width: 1023px) { .jn-rail-end-dot { left: -50px; } }
@media (max-width: 640px)  { .jn-rail-end-dot { left: -38px; } }
.jn-rail-end-lbl {
  font-family: var(--f-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted-lt);
  margin: 0;
}

/* ── Each milestone ── */
.jn-m {
  position: relative;
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 1s var(--ease-emphasized),
    transform 1s var(--ease-emphasized);
  will-change: transform, opacity;
}
.jn-m.in-view { opacity: 1; transform: translateY(0); }

/* ── Year strip above each card (with marker on rail) ── */
.jn-m-strip {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.jn-m-marker {
  position: absolute;
  left: -69px;
  top: 16px;
  width: 16px;
  height: 16px;
  z-index: 2;
}
@media (max-width: 1023px) { .jn-m-marker { left: -50px; width: 14px; height: 14px; } }
@media (max-width: 640px)  { .jn-m-marker { left: -38px; top: 14px; width: 12px; height: 12px; } }
.jn-m-marker-dot {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 2px solid rgba(17,24,39,0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--c-bg-alt-2);
  transition:
    background 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.jn-m-marker-ring {
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(244,119,33,0.5);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s, transform 0.4s;
}
.jn-m.is-active .jn-m-marker-dot {
  background: var(--c-orange);
  border-color: var(--c-orange);
  transform: scale(1.1);
  box-shadow:
    0 0 0 4px var(--c-bg-alt-2),
    0 0 0 10px rgba(244,119,33,0.12),
    0 0 18px rgba(244,119,33,0.55);
}
.jn-m.is-active .jn-m-marker-ring {
  opacity: 1;
  transform: scale(1);
  animation: markerPulse 2.4s ease-out infinite;
}
@keyframes markerPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.8); opacity: 0;   }
  100% { transform: scale(1.8); opacity: 0;   }
}

/* Horizontal connector from marker to year */
.jn-m-connector {
  width: 32px;
  height: 2px;
  background: rgba(17,24,39,0.12);
  transition: background 0.5s, width 0.5s var(--ease-out);
  flex-shrink: 0;
  align-self: center;
}
.jn-m.is-active .jn-m-connector {
  background: var(--c-orange);
  width: 44px;
}
@media (max-width: 640px) { .jn-m-connector { width: 16px; } }

.jn-m-strip-year {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h1);
  font-weight: 700;
  color: rgba(17,24,39,0.18);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  transition: color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  position: relative;
  display: inline-block;
}
.jn-m.is-active .jn-m-strip-year {
  color: var(--c-orange);
  transform: translateY(-3px);
}
/* Subtle underline that appears when active */
.jn-m-strip-year::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: var(--c-orange);
  transition: width 0.6s var(--ease-out);
}
.jn-m.is-active .jn-m-strip-year::after { width: 100%; }

.jn-m-strip-sep {
  color: var(--c-muted-lt);
  font-size: var(--fs-body);
  margin: 0 2px;
}
.jn-m-strip-tag {
  font-family: var(--f-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted-lt);
  transition: color 0.5s var(--ease-out);
  position: relative;
  top: -2px;
}
.jn-m.is-active .jn-m-strip-tag { color: var(--c-orange); }

/* ── The card ── */
.jn-m-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    border-color 0.4s var(--ease-out);
}
@media (min-width: 640px) {
  .jn-m-card {
    grid-template-columns: minmax(260px, 46%) 1fr;
  }
}
.jn-m-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
}
.jn-m.is-active .jn-m-card {
  border-color: rgba(244,119,33,0.35);
  box-shadow:
    0 24px 60px rgba(244,119,33,0.12),
    0 6px 14px rgba(0,0,0,0.05);
}
/* Side accent bar that extends on active */
.jn-m-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--c-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease-out);
  z-index: 3;
}
.jn-m.in-view .jn-m-card::before,
.jn-m.is-active .jn-m-card::before { transform: scaleY(1); }

/* ── Image (left of card) ── */
.jn-m-image {
  position: relative;
  overflow: hidden;
  background: var(--c-border);
  aspect-ratio: 4/3;
}
@media (min-width: 640px) {
  .jn-m-image { aspect-ratio: auto; min-height: 320px; }
}
.jn-m-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.15);
  filter: saturate(0.85);
  transition:
    transform 1.8s var(--ease-emphasized),
    filter 0.8s ease;
}
.jn-m.in-view .jn-m-image img { transform: scale(1.02); }
.jn-m-card:hover .jn-m-image img {
  transform: scale(1.08);
  filter: saturate(1.05);
}
.jn-m-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,18,32,0) 45%, rgba(11,18,32,0.5));
  pointer-events: none;
  z-index: 1;
}

/* Curtain - orange slab that slides away on reveal */
.jn-m-curtain {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-orange), var(--c-orange-dk));
  z-index: 4;
  transform-origin: top;
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1) 0.15s;
}
.jn-m.in-view .jn-m-curtain {
  transform: translateY(-101%);
}

/* Image bottom-left meta (index + line) */
.jn-m-img-meta {
  position: absolute;
  left: 20px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.7s var(--ease-out) 1s, transform 0.7s var(--ease-out) 1s;
}
.jn-m.in-view .jn-m-img-meta { opacity: 1; transform: translateX(0); }
.jn-m-img-index {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.jn-m-img-line {
  width: 24px;
  height: 1px;
  background: #fff;
  opacity: 0.7;
}
/* Hide the image index tag (01/08 etc.) on mobile — desktop is unchanged */
@media (max-width: 1023px) {
  .jn-m-img-meta { display: none; }
}

/* ── Text (right of card) ── */
.jn-m-text {
  padding: 32px 32px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  .jn-m-text { padding: 44px 48px 46px; }
}

.jn-m-head {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-dark);
  line-height: 1.2;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out) 0.55s, transform 0.9s var(--ease-out) 0.55s;
}
.jn-m.in-view .jn-m-head { opacity: 1; transform: translateY(0); }

.jn-m-body {
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.85;
  margin: 0 0 26px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out) 0.7s, transform 0.9s var(--ease-out) 0.7s;
}
.jn-m.in-view .jn-m-body { opacity: 1; transform: translateY(0); }

.jn-m-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
  font-family: var(--f-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-muted);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out) 0.85s, transform 0.9s var(--ease-out) 0.85s;
}
.jn-m.in-view .jn-m-meta { opacity: 1; transform: translateY(0); }
.jn-m-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-orange);
  flex-shrink: 0;
}

/* ── Philosophy quote ── */
.jn-quote {
  background: #fff;
  padding: 120px 24px;
  text-align: center;
  position: relative;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  overflow: hidden;
}
.jn-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(244,119,33,0.04), transparent 70%);
}
.jn-quote-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.jn-quote-mark {
  font-family: 'Archivo Black', serif;
  font-size: 180px;
  font-weight: 700;
  color: #F47721;
  opacity: 0.18;
  line-height: 0.7;
  margin: 0 0 -50px;
  pointer-events: none;
}
.jn-quote-text {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h2);
  font-weight: 500;
  color: #111827;
  line-height: 1.28;
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.jn-quote-text em {
  color: #F47721;
  font-style: normal;
}
.jn-quote-line {
  width: 48px;
  height: 1px;
  background: #F47721;
  margin: 0 auto 16px;
}
.jn-quote-attr {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0;
}

/* ═══════════════════════════════════════
   JOURNEY TIMELINE (legacy - unused after redesign)
═══════════════════════════════════════ */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}
/* Central vertical rail (desktop) */
.timeline::before {
  content: '';
  position: absolute;
  left: 120px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #E5E7EB;
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 40px 1fr;
  gap: 0;
  padding-bottom: 44px;
  align-items: start;
}
.tl-item:last-child { padding-bottom: 0; }

.tl-year {
  font-family: 'Archivo Black', 'Archivo Black', serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: #F47721;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-top: 6px;
  text-align: right;
  padding-right: 16px;
}

.tl-dot {
  position: relative;
  width: 14px;
  height: 14px;
  background: #F47721;
  border-radius: 50%;
  margin: 12px auto 0;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #E5E7EB;
  z-index: 1;
}

.tl-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-left: 3px solid #F47721;
  overflow: hidden;
  margin-left: 8px;
  display: grid;
  grid-template-columns: 1fr;
  transition: box-shadow 0.3s, transform 0.3s;
}
@media (min-width: 640px) {
  .tl-card {
    grid-template-columns: 1.1fr 1fr;
  }
}
.tl-card:hover {
  box-shadow: 0 14px 40px rgba(0,0,0,0.09);
  transform: translateY(-3px);
}
.tl-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #F5F5F3;
}
@media (min-width: 640px) {
  .tl-img { aspect-ratio: auto; height: 100%; min-height: 220px; }
}
.tl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.tl-card:hover .tl-img img { transform: scale(1.04); }
.tl-content {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tl-body {
  font-family: 'Archivo Black', serif;
  color: #111827;
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

/* Timeline mobile */
@media (max-width: 767px) {
  .timeline::before { left: 20px; }
  .tl-item {
    grid-template-columns: 40px 1fr;
  }
  .tl-year {
    grid-column: 2;
    text-align: left;
    padding: 0;
    font-size: var(--fs-h3);
    margin-bottom: 6px;
  }
  .tl-dot {
    grid-row: 1 / span 2;
    grid-column: 1;
    margin-top: 10px;
  }
  .tl-card {
    grid-column: 2;
    margin-left: 0;
    padding: 18px 20px;
  }
  .tl-head { font-size: var(--fs-lead); }
}

/* ═══════════════════════════════════════
   LEADERSHIP PAGE (ld-*)
═══════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes ldSlideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes ldFadeUp  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ldFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ldScrollTick {
  0%, 100% { transform: scaleY(1); opacity: 0.9; }
  50%      { transform: scaleY(0.45); opacity: 0.25; }
}
@keyframes ldGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}
@keyframes ldNumCount {
  from { opacity: 0; transform: translateY(40%) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ──────────── HERO (Storytelling preset — shares tokens with .jn-hero) ──────────── */
.ld-hero {
  position: relative;
  min-height: var(--hero-story-min-h);
  background: var(--hero-story-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--hero-story-pad-t) var(--hero-story-pad-x) var(--hero-story-pad-b);
}

/* About hero — full-bleed photo with darken overlay for legibility. */
.ab-hero--photo .ab-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.ab-hero--photo .ab-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,18,32,0.45) 0%, rgba(11,18,32,0.65) 60%, rgba(11,18,32,0.85) 100%);
}
.ld-hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 35%, rgba(244,119,33,0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 85%, rgba(244,119,33,0.08), transparent 55%);
  pointer-events: none;
}
.ld-hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: ldGridDrift 45s linear infinite;
  mask-image: radial-gradient(ellipse at 50% 60%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 15%, transparent 75%);
  opacity: 0.85;
}
.ld-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--hero-max-w);
  width: 100%;
  margin: 0 auto;
}
.ld-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hero-eb-gap);
  font-size: var(--hero-eb-size);
  font-weight: var(--hero-eb-weight);
  letter-spacing: var(--hero-eb-tracking);
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 var(--hero-eb-mb);
  opacity: 0;
  animation: ldFadeUp 0.9s var(--ease-out) 0.2s forwards;
}
.ld-eb-line {
  display: block;
  width: var(--hero-eb-bar-w);
  height: var(--hero-eb-bar-h);
  background: var(--c-orange);
}
.ld-hero-title {
  font-family: var(--f-serif);
  font-weight: var(--hero-story-title-weight);
  font-size: var(--hero-story-title-size);
  line-height: var(--hero-story-title-lh);
  letter-spacing: var(--hero-story-title-tr);
  margin: 0;
  max-width: 1100px;
}
.ld-hero-title .ld-line {
  display: block;
  overflow: hidden;
  /* extra bottom padding so descenders (g, j, p, q, y) aren't clipped
     by the overflow:hidden used by the staggered word-reveal animation */
  padding: 2px 0 0.22em;
}
.ld-hero-title .ld-line > * { display: inline-block; }
.ld-hero-title .ld-line,
.ld-hero-title .ld-line em,
.ld-hero-title .ld-num,
.ld-hero-title .ld-num-lbl {
  opacity: 0;
  transform: translateY(100%);
  animation: ldSlideUp 1s var(--ease-emphasized) forwards;
}
/* Stagger mirrors .jn-hero rhythm (0.20s increments) */
.ld-hero-title .ld-line:nth-child(1) { animation-delay: 0.35s; }
.ld-hero-title .ld-line:nth-child(2) { animation-delay: 0.55s; }
.ld-hero-title .ld-line:nth-child(3) { animation-delay: 0.75s; }
.ld-hero-title .ld-line:nth-child(4) { animation-delay: 0.95s; }
.ld-hero-title em {
  font-style: normal;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
}
.ld-line-num {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-top: 8px;
}
.ld-num {
  font-family: 'Archivo Black', serif;
  font-size: 1.35em;
  font-weight: 700;
  color: var(--c-orange);
  letter-spacing: -0.04em;
  line-height: 1;
}
.ld-num-lbl {
  font-family: var(--f-sans);
  font-size: 0.18em;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-bottom: 0.3em;
}
.ld-hero-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding-top: 48px;
  flex-wrap: wrap;
  opacity: 0;
  animation: ldFadeIn 0.6s ease 1.5s forwards;
}
.ld-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.ld-hero-meta .ld-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-orange);
}
.ld-hero-scroll {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.ld-scroll-tick {
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, var(--c-orange), transparent);
  transform-origin: left;
  animation: ldScrollTick 2.2s ease-in-out infinite;
}

/* ──────────── INTRO ──────────── */
.ld-intro {
  background: #fff;
  padding: 100px 24px 120px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
}
.ld-intro::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  font-family: 'Archivo Black', serif;
  font-size: 480px;
  font-weight: 700;
  color: var(--c-orange);
  opacity: 0.035;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
}
.ld-intro-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 80px;
}
@media (min-width: 1024px) {
  .ld-intro-wrap { grid-template-columns: 1.4fr 0.9fr; gap: 80px; }
}
.ld-intro-big {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-dark);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
}
.ld-pill {
  display: inline;
  color: var(--c-orange);
  font-weight: 600;
  position: relative;
  white-space: nowrap;
  padding: 0 2px;
}
.ld-pill::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 4px;
  background: var(--c-orange-25);
  z-index: -1;
}
.ld-intro-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}
.ld-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 30px;
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-orange);
}
.ld-stat-num {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--c-orange);
  letter-spacing: -0.03em;
  line-height: 1;
}
.ld-stat-lbl {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
}
.ld-intro-copy {
  color: var(--c-muted);
  font-size: var(--fs-body);
  line-height: 1.8;
  font-family: var(--f-sans);
}

/* Philosophy pull-quote */
.ld-quote-wrap {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--c-border);
}
.ld-quote-mark {
  font-family: 'Archivo Black', serif;
  font-size: 180px;
  font-weight: 700;
  color: var(--c-orange);
  opacity: 0.18;
  line-height: 0.7;
  margin: 0 0 -50px;
  pointer-events: none;
}
.ld-quote-text {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--c-dark);
  line-height: 1.28;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.ld-quote-text em { color: var(--c-orange); font-style: normal; }
.ld-quote-line {
  width: 48px;
  height: 1px;
  background: var(--c-orange);
  margin: 0 auto 14px;
}
.ld-quote-attr {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted-lt);
  margin: 0;
}

/* ──────────── LEADERS GRID ──────────── */
.ld-leaders {
  background: var(--c-bg-alt-2);
  padding: 100px 24px 120px;
  position: relative;
  overflow: hidden;
}
.ld-leaders::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(244,119,33,0.04), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(244,119,33,0.03), transparent 55%);
  pointer-events: none;
}
.ld-leaders-head {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 72px;
}
.ld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 18px;
}
.ld-h2 {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--c-dark);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.ld-h2 em {
  color: var(--c-orange);
  font-style: normal;
  font-weight: 500;
}
.ld-leaders-sub {
  color: var(--c-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0;
  font-family: var(--f-sans);
}

/* Leader cards */
.ld-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .ld-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.ld-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    transform 0.6s var(--ease-out),
    box-shadow 0.6s var(--ease-out),
    border-color 0.4s;
  box-shadow: var(--shadow-sm);
  cursor: default;
  opacity: 0;
  transform: translateY(40px);
  animation: ldFadeUp 0.9s var(--ease-emphasized) forwards;
}
.ld-card[data-idx="0"] { animation-delay: 0.1s; }
.ld-card[data-idx="1"] { animation-delay: 0.25s; }
.ld-card:hover {
  box-shadow: 0 32px 80px rgba(0,0,0,0.12), 0 8px 20px rgba(244,119,33,0.08);
  border-color: rgba(244,119,33,0.35);
}

/* Big corner number */
.ld-card-num {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--c-orange);
  opacity: 0.08;
  line-height: 1;
  letter-spacing: -0.04em;
  z-index: 2;
  transition: opacity 0.5s, transform 0.5s var(--ease-out);
  pointer-events: none;
}
.ld-card:hover .ld-card-num {
  opacity: 0.22;
  transform: scale(1.08);
}

/* Portrait container */
.ld-card-portrait {
  position: relative;
  aspect-ratio: 4/4.3;
  overflow: hidden;
  background: linear-gradient(145deg, #EDEAE4 0%, #F5F2EC 100%);
}
.ld-card-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 70%, rgba(244,119,33,0.15), transparent 55%),
    linear-gradient(to bottom, transparent 60%, rgba(11,18,32,0.35));
  transition: opacity 0.6s var(--ease-out);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.ld-card:hover .ld-card-bg { opacity: 1; }

.ld-card-portrait img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: saturate(0.85) contrast(1.02);
  transform: scale(1.01);
  transition:
    transform 1s var(--ease-out),
    filter 0.7s var(--ease-out);
  z-index: 0;
}
.ld-card:hover .ld-card-portrait img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1);
}

/* Corner frame accents */
.ld-card-frame {
  position: absolute;
  inset: 16px;
  pointer-events: none;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.25);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.ld-card:hover .ld-card-frame {
  opacity: 1;
  transform: scale(1);
}

/* Body */
.ld-card-body {
  padding: 32px 32px 34px;
  position: relative;
}
.ld-card-role {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 12px;
  position: relative;
  padding-right: 32px;
}
.ld-card-role::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--c-orange);
  transform-origin: left;
  transform: scaleX(0.5);
  transition: transform 0.4s var(--ease-out);
}
.ld-card:hover .ld-card-role::after { transform: scaleX(1); }
.ld-card-name {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-dark);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.ld-card-divider {
  width: 36px;
  height: 1px;
  background: var(--c-border);
  margin-bottom: 16px;
  transition: width 0.5s var(--ease-out), background 0.4s;
}
.ld-card:hover .ld-card-divider {
  width: 64px;
  background: var(--c-orange);
}
.ld-card-bio {
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-family: var(--f-sans);
  margin: 0 0 22px;
}
.ld-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.ld-card-years {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-orange);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ld-card-sep {
  width: 1px;
  height: 16px;
  background: var(--c-border);
}
.ld-card-sectors {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.4;
}

/* ──────────── THIRD PARTNER ──────────── */
.ld-third {
  position: relative;
  max-width: 600px;
  margin: 72px auto 0;
}
.ld-third-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-orange);
  transition: box-shadow 0.4s, transform 0.4s;
}
.ld-third-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ld-third-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--c-orange), var(--c-orange-dk));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(244,119,33,0.3);
}
.ld-third-lbl {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 4px;
}
.ld-third-name {
  font-family: 'Archivo Black', serif;
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--c-dark);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.ld-third-role {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}

/* ──────────── CONTACT STRIP ──────────── */
.ld-contact-strip {
  max-width: 1100px;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}
@media (min-width: 700px) {
  .ld-contact-strip { grid-template-columns: repeat(3, 1fr); }
}
.ld-contact-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: #fff;
  color: var(--c-dark);
  text-decoration: none;
  transition:
    background 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
  position: relative;
}
.ld-contact-tile:not(.ld-contact-tile-static):hover {
  background: #FFF8F3;
  color: var(--c-orange);
}
.ld-contact-tile svg {
  flex-shrink: 0;
  color: var(--c-orange);
  transition: transform 0.3s var(--ease-out);
}
.ld-contact-tile:hover svg {
  transform: scale(1.1) rotate(-6deg);
}
.ld-contact-lbl {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted-lt);
  margin: 0 0 2px;
}
.ld-contact-val {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0;
  color: inherit;
}

.po-back-btn:hover  { color: #F47721; }
.po-back-btn:hover .po-back-icon { transform: translateX(-4px); }
.po-close-btn:hover { border-color: #F47721; color: #F47721; }

/* Project thumbnail cards in overlay */
.proj-thumb-card {
  border: 1px solid var(--c-border);
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color var(--t-base);   /* no lift / shadow — image zoom only */
}
.proj-thumb-card:hover {
  border-color: var(--c-orange-40);
}
.proj-thumb-img {
  transition: transform 1.4s ease;   /* slow, even, smooth zoom (no fast/jerky start) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.proj-thumb-card:hover .proj-thumb-img { transform: scale(1.06); }

/* Project detail layout (legacy - kept for safety) */
.proj-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 1024px) {
  .proj-detail-grid { grid-template-columns: 1.35fr 0.65fr; }
}

/* ═══════════════════════════════════════
   PROJECT DETAIL — NEW DESIGN (prj-*)
   Mobile-first architecture-magazine layout
═══════════════════════════════════════ */
body.page-project { background: #FFFFFF; }

/* ── Breadcrumb / back strip (sticky below the nav) ── */
.prj-crumb {
  position: sticky;
  top: 72px;                        /* mobile nav height */
  z-index: 30;
  padding: 12px 20px;
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid #E5E7EB;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 44px;
}
.prj-crumb::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .prj-crumb { top: 78px; }         /* desktop nav height */
}
@media (min-width: 1024px) {
  .prj-crumb { padding: 16px 48px; font-size: var(--fs-caption); }
}
.prj-crumb a { color: #6B7280; text-decoration: none; transition: color 0.2s; }
.prj-crumb a:hover { color: #F47721; }
.prj-crumb-sep { color: #D1D5DB; }
.prj-crumb-current {
  color: #111827;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55vw;
}
.prj-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #111827 !important;
  letter-spacing: 0.12em;
}
.prj-back:hover svg { transform: translateX(-3px); }
.prj-back svg { transition: transform 0.2s; }

/* ── Hero ── */
.prj-hero { position: relative; background: #0B1220; }
.prj-hero-img {
  width: 100%;
  height: 65vh;
  min-height: 420px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.prj-hero-photo { display: none; }   /* desktop uses the cover background; mobile uses this full image */
@media (max-width: 1023px) {
  .prj-hero-img { display: none; }                       /* hide cropped cover on mobile */
  .prj-hero-photo { display: block; width: 100%; height: auto; }  /* full width, no crop */
  /* eyebrow: stack category over location, left-aligned (was centered flex → looked broken) */
  .prj-hero-eyebrow { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; letter-spacing: 0.2em; text-align: left; }
  .prj-hero-eyebrow > span { text-align: left; width: 100%; }
  .prj-hero-eyebrow .prj-dot { display: none; }
}
.prj-hero-content {
  padding: 28px 20px 32px;
  background: #FFFFFF;
}
.prj-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #F47721;
  margin: 0 0 14px;
}
.prj-dot { width: 4px; height: 4px; border-radius: 50%; background: #D1D5DB; }
.prj-hero-title {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0 0 14px;
}
.prj-hero-lead {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: #4B5563;
  margin: 0;
  max-width: 640px;
}
@media (min-width: 1024px) {
  .prj-hero-img { height: 100vh; min-height: 640px; position: relative; }
  .prj-hero-img::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70%;
    background: linear-gradient(to top,
      rgba(11,18,32,0.92) 0%,
      rgba(11,18,32,0.55) 45%,
      rgba(11,18,32,0) 100%);
    pointer-events: none;
  }
  .prj-hero-content {
    position: absolute;
    left: 48px; right: 48px; bottom: 56px;
    padding: 0;
    background: transparent;
    color: #fff;
    z-index: 2;
    max-width: 820px;
  }
  .prj-hero-eyebrow {
    color: #FFFFFF;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  }
  .prj-hero-title { color: #fff; font-size: var(--fs-h2); text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
  .prj-hero-lead  { color: rgba(255,255,255,0.92); font-size: var(--fs-lead); text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
  .prj-dot { background: #F47721; width: 5px; height: 5px; }
}

/* ── Body: facts sidebar + main content ── */
.prj-body-wrap { max-width: 1320px; margin: 0 auto; padding: 0; }
@media (min-width: 1024px) {
  .prj-body-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 80px; padding: 0 48px; }
}

/* ── Key facts ── */
.prj-facts { padding: 20px 20px 0; }
.prj-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #E5E7EB;
  background: #fff;
}
.prj-fact {
  padding: 16px 18px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
}
.prj-fact:nth-child(2n) { border-right: none; }
.prj-fact:nth-child(n+3) { border-bottom: none; }
.prj-fact-lbl {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-bottom: 6px;
}
.prj-fact-val {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .prj-facts {
    padding: 72px 0 40px;
    position: sticky;
    top: 88px;
    align-self: start;
  }
  .prj-facts-grid { display: block; border: none; background: transparent; }
  .prj-fact {
    padding: 20px 0;
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB !important;
    min-height: 0;
  }
  .prj-fact:last-child { border-bottom: none !important; }
  .prj-fact-lbl { font-size: var(--fs-micro); letter-spacing: 0.24em; }
  .prj-fact-val { font-size: var(--fs-body); }
}

/* ── Main content column ── */
.prj-main { padding: 40px 20px 60px; }
@media (min-width: 1024px) { .prj-main { padding: 72px 0 96px; max-width: 820px; } }

.prj-h2 {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.1;
  margin: 0 0 24px;
  color: #111827;
  letter-spacing: -0.015em;
}
.prj-overview p {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: #374151;
  margin: 0 0 20px;
  max-width: 720px;
}
@media (min-width: 1024px) { .prj-overview p { font-size: var(--fs-lead); line-height: 1.7; } }

/* ── Scope of Work ── */
.prj-scope { margin-top: 56px; }
.prj-scope-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
  padding: 4px 20px 16px;
  margin: 0 -20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.prj-scope-track::-webkit-scrollbar { display: none; }
.prj-scope-card {
  flex: 0 0 82%;
  scroll-snap-align: start;
  padding: 24px;
  background: #fff;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
}
.prj-scope-icon { color: #F47721; }
.prj-scope-title {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}
.prj-scope-desc {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #6B7280;
  margin: 0;
}
.prj-scope-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.prj-scope-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: #E5E7EB;
  transition: background 0.25s, width 0.25s, border-radius 0.25s;
}
.prj-scope-dots span.active { background: #F47721; width: 20px; border-radius: 3px; }
@media (min-width: 1024px) {
  .prj-scope-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    overflow: visible;
    padding: 0; margin: 0;
  }
  .prj-scope-card { flex: 0 0 auto; min-height: 220px; }
  .prj-scope-dots { display: none; }
}

/* ── Gallery ── */
.prj-gallery { margin-top: 56px; }
.prj-gallery-lead { margin: 0; }
.prj-gallery-lead img, .prj-gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  cursor: zoom-in;
  background: #F3F4F6;
}
.prj-gallery-grid { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
  .prj-gallery-lead img { aspect-ratio: 16/9; object-fit: cover; border-radius: 0; }
  .prj-gallery-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .prj-gallery-grid img {
    aspect-ratio: 4/3; object-fit: cover; border-radius: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
  }
  .prj-gallery-grid img:hover { transform: scale(1.02); }
  /* Odd trailing image spans both cols + switches to 16/9 so it never sits alone */
  .prj-gallery-grid img:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 16/9;
  }
}

/* Gallery heading + counter strip */
.prj-gallery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.prj-gallery-head .prj-h2 { margin: 0; }
.prj-gallery-count {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0;
}

/* ── At-a-glance numeric strip ── */
.prj-stats {
  margin-top: 64px;
  padding: 36px 0;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}
@media (min-width: 768px) { .prj-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.prj-stat { display: flex; flex-direction: column; gap: 8px; }
.prj-stat-num {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-h2);
  color: #111827;
  line-height: 1;
  letter-spacing: -0.02em;
}
.prj-stat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6B7280;
  font-weight: 700;
}

/* ═══════════════════════════════════════
   RELATED PROJECTS CAROUSEL
   (replaces the old 2-card prev/next strip)
═══════════════════════════════════════ */
.prj-rel {
  padding: 64px 20px 72px;
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
  overflow: hidden;
}
@media (min-width: 768px)  { .prj-rel { padding: 88px 32px 96px; } }
@media (min-width: 1024px) { .prj-rel { padding: 112px 48px 120px; } }

.prj-rel-head {
  max-width: 1280px;
  margin: 0 auto 36px;
}
@media (min-width: 1024px) { .prj-rel-head { margin-bottom: 48px; } }

.prj-rel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F47721;
  margin: 0 0 16px;
}
.prj-rel-bar {
  display: block;
  width: 32px;
  height: 1px;
  background: #F47721;
}
.prj-rel-title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0;
}
.prj-rel-title-cat { color: #F47721; }

/* Viewport + track (buttons positioned absolutely at left/right edges) */
.prj-rel-viewport {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.prj-rel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.14);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.prj-rel-btn--prev { left: 0; }
.prj-rel-btn--next { right: 0; }
.prj-rel-btn:hover {
  background: #F47721;
  border-color: #F47721;
  color: #FFFFFF;
}
.prj-rel-btn:active { transform: translateY(-50%) scale(0.96); }
@media (min-width: 1024px) {
  .prj-rel-btn { width: 56px; height: 56px; }
  .prj-rel-btn--prev { left: -8px; }
  .prj-rel-btn--next { right: -8px; }
}
.prj-rel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prj-rel-track::-webkit-scrollbar { display: none; }

/* Card */
.prj-rel-card {
  flex: 0 0 80%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.prj-rel-card:hover {
  border-color: #F47721;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -22px rgba(17, 24, 39, 0.22);
}
@media (min-width: 640px)  { .prj-rel-card { flex: 0 0 48%; } }
@media (min-width: 768px)  { .prj-rel-card { flex: 0 0 38%; gap: 18px; } }
@media (min-width: 1024px) { .prj-rel-card { flex: 0 0 calc((100% - 32px) / 3); } }

.prj-rel-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
  background: #E5E7EB;
}
.prj-rel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.prj-rel-card:hover .prj-rel-media img { transform: scale(1.06); }

.prj-rel-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111827;
}

.prj-rel-body {
  position: relative;
  padding: 18px 56px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prj-rel-name {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #111827;
  margin: 0 0 6px;
}
.prj-rel-loc {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: #6B7280;
  margin: 0;
  flex: 1;
}
.prj-rel-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #111827;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.prj-rel-card:hover .prj-rel-arrow {
  background: #F47721;
  color: #FFFFFF;
}
.prj-rel-card:hover .prj-rel-arrow svg { transform: translateX(2px); }
.prj-rel-arrow svg { transition: transform 0.25s ease; }

/* Dark mode */
[data-theme="dark"] .prj-rel            { background: #0B1220; border-top-color: #1F2937; }
[data-theme="dark"] .prj-rel-title      { color: #F9FAFB; }
[data-theme="dark"] .prj-rel-btn        { background: #0F1621; border-color: #1F2937; color: #F9FAFB; }
[data-theme="dark"] .prj-rel-card       { background: #0F1621; border-color: #1F2937; }
[data-theme="dark"] .prj-rel-card:hover { border-color: #F47721; box-shadow: 0 18px 38px -22px rgba(0,0,0,0.7); }
[data-theme="dark"] .prj-rel-tag        { background: rgba(15,22,33,0.92); color: #F9FAFB; }
[data-theme="dark"] .prj-rel-name       { color: #F9FAFB; }
[data-theme="dark"] .prj-rel-loc        { color: #9CA3AF; }
[data-theme="dark"] .prj-rel-arrow      { background: #0B1220; color: #F9FAFB; }

/* ── Prev / Next (legacy — kept in case of fallback, unused by current markup) ── */
.prj-pn { display: flex; flex-direction: column; }
@media (min-width: 1024px) { .prj-pn { flex-direction: row; } }
.prj-pn-item {
  position: relative;
  display: block;
  padding: 28px 20px;
  background: #111827;
  color: #fff;
  text-decoration: none;
  transition: background 0.4s var(--ease-out);
  overflow: hidden;
  flex: 1;
  min-height: 118px;
  isolation: isolate;
}
.prj-pn-prev { border-bottom: 1px solid #1F2937; }
@media (min-width: 1024px) {
  .prj-pn-prev { border-bottom: none; border-right: 1px solid #1F2937; }
  .prj-pn-item { padding: 64px 56px; min-height: 220px; }
}
.prj-pn-thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  transition: opacity 0.5s, transform 6s ease;
  z-index: -1;
}
.prj-pn-item:hover .prj-pn-thumb { opacity: 0.4; transform: scale(1.08); }
.prj-pn-item:hover { background: #0B1220; }
.prj-pn-content { position: relative; z-index: 2; }
.prj-pn-next .prj-pn-content { text-align: right; }
.prj-pn-lbl {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9CA3AF;
  display: block;
  margin-bottom: 10px;
}
.prj-pn-name {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-h3);
  color: #fff;
  line-height: 1.1;
  display: block;
  letter-spacing: -0.01em;
}
.prj-pn-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #F47721;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  z-index: 2;
}
.prj-pn-prev .prj-pn-arrow { right: 20px; }
.prj-pn-next .prj-pn-arrow { left: 20px; }
@media (min-width: 1024px) {
  .prj-pn-prev .prj-pn-arrow { right: 56px; }
  .prj-pn-next .prj-pn-arrow { left: 56px; }
}
.prj-pn-prev:hover .prj-pn-arrow { transform: translateY(-50%) translateX(-5px); opacity: 1; }
.prj-pn-next:hover .prj-pn-arrow { transform: translateY(-50%) translateX(5px); opacity: 1; }

/* ── CTA band ── */
.prj-cta {
  background: #0B1220;
  color: #fff;
  padding: 56px 20px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.prj-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 180%;
  background: radial-gradient(ellipse at center, rgba(244,119,33,0.12), transparent 55%);
  pointer-events: none;
}
.prj-cta-head {
  position: relative;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-h2);
  line-height: 1.15;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.prj-cta-accent { color: #F47721; }
.prj-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: #F47721;
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 52px;
  transition: background 0.2s, transform 0.2s;
}
.prj-cta-btn:hover { background: #D96218; }
@media (min-width: 1024px) { .prj-cta { padding: 96px 48px 100px; } }

/* ── Sticky bottom action bar (mobile only) ── */
.prj-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: #fff;
  border-top: 1px solid #E5E7EB;
  display: flex;
  align-items: stretch;
  z-index: 100;
  transition: transform 0.35s var(--ease-out);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
}
.prj-sticky-bar.is-hidden { transform: translateY(100%); }
.prj-sticky-call {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  text-decoration: none;
  border-right: 1px solid #E5E7EB;
  transition: background 0.2s, color 0.2s;
}
.prj-sticky-call:active, .prj-sticky-call:hover { background: #F5F5F3; color: #F47721; }
.prj-sticky-enquire {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #F47721;
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 16px;
  transition: background 0.2s;
}
.prj-sticky-enquire:active, .prj-sticky-enquire:hover { background: #D96218; }
@media (min-width: 1024px) { .prj-sticky-bar { display: none; } }
body.has-prj-sticky-bar { padding-bottom: 60px; }
@media (min-width: 1024px) { body.has-prj-sticky-bar { padding-bottom: 0; } }

/* Dark-mode overrides for prj-* */
[data-theme="dark"] body.page-project,
[data-theme="dark"] .prj-crumb      { background: rgba(11, 18, 32, 0.92); color: #9CA3AF; border-bottom-color: #1F2937; }
[data-theme="dark"] .prj-crumb-current,
[data-theme="dark"] .prj-back        { color: #F9FAFB !important; }
/* Mobile-only: dark plate sits below the hero image, so it needs a
   matching dark backdrop for type legibility. On desktop the content
   floats over the image (transparent), so DON'T set a dark plate. */
@media (max-width: 1023px) {
  [data-theme="dark"] .prj-hero-content { background: #0B1220; }
}
[data-theme="dark"] .prj-hero-title  { color: #F9FAFB; }
[data-theme="dark"] .prj-hero-lead   { color: #9CA3AF; }
[data-theme="dark"] .prj-facts-grid,
[data-theme="dark"] .prj-scope-card  { background: #111827; border-color: #1F2937; }
[data-theme="dark"] .prj-fact        { border-color: #1F2937 !important; }
[data-theme="dark"] .prj-fact-val,
[data-theme="dark"] .prj-scope-title,
[data-theme="dark"] .prj-stat-num,
[data-theme="dark"] .prj-h2          { color: #F9FAFB; }
[data-theme="dark"] .prj-overview p,
[data-theme="dark"] .prj-scope-desc  { color: #D1D5DB; }
[data-theme="dark"] .prj-stats       { border-color: #1F2937; }
[data-theme="dark"] .prj-sticky-bar  { background: #0F1621; border-top-color: #1F2937; }
[data-theme="dark"] .prj-sticky-call { color: #F9FAFB; border-right-color: #1F2937; }
[data-theme="dark"] .prj-sticky-call:hover { background: #1F2937; color: #F47721; }

/* ═══════════════════════════════════════
   PROJECT DETAIL PAGE (pd-*) — legacy, kept
═══════════════════════════════════════ */

/* Hero */
.pd-hero {
  position: relative;
  height: 62vh;
  min-height: 440px;
  overflow: hidden;
  background: #111827;
}
.pd-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
}
.pd-hero-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 28px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 1024px) {
  .pd-hero-content { padding: 64px 40px; }
}

/* Stats bar */
.pd-stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .pd-stats-bar { grid-template-columns: repeat(4, 1fr); }
}
.pd-stat {
  padding: 22px 24px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.pd-stat:nth-child(2n) { border-right: none; }
@media (min-width: 900px) {
  .pd-stat { border-bottom: none; }
  .pd-stat:nth-child(2n) { border-right: 1px solid #E5E7EB; }
  .pd-stat:last-child   { border-right: none; }
}
.pd-stat-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0 0 6px;
}
.pd-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.35;
}

/* Main content wrap */
.pd-main-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 24px;
}
@media (min-width: 1024px) {
  .pd-main-wrap { padding: 96px 40px; }
}
.pd-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 1024px) {
  .pd-main-grid {
    grid-template-columns: 1.55fr 0.45fr;
    gap: 72px;
  }
}

/* Sticky details card */
.pd-detail-card {
  border: 1px solid #E5E7EB;
  border-top: 3px solid #F47721;
  padding: 28px 26px;
  background: #FFFFFF;
}
@media (min-width: 1024px) {
  .pd-main-grid > aside {
    position: sticky;
    top: 88px;
  }
}
.pd-detail-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #E5E7EB;
}
.pd-detail-lbl {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0 0 3px;
}
.pd-detail-val {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.4;
}

/* Gallery grid */
.pd-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .pd-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pd-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.pd-gallery-item {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  cursor: zoom-in;
  background: #E5E7EB;
}
.pd-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
.pd-gallery-item:hover img { transform: scale(1.06); }
.pd-gallery-zoom {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: rgba(244,119,33,0.96);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.pd-gallery-item:hover .pd-gallery-zoom { opacity: 1; }

/* Related projects */
.pd-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .pd-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .pd-related-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.pd-related-card {
  border: 1px solid #E5E7EB;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}
.pd-related-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  border-color: rgba(244,119,33,0.5);
  transform: translateY(-3px);
}
.pd-related-img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.pd-related-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.pd-related-card:hover .pd-related-img-wrap img { transform: scale(1.05); }

/* Breadcrumb hide on mobile */
@media (max-width: 767px) {
  .pd-breadcrumb { display: none; }
}

/* ═══════════════════════════════════════
   GALLERY LIGHTBOX
═══════════════════════════════════════ */
/* Body scroll lock while lightbox is open — uses position:fixed + saved scrollY
   so the page doesn't jump back to top on close, and nav button taps can't
   accidentally scroll the page behind. */
body.lb-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
#galleryLightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#galleryLightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.gl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,12,18,0.96);
}
.gl-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-wrap img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.gl-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s, border-color 0.2s;
}
.gl-close:hover {
  background: rgba(244,119,33,0.9);
  border-color: #F47721;
}
.gl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s, border-color 0.2s;
}
.gl-nav:hover {
  background: rgba(244,119,33,0.9);
  border-color: #F47721;
}
.gl-prev { left: 24px; }
.gl-next { right: 24px; }
.gl-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.65);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  z-index: 2;
}
@media (max-width: 640px) {
  .gl-nav { width: 44px; height: 44px; }
  .gl-prev { left: 12px; }
  .gl-next { right: 12px; }
  .gl-close { top: 14px; right: 14px; width: 44px; height: 44px; }
}

/* ── Home project category cards ── */
.proj-cat-card {
  transition:
    box-shadow var(--t-base),
    border-color var(--t-base),
    transform var(--t-base);
}
.proj-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* ── Section rhythm: standardize default section padding ── */
section {
  /* default fallback - specific sections override */
}

/* ── Smooth scroll on all internal anchors ── */
a[href^="#"] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ── AOS overrides ── */
[data-aos] { will-change: transform, opacity; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-section { min-height: 100svh; }
  .facts-card { border-right: none; border-bottom: none; }
  .facts-card:last-child { border-bottom: none; }
}

/* ═══════════════════════════════════════
   MOBILE FIXES (<= 1023px) — disable scroll-jack on flagship
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Flagship: become a natural vertical stack, no scroll-hijack */
  #flagship {
    height: auto !important;
  }
  #fpSticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  #fpTrackH {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    gap: 32px;
    padding: 20px 0 40px;
  }
  #fpTrackH > .w-screen {
    width: 100% !important;
    height: auto !important;
    padding: 0 16px !important;
    flex: none !important;
  }
  /* Each flagship panel: image + info stack cleanly */
  .fp-panel > .fp-media-wrap {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16/10;
  }
  .fp-panel > .fp-panel-info {
    min-height: auto !important;
    padding: 22px 20px 20px !important;
  }
  /* Bottom progress dots — hide since there's no carousel anymore */
  #flagship > .sticky + * ~ .fp-dot,
  #flagship .fp-dot { display: none !important; }
}

/* ═══════════════════════════════════════
   TOUCH DEVICES — always show overlays + badges
   (hover: none) catches phones/tablets with no mouse
═══════════════════════════════════════ */
@media (hover: none) {
  /* Flagship image overlays + badges always visible */
  .fp-media-overlay {
    opacity: 1 !important;
  }
  .fp-media-badge {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  /* Any project card ghost state: remove hover-only behaviors */
  .proj-thumb-card { box-shadow: var(--shadow-sm); }
  .pd-related-card { box-shadow: var(--shadow-sm); }
}

/* ═══════════════════════════════════════
   NARROW PHONES (<= 400px) — tighten gutters + type
═══════════════════════════════════════ */
@media (max-width: 400px) {
  /* Page gutters */
  .max-w-screen-xl.px-6,
  .max-w-screen-xl.mx-auto.px-6 { padding-left: 16px; padding-right: 16px; }

  /* Hero heading slightly smaller */
  .hero-section h1 {
    font-size: 40px !important;
    line-height: 1.08 !important;
  }
  .hero-section p { font-size: var(--fs-body); }

  /* Facts counters — already clamp'd but reduce floor */
  .counter { font-size: 42px !important; }

  /* Flagship big number "01" */
  #fpCurrent { font-size: 38px !important; }

  /* Project detail hero title */
  .pd-hero-content h1 { font-size: 28px !important; }

  /* Journey / leadership hero titles are clamp'd, but add a floor */
  .jn-hero-title,
  .ld-hero-title { font-size: 28px !important; }
}

/* ═══════════════════════════════════════
   LANDSCAPE SHORT VIEWPORTS — reduce forced heights
═══════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section   { min-height: auto; padding-top: 100px; padding-bottom: 40px; }
  .jn-hero        { min-height: auto; padding: 80px 24px 40px; }
  .ld-hero        { min-height: auto; padding: 80px 24px 40px; }
  .pd-hero        { height: 50vh; min-height: 320px; }
  .site-loader .loader-mark-wrap { width: 180px; height: 72px; }
}

/* ═══════════════════════════════════════
   THEME TOGGLE — smaller on mobile to fit alongside hamburger
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  .theme-toggle {
    width: 34px;
    height: 34px;
    margin-right: 2px;
  }
  .theme-toggle svg { width: 15px; height: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   TOOLS & MACHINERY PAGE (tools.html)
═══════════════════════════════════════════════════════════════ */

/* ── HERO (Directory preset — shared with projects.html .dir-hero*) ── */
.tm-hero,
.dir-hero {
  background: linear-gradient(180deg, var(--hero-dir-bg-top) 0%, var(--hero-dir-bg-bot) 100%);
  border-bottom: 1px solid var(--c-border);
  padding: var(--hero-dir-pad-t-m) var(--hero-dir-pad-x-m) var(--hero-dir-pad-b-m);
}
.tm-hero-inner,
.dir-hero-inner {
  max-width: var(--hero-max-w);
  margin: 0 auto;
}
.tm-hero-head  { max-width: 760px; margin-bottom: 40px; }
.dir-hero-head { margin-bottom: 0; }               /* no max-width — allows horizontal title + count row */

/* projects.html: main has a small top padding matching the nav so the sticky
   breadcrumb's natural flow position lines up with the nav's bottom edge.
   Below the breadcrumb, the dir-hero only needs modest padding. */
.projects-main              { padding-top: 72px; }
@media (min-width: 640px)   { .projects-main { padding-top: 78px; } }

.projects-main .dir-hero { padding-top: 24px; padding-bottom: 32px; }
@media (min-width: 768px)  { .projects-main .dir-hero { padding-top: 32px; padding-bottom: 36px; } }
@media (min-width: 1024px) { .projects-main .dir-hero { padding-top: 40px; padding-bottom: 40px; } }

/* ── Sticky breadcrumb bar ── */
.projects-breadcrumb {
  position: static;                         /* not sticky — was overlapping the cards */
  z-index: 30;
  background: rgba(248, 248, 246, 0.94);
  border-bottom: 1px solid var(--c-border);
}
.projects-breadcrumb-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-muted);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.projects-breadcrumb-inner::-webkit-scrollbar { display: none; }
@media (min-width: 768px)  { .projects-breadcrumb-inner { padding: 14px 32px; } }
@media (min-width: 1024px) { .projects-breadcrumb-inner { padding: 14px 48px; } }

.projects-breadcrumb-inner a {
  color: var(--c-muted);
  transition: color 0.2s ease;
}
.projects-breadcrumb-inner a:hover { color: var(--c-orange); }
.projects-breadcrumb-sep   { opacity: 0.5; }
.projects-breadcrumb-current { color: var(--c-orange); }

/* Dark mode */
[data-theme="dark"] .projects-breadcrumb {
  background: rgba(11, 18, 32, 0.92);
  border-bottom-color: #1F2937;
}
[data-theme="dark"] .projects-breadcrumb-inner,
[data-theme="dark"] .projects-breadcrumb-inner a {
  color: #9CA3AF;
}
[data-theme="dark"] .projects-breadcrumb-current { color: var(--c-orange); }
.tm-eyebrow,
.dir-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hero-eb-gap);
  font-size: var(--hero-eb-size);
  letter-spacing: var(--hero-eb-tracking);
  text-transform: uppercase;
  font-weight: var(--hero-eb-weight);
  color: var(--c-orange);
  margin: 0 0 22px;
}
.tm-eyebrow-bar,
.dir-eyebrow-bar {
  display: block;
  width: var(--hero-eb-bar-w);
  height: var(--hero-eb-bar-h);
  background: var(--c-orange);
}
.tm-hero-title,
.dir-hero-title {
  font-family: var(--f-serif);
  font-weight: var(--hero-dir-title-weight);
  color: var(--c-dark);
  font-size: var(--hero-dir-title-size);
  line-height: var(--hero-dir-title-lh);
  letter-spacing: var(--hero-dir-title-tr);
  margin: 0 0 20px;
}
.tm-hero-lead,
.dir-hero-lead {
  color: var(--hero-dir-lead-color);
  font-size: var(--hero-dir-lead-size);
  line-height: 1.7;
  max-width: 620px;
  margin: 0;
}

/* stats band */
.tm-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
}
.tm-stat {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.tm-stat:nth-child(2n) { border-right: none; }
.tm-stat:nth-last-child(-n+2) { border-bottom: none; }
.tm-stat-num {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-h3);
  line-height: 1;
  color: #F47721;
  letter-spacing: -0.01em;
}
.tm-stat-lbl {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B7280;
}
@media (min-width: 768px) {
  .tm-hero,
  .dir-hero { padding: 80px 32px 72px; }
  .tm-hero-stats { grid-template-columns: repeat(4, 1fr); }
  .tm-stat { border-right: 1px solid #E5E7EB; border-bottom: none; padding: 28px 24px; }
  .tm-stat:last-child { border-right: none; }
  .tm-stat-num { font-size: var(--fs-h2); }
}
@media (min-width: 1024px) {
  .tm-hero,
  .dir-hero { padding: var(--hero-dir-pad-t-d) var(--hero-dir-pad-x-d) var(--hero-dir-pad-b-d); }
  .tm-hero-head  { margin-bottom: 56px; }
  .dir-hero-head { margin-bottom: 0; }
  .tm-stat { padding: 34px 28px; }
  .tm-stat-num { font-size: var(--fs-h2); }
}

/* ── STICKY FILTER BAR ── */
.tm-filter-bar {
  position: static;             /* not sticky — was overlapping the section below */
  z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #E5E7EB;
}
.tm-filter-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Category dropdown — mobile only (desktop keeps the pills) */
.tm-cat-select { display: none; }
@media (max-width: 1023px) {
  .tm-pills { display: none !important; }   /* mobile: dropdown only */
  .tm-cat-select {
    display: block;
    width: 100%;
    border: 1px solid #E5E7EB;
    background-color: #fff;
    color: #111827;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 44px 12px 14px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23F47721' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
  }
  .tm-cat-select:focus { outline: none; border-color: #F47721; }
  [data-theme="dark"] .tm-cat-select {
    background-color: #111827; color: #F9FAFB; border-color: rgba(255,255,255,0.14);
  }
}
.tm-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 24, 39, 0.25) transparent;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tm-pills::-webkit-scrollbar        { height: 6px; }
.tm-pills::-webkit-scrollbar-track  { background: transparent; }
.tm-pills::-webkit-scrollbar-thumb  { background: rgba(17, 24, 39, 0.22); border-radius: 3px; }
.tm-pills::-webkit-scrollbar-thumb:hover { background: rgba(244, 119, 33, 0.6); }
[data-theme="dark"] .tm-pills {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
[data-theme="dark"] .tm-pills::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
[data-theme="dark"] .tm-pills::-webkit-scrollbar-thumb:hover { background: rgba(244, 119, 33, 0.7); }
.tm-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;           /* 44px+ tap target on mobile */
  min-height: 40px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #6B7280;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  scroll-snap-align: start;
  white-space: nowrap;
}
.tm-pill:hover {
  border-color: #F47721;
  color: #111827;
}
.tm-pill.is-active {
  background: #111827;
  border-color: #111827;
  color: #FFFFFF;
}
.tm-pill-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #F3F4F6;
  color: #6B7280;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}
.tm-pill.is-active .tm-pill-count {
  background: #F47721;
  color: #FFFFFF;
}
.tm-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.tm-search-icon {
  position: absolute;
  left: 14px;
  color: #9CA3AF;
  pointer-events: none;
}
.tm-search {
  width: 100%;
  padding: 12px 14px 12px 40px;
  min-height: 44px;             /* comfortable tap target on mobile */
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  font-family: inherit;
  font-size: var(--fs-body);               /* 14px+ prevents iOS zoom-on-focus */
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  border-radius: 0;
}
.tm-search::placeholder { color: #9CA3AF; }
.tm-search:focus {
  border-color: #F47721;
  box-shadow: 0 0 0 3px rgba(244, 119, 33, 0.1);
}
.tm-filter-meta {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 10px;
}
.tm-result-count {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6B7280;
}
@media (min-width: 768px) {
  .tm-filter-inner {
    flex-direction: row;
    align-items: center;
    padding: 16px 32px;
    gap: 20px;
  }
  .tm-pills { flex: 1; }
  .tm-search-wrap { width: 320px; flex-shrink: 0; }
  .tm-filter-meta { padding: 0 32px 14px; }
}
@media (min-width: 1024px) {
  .tm-filter-inner { padding: 18px 48px; }
  .tm-filter-meta { padding: 0 48px 16px; }
}

/* ── EQUIPMENT GRID ── */
.tm-grid-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}
.tm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.tm-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tm-card:hover {
  border-color: #F47721;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -22px rgba(17, 24, 39, 0.22);
}
.tm-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  overflow: hidden;
}
.tm-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.tm-card:hover .tm-card-media img {
  transform: scale(1.05);
}
/* Fallback when image fails to load: show a soft gradient with the category icon */
.tm-card-media--fallback {
  background: linear-gradient(135deg, #FFF5EC 0%, #F3F4F6 100%);
}
.tm-card-media--fallback .tm-card-icon {
  width: 56px;
  height: 56px;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
}
.tm-card-media--fallback .tm-card-icon svg { width: 26px; height: 26px; }

.tm-card-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-body);
  color: var(--c-orange);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 10px;
}
.tm-card-badge em {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.tm-card-icon {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: #F47721;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.tm-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tm-card-name {
  font-family: 'Archivo Black', Impact, sans-serif;
  font-size: var(--fs-lead);
  line-height: 1.25;
  color: #111827;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.tm-card-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #6B7280;
  margin: 0;
  flex: 1;
}
.tm-card-cat {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9CA3AF;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}
.tm-empty {
  text-align: center;
  color: #6B7280;
  font-size: var(--fs-body);
  padding: 64px 24px;
  border: 1px dashed #E5E7EB;
  background: #FFFFFF;
}
.tm-empty.is-hidden { display: none; }

@media (min-width: 640px) {
  .tm-grid-wrap { padding: 40px 24px 72px; }
  .tm-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
  .tm-grid-wrap { padding: 56px 48px 96px; }
  .tm-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .tm-card-body { padding: 20px 22px 22px; }
  .tm-card-name { font-size: var(--fs-lead); }
  .tm-card-badge { font-size: var(--fs-body); }
}

/* ── END-OF-PAGE STATS STRIP (moved out of hero) ── */
.tm-stats-section {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 48px 16px 56px;
}
.tm-stats-section-inner {
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .tm-stats-section { padding: 64px 24px 72px; }
}
@media (min-width: 1024px) {
  .tm-stats-section { padding: 88px 48px 96px; }
}
[data-theme="dark"] .tm-stats-section {
  background: #0B1220;
  border-top-color: #1F2937;
  border-bottom-color: #1F2937;
}

/* ── DARK MODE ── */
[data-theme="dark"] .tm-hero,
[data-theme="dark"] .dir-hero {
  background: linear-gradient(180deg, #0B1220 0%, #0F1621 100%);
  border-bottom-color: #1F2937;
}
[data-theme="dark"] .tm-hero-title,
[data-theme="dark"] .dir-hero-title { color: #F9FAFB; }
[data-theme="dark"] .tm-hero-lead,
[data-theme="dark"] .dir-hero-lead { color: #9CA3AF; }
[data-theme="dark"] .tm-hero-stats { background: #0F1621; border-color: #1F2937; }
[data-theme="dark"] .tm-stat { border-color: #1F2937; }
[data-theme="dark"] .tm-stat-lbl { color: #9CA3AF; }

[data-theme="dark"] .tm-filter-bar {
  background: rgba(11, 17, 28, 0.92);
  border-bottom-color: #1F2937;
}
[data-theme="dark"] .tm-pill {
  background: #0F1621;
  border-color: #1F2937;
  color: #9CA3AF;
}
[data-theme="dark"] .tm-pill:hover { color: #F9FAFB; border-color: #F47721; }
[data-theme="dark"] .tm-pill.is-active {
  background: #F47721;
  border-color: #F47721;
  color: #FFFFFF;
}
[data-theme="dark"] .tm-pill-count { background: #1F2937; color: #9CA3AF; }
[data-theme="dark"] .tm-pill.is-active .tm-pill-count { background: rgba(0,0,0,0.25); color: #FFFFFF; }
[data-theme="dark"] .tm-search {
  background: #0F1621;
  border-color: #1F2937;
  color: #F9FAFB;
}
[data-theme="dark"] .tm-search::placeholder { color: #6B7280; }
[data-theme="dark"] .tm-result-count { color: #9CA3AF; }

[data-theme="dark"] .tm-card {
  background: #0F1621;
  border-color: #1F2937;
}
[data-theme="dark"] .tm-card:hover { border-color: #F47721; box-shadow: 0 18px 38px -22px rgba(0,0,0,0.75); }
[data-theme="dark"] .tm-card-media { background: linear-gradient(135deg, #1F2937 0%, #111827 100%); }
[data-theme="dark"] .tm-card-media--fallback { background: linear-gradient(135deg, rgba(244,119,33,0.18) 0%, #1F2937 100%); }
[data-theme="dark"] .tm-card-media--fallback .tm-card-icon { background: #0F1621; }
[data-theme="dark"] .tm-card-badge    { color: var(--c-orange); }
[data-theme="dark"] .tm-card-badge em { color: #9CA3AF; }
[data-theme="dark"] .tm-card-icon { background: rgba(15, 22, 33, 0.92); }
[data-theme="dark"] .tm-card-name { color: #F9FAFB; }
[data-theme="dark"] .tm-card-desc { color: #9CA3AF; }
[data-theme="dark"] .tm-card-cat { color: #6B7280; border-top-color: #1F2937; }
[data-theme="dark"] .tm-empty { background: #0F1621; border-color: #1F2937; color: #9CA3AF; }

/* ═══════════════════════════════════════════════════════════════
   EDITORIAL SPLIT HERO (Option 1)
   — shared by .jn-hero--split (journey) and .ld-hero--split (leadership)
   Two-column layout: text left, visual right. Collapses on mobile.
═══════════════════════════════════════════════════════════════ */

.jn-hero--split,
.ld-hero--split {
  align-items: center;
  padding-bottom: 96px;
}
.jn-hero--split .jn-hero-inner,
.ld-hero--split .ld-hero-inner {
  text-align: left;
  width: 100%;
}

.story-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
.story-hero-text   { position: relative; z-index: 3; max-width: 560px; }
.story-hero-visual { position: relative; z-index: 2; }

@media (min-width: 1024px) {
  .story-hero-split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
  }
}

/* Title: narrower-column clamp (smaller than full-width storytelling hero) */
.jn-hero--split .jn-hero-title,
.ld-hero--split .ld-hero-title {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 26px;
  text-align: left;
  max-width: none;
}
.jn-hero--split .jn-hero-eyebrow,
.ld-hero--split .ld-hero-eyebrow {
  justify-content: flex-start;
  margin-bottom: 28px;
}
.jn-hero--split .jn-hero-sub,
.ld-hero--split .ld-hero-sub {
  max-width: 500px;
  margin: 0 0 36px;
  text-align: left;
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 300;
  opacity: 0;
  animation: jnFadeUp 0.9s ease 1.05s forwards;
}

/* CTA button (shared) */
.story-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--c-orange);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s;
  opacity: 0;
  animation: jnFadeUp 0.9s ease 1.3s forwards;
}
.story-hero-cta:hover {
  background: var(--c-orange-dk);
}
.story-hero-cta svg { transition: transform 0.25s; }
.story-hero-cta:hover svg { transform: translateX(4px); }

/* ── JOURNEY visual — archival image + floating era badge + timeline ticks ── */
.jn-hero-visual { display: flex; justify-content: center; }
.jn-hero-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: jnFadeUp 1.2s ease 0.45s forwards;
  background: linear-gradient(135deg, #1F2937 0%, #0B1220 100%);
}
/* Scroll cue — inline under the lead paragraph, part of the content flow */
.jn-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 40px auto 0;                     /* breathes below the lead */
  padding: 6px 4px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease, transform 0.25s ease;
  opacity: 0;
  animation: jnFadeUp 0.9s ease 1.4s forwards;
}
.jn-scroll-cue:hover {
  color: var(--c-orange);
  transform: translateY(-3px);
}
.jn-scroll-cue-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jn-scroll-cue-line {
  position: relative;
  width: 1px;
  height: 52px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.jn-scroll-cue-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--c-orange));
  animation: jnScrollDrip 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes jnScrollDrip {
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}
.jn-scroll-cue-chevron {
  animation: jnScrollBob 2.2s ease-in-out infinite;
}
@keyframes jnScrollBob {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (max-width: 640px) {
  .jn-scroll-cue { margin-top: 32px; gap: 8px; }
  .jn-scroll-cue-line { height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .jn-scroll-cue-line::after,
  .jn-scroll-cue-chevron { animation: none; }
}

/* Decade image stack — 4 images crossfade with era-styled filters */
.jn-hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.jn-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  will-change: opacity;
  pointer-events: none;
}
.jn-hero-img.is-active { opacity: 1; }
/* Era-specific colour grading */
.jn-hero-img[data-era="1968"] { filter: grayscale(1) contrast(1.15) brightness(0.95); }
.jn-hero-img[data-era="1994"] { filter: sepia(0.55) saturate(1.2) contrast(1.05) brightness(0.96); }
.jn-hero-img[data-era="2008"] { filter: saturate(0.8) contrast(1.05); }
.jn-hero-img[data-era="2024"] { filter: saturate(1)  contrast(1.08); }

/* Dynamic decade tag (bottom-left of frame, updates with active slide) */
.jn-hero-decade {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  padding: 7px 12px;
  background: rgba(11, 18, 32, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 119, 33, 0.35);
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-orange);
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0;
  animation: jnFadeUp 0.9s ease 1.1s forwards;
  transition: opacity 0.3s ease 0.15s;       /* brief pulse on change */
}
.jn-hero-decade.is-changing { opacity: 0.6; transition-duration: 0.1s; }

.jn-hero-frame--fallback {
  background: linear-gradient(135deg, rgba(244,119,33,0.25) 0%, #0B1220 70%);
}
.jn-hero-duotone {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,0.55) 100%),
    linear-gradient(135deg, rgba(244,119,33,0.22) 0%, rgba(11,18,32,0.4) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.jn-hero-era {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  font-family: var(--f-serif);
  color: #fff;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  z-index: 2;
  opacity: 0;
  animation: jnFadeUp 0.9s ease 0.9s forwards;
}
.jn-hero-era-from,
.jn-hero-era-to  { font-weight: 700; }
.jn-hero-era-arrow { color: var(--c-orange); font-weight: 400; padding: 0 2px; }

.jn-hero-ticks {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 1px solid rgba(255,255,255,0.18);
  opacity: 0;
  animation: jnFadeUp 0.9s ease 1s forwards;
}
.jn-hero-ticks li {
  position: relative;
}
.jn-hero-ticks li::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 7px;
  width: 8px;
  height: 1px;
  background: rgba(255,255,255,0.4);
  z-index: 1;
  transition: background 0.2s ease, width 0.2s ease;
}
.jn-hero-ticks li.is-now::before {
  background: var(--c-orange);
  width: 14px;
  left: -22px;
}
.jn-hero-ticks li:hover::before {
  background: var(--c-orange);
  width: 16px;
}

/* Tick now acts as a button that scrolls to its milestone card */
.jn-tick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: transform 0.2s ease;
}
.jn-tick:hover  { transform: translateX(-3px); }
.jn-tick:active { transform: translateX(-3px) scale(0.97); }
.jn-tick:focus-visible { outline: 1px solid var(--c-orange); outline-offset: 4px; }

.jn-tick-year {
  font-family: var(--f-serif);
  font-size: var(--fs-sm);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.jn-hero-ticks li.is-now .jn-tick-year { color: var(--c-orange); }
.jn-tick:hover .jn-tick-year           { color: var(--c-orange); }
.jn-tick-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1;
  transition: color 0.2s ease;
}
.jn-tick:hover .jn-tick-label { color: rgba(255,255,255,0.85); }

/* Tooltip — shows the milestone name to the left of the tick on hover */
.jn-tick[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 6px 10px;
  background: rgba(11, 18, 32, 0.94);
  border: 1px solid rgba(244, 119, 33, 0.4);
  color: #fff;
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}
.jn-tick:hover[data-tooltip]::after,
.jn-tick:focus-visible[data-tooltip]::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── LEADERSHIP visual — overlapping partner portraits ── */
.ld-portrait-stack {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 560px;
  margin: 0 auto;
}
.ld-portrait {
  position: absolute;
  margin: 0;
  overflow: visible;
  opacity: 0;
  animation: jnFadeUp 1.1s ease forwards;
}
.ld-portrait--back {
  top: 0;
  right: 0;
  width: 58%;
  aspect-ratio: 3 / 4;
  animation-delay: 0.5s;
}
.ld-portrait--front {
  bottom: 0;
  left: 0;
  width: 62%;
  aspect-ratio: 3 / 4;
  animation-delay: 0.75s;
}
.ld-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  background: #1F2937;
}
.ld-portrait--back img {
  filter: saturate(0.85) contrast(1.05) brightness(0.82);
}
.ld-portrait--front img {
  filter: saturate(1) contrast(1.08);
  outline: 3px solid var(--c-orange);
  outline-offset: -3px;
}
.ld-portrait--fallback {
  background: linear-gradient(135deg, rgba(244,119,33,0.22), #0B1220 70%);
}
.ld-portrait--fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(244,119,33,0.18), transparent);
}
.ld-portrait figcaption {
  position: absolute;
  bottom: -44px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ld-portrait--back figcaption {
  right: 0;
  left: auto;
  text-align: right;
  align-items: flex-end;
}
.ld-portrait-role {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
}
.ld-portrait-name {
  font-family: var(--f-serif);
  font-size: var(--fs-body);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

/* Screen-reader anchor target (invisible — just a scroll destination) */
.sr-anchor {
  display: block;
  height: 1px;
  margin-top: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  left: -9999px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1023px) {
  .jn-hero--split,
  .ld-hero--split { min-height: auto; padding-top: 104px; padding-bottom: 72px; }

  .story-hero-visual { order: 2; }
  .story-hero-text   { order: 1; }

  .jn-hero-frame     { max-width: 440px; }
  .ld-portrait-stack { height: 480px; max-width: 460px; }
}

@media (max-width: 640px) {
  .jn-hero--split .jn-hero-title,
  .ld-hero--split .ld-hero-title {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }
  .jn-hero-frame     { max-width: 340px; }
  .ld-portrait-stack { height: 400px; max-width: 340px; }
  .ld-portrait-name  { font-size: var(--fs-sm); }
  .ld-portrait figcaption { bottom: -40px; }
  .jn-hero-ticks { right: 14px; gap: 12px; padding-left: 10px; }
  .jn-hero-ticks li::before { left: -14px; width: 6px; }
  .jn-hero-ticks li.is-now::before { left: -18px; width: 10px; }
  .jn-tick-year  { font-size: var(--fs-caption); }
  .jn-tick-label { font-size: var(--fs-micro); letter-spacing: 0.14em; }
  .jn-hero-era   { top: 12px; left: 12px; padding: 7px 11px; font-size: var(--fs-eyebrow); }
}

/* ═══════════════════════════════════════════════════════════════
   LEADERSHIP HERO — text-only 2-column (heading | lead + CTA)
   Applied via .ld-hero--text-split (no right-side visual)
═══════════════════════════════════════════════════════════════ */

.ld-hero--text-split {
  align-items: center;
  padding-bottom: 96px;
}
.ld-hero--text-split .ld-hero-inner {
  text-align: left;
  width: 100%;
}
.ld-hero--text-split .ld-hero-eyebrow {
  justify-content: flex-start;
  margin-bottom: 32px;
}

.ld-hero-text-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  width: 100%;
}
@media (min-width: 1024px) {
  .ld-hero-text-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 96px;
    align-items: center;
  }
}

.ld-hero--text-split .ld-hero-title {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: none;
  text-align: left;
}

.ld-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 520px;
}
.ld-hero--text-split .ld-hero-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-weight: 300;
  margin: 0;
  opacity: 0;
  animation: jnFadeUp 0.9s ease 1.05s forwards;
}

@media (max-width: 1023px) {
  .ld-hero--text-split { padding-top: 104px; padding-bottom: 80px; min-height: auto; }
}
@media (max-width: 640px) {
  .ld-hero--text-split .ld-hero-title {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
  .ld-hero-text-grid { gap: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE (about.html)
   Narrative hub — hero, principles, stats, explore cards,
   mission/vision, CTA. Mobile-first, reuses Storytelling preset.
═══════════════════════════════════════════════════════════════ */

/* Shared inner container */
.ab-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
@media (min-width: 768px)  { .ab-inner { padding: 0 32px; } }
@media (min-width: 1024px) { .ab-inner { padding: 0 48px; } }

/* Shared section header */
.ab-section-head {
  max-width: 720px;
  margin: 0 0 40px;
}
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 18px;
}
.ab-eyebrow-bar {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-orange);
}
.ab-h2 {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--c-dark);
  margin: 0;
}
@media (min-width: 1024px) {
  .ab-section-head { margin-bottom: 56px; }
}

/* ── Intro (text only) + sticky image ── */
.ab-intro {
  position: relative;        /* normal scroll — NOT pinned */
  min-height: 185vh;         /* extra height so the fixed bg image shows fully below the card */
  display: flex;
  align-items: flex-start;   /* card sits at the TOP */
  background-image: url('../Images/About/hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* bg image stays fixed/sticky while content scrolls */
  overflow: hidden;
}
.ab-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31, 33, 31, 0.22);   /* subtle scrim */
}
.ab-intro-inner {                       /* full-width white card, top-aligned */
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 116px clamp(24px, 5vw, 72px) clamp(44px, 5vw, 64px);
}
.ab-intro-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto 28px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-orange);
}
.ab-intro-bar { width: 36px; height: 2px; background: var(--c-orange); flex-shrink: 0; }
.ab-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.ab-intro .ab-h2 { margin: 0; line-height: 1.05; }   /* dark text on the white card */
.ab-intro-p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-muted);
  margin: 0 0 26px;
}
@media (max-width: 1023px) {
  .ab-intro { min-height: auto; align-items: stretch; background-attachment: scroll; }
  .ab-intro-inner { padding: 78px clamp(20px, 5vw, 28px) 26px; }   /* tighter — less empty white space */
  .ab-intro-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Team grid (3-col) ── */
.ab-team { background: #FFFFFF; padding: 80px 0; }
.ab-team-sub { font-size: 16px; line-height: 1.7; color: var(--c-muted); margin: 14px 0 0; max-width: 560px; }
.ab-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 2.6vw, 40px); margin-top: 0; }
.ab-team-photo { position: relative; aspect-ratio: 1 / 1; background: #E9E9E7; overflow: hidden; }
.ab-team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ab-team-photo--ph::after { content: attr(data-initials); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', Impact, sans-serif; font-size: 56px; color: #C2C2BE; letter-spacing: 0.04em; }
.ab-team-name { font-family: var(--f-serif); font-weight: 700; font-size: 20px; line-height: 1.22; color: var(--c-orange); margin: 22px 0 6px; }
.ab-team-role { font-size: 15px; color: var(--c-muted); margin: 0; }
@media (max-width: 1100px) { .ab-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ab-team-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ── PRINCIPLES ── */
.ab-principles {
  background: #FFFFFF;
  padding: 72px 0 80px;
  border-bottom: 1px solid var(--c-border);
}
.ab-principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.ab-principle {
  position: relative;
  padding: 28px 0 28px 24px;
  border-left: 2px solid var(--c-border);
  transition: border-color 0.25s ease;
}
.ab-principle:hover { border-left-color: var(--c-orange); }
.ab-principle-num {
  display: block;
  font-family: var(--f-serif);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-orange);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 14px;
}
.ab-principle-title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-dark);
  margin: 0 0 12px;
}
.ab-principle-desc {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0;
}
@media (min-width: 768px) {
  .ab-principles { padding: 96px 0 104px; }
  .ab-principles-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .ab-principle { padding: 32px 0 32px 28px; }
}
@media (min-width: 1024px) {
  .ab-principles { padding: 120px 0 128px; }
  .ab-principles-grid { gap: 44px; }
}

/* ── STATS BAND ── */
.ab-stats-band {
  background: var(--c-orange);
  padding: 40px 0;
  border-bottom: none;
}
.ab-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
}
.ab-stat {
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(255,255,255,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.22);
  text-align: left;
}
.ab-stat:nth-child(2n) { border-right: none; }
.ab-stat:nth-last-child(-n+2) { border-bottom: none; }
.ab-stat-num {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}
.ab-stat-lbl {
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
@media (min-width: 768px) {
  .ab-stats-band { padding: 56px 0; }
  .ab-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .ab-stat {
    padding: 36px 28px;
    border-right: 1px solid rgba(255,255,255,0.22);
    border-bottom: none;
  }
  .ab-stat:last-child { border-right: none; }
}
@media (min-width: 1024px) {
  .ab-stats-band { padding: 64px 0; }
  .ab-stat { padding: 44px 32px; }
}

/* ── EXPLORE CARDS ── */
.ab-explore {
  background: #FFFFFF;
  padding: 64px 0;
  border-bottom: 1px solid var(--c-border);
}
.ab-explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.ab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ab-card:hover {
  border-color: var(--c-orange);
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -22px rgba(17, 24, 39, 0.22);
}
.ab-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
}
.ab-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ab-card:hover .ab-card-media img { transform: scale(1.05); }
.ab-card-media--fallback {
  background: linear-gradient(135deg, rgba(244, 119, 33, 0.18), #0B1220 80%);
}
.ab-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0) 50%, rgba(17, 24, 39, 0.25) 100%);
  pointer-events: none;
}
.ab-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ab-card-tag {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-orange);
}
.ab-card-title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-dark);
  margin: 0;
}
.ab-card-desc {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-muted);
  margin: 0;
  flex: 1;
}
.ab-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-dark);
  transition: color 0.2s ease;
}
.ab-card-cta svg { transition: transform 0.25s ease; }
.ab-card:hover .ab-card-cta { color: var(--c-orange); }
.ab-card:hover .ab-card-cta svg { transform: translateX(4px); }

@media (min-width: 768px) {
  .ab-explore { padding: 80px 0; }
  .ab-explore-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 1024px) {
  .ab-explore { padding: 80px 0; }
  .ab-explore-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .ab-card-body { padding: 26px 26px 28px; }
  .ab-card-title { font-size: var(--fs-h3); }
}

/* ── MISSION + VISION — two plain full-width dark sections ── */
.ab-mv {
  background: #FFFFFF;
  padding: 64px 24px;
  color: var(--c-dark);
}
.ab-mv + .ab-mv {                               /* subtle hairline between Mission and Vision */
  border-top: 1px solid var(--c-border);
}
.ab-mv-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ab-mv-lbl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 22px;
}
.ab-mv-bar {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-orange);
}
.ab-mv-quote {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--c-dark);
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 768px)  { .ab-mv { padding: 80px 32px; } }
@media (min-width: 1024px) { .ab-mv { padding: 80px 48px; } }

/* ── DARK MODE OVERRIDES ── */
[data-theme="dark"] .ab-principles,
[data-theme="dark"] .ab-explore { background: #0B1220; border-bottom-color: #1F2937; }
[data-theme="dark"] .ab-mv { background: #0B1220; color: #FFFFFF; }
[data-theme="dark"] .ab-mv + .ab-mv { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ab-mv-quote { color: #FFFFFF; }
[data-theme="dark"] .ab-principle { border-left-color: #1F2937; }
[data-theme="dark"] .ab-principle-title { color: #F9FAFB; }
[data-theme="dark"] .ab-principle-desc  { color: #9CA3AF; }

[data-theme="dark"] .ab-stats-band { background: var(--c-orange); border-bottom: none; }
[data-theme="dark"] .ab-stats-grid { background: transparent; border-color: rgba(255,255,255,0.22); }
[data-theme="dark"] .ab-stat       { border-color: #1F2937; }
[data-theme="dark"] .ab-stat-lbl   { color: #9CA3AF; }

[data-theme="dark"] .ab-card { background: #0F1621; border-color: #1F2937; }
[data-theme="dark"] .ab-card:hover { border-color: var(--c-orange); box-shadow: 0 18px 38px -22px rgba(0,0,0,0.7); }
[data-theme="dark"] .ab-card-title  { color: #F9FAFB; }
[data-theme="dark"] .ab-card-desc   { color: #9CA3AF; }
[data-theme="dark"] .ab-card-cta    { color: #F9FAFB; }

/* .ab-mv already runs on a dark background on both themes — no overrides needed */

[data-theme="dark"] .ab-h2 { color: #F9FAFB; }

/* ═══ Nav auto-hide on scroll-down (revealed on scroll-up / cursor near top) ═══ */
#navbar { will-change: transform; }
#navbar.nav-hidden { transform: translateY(-100%); }

/* ═══ Scroll parallax ═══ */
img[data-parallax] {
  transform: scale(1.16) translateY(var(--py, 0));
  will-change: transform;
  backface-visibility: hidden;
}
[data-parallax-text] { will-change: transform; }

/* ═══ Mobile: disable the "We Build" expand-on-scroll (static card instead) ═══ */
@media (max-width: 1023px) {
  .we-expand { height: auto; }
  .we-expand-sticky { position: static; height: auto; }
  .we-expand-card { width: 100% !important; height: auto; }
}

/* ═══ Tools hero: same fixed-background parallax reveal as About,
       but with a machine image behind the white card ═══ */
.page-tools .ab-intro {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Caterpillar_330_excavator_on_a_pile_of_dirt.jpg/1280px-Caterpillar_330_excavator_on_a_pile_of_dirt.jpg');
}

/* About + Tools mobile: the top hero image already clears the fixed nav,
   so the hero card doesn't need the large nav-clearance top padding. */
@media (max-width: 1023px) {
  .page-about .ab-intro-inner,
  .page-tools .ab-intro-inner { padding-top: 28px; }
}

/* ═══ Dark mode: "We Build" section turns orange ═══ */
[data-theme="dark"] .we-expand,
[data-theme="dark"] .we-expand-card { background: #F47721; }
[data-theme="dark"] .we-expand .wb-word.text-orange { color: #111827; }   /* cycling word: dark on orange */
[data-theme="dark"] .we-expand .bg-orange { background-color: #111827; }  /* "Since 1954" badge stays visible */

/* ═══ Mobile: kill any horizontal drift/overflow (no sticky elements active on mobile) ═══ */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* ═══ Mobile: tighter vertical rhythm site-wide (reduce excess whitespace) ═══
   Only touches full-section py-* utilities (never hero pt-/pb- clearances)
   and content-section custom classes — heroes keep their nav clearance.     */
@media (max-width: 767px) {
  .py-12, .py-14, .py-16, .py-20, .py-28 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  .jn-stats, .ab-stats-band, .pd-main-wrap, .home-reel { padding-top: 40px; padding-bottom: 40px; }
  .jn-quote, .jn-tl, .ld-intro, .ld-leaders,
  .ab-principles, .ab-team, .ab-explore, .ab-mv,
  .tm-stats-section { padding-top: 44px; padding-bottom: 46px; }
  .tm-grid-wrap { padding-top: 28px; padding-bottom: 40px; }
}

/* ═══ No italic typefaces anywhere on the site ═══ */
em, i, .italic { font-style: normal !important; }

/* ═══ Position-shift parallax (no transform conflict with hover-zoom) ═══ */
.proj-thumb-img[data-parallax-pos] { object-position: center calc(50% + var(--ppos, 0px)); }
.prj-hero-img[data-parallax-pos]   { background-position: center calc(50% + var(--ppos, 0px)); }

/* ═══ Homepage category cards: smooth image zoom + position-shift parallax ═══ */
.proj-cat-img { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.proj-cat-card:hover .proj-cat-img { transform: scale(1.05); }
.proj-cat-img[data-parallax-pos] { object-position: center calc(50% + var(--ppos, 0px)); }

/* ═══ Remove decorative orange eyebrow / accent lines site-wide ═══ */
.ab-intro-bar, .ab-mv-bar, .ab-eyebrow-bar,
.dir-eyebrow-bar, .tm-eyebrow-bar,
.sr-bar, .cr-eyebrow-bar, .cr-mhead-bar,
.home-reel-bar, .prj-rel-bar, .service-item-bar,
.jn-hero-eyebrow .w-8 { display: none !important; }

/* ═══ Mobile: homepage hero — full-width uncropped image on top, text below ═══ */
@media (max-width: 1023px) {
  /* nav opaque on mobile so it cleanly covers the top — no see-through / dark strip */
  #navbar.scrolled { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  [data-theme="dark"] #navbar.scrolled { background: #111827 !important; }

  #hero.hero-section { min-height: auto; display: block; background: #fff; padding-top: 72px; }   /* white area, image starts below the fixed nav */
  /* image wrapper → in-flow block at the top */
  #hero > .absolute.inset-0 { position: relative; inset: auto; }
  #hero .hero-slides {
    position: relative; top: 0; bottom: 0; left: 0; right: 0;
    aspect-ratio: 5 / 4; background: #fff;       /* white so contain letterbox blends in */
    transform: none !important;                  /* disable hero parallax on mobile */
  }
  #hero .hero-slide { object-fit: contain; }      /* show the whole image — no crop */
  #hero > .absolute.inset-0 > .absolute { display: none; }   /* hide the gradient overlays */
  /* text block sits below the image on a white background — flip text to dark */
  #hero > .relative.z-10 h1 { color: #111827; }
  #hero > .relative.z-10 .text-white\/65 { color: #6B7280; }
  #hero > .relative.z-10 .border-white\/35 { color: #111827; border-color: rgba(31,33,31,0.28); }
  #hero .pt-28 { padding-top: 30px; padding-bottom: 40px; }
}

/* ═══ Mobile: Career hero — same layout as home (image on top, text below on white) ═══ */
@media (max-width: 1023px) {
  #career-hero { display: block; min-height: auto; background: #fff; }
  #career-hero > .absolute.inset-0 { position: relative; inset: auto; }
  #career-hero > .absolute.inset-0 > img {
    position: relative; height: auto; aspect-ratio: 5 / 4; width: 100%;
    object-fit: cover; transform: none !important;
  }
  #career-hero > .absolute.inset-0 > .absolute { display: none; }   /* hide gradient + orange overlays */
  #career-hero > .relative.z-10 { padding-top: 30px; padding-bottom: 40px; }
  /* text → dark on white (orange "Build What Matters" + orange button kept) */
  #career-hero h1 { color: #111827; }
  #career-hero .text-white\/65 { color: #6B7280; }
  #career-hero .border-white\/35 { color: #111827; border-color: rgba(31,33,31,0.28); }
}