/* =========================================
   OS LUPO — STYLE SYSTEM
   ========================================= */

/* -----------------------------------------
   CSS Custom Properties
   ----------------------------------------- */
:root {
  /* Colours */
  --color-bg: #FAF9F6;
  --color-text: #2D2D2D;
  --color-text-muted: #6B6B6B;
  --color-accent: #eb9131;
  --color-forest: #364d31;
  --color-border: #E8E6E3;
  --color-border-subtle: #F0EFEC;

  /* Typography */
  --font-family: 'Inclusive Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Type Scale */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Spacing */
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 1rem;        /* 16px */
  --space-lg: 1.5rem;      /* 24px */
  --space-xl: 2rem;        /* 32px */
  --space-2xl: 3rem;       /* 48px */
  --space-3xl: 4rem;       /* 64px */
  --space-4xl: 6rem;       /* 96px */
  --space-5xl: 8rem;       /* 128px */

  /* Layout */
  --container-max: 720px;
  --container-padding: var(--space-lg);

  /* Section Spacing */
  --section-spacing: clamp(80px, 12vh, 140px);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-medium: 220ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* -----------------------------------------
   Reset & Base
   ----------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Hardcoded to ensure no white flash - matches --color-bg */
  background-color: #FAF9F6;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  /* Hardcoded to ensure no white flash - matches --color-bg */
  background-color: #FAF9F6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No transforms or filters that could break fixed positioning */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}


/* -----------------------------------------
   Layout
   ----------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
}


.section__headline {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2xl);
}

/* Section labels - system style */
.section__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.section__label-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

.section__label--light {
  color: rgba(250, 249, 246, 0.5);
}

.section__label--footer {
  color: rgba(255, 255, 255, 0.7);
}

.section__label-dot--white {
  background-color: #fff;
}

/* Section borders */
.has-border {
  position: relative;
}

.has-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #DDD9D4;
}

/* Sections need relative positioning for labels */
.section--context,
.section--services,
.section--process,
.section--studio,
.section--footer,
.section--bio {
  position: relative;
}




/* -----------------------------------------
   Site Header
   Always visible, pinned to top
   ----------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  background-color: var(--color-bg);
  transition: background-color 300ms ease-out;
  /* Ensure visibility */
  visibility: visible !important;
  opacity: 1 !important;
}

/* Header fade overlay - content fades as it scrolls under the header */
.site-header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    var(--header-bg, var(--color-bg)) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* Light text state - for dark/orange backgrounds */
.site-header.is-light-text .site-header__node {
  color: rgba(255, 255, 255, 0.7);
}

.site-header.is-light-text .site-header__node .dot {
  background-color: #fff;
}

.site-header__logo {
  width: 50px;
  height: auto;
  pointer-events: auto;
}

/* Header nodes - left and right text */
.site-header__node {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  pointer-events: auto;
  transition: color 300ms ease-out;
  white-space: nowrap;
}

.site-header__node .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--color-accent);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 2px;
  transition: background-color 300ms ease-out;
}

.site-header__node--left {
  flex: 1;
  text-align: left;
}

.site-header__node--right {
  flex: 1;
  text-align: right;
}

@media (max-width: 768px) {
  .site-header {
    padding: 8px var(--space-md);
  }

  .site-header__node {
    font-size: 9px;
  }

  /* Hide dots on mobile header */
  .site-header__node .dot {
    display: none;
  }

  /* Hide right node on mobile - cleaner look */
  .site-header__node--right {
    display: none;
  }

  .site-header__logo {
    width: 43px;
  }
}


/* -----------------------------------------
   Hero Section
   Layered, system-like layout with scattered nodes
   ----------------------------------------- */
.section--hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  position: relative;
}

/* Only clip hero after kinetic animation has settled - allows logo to dock into header */
.section--hero:has(.kinetic-stage.is-settled) {
  clip-path: inset(0 0 0 0);
}

/* System nodes - scattered around viewport */
.hero__node {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

/* After intro - nodes become visible */
.hero__node.is-visible {
  opacity: 1;
}

/* Orange dot punctuation */
.hero__node .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 2px;
}

/* Node positions */
.hero__node--tl {
  top: var(--space-xl);
  left: var(--space-lg);
}

.hero__node--tr {
  top: var(--space-xl);
  right: var(--space-lg);
}

.hero__node--bl {
  bottom: var(--space-lg);
  left: var(--space-md);
}

