:root{--paper:#EFE3D0;--card:#F8F0E3;--ink:#2B1D14;--mocha:#7A5640;--sand:#D9C3A5;--or:#C2511F;--mu:#5E4635;--serif:'Newsreader',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;line-height:1.55;overflow-x:clip}
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;line-height:1.05}
em{font-style:normal;color:var(--or)}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(20px,5vw,64px);background:rgba(239,227,208,.88);backdrop-filter:blur(8px)}
.logo{font:700 1.4rem var(--serif);text-decoration:none;display:flex}
.logo img{display:block;width:210px;height:auto}
@media(max-width:820px){.logo img{width:170px}}
.nav nav{display:flex;gap:28px;align-items:center;font-size:.95rem}
.nav nav a{text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 26px;border-radius:99px;background:var(--ink);color:var(--card)!important;text-decoration:none;font-weight:500;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.l{background:var(--card);color:var(--ink)!important}
.nav .btn{padding:9px 20px}

.shapes{position:fixed;inset:0;z-index:0;pointer-events:none;color:var(--or)}
.sh{position:absolute;opacity:.22;will-change:transform}

/* Scroll story */
.story{height:340vh;position:relative;z-index:1}
.stage{--t:0;position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px;padding:84px clamp(20px,5vw,64px) 40px;overflow:hidden}
.ti{display:grid}
.t1,.t2{grid-area:1/1;margin:0;transition:opacity .5s,transform .5s}
.t1{font-size:clamp(2.8rem,6.6vw,5.6rem)}
.t2{font-size:clamp(3.6rem,9vw,7.5rem);opacity:0;transform:translateY(30px)}
.on .t1{opacity:0;transform:translateY(-30px)}
.on .t2{opacity:1;transform:none}
.sw{display:grid;max-width:35rem}
.sub,.desc{grid-area:1/1;margin:0;color:var(--mu)}
.sub{font-size:1.15rem;opacity:calc(1 - var(--t) * 3)}
.desc{font-size:1.02rem;opacity:calc(var(--t) * 1.8);transform:translateY(calc((1 - var(--t)) * 70px))}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;opacity:calc(var(--t) * 1.8)}
.chips span{padding:9px 16px;border-radius:99px;background:var(--card);font-size:.9rem}
.chips span:first-child{background:var(--ink);color:var(--card)}
.cards{position:relative;height:min(62vh,440px)}
.pc{position:absolute;width:min(270px,64%);aspect-ratio:3/4;border-radius:20px;box-shadow:0 18px 40px rgba(60,38,20,.2);overflow:hidden;will-change:transform}
.pc:nth-child(1){background:var(--sand);left:36%;top:0}
.pc:nth-child(2){background:#C9AD8A;left:25%;top:5%}
.pc:nth-child(3){background:var(--card);left:14%;top:10%}
.pc img{width:100%;height:100%;object-fit:cover;display:block}

/* Sections */
.sec{position:relative;z-index:1;padding:110px clamp(20px,5vw,64px)}
.sec h2{font-size:clamp(2.4rem,5vw,4rem)}
.sec>p{color:var(--mu);max-width:36rem;margin:14px 0 44px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.cc{background:var(--card);border-radius:20px;padding:26px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 24px rgba(60,38,20,.12)}
.cc svg{width:48px;height:48px;color:var(--or)}
.cc small{letter-spacing:.1em;color:var(--mocha);font-weight:500}
.cc h3{font-size:2.1rem}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.sc{background:var(--card);border-radius:20px;padding:26px;box-shadow:0 14px 30px rgba(60,38,20,.14)}
.sc .q{font:700 3.2rem/.7 var(--serif);color:var(--or)}
.sc p{margin:8px 0 0;color:var(--ink)}
.sc .by{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.sc .g{background:var(--ink);color:var(--card);padding:6px 14px;border-radius:99px;font-size:.85rem}
.rv{opacity:0;transform:translateY(50px) rotate(-3deg) scale(.9);transition:opacity .6s,transform .7s cubic-bezier(.2,.9,.3,1.25)}
.rv:nth-child(even){transform:translateY(50px) rotate(3deg) scale(.9)}
.rv.in{opacity:1;transform:none}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ct>div>p{margin-bottom:0}
.links{display:grid;gap:16px}
.links .btn{padding:22px 28px}
footer{position:relative;z-index:1;padding:28px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--mu);font-size:.85rem}
footer img{opacity:.75}

@media(max-width:820px){
  .nav{padding:12px 16px}
  .nav nav{gap:14px}
  .nav nav a:not(.btn){display:none}
  .nav .btn{padding:12px 22px;font-size:1rem}
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:12px;padding:72px 20px 24px}
  .cards{order:-1;height:28vh;min-height:170px}
  .pc{width:120px}
  .ti{margin-top:8px}
  .t1{font-size:2.6rem}.t2{font-size:3.6rem}
  .sub{font-size:1.05rem}
  .desc{font-size:.92rem}
  .chips{gap:8px;margin-top:16px}
  .chips span{padding:10px 16px}
  .story{height:280vh}
  .sec{padding:72px 20px}
  .cc{min-height:210px;padding:22px}
  .sc .by{flex-wrap:wrap;gap:10px}
  .btn,.chips span{touch-action:manipulation}
  .ct{grid-template-columns:1fr;gap:28px}
  .links .btn{padding:18px 22px;min-height:56px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.t1,.t2{transition:none}}