:root{
  --paper:#f8eddd;
  --paper-2:#f1dfca;
  --paper-3:#ead2b7;
  --ink:#1d1713;
  --brown:#745338;
  --olive:#3f5a3a;
  --olive-dark:#31482e;
  --muted:#756d63;
  --wax:#8e3027;
  --shadow:0 20px 60px rgba(45,31,18,.18);
  --shadow-soft:0 10px 30px rgba(45,31,18,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand:"Caveat", cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--serif);background:var(--paper);overflow-x:hidden}
img{display:block;max-width:100%}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:12px;z-index:200;background:#fff;padding:10px 14px;border-radius:10px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.page-shell{width:min(1280px,calc(100% - 72px));margin-inline:auto;position:relative}
.scene{position:relative;isolation:isolate;overflow:hidden}

/* HEADER */
.site-header{position:fixed;left:0;right:0;top:0;z-index:100;padding:18px 34px;transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s var(--ease)}
.site-header.is-scrolled{background:rgba(248,237,221,.88);backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 1px 0 rgba(67,45,27,.08)}
.header-inner{max-width:1380px;margin:auto;display:grid;grid-template-columns:210px 1fr auto;align-items:center;gap:28px}
.brand img{width:178px;height:auto}
.primary-nav{display:flex;justify-content:center;gap:34px;font-family:var(--sans);font-size:13px;font-weight:500}
.primary-nav a{position:relative;padding:8px 0}
.primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .28s var(--ease)}
.primary-nav a:hover::after,.primary-nav a.is-active::after{right:0}
.header-auth{gap:10px}
.menu-button{display:none;background:transparent;width:42px;height:42px;padding:8px;cursor:pointer}

