/* ─── Saya Mogra · Portfolio · Studio Morning ─── */

:root{
  --base:#FBF9F4;
  --paper:#F2EDE3;
  --ink:#1F1A14;
  --ink-soft:#3A332A;
  --mute:#7A7165;
  --walnut:#8B6F4E;
  --walnut-deep:#6B5238;
  --peach:#F4B89C;
  --peach-deep:#E89876;
  --sage:#9DB496;
  --butter:#F1D98A;
  --line:rgba(31,26,20,.12);
  --hairline:rgba(31,26,20,.08);
  --serif: 'Fraunces', 'Tiempos', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --hand: 'Caveat', 'Bradley Hand', cursive;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:var(--sans);
  background:var(--base);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* paper grain */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(244,184,156,.10), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(157,180,150,.08), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
  background-size: auto, auto, 240px 240px;
  mix-blend-mode:multiply;
  opacity:.55;
}

::selection{background:var(--peach);color:var(--ink)}

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

/* ── Type ── */
.serif{font-family:var(--serif);font-feature-settings:"ss01","ss02"}
.hand{font-family:var(--hand)}
.mono{font-family:var(--mono)}

h1,h2,h3{font-family:var(--serif);font-weight:430;letter-spacing:-.025em;margin:0;line-height:1.0}
h1{font-size:clamp(36px, 5.0vw, 80px)}
h2{font-size:clamp(30px, 4.0vw, 64px)}
h3{font-size:clamp(22px, 2.2vw, 38px)}

p{margin:0;line-height:1.5}

/* ── Custom cursor ── */
.cursor-dot{
  position:fixed;left:0;top:0;
  width:10px;height:10px;border-radius:50%;
  background:var(--ink);
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), background .2s, opacity .2s;
  mix-blend-mode:difference;
}
.cursor-dot.expand{width:64px;height:64px;background:var(--peach);mix-blend-mode:normal}
.cursor-dot .lbl{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:500 10px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  opacity:0;white-space:nowrap;
}
.cursor-dot.expand .lbl{opacity:1}
@media (hover:none){.cursor-dot{display:none}}

/* ── Nav ── */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  font:500 13px/1 var(--sans);letter-spacing:.01em;
  transition: padding .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.nav > *{pointer-events:auto}
.nav .mono-stamp{font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--ink-soft)}
.nav .pill{
  display:flex;align-items:center;gap:24px;
  background:rgba(250,246,238,.7);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:10px 20px;
  transition: box-shadow .35s ease, background .35s ease;
}
.nav .pill a{position:relative;padding:4px 2px}
.nav .pill a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav .pill a:hover::after{transform:scaleX(1)}
.nav.scrolled .pill{
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  background:rgba(255,253,247,.92);
}
.nav .brand{
  font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.02em;
  display:flex;align-items:center;gap:8px;
}
.nav .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--peach);display:inline-block}

/* ── Sections ── */
section{position:relative;z-index:2}

.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.wrap-wide{max-width:1480px;margin:0 auto;padding:0 40px}

/* ── Hero ── */
.hero{
  min-height:100vh;
  padding:180px 0 120px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero .stage{position:relative;width:100%;max-width:1200px;text-align:center;z-index:5}
.hero h1{font-size:clamp(34px, 4.4vw, 64px) !important;line-height:1.18 !important;max-width:18ch;margin:0 auto}
.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em}
.hero h1 .word > span{display:inline-block;will-change:transform;transform:translateY(110%)}
.hero .alive{
  position:relative;display:inline-block;font-style:italic;
  cursor:pointer;
}
.hero .alive::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.10em;height:.42em;
  background:var(--peach);opacity:.55;z-index:-1;
  transform-origin:left;transform:scaleX(0);
}
.hero .alive .video-swap{
  display:none;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120%;height:120%;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,var(--peach),var(--butter));
  border:6px solid var(--base);
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.hero .alive:hover .video-swap{display:flex;align-items:center;justify-content:center}
.hero .alive .video-swap .placeholder-label{font:500 10px/1 var(--mono);color:var(--ink);background:var(--base);padding:6px 8px;border-radius:6px}

.hero .sub{
  max-width:680px;margin:32px auto 0;
  font-size:18px;line-height:1.55;color:var(--ink-soft);
}
.hero .scroll-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.hero .scroll-cue .arrow{width:1px;height:38px;background:var(--ink);position:relative}
.hero .scroll-cue .arrow::after{content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%,50%) rotate(45deg);width:6px;height:6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}

