/* ============================================================
   INITIA Design Studio — Global Stylesheet v2.4
   Unit system : rem (html 62.5% → 1rem = 10px)
   Fluid type  : clamp(min, vw, max) — target÷1440×100
   Gutter      : 10rem desktop · 6rem tablet · 2.4rem mobile
   ============================================================ */

/* 00. SELF-HOSTED FONTS
   Paths are relative to this CSS file: assets/css/style.css
   Font files live at:                  assets/fonts/inter/
   ---------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-latin-600.woff2') format('woff2');
}

/* 01. ROOT */
html {
  font-size: 62.5%;
  scroll-behavior: auto !important;
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* 02. TOKENS */
:root {
  --clr-accent:         #00AEFF;
  --clr-accent-hover:   #0091D4;
  --clr-text-primary:   #222222;
  --clr-text-secondary: #444444;
  --clr-text-muted:     #666666;
  --clr-text-white:     #FFFFFF;
  --clr-text-light:     #F0F0F0;
  --clr-bg-white:       #FFFFFF;
  --clr-bg-alt:         #F0F0F0;
  --clr-bg-dark:        #222222;
  --clr-bg-hero:        #141414;
  --clr-border-section: rgba(0,176,255,0.2);
  --clr-panel-1: #00AEFF;
  --clr-panel-2: #444444;
  --clr-panel-3: #666666;

  --sp-1:0.4rem; --sp-2:0.8rem; --sp-3:1.2rem; --sp-4:1.6rem; --sp-5:2.4rem;
  --sp-6:3.2rem; --sp-7:4.8rem; --sp-8:6.4rem; --sp-9:8.0rem; --sp-10:12.0rem;

  --max-w:  128rem;
  --gutter: 10rem;
  --nav-h:        8rem;
  --nav-h-mobile: 6rem;

  --font: 'Inter', sans-serif;

  /* Fluid type */
  --fs-hero-tag: clamp(2.4rem, 2.5vw,  3.6rem);
  --fs-h1:       clamp(2.8rem, 4.2vw,  7.0rem);
  --fs-h2:       clamp(2.8rem, 4.44vw, 6.4rem);
  --fs-h3:       clamp(2.0rem, 2.5vw,  3.6rem);
  --fs-eyebrow:  clamp(1.4rem, 1.67vw, 2.4rem);
  --fs-heading:  clamp(2.2rem, 2.5vw,  3.6rem);
  --fs-body-lg:  clamp(1.4rem, 1.25vw, 1.8rem);
  --fs-body:     clamp(1.3rem, 1.11vw, 1.6rem);
  --fs-small:    clamp(1.0rem, 0.83vw, 1.2rem);
  --fs-nav:      clamp(1.2rem, 1.11vw, 1.6rem);
  --fs-footer:   1.2rem;

  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 03. RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--clr-text-primary);
  background: var(--clr-bg-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img    { display:block; max-width:100%; }
a      { text-decoration:none; color:inherit; }
ul     { list-style:none; }
button { cursor:pointer; background:none; border:none; font:inherit; }
p      { line-height:1.7; }

/* 04. TYPE HELPERS */
.gradient-text {
  background: linear-gradient(90deg, #0073FF 0%, #00B0FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}
.accent-text { color: var(--clr-accent); }

/* 05. LAYOUT */
 .container { /*max-width:var(--max-w); */margin:0 auto; padding:0 var(--gutter); } 
[data-barba="wrapper"], [data-barba="container"] { width:100%; }
.section-header { margin-bottom: var(--sp-8); }
.section-action { text-align:center; margin-top:var(--sp-7); }

.label-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  color: var(--clr-text-muted);
  line-height: 1;
  margin-bottom: var(--sp-2);
  padding-top: 5rem;
}
.label-heading {
  font-size: var(--fs-heading);
  font-weight: 500;
  color: var(--clr-accent);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* 06. PAGE TRANSITION */
#transition-overlay {
  position:fixed; inset:0; z-index:9999;
  pointer-events:none; display:flex; flex-direction:column;
}
.t-panel { flex:1; transform:scaleY(0); transform-origin:top; will-change:transform; }
.t-panel-1 { background:var(--clr-panel-1); }
.t-panel-2 { background:var(--clr-panel-2); }
.t-panel-3 { background:var(--clr-panel-3); }

/* 07. NAV
   Figma: 1440×80px · links 16px regular · CTA 160×36px
   ============================================================ */
#main-nav {
  position:fixed; inset:0 0 auto 0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--clr-bg-alt);
  transition: background 0.4s var(--ease-in-out), box-shadow 0.4s var(--ease-in-out);
}
#main-nav.over-hero { background:transparent; box-shadow:none; }
#main-nav.solid {
  background: rgba(240, 240, 240, 0.25);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); */
}

.nav-logo     { display:flex; align-items:center; flex-shrink:0; }
.nav-logo-img { height:clamp(3.2rem,4.17vw,6rem); width:auto; object-fit:contain; }

.nav-links { display:flex; align-items:center; gap:clamp(3rem,5.56vw,8rem); }
.nav-links a {
  font-size: clamp(1.1rem, 0.97vw, 1.4rem); /* matches CTA button text size */
  font-weight: 400;
  letter-spacing: 0.09em;       /* 1.44px / 16px */
  text-transform: uppercase;
  color: var(--clr-text-primary);
  position: relative;
  transition: color 0.2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-0.3rem; left:0;
  width:0; height:1px; background:var(--clr-accent);
  transition: width 0.35s var(--ease-expo);
}
.nav-links a:hover, .nav-links a.active { color:var(--clr-accent); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

/* Nav CTA — Figma: 160×36px, 16px, letter-spacing 1.56px */
.nav-cta {
  font-size: clamp(1.1rem, 0.97vw, 1.4rem); /* matches nav link size */
  font-weight: 400;
  letter-spacing: 0.097em;
  text-transform: uppercase;
  color: var(--clr-text-white);
  background: var(--clr-accent);
  padding: 0 2.4rem;
  height: 3.6rem;
  display: inline-flex; align-items: center;
  border-radius: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.2s;
}
.nav-cta:hover { background:var(--clr-accent-hover); color:var(--clr-text-white); }

.nav-hamburger { display:none; flex-direction:column; gap:0.5rem; padding:0.4rem; }
.nav-hamburger span { display:block; width:2.4rem; height:1.5px; background:var(--clr-text-primary); }

/* 08. MOBILE MENU */
.mobile-menu {
  position:fixed; inset:0; z-index:600;
  background:var(--clr-bg-alt);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-10) var(--sp-5);
  transform:translateX(100%);
  transition:transform 0.45s var(--ease-expo);
  pointer-events:none;
}
.mobile-menu.open { transform:translateX(0); pointer-events:all; }
.mobile-menu ul { width:100%; }
.mobile-menu li + li { margin-top:var(--sp-6); }
.mobile-menu a { font-size:2.4rem; font-weight:300; color:var(--clr-text-primary); text-transform:uppercase; display:block; transition:color 0.2s; }
.mobile-menu a:hover { color:var(--clr-accent); }
.mobile-menu-cta {
  display:inline-flex !important; font-size:1.6rem !important; font-weight:400 !important;
  background:var(--clr-accent); color:var(--clr-text-white) !important;
  padding:1.4rem 4rem; border-radius:0.4rem;
  margin-top:var(--sp-7); letter-spacing:0.097em;
  text-transform:uppercase !important; transition:background 0.2s;
}
.mobile-menu-cta:hover { background:var(--clr-accent-hover); }
.mobile-menu-close { position:absolute; top:var(--sp-5); right:var(--sp-5); font-size:2.4rem; color:var(--clr-text-primary); padding:var(--sp-2); }

/* 09. HERO
   Figma: 1440×940px · bg #141414
   Text at y:816 → padding-bottom 5rem (near bottom of frame)
   ============================================================ */
.section-hero {
  position:relative; width:100%; height:100vh; min-height:60rem;
  overflow:hidden; display:flex; align-items:flex-end;
  /* background-color paints first — solid dark on initial paint,
     prevents flash of any cached thumbnail from a previous page.
     background-image uses --hero-thumb CSS var set inline on each
     page's section element, so each page shows its own thumbnail. */
  background-color: var(--clr-bg-hero);
  background-image: var(--hero-thumb, url('../video/Hero-desktop-thumb.jpg'));
  background-size: cover; background-position: center;
}
.hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  opacity: 0;                    /* thumbnail shows through underneath */
  transition: opacity 0.8s ease; /* smooth fade-in when .loaded is added */
}
.hero-video.loaded { opacity: 1; }
.hero-video--desktop { display:block; }
.hero-video--mobile  { display:none; }
.hero-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(102,102,102,0) 55%);
}
.hero-content {
  position:relative; z-index:3;
  padding:0 var(--gutter) 5rem;
  width:100%;
}
.hero-tagline { display:flex; flex-direction:column; gap:0; }
.hero-word {
  display:block;
  font-size:var(--fs-hero-tag);
  font-weight:400; letter-spacing:2rem;
  text-transform:uppercase; color:var(--clr-text-white);
  line-height:1.28; white-space:nowrap;
}
.hero-cta-mobile { display:none; }

/* 10. INTRO */
.section-intro {
  padding:7rem 0;
  border-bottom:1px solid var(--clr-border-section);
  background:
    linear-gradient(to top, rgba(0,176,255,0.08) 0%, transparent 50%),
    var(--clr-bg-white);
}
.intro-headline {
  /* Custom clamp ceiling (6.0rem instead of --fs-h1's 7.0rem) because this
     headline uses white-space:nowrap and must fit inside the 1080px content
     area (128rem container - 2×10rem gutter) at ≥1667px viewports where
     --fs-h1 would otherwise lock at 70px and overflow. Services/projects
     intro headlines still use --fs-h1 directly since they wrap naturally. */
  font-size:clamp(2.8rem, 4.2vw, 6.0rem);
  font-weight:400; line-height:1.05; letter-spacing:-0.02em;
  color:var(--clr-text-primary);
  margin-bottom:var(--sp-9);
  white-space:nowrap;
}
@media (max-width:600px) {
  .intro-headline { white-space:normal; font-size:clamp(2.4rem,6vw,4rem); margin-bottom:var(--sp-7); }
}
.intro-label-group { margin-bottom:var(--sp-5); }
.pillars-grid {
  display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr;
  padding-top:var(--sp-7);
}
.pillar-divider { background:var(--clr-accent); align-self:stretch; }
.pillar                               { padding:0 var(--sp-7) 0 0; }
.pillars-grid .pillar:nth-child(3)    { padding:0 var(--sp-7); }
.pillars-grid .pillar:last-child      { padding:0 0 0 var(--sp-7); }
.pillar-title { font-size:var(--fs-h3); font-weight:500; color:var(--clr-text-primary); letter-spacing:-0.03em; margin-bottom:var(--sp-4); }
.pillar-body  { font-size:var(--fs-body); color:var(--clr-text-secondary); line-height:1.6; }