.hero__node--br {
  bottom: var(--space-lg);
  right: var(--space-md);
  text-align: right;
  white-space: nowrap;
}

.hero__node--version {
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-border);
}

@media (max-width: 768px) {
  .hero__node {
    font-size: 9px;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile: stack nodes vertically on left side, above scroll hint */
  .hero__node--bl {
    left: var(--space-md);
    bottom: calc(var(--space-2xl) + 50px);
    right: auto;
  }

  .hero__node--br {
    left: var(--space-md);
    right: auto;
    text-align: left;
    bottom: calc(var(--space-2xl) + 28px);
    font-size: 9px;
  }

  /* Ensure hero headline is properly sized on mobile */
  .hero__headline {
    font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
    padding-right: var(--space-md);
  }
}

/* Main headline - hidden initially, visible after intro */
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: all 300ms ease-out;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* After intro - headline becomes visible */
.hero__headline.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Orange accent line below headline */
.hero__headline::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--color-accent);
  margin-top: var(--space-lg);
}

/* Brutalist resolved state — applied via JS after glitch */
.hero__headline.is-resolved {
  font-weight: 700;
  letter-spacing: -0.04em;
}

.hero__headline.is-resolved span {
  display: inline-block;
}

/* Slight stretch on certain words for raw digital feel */
.hero__headline.is-resolved span:nth-child(4n) {
  transform: scaleX(1.03);
}

.hero__headline.is-resolved span:nth-child(5n+2) {
  transform: scaleX(0.97);
}

/* Hero container for centered content with more breathing room */
.hero__container {
  text-align: left;
  max-width: 1000px;
}

/* When kinetic hero is active, remove all constraints */
.hero__container:has([data-kinetic-hero].is-kinetic-active) {
  max-width: none;
  width: 100%;
  padding: 0;
}

.hero__headline-wrapper:has([data-kinetic-hero].is-kinetic-active) {
  /* No masks, no constraints during chaos */
  -webkit-mask-image: none;
  mask-image: none;
}

/* Wrapper for mouse-move interaction and scroll fade */
.hero__headline-wrapper {
  --hero-fade: 0;
  will-change: transform;
  transition: transform 0.15s ease-out;
  /* Gradient mask: fades from top as --hero-fade increases */
  /* At --hero-fade: 0, fully visible. At --hero-fade: 1, top 60% faded out */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, calc(1 - var(--hero-fade))) 0%,
    rgba(0, 0, 0, calc(1 - var(--hero-fade) * 0.6)) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, calc(1 - var(--hero-fade))) 0%,
    rgba(0, 0, 0, calc(1 - var(--hero-fade) * 0.6)) 40%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Scroll hint - hidden initially, visible after intro */
.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xl);
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 300ms ease-out;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

.hero__scroll-hint.is-visible {
  opacity: 1;
}

.hero__scroll-hint:hover {
  opacity: 0.7;
}

/* Reduced motion - show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .hero__node,
  .hero__headline,
  .hero__scroll-hint {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* -----------------------------------------
   Experimental Hero Variant
   Orange background, white text, glitch-settle headline
   Toggle: data-hero-variant="experimental" on .section--hero
   ----------------------------------------- */
[data-hero-variant="experimental"] {
  background-color: var(--color-accent);
}

/* Film grain — real PNG texture, sits behind text */
[data-hero-variant="experimental"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('../images/grain.png');
  background-size: 512px 512px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.28;
}

/* Hero content sits above grain */
[data-hero-variant="experimental"] .hero__container,
[data-hero-variant="experimental"] .hero__scroll-hint {
  position: relative;
  z-index: 1;
}

/* Nodes keep their absolute positioning — just lift above grain */
[data-hero-variant="experimental"] .hero__node {
  z-index: 1;
}

[data-hero-variant="experimental"] .hero__headline {
  color: #fff;
}

[data-hero-variant="experimental"] .hero__headline strong {
  font-weight: 700;
}

/* White accent line instead of orange */
[data-hero-variant="experimental"] .hero__headline::after {
  background-color: #fff;
}

/* System nodes: white text, white dots */
[data-hero-variant="experimental"] .hero__node {
  color: rgba(255, 255, 255, 0.7);
}

[data-hero-variant="experimental"] .hero__node .dot {
  background-color: #fff;
}

/* Scroll hint: white */
[data-hero-variant="experimental"] .hero__scroll-hint {
  color: #fff;
}

