/* ==========================================================================
   DISCOVERING VISION — Design System
   Palette: warm white / charcoal base + single accent (ember orange)
   Type: Fraunces (display, editorial serif) / Inter (body) / Space Mono + Caveat (accents)
   ========================================================================== */

:root{
  --paper:#f4f1ec;
  --paper-2:#ece7dd;
  --ink:#171512;
  --ink-soft:#3a362f;
  --charcoal:#1c1a17;
  --charcoal-2:#242019;
  --line: rgba(23,21,18,0.14);
  --line-dark: rgba(244,241,236,0.16);
  --accent:#ff5a2c;
  --accent-2:#ffb37a;
  --cream:#faf8f3;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Space Mono", monospace;
  --hand: "Caveat", cursive;

  --container: min(1400px, 92vw);
  --radius: 4px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .3s;
  --dur: .6s;
  --dur-slow: 1s;
}

*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{ display:none !important; }
html{scroll-behavior:auto; background:var(--paper);}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; background:none; border:none; color:inherit; cursor:pointer;}
ul{list-style:none;}
.mono{font-family:var(--mono); letter-spacing:.02em;}

section{
  position:relative;
  padding: clamp(4rem, 9vw, 8rem) var(--gutter, 6vw);
  max-width:1600px;
  margin:0 auto;
}
@media (max-width:720px){ section{ padding: 3.5rem 6vw; } }

.section-kicker{
  font-size:.75rem;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
  display:inline-block;
}
.section-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.8rem, 4.2vw, 3.4rem);
  line-height:1.08;
  max-width:22ch;
  letter-spacing:-.01em;
}

/* focus states */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ==========================================================================
   LOADER
   ========================================================================== */
#loader{
  position:fixed; inset:0; z-index:999;
  background:var(--charcoal);
  color:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.loader-line{
  font-family:var(--serif);
  font-size:clamp(1.2rem,3vw,1.8rem);
  opacity:0;
  position:absolute;
}
#loader-mark{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.8rem,6vw,3.6rem);
  letter-spacing:.02em;
  opacity:0;
  transform:scale(.94);
}
body.loading{ overflow:hidden; }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
#scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:500;
  background:transparent;
}
#scroll-progress-bar{
  height:100%; width:0%;
  background:var(--accent);
  transition:width .1s linear;
}

/* ==========================================================================
   CUSTOM CURSOR (desktop only)
   ========================================================================== */
#custom-cursor{
  position:fixed; top:0; left:0; z-index:600;
  width:14px; height:14px; border-radius:50%;
  background:var(--accent);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), background var(--dur-fast);
  display:flex; align-items:center; justify-content:center;
  mix-blend-mode:difference;
}
#custom-cursor.grow{ width:64px; height:64px; background:var(--cream); }
#cursor-label{
  font-family:var(--mono); font-size:.65rem; color:var(--ink);
  opacity:0; text-transform:uppercase;
}
#custom-cursor.grow #cursor-label{ opacity:1; }
@media (hover:none), (pointer:coarse){ #custom-cursor{ display:none; } }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:400;
  background:rgba(244,241,236,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:transform var(--dur) var(--ease), background var(--dur);
}
#site-header.hide{ transform:translateY(-100%); }
#site-header.dark{ background:rgba(28,26,23,.82); border-color:var(--line-dark); color:var(--cream); }
.nav-inner{
  max-width:1600px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 6vw;
}
.nav-logo{ font-family:var(--serif); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; }
.nav-links{ display:flex; gap:2.2rem; font-size:.85rem; }
.nav-links a{ position:relative; padding:.2rem 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0%;
  background:var(--accent); transition:width var(--dur-fast) var(--ease);
}
.nav-links a:hover::after{ width:100%; }
@media (max-width:900px){ .nav-links{ display:none; } }

#menu-toggle{
  display:none; flex-direction:column; gap:5px; width:28px;
}
#menu-toggle span{ height:2px; background:currentColor; transition:transform .3s var(--ease), opacity .3s; }
@media (max-width:900px){ #menu-toggle{ display:flex; } }
#menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
#menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

#mobile-menu{
  position:fixed; inset:0; z-index:399;
  background:var(--charcoal); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:8vh 8vw;
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
}
#mobile-menu.open{ transform:translateY(0); }
#mobile-menu nav{ display:flex; flex-direction:column; gap:1.4rem; }
#mobile-menu a{
  font-family:var(--serif); font-size:clamp(1.8rem,8vw,3rem);
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line-dark); padding-bottom:.5rem;
}
#mobile-menu a span{ font-family:var(--mono); font-size:.9rem; color:var(--accent); }
.mobile-menu-foot{ margin-top:3rem; opacity:.6; max-width:32ch; font-size:.85rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
#hero{
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:8rem;
  overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; max-width:780px; }