/* 11. PROJECTS */
.section-projects { background:var(--clr-bg-white); padding:7rem 0; border-bottom:1px solid var(--clr-border-section); }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.projects-col-left, .projects-col-right { display:flex; flex-direction:column; gap:3.4rem; }
.projects-row-small { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.project-card { display:block; border-radius:0.4rem; overflow:hidden; cursor:pointer; }
.project-card-img { position:relative; width:100%; overflow:hidden; background:var(--clr-bg-alt); border-radius:0.4rem; }
.project-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.55s var(--ease-expo); }
.project-card-img video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.55s var(--ease-expo); }
.project-card:hover .project-card-img img { transform:scale(1.04); }
.project-card:hover .project-card-img video { transform:scale(1.04); }
.project-card-img--3x2 { aspect-ratio:3/2; }
.project-card-img--1x1 { aspect-ratio:1/1; }
.project-card-img--7x5 { aspect-ratio:7/5; }
.project-card-meta { display:flex; justify-content:space-between; align-items:baseline; padding:1.6rem 0 0; gap:var(--sp-1); } /* 16px top = Figma gap card-bottom → label */
.project-card-name { font-size:var(--fs-body-lg); font-weight:400; color:var(--clr-text-primary); letter-spacing:-0.01em; }
.project-card-cat  { font-size:var(--fs-small); font-weight:400; color:var(--clr-text-muted); text-align:right; flex-shrink:0; }

/* 12. SERVICES */
.section-services { background:var(--clr-bg-white); padding:7rem 0; border-bottom:1px solid var(--clr-border-section); }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.service-card { display:block; border-radius:0.4rem; overflow:hidden; cursor:pointer; }
.service-card-img { position:relative; width:100%; aspect-ratio:2/1; overflow:hidden; background:var(--clr-bg-dark); border-radius:0.4rem; }
.service-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.55s var(--ease-expo); }
.service-card:hover .service-card-img img { transform:scale(1.04); }
.service-card-meta { padding:var(--sp-3) 0 var(--sp-2); }
.service-card-name { font-size:var(--fs-body-lg); font-weight:400; color:var(--clr-text-primary); letter-spacing:-0.01em; }

/* 13. CLIENTS — static wrapping grid, white-bg PNG images (no card border)
   Desktop  : 15rem × 15rem logos, flex-wrap, gap 3.1rem
   Tablet   : 12rem × 12rem logos, flex-wrap, gap 2.4rem
   Mobile   : repeat(3, 1fr) grid, logos fill cell, aspect-ratio 1/1
   ============================================================ */
.section-clients {
  background: var(--clr-bg-white);
  padding: 7rem 0;
  border-bottom: 1px solid var(--clr-border-section);
}

/* Grid: flex-wrap so rows fill naturally and wrap */
.clients-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3.1rem;
}

/* Logo image — white-bg PNGs used directly, no card wrapper */
.client-logo {
  display: block;
  width: 15rem;
  height: 15rem;
  object-fit: contain;
  flex-shrink: 0;
}

/* 14. CTA */
.section-cta { background:var(--clr-bg-alt); height:26rem; display:flex; align-items:center; }
.section-cta-inner { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--sp-8);flex: 1 1 0%; }
.cta-headline { font-size:var(--fs-h2); font-weight:500; color:var(--clr-text-primary); line-height:1.05; letter-spacing:-0.02em; margin-bottom:var(--sp-4); }
.cta-sub { font-size:var(--fs-body); color:var(--clr-text-secondary); }

/* 15. FOOTER
   Loaded as a partial via loadFooter() in main.js (CODING_RULES §17 — footer
   is outside Barba wrapper, persists across transitions).
   Desktop : bg #222 · 4-col grid (Brand · Services · Studio · Find us) ·
             blue 20% top-border above centred copyright.
             Brand column stacks: INITIA logo · tagline · parentage paragraph ·
             UNO MINDA + CREAT partner logos.
   Mobile  : same bg, single-column stack, left-aligned copyright, no border.
   ============================================================ */
#main-footer {
  background: var(--clr-bg-dark);   /* #222 — new design keeps same bg on mobile too */
  color: var(--clr-text-white);
}

.footer-main {
  background-color: #222222;
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 0.8fr 1fr;
  gap: var(--sp-8);
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-8);
  align-items: start;
}

/* -- Brand column ----------------------------------------------------- */
.footer-brand { display: flex; flex-direction: column; }

.footer-logo {
  align-self: flex-start;   
  height: 5rem;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--sp-4);
}

.footer-tagline {
  font-size: 1.4rem;
  line-height: 1.48;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-5);
}

.footer-description {
  font-size: 1.4rem;
  line-height: 1.48;
  color: var(--clr-text-muted);
  max-width: 32.3rem;            /* Figma: 323px */
  margin-bottom: var(--sp-6);
}

.footer-partners {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.footer-partner-logo {
  display: block;
  width: auto;
  object-fit: contain;
}
.footer-partner-logo--uno   { height: 6.5rem; }   /* Figma: 41.85px */
.footer-partner-logo--creat { height: 7.3rem; }   /* Figma: 61.19px */

/* -- Nav columns ------------------------------------------------------ */
.footer-col-heading {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-5);
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: var(--sp-4); }

.footer-col a {
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--clr-text-light);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--clr-text-white); }

.footer-address {
  margin-top: var(--sp-6);
  font-size: 1.5rem;
  line-height: 1.49;
  font-style: normal;
  color: var(--clr-text-light);
  max-width: 20.4rem;            /* Figma: 204px */
}

/* -- Copyright bar ---------------------------------------------------- */
.footer-bottom {
  background-color: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-top: 1px solid var(--clr-border-section);   /* rgba(0,176,255,0.2) */
}

.footer-copy {
  font-size: 1.4rem;
  letter-spacing: 0.051em;
  color: var(--clr-text-muted);
}
/* 16. BUTTONS
   Figma: All Projects/Services button: 214×48px
   Scaled down: height clamp, padding clamp, font slightly smaller than body
   position:relative + overflow:hidden required for ripple effect
   ============================================================ */
.btn-primary, .btn-secondary {
  position: relative;
  overflow: hidden;             /* clips the ripple circle */
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-size: clamp(1.1rem, 0.97vw, 1.4rem);  /* slightly smaller than body */
  font-weight: 400;
  letter-spacing: 0.097em;
  text-transform: uppercase;
  height: clamp(3.6rem, 3.33vw, 4.8rem);     /* 48px at 1440px, min 36px */
  padding: 0 clamp(1.6rem, 1.8vw, 2.4rem);
  border-radius: 0.4rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease-in-out), border-color 0.2s, color 0.2s;
}
.btn-primary { color:var(--clr-text-white); background:var(--clr-accent); border:none; }
.btn-primary:hover { background:var(--clr-accent-hover); color:var(--clr-text-white); }

.btn-secondary { color:var(--clr-text-secondary); background:transparent; border:1px solid var(--clr-accent); }
.btn-secondary:hover { border-color:var(--clr-accent-hover); color:var(--clr-accent-hover); }

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-expand 0.6s ease-out forwards;
  pointer-events: none;
}
.btn-primary  .ripple { background: rgba(255,255,255,0.35); }
.btn-secondary .ripple { background: rgba(0,174,255,0.15); }

@keyframes ripple-expand {
  to { transform: scale(2.5); opacity: 0; }
}

/* Hover ripple — CSS ::after, radiates from centre on mouse-enter */
.btn-ripple::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-radius: 50%;
  opacity: 0; pointer-events: none;
}
.btn-primary.btn-ripple::after   { background: rgba(255,255,255,0.18); }
.btn-secondary.btn-ripple::after { background: rgba(0,174,255,0.12); }
.btn-ripple:hover::after { animation: hover-ripple 0.55s ease-out forwards; }
@keyframes hover-ripple {
  0%   { width:0;    height:0;    opacity:0.7; }
  100% { width:300%; height:500%; opacity:0;   }
}

/* 17. SCROLL REVEAL STATES */
.rv-line     { overflow:hidden; }
.rv-line > * { display:block; }

/* 18. RESPONSIVE ≤1024px */
@media (max-width:1024px) {
  :root { --gutter:6rem; }
  .pillar                            { padding:0 var(--sp-6) 0 0; }
  .pillars-grid .pillar:nth-child(3) { padding:0 var(--sp-6); }
  .pillars-grid .pillar:last-child   { padding:0 0 0 var(--sp-6); }

  /* Clients grid — tablet: 12rem cards, 2.4rem gap */
  .clients-grid  { gap: 2.4rem; }
  .client-logo   { width: 12rem; height: 12rem; }
}

/* 19. RESPONSIVE ≤768px */
@media (max-width:768px) {
  :root { --gutter:2.4rem; --nav-h:var(--nav-h-mobile); }

  /* Prevent page-level horizontal scroll — sections handle their own overflow */
  body { overflow-x:hidden; }

  /* Nav */
   #main-nav { padding:0 var(--gutter); background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
  #main-nav.over-hero { background:#fff; }
  #main-nav.solid { background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav-links, .nav-cta { display:none; }
  .nav-hamburger { display:flex; }

  /* Hero — mobile poster + video */
  .section-hero { background-color: var(--clr-bg-hero); background-image: var(--hero-thumb-mobile, url('../video/Hero-mobile-thumb.jpg')); }
  .hero-video--desktop { display:none; }
  .hero-video--mobile  { display:block; }
  .hero-content { padding:0 var(--gutter) var(--sp-7); text-align:center; display:flex; flex-direction:column; align-items:center; }
  .hero-word { letter-spacing:1.4rem; }
  .hero-cta-mobile {
    display:inline-flex; align-items:center; justify-content:center;
    margin-top:var(--sp-5); font-size:var(--fs-eyebrow); font-weight:400;
    letter-spacing:0.097em; text-transform:uppercase;
    color:var(--clr-text-white); background:var(--clr-accent);
    padding: 1.5rem var(--sp-5) ; height:5rem; border-radius:0.2rem;
    transition:background 0.2s;
  }
  .hero-cta-mobile:hover { background:var(--clr-accent-hover); color:var(--clr-text-white); }

  /* Intro */
  .section-intro { padding:var(--sp-8) 0; overflow:hidden; }
  .pillars-grid { grid-template-columns:1fr; padding-top:var(--sp-5); }
  .pillar-divider { display:none; }
  .pillar, .pillars-grid .pillar:nth-child(3), .pillars-grid .pillar:last-child { padding:var(--sp-5) 0; border-bottom:1px solid rgba(0,0,0,0.07); }
  .pillars-grid .pillar:last-child { border-bottom:none; }

  /* Projects & Services — CSS marquee on mobile, same engine as client logos.
     JS scroll / overflow-x approach dropped — Lenis intercepts scrollTo() and
     causes jumpy behaviour. Pure CSS translateX animation is unaffected by Lenis.
     JS duplicates cards into a .mobile-track wrapper at runtime (initMobileMarquee).
     ============================================================ */
  .section-projects { overflow:hidden; }
  .section-services { overflow:hidden; }

  /* Hide the original grid — display:none is fine because JS clones before hiding
     (cards are cloned first, then this CSS collapses the source grid).
     section-action (button) is NOT hidden — it stays naturally below the marquee. */
  .projects-grid  { display:none; }
  .services-grid  { display:none; }

  /* Marquee row sits inside .container between header and button.
     Negative margin breakout makes it span full viewport width
     despite container padding. */
  .mobile-marquee-row {
    overflow: hidden;
    width: calc(100% + (var(--gutter) * 2));
    margin-left:  calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    margin-bottom: var(--sp-7);
  }
  .mobile-track {
    display:flex;
    gap:2.5rem;
    width:max-content;
    will-change:transform;
    animation: mobile-marquee 60s linear infinite;
    /* pan-y: vertical scroll = browser/Lenis. Horizontal = our JS handler.
       Without this, mobile browsers may intercept horizontal gestures for
       their own use (zoom, native scroll) and drop touchmove events. */
    touch-action: pan-y;
  }
  /* Pause on hover only on devices with a real pointer (mouse/trackpad).
     Without this guard, :hover sticks on touch devices after a tap and
     freezes the marquee indefinitely. */
  @media (hover: hover) and (pointer: fine) {
    .mobile-track:hover { animation-play-state:paused; }
  }

  /* Each card inside the marquee track */
  .mobile-track .project-card,
  .mobile-track .service-card {
    width:80vw;
    flex-shrink:0;
  }
  /* Uniform aspect ratio for all card image types on mobile */
  .mobile-track .project-card-img--3x2,
  .mobile-track .project-card-img--1x1,
  .mobile-track .project-card-img--7x5 { aspect-ratio:4/5; }
  /* Service card images keep their 2:1 ratio inside the track */
  .mobile-track .service-card-img { aspect-ratio:4/5; }

  /* Card names — use base body size, not heading size, to prevent overflow
     on 80vw cards. Tighten the meta row gap for the same reason. */
  .mobile-track .project-card-meta,
  .mobile-track .service-card-meta {
    gap: var(--sp-4); /* 16px — replaces the 80px desktop gap */
    flex-wrap: wrap;  /* name wraps to new line if still tight */
  }
  .mobile-track .project-card-name,
  .mobile-track .service-card-name {
    font-size: var(--fs-body-lg); /* 18px — same as base card spec */
    font-weight: 400;
    min-width: 0;     /* allows flex child to shrink below content size */
    word-break: break-word;
  }
  .mobile-track .project-card-cat {
    font-size: var(--fs-small); /* 12px — same as base spec */
    flex-shrink: 0;
  }
  @keyframes mobile-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Clients — mobile: 3-col grid, logos fill cell width */
  .section-clients { overflow: visible; }
  .clients-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .client-logo   { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

  /* CTA */
  .section-cta { height:auto; padding:var(--sp-8) 0; overflow:hidden; }
  .section-cta-inner { flex-direction:column; align-items:flex-start; gap:var(--sp-6); }

  
/* Footer — mobile: single-column stack, smaller type, left-aligned copyright */
  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-6);
  }
  .footer-logo        { height: 4rem; margin-bottom: var(--sp-2); }
  .footer-tagline     { font-size: 1rem; margin-bottom: var(--sp-4); }
  .footer-description { font-size: 1rem; line-height: 1.6; max-width: 27.5rem; margin-bottom: var(--sp-5); }
  .footer-partners    { gap: var(--sp-4); }
  .footer-partner-logo--uno   { height: 6.5rem; }
  .footer-partner-logo--creat { height: 7.3rem; }
  .footer-col-heading { font-size: 1rem; margin-bottom: var(--sp-3); }
  .footer-col li + li { margin-top: var(--sp-3); }
  .footer-col a       { font-size: 1.2rem; }
  .footer-address     { font-size: 1.2rem; margin-top: var(--sp-4); max-width: none; }
  .footer-bottom      { justify-content: flex-start; padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
  .footer-copy        { font-size: 1.2rem; }
}