/* BUTTONS */
.auth-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.auth-button{height:54px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 8px 18px rgba(35,27,18,.12);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);border:1px solid rgba(28,24,20,.12)}
.auth-button img{width:20px;height:20px;object-fit:contain}
.auth-button--apple{background:#10100f;color:#fff;border-color:#10100f}
.auth-button--apple img{filter:brightness(0) invert(1)}
.auth-button--google{background:#fffaf4;color:#171717}
.auth-button:hover{transform:translateY(-2px) scale(1.012);box-shadow:0 12px 26px rgba(35,27,18,.18)}
.auth-button:active{transform:translateY(1px) scale(.995)}
.auth-button:focus-visible,.green-button:focus-visible,.stamp-card:focus-visible,.menu-button:focus-visible{outline:3px solid rgba(63,90,58,.35);outline-offset:3px}
.auth-button--small{height:40px;padding:0 16px;font-size:12px;box-shadow:0 5px 14px rgba(35,27,18,.1)}
.auth-button--small img{width:16px;height:16px}
.green-button{display:inline-flex;align-items:center;gap:15px;background:var(--olive);color:#fff;border-radius:999px;padding:15px 22px;font-family:var(--sans);font-size:14px;cursor:pointer;box-shadow:0 10px 24px rgba(33,60,36,.16);transition:.22s var(--ease)}
.green-button:hover{background:var(--olive-dark);transform:translateY(-2px)}
.green-button img{width:17px;filter:brightness(0) invert(1)}

/* HERO */
.hero{min-height:900px;display:flex;align-items:stretch;background:#d9c6ad}
.hero-bg{position:absolute;inset:-4%;width:108%;height:108%;z-index:-5}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-wash{position:absolute;inset:0;z-index:-4;background:linear-gradient(90deg,rgba(255,248,236,.88) 0%,rgba(255,248,236,.64) 27%,rgba(255,248,236,.08) 54%,rgba(30,18,10,.06) 100%)}
.light-bloom{position:absolute;left:-6%;top:-10%;width:70%;height:78%;z-index:-3;background:url('./09_PAPER/textures/pp-light-bloom.png') center/contain no-repeat;mix-blend-mode:screen;opacity:.7;pointer-events:none}
.dust-layer{position:absolute;inset:0;z-index:-2;opacity:.22;pointer-events:none;background-image:url('./11_MOTION/dust/dust_04.png');background-size:cover;animation:dustDrift 20s linear infinite alternate;mix-blend-mode:screen}
@keyframes dustDrift{from{transform:translate3d(-1.5%,1%,0) scale(1.03)}to{transform:translate3d(1.5%,-1%,0) scale(1.06)}}
.hero-inner{min-height:900px;padding-top:185px;padding-bottom:100px;display:flex;align-items:flex-start}
.hero-copy{width:49%;position:relative;z-index:5}
.hero h1{font-size:clamp(70px,7.2vw,112px);line-height:.82;letter-spacing:-.062em;margin:0 0 28px;font-weight:700;text-wrap:balance}
.hero-lede{font-size:21px;line-height:1.18;margin:0 0 28px;max-width:560px;text-shadow:0 1px 18px rgba(255,250,240,.6)}
.hero-auth{margin-bottom:22px}
.trust-row{display:flex;gap:28px;align-items:center;font-family:var(--sans);font-size:12px;font-weight:500;flex-wrap:wrap}
.trust-row span{display:flex;align-items:center;gap:7px}
.trust-row img{width:19px;height:19px}
.hero-envelope{position:absolute;z-index:4;width:min(670px,51vw);right:-30px;bottom:52px;filter:drop-shadow(0 35px 28px rgba(55,35,17,.22));transform-origin:55% 70%;animation:envelopeFloat 7s ease-in-out infinite}
@keyframes envelopeFloat{0%,100%{translate:0 0;rotate:-.8deg}50%{translate:0 -7px;rotate:.5deg}}
.hero-note{position:absolute;z-index:3;filter:drop-shadow(0 15px 20px rgba(40,25,15,.13))}
.hero-note--right{width:170px;right:-4px;top:92px;transform:rotate(5deg)}
.hero-note--bottom{width:140px;right:32px;bottom:2px;transform:rotate(-6deg)}
.torn-edge{position:absolute;left:-2%;right:-2%;height:80px;z-index:10;background:var(--paper);mask:url('./09_PAPER/masks/torn-top-wide.png') center top/100% 100%;-webkit-mask:url('./09_PAPER/masks/torn-top-wide.png') center top/100% 100%}
.torn-edge--bottom{bottom:-32px;transform:rotate(180deg)}

/* PAPER SECTIONS */
.paper-section{position:relative;background-color:var(--paper);background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),url('./09_PAPER/textures/paper-cream-2048.png');background-size:auto,1024px auto}
.paper-section::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;background:url('./02_UI/textures/film-grain-overlay.png') repeat;mix-blend-mode:multiply}
.section-heading{text-align:center;padding-top:88px;margin-bottom:52px;position:relative;z-index:2}
.section-heading h2,.stamps-copy h2,.story-copy h2,.people-copy h2,.cta-inner h2{font-size:clamp(48px,5vw,72px);line-height:.94;letter-spacing:-.045em;margin:0;font-weight:700}
.section-heading p{font-size:18px;margin:8px 0 0;color:#675e56}
.eyebrow{font-family:var(--sans)!important;text-transform:uppercase;letter-spacing:.16em;font-size:11px!important;font-weight:600}

/* HOW IT WORKS */
.how-section{padding-bottom:104px;z-index:12}
.steps{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr 44px 1fr;align-items:center;gap:8px;position:relative;z-index:2}
.step-card{text-align:center;position:relative}
.step-photo{aspect-ratio:1;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-soft);transform:rotate(var(--r,-1deg));background:#ebd7c0}
.step-card:nth-of-type(2) .step-photo{--r:1deg}.step-card:nth-of-type(3) .step-photo{--r:-.4deg}.step-card:nth-of-type(4) .step-photo{--r:1.1deg}
.step-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.step-card:hover .step-photo img{transform:scale(1.045)}
.step-number{position:absolute;z-index:3;left:-9px;bottom:118px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#654222;color:#fff;font-family:var(--sans);font-weight:600;box-shadow:0 6px 14px rgba(50,33,19,.2)}
.step-card h3{font-size:36px;line-height:1;margin:20px 0 8px}
.step-card p{font-size:16px;line-height:1.2;margin:0 auto;max-width:245px;color:#564d45}
.step-arrow{width:34px;opacity:.65}

/* STORY */
.story-section{background:#e7cfb4}
.story-grid{display:grid;grid-template-columns:1fr 1fr}
.story-photo{min-height:600px;position:relative;overflow:hidden}
.story-photo picture,.story-photo picture img{width:100%;height:100%}
.story-photo picture img{object-fit:cover;transition:transform 1.2s var(--ease)}
.story-photo:hover picture img{transform:scale(1.025)}
.paper-copy{min-height:600px;padding:94px clamp(60px,8vw,150px);display:flex;flex-direction:column;justify-content:center;position:relative;background-color:var(--paper);background-image:url('./09_PAPER/textures/paper-cream-2048.png');background-size:900px}
.paper-copy p{font-size:20px;line-height:1.28;max-width:560px;margin:24px 0 0}
.paper-copy strong{font-size:24px}
.paper-tape{position:absolute;top:-4px;right:14%;width:130px;height:34px;background:rgba(222,198,166,.72);transform:rotate(-3deg);mix-blend-mode:multiply}
.feature-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;max-width:600px}
.feature-icons div{text-align:center;font-family:var(--sans);font-size:12px;line-height:1.2}
.feature-icons img{width:36px;height:36px;margin:0 auto 9px}
.floating-note{position:absolute;z-index:5;filter:drop-shadow(0 12px 20px rgba(42,25,14,.14));pointer-events:none}
.note-left{width:150px;left:14px;top:30px;transform:rotate(-7deg)}
.note-corner{width:135px;right:20px;bottom:12px;transform:rotate(5deg)}
.note-left-small{width:130px;left:18px;bottom:16px;transform:rotate(-4deg)}
.note-right{width:145px;right:16px;top:22px;transform:rotate(6deg)}

/* STAMPS */
.stamps-section{padding:90px 0 104px}
.stamps-layout{display:grid;grid-template-columns:240px 1fr 130px;gap:36px;align-items:center;z-index:2}
.stamps-copy h2{font-size:54px}
.stamps-copy p{font-size:16px;line-height:1.3;color:#5f564d;margin:18px 0 24px}
.stamp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:end}
.stamp-card{background:transparent;cursor:pointer;padding:0;color:var(--ink);transition:transform .32s var(--ease),filter .32s var(--ease)}
.stamp-card:hover{transform:translateY(-10px) rotate(var(--rot,1deg));filter:drop-shadow(0 13px 14px rgba(45,29,16,.14))}
.stamp-card:nth-child(even){--rot:-1deg}
.stamp-card img{width:100%;aspect-ratio:.72;object-fit:contain}
.stamp-card span{display:block;font-family:var(--sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:5px}
.stamp-note{width:130px;transform:rotate(5deg);filter:drop-shadow(0 12px 18px rgba(42,25,14,.12))}

/* QUOTE */
.quote-section{min-height:660px;display:grid;place-items:center;color:#231a13}
.quote-bg{position:absolute;inset:-4%;z-index:-3;width:108%;height:108%}
.quote-bg img{width:100%;height:100%;object-fit:cover}
.quote-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,rgba(255,241,218,.1),rgba(69,39,20,.04))}
.quote-inner{text-align:center;padding:70px 20px;max-width:900px;z-index:5}
.quote-inner blockquote{margin:0;font-size:clamp(36px,5.5vw,68px);font-style:italic;font-weight:700;line-height:1.1;text-shadow:0 2px 24px rgba(255,238,208,.9),0 0 80px rgba(255,238,208,.5);color:#1a1208}
.quote-rule{display:block;width:80px;height:1px;background:var(--ink);margin:28px auto 18px}
.quote-inner p{font-family:var(--sans);font-weight:500}
.quote-note{position:absolute;width:150px;filter:drop-shadow(0 12px 18px rgba(42,25,14,.14))}
.quote-note--left{left:28px;bottom:46px;transform:rotate(-8deg)}
.quote-note--right{right:34px;top:44px;transform:rotate(6deg)}
.quote-note-r{position:absolute;width:150px;right:34px;top:44px;transform:rotate(6deg);filter:drop-shadow(0 12px 18px rgba(42,25,14,.14));z-index:5}
.quote-note-l{position:absolute;width:150px;left:28px;bottom:46px;transform:rotate(-8deg);filter:drop-shadow(0 12px 18px rgba(42,25,14,.14));z-index:5}

/* CTA */
.cta-section{padding:120px 0 110px;overflow:visible;position:relative;z-index:2}
.cta-inner{text-align:center;z-index:2}
.cta-inner>p{font-size:22px;margin:9px 0 25px}
.cta-auth{justify-content:center}
.trust-row--center{justify-content:center;margin-top:24px}
.cta-note{position:absolute;left:4%;top:52px;width:185px;transform:rotate(-8deg);filter:drop-shadow(0 14px 20px rgba(45,30,17,.13));z-index:2}
.cta-postmark{position:absolute;right:7%;top:46px;width:165px;opacity:.52;transform:rotate(8deg);z-index:2}
.cta-decor--left{position:absolute;left:-80px;bottom:-120px;width:380px;height:280px;background:url('./03_HERO/overlays/hero-envelope-bundle-md.webp') center/contain no-repeat;transform:rotate(-8deg);opacity:.9}

/* FOOTER */
.site-footer{min-height:500px;background:#ead6bf;display:flex;align-items:flex-end}
.footer-bg{position:absolute;inset:0;z-index:-2}
.footer-bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.72}
.footer-paper{width:100%;padding:54px 0 30px;background:linear-gradient(to bottom,rgba(248,237,221,.96),rgba(248,237,221,.84));position:relative;clip-path:polygon(0 8%,7% 5%,16% 8%,25% 4%,35% 7%,45% 3%,55% 8%,65% 4%,77% 7%,88% 3%,100% 7%,100% 100%,0 100%)}
.footer-inner{display:grid;grid-template-columns:160px 1fr auto auto;gap:34px;align-items:center}
.footer-brand img{width:120px}
.footer-inner nav{display:flex;gap:32px;justify-content:center;font-family:var(--sans);font-size:12px}
.footer-domain{font-family:var(--sans);font-size:12px}
.social-links{display:flex;gap:14px}.social-links img{width:22px;height:22px}
.footer-message{text-align:center;font-family:var(--hand);font-size:27px;line-height:.95;margin:42px 0 8px;transform:rotate(-3deg)}

/* DIALOG */
.stamp-dialog{border:0;border-radius:22px;padding:30px;background:var(--paper);box-shadow:0 40px 100px rgba(25,18,12,.28);max-width:440px;color:var(--ink)}
.stamp-dialog::backdrop{background:rgba(31,22,15,.4);backdrop-filter:blur(6px)}
.stamp-dialog>img{width:180px;margin:0 auto 20px}
.stamp-dialog h2{font-size:48px;margin:4px 0 8px;text-align:center}
.stamp-dialog p{text-align:center;font-size:18px}.stamp-dialog .eyebrow{color:#70665d}
.dialog-close{position:absolute;right:14px;top:10px;width:38px;height:38px;border-radius:50%;background:transparent;font-size:30px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:28px;z-index:300;transform:translate(-50%,30px);opacity:0;background:#171513;color:#fff;padding:12px 18px;border-radius:999px;font-family:var(--sans);font-size:13px;transition:.28s var(--ease);pointer-events:none}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* MOTION */
.reveal{opacity:0;transform:translateY(30px);filter:blur(5px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
.reveal-stack>*{opacity:0;transform:translateY(24px);filter:blur(5px);animation:heroReveal 1.1s var(--ease) forwards}
.reveal-stack>*:nth-child(1){animation-delay:.18s}.reveal-stack>*:nth-child(2){animation-delay:.32s}.reveal-stack>*:nth-child(3){animation-delay:.46s}.reveal-stack>*:nth-child(4){animation-delay:.6s}
@keyframes heroReveal{to{opacity:1;transform:none;filter:none}}
.parallax{will-change:transform}

@media (max-width:1180px){
  .header-inner{grid-template-columns:180px 1fr auto;gap:16px}.primary-nav{gap:20px}.header-auth .auth-button{padding-inline:12px}.header-auth span{display:none}
  .hero-envelope{width:56vw;right:-70px}.hero h1{font-size:82px}.stamps-layout{grid-template-columns:220px 1fr}.stamp-note{display:none}.stamp-grid{gap:7px}
  .paper-copy{padding-inline:70px}
}
@media (max-width:900px){
  .site-header{padding:14px 18px}.header-inner{display:flex}.brand{margin-right:auto}.brand img{width:148px}.menu-button{display:block}.header-auth{display:none}
  .primary-nav{position:fixed;left:16px;right:16px;top:78px;display:flex;flex-direction:column;background:rgba(248,237,221,.97);padding:24px;border-radius:20px;box-shadow:var(--shadow);transform:translateY(-15px);opacity:0;pointer-events:none;transition:.26s var(--ease)}
  .primary-nav.is-open{opacity:1;transform:none;pointer-events:auto}.primary-nav a{font-size:16px;padding:8px}
  .page-shell{width:min(100% - 40px,760px)}
  .hero{min-height:900px}.hero-inner{min-height:900px;padding-top:150px}.hero-copy{width:70%}.hero h1{font-size:74px}.hero-envelope{width:66vw;right:-115px;bottom:60px}.hero-note--right{right:-26px;width:130px}.hero-note--bottom{display:none}
  .steps{grid-template-columns:1fr 1fr;gap:46px 24px}.step-arrow{display:none}.step-number{bottom:108px}.step-card p{max-width:310px}
  .story-grid{grid-template-columns:1fr}.story-photo,.paper-copy{min-height:520px}.story-photo--child{order:4}.people-copy{order:3}.paper-copy{padding:72px 52px}
  .stamps-layout{grid-template-columns:1fr}.stamps-copy{text-align:center;max-width:500px;margin:auto}.stamp-grid{grid-template-columns:repeat(3,1fr);gap:22px}.green-button{margin-inline:auto}.stamps-copy .green-button{display:inline-flex}
  .quote-section{min-height:600px}.quote-note{width:110px}.cta-note{width:140px;left:-10px}.cta-postmark{width:130px;right:2%}.footer-inner{grid-template-columns:1fr;justify-items:center}.footer-inner nav{flex-wrap:wrap}.footer-domain{display:none}
}
@media (max-width:620px){
  .page-shell{width:calc(100% - 28px)}
  .hero{min-height:820px}.hero-bg{inset:0;width:100%;height:100%}.hero-bg img{object-position:center}.hero-wash{background:linear-gradient(to bottom,rgba(255,248,236,.93) 0%,rgba(255,248,236,.72) 41%,rgba(255,248,236,.08) 68%,rgba(37,22,10,.08) 100%)}
  .hero-inner{min-height:820px;padding-top:132px}.hero-copy{width:100%}.hero h1{font-size:clamp(56px,17vw,74px);max-width:540px}.hero-lede{font-size:18px;max-width:430px}.hero-auth{gap:9px}.hero-auth .auth-button{height:48px;font-size:12px;padding-inline:16px}.trust-row{gap:14px;font-size:10px}.hero-envelope{width:92vw;right:-28vw;bottom:35px;opacity:.92}.hero-note--right{top:auto;bottom:225px;right:4px;width:110px}.torn-edge{height:52px}
  .section-heading{padding-top:70px;margin-bottom:36px}.section-heading h2,.stamps-copy h2,.story-copy h2,.people-copy h2,.cta-inner h2{font-size:46px}.section-heading p{font-size:16px}
  .how-section{padding-bottom:76px}.steps{grid-template-columns:1fr;gap:44px}.step-card{max-width:390px;margin:auto}.step-photo{max-width:320px;margin:auto}.step-number{left:calc(50% - 170px);bottom:100px}.step-card h3{font-size:34px}
  .story-photo,.paper-copy{min-height:auto}.story-photo{aspect-ratio:4/5}.paper-copy{padding:68px 28px 80px}.paper-copy p{font-size:18px}.feature-icons{grid-template-columns:1fr 1fr}.note-left,.note-right{width:112px}.note-corner,.note-left-small{width:105px}
  .stamps-section{padding:72px 0 82px}.stamp-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 12px 20px;margin-inline:-14px}.stamp-card{min-width:145px;scroll-snap-align:center}.stamp-card:first-child{margin-left:10px}.stamp-card:last-child{margin-right:10px}
  .quote-section{min-height:640px}.quote-bg{inset:0;width:100%;height:100%}.quote-inner blockquote{font-size:34px}.quote-note--left{left:-4px;bottom:16px}.quote-note--right{right:-2px;top:22px}.quote-note{width:98px}
  .cta-section{padding:100px 0 100px}.cta-note{display:none}.cta-postmark{opacity:.25;right:-30px}.cta-decor--left{opacity:.32}.cta-auth{justify-content:center}.cta-auth .auth-button{width:100%;max-width:310px}.trust-row--center{font-size:9px}
  .site-footer{min-height:470px}.footer-paper{padding-top:70px}.footer-inner nav{gap:18px}.footer-message{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.dust-layer,.light-bloom{display:none}.hero-envelope{animation:none}.reveal,.reveal-stack>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}.parallax{transform:none!important}.step-photo img{transition:none}
}
