/* ───────────────────────────  TOKENS  ─────────────────────────── */
:root{
  /* Brand */
  --purple: #4A1E6E;
  --purple-deep: #2E0F47;
  --purple-soft: #6E3A92;
  --peach: #F2B091;
  --peach-warm: #E89674;
  --peach-pale: #F8D4BD;
  --cream: #F6EAD7;
  --cream-light: #FBF3E2;
  --ink: #2A170C;
  --ink-soft: #57382A;
  --paper: #FFF8EC;

  /* Type */
  --serif: "DM Serif Display", "Times New Roman", serif;
  --sans: "Manrope", system-ui, sans-serif;
  --script: "Caveat", cursive;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box; margin:0; padding:0}
html{overflow-x:clip}
html,body{background:var(--cream); color:var(--ink); font-family:var(--sans); font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:clip}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
em{font-style:italic}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
::selection{background:var(--purple); color:var(--cream)}

/* ───────────────────────────  A11Y  ─────────────────────────── */
.skip-link{
  position:absolute; left:8px; top:8px;
  background:var(--ink); color:var(--cream);
  padding:14px 18px; border-radius:8px;
  font-family:var(--mono); font-size:13px; font-weight:600;
  z-index:100; transform:translateY(-200%);
  transition:transform .2s ease;
  min-height:44px; display:inline-flex; align-items:center;
}
.skip-link:focus{transform:translateY(0); outline:3px solid var(--peach); outline-offset:2px}

/* Visible keyboard focus for everything interactive */
:focus{outline:none}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--peach);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{outline-offset:4px}
.nav-cta:focus-visible{outline-color:var(--cream)}
.svc-list li:focus-visible{outline-offset:-3px; outline-width:2px}

/* Screen-reader only */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ───────────────────────────  TICKER  ─────────────────────────── */
.ticker{
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  padding:10px 0;
  border-bottom:1px solid #000;
}
.ticker-track{
  display:flex; gap:24px; white-space:nowrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  animation:scroll-l 38s linear infinite;
}
.ticker-track span:nth-child(6n+1){color:var(--peach)}
@keyframes scroll-l{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ───────────────────────────  NAV  ─────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  background:var(--cream);
  border-bottom:1px solid rgba(42,23,12,.08);
}
.logo{display:inline-flex; align-items:center; gap:10px; padding:4px}
.logo img{height:72px; width:auto; display:block}
.nav-links{display:flex; gap:24px; align-items:center; font-size:14px; font-weight:500}
.nav-links a.nav-cta{margin-left:16px}
.nav-links a{position:relative; padding:12px 8px; color:var(--ink-soft); min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center}
.nav-links a:not(.nav-cta):hover{color:var(--purple)}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--purple);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-links a.nav-cta{
  background:var(--purple); color:var(--cream); padding:10px 16px; border-radius:99px;
  font-weight:600; display:inline-flex; gap:8px; align-items:center;
  transition:background .25s; white-space:nowrap;
}
.nav-links a.nav-cta:hover{background:var(--purple-deep); color:var(--cream)}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta .arr{transition:transform .3s}
.nav-links a.nav-cta:hover .arr{transform:translateX(4px)}

/* ───────────────────────────  HERO  ─────────────────────────── */
.hero{
  position:relative;
  background:var(--purple);
  color:var(--cream);
  padding:80px 32px 0;
  overflow:hidden;
}
.hero-decor{position:absolute; inset:0; pointer-events:none}
.spark{
  position:absolute; left:var(--x); top:var(--y);
  font-size:18px; color:var(--peach); opacity:.85;
  animation:twinkle 3s ease-in-out infinite; animation-delay:var(--d);
}
@keyframes twinkle{
  0%,100%{transform:scale(.6) rotate(0); opacity:.2}
  50%{transform:scale(1.2) rotate(180deg); opacity:1}
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1fr;
  gap:32px; align-items:end;
  max-width:none; margin:0;
  padding:40px 0 80px;
}
.hero-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach-pale); margin-bottom:24px;
}
.hero-eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--peach); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,176,145,.7)}50%{box-shadow:0 0 0 12px rgba(242,176,145,0)}}