/* Header: initial orange state for experimental hero (JS takes over on scroll) */
body:has([data-hero-variant="experimental"]) .site-header {
  --header-bg: var(--color-accent);
  background-color: var(--color-accent);
}

body:has([data-hero-variant="experimental"]) .site-header__node {
  color: rgba(255, 255, 255, 0.7);
}

body:has([data-hero-variant="experimental"]) .site-header__node .dot {
  background-color: #fff;
}

/* -----------------------------------------
   Kinetic Hero: Zero-Gravity Floating → Settled Animation

   RULES:
   - Words are ALWAYS visible (no opacity: 0)
   - Words use FULL hero viewport (100vw × 100vh)
   - Chaos: words drift in zero-gravity, bounce off edges
   - Mouse creates attraction/repulsion field
   - Settle: liquid, weighted, satisfying
   ----------------------------------------- */

/* FOUC Prevention: Hide original hero text until kinetic stage is ready */
/* Only apply on desktop where kinetic animation runs */
@media (min-width: 769px) {
  html:not(.kinetic-ready) [data-kinetic-hero] {
    visibility: hidden !important;
  }
}

/* Stage starts invisible, fades in when ready */
html:not(.kinetic-ready) .kinetic-stage {
  opacity: 0;
}

html.kinetic-ready .kinetic-stage {
  opacity: 1;
  transition: opacity 0.15s ease-out;
}

/* ============================================================
   KINETIC LOGO - ONE LOGO THROUGHOUT

   Rule: The kinetic logo floats with words, then docks into header.
   There is NO separate header logo. Same element, re-parented.
   ============================================================ */

/* Hide logo briefly before JS moves it to stage */
/* This prevents a flash of the logo in header position */
html:not(.kinetic-ready) .site-header__logo {
  opacity: 0;
}

/* Logo is initially in header, then JS moves it to stage for floating */
/* When docked, logo returns to header with normal styles - NO transition */
.site-header__logo.is-docked {
  position: static !important;
  width: 50px !important;
  height: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  will-change: auto !important;
  filter: none !important;
  pointer-events: auto !important;
  transition: none !important;
  animation: none !important;
}

/* Kinetic logo - floats with words, then docks into header */
/* Must stay visible above gradient at all times */
.kinetic-logo {
  pointer-events: none;
  z-index: 100; /* High within stage to stay above words */
}

/* Logo while floating - dramatic shadow like the words */
.kinetic-logo.is-floating {
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.25));
}

/* During settling/docking - higher z-index and reduced shadow */
.kinetic-logo.is-settling {
  z-index: 200; /* Above header gradient during dock */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
  transition: filter 0.3s ease-out;
}

/* The kinetic stage - covers full hero viewport */
/* MUST be above header (z-index 1000) so logo can dock without going behind gradient */
.kinetic-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1001; /* Above header so logo stays visible during dock */
}

/* When settled, stage goes behind header and scrolls with page */
.kinetic-stage.is-settled {
  position: absolute;
  z-index: 1; /* Below header now that docking is complete */
}

/* Container needs relative positioning for absolute children */
[data-kinetic-hero].is-kinetic-active {
  position: static; /* Let kinetic-stage handle positioning */
  visibility: hidden; /* Hide original, stage shows words */
}