/* 20. RESPONSIVE ≤480px */
@media (max-width:480px) {
  /* Footer already stacks single-col at 768px — no further changes needed */
}

/* 21. SERVICES PAGE
   ============================================================ */
/* Styles for services.html go here */


/* 22. STUDIO PAGE
   studio.html only — all tokens and base rules inherited from above.
   rem everywhere · px only for 1px borders · CSS vars only.
   ============================================================ */

/* --- Hero --- */
.studio-hero {
  position: relative;
  height: 100vh;
  min-height: 56rem;
  background: var(--clr-bg-hero);
  overflow: hidden;
}
.studio-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.studio-hero-video--desktop { display: block; }
.studio-hero-video--mobile  { display: none;  }
.studio-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(102,102,102,0) 55%);
  pointer-events: none;
}

/* --- About --- */
.section-studio-about {
  padding: 7rem 0;
  background: var(--clr-bg-white);
  /* border-bottom: 1px solid var(--clr-border-section); */
}
.studio-about-headline {
  font-size: clamp(2.8rem, 4.86vw, 7.0rem);
  font-weight: 400;
  color: var(--clr-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--sp-7);
}
.studio-about-body {
  font-size: clamp(1.6rem, 2.08vw, 3.0rem);
  font-weight: 400;
  color: var(--clr-text-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* --- Stats
   Desktop: 4-col grid, each item right-border, alternating padding.
   Mobile:  single col, each item bottom-border, NO padding-left on any item.
   The :not(:first-child) padding rule MUST be overridden to 0 on mobile
   otherwise items 2-4 are indented — this was the bug in the screenshot.
   ---------------------------------------------------------------- */
.section-studio-stats {
  padding: 3rem 0 3rem 0;
  background: linear-gradient(to top, rgba(0,176,255,0.05) 0%, transparent 100%),
              var(--clr-bg-white);
  border-bottom: 1px solid var(--clr-border-section);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--sp-4);
}
.stat-item {
  padding: var(--sp-6) var(--sp-7) var(--sp-6) 0;
  border-right: 1px solid rgba(0,176,255,0.2);
}
.stat-item:first-child       { padding-left: 0; }
.stat-item:last-child        { border-right: none; }
.stat-item:not(:first-child) { padding-left: var(--sp-9); }
.stat-number {
  display: block;
  font-size: clamp(2.8rem, 3.33vw, 4.8rem);
  font-weight: 600;
  color: var(--clr-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.8rem;
}
.stat-label {
  font-size: var(--fs-body);
  color: var(--clr-text-secondary);
  font-weight: 400;
}

/* --- Philosophy --- */
.section-studio-philosophy {
  padding: 7rem 0;
  background: var(--clr-bg-white);
  border-bottom: 1px solid var(--clr-border-section);
}
.philosophy-headline {
  font-size: clamp(2.8rem, 4.86vw, 7.0rem);
  font-weight: 400;
  color: var(--clr-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--sp-7);
}
.philosophy-body {
  font-size: clamp(1.6rem, 2.08vw, 3.0rem);
  font-weight: 400;
  color: var(--clr-text-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* --- Awards --- */
.section-studio-awards {
  padding: 7rem 0;
  background: var(--clr-bg-white);
  border-bottom: 1px solid var(--clr-border-section);
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.award-link {
  display: block;
  border-radius: 0.4rem;
  overflow: hidden;
  transition: opacity 0.2s var(--ease-in-out);
}

.award-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 0.4rem;
  background: var(--clr-bg-white);
  padding: var(--sp-5);
 transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.award-link:hover .award-img {   transform: scale(1.08); }
.security-link:hover .award-img  {   transform: scale(1.08); }

/* --- Leadership --- */
.section-studio-leadership {
  padding: 7rem 0;
  background: var(--clr-bg-white);
  border-bottom: 1px solid var(--clr-border-section);
}
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7);
  margin-top: var(--sp-8);
}
.leader-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow: hidden;
}
.leader-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.leader-card:hover .leader-photo {
  transform: scale(1.04);
}
.leader-photo-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
}
.leader-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.leader-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.leader-name {
  font-size: 2.0rem;
  font-weight: 500;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.leader-linkedin {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* opacity: 0.65; */
  transition: opacity 0.2s;
}
/* .leader-linkedin:hover { opacity: 1; } */
.leader-linkedin svg   { width: 2rem; height: 2rem; }
.leader-title {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.leader-discipline {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--clr-text-muted);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* --- Team grid --- */
.section-studio-team {
  padding: 7rem 0;
  background: var(--clr-bg-white);
  border-bottom: 1px solid var(--clr-border-section);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 14rem;
  row-gap: 3.6rem;
  margin-top: var(--sp-8);
}
.team-member {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  overflow: hidden;
}
.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 0.4rem;
  background: #d9d9d9;
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.team-member:hover .team-photo {
  transform: scale(1.04);
}
.team-photo-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  border-radius: 0.4rem;
}
.team-name {
  font-size: 2.0rem;
  font-weight: 500;
  color: #434343;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* --- Award image hover --- */
.award-link {
  display: block;
  overflow: hidden;
}
.award-img {
  display: block;
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.award-link:hover .award-img {
  transform: scale(1.09);
}

/* --- ≤1024px --- */
@media (max-width: 1024px) {
  .leadership-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid       { column-gap: var(--gutter); }
}

/* --- ≤768px ---
   CRITICAL stat-item fix:
   On mobile, stat-item switches to a vertical stack. All four items
   must be flush-left with zero left padding — no indentation.
   padding-left on .stat-item:not(:first-child) must be explicitly
   zeroed here, otherwise items 2–4 are indented (confirmed bug).
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  .studio-hero-video--desktop { display: none;  }
  .studio-hero-video--mobile  { display: block; }

  /* Stats — single column, flush left, dividers between rows */
  .stats-grid {
    grid-template-columns: 1fr;
    margin-top: var(--sp-2);
  }
  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(0,176,255,0.2);
    padding: var(--sp-5) 0;       /* top/bottom only — no left or right */
  }
  /* Override the desktop :not(:first-child) padding-left — this was the bug */
  .stat-item:not(:first-child) { padding-left: 0; }
  .stat-item:last-child        { border-bottom: none; }

  /* Awards */
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-3);
  }

  /* Leadership */
  .leadership-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
    margin-top: var(--sp-7);
  }
  .leader-name       { font-size: 1.6rem; }
  .leader-title,
  .leader-discipline { font-size: 1.2rem; }

  /* Team grid */
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--sp-4);
    row-gap: var(--sp-5);
    margin-top: var(--sp-7);
  }
  .team-member { gap: var(--sp-2); }
  .team-name   { font-size: 1.2rem; letter-spacing: -0.01em; }
}

/* 23. BARBA TRANSITION — OUTGOING CONTAINER
   When Barba is mid-transition, both the outgoing and incoming
   [data-barba="container"] elements are in the DOM simultaneously.
   This causes the outgoing page's hero video to flash through before
   the incoming page's video plays.
   Fix: hide the outgoing (first) container the instant a transition
   starts. The html.barba-is-transitioning class is added by Barba
   at the very start of leave() — before any animation runs.
   visibility:hidden (not display:none) preserves layout so
   ScrollTrigger measurements are not disrupted.
   ============================================================ */
/* .is-transitioning is added to <html> by our own leave() hook.
   Barba 2.x does not reliably add barba-is-transitioning to <html>. */
html.is-transitioning [data-barba="container"]:first-of-type {
  visibility: hidden;
}


/* ==================================================
   24. SERVICES PAGE
   ================================================== */

/* --------------------------------------------------
   24a. Services Intro Section
   -------------------------------------------------- */
.section-services-intro {
  padding:7rem 0;
  background:var(--clr-bg-white);
}
.services-intro-headline-wrap {
  overflow:hidden;
  margin-bottom:var(--sp-8);
}
.services-intro-headline {
  display:block;
  font-size:var(--fs-h1);
  font-weight:400;
  color:var(--clr-text-primary);
  line-height:1.05;
  letter-spacing:-0.03em;
}
.services-intro-body {
  font-size:clamp(1.8rem, 2.08vw, 3.0rem);
  font-weight:400;
  color:var(--clr-text-secondary);
  line-height:1.5;
  max-width:max-content;
}

/* --------------------------------------------------
   24b. Services Jump Nav Strip — desktop
   -------------------------------------------------- */