.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(60px, 16vw, 280px);
  line-height:.88; letter-spacing:-.025em;
  color:var(--cream);
}
.hero-title .hl{display:block; opacity:0; transform:translateY(40px); animation:slideIn .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-title .line1{animation-delay:.05s}
.hero-title .line2{animation-delay:.18s}
.hero-title .line3{animation-delay:.31s}
.hero-title .line4{animation-delay:.44s}
.hero-title em{font-style:italic; color:var(--peach)}
.hero-title .amp{font-style:italic; color:var(--peach); display:inline-block; transform:translateY(.08em)}
@keyframes slideIn{to{opacity:1; transform:translateY(0)}}

.hero-sub{
  margin-top:36px; max-width:900px;
  font-size:22px; line-height:1.5; color:var(--peach-pale);
  font-weight:300;
  text-wrap:pretty;
}
.hero-sub u{text-decoration:underline; text-decoration-color:var(--peach); text-decoration-thickness:2px; text-underline-offset:4px; color:var(--cream)}
.hero-sub .hi{
  color:var(--cream); font-weight:600;
  background: linear-gradient(transparent 62%, rgba(242,176,145,.35) 62%);
  padding:0 4px;
}

.hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border-radius:99px; font-weight:600; font-size:15px;
  white-space:nowrap;
  transition:transform .25s, background .25s, color .25s, border-color .25s;
}
.btn-primary{background:var(--peach); color:var(--ink)}
.btn-primary:hover{background:var(--cream); transform:translateY(-2px)}
.btn-primary .btn-arr{transition:transform .3s}
.btn-primary:hover .btn-arr{transform:translateX(6px)}
.btn-ghost{background:transparent; color:var(--cream); border:1.5px solid rgba(248,212,189,.4)}
.btn-ghost:hover{border-color:var(--peach); background:rgba(248,212,189,.08)}
.btn.big{padding:20px 32px; font-size:17px}

/* Hero photo */
.hero-photo{position:relative; align-self:end}
.photo-frame{
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  animation:lift 1s cubic-bezier(.2,.7,.2,1) .25s both;
}
@keyframes lift{from{transform:translateY(60px); opacity:0}to{transform:translateY(0); opacity:1}}
.photo-frame img{width:100%; height:auto; display:block; aspect-ratio:7/6; object-fit:cover; object-position:center top}
.photo-tag{
  position:absolute; left:16px; bottom:16px;
  background:rgba(46,15,71,.7); backdrop-filter:blur(8px);
  color:var(--cream); padding:8px 14px; border-radius:99px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
}
.hero-stamp{
  position:absolute; top:-40px; left:-50px;
  width:160px; height:160px; color:var(--peach);
  animation:spin 22s linear infinite;
}
.hero-stamp svg{width:100%; height:100%}
.stamp-center{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:30px; color:var(--peach); animation:spin 22s linear infinite reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Hero marquee */
.hero-marquee{
  background:var(--ink); color:var(--cream);
  overflow:hidden; padding:18px 0;
  border-top:1px solid var(--purple-deep);
  margin: 0 -32px;
}
.hm-track{
  display:flex; gap:32px; white-space:nowrap;
  font-family:var(--serif); font-style:italic; font-size:42px;
  animation:scroll-r 28s linear infinite;
}
.hm-track i{color:var(--peach); font-style:normal; font-size:32px; align-self:center}
@keyframes scroll-r{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ───────────────────────────  INTRO / SKY  ─────────────────────────── */
.intro{
  background:var(--cream);
  position:relative;
}
.sky{
  position:relative; height:380px; overflow:hidden;
  background: linear-gradient(180deg, #C8E3F2 0%, #DAEFF7 55%, #DCEAB8 60%, #B3CB6E 100%);
}
.sun{
  position:absolute; left:50%; top:46%;
  width:120px; height:120px; transform:translate(-50%,-50%);
  background:var(--peach); border-radius:50%;
  box-shadow:0 0 0 12px rgba(242,176,145,.25), 0 0 0 28px rgba(242,176,145,.15), 0 0 0 50px rgba(242,176,145,.08);
  animation:breathe 4.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.06)}}
.cloud{
  position:absolute; height:50px; background:#fff; border-radius:50px;
  box-shadow:
    24px -12px 0 -4px #fff,
    -22px -10px 0 -2px #fff,
    44px 4px 0 -8px #fff;
}
.cloud.c1{width:120px; top:18%; left:-160px; animation:drift 38s linear infinite}
.cloud.c2{width:90px; top:30%; left:-180px; animation:drift 52s linear infinite; animation-delay:-14s; opacity:.85}
.cloud.c3{width:140px; top:8%; left:-220px; animation:drift 64s linear infinite; animation-delay:-30s}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(calc(100vw + 300px))}}
.hills{
  position:absolute; left:-5%; right:-5%; bottom:-2px; height:160px;
  background:#7FA13A;
  border-radius:50% 50% 0 0 / 90% 90% 0 0;
}
.hills-back{
  height:130px; background:#9DBE52; left:-10%; right:30%; bottom:30px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0; opacity:.85;
}