/* Hide the ::after accent line during chaos, show after settle */
[data-kinetic-hero].is-kinetic-active::after {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

[data-kinetic-hero].is-kinetic-settled::after {
  opacity: 1;
  transition: opacity 0.5s ease-out 0.8s;
}

/* Individual word spans - ALWAYS VISIBLE */
.kinetic-word {
  position: absolute;
  white-space: nowrap;
  color: #fff;
  will-change: transform;
  pointer-events: none;
  /* Typography */
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}

/* Zero-gravity floating state - dramatic with subtle depth */
.kinetic-word.is-floating {
  text-shadow:
    0 0 40px rgba(255, 255, 255, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Settling state - transitioning to final positions */
.kinetic-word.is-settling {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Settled state - crisp, clean, left-aligned */
.kinetic-word.is-settled {
  text-shadow: none;
  /* Smooth parallax on mouse move */
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobile: disable kinetic animation, show static headline */
@media (max-width: 768px) {
  .kinetic-stage {
    display: none !important;
  }

  /* Ensure headline is visible on mobile - override kinetic styles */
  [data-kinetic-hero],
  [data-kinetic-hero].is-kinetic-active {
    visibility: visible !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Force headline visible state on mobile */
  .hero__headline {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hide the underline on mobile - it's a desktop element */
  .hero__headline::after {
    display: none !important;
  }
}

/* Reduced motion: no animation, show final state */
@media (prefers-reduced-motion: reduce) {
  .kinetic-stage {
    display: none;
  }

  [data-kinetic-hero].is-kinetic-active {
    visibility: visible;
    position: relative;
  }

  .kinetic-word {
    position: relative !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  [data-kinetic-hero].is-kinetic-active::after,
  [data-kinetic-hero].is-kinetic-settled::after {
    opacity: 1;
    transition: none;
  }
}


/* -----------------------------------------
   Liquid Morph Text Effect
   SVG filter-based distortion that settles into crisp type
   ----------------------------------------- */

/* Hide SVG defs container */
.liquid-morph-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Element with liquid morph effect */
[data-liquid-morph] {
  /* Initial state: distorted */
  filter: url(#liquid-morph-filter) blur(0px);
  transform: scale(1);
  opacity: 1;
  transition: filter 0.1s linear, transform 0.1s linear;
}

/* Morphing state - slight blur adds to the liquid feel */
[data-liquid-morph].is-morphing {
  filter: url(#liquid-morph-filter) blur(1px);
  transform: scale(1.005);
}

/* Settled state - crisp and clean */
[data-liquid-morph].is-settled {
  filter: none;
  transform: scale(1);
}

/* Reduced motion: skip animation entirely */
@media (prefers-reduced-motion: reduce) {
  [data-liquid-morph] {
    filter: none !important;
    transform: none !important;
  }
}


/* -----------------------------------------
   Context Section
   Text with supportive illustration
   ----------------------------------------- */
.section--context {
  background-color: var(--color-bg);
  padding-bottom: var(--space-4xl);
}

/* Shared vertical reference for cross-section illustration alignment */
:root {
  --illustration-top-offset: clamp(1rem, 3vw, 2.5rem);
}

/* Two-column grid: text left, image right */
.context__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start; /* Top-align for shared cross-section baseline */
}

@media (min-width: 768px) {
  .context__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .context__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: stretch;
  }
}

@media (min-width: 1280px) {
  .context__grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

.section--context .context__content {
  max-width: none;
}

/* Primary headline - dominant, confident */
.context__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-forest);
  margin: 0 0 var(--space-2xl) 0;
}

/* Each line is a block - prevents browser reflow */
.context__headline-line {
  display: block;
}

/* Only force nowrap on large screens where there's room */
@media (min-width: 1024px) {
  .context__headline-line {
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .context__headline {
    margin-bottom: var(--space-3xl);
  }
}

/* Supporting body - calm, considered */
.context__body {
  max-width: 600px;
}

.context__body p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md) 0;
}

@media (min-width: 768px) {
  .context__body p {
    font-size: var(--text-lg);
    line-height: 1.85;
    margin-bottom: var(--space-lg);
  }
}

.context__body p:last-child {
  margin-bottom: 0;
}

/* Supportive illustration - fills full right side of section */
.context__image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.context__image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

@media (min-width: 768px) {
  .context__image {
    margin-right: 0;
    width: 100%;
  }

  .context__image img {
    width: 100%;
    transform: scale(1.2);
    transform-origin: top center;
  }
}

@media (max-width: 767px) {
  .context__image img {
    width: 80%;
    margin: 0 auto;
  }
}


/* -----------------------------------------
   Services Section (What We Do)
   Large cycling blocks with hover reveal
   Orange takeover on hover
   ----------------------------------------- */
.section--services {
  background-color: var(--color-bg);
}

/* Primary headline - bold, confident */
.services__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4.2vw, var(--text-4xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-forest);
  margin: 0 0 var(--space-2xl) 0;
}

/* Force single line only on large desktop where there's room */
@media (min-width: 1200px) {
  .services__headline {
    white-space: nowrap;
  }
}

/* Interaction hint */
.services__hint {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.services__hint-main {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}

.services__hint-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* Hide hint after first interaction */
.services__hint.is-hidden {
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) and (max-width: 1023px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

.service-block {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  transform-origin: center center;
  cursor: pointer;
  transition:
    background-color 400ms ease-out,
    border-color 400ms ease-out,
    transform 400ms ease-out,
    opacity 400ms ease-out,
    box-shadow 400ms ease-out;
}

@media (min-width: 768px) {
  .service-block {
    min-height: 220px;
    padding: var(--space-xl) var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .service-block {
    min-height: 240px;
  }
}

/* Active card state - stronger presence */
.service-block:hover,
.service-block:focus,
.service-block.is-expanded {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  overflow: visible;
  box-shadow: 0 8px 32px rgba(235, 108, 24, 0.15);
  transform: scale(1.01);
}

/* Ensure active card doesn't fade when siblings are also considered */
.service-block:hover,
.service-block:focus,
.service-block.is-expanded {
  opacity: 1 !important;
}

/* OS Label */
.service-block__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* Reserve height to prevent layout shift */
  min-height: 1.4em;
  opacity: 1;
  transform: translateY(0);
  transition:
    color 300ms ease-out,
    opacity 200ms ease-out,
    transform 200ms ease-out;
}

/* Hide label on active state */
.service-block:hover .service-block__label,
.service-block:focus .service-block__label,
.service-block.is-expanded .service-block__label {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.service-block__label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

/* Static headline - no cycling */
.service-block__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--space-md) 0 0 0;
  color: var(--color-text);
  transition: color 300ms ease-out;
}

.service-block:hover .service-block__headline,
.service-block:focus .service-block__headline,
.service-block.is-expanded .service-block__headline {
  color: var(--color-bg);
}

/* Teaser - visible in default state, fades out on hover */
.service-block__teaser {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 0 0;
  opacity: 0.8;
  transform: translateY(0);
  transition:
    opacity 300ms ease-out,
    transform 300ms ease-out;
}

/* Fade out teaser on hover - replaced by detail content */
.service-block:hover .service-block__teaser,
.service-block:focus .service-block__teaser,
.service-block.is-expanded .service-block__teaser {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* Detail content — revealed on hover */
.service-block__detail {
  margin: 0;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 600ms ease-out,
    max-height 600ms ease-out,
    border-color 600ms ease-out;
}

.service-block__detail p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md) 0;
  transition: color 600ms ease-out;
}

/* Lead paragraph - first paragraph feels more confident */
.service-block__detail p:first-child {
  font-size: var(--text-lg);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.service-block__detail p:last-child {
  margin-bottom: 0;
}

.service-block__detail strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  transition: color 600ms ease-out;
}

.service-block__detail em {
  font-style: italic;
  color: var(--color-text-muted);
  transition: color 600ms ease-out;
}

.service-block:hover .service-block__detail,
.service-block:focus .service-block__detail,
.service-block.is-expanded .service-block__detail {
  opacity: 1;
  max-height: 500px;
  border-top-color: rgba(250, 249, 246, 0.3);
  padding-top: var(--space-lg);
}

.service-block:hover .service-block__detail p,
.service-block:focus .service-block__detail p,
.service-block.is-expanded .service-block__detail p {
  color: rgba(250, 249, 246, 0.9);
}

/* Lead paragraph on hover - brighter */
.service-block:hover .service-block__detail p:first-child,
.service-block:focus .service-block__detail p:first-child,
.service-block.is-expanded .service-block__detail p:first-child {
  color: #fff;
}

.service-block:hover .service-block__detail strong,
.service-block:focus .service-block__detail strong,
.service-block.is-expanded .service-block__detail strong {
  color: #fff;
}

.service-block:hover .service-block__detail em,
.service-block:focus .service-block__detail em,
.service-block.is-expanded .service-block__detail em {
  color: rgba(250, 249, 246, 0.95);
}

/* De-emphasise inactive cards when one is active */
.services__grid:has(.service-block:hover) .service-block:not(:hover),
.services__grid:has(.service-block:focus) .service-block:not(:focus),
.services__grid:has(.service-block.is-expanded) .service-block:not(.is-expanded) {
  transform: scale(0.97);
  opacity: 0.5;
}

/* Mobile: disable :focus and :hover states, use only .is-expanded for touch control */
@media (max-width: 768px) {
  /* Reset focus/hover states on mobile - only .is-expanded matters */
  .service-block:focus:not(.is-expanded),
  .service-block:hover:not(.is-expanded) {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    box-shadow: none;
    transform: none;
  }

  .service-block:focus:not(.is-expanded) .service-block__headline,
  .service-block:hover:not(.is-expanded) .service-block__headline {
    color: var(--color-text);
  }

  .service-block:focus:not(.is-expanded) .service-block__label,
  .service-block:hover:not(.is-expanded) .service-block__label {
    opacity: 1;
    transform: none;
  }

  .service-block:focus:not(.is-expanded) .service-block__teaser,
  .service-block:hover:not(.is-expanded) .service-block__teaser {
    opacity: 0.8;
    transform: none;
  }

  .service-block:focus:not(.is-expanded) .service-block__detail,
  .service-block:hover:not(.is-expanded) .service-block__detail {
    opacity: 0;
    max-height: 0;
  }

  /* Disable sibling fade on mobile */
  .services__grid:has(.service-block:hover) .service-block:not(:hover),
  .services__grid:has(.service-block:focus) .service-block:not(:focus) {
    transform: none;
    opacity: 1;
  }
}

/* Reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
  .service-block__headline {
    transition: none;
  }

  .service-block__detail {
    transition: none;
  }

  .service-block {
    transition: none;
  }

  /* Disable sibling effects for reduced motion */
  .services__grid:has(.service-block:hover) .service-block:not(:hover),
  .services__grid:has(.service-block:focus) .service-block:not(:focus),
  .services__grid:has(.service-block.is-expanded) .service-block:not(.is-expanded) {
    transform: none;
    opacity: 1;
  }
}

/* -----------------------------------------
   Process Section (How It Works)
   Full-width dark section with two columns
   ----------------------------------------- */
.section--process {
  background-color: var(--color-forest);
  color: var(--color-bg);
  padding-top: clamp(80px, 15vh, 160px);
  padding-bottom: clamp(80px, 15vh, 160px);
}

.container--wide {
  max-width: 1100px;
}

/* Two-column layout: text left, illustration right */
.process__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 6rem);
}

@media (min-width: 768px) {
  .process__layout {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .process__layout {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-4xl);
  }
}

@media (min-width: 1200px) {
  .process__layout {
    gap: var(--space-4xl);
  }
}

@media (min-width: 1400px) {
  .process__layout {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* Text content wrapper */
.process__content {
  min-width: 0;
  overflow-wrap: break-word;
  overflow: hidden;
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .process__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
  }
}

.process__statement p {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.8vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2xl) 0;
}

/* Mobile sizing */
@media (max-width: 768px) {
  .process__statement p {
    font-size: clamp(var(--text-xl), 6vw, var(--text-2xl));
  }
}

/* Each line is a block */
.process__statement-line {
  display: block;
}

/* At desktop: force each span to one line, font sized to fit the column */
@media (min-width: 1024px) {
  .process__statement p {
    font-size: 2.1vw;
  }
  .process__statement-line {
    white-space: nowrap;
  }
}

.process__details {
  padding-top: 0;
}

.process__details p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
  opacity: 0.85;
}

.process__details p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph - slightly larger, semi-bold */
.process__lead {
  font-size: var(--text-lg);
  font-weight: 500;
  opacity: 1;
}

/* Emphasis within process details */
.process__details strong {
  font-weight: 600;
  color: var(--color-bg);
}

.process__details em {
  font-style: italic;
}

.process__goal {
  font-weight: var(--font-weight-medium);
  opacity: 1;
  color: var(--color-bg);
}

/* Supportive illustration - shares vertical baseline with context section */
.process__image {
  display: flex;
  justify-content: center;
  align-items: center;
  order: 1;
}

.process__image img {
  width: 260px;
  max-width: 60%;
  height: auto;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .process__image {
    order: 2;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .process__image img {
    width: 75%;
    max-width: 75%;
    height: auto;
  }
}


/* -----------------------------------------
   Studio Section
   ----------------------------------------- */
.section--studio {
  background-color: var(--color-bg);
}

.studio__intro {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-md);
}

.section--studio p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
}

