/* =====================================================================
   MELODY CIRCLE - homepage stylesheet (v2, rebuilt to the mockup)
   Tokens pixel-sampled from the client mockup. Playfair Display + Nunito.
   Radius language: buttons 12px · prints 14px · cards 28px (soft).
   Hand-drawn marks live in the inline sprite; every one of them moves a little.
   ===================================================================== */

:root{
  --ground:#F8F1E7; --cream:#F6ECE0; --oat:#ECE0D0; --band:#DDD7C7; --band-deep:#CFC9B7; --hill:#E6E2D6;
  --sage:#939377; --sage-deep:#5E6249; --sage-soft:#CBCDB8;
  --peach:#D7A685; --peach-soft:#F0D3BF; --butter:#EED4A6;
  --clay:#A76345; --clay-deep:#955637; --tan:#C6935A;
  --ink:#3A3A2A; --body:#5F5A50; --muted:#6B6357;
  --hair:rgba(58,58,42,.10); --hair-strong:rgba(58,58,42,.16);

  --lit-ground:radial-gradient(120% 78% at 50% -12%, #FFFCF7 0%, #F9F3E9 40%, #F8F1E7 64%, #F2EADD 100%);
  --lit-cream:radial-gradient(118% 80% at 50% -14%, #FBF4EB 0%, #F7EDE1 42%, #F6ECE0 66%, #F0E4D5 100%);
  --lit-band:radial-gradient(124% 84% at 18% -10%, #E5E0D1 0%, #DFD9C9 46%, #DDD7C7 70%, #D6D0BF 100%);
  --lit-oat:radial-gradient(122% 80% at 50% -12%, #F2E8D9 0%, #EEE2D2 44%, #ECE0D0 70%, #E4D6C2 100%);

  --r-btn:12px; --r-print:14px; --r-card:28px; --bezel-pad:8px;
  --shadow-rest:0 22px 50px -24px rgba(58,58,42,.16), 0 2px 6px -2px rgba(58,58,42,.06);
  --shadow-lift:0 34px 80px -30px rgba(58,58,42,.22), 0 4px 10px -4px rgba(58,58,42,.08);
  --shadow-print:0 18px 40px -18px rgba(58,58,42,.28), 0 3px 8px -3px rgba(58,58,42,.10);
  --shadow-cta:0 16px 34px -12px rgba(215,166,133,.75), 0 3px 8px -4px rgba(167,99,69,.35);

  --display:'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans:'Nunito', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --ease:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --col:1200px; --gutter:clamp(20px, 4vw, 48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-tap-highlight-color:rgba(215,166,133,.25)}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3,p,figure{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:6px}
section{scroll-margin-top:96px; position:relative}
.col{max-width:var(--col); margin:0 auto; padding-left:calc(var(--gutter) + env(safe-area-inset-left)); padding-right:calc(var(--gutter) + env(safe-area-inset-right)); position:relative}

/* ---------- type ---------- */
.display{font-family:var(--display); font-weight:500; letter-spacing:-.012em; line-height:1.06; color:var(--sage-deep)}
.h2{font-size:clamp(36px, 3.9vw, 56px); line-height:1.08; text-wrap:balance}
.h3{font-family:var(--display); font-weight:500; font-size:24px; line-height:1.25; color:var(--ink)}
.lead{font-size:clamp(17px, 1.35vw, 20px); line-height:1.6; color:var(--body)}
.lead b{font-weight:700; color:var(--ink)}
.p{color:var(--body)}
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.eyebrow::before{content:""; width:16px; height:2px; border-radius:2px; background:var(--clay)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after,.eyebrow.center::before{content:""; width:16px; height:2px; border-radius:2px; background:var(--clay); display:block}
.numeral{font-family:var(--display); font-style:italic; font-weight:400; font-size:15px; letter-spacing:.06em; color:var(--clay-deep)}
.tagline{display:inline-flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.16em; color:var(--muted)}
.tagline i{width:6px; height:6px; border-radius:50%; background:var(--peach); display:inline-block}
.heart{display:inline-block; width:.42em; height:.4em; color:var(--peach); vertical-align:-.02em; margin-left:.22em}
.heart svg{width:100%; height:100%; display:block}

/* ---------- buttons ---------- */
.btn{position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:14px; min-height:54px; padding:9px 9px 9px 26px; background:var(--clay); color:#fff; border-radius:var(--r-btn);
  font-family:var(--sans); font-weight:700; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1; white-space:nowrap;
  box-shadow:var(--shadow-cta), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.08);
  transition:transform .55s var(--ease), background-color .35s var(--ease), box-shadow .55s var(--ease)}
.btn .ico{width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); transition:transform .55s var(--ease), background-color .35s var(--ease)}
.btn .ico svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .55s var(--ease)}
.btn:active{transform:scale(.97)}
@media (hover:hover){
  .btn:hover{background:var(--clay-deep); transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(215,166,133,.9), 0 4px 10px -4px rgba(167,99,69,.4), inset 0 1px 0 rgba(255,255,255,.3)}
  .btn:hover .ico{background:rgba(255,255,255,.28); transform:translate(2px,-1px) scale(1.06)}
  .btn:hover .ico svg{transform:translateX(1px)}
}
.btn.lg{min-height:60px; padding:10px 10px 10px 30px; font-size:14px}
.btn.sm{min-height:44px; padding:6px 6px 6px 18px; font-size:12px; letter-spacing:.12em; gap:10px}
.btn.sm .ico{width:30px; height:30px; border-radius:8px}
.risk{margin-top:16px; font-size:12.5px; letter-spacing:.06em; color:var(--body); line-height:1.5}
.cta-row{display:flex; flex-direction:column; align-items:flex-start}
.cta-row.center{align-items:center; text-align:center}

/* ---------- surfaces ---------- */
.bezel{position:relative; padding:var(--bezel-pad); border-radius:var(--r-card); background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46)); box-shadow:0 0 0 1px var(--hair), var(--shadow-rest)}
.bezel > .core{position:relative; overflow:hidden; border-radius:calc(var(--r-card) - var(--bezel-pad)); background:#FFFDF9; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(58,58,42,.05)}
.bezel.img > .core{background:var(--oat)}
.bezel.img img{width:100%; height:100%; object-fit:cover}
/* paper print: a photo with a white border, hand-cut corners, slight tilt */
.print{position:relative; background:#FFFDF9; padding:9px; border-radius:16px 13px 15px 12px / 13px 16px 12px 15px; box-shadow:0 0 0 1px rgba(58,58,42,.06), var(--shadow-print); rotate:var(--rot, 0deg); transition:rotate .8s var(--ease), box-shadow .8s var(--ease), translate .8s var(--ease)}
.print > .ph{overflow:hidden; border-radius:10px 8px 10px 7px / 8px 10px 7px 10px; background:var(--oat)}
.print img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
@media (hover:hover){ .print:hover{rotate:0deg; translate:0 -6px; box-shadow:0 0 0 1px rgba(58,58,42,.06), var(--shadow-lift)} .print:hover img{transform:scale(1.04)} }

/* ---------- decorations ---------- */
.deco{position:absolute; pointer-events:none; display:block}
.deco svg{width:100%; height:100%; display:block; overflow:visible}
.float{animation:none}
@keyframes floaty{0%,100%{translate:0 0} 50%{translate:0 -8px}}
.float.soft{rotate:var(--r, 0deg)}
@keyframes floaty-soft{0%,100%{translate:0 0; rotate:var(--r, 0deg)} 50%{translate:0 -5px; rotate:calc(var(--r, 0deg) + 2.5deg)}}
.gl{transform-box:fill-box; transform-origin:50% 0%; animation:sway 4.6s ease-in-out 3; animation-delay:calc(var(--i, 0) * -.37s)}
@keyframes sway{0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)}}
.c-sage{color:var(--sage)} .c-peach{color:var(--peach)} .c-tan{color:var(--tan)} .c-hill{color:var(--hill)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(26px); filter:blur(8px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:calc(var(--i,0) * 90ms)}
[data-reveal].is-in{opacity:1; transform:none; filter:blur(0)}
.line{display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.24em}
.line > span{display:block; transform:translateY(112%); transition:transform 1.1s var(--ease-out); transition-delay:calc(var(--i,0) * 120ms + 120ms)}
html.fonts-in .line > span{transform:none}
.fade-in{opacity:0; transform:translateY(14px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:calc(var(--i,0) * 110ms + 120ms)}
html.fonts-in .fade-in{opacity:1; transform:none; filter:blur(0)}
.draw .sp-stem{stroke-dasharray:220; stroke-dashoffset:220; transition:stroke-dashoffset 1.7s var(--ease-out) .45s}
.draw .sp-leaf{opacity:0; transform-box:fill-box; transform-origin:50% 100%; scale:.55; transition:opacity .5s var(--ease-out), scale .8s var(--ease-spring); transition-delay:calc(.75s + var(--i,0) * .1s)}
html.fonts-in .draw .sp-stem{stroke-dashoffset:0}
html.fonts-in .draw .sp-leaf{opacity:1; scale:1}

/* ---------- nav ---------- */
.nav{position:fixed; top:18px; left:0; right:0; z-index:40; padding:0 calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left)); pointer-events:none}
.nav-in{pointer-events:auto; position:relative; max-width:var(--col); margin:0 auto; height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 16px; border-radius:22px; background:rgba(248,241,231,.68);
  -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 0 0 1px rgba(58,58,42,.08), inset 0 1px 0 rgba(255,255,255,.7), 0 18px 44px -22px rgba(58,58,42,.22); transition:background-color .5s var(--ease), box-shadow .5s var(--ease)}
.nav.is-scrolled .nav-in{background:rgba(248,241,231,.88); box-shadow:0 0 0 1px rgba(58,58,42,.1), inset 0 1px 0 rgba(255,255,255,.8), 0 24px 54px -22px rgba(58,58,42,.3)}
.brand{display:inline-flex; align-items:center; gap:12px; min-height:44px; font-family:var(--display); font-weight:500; font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-deep)}
.brand .mini{width:38px; height:38px; flex:none; filter:drop-shadow(0 4px 8px rgba(58,58,42,.12))}
.brand .mini svg{width:100%; height:100%; display:block}
.brand .mini.mark{width:26px; height:42px; filter:drop-shadow(0 3px 6px rgba(58,58,42,.14))}
.brand .mini.mark svg{width:100%; height:100%}
.nav-links{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:34px}
.nav-links a{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--body); display:inline-flex; align-items:center; min-height:44px; position:relative}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; border-radius:2px; background:var(--peach); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
@media (hover:hover){ .nav-links a:hover::after{transform:scaleX(1)} }
.burger{display:none; width:44px; height:44px; border-radius:12px; position:relative}
.burger i{position:absolute; left:12px; right:12px; height:2px; background:var(--ink); border-radius:2px; transition:transform .5s var(--ease); top:50%}
.burger i:nth-child(1){transform:translateY(-6px)} .burger i:nth-child(2){transform:translateY(5px)}
body.menu-open .burger i:nth-child(1){transform:rotate(45deg)} body.menu-open .burger i:nth-child(2){transform:rotate(-45deg)}
.menu{position:fixed; inset:0; z-index:39; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(248,241,231,.92); -webkit-backdrop-filter:blur(30px) saturate(1.4); backdrop-filter:blur(30px) saturate(1.4); opacity:0; transition:opacity .5s var(--ease)}
.menu.is-open{display:flex; opacity:1}
.menu ul{text-align:center}
.menu li{margin:6px 0; opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay:calc(var(--i,0) * 70ms + 80ms)}
.menu.is-open li{opacity:1; transform:none}
.menu a:not(.btn){font-family:var(--display); font-size:36px; color:var(--sage-deep); display:inline-flex; min-height:56px; align-items:center}
.menu .btn{margin-top:18px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--lit-ground); padding:150px 0 96px; z-index:1}
.hero::after{content:""; position:absolute; right:-6%; top:-18%; width:46%; height:58%; background:radial-gradient(closest-side, rgba(215,166,133,.2), rgba(215,166,133,0)); pointer-events:none}
.hill{position:absolute; left:0; right:0; bottom:-2px; height:min(320px, 26vw); color:var(--hill); z-index:0}
.hill svg{width:100%; height:100%; display:block}
.hero .wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:74px; z-index:2; color:var(--cream); pointer-events:none}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:40px; align-items:center}
.hero-copy{position:relative; container-type:inline-size; padding:12px 0 40px}
.h1{font-size:min(150px, 29.4cqw); line-height:.94; letter-spacing:-.02em; color:var(--sage-deep); position:relative; margin:0 0 22px}
.hero .tagline{margin-bottom:26px}
.hero .lead{max-width:30ch; margin-bottom:34px; font-size:clamp(17px, 1.3vw, 19px)}
.d-hero-sprig{left:-112px; top:4px; width:88px; height:132px; color:var(--sage)}
.d-hero-mark{left:-124px; top:-6px; width:96px; height:158px; opacity:0; scale:.7; transform-origin:50% 100%; transition:opacity .9s var(--ease-out) .5s, scale 1.2s var(--ease-spring) .5s}
html.fonts-in .d-hero-mark{opacity:1; scale:1}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.d-hero-note{right:-6px; top:-52px; width:34px; height:48px; color:var(--peach); rotate:8deg}
.d-hero-flourish{left:0; bottom:-46px; width:64px; height:32px; color:var(--peach)}
.hero-fig{position:relative; z-index:1; margin-right:calc(-1 * var(--gutter))}
.hero-fig .bezel{border-radius:34px}
.hero-fig .core{aspect-ratio:1/1; border-radius:26px}
.hero-fig img{object-position:60% 50%; transform:scale(1.06); filter:blur(6px); opacity:0; transition:transform 1.6s var(--ease-out) .25s, filter 1.2s var(--ease-out) .25s, opacity 1s var(--ease-out) .25s}
html.fonts-in .hero-fig img{transform:scale(1); filter:blur(0); opacity:1}
.garland{position:absolute; left:-4%; right:-2%; top:-38px; height:150px; z-index:3; pointer-events:none; opacity:0; transition:opacity .9s var(--ease-out) .7s}
html.fonts-in .garland{opacity:1}
.garland svg{width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 6px 10px rgba(58,58,42,.16))}
.sticker{position:absolute; left:-34px; bottom:-26px; width:150px; height:150px; z-index:4; rotate:-8deg; scale:.6; opacity:0; filter:drop-shadow(0 18px 30px rgba(58,58,42,.22)); transition:scale 1.1s var(--ease-spring) .9s, opacity .6s var(--ease-out) .9s}
html.fonts-in .sticker{scale:1; opacity:1}
.sticker svg{width:100%; height:100%; display:block}