.intro-body{
  max-width:920px; margin:0 auto;
  padding:80px 32px 90px;
  text-align:center;
}
.intro-kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--purple);
  margin-bottom:24px;
}
.intro-lead{
  font-family:var(--serif); font-size:clamp(28px,3.6vw,46px); line-height:1.25;
  color:var(--ink); text-wrap:balance;
}
.intro-lead em{color:var(--purple); font-style:italic}
.intro-lead .under{
  position:relative; display:inline-block; color:var(--purple);
  background:linear-gradient(transparent 70%, var(--peach-pale) 70%);
}
.intro-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:56px; padding-top:36px;
  border-top:1px dashed rgba(74,30,110,.3);
}
.intro-stats > div{display:flex; flex-direction:column; align-items:center; gap:6px}
.intro-stats b{font-family:var(--serif); font-size:54px; color:var(--purple); font-weight:400}
.intro-stats span{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}

/* ───────────────────────────  SECTION HEADS  ─────────────────────────── */
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--purple);
}
.kicker.light{color:var(--peach)}
.section-title, .about-head h2, .work-headline h2, .grow-left h2, .founder-name{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
}
.section-title{font-size:clamp(44px, 7vw, 96px); line-height:.95}
.section-title em{color:var(--purple); font-style:italic}

/* ───────────────────────────  SERVICES  ─────────────────────────── */
.services{padding:120px 32px; background:var(--cream); position:relative}
.services .section-head{max-width:1300px; margin:0 auto 60px}
.section-head .kicker{margin-bottom:16px; display:block}

.svc-grid{
  display:grid; grid-template-columns: 0.85fr 1fr; gap:60px;
  max-width:1300px; margin:0 auto; align-items:start;
}
.svc-photo{
  position:relative; border-radius:24px; overflow:hidden;
  background:var(--peach-pale);
  aspect-ratio:4/5.5;
}
.svc-photo img{width:100%; height:100%; object-fit:contain; object-position:center top; background:#F5E8DA}
.badge{
  position:absolute; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--cream); color:var(--purple);
  padding:8px 14px; border-radius:99px;
  box-shadow:0 8px 24px rgba(74,30,110,.15);
}
.badge.top-left{top:16px; left:16px; background:var(--purple); color:var(--cream)}
.badge.bottom-right{bottom:16px; right:16px}

.svc-list{list-style:none; counter-reset:svc}
.svc-list li{
  padding:24px 0; border-bottom:1.5px solid rgba(74,30,110,.18);
  display:grid; grid-template-columns:auto 1fr; column-gap:24px;
  align-items:baseline; position:relative; cursor:pointer;
  transition:padding .3s ease;
}
.svc-list li:first-child{border-top:1.5px solid rgba(74,30,110,.18)}
.svc-list li:hover{padding-left:18px}
.svc-list li:hover .svc-name{color:var(--purple)}
.svc-list li:hover .svc-tag{background:var(--peach); color:var(--ink)}
.svc-list .num{
  font-family:var(--mono); font-size:13px; color:var(--ink-soft);
  letter-spacing:.1em;
}
.svc-row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.svc-name{
  font-family:var(--serif); font-size:clamp(28px,3.2vw,44px); color:var(--ink);
  transition:color .25s;
}
.svc-list li:nth-child(odd) .svc-name em, .svc-list li:nth-child(2) .svc-name, .svc-list li:nth-child(4) .svc-name{font-style:normal}
.svc-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:99px; background:transparent; color:var(--purple);
  border:1px solid rgba(74,30,110,.3); transition:all .25s;
}
.svc-desc{
  grid-column:2; margin-top:8px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s ease, opacity .3s, margin-top .3s;
  color:var(--ink-soft); font-size:15px; line-height:1.5;
}
.svc-list li:hover .svc-desc, .svc-list li.open .svc-desc{max-height:80px; opacity:1; margin-top:14px; padding-bottom:6px}
.svc-list li.open .svc-name{color:var(--purple)}
.svc-list li.open .svc-tag{background:var(--peach); color:var(--ink)}