.studio__cta {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.studio__links {
  display: flex;
  gap: var(--space-lg);
}

.studio__link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

.studio__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-text);
  transition: width var(--duration-medium) var(--ease-out);
}

.studio__link:hover {
  color: var(--color-text);
}

.studio__link:hover::after {
  width: 100%;
}


/* -----------------------------------------
   Close Section
   ----------------------------------------- */
.section--close {
  background-color: var(--color-bg);
  text-align: center;
}

.close__statement {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}

.close__honest {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xl);
}

.close__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.cta-link {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.cta-link:hover {
  color: var(--color-text);
}

.cta-link--primary {
  color: var(--color-accent);
  position: relative;
}

.cta-link--primary::before {
  content: '→ ';
}

.cta-link--primary:hover {
  opacity: 0.75;
  color: var(--color-accent);
}

.close__social {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.social__link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.social__link:hover {
  color: var(--color-text);
}


/* -----------------------------------------
   Footer Section (Let's Talk)
   Full orange background
   ----------------------------------------- */
.section--footer {
  background-color: var(--color-accent);
  color: #fff;
  text-align: center;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

/* Override container max-width in footer for true centering */
.section--footer .container {
  max-width: none;
}

.footer__logo {
  display: none;
}

.footer__statement {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}

/* Only force single line on large desktop where there's room */
@media (min-width: 1200px) {
  .footer__statement {
    white-space: nowrap;
  }
}

.footer__sub {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin-bottom: var(--space-2xl);
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

@media (min-width: 641px) {
  .footer__cta {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2xl);
  }
}

.footer__link {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: #fff;
  transition: opacity var(--duration-fast) var(--ease-out);
  position: relative;
  /* Adequate touch target for mobile (44px minimum) */
  padding: var(--space-sm) var(--space-md);
  margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-md));
}

.footer__link::before {
  content: '→ ';
}

/* CTA hover/focus inversion - entire section inverts when link is interacted with */
.section--footer {
  transition: background-color 300ms ease-out, color 300ms ease-out;
}

.section--footer .footer__statement,
.section--footer .footer__link {
  transition: color 300ms ease-out, opacity 300ms ease-out;
}

.section--footer:has(.footer__link:hover),
.section--footer:has(.footer__link:focus) {
  background-color: #FAF9F6;
}

.section--footer:has(.footer__link:hover) .footer__statement,
.section--footer:has(.footer__link:focus) .footer__statement {
  color: #eb9131;
  opacity: 0.5;
}

.section--footer:has(.footer__link:hover) .footer__link,
.section--footer:has(.footer__link:focus) .footer__link {
  color: #eb9131;
  opacity: 0.5;
}

/* The actually hovered/focused link stays full opacity */
.section--footer .footer__link:hover,
.section--footer .footer__link:focus {
  opacity: 1 !important;
}

.section--footer:has(.footer__link:hover) .section__label--footer,
.section--footer:has(.footer__link:focus) .section__label--footer {
  color: #2D2D2D;
}

.section--footer:has(.footer__link:hover) .section__label-dot--white,
.section--footer:has(.footer__link:focus) .section__label-dot--white {
  background-color: #eb9131;
}


/* -----------------------------------------
   Scroll Reveal Animations
   Section-based "evolve up" motion
   ----------------------------------------- */

/* Section reveal - the container */
.section-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.section-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Child elements within revealed sections - staggered */
.section-reveal .reveal-child {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.section-reveal.is-revealed .reveal-child {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.section-reveal.is-revealed .reveal-child:nth-child(1) { transition-delay: 0ms; }
.section-reveal.is-revealed .reveal-child:nth-child(2) { transition-delay: 80ms; }
.section-reveal.is-revealed .reveal-child:nth-child(3) { transition-delay: 160ms; }
.section-reveal.is-revealed .reveal-child:nth-child(4) { transition-delay: 240ms; }
.section-reveal.is-revealed .reveal-child:nth-child(5) { transition-delay: 320ms; }
.section-reveal.is-revealed .reveal-child:nth-child(6) { transition-delay: 400ms; }

/* Legacy .reveal class support */
.reveal {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

/* Fallback for no-JS: ensure content is visible */
.no-js .section-reveal,
.no-js .reveal,
.no-js .reveal-child {
  opacity: 1;
  transform: none;
}

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

/* Stagger delays for grouped elements */
.reveal[data-delay="1"] { transition-delay: 40ms; }
.reveal[data-delay="2"] { transition-delay: 80ms; }
.reveal[data-delay="3"] { transition-delay: 120ms; }


/* -----------------------------------------
   Scroll Progress Indicator
   Subtle vertical track with dot
   ----------------------------------------- */
.scroll-progress {
  position: fixed;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 80px;
  background-color: var(--color-border);
  border-radius: 1px;
  z-index: 90;
  opacity: 0;
  transition: opacity 400ms ease-out;
  pointer-events: none;
}

.scroll-progress.is-visible {
  opacity: 1;
}

.scroll-progress__dot {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: 50%;
  transition: top 100ms ease-out, background-color 200ms ease-out;
}

/* Inverted dot for dark/orange backgrounds */
.scroll-progress.is-inverted .scroll-progress__dot {
  background-color: #fff;
}

/* Mobile: hide scroll progress indicator */
@media (max-width: 768px) {
  .scroll-progress {
    display: none;
  }
}


/* -----------------------------------------
   Micro Prompt
   One-time subtle message near end
   ----------------------------------------- */
.micro-prompt {
  position: fixed;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  opacity: 0;
  transition:
    opacity 500ms ease-out,
    transform 500ms ease-out;
  z-index: 90;
  pointer-events: none;
}

.micro-prompt.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.micro-prompt.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-5px);
}

/* Mobile: position higher to avoid footer overlap */
@media (max-width: 640px) {
  .micro-prompt {
    bottom: var(--space-3xl);
    font-size: 10px;
  }
}


/* -----------------------------------------
   Bio Section (The Human Behind It)
   Light background, text left, circular photo right
   ----------------------------------------- */
.section--bio {
  background-color: var(--color-bg);
}

/* Two-column grid: text left, photo right */
.bio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 768px) {
  .bio__grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .bio__grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* "I'm Max." headline */
.bio__name {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-forest);
  margin: 0 0 var(--space-xl) 0;
}

/* Bio body paragraphs */
.bio__body p {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg) 0;
}