/* desk objects */
.prop{position:absolute;will-change:transform;pointer-events:none;user-select:none}
.prop .placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:500 10px/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-soft);
  border-radius:10px;
  background:
    repeating-linear-gradient(45deg, rgba(31,26,20,.06) 0 6px, transparent 6px 12px),
    var(--paper);
  border:1px solid var(--hairline);
  box-shadow:0 18px 40px -20px rgba(31,26,20,.35), 0 2px 4px rgba(31,26,20,.06);
  padding:8px 10px;
}
.prop.notebook .placeholder{width:240px;height:170px;border-radius:6px;background:
  repeating-linear-gradient(180deg, transparent 0 22px, rgba(31,26,20,.10) 22px 23px),
  #FBF9F2;
}
.prop.coffee .placeholder{width:120px;height:130px;border-radius:50% 50% 12px 12px / 18% 18% 12px 12px;background:
  radial-gradient(ellipse at 50% 12%, rgba(31,26,20,.65) 0 28%, rgba(255,255,255,.0) 30%),
  linear-gradient(#F8F2E6,#EAD9BE);}
.prop.pencil .placeholder{width:180px;height:18px;border-radius:4px;background:linear-gradient(90deg,#E4B580 0 8%, #FFF1B8 8% 70%, #C97B5B 70% 86%, #1F1A14 86% 100%);}
.prop.sticky .placeholder{width:140px;height:140px;border-radius:2px;background:#FFE38C;color:#5A4515;font-family:var(--hand);font-size:18px;letter-spacing:0;text-transform:none;box-shadow:0 14px 30px -10px rgba(0,0,0,.18);}
.prop.sticky.pink .placeholder{background:#F8C2C9;color:#6B2530}
.prop.plant .placeholder{width:140px;height:170px;border-radius:50% 50% 14px 14px;background:
  radial-gradient(ellipse at 50% 30%, #6E8F6A 0 38%, transparent 39%),
  linear-gradient(#C97B5B,#A85C3D);
}
.prop.macbook .placeholder{width:300px;height:200px;border-radius:10px;background:linear-gradient(180deg,#2A2622 0 88%, #C7BFB3 88% 100%)}
.prop.headphones .placeholder{width:170px;height:150px;border-radius:50%/40%;background:radial-gradient(circle at 50% 50%, transparent 0 38%, #1F1A14 39% 50%, transparent 51%)}
.prop.speaker .placeholder{width:120px;height:120px;border-radius:18px;background:repeating-radial-gradient(circle at 50% 50%, #2A2622 0 2px, #3A3530 2px 4px)}
.prop.ticket .placeholder{width:200px;height:80px;background:linear-gradient(90deg, #FFF8E8 0 75%, transparent 75% 78%, #FFF8E8 78%);border-left:6px dashed #E5DAC2;font-family:var(--mono);font-size:9px}
.prop.tape .placeholder{width:120px;height:32px;background:rgba(241,217,138,.55);border:none;box-shadow:none;border-radius:0}
.prop.label{position:absolute;font:500 9px/1 var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase;left:0;bottom:-16px;white-space:nowrap}

/* ── Sticker (SVG decorations) ── */
.sticker{position:absolute;will-change:transform;pointer-events:none;color:var(--walnut);}
.sticker svg{display:block;overflow:visible}

/* ── Marquee ── */
.marquee{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;
  background:var(--paper);
}
.marquee .track{display:flex;gap:48px;white-space:nowrap;will-change:transform}
.marquee .item{display:inline-flex;align-items:center;gap:48px;font-family:var(--serif);font-size:34px;font-style:italic;color:var(--ink)}
.marquee .item .dot{width:9px;height:9px;border-radius:50%;background:var(--peach)}

/* ── Intro ── */
.intro{padding:200px 0 160px;position:relative}
.intro .lead{font-family:var(--serif);font-size:clamp(34px,4.2vw,68px);line-height:1.0;letter-spacing:-.03em;max-width:1100px}
.intro .lead em{font-style:italic;color:var(--walnut)}
.intro .body{
  display:grid;grid-template-columns: 1.5fr 320px;gap:80px;
  margin-top:64px;align-items:start;
}
.intro .body p{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.tool-chip, .scene .tag, .pill-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:#F0EBE0;color:#3A2E20;border:1px solid #E5DCC8;
  font:500 12px/1 var(--mono);letter-spacing:.04em;
  padding:6px 12px;border-radius:999px;
}
.tool-chip .swatch{width:9px;height:9px;border-radius:3px;background:#3A2E20}
.tool-chip-old{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 10px;border-radius:999px;
  background:var(--paper);border:1px solid var(--hairline);
  font:500 13px/1.4 var(--sans);
  vertical-align:baseline;margin:0 2px;
}
.tool-chip .swatch{width:10px;height:10px;border-radius:3px;background:var(--peach)}

.portrait-wrap{position:relative;width:300px;max-width:300px;margin:0 auto;justify-self:center}
.portrait{
  position:relative;width:100%;aspect-ratio: 4/5;
  background:#FFF;
  padding:14px 14px 56px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.30), 0 6px 14px -8px rgba(0,0,0,.18);
  transform:rotate(-4deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
.portrait-wrap:hover .portrait{transform:rotate(0deg) translateY(-6px)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.portrait .pin{position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #FF8B7A 0 30%, #C44A3A 70%);box-shadow:0 4px 8px rgba(0,0,0,.3);z-index:2}
.portrait .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--hand);font-size:20px;color:#3A332A}
.portrait-wrap .doodle{position:absolute;left:-30px;bottom:-20px;font-family:var(--hand);font-size:18px;color:var(--walnut);white-space:nowrap}
.portrait-wrap .doodle-arrow{position:absolute;right:-110px;top:30%}

/* stat row */
.stats{
  margin-top:90px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stats .cell{padding:28px 20px;border-right:1px solid var(--line);}
.stats .cell:last-child{border-right:none}
.stats .num{font-family:var(--serif);font-size:64px;line-height:1;letter-spacing:-.02em}
.stats .lbl{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-top:10px}
.stats .sub{font-size:14px;color:var(--ink-soft);margin-top:6px}

/* ── Project scenes (pinned) ── */
.scenes{position:relative}
.scene{
  position:relative;
  min-height:100vh;
  padding:120px 0;
  border-top:1px solid var(--line);
}
.scene .scene-inner{
  display:grid;grid-template-columns: 1fr 1.3fr;gap:60px;align-items:center;
}
.scene .meta{position:relative}
.scene .num{font-family:var(--serif);font-size:140px;line-height:.9;letter-spacing:-.04em;color:var(--walnut);font-weight:300}
.scene .name{font-family:var(--serif);font-size:58px;line-height:1;letter-spacing:-.025em;margin-top:6px}
.scene .head{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink-soft);margin-top:18px;max-width:30ch}
.scene .desc{margin-top:18px;font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:40ch}
.scene .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.scene .tag{font-family:var(--mono) !important}
.scene .metric{
  margin-top:24px;display:inline-block;position:relative;
  font-family:var(--hand);font-size:30px;color:var(--ink);
  padding:6px 16px;
}
.scene .metric svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scene .visit{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:28px;
  padding:14px 22px;
  border-radius:999px;
  background:var(--ink);color:var(--base);
  font:500 13px/1 var(--sans);letter-spacing:.02em;
  position:relative;
}
.scene .visit:hover{background:var(--walnut)}
.scene .visit .arrow{display:inline-block;transition:transform .3s}
.scene .visit:hover .arrow{transform:translateX(4px)}

.frame{
  position:relative;
  border-radius:14px;overflow:hidden;
  background:var(--paper);
  box-shadow:0 60px 90px -40px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.08);
  border:1px solid rgba(31,26,20,.1);
}
.frame .titlebar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:linear-gradient(#F0EADF,#E5DCCB);
  border-bottom:1px solid rgba(31,26,20,.1);
}
.frame .traffic{display:flex;gap:6px}
.frame .traffic span{width:11px;height:11px;border-radius:50%;display:block}
.frame .traffic .r{background:#E66961}.frame .traffic .y{background:#E2B65C}.frame .traffic .g{background:#9DB496}
.frame .url{
  flex:1;display:flex;justify-content:center;
  font:500 12px/1 var(--mono);color:var(--ink-soft);
  background:rgba(255,255,255,.6);border-radius:6px;padding:5px 10px;
  border:1px solid rgba(31,26,20,.06);
}
.frame .body{aspect-ratio:16/10;position:relative;overflow:hidden}
.frame .placeholder-screen{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(45deg, rgba(31,26,20,.05) 0 8px, transparent 8px 16px),
    var(--paper);
  display:flex;align-items:center;justify-content:center;
  font:500 11px/1 var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase;
}

.scene-prop{position:absolute;z-index:3;pointer-events:none}

/* ── Bulletin board ── */
.bulletin{
  padding:200px 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(244,184,156,.12), transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, rgba(139,111,78,.06) 0 1px, transparent 1px 4px),
    #E8DDC9;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bulletin .heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bulletin h2{flex:1;min-width:300px}
.bulletin .filter{display:flex;flex-wrap:wrap;gap:8px}
.bulletin .filter button{
  appearance:none;border:1px solid rgba(31,26,20,.18);background:rgba(255,253,247,.6);
  padding:8px 14px;border-radius:999px;
  font:500 12px/1 var(--sans);color:var(--ink);cursor:pointer;
  transition: all .25s;
}
.bulletin .filter button:hover{background:#fff}
.bulletin .filter button.on{background:var(--ink);color:var(--base);border-color:var(--ink)}

.board{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:40px 28px;
}
.pin-card{
  position:relative;
  transform-origin: 50% 0%;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
.pin-card .thumb{
  position:relative;aspect-ratio: 4/3;border-radius:4px;overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(31,26,20,.06) 0 6px, transparent 6px 12px),
    var(--paper);
  border:1px solid var(--hairline);
  box-shadow:0 20px 30px -16px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  font:500 10px/1.4 var(--mono);color:var(--mute);text-align:center;padding:10px;
}
.pin-card .pin{
  position:absolute;left:50%;top:-10px;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FF8B7A 0 30%, #C44A3A 70%);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  z-index:2;
}
.pin-card .note{
  position:absolute;left:50%;bottom:-8px;transform:translate(-50%,100%) rotate(-2deg);
  background:#FFE38C;
  padding:10px 14px;
  font-family:var(--hand);font-size:18px;color:#5A4515;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.25);
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.pin-card .note{display:none}
.pin-card .thumb .view-arrow{
  position:absolute;right:12px;bottom:12px;
  font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,253,247,.85);padding:6px 9px;border-radius:999px;
  opacity:0;transform:translateY(4px);transition:opacity .25s, transform .25s ease;
  border:1px solid rgba(31,26,20,.12);
}
.pin-card{transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s, box-shadow .35s}
.pin-card:hover{transform: rotate(0deg) translateY(-8px) !important;filter:brightness(.95) saturate(1.05)}
.pin-card:hover .thumb{box-shadow:0 30px 50px -20px rgba(31,26,20,.4), 0 8px 18px rgba(31,26,20,.12)}
.pin-card:hover .thumb .view-arrow{opacity:1;transform:translateY(0)}
.pin-card .yr{margin-top:8px;font:500 10px/1 var(--mono);color:var(--mute);letter-spacing:.08em;text-align:center}

/* ── Process ── */
.process{padding:200px 0;position:relative}
.process .pillars{
  margin-top:80px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.pillar{
  position:relative;
  background:var(--paper);border:1px solid var(--hairline);border-radius:10px;
  padding:28px;
  box-shadow:0 20px 40px -30px rgba(0,0,0,.25);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.pillar:hover{transform:translateY(-6px)}
.pillar .num-h{font-family:var(--hand);font-size:64px;line-height:.9;color:var(--walnut)}
.pillar .step{
  margin-top:14px;font:500 11px/1 var(--mono);color:var(--mute);
  letter-spacing:.08em;text-transform:uppercase;
}
.pillar h3{font-size:30px;margin-top:6px}
.pillar p{margin-top:16px;color:var(--ink-soft);font-size:15px;line-height:1.55}
.pillar .visual{
  margin-top:24px;height:160px;border-radius:8px;
  background:
    repeating-linear-gradient(45deg, rgba(31,26,20,.06) 0 6px, transparent 6px 12px),
    #F8F2E6;
  display:flex;align-items:center;justify-content:center;
  font:500 10px/1 var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--hairline);
}

/* ── Terminal ── */
.terminal-section{padding:80px 0 120px;position:relative}
.terminal{
  max-width:760px;margin:0 auto;
  border-radius:14px;overflow:hidden;
  background:#1B1812;color:#EFE6D6;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 60px 100px -40px rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.18);
  font-family:var(--mono);
  position:relative;
  transform: rotate(-1deg);
}
.terminal .tbar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:#2A2620;border-bottom:1px solid rgba(255,255,255,.05);
}
.terminal .tbar .traffic span{width:11px;height:11px;border-radius:50%;display:block}
.terminal .tbar .ttl{flex:1;text-align:center;font-size:11px;color:rgba(255,255,255,.5)}
.terminal .body{padding:24px;font-size:14px;line-height:1.7;min-height:340px}
.terminal .prompt{color:#9DB496}
.terminal .cmd{color:#EFE6D6}
.terminal .ans{color:#F4B89C;display:block;padding-left:18px}
.terminal .cursor-blink{display:inline-block;width:8px;height:14px;background:#EFE6D6;vertical-align:middle;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── Wall of love ── */
.testimonials{padding:200px 0 120px;position:relative;overflow:hidden}
.testimonials h2{text-align:center}
.testimonials .row{
  margin-top:60px;display:flex;gap:24px;will-change:transform;
}
.t-card{
  flex:0 0 auto;width:380px;
  padding:28px;
  border-radius:6px;
  background:#FFE38C;
  color:#3F2E0F;
  box-shadow:0 30px 50px -30px rgba(0,0,0,.3);
  position:relative;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.t-card:nth-child(2n){background:#F8C2C9;color:#5A1F2A;transform:rotate(-1.5deg)}
.t-card:nth-child(3n){background:#C7DAB6;color:#2C4422;transform:rotate(1deg)}
.t-card:nth-child(5n){background:#FCE6C2;color:#5A3D14;transform:rotate(-.8deg)}
.t-card:hover{transform:rotate(0)!important;translate:0 -6px}
.t-card .stars{font:500 14px/1 var(--mono);letter-spacing:.18em}
.t-card .quote{margin-top:14px;font-family:var(--serif);font-size:18px;line-height:1.45;font-style:italic}
.t-card .who{margin-top:18px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ── Numbers ── */
.numbers{padding:160px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.numbers .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.numbers .cell{padding:0 30px;border-right:1px solid var(--line)}
.numbers .cell:last-child{border-right:none}
.numbers .big{font-family:var(--serif);font-size:clamp(60px, 8vw, 132px);line-height:.9;letter-spacing:-.04em}
.numbers .lbl{margin-top:14px;font:500 13px/1 var(--sans)}
.numbers .sub{margin-top:6px;font:400 12px/1.3 var(--mono);color:var(--mute);letter-spacing:.04em}

/* ── Contact ── */
.contact{padding:200px 0;position:relative}
.contact .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;margin-top:48px}
.contact h2{max-width:14ch}
.contact .sub{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:48ch;margin-top:24px}
.notepad{
  background:#FFFCF1;
  border-radius:4px;
  padding:36px 32px 28px;
  position:relative;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(31,26,20,.10) 31px 32px);
  box-shadow:0 30px 50px -30px rgba(0,0,0,.25);
  border-left:3px solid #E66961;
  transform: rotate(.6deg);
}
.notepad .field{
  margin-bottom:22px;position:relative;
}
.notepad label{display:block;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.notepad input,.notepad select,.notepad textarea{
  width:100%;border:none;background:transparent;
  font-family:var(--serif);font-size:22px;color:var(--ink);
  border-bottom:1px solid var(--line);padding:6px 0;outline:none;
}
.notepad textarea{resize:vertical;min-height:90px;font-family:var(--sans);font-size:16px;line-height:1.5}
.notepad input:focus,.notepad textarea:focus,.notepad select:focus{border-bottom-color:var(--peach-deep);border-bottom-width:2px}
.notepad .send{
  margin-top:14px;display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--base);
  font:500 13px/1 var(--sans);letter-spacing:.02em;border:none;cursor:pointer;
}
.notepad .send:hover .plane{transform:translate(8px,-4px) rotate(15deg)}
.notepad .plane{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.contact-side{position:relative}
.contact-side .links{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.contact-side .links a{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:24px;
}
.contact-side .links a .arr{font-size:14px;font-family:var(--mono);color:var(--mute);transition:transform .25s}
.contact-side .links a:hover .arr{transform:translateX(6px);color:var(--ink)}

/* ── Footer ── */
footer{
  position:relative;padding:120px 0 40px;overflow:hidden;
  background:var(--ink);color:var(--base);
}
footer.footer-min{ padding:48px 0 36px }
footer::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events:none;opacity:.5;
}
footer .ring-wrap{height:560px;position:relative;display:flex;align-items:center;justify-content:center}
footer .ring{
  position:relative;width:560px;height:560px;border-radius:50%;
  animation: spin 40s linear infinite;
}
footer .ring .item{
  position:absolute;left:50%;top:50%;
  width:120px;height:80px;
  margin:-40px 0 0 -60px;
  border-radius:6px;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px), rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font:500 9px/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.7);
}
@keyframes spin{to{transform:rotate(360deg)}}
footer .center-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;
}
footer .center-ring .label{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
footer .center-ring .star{font-size:60px;font-family:var(--serif);color:var(--peach);margin-top:8px;display:block}

footer .marquee{background:transparent;border-color:rgba(255,255,255,.12)}
footer .marquee .item{color:var(--base)}
footer .marquee .item .dot{background:var(--peach)}
footer .bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
  margin-top:40px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.55);
}
footer .bottom b{color:var(--base);font-weight:500}

/* ── Animated pillar visuals ── */
.pillar-anim{height:160px;border-radius:8px;background:#FFFCF4;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.pillar-anim svg{width:120px;height:120px}

/* Real-photo pillar visual: drop the card background so the photo floats. */
.pillar-anim.pillar-photo{
  background: transparent;
  border: none;
  box-shadow: none;
  height: auto;
  min-height: 180px;
  overflow: visible;
  padding: 18px 0 8px;
}
.pillar-anim.pillar-photo img{
  max-width: 100%; height: auto;
  filter: drop-shadow(-4px 8px 16px rgba(120,80,40,.30));
  transform-origin: 50% 60%;
}

/* Per-pillar idle motion (replaces the SVG anims that lived here before) */
@keyframes pp-sway{
  0%,100%{ transform: rotate(-5deg) translateY(0) }
  50%    { transform: rotate(-2deg) translateY(-2px) }
}
@keyframes pp-bob{
  0%,100%{ transform: rotate(5deg) translateY(0) }
  50%    { transform: rotate(7deg) translateY(-5px) }
}
@keyframes pp-float{
  0%,100%{ transform: rotate(-3deg) translateY(0) }
  50%    { transform: rotate(-1deg) translateY(-6px) }
}
@keyframes pp-pulse{
  0%,100%{ transform: rotate(6deg) scale(1);    filter: drop-shadow(-4px 8px 16px rgba(120,80,40,.30)) }
  50%    { transform: rotate(6deg) scale(1.04); filter: drop-shadow(-2px 10px 22px rgba(244,184,156,.55)) }
}
.pillar-anim.p1 img{ animation: pp-sway  5.6s ease-in-out infinite }
.pillar-anim.p2 img{ animation: pp-bob   4.4s ease-in-out infinite }
.pillar-anim.p3 img{ animation: pp-float 5.0s ease-in-out infinite }
.pillar-anim.p4 img{ animation: pp-pulse 3.2s ease-in-out infinite }

/* ── Real-photo desk-object prop (scenes / contact) ── */
.photo-prop{ position: absolute; will-change: transform; pointer-events: none; user-select: none; z-index: 3; }
.photo-prop img{ display: block; }
.photo-prop-glow{
  position: absolute;
  inset: -14% -14% -14% -14%;
  border-radius: 38%;
  background: radial-gradient(closest-side, rgba(244,184,156,.40), rgba(244,184,156,.12) 55%, transparent 78%);
  filter: blur(12px);
  opacity: .75;
  pointer-events: none;
  z-index: -1;
}
.photo-prop-label{
  position: absolute; left: 0; bottom: -18px;
  font: 500 9px/1 var(--mono); color: var(--mute);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}

@keyframes drawWire{
  0%{stroke-dashoffset:240}
  60%{stroke-dashoffset:0}
  80%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:240;opacity:0}
}
.anim-sketch .nib{animation: nibMove 4s ease-in-out infinite}
@keyframes nibMove{
  0%{transform:translate(8px,8px) rotate(-30deg)}
  25%{transform:translate(80px,8px) rotate(-30deg)}
  50%{transform:translate(80px,80px) rotate(-30deg)}
  75%{transform:translate(8px,80px) rotate(-30deg)}
  100%{transform:translate(8px,8px) rotate(-30deg)}
}
.anim-sketch .wire-path{stroke-dasharray:240;animation:drawWire 4s linear infinite}

@keyframes figmaPop{
  0%,100%{opacity:0;transform:scale(.6)}
  10%,80%{opacity:1;transform:scale(1)}
}
.anim-figma rect{transform-origin:center;transform-box:fill-box}
.anim-figma rect:nth-child(1){animation: figmaPop 3.6s ease infinite; animation-delay:0s}
.anim-figma rect:nth-child(2){animation: figmaPop 3.6s ease infinite; animation-delay:.4s}
.anim-figma rect:nth-child(3){animation: figmaPop 3.6s ease infinite; animation-delay:.8s}
.anim-figma rect:nth-child(4){animation: figmaPop 3.6s ease infinite; animation-delay:1.2s}

@keyframes bracketShift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(8px)}
}
@keyframes codeLine{
  0%,100%{transform:scaleX(0);opacity:0}
  20%,80%{transform:scaleX(1);opacity:1}
}
.anim-build .br-l{animation:bracketShift 3.4s ease-in-out infinite}
.anim-build .br-r{animation:bracketShift 3.4s ease-in-out infinite reverse}
.anim-build .ln{transform-origin:left;animation:codeLine 3.4s ease infinite}
.anim-build .ln:nth-child(3){animation-delay:.3s}
.anim-build .ln:nth-child(4){animation-delay:.6s}

@keyframes ballMove{
  0%{offset-distance:0%}
  100%{offset-distance:100%}
}
@keyframes pathTrail{
  0%{stroke-dashoffset:200}
  100%{stroke-dashoffset:0}
}
.anim-alive .ball{
  offset-path: path("M 12 90 C 40 20, 70 110, 108 30");
  animation: ballMove 3s cubic-bezier(.5,0,.5,1) infinite alternate;
}
.anim-alive .trail{
  stroke-dasharray:200;animation: pathTrail 3s linear infinite alternate;
}

/* ── Bulletin thumbnails (colored cards) ── */
.pin-card .thumb{
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  padding:18px 18px 16px;font:500 10px/1.4 var(--mono);color:var(--ink-soft);text-align:left;
  background:var(--paper);
}
.pin-card .thumb .ttl{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.05;color:var(--ink);text-transform:none;letter-spacing:-.01em}
.pin-card .thumb .num{font-family:var(--mono);font-size:11px;color:rgba(31,26,20,.45);letter-spacing:.1em}
.pin-card .thumb .desc{
  font:400 11.5px/1.45 var(--sans);
  color:rgba(31,26,20,.62);
  letter-spacing:0; text-transform:none;
  margin-top:6px;
}
.pin-card .thumb .meta{font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;display:flex;gap:8px;align-items:baseline}
.pin-card .thumb .meta .yr{font-family:var(--serif);font-size:18px;color:var(--ink);font-style:italic}

/* Project frame illustrated content */
.proj-screen{position:absolute;inset:0;overflow:hidden}

/* Project media (real screenshots + hover videos) */
.proj-media{position:absolute;inset:0;overflow:hidden;background:#FFFDF7}
.proj-media .proj-hero,
.proj-media .proj-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
}
.proj-media .proj-video{opacity:0;transition:opacity .35s ease;pointer-events:none}
.frame:hover .proj-media .proj-video{opacity:1}
.frame:hover .proj-media .proj-hero{opacity:0;transition:opacity .35s ease}
.proj-media .proj-play{
  position:absolute;left:14px;bottom:14px;
  font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:#1F1A14;background:rgba(255,253,247,.92);
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(31,26,20,.12);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.25);
  display:inline-flex;align-items:center;gap:6px;
  transition:opacity .25s ease;
  z-index:3;
}
.frame:hover .proj-media .proj-play{opacity:0}
.proj-media .proj-placeholder{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(244,184,156,.22), transparent 55%),
    repeating-linear-gradient(45deg, rgba(31,26,20,.04) 0 10px, transparent 10px 20px),
    var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--ink-soft);
}
.proj-media .ph-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(31,26,20,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,26,20,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity:.6;
}
.proj-media .ph-label{
  position:relative;font-family:var(--serif);font-style:italic;font-size:28px;color:var(--ink);
  display:inline-flex;align-items:center;gap:12px;
  background:#FFFDF7;padding:14px 22px;border:1px solid rgba(31,26,20,.12);border-radius:6px;
  box-shadow:0 18px 40px -22px rgba(31,26,20,.35);
  transform:rotate(-1.5deg);
}
.proj-media .ph-dot{width:10px;height:10px;border-radius:50%;background:var(--peach-deep);box-shadow:0 0 0 4px rgba(244,184,156,.3)}
.proj-media .ph-tag{position:relative;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.proj-ionikai{background:#0E0D0B;color:#EDE6D8;padding:18px 22px;font-family:var(--sans);display:flex;flex-direction:column;gap:14px}
.proj-ionikai .nav{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);position:static;padding:0}
.proj-ionikai .nav b{font-family:var(--serif);font-size:14px;font-weight:500;color:#EDE6D8;letter-spacing:0}
.proj-ionikai h3{font-family:var(--serif);font-weight:300;font-size:32px;line-height:.96;margin-top:6px;max-width:18ch;color:#EDE6D8;letter-spacing:-.02em}
.proj-ionikai .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.proj-ionikai .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:6px;padding:10px;font-size:8px;color:rgba(255,255,255,.7);min-height:62px;display:flex;flex-direction:column;justify-content:space-between}
.proj-ionikai .card .pill{display:inline-block;padding:2px 6px;border-radius:99px;background:rgba(244,184,156,.2);color:#F4B89C;font-size:8px}
.proj-ionikai .card .v{font-family:var(--serif);font-size:18px;color:#EDE6D8}
.proj-ionikai .orb{position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#F4B89C,#8B6F4E 60%,transparent 80%);filter:blur(8px);opacity:.75}

.proj-bella{background:#F6EFE2;color:#2A211A;padding:18px 22px;display:flex;flex-direction:column;gap:12px;position:relative}
.proj-bella .hdr{display:flex;justify-content:space-between;align-items:center;font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(42,33,26,.55)}
.proj-bella .hdr b{font-family:var(--serif);font-size:18px;letter-spacing:0;font-style:italic;color:#2A211A;font-weight:400}
.proj-bella h3{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1;letter-spacing:-.02em;max-width:14ch;color:#2A211A}
.proj-bella .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:auto}
.proj-bella .tile{aspect-ratio:1;border-radius:2px;background-size:cover;background-position:center}
.proj-bella .t1{background:radial-gradient(circle at 30% 30%, #E8D9BC, #C9A879 70%, #8B6F4E)}
.proj-bella .t2{background:repeating-radial-gradient(circle at 50% 50%, #D9C8A8 0 4px, #C9B58B 4px 8px)}
.proj-bella .t3{background:linear-gradient(120deg,#E5DED2 0 50%,#A89678 50%)}
.proj-bella .t4{background:radial-gradient(ellipse at 30% 30%, #EDE2C9 0 40%, #B89970 80%)}
.proj-bella .t5{background:conic-gradient(from 30deg,#D7C7A4,#A88E63,#EAD9BC,#A88E63)}

.proj-earnest{background:#E8E4D2;color:#1F2818;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.proj-earnest .hdr{display:flex;justify-content:space-between;align-items:center;font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(31,40,24,.6)}
.proj-earnest .hdr b{font-family:var(--serif);font-size:14px;letter-spacing:0;color:#1F2818;font-weight:500}
.proj-earnest h3{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1;letter-spacing:-.02em;max-width:18ch;color:#1F2818}
.proj-earnest .compare{flex:1;display:flex;border-radius:8px;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,.1);min-height:120px}
.proj-earnest .left,.proj-earnest .right{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);position:relative}
.proj-earnest .left{background:linear-gradient(180deg,#A8956B 0 60%,#5C5A2E)}
.proj-earnest .right{background:linear-gradient(180deg,#7DA862 0 50%,#2D6B33)}
.proj-earnest .slider{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%)}
.proj-earnest .slider::after{content:"||";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 10px/1 var(--sans);color:#1F2818}

.proj-sheen{background:linear-gradient(180deg,#1A1612,#0E0B07);color:#EDE3C8;padding:18px 22px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.proj-sheen .hdr{display:flex;justify-content:space-between;align-items:center;font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(237,227,200,.55)}
.proj-sheen .hdr b{font-family:var(--serif);font-style:italic;font-size:16px;font-weight:400;color:#E8C97F;letter-spacing:0}
.proj-sheen h3{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1;letter-spacing:-.02em;max-width:18ch;color:#EDE3C8}
.proj-sheen .phones{display:flex;gap:14px;justify-content:center;align-items:flex-end;flex:1;min-height:120px}
.proj-sheen .phone{width:80px;height:140px;background:#191512;border-radius:12px;border:2px solid #2A2620;padding:8px 6px;display:flex;flex-direction:column;gap:5px;font:500 7px/1.2 var(--sans)}
.proj-sheen .phone .top{height:14px;background:linear-gradient(90deg,#E8C97F,#A87D2E);border-radius:3px;display:flex;align-items:center;padding:0 4px;color:#1A1612;font-size:6px;letter-spacing:.1em;text-transform:uppercase}
.proj-sheen .phone .grid2{display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:1}
.proj-sheen .phone .cell{background:rgba(232,201,127,.12);border-radius:3px;border:1px solid rgba(232,201,127,.18)}
.proj-sheen .phone .row-line{height:8px;background:rgba(232,201,127,.10);border-radius:2px}

/* Frame tilt on hover */
.frame{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.frame:hover{transform:translateY(-4px)}
.frame-link{ display:block; color:inherit; text-decoration:none; cursor:pointer }
.frame .visit-overlay{display:none}
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  background:rgba(255,253,247,.94);color:var(--ink);
  padding:10px 18px;border-radius:99px;
  font:500 12px/1 var(--sans);letter-spacing:.04em;
  opacity:0;transition:opacity .25s, transform .25s;
  pointer-events:none;z-index:2;border:1px solid var(--hairline);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.25);
}
.frame:hover .visit-overlay{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* alive breathe */
@keyframes breathe{
  0%,100%{transform:translateY(0) rotate(-.6deg)}
  50%{transform:translateY(-2px) rotate(.6deg)}
}
.hero .alive{animation: breathe 3.6s ease-in-out infinite;display:inline-block}

/* ── Hero photo desk objects ── */
.hi-prop{
  z-index:3;
  user-select:none;
  -webkit-user-drag:none;
}
.hi-prop *{user-select:none}
.hi-photo-glow{
  position:absolute;
  inset:-14% -14% -14% -14%;
  border-radius:36%;
  background: radial-gradient(closest-side, rgba(244,184,156,.55), rgba(244,184,156,.18) 55%, transparent 75%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
  z-index:-1;
  filter: blur(8px);
}
.hi-photo-glow.on{opacity:1}
.hi-photo-img{display:block}
@keyframes hi-breathe-a{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-3px)}
}
@keyframes hi-breathe-b{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-2px)}
}
@keyframes hi-breathe-c{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-2.5px)}
}
.breathe-a{animation: hi-breathe-a 5.2s ease-in-out infinite}
.breathe-b{animation: hi-breathe-b 6.4s ease-in-out infinite}
.breathe-c{animation: hi-breathe-c 4.4s ease-in-out infinite}
.hi-prop:hover .breathe-a,
.hi-prop:hover .breathe-b,
.hi-prop:hover .breathe-c{animation-play-state: paused}

@media (max-width: 1100px){
  .hi-prop{transform-origin:center center}
}

/* scroll cue bobbing */
@keyframes bob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}
.hero .scroll-cue{animation: bob 2.6s ease-in-out infinite}

/* ── Magnetic ── */
.magnet{display:inline-block;will-change:transform}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(28px)}
.reveal.in{opacity:1;transform:none;transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}

/* ── Mobile ── */
@media (max-width: 880px){
  .nav{padding:14px 16px}
  .nav .pill{display:none}
  .wrap,.wrap-wide{padding:0 20px}
  .scene .scene-inner{grid-template-columns:1fr;gap:30px}
  .scene .num{font-size:120px}
  .scene .name{font-size:54px}
  .intro{padding:80px 0}
  .intro .body{grid-template-columns:1fr;gap:40px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .cell{border-bottom:1px solid var(--line)}
  .stats .cell:nth-child(even){border-right:none}
  .board{grid-template-columns:repeat(2,1fr)}
  .process .pillars{grid-template-columns:1fr 1fr}
  .numbers .grid{grid-template-columns:1fr 1fr}
  .numbers .cell{padding:30px 20px;border-bottom:1px solid var(--line)}
  .numbers .cell:nth-child(even){border-right:none}
  .contact .grid{grid-template-columns:1fr;gap:40px}
  .hero{min-height:auto;padding:120px 20px 80px}
  .prop{display:none}
  .prop.show-mobile{display:block}
}