/* ───────────────────────────  WORK  ─────────────────────────── */
.work{
  background:var(--purple); color:var(--cream);
  padding:120px 32px; position:relative; overflow:hidden;
}
.work::before{display:none}
.work-headline{max-width:1300px; margin:0 auto 60px; display:flex; flex-direction:column; gap:14px}
.work-headline h2{font-size:clamp(40px,6vw,82px); line-height:1.02}
.work-headline h2 .m-br{display:none}
.work-headline em{color:var(--peach); font-style:italic}

.gallery{
  max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:18px;
}
.g{
  position:relative; border-radius:18px; overflow:hidden;
  transform:rotate(var(--r));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 20px 50px -10px rgba(0,0,0,.4);
  background:var(--peach-pale);
}
.g:hover{transform:rotate(0) scale(1.03); z-index:5}
.g img{width:100%; height:100%; object-fit:cover; display:block}
.g.tall{grid-row: span 2}
.g figcaption{
  position:absolute; left:14px; bottom:14px;
  background:var(--cream); color:var(--purple);
  padding:6px 12px; border-radius:99px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
.work-cta{
  display:inline-flex; margin:60px auto 0; align-items:center;
  font-family:var(--serif); font-style:italic; font-size:28px;
  color:var(--peach); border-bottom:2px solid var(--peach); padding:12px 0;
  border-radius:0; min-height:44px;
}
.work-cta:hover{color:var(--cream); border-color:var(--cream)}
.work{display:flex; flex-direction:column; align-items:center}

/* ───────────────────────────  ABOUT NOTES  ─────────────────────────── */
.about{
  padding:120px 32px 60px;
  background:
    radial-gradient(circle at 20% 0, rgba(242,176,145,.2), transparent 50%),
    var(--cream);
  position:relative;
}
.about-head{max-width:1300px; margin:0 auto 60px}
.about-head h2{font-size:clamp(40px,6.5vw,86px); line-height:1}
.about-head em{color:var(--purple); font-style:italic}

.notes{
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:60px;
}
.note{
  position:relative;
  background:var(--paper);
  padding:42px 32px 36px;
  transform:rotate(var(--rot));
  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 18px 40px -10px rgba(74,30,110,.25),
    inset 0 0 0 1px rgba(0,0,0,.03);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  min-height:280px;
}
.note:nth-child(1){background: #F8DCC4}
.note:nth-child(2){background: #F2B091}
.note:nth-child(3){background: #FAEFD9}
.note:hover{transform:rotate(0) translateY(-6px)}
.note h3{
  font-family:var(--serif); font-size:38px; color:var(--ink);
  margin-bottom:14px;
}
.note p{font-size:15px; line-height:1.6; color:var(--ink)}
.note p em{color:var(--purple); font-style:italic; font-weight:600}
.note .tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:90px; height:24px; background:rgba(74,30,110,.45);
  border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  border-left:1px dashed rgba(255,255,255,.3); border-right:1px dashed rgba(255,255,255,.3);
}
.note .tape-r{left:auto; right:14px; transform:rotate(8deg)}
.note .tape-c{left:50%}
.note .pin{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%; background:var(--purple);
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.4), 0 4px 6px rgba(0,0,0,.3);
}
.note .pin-2{background:var(--peach-warm)}
.note-corner{
  position:absolute; right:0; bottom:0; width:36px; height:36px;
  background:linear-gradient(135deg, transparent 50%, rgba(0,0,0,.08) 50%);
  border-bottom-right-radius:4px;
}
.value-tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.value-tags li{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(74,30,110,.15); color:var(--purple); padding:6px 12px; border-radius:99px;
}

/* ───────────────────────────  FOUNDER  ─────────────────────────── */
.founder{
  padding:120px 32px;
  background:var(--cream);
  position:relative; overflow:hidden;
}
.founder-blob{
  position:absolute; top:10%; right:-12%; width:60%; aspect-ratio:1;
  background: radial-gradient(circle at 50% 50%, var(--peach-pale), transparent 65%);
  filter:blur(10px); opacity:.7; pointer-events:none;
}
.founder-wrap{
  max-width:1300px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:center; position:relative; z-index:2;
}
.founder-copy .kicker{display:block; margin-bottom:18px}
.founder-name{font-size:clamp(72px,11vw,168px); line-height:.88; color:var(--purple); margin-top:8px}
.founder-name em{font-style:italic; color:var(--peach-warm)}
.founder-name .last{display:inline-block}
.founder-role{
  margin:18px 0 28px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.founder-body{display:flex; flex-direction:column; gap:16px; max-width:520px}
.founder-body p{font-size:16px; line-height:1.65; color:var(--ink)}
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; max-width:520px}
.chips li{
  background:var(--purple); color:var(--cream);
  padding:8px 14px; border-radius:99px; font-size:13px; font-weight:500;
}
.chips li:nth-child(odd){background:transparent; color:var(--purple); border:1.5px solid var(--purple)}

.founder-photo{
  position:relative; display:grid; place-items:end center;
  aspect-ratio:3/4; max-width:520px; justify-self:end;
  background: radial-gradient(circle at 50% 35%, var(--peach-pale) 0%, var(--cream) 70%);
  border-radius:24px; overflow:hidden;
}
.founder-photo img{
  width:92%; height:auto; max-height:96%; object-fit:contain; object-position:center bottom;
  position:relative; z-index:2; mix-blend-mode:multiply;
  filter:drop-shadow(0 20px 30px rgba(74,30,110,.2));
}
.founder-photo::before{
  content:""; position:absolute; left:50%; top:18%; transform:translateX(-50%);
  width:62%; aspect-ratio:1;
  background:var(--peach); border-radius:50%; z-index:1;
}
.ring{
  position:absolute; inset:auto 0 auto 0; top:6%;
  width:100%; aspect-ratio:1;
  color:var(--purple); z-index:3;
  animation:spin 32s linear infinite;
}
.ring svg{width:100%; height:100%}
.sticker{
  position:absolute; top:4%; right:4%; left:auto; z-index:4;
  background:var(--cream); color:var(--purple);
  font-family:var(--script); font-size:32px; font-weight:700;
  padding:10px 22px 6px; border-radius:99px;
  transform:rotate(8deg);
  box-shadow:0 8px 24px rgba(74,30,110,.2);
  animation:wobble 4s ease-in-out infinite;
}
@keyframes wobble{0%,100%{transform:rotate(8deg)} 50%{transform:rotate(2deg) translateY(-4px)}}

/* ───────────────────────────  GROW / CTA  ─────────────────────────── */
.grow{
  background:var(--purple); color:var(--cream);
  padding:0 0 120px;
  position:relative; overflow:hidden;
}
.grow-marquee{
  background:var(--ink); overflow:hidden;
  padding:24px 0;
  border-top:1px solid rgba(248,212,189,.15);
  border-bottom:1px solid rgba(248,212,189,.15);
  margin-bottom:120px;
}
.gm-track{
  display:flex; gap:32px; white-space:nowrap;
  font-family:var(--serif); font-style:italic; font-size:56px; color:var(--peach);
  animation:scroll-l 26s linear infinite;
}
.gm-track i{color:var(--cream); font-style:normal; font-size:36px; align-self:center}

.grow-wrap{
  max-width:1200px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:start;
}
.grow-left h2{font-size:clamp(40px,6vw,82px); line-height:1; margin-top:12px}
.grow-left em{color:var(--peach); font-style:italic}
.grow-lead{margin-top:24px; font-size:18px; line-height:1.55; color:var(--peach-pale); max-width:480px}
.grow-contact{list-style:none; margin-top:36px; display:flex; flex-direction:column; gap:14px}
.grow-contact li{display:flex; align-items:center; gap:14px}
.grow-contact .ic{
  width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center;
  border-radius:50%; background:var(--peach); color:var(--purple);
}
.grow-contact .ic svg{width:20px; height:20px; display:block}
.grow-contact a{color:var(--cream); border-bottom:1px solid rgba(248,212,189,.3); padding:8px 0; display:inline-block; min-height:44px}
.grow-contact a:hover{color:var(--peach); border-color:var(--peach)}

.grow-form{
  background:var(--cream); color:var(--ink);
  border-radius:24px; padding:36px;
  display:flex; flex-direction:column; gap:18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
.grow-form label{display:flex; flex-direction:column; gap:6px}
.grow-form label span{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.grow-form input, .grow-form textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid rgba(74,30,110,.18);
  padding:14px 16px; border-radius:12px;
  transition:border-color .25s;
}
.grow-form input:focus, .grow-form textarea:focus{outline:none; border-color:var(--purple)}
.grow-form .btn.big{align-self:center; padding:18px 32px; text-transform:uppercase; letter-spacing:.1em}
.grow-form .micro{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-soft); text-align:center}
.grow-form .sent{
  display:none; text-align:center; color:var(--purple); font-family:var(--serif);
  font-style:italic; font-size:20px;
}
.grow-form .sent.on{display:block}

/* ───────────────────────────  FOOTER  ─────────────────────────── */
.foot{
  background:var(--ink); color:var(--cream);
  padding:60px 32px 32px;
  display:flex; flex-direction:column; gap:32px; align-items:stretch;
}
.foot-big{
  width:100%; display:block; line-height:0;
}
.foot-big svg{display:block; width:100%; height:auto}
.foot-row{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,234,215,.7);
  padding-top:24px; border-top:1px solid rgba(246,234,215,.1);
}

/* ───────────────────────────  REVEAL ANIMATION  ─────────────────────────── */
.reveal{opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:translateY(0)}

/* ───────────────────────────  RESPONSIVE  ─────────────────────────── */
/* DESKTOP — hide service tags (Lens, Scroll, Identity, etc.) */
@media (min-width:861px){
  .svc-tag{display:none}
  .svc-row{justify-content:flex-start}
}

/* TABLET — single-column blocks, gallery becomes 2-up */
@media (max-width:860px){
  .hero{padding:48px 24px 0}
  .hero-grid{grid-template-columns:1fr; gap:24px; padding:24px 0 60px}
  .hero-eyebrow{margin-bottom:14px}
  .hero-title{font-size:clamp(64px, 16vw, 150px); line-height:.9}
  .hero-sub{font-size:18px; max-width:none}
  .svc-grid{grid-template-columns:1fr; gap:36px}
  .svc-photo{max-width:520px; margin:0 auto; width:100%; aspect-ratio:5/6}
  .gallery{grid-template-columns:1fr 1fr; gap:14px}
  .g.tall{grid-row:auto}
  .notes{grid-template-columns:1fr; gap:48px}
  .note{max-width:480px; margin:0 auto; width:100%}
  .founder-wrap{grid-template-columns:1fr; gap:36px}
  .founder-photo{justify-self:center; max-width:420px; width:100%}
  .founder-name{font-size:clamp(72px, 18vw, 140px)}
  .grow-wrap{grid-template-columns:1fr; gap:32px; padding:0 24px}
  .foot-row{flex-direction:column; text-align:center; gap:8px}
  .nav-links a:not(.nav-cta){display:none}
  .nav-links{gap:12px}
  .hm-track{font-size:32px}
  .gm-track{font-size:38px}
  .services{padding:80px 24px}
  .about{padding:80px 24px}
  .founder{padding:80px 24px}
  .work{padding:80px 24px}
}

/* MOBILE — single column everywhere, tighter scale */
@media (max-width:560px){
  .nav{padding:12px 18px}
  .logo img{height:56px}
  .nav-cta, .nav-links a.nav-cta{padding:9px 14px; font-size:13px}
  .ticker-track{font-size:11px; gap:18px; animation-duration:48s}
  .hero{padding:28px 18px 0}
  .hero-grid{padding:16px 0 48px}
  .hero-eyebrow{font-size:10px; letter-spacing:.18em; margin-bottom:10px}
  .hero-eyebrow span:last-child{display:none}
  .hero-title{font-size:clamp(62px, 18vw, 96px); line-height:.88; letter-spacing:-.02em}
  .hero-sub{font-size:16px; line-height:1.5; margin-top:24px}
  .hero-cta{gap:10px; margin-top:24px}
  .hero-cta .btn{flex:1; justify-content:center; padding:14px 14px; font-size:14px}
  .hero-marquee{margin:0 -18px; padding:14px 0}
  .hm-track{font-size:26px; gap:20px}
  .hm-track i{font-size:20px}
  /* Sections shared padding */
  .services, .about, .founder, .work{padding:64px 20px}
  .section-head, .about-head, .work-headline{margin-bottom:32px}
  .section-title, .about-head h2, .work-headline h2, .grow-left h2{font-size:clamp(40px, 11vw, 64px); line-height:1}
  .work-headline{margin-bottom:28px; gap:10px}
  .work-headline h2{font-size:clamp(32px, 9vw, 48px); line-height:1.05; text-wrap:balance; hyphens:auto}
  .work-headline h2 .m-br{display:inline}
  /* Services list */
  .svc-grid{gap:24px}
  .svc-photo{aspect-ratio:4/5}
  .svc-list li{column-gap:14px; padding:18px 0}
  .svc-list li:hover{padding-left:0}
  .svc-name{font-size:24px; line-height:1.15}
  .svc-row{flex-direction:column; align-items:flex-start; gap:8px}
  .svc-tag{font-size:10px; padding:4px 10px}
  .svc-desc{font-size:14px}
  .svc-list li:hover .svc-desc, .svc-list li.open .svc-desc{max-height:160px}
  .badge{font-size:10px; padding:6px 10px}
  /* Work gallery — single column for clarity */
  .gallery{grid-template-columns:1fr; gap:14px}
  .g{transform:rotate(0)}
  .g:hover{transform:none}
  .work-cta{font-size:20px; text-align:center}
  /* About notes */
  .note{padding:36px 24px 28px; min-height:auto}
  .note h3{font-size:30px}
  .note p{font-size:14px}
  /* Founder */
  .founder-photo{max-width:340px; aspect-ratio:3/4}
  .founder-name{font-size:clamp(56px, 16vw, 88px); line-height:.9}
  .founder-role{font-size:11px; margin:14px 0 20px}
  .founder-body p{font-size:15px}
  .chips li{font-size:12px; padding:6px 12px}
  .sticker{font-size:22px; padding:8px 14px 4px}
  /* CTA */
  .grow{padding-bottom:64px}
  .grow-marquee{padding:18px 0; margin-bottom:64px}
  .gm-track{font-size:32px}
  .gm-track i{font-size:22px}
  .grow-wrap{padding:0 20px}
  .grow-lead{font-size:16px}
  .grow-contact .ic{width:38px; height:38px; flex-basis:38px}
  .grow-form{padding:24px; border-radius:18px}
  .grow-form .btn.big{padding:16px 22px; font-size:15px}
  /* Footer */
  .foot{padding:48px 20px 24px; gap:24px}
  .foot-row{font-size:10px; letter-spacing:.14em}
}

/* TINY phones */
@media (max-width:380px){
  .hero-title{font-size:54px}
  .nav-cta, .nav-links a.nav-cta{padding:8px 12px; font-size:12px}
  .hero-cta .btn{font-size:13px; padding:13px 12px}
}

/* Reduce motion for users who prefer */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ticker-track, .hm-track, .gm-track{animation: none !important}
  .cloud{animation: none !important}
  .hero-title .hl{opacity:1; transform:none}
}

/* Touch — disable hover-only interactions, ensure tap targets */
@media (hover: none){
  .svc-list li:hover{padding-left:0}
  .svc-list li:hover .svc-desc{max-height:0; opacity:0; margin-top:0}
  .svc-list li:hover .svc-name{color:var(--ink)}
  .svc-list li:hover .svc-tag{background:transparent; color:var(--purple)}
  .svc-list li.open .svc-desc{max-height:160px; opacity:1; margin-top:14px}
  .svc-list li.open .svc-name{color:var(--purple)}
  .svc-list li.open .svc-tag{background:var(--peach); color:var(--ink)}
  .g:hover{transform:rotate(var(--r))}
}