/* ============================================================
   LOGIC CONTROL GROUP — CSS INDEX
   ============================================================

   1. GLOBAL & RESET
      - Fonts, Variables, Utilities
      - Base Layout (HTML/Body)
      - Typography System (Swiss Style)

   2. ANIMATIONS & EFFECTS
      - Keyframes
      - Type Reveal System
      - Page Transitions (Wipes/Fades)

   3. HEADER & NAVIGATION
      - Site Header
      - Logo & SVG Animation
      - Main Navigation (Desktop/Icon)
      - Navigation Overlay (Mobile/Burger)

   4. PAGE SECTIONS (Backgrounds & Layout)
      - Hero / Spectrum Veil
      - Image Panel Config (Mindset, Wellbeing, etc.)
      - Intro Section
      - Contact Section

   5. FOOTER
      - Site Footer Styles

   6. RESPONSIVE UTILITIES
      - Mobile Breakpoints (768px, 480px, etc.)
      - Height-based Adjustments

   ============================================================ */


/* =========================================
   GLOBAL — FONT: Solanel
   ========================================= */
@font-face {
  font-family: "Solanel";
  src: url("../fonts/Solanel-Regular.woff2") format("woff2"),
    url("../fonts/Solanel-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  /*
   * optional: browser has 100ms to load the font.
   * If it loads in time (always true once cached): renders with Solanel, no swap.
   * If it misses (first visit, slow network): uses fallback, NO late swap ever.
   * This eliminates the "correct size → jumps larger" flash entirely.
   */
  font-display: optional;
}

/* =========================================
   GLOBAL — ROOT VARIABLES / BRAND COLOURS
   ========================================= */
:root {
  --lcg-bg: #f6f5f2;
  --lcg-panel: #faf9f7;
  --lcg-accent: #1044ff;
  --lcg-text: #1a1a1a;
  --lcg-muted: #bfbfbf;
  --lcg-pink: #ff1baa;

  /* =========================================
     CIRCADIAN RHYTHM — FULL DAY CYCLE
     (Realistic: Sunrise → High Noon → Blue Hour)
     ========================================= */
  --circadian-1: #FFD2A6;
  /* Sunrise: Warm Golden Peach */
  --circadian-2: #FFF3E0;
  /* Morning: Energetic Warm White */
  --circadian-3: #F5F9FA;
  /* Midday: Crisp Neutral White */
  --circadian-4: #E3F2FD;
  /* Afternoon: Cooling Blue Tint */
  --circadian-5: #BBDEFB;
  /* Twilight: Soft Calming Blue */
  --circadian-6: #90CAF9;
  /* Blue Hour: Cool Blue (Not Grey) */
}

/* =========================================
   GLOBAL — BASIC UTILITY COLOURS
   ========================================= */
.pink {
  color: var(--lcg-pink);
}

.white {
  color: #f6f5f2 !important;
}

/* Standard grey text for list/body */
.grey {
  color: #8a8a8a !important;
}

.white-shadow {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.blue {
  color: var(--lcg-accent);
}

.theme-hero-white {
  color: #ffffff !important;
}

.black {
  color: #000000 !important;
}

.panel-col-left a.white:hover,
.panel-col-left a:hover .white {
  color: var(--lcg-pink) !important;
}

/* =========================================
   GLOBAL — RESET / BASE
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =========================================
   LENIS SMOOTH SCROLL (Recommended CSS)
   ========================================= */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* scroll-behavior smooth is intentionally NOT set here.
     Lenis handles ALL smooth scrolling — having both causes the browser
     and Lenis to fight each other, producing jumps and snapping to top. */
  scroll-behavior: auto;
  overflow-x: hidden;
  /* Prevent iOS Safari from dynamically scaling text sizes to be "more readable" in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  scrollbar-gutter: stable;
  overflow-y: scroll !important;
}

body {
  font-family: "Solanel", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--lcg-bg);
  color: var(--lcg-text);
}




/* =========================================
   GLOBAL — TYPOGRAPHY (Swiss Style)
   ========================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.8em;
  font-weight: 400;
  line-height: 1.15;
  /* Tight leading for headers */
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
  /* Tighter for large text */
}

h4,
h5,
h6 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Air out small caps */
  font-size: 0.85rem;
  /* Micro-typography */
  line-height: 1.4;
}

h1,
h2 {
  color: #000000;
}

h3 {
  color: #f6f5f2 !important;
}

h1,
h2 {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0;
}

h1.feature-statement, h2.feature-statement {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h4 {
  font-size: 0.8rem;
  /* Returned to micro-label size */
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #1a1a1a !important;
  opacity: 0.8;
}

p {
  margin: 0 0 1.5rem;
  line-height: 1.55;
  font-size: 1.05rem;
  /* Standard readable size */
  letter-spacing: -0.01em;
  color: var(--lcg-text);
  max-width: 50ch;
}

@media (max-width: 768px) {
  p {
    max-width: 100%;
  }
}

/* FIX: Ensure text is visible for Missing Sections */
/* Horizontal panels handled by JS containerAnimation, but these vertical ones need help */
.panel--beliefs .type-reveal-line,
.panel--ourstory .type-reveal-line,
#what-we-believe .type-reveal-line {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* Body text block containers — font-size/line-height set here so ALL children
   (grey spans, inline pink spans, etc.) inherit consistently, preventing
   uneven line-box heights caused by inline spans having differing sizes. */
.content-body,
.believe-body {
  font-size: 1.05rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--lcg-text);
}

/* Only colour-utility spans get an explicit size if they're used outside
   a body container (e.g. contact details). Do NOT set line-height here
   because that breaks inline rendering inside body text blocks. */
.panel__inner span:not(.type-reveal-line):not(.scroll-highlight):not(.pink):not(.grey):not(.blue):not(.black):not(.white):not(h2 span),
.introduction-body span:not(.type-reveal-line):not(.scroll-highlight):not(.pink):not(.grey):not(.blue):not(.black):not(.white):not(h2 span) {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--lcg-pink);
}

/* --- TYPOGRAPHIC REVEAL ANIMATION --- 
   The "Won Jyou" Style Masked Reveal */
.type-reveal-mask {
  overflow: hidden;
  /* Clips the sliding text */
  display: block;
  /* or inline-block based on context */
  position: relative;
}

.type-reveal-line {
  display: block;
  transform: translateY(110%);
  /* Start hidden below */
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
  will-change: transform, opacity;
}

.type-reveal-line.is-visible {
  transform: translateY(0%);
  opacity: 1;
}


/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineDrawIn {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* =========================================
   HEADER / LOGO / NAVIGATION
   ========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 2rem 5vw 2rem;
  background: transparent;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-bottom: none;
  z-index: 2001;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  /* Harken: Stability fixes for flickering */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, transform;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Solanel";
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.6rem 0.6rem;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 0;
  color: var(--lcg-text);
  position: relative;
  overflow: visible;
}

/* LCG text fades in AFTER box draw */
.logo-text {
  opacity: 0;
  transition: opacity 600ms ease;
}

.logo-mark.show-text .logo-text {
  opacity: 1;
}

/* --- Logo border draw (clockwise) --- */
.logo-mark {
  border-color: transparent;
  /* keep spacing, but let the stroke be the box */
}

.logo-mark .logo-stroke {
  position: absolute;
  inset: 0;
  /* EXACTLY matches the logo box */
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Shared path styles */
.logo-mark .logo-stroke path {
  fill: none;
  stroke: var(--lcg-text);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--lcg-box-dur, 2800ms) linear;
}

/* Base Path: Draws on load (White/Black) */
.logo-mark.animate-box .logo-stroke .base-path {
  stroke-dashoffset: 0;
}