.section-services-nav {
  padding:2rem 0 4rem;
  background:
    linear-gradient(to top, rgba(0,176,255,0.05) 0%, rgba(0,106,153,0) 100%),
    var(--clr-bg-white);
  border-bottom:1px solid var(--clr-border-section);
}
.services-nav-eyebrow {
  font-size:var(--fs-eyebrow);
  font-weight:400;
  color:var(--clr-text-muted);
  line-height:1.2;
  margin-bottom:var(--sp-4);
}
.services-nav-headline {
  display:block;
  font-size:var(--fs-heading);
  font-weight:500;
  color:var(--clr-accent);
  line-height:1.2;
  letter-spacing:-0.03em;
  margin-bottom:var(--sp-6);
}
.services-nav-items {
  display:flex;
  align-items:stretch;
}
.services-nav-item {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--sp-5);
  flex:1;
  padding:2rem 2rem 0 0;
  text-decoration:none;
  color:var(--clr-text-primary);
  transition:color 200ms cubic-bezier(0.4,0,0.2,1);
}
.services-nav-item:hover { color:var(--clr-accent); }
.services-nav-label {
  display:block;
  font-size:2.4rem;
  font-weight:400;
  line-height:1.4;
  letter-spacing:-0.04em;
  white-space:nowrap; /* prevents "06." orphaning — <br> still forces line 2 */
}
.services-nav-num {
  display:inline;
  color:var(--clr-text-muted);
}
.services-nav-phrase {
  display:inline;
  color:var(--clr-text-primary);
  transition:color 200ms cubic-bezier(0.4,0,0.2,1);
}
.services-nav-item:hover .services-nav-phrase { color:var(--clr-accent); }
.services-nav-arrow {
  width:2.4rem;
  height:2.4rem;
  flex-shrink:0;
  color:var(--clr-accent);
  transition:transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.services-nav-item:hover .services-nav-arrow { transform:translate(3px,-3px); }
.services-nav-sep {
  display:block;
  width:1px;
  background:rgba(0,176,255,0.2);
  align-self:stretch;
  flex-shrink:0;
  margin:0 var(--sp-4);
}

/* --------------------------------------------------
   24c. Service Sections — desktop alternating layout
   -------------------------------------------------- */
.section-service {
  padding:7rem 0;
  border-bottom:1px solid var(--clr-border-section);
  background:var(--clr-bg-white);
  scroll-margin-top:8rem;
}
.service-inner {
  display:flex;
  align-items:flex-start;
  gap:7rem;
  max-width:180rem;   /* cap at 1800px so 4K monitors don't blow the image to 1500px+ */
  margin:0 auto;      /* centre when container exceeds 180rem (iMac/4K/ultrawide) */
}
.section-service--reverse .service-inner { flex-direction:row-reverse; }

.service-image-wrap {
  flex:0 0 57%;       /* was 62rem — percentage preserves designer ratio (620/1080≈57%) and scales with container */
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:0.4rem;
}
.service-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 550ms cubic-bezier(0.16,1,0.3,1);
}
.service-image-wrap:hover .service-image { transform:scale(1.04); }

.service-content {
  flex:1;
  min-width:0;
  padding-top:var(--sp-5);
}
.service-number-tag {
  display:flex;
  align-items:center;
  font-size:1.8rem;
  font-weight:500;
  line-height:1;
  margin-bottom:var(--sp-6);
}
.service-tag-num    { color:var(--clr-accent); }
.service-tag-sep    { color:var(--clr-text-muted); }
.service-tag-phrase { color:var(--clr-text-muted); }

.service-title {
  display:block;
  font-size:clamp(1.8rem, 1.67vw, 2.4rem);
  font-weight:500;
  color:var(--clr-text-primary);
  line-height:1.3;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin-bottom:var(--sp-7);
}
.service-sub-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
}
.service-sub-item {
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  padding:var(--sp-5) 0;
  border-top:1px solid rgba(0,176,255,0.12);
}
.service-sub-item:first-child { border-top:none; padding-top:0; }
.service-sub-name {
  display:block;
  font-size:var(--fs-body-lg);
  font-weight:400;
  color:var(--clr-text-secondary);
  line-height:1.4;
  letter-spacing:-0.01em;
}
.service-sub-desc {
  display:block;
  font-size:var(--fs-small);
  font-weight:400;
  color:var(--clr-text-muted);
  line-height:1.6;
}

/* Accordion trigger — hidden on desktop, shown on mobile */
.service-acc-trigger { display:none; }

/* --------------------------------------------------
   24d. TABLET (≤1024px)
   -------------------------------------------------- */
@media (max-width:1024px) {
  .services-nav-num,
  .services-nav-phrase { font-size:2.0rem; }
  /* Allow nav to scroll if items overflow on narrow tablets */
  .services-nav-items {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:0.8rem;
  }
  .services-nav-items::-webkit-scrollbar { display:none; }
  .services-nav-item { flex:0 0 auto; min-width:14rem; }
  .service-image-wrap { flex:0 0 46rem; }
  .service-inner { gap:4.8rem; }
}

/* --------------------------------------------------
   24e. MOBILE (≤768px)
   -------------------------------------------------- */
@media (max-width:768px) {

  /* ---------- Intro section ---------- */
  .section-services-intro { padding:4rem 0; }
  .services-intro-headline-wrap { margin-bottom:var(--sp-5); }

  /* Fix: clamp gives ~28px at 402px. Figma spec is 36px. Override to fixed. */
  .services-intro-headline {
    font-size:3.6rem;
    letter-spacing:-0.03em;
  }
  /* Fix: clamp gives ~18px at 402px. Figma spec is 16px. */
  .services-intro-body { font-size:1.6rem; line-height:1.6; }

  /* ---------- Jump nav strip — hide items, keep header ---------- */
  /* Figma: strip is 101px tall, with "What we do" + "We help you..." only */
  .section-services-nav {
    padding:1rem 0 1rem; /*matches Figma's 101px total height exactly */
  }
  /* Fix: clamp gives ~20px. Figma spec is 16px on mobile. */
  .services-nav-eyebrow {
    font-size:1.6rem;
    margin-bottom:1.2rem;  /* 12px gap to headline — matches Figma */
  }
  /* Fix: clamp gives ~28px. Figma spec is 24px medium, tracking -1px. */
  .services-nav-headline {
    font-size:2.4rem;
    font-weight:500;
    letter-spacing:-0.1rem;
    margin-bottom:0;
  }
  /* Hide the 6 jump-nav items entirely */
  .services-nav-items { display:none; }

  /* ---------- Service sections — accordion ---------- */
  .section-service {
    padding:0;
    scroll-margin-top:6rem;
    border-bottom:none; /* separator handled by accordion trigger border-top */
  }

  /* Show accordion trigger button */
  .service-acc-trigger {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--sp-4);
    width:100%;
    padding:2.4rem 0;
    background:none;
    border:none;
    border-top:1px solid rgba(0,176,255,0.15);
    cursor:pointer;
    text-align:left;
  }
  /* First item has no top border (section border takes care of it) */
  .section-service:first-of-type .service-acc-trigger { border-top:none; }

  /* Fix: clamp gives ~16px at 402px. Figma spec is 20px. */
  .service-acc-title {
    font-size:2.0rem;
    font-weight:500;
    color:var(--clr-text-primary);
    line-height:1.3;
    letter-spacing:-0.02em;
    text-transform:uppercase;
  }
  .service-acc-chevron {
    flex-shrink:0;
    width:2.4rem;
    height:2.4rem;
    color:var(--clr-text-muted);
    transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), color 0.3s;
  }
  /* Chevron rotates up + turns accent when open */
  .section-service.is-open .service-acc-chevron {
    transform:rotate(180deg);
    color:var(--clr-accent);
  }
  /* Trigger accent colour on open */
  .section-service.is-open .service-acc-trigger { border-top-color:var(--clr-accent); }
  /* .section-service.is-open .service-acc-title { color:var(--clr-accent); } */

  /* service-inner: CSS shows/hides via is-open on parent.
     No GSAP — display is fully CSS-controlled. */
  .service-inner {
    display:none;
    flex-direction:column;
    gap:var(--sp-6);
    padding-bottom:var(--sp-7);
    overflow-anchor:none;
  }
  .section-service.is-open .service-inner {
    display:flex;
    animation:accFadeIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s both;
  }
  @keyframes accFadeIn {
    from { opacity:0; transform:translateY(0.8rem); }
    to   { opacity:1; transform:translateY(0); }
  }
  /* Row-reverse irrelevant on mobile — image always on top */
  .section-service--reverse .service-inner { flex-direction:column; }

  /* Image: full-width 4:3 */
  .service-image-wrap {
    flex:none;
    width:100%;
    aspect-ratio:4/3;
    border-radius:0.2rem;
  }
  .service-content { padding-top:0; }

  /* Hide h2 title — accordion button IS the title on mobile */
  .service-title { display:none; }
  .service-content .rv-line { display:none; }

  /* Fix number tag size */
  .service-number-tag {
    font-size:1.6rem;
    margin-bottom:var(--sp-4);
  }
  /* Figma specifies 12px for descriptor on mobile */
  .service-sub-desc { font-size:1.2rem; }
}

/* ==================================================
   24f. NAV — mobile safety rules
   Belt-and-suspenders: force-hide CTA in case of
   class specificity conflicts with .btn-primary.
   ================================================== */
@media (max-width:768px) {
  #main-nav .nav-cta { display:none !important; }
}


/* ==================================================
   25. PROJECTS LANDING PAGE
   ================================================== */


/* --------------------------------------------------
   25a. Projects Intro Section
   -------------------------------------------------- */
.section-projects-intro {
  padding: 7rem 0;
  background: var(--clr-bg-white);
  /* border-bottom: 1px solid var(--clr-border-section); */
}
.projects-intro-headline-wrap {
  overflow: hidden;                  /* rv-line child-wipe clipping */
  margin-bottom: var(--sp-6);
}
.projects-intro-headline {
  display: block;
  font-size: var(--fs-h1);           /* 70px @1440 */
  font-weight: 400;
  color: var(--clr-text-primary);
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* margin: 1rem; */
}
.projects-intro-body {
  font-size: clamp(1.8rem, 2.08vw, 3.0rem);   /* 30px @1440 */
  font-weight: 400;
  color: var(--clr-text-secondary);
  line-height: 1.5;
  max-width: 100rem;
  margin: 0;
}


/* --------------------------------------------------
   25b. Projects List Section
   -------------------------------------------------- */
.section-projects-list {
  padding: 7rem 0;
  background: var(--clr-bg-white);
  border-bottom: 1px solid var(--clr-border-section);
}
.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);                  /* 4.8rem between rows */
}


/* --------------------------------------------------
   25c. Project tile — shared base
   --------------------------------------------------
   Named .project-tile (not .project-card) to avoid colliding
   with the home-page .project-card rules at Section 11.
   -------------------------------------------------- */
.project-tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 0.4rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: var(--clr-bg-hero);    /* #141414 — fills before image paints */
}

.project-tile-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.project-tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-expo);
}
.project-tile:hover .project-tile-media img { transform: scale(1.04); }

.project-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
                              rgba(0,0,0,0.65) 0%,
                              rgba(102,102,102,0) 46%);
  pointer-events: none;
}

.project-tile-name {
  font-size: clamp(2.4rem, 3.33vw, 4.8rem);   /* 48px @1440 */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--clr-text-light);      /* #F0F0F0 */
  margin: 0;
}
.project-tile-category {
  font-size: var(--fs-body);         /* 16px @1440 */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--clr-text-light);
  margin: var(--sp-2) 0 0 0;         /* 0.8rem above */
}

.project-tile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.8rem;
  padding: 0 4rem;
  flex-shrink: 0;
  border: 1px solid var(--clr-accent);
  border-radius: 0.4rem;
  background: transparent;
  color: var(--clr-text-light);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.097em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease-in-out),
              color        0.2s var(--ease-in-out),
              background   0.2s var(--ease-in-out);
}
.project-tile:hover .project-tile-btn {
  border-color: var(--clr-accent-hover);
  color: #FFFFFF;
}