.eyebrow{ font-size:.75rem; color:var(--accent); text-transform:uppercase; display:block; margin-bottom:1.5rem; }
.hero-headline{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.4rem, 6.6vw, 5.4rem);
  line-height:1.02; letter-spacing:-.02em;
}
.hero-headline .line{ display:block; overflow:hidden; }
.hero-headline em{ font-style:italic; color:var(--accent); }
.hero-sub{
  font-size:clamp(1rem,1.4vw,1.2rem); max-width:46ch; margin:1.8rem 0 2.4rem; color:var(--ink-soft);
}
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.hero-tagline{ font-size:.85rem; color:var(--ink-soft); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.8rem; font-size:.9rem; border-radius:100px;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast);
}
.btn-primary{ background:var(--ink); color:var(--cream); }
.btn-primary:hover{ background:var(--accent); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--cream); transform:translateY(-2px); }

.hero-collage{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.collage-tile{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  transform:rotate(var(--r));
  will-change:transform;
}
.tile-frame{
  aspect-ratio:4/5; border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--paper-2);
  display:flex; align-items:flex-end; padding:.7rem;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.25);
}
.tile-social{ background:linear-gradient(155deg,#e7dfd0,#cfc4ac); }
.tile-linkedin{ background:linear-gradient(155deg,#dce3e6,#aebcc2); aspect-ratio:1/1.1; }
.tile-photo{ background:linear-gradient(155deg,#ece4d8,#d8c9ad); }
.tile-note{ background:var(--accent-2); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:1rem; }
.tile-web{ background:linear-gradient(155deg,#2a2622,#151310); aspect-ratio:16/10; }
.tile-web .tile-tag{ color:var(--cream); }
.tile-reel{ background:linear-gradient(155deg,#171512,#3a362f); aspect-ratio:9/16; }
.tile-reel .tile-tag{ color:var(--cream); }
.tile-campaign{ background:linear-gradient(155deg,#f0d9c8,#e0a97e); }
.tile-tag{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; color:var(--ink-soft); }
.tile-handwritten{ font-family:var(--hand); font-size:1.3rem; color:var(--ink); text-align:center; }
@media (max-width:900px){ .hero-collage{ opacity:.35; } }

/* ==========================================================================
   RELATIONSHIPS / MARQUEE
   ========================================================================== */
#relationships{ text-align:center; }
.client-marquee-wrap{ overflow:hidden; margin:3rem 0 1.5rem; -webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); }
.client-marquee{
  display:flex; align-items:center; gap:4.5rem; width:max-content;
  animation:marquee 32s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.client-slot{ font-size:1rem; white-space:nowrap; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; width:180px; height:72px; flex:0 0 auto; }
.client-slot img{
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(1) opacity(.6);
  transition:filter var(--dur-fast) var(--ease);
}
.client-slot img:hover{ filter:grayscale(0) opacity(1); }
.relationships-note{ font-size:.8rem; color:var(--ink-soft); opacity:.75; }
@media (prefers-reduced-motion:reduce){ .client-marquee{ animation:none; overflow-x:auto; } }

/* ==========================================================================
   CAPABILITIES
   ========================================================================== */
.capability-system{ margin-top:3rem; border-top:1px solid var(--line); }
.capability-trigger{
  width:100%; text-align:left;
  display:grid; grid-template-columns:3rem 1fr auto; gap:1.5rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid var(--line);
  transition:padding-left var(--dur-fast) var(--ease);
}
.capability-trigger:hover{ padding-left:1rem; }
.cap-index{ color:var(--accent); font-size:.9rem; }
.cap-name{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2rem); }
.cap-line{ color:var(--ink-soft); font-size:.85rem; max-width:26ch; text-align:right; display:none; }
@media (min-width:700px){ .cap-line{ display:block; } }
.capability-panel{
  overflow:hidden; padding:.5rem 2rem 3rem 4.5rem;
}
.cap-desc{
  font-size:1.1rem; line-height:1.7; color:var(--ink-soft);
  max-width:62ch; margin-bottom:2rem;
}
.cap-list-label{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem; display:block;
}
.cap-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 2rem;
  font-size:.9rem; line-height:1.5;
}
.cap-list li{ position:relative; padding-left:1.1rem; }
.cap-list li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }
@media (max-width:900px){ .cap-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){
  .capability-panel{ padding:.5rem 1.5rem 2.5rem 0; }
  .cap-list{ grid-template-columns:1fr; }
}

/* ==========================================================================
   OUR WORK — videos + images, shown directly (no cards, no modal)
   ========================================================================== */
.work-videos{ margin-top:2.5rem; display:flex; flex-direction:column; gap:3rem; }
.video-group-title{
  font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.8rem);
  margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--line);
}
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.video-tile{
  border-radius:6px; overflow:hidden; border:1px solid var(--line);
  background:var(--paper-2);
}
.video-tile iframe{ width:100%; aspect-ratio:16/9; display:block; border:0; }
@media (max-width:1000px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .video-grid{ grid-template-columns:1fr; } }

.work-images-head{ margin-top:4rem; }
.work-images{
  margin-top:1.2rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
}
@media (max-width:1100px){ .work-images{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .work-images{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .work-images{ grid-template-columns:1fr; } }

/* Cover tile — one per carousel, opens the lightbox on click */
.image-cover-tile{
  position:relative; aspect-ratio:var(--slide-aspect, 4/5);
  border-radius:6px; overflow:hidden; border:1px solid var(--line);
  background:var(--paper-2); cursor:pointer;
  transition:transform var(--dur-fast) var(--ease);
}
.image-cover-tile:hover{ transform:translateY(-4px); }
.image-cover-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.image-cover-meta{
  position:absolute; left:0; right:0; bottom:0; padding:.8rem .9rem;
  background:linear-gradient(0deg, rgba(23,21,18,.85), transparent);
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  text-align:left;
}
.image-cover-title{ color:var(--cream); font-size:.8rem; font-family:var(--sans); line-height:1.25; }
.image-cover-count{ color:var(--accent-2); font-size:.65rem; text-transform:uppercase; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{ position:fixed; inset:0; z-index:800; display:flex; align-items:center; justify-content:center; }
.lightbox[hidden]{ display:none; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(23,21,18,.92); }
.lightbox-stage{
  position:relative; z-index:1; max-width:min(640px,84vw); max-height:84vh;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.lightbox-stage img{ max-width:100%; max-height:74vh; border-radius:6px; object-fit:contain; }
.lightbox-caption{ color:var(--cream); font-size:.75rem; opacity:.8; }
.lightbox-close{
  position:absolute; top:1.2rem; right:1.5rem; z-index:2; font-size:2rem; line-height:1;
  color:var(--cream); width:44px; height:44px; border-radius:50%;
}
.lightbox-close:hover{ background:rgba(250,248,243,.1); }
.lightbox-nav{
  position:relative; z-index:1; flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-dark); background:rgba(250,248,243,.08); color:var(--cream);
  font-size:1.6rem; line-height:1; margin:0 1rem;
  transition:background var(--dur-fast);
}
.lightbox-nav:hover{ background:rgba(250,248,243,.2); }
@media (max-width:700px){
  .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); margin:0; }
  .lightbox-prev{ left:.5rem; }
  .lightbox-next{ right:.5rem; }
}

/* ==========================================================================
   PERSONAL BRANDING SYSTEM
   ========================================================================== */
#personal-branding{ background:var(--charcoal); color:var(--cream); border-radius:16px; margin:2rem auto; }
#personal-branding .section-kicker{ color:var(--accent-2); }
.pb-lead{ max-width:52ch; margin:1.5rem 0 3rem; color:rgba(250,248,243,.75); font-size:1.05rem; }
.pb-system{
  position:relative; width:100%; max-width:640px; aspect-ratio:1/1; margin:2rem auto;
}
.pb-connectors circle{
  fill:none; stroke:rgba(250,248,243,.18); stroke-width:.4;
  stroke-dasharray:2 3;
}
.pb-connectors{
  position:absolute; inset:0;
  animation:pb-rotate 40s linear infinite;
  transform-origin:50% 50%;
}
@keyframes pb-rotate{ to{ transform:rotate(360deg); } }

.pb-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  color:var(--charcoal); font-size:.7rem; letter-spacing:.05em;
  box-shadow:0 0 0 0 rgba(255,90,44,.5);
  animation:pb-pulse 3s ease-in-out infinite;
}
@keyframes pb-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(255,90,44,.4); }
  50%{ box-shadow:0 0 0 18px rgba(255,90,44,0); }
}

.pb-node{
  position:absolute; top:50%; left:50%;
  --angle: calc(var(--a) * (360deg / 11));
  transform:
    rotate(var(--angle))
    translate(min(42vw,260px))
    rotate(calc(-1 * var(--angle)))
    translate(-50%,-50%);
  font-size:.8rem; text-align:center; white-space:nowrap;
  border:1px solid var(--line-dark); border-radius:100px; padding:.5rem 1rem;
  background:rgba(250,248,243,.05);
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  animation:pb-glow 6s ease-in-out infinite;
  animation-delay:calc(var(--a) * -0.5s);
}
@keyframes pb-glow{
  0%, 100%{ border-color:var(--line-dark); background:rgba(250,248,243,.05); }
  50%{ border-color:var(--accent-2); background:rgba(255,179,122,.12); }
}
.pb-node:hover{
  background:var(--accent) !important; border-color:var(--accent) !important; color:var(--charcoal);
  animation-play-state:paused;
}
.pb-close{ text-align:center; margin-top:2.5rem; font-size:1.1rem; color:var(--accent-2); }
@media (max-width:640px){
  .pb-system{ aspect-ratio:auto; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; padding:2rem 0; }
  .pb-node{ position:static; transform:none; }
  .pb-connectors, .pb-core{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pb-connectors, .pb-core, .pb-node{ animation:none; }
}

/* ==========================================================================
   THINKING / PRINCIPLES
   ========================================================================== */
.principles{ margin-top:3rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.principle{ background:var(--paper); padding:2.4rem; position:relative; }
.principle::before{
  content:attr(data-n); position:absolute; top:1.5rem; right:1.8rem;
  font-family:var(--mono); font-size:.75rem; color:var(--accent);
}
.principle h3{ font-family:var(--serif); font-size:1.5rem; margin-bottom:.7rem; max-width:18ch; }
.principle p{ color:var(--ink-soft); font-size:.95rem; max-width:36ch; }
@media (max-width:700px){ .principles{ grid-template-columns:1fr; } }

/* ==========================================================================
   PROCESS
   ========================================================================== */
#process{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.process-object{ width:120px; height:120px; margin:2rem 0 1rem; }
.process-object-core{
  width:100%; height:100%; border-radius:50%;
  background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--ink), var(--accent));
  transition:transform 1s var(--ease), border-radius 1s var(--ease);
}
.process-rail{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); width:100%; margin-top:1rem;
}
.process-step{ background:var(--paper); padding:1.6rem 1.2rem; text-align:left; transition:background var(--dur-fast); }
.process-step:hover{ background:var(--paper-2); }
.process-step .mono{ color:var(--accent); font-size:.75rem; }
.process-step h3{ font-family:var(--serif); font-size:1.15rem; margin:.5rem 0; }
.process-step p{ font-size:.8rem; color:var(--ink-soft); }
@media (max-width:900px){ .process-rail{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .process-rail{ grid-template-columns:1fr; } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:4rem; margin-top:2rem; align-items:start; }
.about-copy{ display:flex; flex-direction:column; gap:1.2rem; max-width:62ch; font-size:1.05rem; color:var(--ink-soft); }
.about-visual{
  position:relative; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
  padding:3rem 2.2rem; border-radius:12px;
  background:linear-gradient(160deg, var(--paper-2), #dcd0b4);
  min-height:280px;
}
.about-pullquote{
  font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1.35; color:var(--ink); font-style:italic;
}
.about-pullquote em{ color:var(--accent); font-style:italic; }
.about-visual-tag{
  position:absolute; bottom:1.6rem; right:2rem;
  font-size:1.2rem; color:var(--ink); transform:rotate(-3deg);
}
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:2rem; }
  .about-visual{ min-height:200px; }
}
.about-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.stat-num{ display:block; font-family:var(--serif); font-size:2rem; }
.stat-label{ font-size:.75rem; color:var(--ink-soft); }

/* ==========================================================================
   FOUNDERS
   ========================================================================== */
.founders-line{ margin:1.5rem 0 3rem; font-size:1.1rem; color:var(--accent); }
.founders-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:3rem; }
.founder-card{ display:flex; flex-direction:column; gap:1rem; }
.founder-photo{
  aspect-ratio:4/5; border-radius:8px;
  object-fit:cover; object-position:top center;
  background:linear-gradient(160deg,var(--paper-2),#c9bd9f);
}
.founder-photo[data-placeholder]{
  position:relative; display:flex; align-items:flex-end; padding:1rem;
}
.founder-photo[data-placeholder]::after{
  content:attr(data-placeholder); font-family:var(--mono); font-size:.7rem; color:var(--ink-soft);
}
.founder-card h3{ font-family:var(--serif); font-size:1.6rem; margin-top:.5rem; }
.founder-role{ color:var(--accent); font-size:.8rem; }
.founder-bio{ color:var(--ink-soft); font-size:.95rem; }
.founder-links{ display:flex; gap:1rem; font-size:.8rem; }
.founder-links a{ border-bottom:1px solid var(--line); }
@media (max-width:700px){ .founders-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem; }
.testimonial-card{ border:1px solid var(--line); padding:1.8rem; border-radius:6px; }
.testimonial-card blockquote{ font-family:var(--serif); font-size:1.1rem; margin-bottom:1rem; }
.testimonial-card figcaption{ font-size:.8rem; color:var(--ink-soft); }
@media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
#contact{ text-align:center; }
.contact-sub{ max-width:50ch; margin:1.2rem auto 2.5rem; color:var(--ink-soft); font-size:1.05rem; }
.contact-ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.contact-details{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem 2rem; max-width:900px; margin:0 auto; text-align:left; font-size:.85rem; }
.contact-details div{ border-top:1px solid var(--line); padding-top:.7rem; display:flex; flex-direction:column; align-items:flex-start; }
.contact-details span{ display:block; color:var(--accent); font-size:.7rem; text-transform:uppercase; margin-bottom:.3rem; }
.contact-details a{ word-break:break-word; }
@media (max-width:700px){ .contact-details{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
#site-footer{ background:var(--charcoal); color:var(--cream); padding:4rem 6vw 2rem; }
.footer-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }
.footer-word{ font-family:var(--serif); font-size:clamp(1.8rem,6vw,3.2rem); cursor:pointer; }
.footer-back{ font-size:.85rem; border-bottom:1px solid var(--line-dark); }
.footer-grid{ display:flex; gap:5rem; flex-wrap:wrap; margin-bottom:3rem; }
.footer-grid p{ color:var(--accent); font-size:.75rem; margin-bottom:.8rem; }
.footer-grid a{ display:block; font-size:.9rem; opacity:.8; margin-bottom:.5rem; }
.footer-grid a:hover{ opacity:1; }
.footer-legal{ font-size:.7rem; opacity:.5; border-top:1px solid var(--line-dark); padding-top:1.5rem; }

#easter-egg-overlay{
  position:fixed; inset:0; z-index:900; background:var(--accent); color:var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem;
  cursor:pointer;
}
#easter-egg-overlay p:first-child{ font-family:var(--serif); font-size:clamp(1.6rem,5vw,3rem); }

/* ==========================================================================
   REVEAL ANIMATION HOOKS (progressive; toggled by script.js / GSAP)
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(24px); }
[data-reveal].is-visible{ opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}