/* Hover Path: Pink, draws on hover */
.logo-mark .logo-stroke .hover-path {
  stroke: var(--lcg-pink);
  stroke-dashoffset: 1;
  /* Always hidden initially */
  transition: stroke-dashoffset 0.6s ease;
  /* Faster hover draw */
}

/* Trigger hover draw */
.logo-mark:hover .logo-stroke .hover-path {
  stroke-dashoffset: 0;
}

/* Animated border lines */
.logo-mark::before,
.logo-mark::after {
  display: none !important;
  content: '';
  position: absolute;
  background: var(--lcg-pink);
  transition: transform 0.4s ease-out;
  transform: scale(0);
}

/* Top border */
.logo-mark::before {
  top: -4px;
  left: -4px;
  right: -4px;
  height: 2px;
  transform-origin: left;
}

/* Bottom border */
.logo-mark::after {
  bottom: -4px;
  left: -4px;
  right: -4px;
  height: 2px;
  transform-origin: right;
}

.logo-mark:hover::before {
  transform: scaleX(1);
  transition-delay: 0s;
}

.logo-mark:hover::after {
  transform: scaleX(1);
  transition-delay: 0.3s;
}

/* =========================================
   HEADER — DEFAULT COLOUR (Blue)
   Blue on all pages except dark-bg sections (white).
   ========================================= */
.logo-home-link {
  text-decoration: none;
  color: var(--lcg-accent);
  transition: color 0.4s ease;
}

.logo-home-link:hover {
  color: var(--lcg-pink);
}

.logo-mark {
  color: var(--lcg-accent);
}

.logo-mark .logo-stroke path {
  stroke: var(--lcg-accent);
}

.logo-extension-line {
  background: var(--lcg-accent);
}

.nav-toggle span {
  background: var(--lcg-accent) !important;
}

/* =========================================
   HEADER — WHITE MODE
   Applied during hero splash animation (dark amber background)
   and when scrolled into Sustainability / Benefits dark sections.
   ========================================= */
body:not(.site-entered) .logo-home-link,
body.header--on-dark .logo-home-link {
  color: #ffffff;
}

body:not(.site-entered) .logo-mark,
body.header--on-dark .logo-mark {
  color: #ffffff;
}

body:not(.site-entered) .logo-mark .logo-stroke path,
body.header--on-dark .logo-mark .logo-stroke path {
  stroke: #ffffff;
}

body:not(.site-entered) .logo-extension-line,
body.header--on-dark .logo-extension-line {
  background: #ffffff;
}

body:not(.site-entered) .nav-toggle span,
body.header--on-dark .nav-toggle span {
  background: #ffffff !important;
}

body.header--on-dark .logo-home-link:hover {
  color: var(--lcg-pink);
}



.logo-with-line {
  position: relative;
  z-index: 30;

  display: flex;
  align-items: center;
  flex-grow: 1;
  /* Allow container to fill space so line can grow */

  /* IMPORTANT: lets the line occupy the space between logo and nav */
  flex: 1;
  min-width: 0;
}




.logo-extension-line {
  display: block;
  /* IMPORTANT: gives the span real box dimensions */
  height: 2px;
  background: var(--lcg-accent);

  flex-grow: 1;
  margin-left: -2px;
  margin-right: 2rem;

  pointer-events: none;
  transform-origin: left;

  max-width: 0px;
  /* JS animates this */
  opacity: 0;
  /* JS sets to 1 when it starts */
  overflow: hidden;
}


.main-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* Align burger vertically */
}

/* -----------------------------------------------------------------------------
   3. NAVIGATION OVERLAY (Defiant.vc Style List)
   ----------------------------------------------------------------------------- */
.nav-links {
  position: fixed;
  inset: 0;
  height: 100vh;
  width: 100vw;

  /* STACK VERTICALLY */
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Align to RIGHT half of screen (approx 50%), but stop short on right to match logo line */
  padding: 0 10vw 0 55vw;

  /* Clean Light Overlay */
  background: var(--lcg-bg);
  z-index: 2000;
  list-style: none;
  margin: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  /* Start above */

  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 1200ms;

  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}


.nav-links.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  /* Slide down */

  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* --- NAV ITEM STAGGER --- */
.nav-links li {
  width: 100%;
  /* Thin blue separator line matching site aesthetic */
  border-bottom: 1px solid var(--lcg-accent);

  overflow: hidden;
  padding: 0;
  /* Remove padding from LI, handle in A or flex container */
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav-links>li>a {
  padding: 0.8rem 0;
  /* Original padding */
}

.nav-links a {
  display: block;
  position: relative;
  color: #000;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  text-decoration: none;
  font-size: 1.05rem !important;
  /* Match grey body text size */
  font-weight: 400;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* SUB MENU (Accordion) */
.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  /* Slower reveal for a more premium, less jumpy feel */
  transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(0, 0, 0, 0.02);
  /* Slight tint for area? Or clean */
  background: transparent;
}

.sub-menu li {
  border-bottom: none;
  /* No separators for sub items */
  padding: 0;
}

.sub-menu a {
  padding: 0.5rem 0 0.5rem 1.5rem;
  /* Indent */
  font-size: 0.95rem !important;
  /* Slightly smaller than main */
  color: #555;
  /* Slightly lighter/greyer */
  opacity: 1;
  /* Always visible IF parent is open */
  transform: none;
  text-transform: capitalize;
}

/* Expanded State (Class or Hover) */
.has-children.is-expanded .sub-menu,
.has-children:hover .sub-menu {
  max-height: 500px;
  /* Allow enough room for sub-pages */
  padding-bottom: 0.8rem;
}


/* Ensure link stays dark when active */
.has-children.is-expanded>a,
.has-children:hover>a {
  color: var(--lcg-pink);
}



.nav-links.is-open a {
  opacity: 1;
  transform: translateY(0);
}

.nav-links.is-open li:nth-child(1) a {
  transition-delay: 0.10s;
}

/* Active State for Current Page */
.nav-links a.active {
  color: var(--lcg-accent) !important;
}

.sub-menu a.active {
  color: var(--lcg-accent) !important;
  font-weight: 500;
}

.nav-links.is-open li:nth-child(2) a {
  transition-delay: 0.15s;
}

.nav-links.is-open li:nth-child(3) a {
  transition-delay: 0.20s;
}

.nav-links.is-open li:nth-child(4) a {
  transition-delay: 0.25s;
}

.nav-links.is-open li:nth-child(5) a {
  transition-delay: 0.30s;
}

.nav-links.is-open li:nth-child(6) a {
  transition-delay: 0.35s;
}

.nav-links.is-open li:nth-child(7) a {
  transition-delay: 0.40s;
}

.nav-links.is-open li:nth-child(8) a {
  transition-delay: 0.45s;
}

.nav-links.is-open li:nth-child(9) a {
  transition-delay: 0.50s;
}

.nav-links.is-open li:nth-child(10) a {
  transition-delay: 0.55s;
}


/* REMOVE Header Flash/Box when menu is open */
body.nav-open .site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  z-index: 2001;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}





/* Ensure burger is visible (Blue) on LIGHT overlay */
.nav-toggle.is-open span {
  background: #000 !important;
}

body.nav-open .nav-toggle {
  z-index: 2002 !important;
}


/* Intro – right column body text should read like an H2 */
#introduction .intro-body span {
  font-size: clamp(1.6rem, 3vw, 1.8rem);
  line-height: 1.45;
}


/* Mobile Only Items (Now Global) */
.mobile-only {
  display: block;
}

.mobile-subnav-divider {
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
}

.nav-links.is-open {
  display: flex;
  opacity: 1;
  /* Ensure visible */
  pointer-events: auto;
}

