/* ============================================================
   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.2rem, 1.9vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0;
}

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

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;
}

/* 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;
  backdrop-filter: blur(15px);
  /* Slightly lower blur for better performance/clarity */
  -webkit-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 */
  backface-visibility: hidden;
  -webkit-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;
}

.logo-home-link {
  text-decoration: none;
  color: var(--lcg-text);
  transition: color 0.5s ease;
}

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

/* =========================================
   HEADER — DARK BACKGROUND MODE
   Applied when scrolled into the beliefs subpages (Sustainability / Benefits)
   ========================================= */
body.header--on-dark .logo-home-link {
  color: #ffffff;
}

body.header--on-dark .logo-mark {
  color: #ffffff;
}

body.header--on-dark .logo-mark .logo-stroke path {
  stroke: #ffffff;
}

body.header--on-dark .logo-extension-line {
  background: #ffffff;
}

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-text);

  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;

  backdrop-filter: blur(20px);
  -webkit-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 {
  backdrop-filter: none;
  -webkit-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-text) !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: 0 5vw 0 calc(5vw + 0.6rem);

  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;
}

#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 */
.subpage-hidden {
  display: none !important;
}

.horiz-gallery-wrapper.is-expanded .subpage-hidden {
  display: flex !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;
}

.horiz-panel .panel__inner {
  width: 100vw;
  max-width: 100%;
}

/* When using the content grid layout, stretch the inner to fill full height */
.horiz-panel .panel__inner:has(.swiss-grid--content),
.horiz-panel .panel__inner--believe {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-top: 28vh;
  padding-bottom: 3rem;
  position: relative;
  width: 100vw;
}

.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: 100vh;
  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);
  padding: 2.5rem 5vw;
  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) {
  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

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

  main {
    margin-top: 56px;
  }

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

  #hero-pin-wrapper {
    margin-top: -56px;
    padding-bottom: 56px;
  }

  .site-header {
    padding: 1.2rem 5vw;
    backdrop-filter: blur(15px);
    /* Reduce blur slightly on mobile for clarity */
    -webkit-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-text) !important;
    /* match desktop weight and colour */
    border-radius: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    /* match desktop animation */
  }


  .nav-links {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 120px 5vw 2rem;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 1000;
    overflow-y: auto;
  }

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

  .nav-links a {
    color: #000;
    font-size: 1.2rem;
    /* Larger font for mobile */
  }

  /* 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;
    min-height: calc(100vh - 64px);
  }

  .panel__inner {
    padding-left: calc(5vw + 0.6rem);
    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 {
    font-size: clamp(0.85rem, 1.8vw, 1.05rem) !important;
    line-height: 1.45 !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;
  }

  /* Optically thin branding elements on smaller screens */
  .logo-mark .logo-stroke path {
    stroke-width: 1.25 !important;
  }

  .logo-extension-line,
  .nav-toggle span {
    height: 1.25px !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 {
    padding-top: 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 */
  #introduction .believe-title h2,
  .believe-title h2,
  .content-title h2 {
    white-space: nowrap !important;
  }

  /* 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: calc(100% - 1.1rem);
  }

  /* 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);
  }
}