/* ---------- about ---------- */
.about{background:var(--lit-cream); padding:110px 0 116px}
.about .col{text-align:center; container-type:inline-size}
.about .h2{margin:0 auto 26px; font-size:min(clamp(38px, 4vw, 60px), 8.4cqw)}
.about .h2 .br{display:block}
.about .p{max-width:58ch; margin:0 auto}
.pull{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(20px, 1.7vw, 24px); color:var(--clay-deep); margin:22px auto 0; max-width:46ch; line-height:1.35}
.d-about-note-l{left:4%; top:150px; width:44px; height:62px; color:var(--sage); rotate:-10deg}
.d-about-note-r{right:6%; top:120px; width:28px; height:40px; color:var(--peach); rotate:12deg}
.d-about-sprig{right:2.5%; top:230px; width:96px; height:140px; color:var(--sage); rotate:22deg}
.beats-head{margin:88px 0 40px}
.beats{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); text-align:center; max-width:1000px; margin:0 auto}
.beat{position:relative; padding:14px 32px 8px}
.beat + .beat::before{content:""; position:absolute; left:0; top:12%; bottom:6%; width:1px; background:var(--hair-strong)}
.beat .numeral{display:block; margin-bottom:18px}
.orb{width:92px; height:92px; border-radius:50%; margin:0 auto 22px; display:grid; place-items:center; box-shadow:0 0 0 5px #FFFDF9, 0 0 0 6px var(--hair), inset 0 2px 0 rgba(255,255,255,.35), 0 20px 34px -16px rgba(58,58,42,.35); transition:transform .7s var(--ease-spring)}
.orb svg{width:40px; height:40px; fill:none; stroke:#FFFDF9; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .6s var(--ease-spring)}
.orb.sage{background:linear-gradient(160deg, #A6A68C, #8E8E72)} .orb.peach{background:linear-gradient(160deg, #EAAE8F, #D69A78)} .orb.tan{background:linear-gradient(160deg, #DAAE79, #C08C52)}
@media (hover:hover){ .beat:hover .orb{transform:translateY(-6px) rotate(-6deg)} .beat:hover .orb svg{transform:scale(1.12)} }
.beat .h3{margin-bottom:10px}
.beat .p{font-size:15.5px; max-width:24ch; margin:0 auto}
.d-beat-fl{left:-40px; bottom:20px; width:62px; height:92px}
.d-beat-fr{right:-46px; top:-10px; width:66px; height:98px; rotate:14deg}

/* ---------- photo strip ---------- */
.strip{position:relative; padding:24px 0 0; background:transparent; z-index:2; margin-bottom:-56px}
.strip-grid{display:grid; grid-template-columns:.9fr 1fr 1.34fr 1fr; gap:26px; align-items:center}
.snap.p .ph{aspect-ratio:3/4} .snap.l .ph{aspect-ratio:4/3} .snap.s .ph{aspect-ratio:1/1}

/* ---------- band ---------- */
.band{position:relative; background:var(--lit-band); padding:150px 0 128px; margin:0 0 76px}
.torn{position:absolute; left:0; right:0; width:100%; height:64px; display:block; pointer-events:none}
.torn.top{top:-58px} .torn.bottom{bottom:-58px; transform:scaleY(-1)}
.torn svg{width:100%; height:100%; display:block}
.band-grid{display:grid; grid-template-columns:minmax(0,.9fr) 1px minmax(0,1.6fr); gap:clamp(28px, 4vw, 64px); align-items:center; --muted:#5A5348}
.band-rule{background:var(--hair-strong); height:100%; min-height:170px}
.band .h2{font-size:clamp(34px, 3.2vw, 46px); max-width:12ch; color:var(--sage-deep)}
.band .age{margin-top:18px; font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.expect{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px; margin-top:32px; text-align:center}
.expect .ic{width:70px; height:70px; margin:0 auto 12px; display:grid; place-items:center; border-radius:20px; background:rgba(255,253,249,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(58,58,42,.06), 0 10px 22px -14px rgba(58,58,42,.3); transition:transform .7s var(--ease-spring), background-color .5s var(--ease)}
.expect .ic svg{width:36px; height:36px; fill:none; stroke:var(--sage-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.expect span{display:block; font-size:14px; letter-spacing:.06em; color:var(--ink); font-weight:600}
@media (hover:hover){
  .expect li:hover .ic{transform:translateY(-5px); background:rgba(255,253,249,.9)}
  .expect li.i-note:hover .ic svg{animation:bounce .7s var(--ease-spring)}
  .expect li.i-scarf:hover .ic svg{animation:wave 1s ease-in-out}
  .expect li.i-shaker:hover .ic svg{animation:shake .7s ease-in-out; transform-origin:70% 70%}
  .expect li.i-leaf:hover .ic svg{animation:swayleaf 1.1s ease-in-out; transform-origin:20% 80%}
  .expect li.i-heart:hover .ic svg{animation:beat .9s ease-in-out}
}
@keyframes bounce{0%{transform:translateY(0)} 35%{transform:translateY(-9px) rotate(-6deg)} 70%{transform:translateY(2px)} 100%{transform:translateY(0)}}
@keyframes wave{0%,100%{transform:translateX(0)} 25%{transform:translateX(4px) skewX(-6deg)} 75%{transform:translateX(-4px) skewX(6deg)}}
@keyframes shake{0%,100%{transform:rotate(0)} 20%{transform:rotate(-14deg)} 40%{transform:rotate(12deg)} 60%{transform:rotate(-9deg)} 80%{transform:rotate(6deg)}}
@keyframes swayleaf{0%,100%{transform:rotate(0)} 30%{transform:rotate(8deg)} 70%{transform:rotate(-6deg)}}
@keyframes beat{0%,100%{transform:scale(1)} 25%{transform:scale(1.18)} 45%{transform:scale(1)} 65%{transform:scale(1.12)}}
.d-band-note{right:4%; top:40px; width:40px; height:56px; color:var(--peach); rotate:10deg}
.d-band-flowers{left:1.5%; bottom:30px; width:70px; height:104px; rotate:-8deg}

/* ---------- schedule ---------- */
.schedule{padding:20px 0 110px; background:var(--lit-ground)}
.sched-head{text-align:center; margin-bottom:44px}
.sched-head .h2{display:inline-flex; align-items:baseline; gap:14px}
.sched-head .h2 .flourish{width:48px; height:26px; color:var(--sage); align-self:center}
.rows{max-width:1040px; margin:0 auto; position:relative}
.row{display:grid; grid-template-columns:150px 120px 1fr 1fr auto; align-items:center; gap:18px; padding:22px 8px; border-bottom:1px solid var(--hair-strong)}
.row:first-child{border-top:1px solid var(--hair-strong)}
.row .day{font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
.row .time{font-size:15px; color:var(--body); font-weight:600}
.row .dates{font-size:15.5px; color:var(--body)}
.row .dates small{display:block; font-size:12px; letter-spacing:.08em; color:var(--muted); margin-top:2px}
.row .venue{font-size:15.5px; color:var(--body); position:relative; padding-left:18px}
.row .venue::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--hair-strong)}
.row .full{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:var(--r-btn); border:1px solid var(--hair-strong); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.sched-note{text-align:center; margin-top:28px; font-size:13px; letter-spacing:.06em; color:var(--muted)}
.d-sched-fl{right:1%; top:-70px; width:64px; height:96px; rotate:12deg}
.d-sched-note{left:2%; top:-10px; width:30px; height:42px; color:var(--sage); rotate:-12deg}

/* ---------- fit ---------- */
.fit{padding:20px 0 110px; background:var(--lit-ground)}
.fit-head{text-align:center; margin-bottom:44px}
.fit-grid{display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); gap:clamp(28px, 4vw, 72px); max-width:1000px; margin:0 auto}
.fit-rule{background:var(--hair-strong)}
.fit-col .h3{margin-bottom:22px; display:flex; align-items:center; gap:12px}
.fit-col .h3 svg{width:22px; height:22px; flex:none}
.fit-col li{position:relative; padding:14px 0 14px 34px; color:var(--body); border-top:1px solid var(--hair)}
.fit-col li::before{content:""; position:absolute; left:0; top:22px; width:18px; height:18px; border-radius:50%; background:var(--peach-soft)}
.fit-col li::after{content:""; position:absolute; left:6px; top:29px; width:6px; height:3px; border-left:2px solid var(--clay-deep); border-bottom:2px solid var(--clay-deep); transform:rotate(-45deg)}
.fit-col.no li::before{background:var(--sage-soft)}
.fit-col.no li::after{left:5px; top:30px; width:8px; height:0; border:0; border-top:2px solid var(--sage-deep); transform:none}

/* ---------- faq ---------- */
.faq{padding:120px 0 120px; background:var(--lit-cream)}
.faq .wave{position:absolute; left:0; right:0; top:-72px; width:100%; height:74px; color:var(--cream); pointer-events:none}
.faq-head{text-align:center; margin-bottom:40px}
.faq .bezel{max-width:820px; margin:0 auto}
.faq .core{padding:8px 32px}
.faq-item{border-bottom:1px solid var(--hair)} .faq-item:last-child{border-bottom:0}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding:22px 0; font-family:var(--display); font-weight:500; font-size:20px; line-height:1.3; color:var(--ink)}
.faq-q .pm{position:relative; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--peach-soft); transition:transform .6s var(--ease), background-color .4s var(--ease)}
.faq-q .pm::before,.faq-q .pm::after{content:""; position:absolute; width:12px; height:2px; background:var(--clay-deep); border-radius:2px; transition:transform .5s var(--ease)}
.faq-q .pm::after{transform:rotate(90deg)}
.faq-item.is-open .faq-q .pm::after{transform:rotate(0deg)} .faq-item.is-open .faq-q .pm{background:var(--peach)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)} .faq-a > div{overflow:hidden}
.faq-a p{padding:0 44px 24px 0; color:var(--body); font-size:16px}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.d-faq-fl{right:3%; top:90px; width:64px; height:96px; rotate:10deg}

/* ---------- closing ---------- */
.close{position:relative; background:var(--lit-oat); padding:170px 0 0; margin-top:76px; overflow:hidden}
.close .torn.top{top:-58px}
.close .hill{height:min(300px, 24vw); bottom:0; color:#DCCFB8; opacity:.75; z-index:0}
.close-in{position:static; text-align:center; padding-bottom:120px; max-width:760px; z-index:1}
.close .h2{font-size:clamp(42px, 5vw, 66px); margin-bottom:36px}
.d-close-branch-l{left:-30px; bottom:120px; width:240px; height:330px; rotate:-16deg; z-index:0}
.d-close-branch-r{right:-40px; top:30px; width:180px; height:250px; rotate:150deg; z-index:0}
.d-close-fl{left:16%; top:90px; width:60px; height:90px; rotate:-10deg}
.close-shot{position:absolute; right:4%; bottom:120px; width:min(260px, 18vw); z-index:1; --rot:5deg}
.close-shot .ph{aspect-ratio:2/3}
.foot{position:relative; z-index:1; border-top:1px solid rgba(58,58,42,.14); padding:30px 0 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:13px; color:var(--body); letter-spacing:.04em}
.foot-brand{display:flex; align-items:center; gap:16px}
.foot .roundel{width:58px; height:58px; flex:none} .foot .roundel svg{width:100%; height:100%; display:block}
.foot .brand{display:block; font-size:15px; color:var(--ink); min-height:0; letter-spacing:.18em; margin-bottom:2px}
.foot .tagline{font-size:12px; color:var(--body)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],.fade-in,.line > span,.hero-fig img,.sticker,.garland,.draw .sp-stem,.draw .sp-leaf{transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; stroke-dashoffset:0 !important; scale:1 !important}
  .float,.gl,.expect .ic svg{animation:none !important}
  .btn,.orb,.print,.faq-a,.menu li,.nav-in{transition:none !important}
}

/* ---------- responsive ---------- */
@media (min-width:1700px){
  :root{--col:1360px}
  body{font-size:18px}
  .h1{font-size:min(172px, 29.4cqw)}
  .hero{padding:170px 0 110px}
  .sticker{width:176px; height:176px}
  .about .h2{font-size:min(66px, 8.4cqw)}
}
@media (max-width:1180px){
  .d-hero-sprig{left:-68px; width:64px; height:96px}
  .d-hero-mark{left:-92px; width:72px; height:118px}
  .d-about-sprig,.d-sched-fl,.d-sched-note,.d-beat-fl,.d-beat-fr{display:none}
}
@media (max-width:1040px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px}
  .hero-fig .core{aspect-ratio:5/4}
  .d-hero-sprig,.d-hero-mark{display:none}
  .row{grid-template-columns:130px 100px 1fr 1fr auto; gap:14px}
  .d-close-branch-r{width:130px; height:180px; right:-30px}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none} .burger{display:block}
  .nav-in{padding:0 8px 0 12px; height:60px}
  .brand{font-size:15px; letter-spacing:.16em} .brand .mini{width:34px; height:34px}
  .brand .mini.mark{width:22px; height:36px}
  .hero{padding:126px 0 90px}
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:40px}
  .hero-copy{padding:0}
  .h1{font-size:min(126px, 29.4cqw)}
  .hero .lead{max-width:40ch}
  .hero-fig{margin-right:0}
  .hero-fig .core{aspect-ratio:5/4}
  .d-hero-flourish{display:none}
  .garland{top:-30px; height:120px}
  .sticker{width:120px; height:120px; left:-12px; bottom:-18px}
  .hill{height:34vw}
  .beats{grid-template-columns:minmax(0,1fr); gap:10px; max-width:520px}
  .beat{display:grid; grid-template-columns:82px 1fr; gap:6px 22px; text-align:left; padding:22px 0; align-items:center; border-top:1px solid var(--hair)}
  .beat + .beat::before{display:none}
  .beat .numeral{grid-column:2; margin-bottom:2px}
  .beat .orb{grid-row:1 / span 3; margin:0; width:82px; height:82px}
  .beat .h3{grid-column:2; margin-bottom:4px}
  .beat .p{grid-column:2; margin:0; max-width:none}
  .band{padding:120px 0 110px}
  .band-grid{grid-template-columns:minmax(0,1fr); gap:34px}
  .band-rule{display:none}
  .band .h2{max-width:none}
  .expect{grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 10px}
  .d-band-flowers{display:none}
  .fit-grid{grid-template-columns:minmax(0,1fr); gap:34px} .fit-rule{display:none}
  .row{grid-template-columns:minmax(0,1fr); grid-template-areas:"day" "time" "dates" "venue" "btn"; gap:4px; padding:22px 4px}
  .row .day{grid-area:day} .row .time{grid-area:time} .row .dates{grid-area:dates}
  .row .venue{grid-area:venue; padding-left:0} .row .venue::before{display:none}
  .row .act{grid-area:btn; margin-top:14px} .row .act .btn{width:100%; justify-content:space-between}
  .close{padding-top:150px}
  .close-shot{position:relative; right:auto; bottom:auto; width:min(250px, 58vw); margin:44px auto 0; --rot:-3deg}
  .d-close-branch-l{width:150px; height:210px; left:-40px; bottom:auto; top:-10px}
  .d-close-branch-r{display:none}
  .foot{flex-direction:column; align-items:flex-start; gap:14px}
}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  .hero{padding:112px 0 84px}
  .h1{font-size:min(112px, 29.4cqw)}
  .hero .tagline{font-size:12.5px; gap:9px; margin-bottom:20px}
  .btn.lg{min-height:56px; padding:9px 9px 9px 24px; font-size:13px}
  .d-hero-note{right:2px; top:-22px; width:28px; height:40px}
  .garland{top:-24px; height:96px; left:-3%; right:-1%}
  .hero-fig .core{aspect-ratio:1/1}
  .about{padding:88px 0 96px}
  .about .h2{font-size:min(38px, 8.4cqw)}
  .beats-head{margin:64px 0 28px}
  .d-about-note-l,.d-about-note-r{display:none}
  .strip{padding-top:16px; margin-bottom:-40px}
  .strip-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
  .print{padding:6px}
  .snap.p .ph,.snap.l .ph,.snap.s .ph{aspect-ratio:1/1}
  .band{padding:104px 0 96px; margin-bottom:56px}
  .torn{height:44px} .torn.top{top:-40px} .torn.bottom{bottom:-40px}
  .expect{grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px}
  .expect .ic{width:50px; height:50px; border-radius:15px; margin-bottom:8px} .expect .ic svg{width:27px; height:27px}
  .expect span{font-size:11.5px; letter-spacing:.02em}
  .d-band-note{width:30px; height:42px; top:26px}
  .schedule{padding:0 0 88px}
  .fit{padding-bottom:88px}
  .faq{padding:96px 0}
  .faq .core{padding:4px 20px} .faq-q{font-size:18px; padding:18px 0} .faq-a p{padding-right:20px}
  .d-faq-fl{display:none}
  .close{padding-top:140px} .close-in{padding-bottom:80px}
  .d-close-branch-l{width:120px; height:170px; left:-46px; top:-30px; opacity:.7}
  .d-close-fl{display:none}
}
@media (max-width:380px){
  .h1{font-size:min(96px, 29.4cqw)}
  .btn.lg{font-size:12px; letter-spacing:.1em; padding-left:18px}
  .nav-in{padding:0 6px 0 10px} .brand{font-size:13.5px; letter-spacing:.12em}
}