/* Removed desktop nav styles to enforce burger menu globally */
.services-subnav ul {
  justify-content: flex-end;
}

.nav-links a {
  position: relative;
  color: #000;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  text-decoration: none;
  font-size: 1.5rem;
  /* Reduced from 3rem to match Defiant.vc clean stack */
  font-weight: 400;
  /* Slightly heavier for legibility at smaller size */
  line-height: 1.4;
  opacity: 1;
  /* Ensure visible */
}

.nav-links a::after {
  content: none;
}

.nav-links a:hover {
  color: var(--lcg-pink);
}

.nav-links a:active,
.nav-links a.active-link {
  color: var(--lcg-text);
}

.contact-link {
  text-decoration: none;
  color: var(--lcg-text);
  transition: color 0.3s ease;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.contact-link:hover {
  color: var(--lcg-pink);
}

.contact-link:active {
  color: var(--lcg-accent);
}

/* Phone number links in contact section */
.contact-phone {
  display: inline-block;
  color: var(--lcg-text);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.contact-phone:hover {
  color: var(--lcg-pink);
}

.nav-toggle {
  position: relative;
  z-index: 40;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;

  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}


.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--lcg-accent) !important;
  border-radius: 0;
  /* Premium Snappy Transition */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* --- NAV OPEN STATE OVERRIDES --- */
/* Burger icon color state when open */
body.nav-open .nav-toggle span {
  background: #000 !important;
}

.nav-links.is-open {
  display: flex;
}

/* =========================================
   SERVICES SUB NAV (desktop only)
   ========================================= */
.services-subnav {
  position: absolute;
  right: 5vw;
  bottom: 1.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: none !important;
}

.services-subnav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.services-subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
}


.services-subnav li {
  margin: 0;
  padding: 0;
}

.services-subnav a {
  position: relative;
  color: #000;
  text-transform: none;
  letter-spacing: 0.12em;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
}

.services-subnav a:hover {
  color: var(--lcg-pink);
}

.services-subnav a.active-subnav {
  color: var(--lcg-accent);
}

/* =========================================
   MAIN WRAPPER
   ========================================= */
main {
  margin-top: 64px;
}

/* =========================================
   PANEL / SECTION LAYOUT (shared)
   ========================================= */
.panel-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: flex-start;
  padding-top: 2rem;
}

.panel-col-left p,
.panel-col-right p {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lcg-text);
  max-width: 35rem;
}

.panel-col-right a,
.panel-col-left a {
  text-decoration: none;
  color: inherit;
}

.panel {
  height: 100vh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  /* Use column to ensure vertical stacking control */
  justify-content: flex-start;
  /* alignment from top ensures stable rule line position */
  align-items: center;
  /* Center the inner container horizontally */
  padding: 0;
  /* Remove side padding from wrapper handled by inner */
}

.panel__inner {
  width: 100%;
  max-width: 100%;
  /* Ensure full width */

  /* ALIGNMENT FIX: Matches Header (5vw) + Logo Padding (0.6rem) -> Aligns with 'L' */
  padding-left: calc(5vw + 0.6rem) !important;
  padding-right: 5vw !important;

  box-sizing: border-box;
  padding-top: 10vh;
  /* Reduced from 30vh for vertical centering */
}

/* =========================================
   INTRODUCTION + SUB PAGES BASE
   ========================================= */
.panel--introduction {
  position: relative;
  color: var(--lcg-text);
  overflow: hidden;
  background: var(--lcg-bg);
}

/* =========================================
   WHAT WE BELIEVE — SPECIFIC LAYOUT
   Title top-left, feature below, body bottom-left
   ========================================= */

/* Override the panel's centering so the inner can fill full height */
#what-we-believe {
  justify-content: flex-start;
  align-items: stretch;
  background: var(--lcg-bg);
}

#introduction.panel {
  justify-content: center;
  align-items: center;
  background: transparent;
  opacity: 0 !important;
  pointer-events: none;
}

#introduction.panel.is-ready {
  opacity: 1 !important;
  pointer-events: auto;
}

#privacy-policy.panel {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  padding-bottom: 6rem;
}

.panel__inner--believe {
  /* Fill the full panel height so body text sits below the rule */
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 28vh;
  padding-bottom: 3rem;
  position: relative;
}

#introduction .panel__inner--believe {
  padding-top: 0;
  flex: 0 0 auto;
}

#introduction .section-rule__line {
  background: #000;
}

#introduction .swiss-grid--believe {
  flex: 0 0 auto;
}

.swiss-grid--believe {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  row-gap: 0 !important;
  grid-template-rows: auto auto auto;
  align-items: start;
  align-content: start;
  width: 100%;
}


.believe-title h2 {
  margin-bottom: 0;
  white-space: nowrap;
}

#introduction .believe-title h2 {
  white-space: nowrap;
}

/* Feature: auto-placed into row alongside body (row 3 after rule) */
.believe-feature {
  grid-column: 1 / span 6;
  padding-top: 0;
}