/* --------------------------------------------------
   25d. Full-width variant (1240 × 600)
   Button sits bottom-right alongside text on the left.
   -------------------------------------------------- */
.project-tile--large { aspect-ratio: 1240 / 600; }

.project-tile--large .project-tile-body {
  position: absolute;
  left: 4.8rem;
  right: 4.8rem;
  bottom: 4.8rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
}


/* --------------------------------------------------
   25e. Half-width variant (600 × 600)
   Text on top, button below (vertical stack) — per Figma.
   -------------------------------------------------- */
.project-tile--half { aspect-ratio: 1 / 1; }

.project-tile--half .project-tile-body {
  position: absolute;
  left: 4.8rem;
  right: 4.8rem;
  bottom: 4.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);                  /* 3.2rem between text block and button */
}

/* Row wrapping the two half-width tiles */
.projects-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}


/* ==================================================
   25f. RESPONSIVE — TABLET (≤1024px)
   ================================================== */
@media (max-width: 1024px) {
  .section-projects-intro,
  .section-projects-list { padding: 6.4rem 0; }

  .project-tile--large .project-tile-body,
  .project-tile--half  .project-tile-body {
    left:  3.2rem;
    right: 3.2rem;
    bottom: 3.2rem;
  }
  .project-tile--half .project-tile-body { gap: var(--sp-5); }

  .projects-row-pair { gap: var(--sp-6); }

  .project-tile-btn {
    height: 4.2rem;
    padding: 0 3rem;
  }
}


/* ==================================================
   25g. RESPONSIVE — MOBILE (≤768px)
   All tiles collapse to 1:1 square, button hidden,
   half-pair row restacks as single column.
   ================================================== */
   
@media (max-width: 768px) {
  .section-projects-intro { padding: 4.8rem 0 2.4rem 0; }
  .section-projects-list  { padding: 2.4rem 0 4.8rem 0; }

  .projects-intro-headline-wrap { margin-bottom: var(--sp-6); }
  .projects-intro-headline      { font-size: clamp(2.8rem, 9vw, 3.6rem); }
  .projects-intro-body          { font-size: 1.6rem; line-height: 1.6; }

  .projects-list { gap: var(--sp-5); }

  /* All tiles become square on mobile — matches Figma 354×354 */
  .project-tile--large,
  .project-tile--half { aspect-ratio: 1 / 1; }

  .project-tile { border-radius: 0.2rem; }

  /* Half-pair collapses into the vertical stack */
  .projects-row-pair {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  /* Compact body — stacked text, no button */
  .project-tile--large .project-tile-body,
  .project-tile--half  .project-tile-body {
    left:   1.8rem;
    right:  1.8rem;
    bottom: 1.8rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .project-tile-name {
    font-size: 2.4rem;
    line-height: 1.1;
  }
  .project-tile-category {
    font-size: 1rem;
    line-height: 1;
    margin-top: 0.6rem;
  }

  /* "View Project" button hidden — whole tile is the tap target */
  .project-tile-btn { display: none; }
}


/* ==================================================
   25h. REDUCED MOTION
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  .project-tile-media img,
  .project-tile:hover .project-tile-media img { transform: none; }
  .project-tile-btn { transition: none; }
}


/* ==================================================
   26. TD225 PROJECT DETAIL PAGE
   Page lives at  projects/td225-design.html
   All new classes are prefixed .pd- (project-detail)
   so they can be reused by future project detail pages.
   ================================================== */

/* --------------------------------------------------
   26a. Hero — static image variant
   Reuses .section-hero from §09. Just omits the <video>.
   Overlay is lighter here since there are no hero words.
   -------------------------------------------------- */
.pd-hero .hero-overlay {
  background: linear-gradient(to top,
                              rgba(0,0,0,0.4) 0%,
                              rgba(0,0,0,0) 45%);
}
.pd-hero .hero-content {
  padding: 0 var(--gutter) var(--sp-7);
}


/* --------------------------------------------------
   26b. Intro — tag list + large body paragraph
   -------------------------------------------------- */
.section-pd-intro {
  padding: 7rem 0 var(--sp-7) 0;
  background: var(--clr-bg-white);
}
.pd-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.pd-tag-list li {
  font-size: var(--fs-body-lg);        /* 18px @1440 */
  font-weight: 400;
  color: #979797;                       /* Figma: muted grey for tags */
  line-height: 1.3;
  position: relative;
  padding-right: var(--sp-3);
}
.pd-tag-list li + li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-3));
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #979797;
  transform: translateY(-50%);
}
.pd-intro-headline-wrap {
  overflow: hidden;                     /* rv-line child-wipe clipping */
}
.pd-intro-headline {
  display: block;
  font-size: clamp(2.4rem, 2.5vw, 3.6rem); /* 36px @1440 — Figma: big intro body */
  font-weight: 400;
  color: var(--clr-text-primary);
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 0;
}


/* --------------------------------------------------
   26c. Pillars — 3 cols with blue vertical dividers
   (Same skeleton as homepage §10 .pillars-grid, but
    lighter text treatment to match Figma TD225 spec.)
   -------------------------------------------------- */
.section-pd-pillars {
  padding: var(--sp-6) 0 var(--sp-9) 0;
  background: var(--clr-bg-white);
  /* border-bottom: 1px solid var(--clr-border-section); */
}
.pd-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
}
.pd-pillar-divider {
  background: var(--clr-accent);
  align-self: stretch;
}
.pd-pillar                                   { padding: 0 var(--sp-7) 0 0; }
.pd-pillars-grid .pd-pillar:nth-child(3)     { padding: 0 var(--sp-7); }
.pd-pillars-grid .pd-pillar:last-child       { padding: 0 0 0 var(--sp-7); }

.pd-pillar-subtitle {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* 24px @1440 */
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: var(--sp-3);
}
.pd-pillar-body {
  font-size: clamp(1.4rem, 1.39vw, 2.0rem); /* 20px @1440 */
  font-weight: 400;
  color: var(--clr-text-secondary);
  line-height: 1.4;
}


/* --------------------------------------------------
   26d. Sketches — full-bleed image
   -------------------------------------------------- */
.section-pd-sketches {
  padding: 0;
  background: var(--clr-bg-white);
}
.pd-sketches-img,
.pd-sketches-img img {
  display: block;
  width: 100%;
  height: auto;
}


/* --------------------------------------------------
   26e. Carousels — shared
   Variants:  --full  full-bleed (no container wrap)
              (default) inset inside .container with 100px gutter
   -------------------------------------------------- */
.section-pd-carousel {
  padding: var(--sp-3) 0;
  background: var(--clr-bg-white);
}
.pd-carousel {
  position: relative;
  overflow: hidden;
  background: var(--clr-bg-alt);     /* tinted backdrop if images are smaller than slot */
  border-radius: 0.4rem;
}
.section-pd-carousel--full .pd-carousel {
  border-radius: 0;                   /* edge-to-edge variant */
}
.pd-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s var(--ease-expo);
  will-change: transform;
  touch-action: pan-y;                /* vertical = Lenis; horizontal = our handler */
}
.pd-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.pd-carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- Arrows --- */
.pd-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-accent);
  color: var(--clr-text-white);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s var(--ease-in-out),
              opacity    0.25s var(--ease-in-out),
              visibility 0s    linear 0s;
}
.pd-carousel-arrow:hover { background: var(--clr-accent-hover); }
.pd-carousel-arrow svg   { width: 2.4rem; height: 2.4rem; display: block; }
.pd-carousel-arrow--prev { left: var(--gutter); }
.pd-carousel-arrow--next { right: var(--gutter); }
.pd-carousel-arrow--prev svg { transform: rotate(180deg); }

/* Inset variant — arrows sit inside the container (100px from image edge) */
.section-pd-carousel:not(.section-pd-carousel--full) .pd-carousel-arrow--prev { left: var(--sp-5); }
.section-pd-carousel:not(.section-pd-carousel--full) .pd-carousel-arrow--next { right: var(--sp-5); }

/* --- Arrow visibility at boundaries --- */
.pd-carousel.is-first .pd-carousel-arrow--prev,
.pd-carousel.is-last  .pd-carousel-arrow--next {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background 0.2s var(--ease-in-out),
              opacity    0.25s var(--ease-in-out),
              visibility 0s    linear 0.25s;
}


/* --------------------------------------------------
   26f. Design Philosophy — 2-col (image left, text right)
   -------------------------------------------------- */
.section-pd-philosophy {
  padding: var(--sp-3) 0;
  background: var(--clr-bg-white);
}
.pd-philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  /* align-items: center; */
}
.pd-philosophy-media {
  overflow: hidden;
  border-radius: 0.4rem;
}
.pd-philosophy-media img {
  width: 100%;
  height: auto;
  display: block;
}
.pd-philosophy-heading {
  display: block;
  font-size: clamp(2.4rem, 2.22vw, 3.2rem);
  font-weight: 500;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--sp-5) 0;
}
.pd-philosophy-body {
  font-size: clamp(1.4rem, 1.39vw, 2.0rem);
  font-weight: 400;
  color: var(--clr-text-muted);
  line-height: 1.5;
  max-width: 62rem;
}


/* --------------------------------------------------
   26g. Collage — 3-image asymmetric grid
   Desktop: big left 620x720 + top 607x476 + bottom 607x230
   Mobile:  right column hidden, left image only
   -------------------------------------------------- */
.section-pd-collage {
  padding: var(--sp-4) 0;
  background: var(--clr-bg-white);
}
.pd-collage-grid {
  display: grid;
  grid-template-columns: 620fr 607fr;  /* Figma proportions */
  gap: 1.4rem;
}
.pd-collage-left {
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 620 / 720;
}
.pd-collage-right {
  display: grid;
  grid-template-rows: 476fr 230fr;
  gap: 1.4rem;
}
.pd-collage-top,
.pd-collage-bottom {
  overflow: hidden;
  border-radius: 0.4rem;
}
.pd-collage-top    { aspect-ratio: 607 / 476; }
.pd-collage-bottom { aspect-ratio: 607 / 230; }
.pd-collage-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------
   26h. Workshop — single inset image
   -------------------------------------------------- */
.section-pd-workshop {
  /* padding: var(--sp-8) 0; */
  background: var(--clr-bg-white);
}
.pd-workshop-img {
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 1240 / 700;
}
.pd-workshop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------
   26i. Details — Camera + Charger pair
   (Stays side-by-side on mobile per Figma)
   -------------------------------------------------- */
.section-pd-details {
  padding: var(--sp-10) 0;
  background: var(--clr-bg-white);
}
.pd-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.pd-detail-img {
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 600 / 720;
}
.pd-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------
   26j. Final reveal — full-bleed closing image
   -------------------------------------------------- */
.section-pd-final {
  padding: var(--sp-8) 0 0 0;
  background: var(--clr-bg-white);
}
.pd-final-img {
  overflow: hidden;
  aspect-ratio: 1440 / 1000;
}
.pd-final-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------
   26k. Back to Projects — centered underlined link
   -------------------------------------------------- */
.section-pd-back {
  padding: var(--sp-8) 0;
  background: var(--clr-bg-white);
  text-align: center;
}
.pd-back-link {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.097em;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  transition: color 0.2s var(--ease-in-out);
}
.pd-back-link:hover { color: var(--clr-accent); }


/* ==================================================
   26l. TABLET (≤1024px)
   ================================================== */