@media (min-width: 768px) {
  .bio__body p {
    font-size: var(--text-lg);
    line-height: 1.9;
    margin-bottom: var(--space-xl);
  }
}

.bio__body p:last-child {
  margin-bottom: 0;
}

/* Sign-off block — closing lines, border now sits below on the LinkedIn link */
.bio__sign-off {
  margin-top: var(--space-xl);
}

.bio__sign-off p {
  margin-bottom: var(--space-xs) !important;
}

.bio__sign-off p:last-child {
  margin-bottom: 0 !important;
}

/* Closing statement — own visual weight */
.bio__closing {
  color: var(--color-forest) !important;
  margin-bottom: 0 !important;
}

.bio__sign-off p:first-child {
  color: var(--color-forest);
}

.bio__linkedin-wrap {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.bio__linkedin {
  display: inline-block;
  color: var(--color-forest);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--color-forest);
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}

.bio__linkedin:hover {
  opacity: 0.65;
}

/* Hand-drawn underline draw-in animation */
.underline-draw {
  position: relative;
  display: inline;
}

.underline-draw__svg {
  display: none; /* Hidden on mobile where text wraps unpredictably */
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 10px;
  overflow: visible;
  pointer-events: none;
}

@media (min-width: 768px) {
  .underline-draw__svg {
    display: block;
  }
}