.believe-feature .feature-statement {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.believe-body {
  grid-column: 9 / span 4;
  padding-top: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.believe-body.is-revealed {
  opacity: 1;
}

/* Rule: spans all 12 cols — auto-placement forces it to its own row */
.section-rule-row {
  grid-column: 1 / -1;
  padding: 0;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.section-rule {
  width: 100%;
  height: 1px;
  overflow: hidden;
}

.section-rule__line {
  width: 100%;
  height: 100%;
  background: var(--lcg-accent);
  transform: scaleX(0);
  transform-origin: left center;
  /* Duration and easing updated in JS to match black line speed */
  transition: transform 1.5s linear;
}

.section-rule__line.is-drawn {
  transform: scaleX(1);
}

/* =========================================
   CONTENT PAGES — SHARED LAYOUT
   (What We Do, Residential, Hospitality,
    Commercial, Maintenance, Compliance)
   Same pattern: title top-left, feature tight
   below, body text bottom-right.
   ========================================= */
.swiss-grid--content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  row-gap: 0 !important;
  grid-template-rows: auto auto auto;
  align-items: start;
  align-content: start;
  width: 100%;
  height: 100%;
}


.content-title h2 {
  margin-bottom: 0;
  white-space: nowrap;
}

/* Feature: auto-placed into row alongside body */
.content-feature {
  grid-column: 1 / span 6;
  padding-top: 0;
}

.content-feature .feature-statement {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.content-body {
  grid-column: 9 / span 4;
  padding-top: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.content-body.is-revealed {
  opacity: 1;
}

/* =========================================
   CIRCADIAN WRAPPER (continuous gradient across 5 subpages)
   ========================================= */
.circadian-wrapper {
  position: relative;
  background: linear-gradient(to bottom,


      var(--circadian-1) 0%,
      var(--circadian-2) 25%,
      var(--circadian-3) 50%,
      var(--circadian-4) 75%,
      var(--circadian-5) 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  /* key fix */
  background-size: 100% 100%;
}

.panel--circadian {
  background: transparent !important;
}

.circadian-wrapper .panel {
  position: relative;
}

/* =========================================
   IMAGE PANEL BASE (shared)
   ========================================= */
.panel--image {
  position: relative;
  color: #ffffff;
  overflow: hidden;
}

/* =========================================
   HORIZONTAL SCROLL SECTION
   ========================================= */
.horiz-gallery-wrapper {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 10;
  /* Above fixed hero */
  background: var(--lcg-bg);
  /* Default start color */
  visibility: hidden;
}

/* Subpage expander */
.content-title {
  min-height: 4.5rem;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .content-title {
    min-height: 3.5rem;
  }
}

.subpage-hidden {
  display: none !important;
}

.learn-more-link {
  display: inline-block;
  color: var(--lcg-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
  cursor: pointer;
  z-index: 10;
  letter-spacing: -0.01em;
  font-family: inherit;
  font-size: 1.05rem;
}

.learn-more-link:hover {
  color: var(--lcg-pink);
}


/* The long track containing all panels side-by-side */
.horiz-gallery-track {
  display: flex;
  flex-direction: row;
  width: max-content;
  /* 6 sections * 100% */
  height: 100%;
  will-change: transform;
  position: relative;
  z-index: 2;
  /* Content sits on top of background */
}

/* Individual panels in the horizontal track */
.horiz-panel {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Use column to control vertical stack */
  justify-content: flex-start;
  /* Matches vertical alignment of main panels */
  align-items: center;
  /* Center inner width */
  background: transparent;
  padding: 0;
  width: 100vw;
  max-width: 100%;
}

.horiz-panel .panel__inner {
  width: 100%;
  max-width: 100%;
  padding-left: calc(5vw + 0.6rem) !important;
  padding-right: 5vw !important;
  box-sizing: border-box;
}

/* When using the content grid layout, stretch the inner to fill full height */
/* FORCED ALIGNMENT OVERRIDES FOR SUBPAGES */
#our-story .panel__inner,
#sustainability .panel__inner,
#wellbeing .panel__inner,
#heritage .panel__inner,
#maintenance .panel__inner,
#residential .panel__inner,
#hospitality .panel__inner,
#commercial .panel__inner,
#compliance .panel__inner {
  padding-left: calc(5vw + 0.6rem) !important;
  padding-top: 22vh !important;
}

.horiz-panel .panel__inner,
.horiz-panel .panel__inner--believe {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-top: 22vh;
  padding-bottom: 3rem;
  padding-left: calc(5vw + 0.6rem) !important;
  padding-right: 5vw !important;
  position: relative;
  width: 100% !important;
  box-sizing: border-box !important;
}

.horiz-panel .panel__inner:has(.swiss-grid--content) .swiss-grid--content,
.horiz-panel .panel__inner--believe .swiss-grid--believe {
  flex: 1;
  width: 100%;
}

/* Ensure the circadian gradient stays fixed behind the scrolling track */
/* Ensure the circadian gradient stays fixed behind the scrolling track */
.circadian-bg-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Behind content, same context as wrapper */

  /* Continuous Gradient configured for 6 panels */
  background-image: linear-gradient(to right,
      var(--circadian-1),
      var(--circadian-2),
      var(--circadian-3),
      var(--circadian-4),
      var(--circadian-5),
      var(--circadian-6));
  background-size: 600% 100%;
  /* 600% wide so each color takes up 1 screen width approx */
  background-position: 0% 0%;
  /* Start at left */

  height: 100%;
  width: 100%;
  will-change: background-position;
}

/* =========================================
   SECTION BACKGROUND IMAGES
   Each section has a unique class for easy image swapping.
   ========================================= */

/* 2: MINDSET (Hero Feature - Top) */
.panel--mindset {
  background: url("../img/Soho_Theatre_Bar_Seating.webp") center/cover no-repeat;
}

/* 10: MINDSET (Closing Feature - Bottom) */
.panel--mindset-closing {
  background: url("../img/Soho_Bathroom.webp") center/cover no-repeat;
}

/* NEW: WELLBEING HERO */
.panel--wellbeing {
  background: url("../img/JLR_CEO_Office.webp") center/cover no-repeat;
}

/* 3: WHAT WE DO (Services Intro) */
.panel--services {
  background: url("../img/Soho_Bathroom.webp") center/cover no-repeat;
}

/* NEW: FLEXIBILITY HERO (Before Our Story) */
.panel--flexibility {
  background: url("../img/Soho_Theatre_L3.webp") center/cover no-repeat;
}

/* 9: OUR STORY (Closing Hero) */
.panel--ourstory {
  background: url("../img/Soho_Bathroom.webp") center/cover no-repeat;
}

/* 11: SUSTAINABILITY & BENEFITS BACKGROUND */
.beliefs-bg-wrapper {
  background: url("../img/sustainability-bg.webp") center/cover no-repeat;
  position: relative;
}

.beliefs-bg-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.25) 60%,
      rgba(0, 0, 0, 0.15) 100%);
  z-index: 0;
  pointer-events: none;
}

.panel--sustainability,
.panel--benefits {
  background: transparent;
  position: relative;
}

.panel--sustainability .panel__inner--believe,
.panel--benefits .panel__inner--believe {
  position: relative;
  z-index: 1;
}

.panel--sustainability h2.type-reveal-line,
.panel--sustainability .feature-statement,
.panel--sustainability .believe-body span,
.panel--benefits h2.type-reveal-line,
.panel--benefits .feature-statement,
.panel--benefits .believe-body span {
  color: #ffffff !important;
}

.panel--sustainability .section-rule__line,
.panel--benefits .section-rule__line {
  background: #ffffff !important;
}

/* =========================================
   CONTACT US
   ========================================= */
.panel--light {
  background: var(--lcg-bg);
}

.panel--light .contact-col-right {
  margin-top: 1.8rem;
}

/* Contact layout */
.contact-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: flex-start;
  padding-top: 2rem;
}

.contact-col-left p {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.contact-col-left a {
  color: var(--lcg-text);
  text-decoration: none;
}

.contact-col-right p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 35rem;
}

.hello-link {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.hello-link:hover {
  color: var(--lcg-pink);
}

/* =========================================
   IMAGE PANEL OVERLAY
   ========================================= */
.panel--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.15) 60%,
      rgba(0, 0, 0, 0.05) 100%);
  z-index: 0;
}

.panel--image {
  z-index: 1;
}

.panel--image h2.type-reveal-line {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  font-weight: 500;
  max-width: 100%;
  text-align: left;
  /* Ensure it can span its 6 columns */
  color: #ffffff !important;
}

.panel--image .section-rule__line {
  background: #ffffff !important;
}

/* Center the inner content vertically for Image Hero panels */
.panel--image .panel__inner {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* =========================================
   FADE-IN ANIMATIONS
   ========================================= */
.fade-in,
.fade-in-delay {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}

.fade-in.visible,
.fade-in-delay.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-a {
  transition-delay: 0.5s;
}

.fade-in-delay-b {
  transition-delay: 1s;
}

.fade-in-delay-c {
  transition-delay: 1.5s;
}

.fade-in-delay-d {
  transition-delay: 2s;
}

.fade-in-delay-e {
  transition-delay: 2.5s;
}

.fade-in-delay-f {
  transition-delay: 3s;
}

.fade-in-delay-g {
  transition-delay: 3.5s;
}

.fade-in-delay-h {
  transition-delay: 4s;
}

.fade-in-delay-i {
  transition-delay: 4.5s;
}

.fade-in-delay-j {
  transition-delay: 5s;
}

.fade-in-delay-k {
  transition-delay: 5.5s;
}

.fade-in-delay-l {
  transition-delay: 6s;
}

.fade-in-delay-m {
  transition-delay: 6.5s;
}

.fade-in-delay-n {
  transition-delay: 7s;
}

/* =========================================================
   INTRO SEQUENCE - Now uses type-reveal-line system
   Controlled by main.js
   ========================================================= */

/* =========================================
   HERO INTRO SECTION
   ========================================= */
#hero-pin-wrapper {
  position: relative;
  margin-top: -64px;
  padding-bottom: 64px;
  /* Compensate for negative shift so the next block is pushed fully below the viewport */
}

.hero-intro {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
  overflow: hidden;
  z-index: 1000;
  margin-top: 0;
}

.hero-content {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 1.2rem);
  will-change: transform;
}