@media (max-width: 1024px) {
  .pd-pillar                                 { padding: 0 var(--sp-6) 0 0; }
  .pd-pillars-grid .pd-pillar:nth-child(3)   { padding: 0 var(--sp-6); }
  .pd-pillars-grid .pd-pillar:last-child     { padding: 0 0 0 var(--sp-6); }

  .pd-carousel-arrow { width: 4rem; height: 4rem; }
  .pd-carousel-arrow svg { width: 2rem; height: 2rem; }

  .pd-philosophy-grid { gap: var(--sp-7); }
}


/* ==================================================
   26m. MOBILE (≤768px)
   ================================================== */
@media (max-width: 768px) {

  /* Hero overlay — gentler gradient, CTA padded bottom per projects.html pattern */
  .pd-hero .hero-content {
    padding: 0 var(--gutter) var(--sp-7);
  }

  /* Intro */
  .section-pd-intro { padding: var(--sp-7) 0 var(--sp-5) 0; }
  .pd-tag-list      { gap: var(--sp-2); margin-bottom: var(--sp-5); }
  .pd-tag-list li   { font-size: 1.3rem; padding-right: var(--sp-2); }
  .pd-tag-list li + li::before {
    left: calc(-1 * var(--sp-2));
    width: 0.4rem;
    height: 0.4rem;
  }
  .pd-intro-headline { font-size: 1.6rem; line-height: 1.6; letter-spacing: 0; }

  /* Pillars — single column, horizontal borders replace vertical dividers */
  .section-pd-pillars { padding: var(--sp-5) 0 var(--sp-7) 0; }
  .pd-pillars-grid    { grid-template-columns: 1fr; }
  .pd-pillar-divider  { display: none; }
  .pd-pillar,
  .pd-pillars-grid .pd-pillar:nth-child(3),
  .pd-pillars-grid .pd-pillar:last-child {
    padding: var(--sp-5) 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
  .pd-pillars-grid .pd-pillar:last-child { border-bottom: none; }
  .pd-pillar-subtitle { font-size: 1.8rem; margin-bottom: var(--sp-2); }
  .pd-pillar-body     { font-size: 1.4rem; line-height: 1.45; }

  /* Carousels */
  .section-pd-carousel { padding: var(--sp-6) 0; }
  .pd-carousel-arrow {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.2rem;
  }
  .pd-carousel-arrow svg { width: 1.6rem; height: 1.6rem; }
  /* Full-bleed variant — small margin from edge on mobile */
  .section-pd-carousel--full .pd-carousel-arrow--prev { left: var(--sp-3); }
  .section-pd-carousel--full .pd-carousel-arrow--next { right: var(--sp-3); }
  /* Inset variant — arrows overlay image, tight to edges */
  .section-pd-carousel:not(.section-pd-carousel--full) .pd-carousel-arrow--prev { left: var(--sp-2); }
  .section-pd-carousel:not(.section-pd-carousel--full) .pd-carousel-arrow--next { right: var(--sp-2); }

  /* Philosophy — stacks to single column, text below image */
  .section-pd-philosophy { padding: var(--sp-7) 0; }
  .pd-philosophy-grid    { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pd-philosophy-heading { font-size: 2.0rem; margin-bottom: var(--sp-3); }
  .pd-philosophy-body    { font-size: 1.4rem; line-height: 1.5; }

  /* Collage — hide the right column (2 images), keep the left one full-width */
  .section-pd-collage { padding: var(--sp-6) 0; }
  .pd-collage-grid    {  gap:1.4rem; }
  /* .pd-collage-right   { display: none; } */
  /* .pd-collage-left    { aspect-ratio: 354 / 206; }  Figma mobile crop */

  /* Workshop & final — maintain their image aspects */
  .section-pd-workshop { padding: var(--sp-9) 0; }
  .pd-workshop-img     { aspect-ratio: 354 / 206; border-radius: 0.2rem; }

  .section-pd-details { padding: var(--sp-6) 0; }
  .pd-details-grid    { gap: var(--sp-3); }
  .pd-detail-img      { aspect-ratio: 171 / 200; border-radius: 0.2rem; }

  .section-pd-final { padding: var(--sp-6) 0 0 0; }
  .pd-final-img     { aspect-ratio: 402 / 281; }

  /* Back link */
  .section-pd-back { padding: var(--sp-6) 0; }
  .pd-back-link    { font-size: 1.3rem; }
}


/* ==================================================
   26n. REDUCED MOTION
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  .pd-carousel-track  { transition: none; }
  .pd-carousel-arrow  { transition: background 0.2s var(--ease-in-out); }
}


/* --------------------------------------------------
   26o. Image hover effects
   Subtle scale on hover — matches site-wide pattern
   (.project-card, .service-image-wrap, .leader-card, .award-link).
   Carousel slides are intentionally excluded — their interaction
   is swipe / arrow clicks, not hover; scaling during navigation
   would cause visual noise.
   Parents already have overflow:hidden except .pd-sketches-img,
   which we add here cumulatively (doesn't touch §26d).
   -------------------------------------------------- */

/* Missing overflow on the sketches wrapper — added cumulatively */
.pd-sketches-img { overflow: hidden; }

/* Baseline transition on every hoverable image */
.pd-sketches-img     img,
.pd-philosophy-media img,
.pd-collage-left     img,
.pd-collage-top      img,
.pd-collage-bottom   img,
.pd-workshop-img     img,
.pd-detail-img       img,
.pd-final-img        img {
  transition: transform 0.55s var(--ease-expo);
}

/* Scale on hover of the wrapping parent */
.pd-sketches-img:hover     img,
.pd-philosophy-media:hover img,
.pd-collage-left:hover     img,
.pd-collage-top:hover      img,
.pd-collage-bottom:hover   img,
.pd-workshop-img:hover     img,
.pd-detail-img:hover       img,
.pd-final-img:hover        img {
  transform: scale(1.04);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .pd-sketches-img     img,
  .pd-philosophy-media img,
  .pd-collage-left     img,
  .pd-collage-top      img,
  .pd-collage-bottom   img,
  .pd-workshop-img     img,
  .pd-detail-img       img,
  .pd-final-img        img { transition: none; }

  .pd-sketches-img:hover     img,
  .pd-philosophy-media:hover img,
  .pd-collage-left:hover     img,
  .pd-collage-top:hover      img,
  .pd-collage-bottom:hover   img,
  .pd-workshop-img:hover     img,
  .pd-detail-img:hover       img,
  .pd-final-img:hover        img { transform: none; }
}


/* --------------------------------------------------
   26p. Hero load animation
   The section's background-image is moved onto a pseudo-element
   so we can animate JUST the image (fade + subtle settle) without
   also animating the overlay or the mobile CTA's geometry.
   Triggered by JS adding .is-loaded (see initPdHeroEntrance).

   Initial state (no .is-loaded):  opacity 0, scale(1.06)
   Final state   (.is-loaded):     opacity 1, scale(1.0)
   The section keeps its background-color #141414 so the initial
   paint is solid dark, not a flash of white.
   -------------------------------------------------- */

/* Kill the inherited .section-hero background-image so only the
   animating pseudo-element paints the image. Overrides both the
   desktop and mobile rules in §09 / §19 (equal specificity, later
   in source wins — safe). */
.pd-hero {
  background-image: none;
}

.pd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;                         /* behind .hero-overlay (z:2) and .hero-content (z:3) */
  background-image: var(--hero-thumb, url('../video/Hero-desktop-thumb.jpg'));
  background-size: cover;
  background-position: center;
  opacity: 0;                         /* initial — hidden */
  transform: scale(1.06);             /* initial — slightly zoomed */
  transition: opacity   1.4s var(--ease-expo),
              transform 2.0s var(--ease-expo);
  will-change: opacity, transform;
}

.pd-hero.is-loaded::before {
  opacity: 1;
  transform: scale(1.0);
}

/* Mobile CTA — fades up 300ms after the image starts appearing */
.pd-hero .hero-cta-mobile {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity   0.8s var(--ease-expo) 0.3s,
              transform 0.8s var(--ease-expo) 0.3s;
}
.pd-hero.is-loaded .hero-cta-mobile {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile hero uses the mobile image */
@media (max-width: 768px) {
  .pd-hero::before {
    background-image: var(--hero-thumb-mobile, url('../video/Hero-mobile-thumb.jpg'));
  }
}

/* Reduced motion — show everything immediately, no transitions */
@media (prefers-reduced-motion: reduce) {
  .pd-hero::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pd-hero .hero-cta-mobile {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==================================================
   27. TD425 PROJECT DETAIL PAGE
   Page lives at  projects/td425-design.html
   Reuses the §26 .pd-* system. Only structural diffs from TD225
   live here. Philosophy / tag list / pillars / sketches / carousel /
   details / final / back / CTA are all unchanged from §26.

   Diffs from TD225:
     - Collage has an L-shape (2 top + 1 full-width bottom).
     - Philosophy section order swap is handled in HTML, no CSS diff.
     - No workshop section → no CSS diff (section simply omitted).
   ================================================== */


/* --------------------------------------------------
   27a. Collage — L-shape layout variant
   Modifier .pd-collage-grid--l overrides the §26g 2-col layout:

     ┌──────────┬──────────┐
     │   main   │   top    │   (top row, two 1:1.2 images)
     ├──────────┴──────────┤
     │       bottom        │   (full-width below, ~17:10)
     └─────────────────────┘

   .pd-collage-main is new (top-left slot).
   .pd-collage-top / .pd-collage-bottom are reused from §26g with
   different aspect ratios via modifier specificity.
   -------------------------------------------------- */
.pd-collage-main {
  overflow: hidden;
  border-radius: 0.4rem;
}

.pd-collage-grid--l {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "main top"
    "bottom bottom";
  gap: 1.4rem;
}
.pd-collage-grid--l .pd-collage-main   { grid-area: main;   aspect-ratio: 600 / 720;  }
.pd-collage-grid--l .pd-collage-top    { grid-area: top;    aspect-ratio: 600 / 720;  }
.pd-collage-grid--l .pd-collage-bottom { grid-area: bottom; aspect-ratio: 1240 / 720; }


/* --------------------------------------------------
   27b. Collage — mobile override for the L-shape variant
   The §25/§26 mobile block sets .pd-collage-grid to a single
   column and hides .pd-collage-right. TD425 has no -right
   element, so that display:none is a harmless no-op. We only
   need to re-establish the 2-col top row + full-width bottom
   at a higher specificity than the generic single-col rule.
   -------------------------------------------------- */
@media (max-width: 768px) {
  .pd-collage-grid--l {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "main top"
      "bottom bottom";
    gap: var(--sp-2);
  }
  .pd-collage-grid--l .pd-collage-main   { aspect-ratio: 172 / 206; }
  .pd-collage-grid--l .pd-collage-top    { aspect-ratio: 172 / 206; }
  .pd-collage-grid--l .pd-collage-bottom { aspect-ratio: 354 / 354; }
}


/* --------------------------------------------------
   27c. Collage — hover parity with §26g collage siblings
   .pd-collage-main shares the .rv-clip zoom-in-on-hover
   behaviour defined in §26p for .pd-collage-left / -top / -bottom.
   -------------------------------------------------- */
.pd-collage-main img {
  transition: transform 0.55s var(--ease-expo);
}
.pd-collage-main:hover img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .pd-collage-main        img { transition: none; }
  .pd-collage-main:hover  img { transform: none;  }
}


/* ==================================================
   28. ICS PROJECT DETAIL PAGE
   Page lives at  projects/ICS.html
   Namespace  :   project-detail  (shared with TD225/TD425)
   Body id    :   page-projects   (shared with TD225/TD425)
   Container  :   .pd-ics         (scopes ICS-only overrides)

   Reuses from §26 (.pd-* system):
     .section-hero.pd-hero    (hero fade+zoom via ::before)
     .section-pd-intro        (tag list + headline)
     .section-pd-pillars      (3-col → stacked)
     .section-pd-sketches     (full-bleed <picture> image)
     .section-pd-philosophy   (2-col image + text)
     .section-pd-back         (back link)

   New to §28:
     .section-pd-body-copy    (long 3-paragraph body text)
     .section-pd-quad         (2×2 grid → 4 stacked cards)
     .pd-ics .section-pd-pillars--ics  (faint blue gradient on mobile)
   ================================================== */


/* --------------------------------------------------
   28a. ICS Pillars — mobile backdrop + tinted dividers
   Figma mobile has a faint blue gradient behind the pillars
   and a blue-tinted bottom border. Desktop matches TD225 exactly
   (no extra treatment) so the rule is scoped to mobile only.
   -------------------------------------------------- */
.pd-ics .section-pd-pillars--ics {
  border-bottom-color: var(--clr-border-section);
}

@media (max-width: 768px) {
  .pd-ics .section-pd-pillars--ics {
    background-image:
      linear-gradient(to top,
                      rgba(0, 176, 255, 0.05) 0%,
                      rgba(0, 176, 255, 0)   100%);
  }

  /* Blue-tinted dividers between stacked pillars (overrides TD225 grey) */
  .pd-ics .section-pd-pillars--ics .pd-pillar,
  .pd-ics .section-pd-pillars--ics .pd-pillars-grid .pd-pillar:nth-child(3),
  .pd-ics .section-pd-pillars--ics .pd-pillars-grid .pd-pillar:last-child {
    border-bottom-color: var(--clr-border-section);
  }
  .pd-ics .section-pd-pillars--ics .pd-pillars-grid .pd-pillar:last-child {
    border-bottom: none;
  }
}


/* --------------------------------------------------
   28b. ICS Intro — mobile size bump
   Figma ICS mobile intro is 24px (vs TD225's 16px). Research-heavy
   pages need the headline to breathe more on small screens.
   Desktop size is already correct via inherited clamp() from §26c.
   -------------------------------------------------- */
@media (max-width: 768px) {
  .pd-ics .pd-intro-headline {
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
}


/* --------------------------------------------------
   28c. Body Copy — 3-paragraph research block
   Figma desktop: 30px / #444 / -0.5px tracking, 100px gutters.
   Mobile: 16px / #222, flush with container gutter.
   -------------------------------------------------- */
.section-pd-body-copy {
  padding: var(--sp-8) 0 var(--sp-9) 0;
  background: var(--clr-bg-white);
}
.pd-body-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.pd-body-copy p {
  font-size: clamp(1.8rem, 2.08vw, 3rem);  /* 30px @1440 */
  font-weight: 400;
  color: var(--clr-text-secondary);
  line-height: 1.35;
  letter-spacing: -0.015em;
}


/* --------------------------------------------------
   28d. Quad Grid — 2×2 card grid
   Each card: image on top, heading, body.
   Desktop: 2 columns, gap via sp tokens.
   Mobile: single column, tighter type.
   -------------------------------------------------- */
.section-pd-quad {
  padding: var(--sp-10) 0 var(--sp-9) 0;
  background: var(--clr-bg-white);
}

.pd-quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-5);
  row-gap: var(--sp-10);
}

.pd-quad-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pd-quad-card-media {
  display: block;
  overflow: hidden;                    /* clip-path fallback + hover zoom */
  aspect-ratio: 598 / 400;             /* desktop Figma ratio */
  background: var(--clr-bg-alt);       /* placeholder bg while loading */
}
.pd-quad-card-media picture,
.pd-quad-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-quad-card-media img {
  transition: transform 0.55s var(--ease-expo);
}
.pd-quad-card:hover .pd-quad-card-media img {
  transform: scale(1.03);
}

.pd-quad-card-title {
  display: block;
  font-size: clamp(2.0rem, 2.22vw, 3.2rem);  /* 32px @1440 */
  font-weight: 500;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pd-quad-card-body {
  font-size: clamp(1.4rem, 1.39vw, 2.0rem);  /* 20px @1440 — matches pd-pillar-body scale */
  font-weight: 400;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin: 0;
}
.pd-quad-card-body + .pd-quad-card-body {
  margin-top: calc(-1 * var(--sp-2));  /* tighter spacing between body paragraphs */
}


/* --------------------------------------------------
   28e. Responsive ≤1024px — ICS tablet tweaks
   -------------------------------------------------- */
@media (max-width: 1024px) {
  .section-pd-body-copy { padding: var(--sp-7) 0 var(--sp-8) 0; }
  .section-pd-quad      { padding: var(--sp-6) 0 var(--sp-8) 0; }
  .pd-quad-grid         { column-gap: var(--sp-5); row-gap: var(--sp-7); }
}


/* --------------------------------------------------
   28f. Responsive ≤768px — ICS mobile stack
   -------------------------------------------------- */
@media (max-width: 768px) {

  /* Body copy — tighter type, matches Figma 16px */
  .section-pd-body-copy { padding: var(--sp-6) 0 var(--sp-7) 0; }
  .pd-body-copy         { gap: var(--sp-4); }
  .pd-body-copy p {
    font-size: 1.6rem;
    line-height: 1.45;
    color: var(--clr-text-primary);
    letter-spacing: 0;
  }

  /* Quad grid — single column, mobile image ratio (354×184) */
  .section-pd-quad { padding: var(--sp-5) 0 var(--sp-7) 0; }
  .pd-quad-grid    { grid-template-columns: 1fr; row-gap: var(--sp-6); }
  .pd-quad-card    { gap: var(--sp-3); }

  .pd-quad-card-media { aspect-ratio: 354 / 184; }

  .pd-quad-card-title { font-size: 2.0rem; }
  .pd-quad-card-body  { font-size: 1.2rem; line-height: 1.5; }

  /* Hover zoom not useful on touch — disable to free GPU */
  .pd-quad-card:hover .pd-quad-card-media img { transform: none; }
}


/* --------------------------------------------------
   28g. Reduced motion — disable transitions on hover zoom
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-quad-card-media img                         { transition: none; }
  .pd-quad-card:hover .pd-quad-card-media img     { transform: none;  }
}


/* ==================================================
   29. CABIN X PROJECT DETAIL PAGE
   Page lives at  projects/cabin-x.html
   Namespace  :   project-detail   (shared with TD225/TD425/ICS)
   Body id    :   page-projects    (shared with TD225/TD425/ICS)
   Container  :   .pd-cabinx       (scopes Cabin X-only overrides)

   Reuses from §26 (.pd-* system):
     .section-hero.pd-hero    (hero fade+zoom via ::before)
     .section-pd-intro        (tag list + headline)
     .section-pd-pillars      (3-col → stacked)
     .section-pd-philosophy   (2-col image + text)
     .section-pd-back         (back link)
   Reuses from §28 (ICS):
     .section-pd-body-copy    (lead-paragraph block, 30px #444 @1440)

   New to §29:
     .section-pd-hud-effects       (overflowing ambient-glow image)
     .section-pd-fullbleed         (edge-to-edge media band with variants)
     .section-pd-feature           (heading + body content block)
     .section-pd-inset-media       (1240-wide inset image within gutter)
     .pd-media-caption             (caption label under a full-bleed item)
     .pd-philosophy-grid--cabinx   (580×300 image aspect override)
   ================================================== */


/* --------------------------------------------------
   29a. HUD Effects — overflowing ambient-glow image
   Figma: 1475-wide asset over a 1440-wide frame, creating a
   slight edge bleed that reads as atmospheric glow. The section
   centres the picture via flex and clips any overshoot so the
   page never develops horizontal scroll on narrower screens.
   rv (not rv-clip) so the glow fades in rather than wipes in —
   a clip-path animation would hard-crop the glow's halo.
   -------------------------------------------------- */
.section-pd-hud-effects {
  padding: var(--sp-8) 0 var(--sp-7) 0;
  background: var(--clr-bg-white);
  overflow: hidden;                    /* contain horizontal overflow */
  display: flex;
  justify-content: center;
}
.pd-hud-effects-img {
  display: block;
  width: 102.5%;                       /* matches 1475/1440 ratio */
  max-width: 147.5rem;                 /* caps at Figma source width */
  min-width: 100%;                     /* never shrinks below viewport */
  flex-shrink: 0;
}
.pd-hud-effects-img img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}


/* --------------------------------------------------
   29b. Philosophy — Cabin X aspect override
   Default §26f .pd-philosophy-media has no aspect ratio. Cabin X
   Figma shows the left image at 580×300, not a 1:1 or 4:3 crop,
   so we pin the aspect on the scoped modifier only.
   -------------------------------------------------- */
.pd-philosophy-grid--cabinx .pd-philosophy-media {
  aspect-ratio: 580 / 300;
}


/* --------------------------------------------------
   29c. Full-bleed media bands — shared base
   Edge-to-edge <picture> or <video>. Variants set aspect ratios
   matching Figma heights at 1440 viewport. object-fit:cover keeps
   the composition intentional at every breakpoint.
   -------------------------------------------------- */
.section-pd-fullbleed {
  /* padding: var(--sp-8) 0; */
  background: var(--clr-bg-white);
  position: relative;
}
.pd-fullbleed-img,
.pd-fullbleed-video {
  width: 100%;
  overflow: hidden;
  display: block;
}
.pd-fullbleed-img img,
.pd-fullbleed-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Video poster via CSS background — responsive across breakpoints.
   The <video> element has no `poster` attribute (single URL only),
   so we paint the poster behind the video instead. Once the video
   starts (autoplay muted), its frames cover the background. The
   inline style on each .section-pd-fullbleed--video supplies
   --video-poster-desktop and, optionally, --video-poster-mobile. */
.pd-fullbleed-video {
  background-color: var(--clr-bg-hero);           /* dark fallback — no white flash */
  background-image: var(--video-poster-desktop);
  background-size: cover;
  background-position: center;
}

/* Aspect-ratio variants — keyed to Figma slot heights */
.section-pd-fullbleed--tall  .pd-fullbleed-img   { aspect-ratio: 1440 / 1030; }
.section-pd-fullbleed--exp   .pd-fullbleed-img   { aspect-ratio: 1440 /  800; }
.section-pd-fullbleed--band  .pd-fullbleed-img   { aspect-ratio: 1440 /  300; }
.section-pd-fullbleed--large .pd-fullbleed-img   { aspect-ratio: 1440 /  720; }
.section-pd-fullbleed--video .pd-fullbleed-video { aspect-ratio: 1440 /  720; }

/* Hover zoom — parity with §26o site-wide image system */
.pd-fullbleed-img img {
  transition: transform 0.55s var(--ease-expo);
}
.pd-fullbleed-img:hover img {
  transform: scale(1.03);
}


/* --------------------------------------------------
   29d. Media caption — "Widget Swap GIF" label
   Centred below the GIF variant. Uses heading-scale type so it
   reads as a soft title, not a caption footnote.
   -------------------------------------------------- */
.pd-media-caption {
  font-size: clamp(1.8rem, 2.22vw, 3.2rem);  /* 32px @1440 */
  font-weight: 400;
  color: var(--clr-text-primary);
  line-height: 1.2;
  text-align: center;
  margin: var(--sp-5) 0 0 0;
}


/* --------------------------------------------------
   29e. Feature pair — REMOVED in v2.2.
   The original two-up detail-image strip was replaced in Figma
   by a single full-bleed steering-wheel annotation composite
   (see .section-pd-fullbleed--exp in §29c). Slot kept empty so
   downstream letter anchors stay stable.
   -------------------------------------------------- */


/* --------------------------------------------------
   29f. Feature block — heading + body content slab
   Full container-width text block (no narrow readability cap).
   Figma positions these at 1240 wide with 100px gutters.
   Used by HorizonHUD / Visual Design Language / UNITY HMI.
   -------------------------------------------------- */
.section-pd-feature {
  padding: var(--sp-8) 0;
  background: var(--clr-bg-white);
}
.pd-feature-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.pd-feature-heading {
  display: block;
  font-size: clamp(2.4rem, 2.22vw, 3.2rem);  /* 32px @1440 */
  font-weight: 500;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.pd-feature-body {
  font-size: clamp(1.4rem, 1.39vw, 2.0rem);  /* 20px @1440 */
  font-weight: 400;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin: 0;
}


/* --------------------------------------------------
   29g. Inset media — 1240-wide image inside container gutter
   Used for the Lumenaura composite (Figma 1240×700).
   -------------------------------------------------- */
.section-pd-inset-media {
  padding: var(--sp-6) 0 var(--sp-8) 0;
  background: var(--clr-bg-white);
}
.pd-inset-media-img {
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 1240 / 700;
}
.pd-inset-media-img picture,
.pd-inset-media-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-inset-media-img img {
  transition: transform 0.55s var(--ease-expo);
}
.pd-inset-media-img:hover img {
  transform: scale(1.03);
}


/* --------------------------------------------------
   29h. Responsive ≤1024px — Cabin X tablet tweaks
   Dial down section padding and feature-text gaps to keep
   vertical rhythm at narrower widths.
   -------------------------------------------------- */
@media (max-width: 1024px) {
  .section-pd-hud-effects  { padding: var(--sp-7) 0 var(--sp-6) 0; }
  .section-pd-feature      { padding: var(--sp-7) 0; }
  .section-pd-inset-media  { padding: var(--sp-5) 0 var(--sp-7) 0; }
  .section-pd-fullbleed    { padding: var(--sp-7) 0; }
  .pd-feature-text         { gap: var(--sp-4); }
}


/* --------------------------------------------------
   29i. Responsive ≤768px — Cabin X mobile
   Mirrors the Figma 402px frame. Key changes:
     - Faint blue gradient behind pillars (like ICS §28a)
     - Intro / pillar / feature type scale bumped per Figma mobile
     - Full-bleed aspect ratios re-keyed to mobile crops
     - HUD-effects image no longer overflows (uses 100% width)
   -------------------------------------------------- */
@media (max-width: 768px) {

  /* Pillars — faint blue gradient backdrop, blue-tinted dividers */
  .pd-cabinx .section-pd-pillars {
    background-image:
      linear-gradient(to top,
                      rgba(0, 176, 255, 0.05) 0%,
                      rgba(0, 176, 255, 0)   100%);
    border-bottom-color: var(--clr-border-section);
  }
  .pd-cabinx .section-pd-pillars .pd-pillar,
  .pd-cabinx .section-pd-pillars .pd-pillars-grid .pd-pillar:nth-child(3),
  .pd-cabinx .section-pd-pillars .pd-pillars-grid .pd-pillar:last-child {
    border-bottom-color: var(--clr-border-section);
  }
  .pd-cabinx .section-pd-pillars .pd-pillars-grid .pd-pillar:last-child {
    border-bottom: none;
  }

  /* Intro headline — Cabin X mobile Figma is 24px (vs TD225's 16px) */
  .pd-cabinx .pd-intro-headline {
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  /* Pillars mobile type — Cabin X uses 24px medium titles + 12px body,
     heavier than TD225's 18px semibold */
  .pd-cabinx .pd-pillar-subtitle {
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--clr-text-primary);
    margin-bottom: var(--sp-3);
  }
  .pd-cabinx .pd-pillar-body {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  /* HUD effects — reset to 100% width on mobile (no overflow) */
  .section-pd-hud-effects { padding: var(--sp-6) 0; }
  .pd-hud-effects-img     { width: 100%; max-width: 100%; }

  /* Philosophy — Cabin X mobile is semi-bold uppercase 24px heading */
  .pd-cabinx .pd-philosophy-heading {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .pd-cabinx .pd-philosophy-body {
    font-size: 1.2rem;
    line-height: 1.45;
  }
  .pd-philosophy-grid--cabinx .pd-philosophy-media {
    aspect-ratio: 354 / 185;
  }

  /* Feature block — tighter type (20px heading, 12px body) */
  .section-pd-feature { padding: var(--sp-6) 0; }
  .pd-feature-text    { gap: var(--sp-2); }
  .pd-feature-heading {
    font-size: 2.0rem;
    letter-spacing: -0.01em;
  }
  .pd-feature-body {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  /* Inset media */
  .section-pd-inset-media { padding: var(--sp-4) 0 var(--sp-6) 0; }
  .pd-inset-media-img     { border-radius: 0.2rem; }

  /* Full-bleed aspect ratios — keyed to Figma mobile crops (402 wide) */
  .section-pd-fullbleed                              { padding: var(--sp-6) 0; }
  .section-pd-fullbleed--tall  .pd-fullbleed-img     { aspect-ratio: 402 / 288; }
  .section-pd-fullbleed--exp   .pd-fullbleed-img     { aspect-ratio: 402 / 299; }
  .section-pd-fullbleed--band  .pd-fullbleed-img     { aspect-ratio: 402 /  73; }
  .section-pd-fullbleed--large .pd-fullbleed-img     { aspect-ratio: 402 / 226; }
  .section-pd-fullbleed--video .pd-fullbleed-video   { aspect-ratio: 402 / 201; }

  /* Responsive video poster — use mobile var if section provides one,
     else fall back to the desktop poster. Widget-swap supplies only
     --video-poster-desktop; UNITY HMI supplies both. */
  .pd-fullbleed-video {
    background-image: var(--video-poster-mobile, var(--video-poster-desktop));
  }

  /* Caption — mobile */
  .pd-media-caption { font-size: 1.4rem; margin-top: var(--sp-3); }

  /* Disable hover zoom on touch devices — free GPU */
  .pd-fullbleed-img:hover    img,
  .pd-inset-media-img:hover  img { transform: none; }
}


/* --------------------------------------------------
   29j. Reduced motion — disable all transform transitions
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-fullbleed-img    img,
  .pd-inset-media-img  img { transition: none; }

  .pd-fullbleed-img:hover    img,
  .pd-inset-media-img:hover  img { transform: none; }
}


/* ==================================================
   30. LARGE-DESKTOP SCALING — iMac 5K, QHD, 4K, ultrawide
   --------------------------------------------------
   Default :root targets ~1440px displays with
   --max-w: 128rem and --gutter: 10rem. Because every
   layout component (.container, #main-nav, .hero-content,
   and every section's inner padding) consumes these two
   tokens, overriding them at larger min-widths uniformly
   stretches every page — no component CSS needs touching.

   Readability caps left intentionally unscaled:
     .services-intro-body / .projects-intro-body at 100rem
     are paragraph measure/line-length limits, not layout
     containers. Running body copy to 2000px+ on an iMac
     would hurt readability.
   ================================================== */

/* 1440px+  — standard 27" monitors at native res; gentle cap bump */
@media (min-width: 1440px) {
  :root {
    --max-w:  140rem;   /* 1400px */
    --gutter: 10rem;    /* unchanged */
  }
}

/* 1600px+  — unlock the cap; container becomes fluid (viewport − gutters) */
@media (min-width: 1600px) {
  :root {
    --max-w:  100%;     /* no upper bound; padding is the only constraint */
    --gutter: 10rem;
  }
}

/* 1920px+  — Full HD and up; widen gutter to keep visual proportion */
@media (min-width: 1920px) {
  :root {
    --gutter: 12rem;    /* 120px */
  }
}

/* 2400px+  — iMac 5K (2560 logical), QHD+, 4K, ultrawide */
@media (min-width: 2400px) {
  :root {
    --gutter: 14rem;    /* 140px */
  }
}


/* ==================================================
   29. ONE-COCKPIT (LAST MILE MOBILITY) — NDA PAGE

   Typography-only project page for an NDA-bound project.
   No hero image, no project body, no quad cards, no
   CTA strip — just a single tall centered section that
   explains the NDA and offers a way to get in touch.
   Scoped via .pd-nda parent on the barba container.
   Uses the same brand language as other project pages.
   ================================================== */

.section-pd-nda-hero {
  min-height: calc(100vh - 12rem);   /* fills viewport minus nav, like a hero */
  padding: var(--sp-9) 0;
  background: var(--clr-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-nda-inner {
  text-align: center;
  max-width: 88rem;                  /* readable measure for centered copy */
}

.pd-nda-eyebrow {
  margin-bottom: var(--sp-6);
}

.pd-nda-headline-wrap {
  overflow: hidden;                  /* rv-line child-wipe clipping */
  margin-bottom: var(--sp-7);
}

.pd-nda-headline {
  font-size: var(--fs-h2);           /* 64px @ 1440 — same scale as cta-headline */
  font-weight: 500;
  color: var(--clr-text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.pd-nda-body {
  margin: 0 auto var(--sp-7) auto;
  max-width: 64rem;
}

.pd-nda-body p {
  font-size: var(--fs-body-lg);      /* 18px @ 1440 */
  font-weight: 400;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--sp-4) 0;
}

.pd-nda-body p:last-child { margin-bottom: 0; }

.pd-nda-email {
  color: var(--clr-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  transition: color 0.2s var(--ease-in-out);
}

.pd-nda-email:hover { color: var(--clr-accent); }

.pd-nda-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
}


/* --------------------------------------------------
   29a. NDA PAGE — Tablet (≤1024px)
   -------------------------------------------------- */
@media (max-width: 1024px) {
  .section-pd-nda-hero {
    min-height: calc(100vh - 10rem);
    padding: var(--sp-8) 0;
  }
  .pd-nda-headline-wrap { margin-bottom: var(--sp-6); }
  .pd-nda-body          { margin-bottom: var(--sp-6); }
}


/* --------------------------------------------------
   29b. NDA PAGE — Mobile (≤768px)
   -------------------------------------------------- */
@media (max-width: 768px) {
  .section-pd-nda-hero {
    min-height: calc(100svh - 8rem);
    padding: var(--sp-7) 0;
  }
  .pd-nda-inner    { text-align: left; }
  .pd-nda-eyebrow  { margin-bottom: var(--sp-5); }
  .pd-nda-headline {
    font-size: clamp(3.2rem, 9vw, 4.8rem);
    line-height: 1.15;
  }
  .pd-nda-body p   { font-size: 1.5rem; line-height: 1.65; }
  .pd-nda-actions  { justify-content: flex-start; gap: var(--sp-3); }
  .pd-nda-actions .btn-primary,
  .pd-nda-actions .btn-secondary { width: 100%; text-align: center; }
}


/* --------------------------------------------------
   29c. NDA PAGE — Small mobile (≤480px)
   -------------------------------------------------- */
@media (max-width: 480px) {
  .pd-nda-headline { font-size: 3.2rem; }
}
/* === Adaptive nav link color (mix-blend-mode) === */
#main-nav.over-hero .nav-links a {
  color: #fff;
  mix-blend-mode: difference;
}
#main-nav.over-hero .nav-links a::after {
  background: #fff;
  mix-blend-mode: difference;
}