/* ========================================
   INSTRUCTIONS:
   1. DELETE lines 1-334 in your index.css (everything before the line starting with "@media(max-width:768px){ .metrics-reveal")
   2. PASTE this entire code at line 1
   3. Save and test
   ======================================== */

/* === FORCE WHITE TEXT IN HERO === */
.hero,
.hero *:not(.btn):not(.btn--primary):not(.btn--secondary) {
  color: #ffffff !important;
}

.hero .static-text,
.hero .scrolling-words span,
.hero .hero-eyebrow,
.hero .hero-subtitle {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.hero .scrolling-words span {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* === HERO CONTAINER === */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--bg) url('/img/hero.jpg') top center/cover no-repeat;
  overflow: hidden;
  padding: 0 clamp(60px, 8vw, 120px);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-content,
.hero-actions {
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  animation: heroContentFade 1.2s var(--bezier) 0.4s forwards;
}

/* === TYPOGRAPHY === */
.hero-eyebrow {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  max-width: 1000px;
  white-space: normal;
}

.text-scroll {
  --sw-h: 110px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: var(--sw-h);
  margin-bottom: 1.5rem;
  margin-left: -4px;
}

.static-text {
  font-family: 'Cormorant', 'Georgia', serif;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.scrolling-words {
  display: inline-block;
  position: relative;
  height: var(--sw-h);
  overflow: hidden;
  vertical-align: baseline;
}

.scrolling-words-inner {
  display: flex;
  flex-direction: column;
  animation: scrollWordsStep 8s cubic-bezier(.77, 0, .175, 1) infinite;
  will-change: transform;
}

.scrolling-words span {
  height: var(--sw-h);
  line-height: var(--sw-h);
  font-family: 'Cormorant', 'Georgia', serif;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  white-space: nowrap;
  user-select: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  max-width: 900px;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 2rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* === BUTTONS (SAME ON DESKTOP & MOBILE) === */
.hero-actions {
  position: absolute;
  bottom: 60px;
  left: clamp(60px, 8vw, 120px);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  z-index: 10;
}

.hero-actions .btn {
  min-width: 160px;
}

/* === WHITE NAVBAR === */
body .site-header .logo,
body .site-header .nav-links a,
body .site-header .menu-icon {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

body .site-header .nav-links a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* === ANIMATIONS === */
@keyframes heroContentFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes scrollWordsStep {
  0%, 12.5%   { transform: translateY(0) }
  25%, 37.5%  { transform: translateY(calc(-1 * var(--sw-h))) }
  50%, 62.5%  { transform: translateY(calc(-2 * var(--sw-h))) }
  75%, 87.5%  { transform: translateY(calc(-3 * var(--sw-h))) }
  100%        { transform: translateY(0) }
}

/* === MOBILE === */
@media (max-width: 768px) {
  .hero {
    min-height: 125svh;
    background: var(--bg) url('/img/hero-mobile.jpg') center 4%/cover no-repeat;
    padding-top: clamp(80px, 12vh, 100px);
    padding-bottom: clamp(140px, 15vh, 140px);
  }

  .hero-content {
    margin-top: 0;
    padding: 0 clamp(16px, 4vw, 24px);
    align-items: center;
    text-align: center;
  }

  .text-scroll {
    --sw-h: 80px;
    height: auto;
    margin-bottom: 1.8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .scrolling-words { height: var(--sw-h); }
  .scrolling-words span { height: var(--sw-h); line-height: var(--sw-h); }

  .hero-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    margin-bottom: 1.2rem;
    max-width: 95vw;
  }

  .static-text,
  .scrolling-words span {
    font-size: clamp(2.2rem, 6.5vw, 2.8rem);
    letter-spacing: -0.025em;
  }

  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 98vw;
  }

  /* Mobile button positioning: vertical stack at bottom-left */
  .hero-actions {
    position: absolute;
    bottom: max(28px, env(safe-area-inset-bottom) + 20px);
    left: clamp(20px, 5vw, 24px);
    right: clamp(20px, 5vw, 24px);
    flex-direction: column;
    gap: 0.75rem;
    width: auto;
    max-width: calc(100% - 48px);
  }

  /* Full-width buttons on mobile for better touch targets */
  .hero .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    height: 48px;
    font-size: 0.9375rem;
    padding: 0 1.5rem;
    font-weight: 600;
  }
}

@media (max-width: 400px) {
  .hero .hero-eyebrow { font-size: 0.65rem; }
  .hero .static-text,
  .hero .scrolling-words span { font-size: clamp(2rem, 10vw, 2.8rem); }
  .hero .hero-subtitle { font-size: 0.95rem; }
  .hero .hero-actions .btn { 
    min-height: 48px;
    height: 48px; 
    font-size: 0.9375rem; 
    padding: 0 1.25rem; 
  }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; padding-top: 80px; padding-bottom: 100px; }
  .hero .hero-eyebrow { margin-bottom: 1rem; }
  .hero .text-scroll { margin-bottom: 1.2rem; }
  .hero .hero-subtitle { margin-bottom: 1.5rem; }
  .hero .hero-actions { bottom: max(16px, env(safe-area-inset-bottom) + 12px); }
}

/* ========================================
   STOP - Keep everything below this line
   ======================================== */


@media(max-width:768px){
  /* Shorter runway so users reach lock state sooner */
  .metrics-reveal{ --runway: 150vh; }
  /* Keep CTA/link bottom-safe and readable */
  .metrics-reveal .metrics-cta-wrap{ bottom: max(20px, env(safe-area-inset-bottom) + 16px); }
  .metrics-reveal .metrics-cta-text a{ font-size: 1rem; line-height: 1.2; }
  /* Better mobile spacing for metrics */
  .metrics-reveal .metrics-inner{
    gap: 2.5rem 2rem;
    padding: 0 clamp(20px, 5vw, 32px);
  }
}
/* ===== Teaser Splash (overlay) ===== */
.teaser{position:fixed; inset:0; z-index:var(--z-max); display:grid; place-items:center; background:#000; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s step-end;}
.teaser.is-on{opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s linear;}
.teaser.is-hiding{opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s step-end;}
.teaser__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.teaser__controls{position:absolute; right:24px; bottom:24px; display:flex; align-items:center; gap:12px;}
.teaser__skip{appearance:none; -webkit-appearance:none; border:1px solid rgba(255,255,255,.75); background:transparent; color:#fff; font-weight:var(--font-bold); padding:.7rem 1rem; border-radius:var(--radius-md); cursor:pointer; backdrop-filter:var(--backdrop-blur-sm);}
.teaser__skip:hover{border-color:#fff}
.teaser__skip:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-color:#fff;
}
.teaser__sound{display:flex; align-items:center; gap:8px; color:#fff;}
.teaser__sound-label{font-size:.9rem; opacity:.85}
@media (max-width:768px){ .teaser__controls{right:max(12px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom) + 8px);} }

/* iOS-style toggle (flat CSS) */
.tgl{display:none}
.tgl + .tgl-btn{outline:0; display:block; width:3.2em; height:1.8em; position:relative; cursor:pointer; user-select:none}
.tgl + .tgl-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}
.tgl + .tgl-btn:after,.tgl + .tgl-btn:before{position:relative; display:block; content:""; width:50%; height:100%}
.tgl + .tgl-btn:after{left:0}
.tgl + .tgl-btn:before{display:none}

.tgl-ios + .tgl-btn{background:#fbfbfb; border-radius:2em; padding:2px; transition:all .4s ease; border:1px solid #e8eae9}
.tgl-ios + .tgl-btn:after{border-radius:2em; background:#fbfbfb; transition:left .3s cubic-bezier(.175,.885,.32,1.275), padding .3s ease, margin .3s ease; box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 4px 0 rgba(0,0,0,.08)}
.tgl-ios + .tgl-btn:hover:after{will-change:padding}
.tgl-ios + .tgl-btn:active{box-shadow:inset 0 0 0 2em #e8eae9}
.tgl-ios + .tgl-btn:active:after{padding-right:.6em}
.tgl-ios:checked + .tgl-btn{background:#86d993}
.tgl-ios:checked + .tgl-btn:active{box-shadow:none}
.tgl-ios:checked + .tgl-btn:active:after{margin-left:-.6em}

.tgl:checked + .tgl-btn:after{left:50%}

/* --- Teaser-specific iOS toggle (transparent, matches Skip) --- */
.teaser .tgl-ios + .tgl-btn{
  background: rgba(255,255,255,.08);               /* transparent track */
  border: 1px solid rgba(255,255,255,.55);         /* same as Skip */
  backdrop-filter: var(--backdrop-blur-sm);                       /* glassy */
  -webkit-backdrop-filter: var(--backdrop-blur-sm);
  box-shadow: 0 0 0 1px rgba(0,0,0,.0);            /* minimal */
}
.teaser .tgl-ios + .tgl-btn:hover{ border-color:#fff; }
.teaser .tgl-ios + .tgl-btn:active{ box-shadow: inset 0 0 0 0 rgba(0,0,0,0); }
.teaser .tgl-ios + .tgl-btn:after{
  background: rgba(255,255,255,.92);               /* white knob */
  box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.45);
}
/* checked state: subtle, no green */
.teaser .tgl-ios:checked + .tgl-btn{
  background: rgba(255,255,255,.16);
  border-color: #fff;
}
/* knob already shifts via generic .tgl:checked rule */

/* ====== INDEX (Home) – page-scoped styles ====== */

/* Index page editorial typography - scoped to main content only */
main {
  font-weight: 300;
  letter-spacing: -0.01em;
}

main h1, 
main h2, 
main h3, 
main h4, 
main h5, 
main h6 {
  font-family: 'Cormorant', 'Georgia', serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

main p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* Prevent background scroll when teaser visible */
body.is-gated { overflow: hidden; }

/* ====== INDEX (Home) – page-scoped styles ====== */

/* ---------- OVERVIEW SECTION - Magazine Style ---------- */
.overview {
  background: var(--bg);
  padding: clamp(4rem, 10vh, 9rem) 5vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.overview-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  width: 100%;
}

.overview-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.overview-line {
  width: 60px;
  height: 6px;
  border-radius: 4px;
  background: var(--rule-grad);
}

.overview-category {
  font-size: 0.75rem;
  font-weight: var(--font-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.overview-main {
  display: grid;
  gap: 1.5rem;
  max-width: 900px;
}

.overview-headline {
  font-family: 'Cormorant', 'Georgia', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  margin-block-end: var(--space-heading-gap);
}

.overview-deck {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--ink-soft-enhanced);
  max-width: 70ch;
  margin: 0;
}

.overview-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.stat-card {
  padding: 1.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-radius: var(--radius-enhanced);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--transition-smooth), border-color 0.25s var(--transition-smooth), box-shadow 0.25s var(--transition-smooth);
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover-soft);
}

.stat-fig {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.stat-caption {
  font-size: clamp(0.875rem, 1.5vw, 0.95rem);
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
  margin-top: 0.5rem;
  white-space: nowrap;
}

.gradient-pulse {
  background: linear-gradient(90deg, #1a1a1a, #007a6b, #1a1a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gp 4s linear infinite;
  background-size: 200% 100%;
}

@keyframes gp {
  to {
    background-position: 200% 0;
  }
}

@media (max-width: 768px) {
  .overview {
    padding: clamp(3rem, 6vh, 4rem) clamp(20px, 5vw, 28px);
    min-height: auto;
  }
  
  .overview-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .overview-eyebrow {
    gap: 1rem;
    padding-bottom: 1rem;
  }
  
  .overview-layout {
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  
  .overview-headline {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  
  .overview-deck {
    font-size: 1rem;
  }
}

/* ---------- METRICS REVEAL ---------- */
.metrics-reveal{--runway:180vh; --reveal:0%; position:relative; height:var(--runway)}
.metrics-reveal-sticky{position:sticky; top:0; height:100vh; overflow:hidden}
.metrics-reveal .base-bg{position:absolute; inset:0; background:var(--bg)}
.metrics-reveal .reveal-image{position:absolute; inset:0; background:url('/img/carside.jpg') center/cover no-repeat; filter:grayscale(1); clip-path:inset(0 calc(100% - var(--reveal)) 0 0); -webkit-clip-path:inset(0 calc(100% - var(--reveal)) 0 0); will-change:clip-path}
/* ---------- METRICS REVEAL ---------- */
.metrics-reveal .metrics{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:100%; color:var(--metric-color,var(--ink)); transition:color .4s ease}
.metrics-reveal .metrics-inner{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:3.2rem 3.5rem; max-width:1220px; padding:0 3rem; justify-items:center}

/* Lockable overlay + CTA */
.metrics-reveal .metrics-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition: opacity .45s ease;
  z-index:1; /* sits above image, below text */
}
  .metrics-reveal .metrics-cta-wrap{
    position:absolute;
    left:50%;
    bottom: clamp(18px, 4vw, 32px);
    transform: translateX(-50%);
    display:flex; justify-content:center;
    margin-top: clamp(8px, 2vw, 16px);
    z-index:5; /* was 2; place above .metrics */
    opacity:0;
    pointer-events:none;
    transition: opacity .35s ease;
  }
  .metrics-reveal .metrics-cta-text a{
    color:#fff;
    font-weight:600;
    font-size:1.05rem;
    text-decoration:none;
  }
  .metrics-reveal .metrics-cta-wrap a{ pointer-events:auto; }
  .metrics-reveal .metrics-cta-text a:hover{ text-decoration:underline; }
  .metrics-reveal.is-locked .metrics-cta-wrap{
    opacity:1;
    pointer-events:auto;
  }

/* When locked, keep image fully revealed, show overlay + CTA */
.metrics-reveal.is-locked .reveal-image{
  clip-path: inset(0 0 0 0)!important; -webkit-clip-path: inset(0 0 0 0)!important;
  filter: grayscale(0);
}
.metrics-reveal.is-locked .metrics-overlay{ opacity:1; }
.metric{opacity:0; transform:translateY(40px); transition:opacity .55s ease,transform .8s var(--bezier); display:flex; flex-direction:column; align-items:center; text-align:center}
.metric.is-visible{opacity:1; transform:none}
.metric-label{font-size:clamp(1.45rem,2.1vw,2.6rem); font-weight:var(--font-bold)}
.metric-value{font-size:clamp(2.2rem,4.5vw,4.2rem); font-weight:var(--font-extrabold); letter-spacing:-.5px; white-space:nowrap; margin-top:.55rem}
.metric-value.metric-tracks.switching{animation:trackFlash .45s ease}

@media(max-width:768px){
  .metrics-reveal .metrics-inner{
    grid-template-columns:1fr; /* single column */
    gap:2rem;                  /* adjust spacing */
  }
}

@media (max-width:768px){
  .metrics-reveal .metrics-overlay{ background: rgba(0,0,0,.35); }
}

/* Mobile carside rule */
@media(max-width:768px){.metrics-reveal .reveal-image{background-image:url('/img/carside-mobile.jpg')}}

/* ---------- IMPACT ORBIT ---------- */
.impact-pin-wrapper{position:relative; height:calc(100svh + var(--phase-scroll,96px) * 3)}
.impact-pin-sticky{position:sticky; top:0; min-height:100svh; display:flex; align-items:center; justify-content:center}
@media (max-width:900px){.impact-pin-wrapper{height:auto}.impact-pin-sticky{position:static; min-height:auto}}
@property --k{syntax:'<number>'; initial-value:0; inherits:false}
#impact-hero{
  display:grid; place-items:center; padding:clamp(32px,4vw,64px); background:var(--bg); color:var(--ink,#0b0b0b);
  --impact-size:clamp(24px,5vw,64px); --impact-weight:900; --impact-letter:-0.02em; --impact-gap:.5ch;
  position:relative; width:100%; min-height:100svh; place-content:center;
  --ring:rgba(200,200,200,.15); --ring-dash:rgba(180,180,180,.1); --orbit-x:50%; --orbit-y:50%;
}
#impact-hero .impact-line{position:absolute; left:50%; top:50%; transform:translate(-100%,-50%); white-space:nowrap; pointer-events:none; z-index:3; transition:left .55s cubic-bezier(.25,.85,.25,1),transform .55s cubic-bezier(.25,.85,.25,1); will-change:left,transform}
#impact-hero .impact-line span{font-size:clamp(2rem, 4.2vw, 3.6rem); font-weight:var(--font-extrabold); line-height:1.1; letter-spacing:-0.02em; color: var(--ink)}
#impact-hero #impact{
  position:absolute; top:50%; left:100%; margin-left:var(--impact-gap); transform:translateY(-50%); 
  text-transform:lowercase; white-space:nowrap; z-index:2;
  font-size:clamp(2rem, 4.2vw, 3.6rem); font-weight:var(--font-extrabold); line-height:1.1; letter-spacing:-0.02em;
}
#impact-hero #impact span{
  background: linear-gradient(90deg, #1a1a1a, #007a6b, #1a1a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: gp 4s linear infinite;
  background-size: 200% 100%;
}
#impact-hero .scene{position:absolute; left:var(--orbit-x); top:var(--orbit-y); transform:translate(-50%,-50%); width:min(65vw,500px); aspect-ratio:1/1; transform-origin:center; justify-self:auto; transition:opacity .6s cubic-bezier(.25,.85,.25,1)}
#impact-hero .scene.scene-back{z-index:1}
#impact-hero .scene.scene-front{z-index:4; pointer-events:none}
#impact-hero .ring{position:absolute; inset:0; border-radius:50%; border:1px solid var(--ring); z-index:1; transform-origin:50% 50%; opacity:0; transition:opacity .8s cubic-bezier(.25,.85,.25,1)}
#impact-hero .ring::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px dashed var(--ring-dash); pointer-events:none}
#impact-hero .ring.fade-in{opacity:1}
#impact-hero .scene[data-playing="true"] .ring{animation:spin var(--dur) linear infinite}
#impact-hero .scene[data-playing="true"] .ring.reverse{animation-direction:reverse}
#impact-hero .scene[data-playing="true"] .upright{animation:spin var(--dur) linear infinite reverse}
#impact-hero .scene[data-playing="true"] .ring.reverse .upright{animation-direction:normal}
@keyframes spin{to{rotate:360deg}}
#impact-hero .sat{
  position:absolute; top:0; left:50%; translate:-50% -50%; transform-origin:50% 50%;
  padding:.55rem .9rem; border-radius:var(--radius-md); border:1px solid #edf1f5; color: var(--ink); background-color:rgba(255,255,255,0);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 18px rgba(0,0,0,.08); -webkit-font-smoothing:antialiased;
  backdrop-filter:saturate(115%); transition:background-color .8s cubic-bezier(.25,.85,.25,1),box-shadow .8s cubic-bezier(.25,.85,.25,1),opacity .5s cubic-bezier(.25,.85,.25,1); opacity:0
}
#impact-hero .sat.fade-in{background-color:rgba(255,255,255,.85); opacity:1}
#impact-hero .scene.scene-front .sat.fade-in{background-color:rgba(255,255,255,.82)}
#impact-hero .u1{top:-2px} .u2{top:-1px} .u3{top:-1px}
#impact-hero .r1{inset:22%; --dur:24s} .r2{inset:12%; --dur:30s} .r3{inset:3%; --dur:38s}
#impact-hero .impact-line .lead-text{transition:opacity .35s ease,transform .35s ease}
#impact-hero .side-copy{position:absolute; left: calc((100vw - min(var(--container), 92vw)) / 2); top:50%; transform:translateY(-50%) translateX(-16px); max-width:clamp(52ch,44vw,68ch); opacity:0; pointer-events:none; transition:opacity .5s ease .2s,transform .5s ease .2s}
#impact-hero .side-copy h2{ white-space:nowrap; margin-block-start:0; }
#impact-hero .side-copy p{
  margin: var(--space-heading-gap) 0 1.25rem;           /* match pm-sub spacing */
  font-size: clamp(1rem, .95rem + .35vw, 1.125rem);     /* match pm-sub size */
  line-height: 1.6;                                      /* comfortable reading */
  color: var(--ink-soft-enhanced);                       /* improved contrast */
  max-width: 60ch;                                       /* match pm-sub measure */
  text-wrap: pretty; hyphens: auto;
}
/* Shared inline CTA style used across sections (Karachi→Paris, INSEAD year, etc.) */
.side-cta{
  display: inline-block;
  margin-top: 1.5rem;
  font-weight:var(--font-semibold);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--ink-soft-enhanced);
  text-decoration: none;
  transition: color 0.2s var(--transition-smooth), transform 0.2s var(--transition-smooth);
}
.side-cta:hover{ color: var(--ink); transform: translateX(4px); }
@media (min-width:901px){
  #impact-hero.layout-shift .impact-line{left:72%}
  #impact-hero.layout-shift .impact-line .lead-text{opacity:0; transform:translateX(-8px)}
  #impact-hero.orbits-hidden .scene{opacity:0}
  #impact-hero.orbits-back .scene{opacity:1}
  #impact-hero.layout-shift .side-copy{opacity:1; transform:translateY(-50%) translateX(0); pointer-events:auto}
}

@media(max-width:900px){
  .impact-pin-sticky{position:static}
  .impact-pin-wrapper{min-height:auto}
  #impact-hero{min-height:auto;display:flex;align-items:center;justify-content:center;padding:clamp(3rem, 6vh, 5rem) clamp(20px,5vw,28px)}
  #impact-hero .impact-line,#impact-hero .scene{display:none!important}
  #impact-hero .side-copy{display:block!important;position:static!important;opacity:1!important;transform:none!important;pointer-events:auto;max-width:70ch;margin:0 auto;text-align:left;color:var(--text, var(--ink))}
}

/* ---------- KEYFRAMES ---------- */
@keyframes heroDimmerFade{from{opacity:0}to{opacity:var(--hero-dimmer-opacity,.6)}}
@keyframes heroContentFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes scrollWordsStep{
  0%,12.5%   { transform:translateY(0) }
  25%,37.5%  { transform:translateY(calc(-1 * var(--sw-h))) }
  50%,62.5%  { transform:translateY(calc(-2 * var(--sw-h))) }
  75%,87.5%  { transform:translateY(calc(-3 * var(--sw-h))) }
  100%       { transform:translateY(0) }
}
@keyframes trackFlash{0%{opacity:.35}100%{opacity:1}}

/* ---------- MOBILE OVERRIDES (HERO) ---------- */
/* Mobile hero styling handled in main hero mobile section above */




/* ===== Product-style Speaking Highlight ===== */
.pm-speak{
  background:var(--bg); min-height:100svh;
  display:grid; place-items:center;
  padding-block: clamp(4rem, 8vh, 7rem);
}
.pm-speak:nth-of-type(even){
  background: var(--bg);
}
.pm-wrap{
  width:min(1200px,92vw); margin-inline:auto;
  display:grid; align-items:center; gap:clamp(20px,5vw,56px);
  grid-template-columns: 1.15fr 1fr;
}
.pm-wrap--reverse{
  grid-template-columns: 1fr 1.15fr;
}
@media (max-width: 900px){ 
  .pm-wrap{ 
    grid-template-columns:1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }
  .pm-wrap--reverse{ 
    grid-template-columns:1fr;
  }
  .pm-speak{
    padding-block: clamp(3rem, 6vh, 5rem);
    min-height: auto;
  }
}

/* text */
.pm-badge{
  display:inline-block; font-weight:var(--font-bold); font-size:.8rem; line-height:1; font-family:inherit;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:#f2f2f2; border:1px solid #e9e9e9;
  padding:.5rem .85rem; border-radius:var(--radius-pill); margin-bottom:1rem;
  transition: background 0.2s var(--transition-smooth), border-color 0.2s var(--transition-smooth);
}
.pm-quote{
  font-family: 'Cormorant', 'Georgia', serif;
  margin:0; color:var(--ink); font-weight:600; line-height:1.05; letter-spacing:-0.03em; position:relative;
}
.pm-quote::before{
  content:""; position:relative; left:-.04em; margin-right:.06em; opacity:.22;
  font-size:1.2em; color:var(--ink);
}
.pm-rule{
  display:block; height:6px; width:86px; margin:.7rem 0 0; border-radius:4px;
  background: var(--rule-grad);
}
.pm-sub{
  font-family: 'Inter', sans-serif;
  color:var(--ink-soft-enhanced); font-size:clamp(1rem,.95rem + .35vw,1.125rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: var(--space-heading-gap) 0 1.25rem; max-width:60ch; line-height:1.6;
}
.pm-cta{ display:flex; gap:.8rem; flex-wrap:wrap }
.pm-cta .btn { min-width: 180px; }

/* media card */
.pm-media{
  margin:0; justify-self:end; max-width:min(640px,92vw);
  border-radius: var(--radius-enhanced);
  overflow:hidden; background:#eef2f6;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.3s var(--transition-smooth), transform 0.3s var(--transition-smooth);
}
.pm-media:hover{
  box-shadow: var(--shadow-hover-soft);
  transform: translateY(-2px);
}
.pm-media img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:4/3 }
@media (max-width:900px){
  .pm-text{ text-align:left; }
  .pm-media{ justify-self:center; }
}

/* optional caption under pm-media */

.pm-media .pm-caption{
  margin:0; padding:.875rem 1.25rem; text-align:right;
  font-size:clamp(.85rem,.8rem + .2vw, .95rem); color: var(--ink-soft);
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
}

/* ---- SF section clean image rules (rounded photo, caption outside) ---- */
.pm-sf .pm-media{
  justify-self:end;
  max-width: min(640px, 92vw);
  margin: 0;
  overflow: visible;           /* allow caption below without clipping */
  background: transparent;     /* no glass behind caption */
  box-shadow: none;            /* shadow handled on img */
  border: 0;                   /* no figure border */
  aspect-ratio: 4 / 5;         /* enforce 4x5 frame */
}
.pm-sf .pm-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;           /* fill the 4x5 frame */
  border-radius: var(--radius-enhanced);
  box-shadow: var(--shadow-soft);
  border: 0;                   /* no edge/border */
  background: transparent;     /* no white halo */
  transition: box-shadow 0.3s var(--transition-smooth), transform 0.3s var(--transition-smooth);
}
.pm-sf .pm-media:hover img{
  box-shadow: var(--shadow-hover-soft);
  transform: scale(1.01);
}
.pm-sf .pm-media .pm-caption{
  margin-top: .55rem;          /* sits outside the photo */
  padding: 0 2px;              /* tiny optical balance */
  text-align: right;
  background: transparent;     /* no white box */
  backdrop-filter: none;       /* no blur effect */
}
@media (max-width:900px){
  .pm-sf .pm-media{ justify-self:center; max-width: 100%; }
}

/* ===== What's Next Section (v2) ===== */
.whats-next{background:var(--bg); padding-block: clamp(4rem, 8vh, 7rem);}
.wn-grid{width:min(1200px,92vw); margin-inline:auto; display:grid; gap:clamp(24px,4vw,48px); grid-template-columns: 1.1fr 1fr; align-items:start}
@media (max-width: 900px){ 
  .wn-grid{ 
    grid-template-columns:1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }
  .whats-next{
    padding-block: clamp(3rem, 6vh, 5rem);
  }
}

/* Left side */
.wn-title{ position:relative; margin-block-start:0; margin-block-end: var(--space-heading-gap); }
.wn-blurb{margin:0 0 1.1rem; color:var(--muted); font-size:clamp(1rem,1rem + .25vw,1.15rem); max-width:60ch}
.wn-cta{display:flex; gap:.7rem; flex-wrap:wrap}

/* Right side cards */
.wn-cards{display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:clamp(14px,2vw,18px)}
@media (max-width:680px){ .wn-cards{ grid-template-columns:1fr; } }
.wn-card{border-radius: var(--radius);
  padding:clamp(16px,2.2vw,22px); background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .25s ease}
.wn-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.wn-card h3{margin:0 0 .2rem; font-weight:var(--font-bold); line-height:var(--leading-tight); font-size:clamp(1.05rem,1rem + .4vw,1.3rem); letter-spacing:-.005em; color:var(--ink)}
.wn-card p{margin:0; color:var(--muted); font-size:clamp(.95rem, .95rem + .2vw, 1.05rem)}


/* ===== Adaptability (v3: text + glass panel) ===== */
.ad--v3{background:var(--bg); padding-block: clamp(4.5rem, 10vh, 8rem);}
.ad3-grid{width:min(1200px,92vw); margin-inline:auto; display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1.1fr 1fr; align-items:start}

/* Typography = Impact side-copy */
.ad3-title{ 
  font-family: 'Cormorant', 'Georgia', serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-block-start:0; margin-block-end: var(--space-heading-gap); 
}
.ad3-par{
  font-family: 'Inter', sans-serif;
  margin: 0 0 1rem;                                      /* keep local rhythm */
  color: var(--muted);                                   /* match pm-sub color */
  font-size: clamp(1rem, .95rem + .35vw, 1.125rem);      /* match pm-sub size */
  font-weight: 300;
  line-height: 1.6;                                      /* same baseline */
  letter-spacing: -0.01em;
  max-width: 60ch;                                       /* match pm-sub measure */
}
.ad3-thrive{color: var(--ink-soft)}

/* Glass panel */
.ad3-panel{
  border-radius:28px; padding:clamp(20px,3.2vw,28px);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:var(--shadow);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.ad3-list{margin:0; padding-left:1.2rem; display:grid; gap:1.1rem; list-style:disc}
.ad3-list li{color:var(--ink); font-size:clamp(16px,1.4vw,22px); line-height:1.6}
.ad3-list li::marker{color: var(--ink)}
.ad3-list strong{font-weight:800; letter-spacing:-.01em}

/* ===== Career slider (adaptability right column) ===== */
.ad3-slider .slider{position:relative; width:min(750px,100%); aspect-ratio:1/1; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background:var(--glass-bg); border:1px solid var(--glass-border)}
.ad3-slider .slides{position:relative; width:100%; height:100%}
.ad3-slider .slide{position:absolute; inset:0; opacity:0; transform:scale(.985); transition:opacity .5s ease, transform .5s ease; display:grid; place-items:center}
.ad3-slider .slide.is-active{opacity:1; transform:none}
.ad3-slider img{display:block; width:100%; height:100%; object-fit:cover}

/* arrows */
.ad3-slider .nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.85); box-shadow:0 6px 16px rgba(0,0,0,.12); font-size:22px; line-height:1; display:grid; place-items:center; cursor:pointer}
.ad3-slider .nav:hover{transform:translateY(-50%) scale(1.04)}
.ad3-slider .nav.prev{left:10px}
.ad3-slider .nav.next{right:10px}

/* dots */
.ad3-slider .dots{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:8px; padding:.25rem .5rem; border-radius:999px; background:rgba(255,255,255,.66); border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 16px rgba(0,0,0,.10)}
.ad3-slider .dot{appearance:none; width:8px; height:8px; border-radius:50%; border:none; background:#7b7b7b; opacity:.65; cursor:pointer}
.ad3-slider .dot.is-active{background:#0b0b0b; opacity:1}

/* === Adaptability image-only badge cards (desktop stack) === */
.ad3-title{ 
  font-family: 'Cormorant', 'Georgia', serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-block-start:0; margin-block-end: var(--space-heading-gap); 
}
.ad3-par{
  font-family: 'Inter', sans-serif;
  margin: 0 0 1rem;                                      /* keep local rhythm */
  color: var(--muted);                                   /* match pm-sub color */
  font-size: clamp(1rem, .95rem + .35vw, 1.125rem);      /* match pm-sub size */
  font-weight: 300;
  line-height: 1.6;                                      /* same baseline */
  letter-spacing: -0.01em;
  max-width: 60ch;                                       /* match pm-sub measure */
}
.ad3-thrive{color: var(--ink-soft)}

/* Glass panel */
.ad3-panel{
  border-radius:28px; padding:clamp(20px,3.2vw,28px);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:var(--shadow);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.ad3-list{margin:0; padding-left:1.2rem; display:grid; gap:1.1rem; list-style:disc}
.ad3-list li{color:var(--ink); font-size:clamp(16px,1.4vw,22px); line-height:1.6}
.ad3-list li::marker{color: var(--ink)}
.ad3-list strong{font-weight:800; letter-spacing:-.01em}

/* ===== Career slider (adaptability right column) ===== */
.ad3-slider .slider{position:relative; width:min(750px,100%); aspect-ratio:1/1; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background:var(--glass-bg); border:1px solid var(--glass-border)}
.ad3-slider .slides{position:relative; width:100%; height:100%}
.ad3-slider .slide{position:absolute; inset:0; opacity:0; transform:scale(.985); transition:opacity .5s ease, transform .5s ease; display:grid; place-items:center}
.ad3-slider .slide.is-active{opacity:1; transform:none}
.ad3-slider img{display:block; width:100%; height:100%; object-fit:cover}

/* arrows */
.ad3-slider .nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.85); box-shadow:0 6px 16px rgba(0,0,0,.12); font-size:22px; line-height:1; display:grid; place-items:center; cursor:pointer}
.ad3-slider .nav:hover{transform:translateY(-50%) scale(1.04)}
.ad3-slider .nav.prev{left:10px}
.ad3-slider .nav.next{right:10px}

/* dots */
.ad3-slider .dots{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:8px; padding:.25rem .5rem; border-radius:999px; background:rgba(255,255,255,.66); border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 16px rgba(0,0,0,.10)}
.ad3-slider .dot{appearance:none; width:8px; height:8px; border-radius:50%; border:none; background:#7b7b7b; opacity:.65; cursor:pointer}
.ad3-slider .dot.is-active{background:#0b0b0b; opacity:1}

/* === Adaptability: image-only badge cards (desktop stack) === */

/* Glassy image badge */
.badge-photo{
  width: var(--badge-size, 240px);
  height: var(--badge-size, 240px);
  border-radius: var(--radius-enhanced);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 0.25s var(--transition-smooth), transform 0.25s var(--transition-smooth);
}
.badge-photo:hover{
  box-shadow: var(--shadow-hover-soft);
  transform: translateY(-2px);
}
.badge-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Stack container (desktop) */
.ad3-cards { position: relative; min-height: 300px; display:block; --badge-size: 280px; }
.ad3-cards .cards{
  position: relative;
  list-style: none; padding: 0; margin: 0;
  width: var(--badge-size, 240px);
  height: var(--badge-size, 240px);
}
.ad3-cards .card{
  position: absolute; inset: 0;
  cursor: pointer; user-select: none;
  transform-origin: 0 0;
  transition:
    transform .6s cubic-bezier(.8,.2,.1,.8) .1s,
    opacity .3s ease,
    box-shadow .25s ease;
  will-change: transform;
}
.ad3-cards .card .badge-photo{ transition: box-shadow .25s ease, transform .25s ease; }

/* Navigation arrow (next only) */
.card-nav{
  display: none;
}
.card-nav svg{
  width: 24px;
  height: 24px;
}
.card-nav:hover{
  color: var(--ink);
  transform: translateY(-50%) translateX(2px);
}
.card-nav:active{
  transform: translateY(-50%) scale(.95);
}
.card-nav--next{
  right: -25px;
}

/* Stack states (desktop) */
.ad3-cards .card{ z-index: 2; transform: translateY(0) rotate(4deg) translateX(25px) scale(1); }
.ad3-cards .card.card--next{ z-index: 5; transform: translateY(-25px) rotate(4deg) translateX(25px) scale(1); }
.ad3-cards .card.card--current{
  position: relative; z-index: 10;
  transform: rotate(-1deg) translateX(0) scale(1);
}
.ad3-cards .card.card--current .badge-photo{ box-shadow: var(--shadow-hover-soft); transform: translateY(-2px); }
.ad3-cards .card.card--out{
  animation: ad3-card-out .6s cubic-bezier(.8,.2,.1,.8);
  transform: translateY(-50px) rotate(8deg) translateX(55px) scale(.95);
  z-index: 1; opacity: .98;
}
@keyframes ad3-card-out {
  0%   { z-index: 20; transform: translateY(0) rotate(-4deg); }
  50%  { transform: translateY(-120%) rotate(-5deg) translateX(-40px); }
  80%  { z-index: 1; }
  100% { transform: translateY(-50px) rotate(8deg) translateX(55px) scale(.95); }
}



/* === Adaptability — Mobile (keep stacked deck, just move it below text) === */
@media (max-width:900px){
  /* 1-col layout: text first, stack below */
  .ad3-grid{ 
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  
  .ad--v3{
    padding-block: clamp(3.5rem, 7vh, 6rem);
  }

  /* Place/size the stacked deck; keep absolute-stack rules untouched */
  .ad3-cards{
    justify-self: center;
    margin-block-start: clamp(24px, 6vw, 32px);
    --badge-size: 240px;
  }

  /* Improve touch interaction */
  .ad3-cards .cards{ touch-action: pan-y; }
  
  /* Better card visibility on mobile */
  .card-nav--next {
    right: -32px;
    width: 44px;
    height: 44px;
  }
  
  .card-nav svg {
    width: 24px;
    height: 24px;
  }
}

/* ========================================
   FEATURED WRITINGS SECTION
   ======================================== */
.writings-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(4rem, 10vh, 9rem) 5vw;
  background: var(--bg);
}

.writings-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.writings-header {
  margin-bottom: 4rem;
  text-align: left;
}

.writings-header .pm-badge {
  margin-bottom: 1rem;
}

.writings-header h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.writings-intro {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--ink-soft-enhanced);
  max-width: 70ch;
  line-height: 1.6;
  margin: 1.5rem 0 0;
}

.writings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.writing-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-enhanced);
  padding: 2rem;
  transition: transform 0.25s var(--transition-smooth), box-shadow 0.25s var(--transition-smooth);
}

.writing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover-soft);
}

.writing-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.writing-card h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 0.875rem;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.writing-excerpt {
  font-size: clamp(0.95rem, 1.5vw, 1rem);
  color: var(--ink-soft-enhanced);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.writing-meta {
  font-size: 0.875rem;
  color: var(--muted);
  font-style: italic;
}

.writings-cta {
  text-align: center;
}

@media (max-width: 768px) {
  .writings-section {
    padding: clamp(2.5rem, 5vh, 4rem) clamp(20px, 5vw, 28px);
    min-height: auto;
  }

  .writings-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .writings-header {
    margin-bottom: 1.5rem;
  }
  
  .writings-container {
    width: 100%;
  }
  
  .writing-card {
    padding: 1.5rem;
  }
  
  .writing-card h3 {
    font-size: 1.25rem;
  }
}

/* ========================================
   ENHANCED ACCESSIBILITY & FOCUS STATES
   ======================================== */

/* Better focus states for keyboard navigation */
.btn:focus-visible,
.side-cta:focus-visible,
.writing-card a:focus-visible,
.card-nav:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: var(--radius-enhanced);
}

/* Smooth transitions for all interactive elements */
a, button, .btn, .card, .writing-card {
  transition-timing-function: var(--transition-smooth);
}

/* Enhanced button hover states */
.btn--primary:hover {
  background: #171717;
  box-shadow: var(--shadow-hover-soft);
  transform: translateY(-2px);
}

.btn--secondary:hover {
  background: rgba(0,0,0,0.04);
  border-color: #d9d9d9;
}

/* Better mobile responsive improvements */
@media (max-width: 900px) {
  :root {
    --radius-enhanced: 12px;
  }
  
  /* Disable hover effects on touch devices */
  .pm-media:hover,
  .writing-card:hover,
  .stat-card:hover {
    transform: none;
  }
  
  /* Improve touch targets */
  .btn {
    min-height: 44px;
  }
  
  /* Better tap feedback */
  .btn:active {
    transform: scale(0.98);
  }
  
  /* Improve readability */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}