.hero-hello {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--lcg-text);
  opacity: 0;
  will-change: transform, opacity;
}

.hero-name {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--lcg-text);
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.4rem, 1vw, 1.2rem);
  will-change: transform, opacity;
}

.hero-word {
  display: flex;
  white-space: pre;
}

.hero-word span {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-word .keep {
  /* Match weight and family of all other hero letters exactly — no visible difference */
  font-family: inherit;
  font-weight: 300;
  text-transform: uppercase;
}

.hero-hint-intro {
  position: absolute;
  bottom: 0;
  /* Anchored flush to bottom */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  /* Spacing between text and line */
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #000;
  /* Black solid text */
  will-change: transform, opacity;
}

.scroll-anim-line {
  width: 1px;
  height: 12vh;
  /* Extends to the absolute edge */
  background-color: rgba(0, 0, 0, 0.25);
  /* Faint black track */
  position: relative;
  overflow: hidden;
}

.scroll-anim-highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--lcg-accent);
  transform-origin: top;
  animation: scrollAnimDrop 1.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollAnimDrop {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  50.1% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Left aligns with the 'L' in LCG — same as all body content (5vw header + 0.6rem logo padding) */
  padding: 2.5rem 5vw 2.5rem calc(5vw + 0.6rem) !important;
  font-size: 0.8rem;
  color: var(--lcg-muted);
  background: var(--lcg-bg);
}

.footer-inner {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  align-items: start;
  width: 100%;
}

/* Brand text */
.footer-col-brand {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
}