.underline-draw__path {
  fill: none;
  stroke: var(--color-forest);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.underline-draw.is-drawn .underline-draw__path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .underline-draw__path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Photo column */
.bio__image {
  display: flex;
  justify-content: center;
  align-items: center;
  order: -1; /* Photo above text on mobile */
}

@media (min-width: 768px) {
  .bio__image {
    justify-content: flex-end;
    align-items: flex-start;
    order: 0;
    padding-top: 2.5rem;
    transform: none;
  }
}

/* Circular photo */
.bio__photo-circle {
  width: clamp(140px, 22vw, 320px);
  height: clamp(140px, 22vw, 320px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-border);
  flex-shrink: 0;
}

.bio__photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}


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

  .reveal,
  .section-reveal,
  .reveal-child {
    opacity: 1;
    transform: none;
  }

  /* Hide progress indicator for reduced motion */
  .scroll-progress {
    display: none;
  }

  /* Instant show/hide for micro prompt */
  .micro-prompt {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}


/* -----------------------------------------
   Responsive
   ----------------------------------------- */
@media (max-width: 640px) {
  :root {
    --container-padding: var(--space-md);
    --section-spacing: clamp(60px, 10vh, 100px);
  }

  .hero__headline {
    font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
  }

  .section__headline {
    font-size: var(--text-xl);
  }

  .context__content p,
  .process__content p,
  .section--studio p {
    font-size: var(--text-base);
  }

  .context__lead,
  .studio__intro {
    font-size: var(--text-lg);
  }

  .service-card {
    padding: var(--space-lg);
  }

  .studio__links {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .close__cta {
    gap: var(--space-lg);
  }
}

@media (min-width: 641px) {
  .close__cta {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2xl);
  }
}