.footer-col-brand .brand-text {
  color: var(--lcg-accent);
  font-family: 'Solanel', sans-serif;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Nav: shifted across one column visually (to span 3 and 5) */
.footer-col-nav,
.footer-col-services {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col-nav {
  grid-column: 3 / span 2;
}

.footer-col-services {
  grid-column: 5 / span 3;
}

.footer-col-nav a,
.footer-col-services a {
  text-decoration: none;
  color: var(--lcg-text);
  opacity: 0.7;
  transition: opacity 0.3s ease, color 0.3s ease;
  font-size: 0.85rem;
}

.footer-col-nav a:hover,
.footer-col-services a:hover {
  opacity: 1;
  color: var(--lcg-pink);
}

/* Right column: columns 9–12 — aligned with body text column */
.footer-col-right {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-copyright {
  display: block;
  color: var(--lcg-text);
  opacity: 0.45;
  font-size: 0.8rem;
}

.footer-privacy {
  text-decoration: none;
  color: var(--lcg-text);
  opacity: 0.5;
  font-size: 0.85rem;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.footer-privacy:hover {
  opacity: 1;
  color: var(--lcg-pink);
}

/* Specialized highlight for items in footer */
.footer-sub-believe,
.footer-sub-do {
  text-decoration: none;
  color: var(--lcg-text);
  opacity: 0.7;
  transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.footer-sub-believe:hover,
.footer-sub-do:hover {
  opacity: 1 !important;
  color: var(--lcg-pink) !important;
  /* PINK hover for subheadings */
}

/* Direct hover over parent category -> Pink */
.footer-parent-believe:hover,
.footer-parent-do:hover {
  color: var(--lcg-pink) !important;
  opacity: 1 !important;
}

/* SYNC HOVER: Highlight parent categories in BLUE when sub-pages are hovered */
.footer-grid:has(.footer-sub-believe:hover) .footer-parent-believe {
  color: var(--lcg-accent) !important;
  opacity: 1 !important;
}

.footer-grid:has(.footer-sub-do:hover) .footer-parent-do {
  color: var(--lcg-accent) !important;
  opacity: 1 !important;
}



@media (max-width: 768px) {
  .site-footer {
    padding-left: calc(5vw + 0.6rem) !important;
    /* Keep 'L' alignment on mobile */
    padding-bottom: 20vh !important;
    /* Proper padding to combat iOS Safari address bar scroll bounds */
  }

  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

/* =========================================
   RESPONSIVE — max-width 768px
   ========================================= */
@media (max-width: 768px) {

  body.page-static main {
    margin-top: 56px;
  }

  .hero-intro {
    margin-top: 0;
  }

  /* #hero-pin-wrapper: no margin-top offset needed — index.html main has no top margin */

  .hero-content {
    transform: translateY(-8vh);
  }

  .site-header {
    padding: 1.2rem 5vw;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }

  .logo-with-line {
    align-items: center;
  }

  .main-nav {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .logo-extension-line {
    flex-grow: 1;
    margin-right: 1.8rem;
  }

  .nav-toggle {
    position: relative;
    /* match desktop behaviour */
    right: auto;
    top: auto;
    transform: none;
    /* prevents the “drop/shift” */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;

    z-index: 1201;
    /* IMPORTANT: above .nav-links (1000) so you can close it */
  }

  .nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--lcg-accent) !important;
    /* match desktop weight and colour */
    border-radius: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    /* match desktop animation */
  }


  /* --- 6. NAVIGATION OVERLAY (Simplified for Mobile) --- */
  .nav-links {
    padding-top: 100px !important;
    padding-left: calc(5vw + 0.6rem) !important;
    padding-right: 5vw !important;
    gap: 0 !important;
    padding-bottom: max(3rem, env(safe-area-inset-bottom)) !important;
    justify-content: flex-start !important;
  }

  .nav-links li {
    width: 100% !important;
    border-bottom: 1px solid var(--lcg-accent) !important; /* Reinstated blue separator */
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-links a {
    padding: 0.8rem 0 !important;
    font-size: 1.15rem !important; /* Clearer size for main links */
    color: #000 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
  }

  /* REINSTATED BLUE ACTIVE COLOR */
  .nav-links a.active {
    color: var(--lcg-accent) !important;
  }

  /* HIDE ALL SUBPAGES ON MOBILE/TABLET AS REQUESTED */
  .sub-menu {
    display: none !important;
  }

  .nav-links.is-open {
    display: flex;
    background: var(--lcg-bg) !important;
  }

  /* Show Mobile Items */
  .mobile-only {
    display: block;
  }

  .mobile-subnav-divider {
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    margin: 0.5rem 0;
  }

  .mobile-only a {
    font-size: 1rem;
    /* Slightly smaller for subnav */
    color: var(--lcg-text);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    color: #000;
  }

  .nav-links a:hover {
    color: var(--lcg-pink);
  }

  .services-subnav {
    display: none !important;
  }

  .panel,
  .horiz-panel {
    padding: 0;
    height: auto;
    /* iOS 100vh fix — three-tier fallback:
       1. 100vh  — ultimate fallback (all browsers, may be too tall on iOS)
       2. 100svh — CSS-only fix (iOS 15.4+): small viewport = with address bar shown
       3. var(--real-100vh) — JS-measured window.innerHeight at load time (most accurate) */
    min-height: 100vh;
    min-height: 100svh;
    min-height: var(--real-100vh, 100svh);
  }

  .panel__inner {
    padding-left: calc(5vw + 0.6rem) !important;
    padding-right: 5vw;
  }

  .panel-columns {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 1.5rem;
  }

  /* Shrink gap so the grid retains proportions on tablets */
  .swiss-grid--believe,
  .swiss-grid--content {
    column-gap: 1.5rem !important;
  }

  .content-body,
  .believe-body {
    /* Raised minimum from 0.85rem — vw value collapses too small on real phones */
    font-size: clamp(1rem, 4vw, 1.05rem) !important;
    line-height: 1.5 !important;
  }

  .panel-col-right p,
  .contact-col-right p {
    max-width: 100%;
    margin-top: 0;
  }

  .contact-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =========================================
   RESPONSIVE — max-width 1100px (Mobile Stack & Landscape / Tablet)
   ========================================= */
@media (max-width: 1100px) {

  /* Shrink Logo for Landscape / Narrow devices */
  .logo-mark {
    font-size: 1.05rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Consistent 1px weight for all branding lines at mobile scale.
     1.25px (= 2.5 physical px on 2× Retina) rounds differently per element
     depending on vertical screen position, making the middle burger span
     appear thinner. 1px is always a clean integer at every DPR. */
  .logo-mark .logo-stroke path {
    stroke-width: 1 !important;
  }

  .logo-extension-line,
  .nav-toggle span {
    height: 1px !important;
  }

  /* Visually center the text blocks by pushing them down securely from the top edge. 
     This guarantees the title and blue line will ALWAYS start at the exact same pixels 
     across every horizontal panel, regardless of how much body text is underneath! */
  .horiz-panel .panel__inner:has(.swiss-grid--content),
  .panel__inner--believe {
    /* 16vh is still too much on short-screen phones — use at least 6rem so
       there's breathing room below the fixed header without hiding body text */
    padding-top: max(6rem, 16vh) !important;
    justify-content: flex-start !important;
  }

  /* Stack custom Swiss Grids into a single column */
  .swiss-grid--believe,
  .swiss-grid--content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Reset column spans so they take 100% width cleanly */
  .believe-title,
  .believe-feature,
  .believe-body,
  .content-title,
  .content-feature,
  .content-body {
    grid-column: auto !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  /* Permanently anchor pages to top padding so the blue line never shifts vertically via center math! */
  .panel:not(.panel--image),
  .horiz-panel {
    justify-content: flex-start !important;
  }

  /* Allow the hero image panels to natively center themselves again */
  .panel--image {
    justify-content: center !important;
  }

  /* Reset title wrapping for stacked view.
     NOTE: We intentionally do NOT force nowrap here at ≤1100px because
     subpage titles like "Designed to fit the way you live" will overflow
     narrow screens. Wrapping is safe since grids are already stacked. */
  #introduction .believe-title h2 {
    white-space: nowrap !important;
  }

  .believe-title h2,
  .content-title h2 {
    white-space: normal !important;
    word-break: break-word;
  }

  /* Counteract the flex row-gap to pull the blue line tightly between the typography */
  .section-rule-row {
    grid-column: auto !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin: -0.6rem 0 !important;
  }

  .content-body,
  .believe-body {
    font-size: 1rem !important;
  }

  .contact-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =========================================
   RESPONSIVE — max-width 480px
   ========================================= */
@media (max-width: 480px) {

  .site-header {
    padding: 1.2rem 5vw;
    min-height: 56px;
  }

  main {
    margin-top: 72px;
  }

  .logo-mark {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
  }

  .nav-links {
    top: 0 !important;
  }

  /* Cleared typography overrides to allow universal `clamp` logic to handle H1/H2 sizes without conflict. */

  .nav-links a {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
  }

  .panel__content {
    max-width: 100%;
  }
}

/* UTILITY: Single line height spacer for grid alignment - matches section rule gap */
.text-line-spacer {
  display: block;
  height: 0.6rem;
  width: 100%;
}

.hero-break {
  display: block;
  margin-top: 0.6em;
  font-size: inherit !important;
  line-height: inherit;
}

/* =========================================
   RESPONSIVE — LAPTOP / TABLET (Condense Columns)
   ========================================= */
@media (max-width: 1100px) {

  /* Merge the two side-by-side body columns into one wider column and force stack */
  .horiz-panel .col-span-3.col-start-6,
  .horiz-panel .col-span-3.col-start-9 {
    grid-column: 6 / span 7 !important;
    display: block !important;
    width: 100% !important;
  }
}

/* =========================================
   RESPONSIVE — SMALL-HEIGHT / MOBILE LANDSCAPE
   ========================================= */
@media (max-height: 560px) {

  /* Tighten the header so it takes up less vertical space */
  .site-header {
    padding: 0.6rem 5vw !important;
  }

  /*
   * SAFE: Only touch padding on the INNER containers — never height/overflow
   * on .panel or .horiz-panel because GSAP measures those elements for
   * scroll distance calculations. Changing them causes ScrollTrigger to
   * fire a full refresh mid-render which causes the visible size flash.
   *
   * Instead: shrink the top padding to a fixed px value so content sits
   * just below the header, and allow the inner to scroll if it overflows.
   */
  .panel__inner {
    padding-top: 72px !important;
    padding-bottom: 2rem !important;
  }

  /* The believe/content inners have their own 28vh/32vh override — beat both */
  .panel__inner--believe,
  .horiz-panel .panel__inner:has(.swiss-grid--content),
  .horiz-panel .panel__inner--believe {
    padding-top: 72px !important;
    /* Let overflowing text scroll inside the pinned panel */
    overflow-y: auto !important;
  }

  /* Tighten the grid rows so more content fits vertically */
  .swiss-grid--believe,
  .swiss-grid--content {
    gap: 0.6rem !important;
  }

  /* Reduce rule and spacer sizes */
  .section-rule-row {
    margin: 0 !important;
  }

  .text-line-spacer {
    height: 0.25rem !important;
  }

}

/* =========================================
   RESPONSIVE — SMALL-HEIGHT SCREENS
   ========================================= */
@media (max-height: 500px) {
  .panel {
    height: auto;
    min-height: 100vh;
  }

  .panel--image,
  .panel--introduction {
    overflow: visible;
  }
}

/* -----------------------------------------------------------------------------
   IN-PAGE "PAGE" TRANSITIONS (Anchor navigation)
   Adds a Defiant-ish leave → scroll → enter feel for #hash navigation.
----------------------------------------------------------------------------- */

.panel {
  will-change: transform, opacity, filter;
}

/* When navigating via anchor links, soften the scene slightly */
body.is-anchor-transition .panel {
  transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
  opacity: 0.85;
  filter: blur(0.5px);
}

/* During the "leave" beat */
body.is-anchor-leaving .panel {
  opacity: 0.65;
  transform: translateY(-8px);
}

/* The destination panel gets a subtle "enter" emphasis */
.panel.is-anchor-target {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0) !important;
}

/* -----------------------------------------------------------------------------
   PREMIUM WIPE OVERLAY (Anchor navigation)
   Defiant-ish: cover → scroll → reveal
----------------------------------------------------------------------------- */

.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;

  /* Start off-screen (below) */
  transform: translateY(110%);
  opacity: 1;

  /* Use your vibe: dark base + faint prismatic hints */
  background:
    radial-gradient(80rem 60rem at 20% 20%, rgba(16, 68, 255, 0.18), transparent 55%),
    radial-gradient(70rem 55rem at 80% 60%, rgba(255, 27, 170, 0.14), transparent 58%),
    linear-gradient(180deg, #07070A 0%, #0B0B10 55%, #050508 100%);

  will-change: transform;
  transition: transform 780ms cubic-bezier(.2, .85, .2, 1);
}

/* Thin highlight line / sheen to feel “designed” */
.page-wipe__sheen {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 2px;
  opacity: 0;

  background: linear-gradient(90deg,
      transparent 0%,
      rgba(16, 68, 255, 0.55) 20%,
      rgba(255, 27, 170, 0.55) 50%,
      rgba(16, 68, 255, 0.55) 80%,
      transparent 100%);

  filter: blur(0.2px);
  transform: translateY(-10px);
  transition: opacity 420ms ease, transform 780ms cubic-bezier(.2, .85, .2, 1);
}

/* State: wipe covers the screen (slides up into view) */
body.is-wipe-in .page-wipe {
  transform: translateY(0%);
}

/* When covering, reveal the sheen line gently */
body.is-wipe-in .page-wipe__sheen {
  opacity: 0.85;
  transform: translateY(0px);
}

/* State: wipe exits upward to reveal the destination */
body.is-wipe-out .page-wipe {
  transform: translateY(-110%);
}

/* Optional: soften background content during the wipe */
body.is-anchor-transition .panel {
  will-change: transform, opacity, filter;
  transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease;
  opacity: 0.88;
  filter: blur(0.6px);
  transform: scale(0.998);
}

/* Destination panel gets a tiny “arrival” emphasis */
.panel.is-anchor-target {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-wipe {
    transition: none;
  }

  .page-wipe__sheen {
    transition: none;
  }

  body.is-anchor-transition .panel {
    transition: none;
  }
}

/* =========================================================
   Splash entry animation (triggered by main.js on click)
   main.js adds: .animate-box to .logo-mark and .visible to .nav-toggle
   ========================================================= */

/* Start state: keep burger hidden until JS adds .visible */
body:not(.site-entered) .nav-toggle,
body.site-entered .nav-toggle {
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  pointer-events: none;
}

/* Lock page scroll when the fullscreen nav is open */
/* Blur page when the fullscreen nav is open (keep header sharp) */
body.nav-open main,
body.nav-open footer {
  filter: blur(15px) brightness(0.8);
  transform: scale(0.97);
  pointer-events: none;
}




main,
footer {
  transition:
    filter 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
}


.nav-toggle {
  transition: opacity 500ms cubic-bezier(.2, .85, .2, 1),
    transform 500ms cubic-bezier(.2, .85, .2, 1);
}



/* When JS triggers burger (must beat body.site-entered .nav-toggle specificity) */
body.site-entered .nav-toggle.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Fallback (if needed elsewhere) */
.nav-toggle.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}


/* Line: controlled by main.js (max-width draw) */
body:not(.site-entered) .logo-extension-line {
  opacity: 0;
  max-width: 0px;
  overflow: hidden;
}

body.site-entered .logo-extension-line {
  opacity: 1;
  /* JS can still set this, but this stops it being “perma hidden” */
  max-width: 0px;
  /* stays collapsed until JS animates it */
  overflow: hidden;
}

/* =========================================
   SCROLL HIGHLIGHT TEXT EFFECT
   (Text "lights up" as you scroll)
   ========================================= */
/* =========================================
   SCROLL HIGHLIGHT TEXT EFFECT
   (Text "lights up" as you scroll)
   Note: Now handled via JS (Grey -> Pink -> Blue)
   See bottom of file for base styles.
   ========================================= */

/* =========================================
   SCROLL INDICATOR (New Feature)
   ========================================= */
.scroll-indicator {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lcg-text);
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
  z-index: 20;
}


/* =========================================
   STABILITY: LOGO NAV-OPEN STATE
   Forced to the bottom of the cascade to prevent 
   conflicts and flickering.
   ========================================= */

html body.nav-open .logo-with-line {
  z-index: 9999 !important;
  position: relative !important;
}

html body.nav-open .logo-mark {
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  /* NO FLICKER */
}

html body.nav-open .logo-text {
  opacity: 1 !important;
  color: #000 !important;
  transition: none !important;
}

html body.nav-open .logo-stroke path {
  stroke: #000 !important;
  opacity: 1 !important;
  transition: none !important;
}

html body.nav-open .logo-extension-line {
  background: #000 !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  max-width: 100% !important;
  width: auto !important;
  transition: none !important;
}

html body.nav-open .nav-toggle span {
  background: #000 !important;
  transition: background 0s !important;
}

/* =========================================
   FIXES & ADDITIONS
   ========================================= */

/* 1. Ensure Our Story text is visible on light background */
#our-story {
  color: var(--lcg-text) !important;
}

/* Allow .grey to work appropriately */
#our-story .grey {
  color: #8a8a8a !important;
}

/* 2. Scroll Highlight (Karaoke/Reading Style - Simple Gradient Wipe) */
.scroll-highlight {
  /* Animation handled by JS (Grey -> Pink -> Blue) */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #8a8a8a !important;
  font-weight: 500;
  display: inline;
  padding-bottom: 2px;

  /* IMPORTANT: Ensure it inherits header size */
  font-size: inherit !important;
  line-height: inherit !important;
}

.scroll-highlight span {
  display: inline;
  /* Keep text flow */
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit;
  /* Allow animation color to pass through */
}

/* 3. Ensure Type Reveal works or falls back gracefully */
/* 3. Ensure Type Reveal works or falls back gracefully */
.type-reveal-line {
  display: inline-block;
  opacity: 0;
  /* Hidden initially */
  transform: translateY(15px);
  /* Offset initially */
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.type-reveal-line.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* If the logic expects an animation class */
.type-reveal-line.animate-in {
  animation: revealUp 0.8s forwards;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =============================================================================
   MOBILE — HORIZONTAL SCROLL → VERTICAL STACK
   JS (initHorizontalScroll) skips GSAP pin on ≤768px and sets these inline.
   These CSS rules back that up so panels flow as normal document elements.
   ============================================================================= */
@media (max-width: 768px) {

  /* Wrapper: no GSAP pin — pure document flow */
  .horiz-gallery-wrapper {
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    position: relative !important;
  }

  /* Track: switch from horizontal row to vertical column */
  .horiz-gallery-track {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  /* Panels: full-width, natural height, no clipping */
  .horiz-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
    flex: none !important;
  }

  /* Circadian bg — make it a static vertical gradient on mobile */
  .circadian-bg-trigger {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: linear-gradient(to bottom,
        var(--circadian-1),
        var(--circadian-2),
        var(--circadian-3),
        var(--circadian-4),
        var(--circadian-5),
        var(--circadian-6)) !important;
    background-size: 100% 100% !important;
    background-position: 0% 0% !important;
  }

  /* TITLE ALIGNMENT FIX: believe-title has no min-height set, so its H2 sits
     at the very top of the div. content-title has min-height:4.5rem with
     align-items:flex-end, pushing its H2 down. Giving believe-title the same
     treatment makes all panel titles land at the same position on mobile. */
  .believe-title {
    min-height: 3.5rem !important;
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 0.5rem !important;
  }
}


/* =============================================================================
   MOBILE LAYOUT & LEGIBILITY FIXES — PHONE (≤768px)
   Applied last in the cascade to win over all earlier rules.

   TITLE ALIGNMENT:
   Previous code used max(5.5rem, 14vh) which resolves to DIFFERENT pixel
   values on different iPhone heights:
     iPhone SE  (667px)  = 14vh = 93px  ← varies
     iPhone 14  (844px)  = 14vh = 118px ← varies
     iPhone Max (932px)  = 14vh = 130px ← varies
   Replacing with a single flat value (5.5rem = 88px) guarantees all panel
   titles land at the same vertical position on every device.

   IOS ADDRESS BAR:
   Enabled overflow-y: auto + env(safe-area-inset-bottom) padding so
   sub-page links at the bottom of panels are always reachable.
   ============================================================================= */
@media (max-width: 768px) {

  /* -----------------------------------------------------------------------
     1. UNIVERSAL TITLE ALIGNMENT
     Flatten all vh-based panel inner padding-top to one consistent value.
     Covers: base panel__inner (10vh), panel__inner--believe (28vh),
     specific ID overrides (22vh !important), and horiz-panel inners.
     ----------------------------------------------------------------------- */
  .panel__inner,
  .panel__inner--believe,
  .horiz-panel .panel__inner,
  .horiz-panel .panel__inner--believe,
  #our-story .panel__inner,
  #sustainability .panel__inner,
  #wellbeing .panel__inner,
  #heritage .panel__inner,
  #maintenance .panel__inner,
  #residential .panel__inner,
  #hospitality .panel__inner,
  #commercial .panel__inner,
  #compliance .panel__inner {
    padding-top: 5.5rem !important;
    /* Left: header left-padding (5vw) + logo-mark's own left padding (0.6rem).
       Lands the left edge of all body copy exactly under the "L" of LCG. */
    padding-left: calc(5vw + 0.6rem) !important;
    /* Right: 5vw (header right padding) + 0.375rem (6px) to account for the
       nav-toggle button being 32px wide while its visible span lines are only
       26px wide and left-aligned within the button. Without this extra 6px the
       rule line extends 6px past the visible right edge of the burger lines. */
    padding-right: calc(5vw + 0.375rem) !important;
  }

  /* Introduction panel sits just below the pinned hero — no large top gap */
  #introduction .panel__inner--believe {
    padding-top: 2rem !important;
  }

  /* -----------------------------------------------------------------------
     2. iOS ADDRESS BAR / HOME INDICATOR OVERFLOW
     Make panel inners scrollable and pad the bottom above the home bar.
     env(safe-area-inset-bottom) is 0px when no notch/bar, and ~34px on
     modern iPhones. The max() guard adds at least 4.5rem of breathing room.
     ----------------------------------------------------------------------- */
  .horiz-panel .panel__inner,
  .horiz-panel .panel__inner--believe {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(4.5rem, calc(2.5rem + env(safe-area-inset-bottom))) !important;
  }

  /* Also ensure non-horiz panels have scrollable overflow if content overflows */
  .panel__inner,
  .panel__inner--believe {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(4.5rem, calc(2.5rem + env(safe-area-inset-bottom))) !important;
  }

  /* -----------------------------------------------------------------------
     3. TYPOGRAPHY LEGIBILITY
     ----------------------------------------------------------------------- */
  /* Hero intro text — 3vw collapses to ~11px on 375px; raise midpoint */
  .hero-hello,
  .hero-name {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }

  /* Feature statement — readable floor on all phones */
  h1.feature-statement, h2.feature-statement,
  .feature-statement {
    font-size: clamp(1.25rem, 4.8vw, 1.55rem) !important;
    line-height: 1.2 !important;
  }

  /* Intro body text */
  #introduction .intro-body span {
    font-size: clamp(1.35rem, 4.5vw, 1.7rem) !important;
    line-height: 1.5 !important;
  }

  /* Scroll-highlight text inherits from parent container */
  .scroll-highlight {
    font-size: inherit !important;
  }

  /* -----------------------------------------------------------------------
     4. TITLE WRAPPING
     Long subpage titles (e.g. "Designed to fit the way you live") must wrap
     rather than overflow the viewport.
     ----------------------------------------------------------------------- */
  .believe-title h2,
  .content-title h2 {
    white-space: normal !important;
    word-break: break-word;
    hyphens: auto;
  }

  /* -----------------------------------------------------------------------
     5. CONTENT GRID SPACING — UNIFORM GAPS
     The three visual gaps (title → rule, rule → feature, between paragraphs)
     come from three completely different CSS sources, making them all unequal:
       • Title → rule:  content-title padding-bottom (0.5rem) + flex alignment
       • Rule → feature: section-rule-row margin (0.6em base, various overrides)
       • Paragraphs:    browser default paragraph margin (~1em)

     Fix: convert both content and believe grids to flex column with a single
     1rem gap. Zero out all element-level spacing so the gap is the only source
     of vertical rhythm. Paragraph margins are then set to match.
     ----------------------------------------------------------------------- */
  .swiss-grid--believe,
  .swiss-grid--content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    row-gap: 1rem !important;
    /* belt-and-braces for any grid→flex fallback */
  }

  /* Flatten content-title — its flex/min-height was creating extra whitespace
     above the title text that made the title→rule gap larger than the rest */
  .content-title,
  .believe-title {
    min-height: 0 !important;
    display: block !important;
    padding-bottom: 0 !important;
  }

  /* Rule row: zero its own margins — the flex gap handles spacing now */
  .section-rule-row {
    margin: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  /* Ensure all grid children fill the full column on mobile */
  .content-title,
  .believe-title,
  .content-feature,
  .believe-feature,
  .content-body,
  .believe-body,
  .section-rule-row {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }

  /* Paragraph spacing within body text columns — match the section gap (1rem)
     so reading rhythm feels identical to the spacing between sections above */
  .content-body p,
  .believe-body p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
  }

  .content-body p:last-child,
  .believe-body p:last-child {
    margin-bottom: 0 !important;
  }

  /* Body copy column width */
  .panel-col-left p,
  .panel-col-right p,
  .contact-col-left p,
  .contact-col-right p {
    max-width: 100%;
  }

  /* -----------------------------------------------------------------------
     6. NAVIGATION OVERLAY
     ----------------------------------------------------------------------- */
  /* --- 6. NAVIGATION OVERLAY (Simplified) --- */
  .nav-links {
    padding-top: 100px !important;
    padding-left: calc(5vw + 0.6rem) !important;
    padding-right: calc(5vw + 0.6rem) !important; /* Exactly match left gap for symmetry */
    gap: 0 !important;
    padding-bottom: max(3rem, calc(1.5rem + env(safe-area-inset-bottom))) !important;
    justify-content: flex-start !important;
  }

  .nav-links li {
    width: 100% !important;
    border-bottom: 1px solid var(--lcg-accent) !important; /* Blue separator */
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-links a {
    padding: 0.6rem 0 !important; /* Slightly tighter vertical rhythm */
    font-size: 1.05rem !important; /* Balanced size for a cleaner look */
    color: #000 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
  }

  /* BLUE ACTIVE COLOR REINSTATED */
  .nav-links a.active {
    color: var(--lcg-accent) !important;
  }

  /* REMOVE SUBPAGES ON MOBILE AS REQUESTED */
  .sub-menu {
    display: none !important;
  }

  /* -----------------------------------------------------------------------
     7. MISC
     ----------------------------------------------------------------------- */
  .hero-hint-intro {
    font-size: 0.65rem !important;
    letter-spacing: 0.2em !important;
  }

  /* -----------------------------------------------------------------------
     8. iOS OPENING-PAGE VIEWPORT FIX
     Prevent the second section from peeking at the bottom of the screen on
     initial page load. The --real-100vh variable is set by JS (main.js) to
     window.innerHeight — the true visible height with the address bar shown.
     overscroll-behavior: none stops the iOS rubber-band bounce from briefly
     revealing content below the first panel during the logo animation.
     ----------------------------------------------------------------------- */
  html,
  body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    /* belt-and-braces for older WebKit */
  }

  .panel,
  .horiz-panel {
    /* Reinforce at highest specificity in the cascade */
    min-height: 100vh;
    min-height: 100svh;
    min-height: var(--real-100vh, 100svh) !important;
  }
}

/* =============================================================================
   MOBILE LEGIBILITY — VERY SMALL SCREENS (≤390px)
   iPhone SE (3rd gen), older Android phones.
   ============================================================================= */
@media (max-width: 390px) {

  h1.feature-statement, h2.feature-statement,
  .feature-statement {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
  }

  h1,
  h2 {
    font-size: 1.3rem !important;
  }

  .content-body,
  .believe-body {
    font-size: 1rem !important;
  }

  .sub-menu a {
    font-size: 0.95rem !important;
    padding-left: 1rem !important;
  }
}

.mt-1-5 { margin-top: 1.5rem !important; }
.no-underline { text-decoration: none !important; }

/* Inline style replacements */
.hero-intro-layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  pointer-events: none;
}

.intro-reveal-state {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
}
.micro-text-reveal .type-reveal-line {
  font-size: 0.8rem;
  opacity: 0.5;
}