/* P’tit bonjour, brand site.
   Editorial and calm: big Fraunces statements, generous space, the sun's rays as a slow-turning motif.
   Page rhythm: hero still life, a why-statement, the first collection, "every card speaks", what's next, an invitation, footer.
   Single light theme, like the printed products. */
:root{
  --paper:#F3ECE1;--paper2:#EFE6D8;--cream:#FFFDF8;--ink:#2F2A26;--muted:#6B5F52;--line:#E2D6C4;
  --terra:#C8613F;--terraD:#A54E31;--honey:#E8A33D;--blue:#5F8EA0;
  --serif:"Fraunces",Georgia,serif;--ui:"Nunito",system-ui,sans-serif;--ar:"Baloo Bhaijaan 2",sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px));--gutR:max(20px,env(safe-area-inset-right,0px));
  --max:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;font-variation-settings:'SOFT' 100}
p{margin:0}
.ar{font-family:var(--ar);direction:rtl}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--terraD);outline-offset:3px}
.kicker{font-size:12px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--terraD)}
.sig{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--terraD);font-variation-settings:'SOFT' 100}
.btn{font:800 15px var(--ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 26px;border-radius:999px;border:0;background:var(--ink);color:#FBF6EC;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{background:var(--terraD);transform:translateY(-1px)}
.btn.sm{min-height:44px;padding:8px 18px;font-size:14px}
.btn.wide{width:100%}
.btn.light{background:#FBF6EC;color:var(--ink)}
.btn.light:hover{background:#fff}
.btn.ghost-light{background:transparent;color:#FBF6EC;box-shadow:inset 0 0 0 1.5px rgba(251,246,236,.6)}
.btn.ghost-light:hover{background:rgba(251,246,236,.12)}
.link{font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:50px}
.link:hover{color:var(--terraD)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(243,236,225,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:var(--max);margin:0 auto;padding:14px var(--gutR) 14px var(--gut);display:flex;align-items:center;gap:28px}
.logo{display:block;width:152px;flex:none}
.logo svg{display:block;width:100%;height:auto}
.menu{display:flex;gap:30px;margin-left:auto;font-weight:700;font-size:15px}
.menu a{text-decoration:none;color:var(--muted);padding:10px 0}
.menu a:hover{color:var(--ink)}
.cart-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px #D9CCB8;font:800 14px var(--ui);color:var(--ink);cursor:pointer}
.cart-btn svg{width:21px;height:21px}
.cart-btn.has{background:var(--terra);color:#FBF6EC;box-shadow:none}

/* hero */
.hero{overflow:hidden}
.hero-in{max-width:var(--max);margin:0 auto;padding:40px var(--gutR) 80px var(--gut);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:center;min-height:min(78vh,760px)}
.hero-txt{display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(46px,6.2vw,86px);line-height:.98;letter-spacing:-.015em}
.lead{font-size:19px;color:var(--muted);max-width:42ch}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.cta.center{justify-content:center}
.hero-art{position:relative;min-width:0}
.disc{position:absolute;left:50%;top:50%;width:min(88%,520px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-52%);background:radial-gradient(circle at 50% 45%,#F7E3D6 0%,#F2D9C9 60%,#EFD0BD 100%)}
.ring{position:absolute;left:50%;top:50%;width:min(118%,700px);aspect-ratio:1;transform:translate(-50%,-52%);fill:#EBCDBB;opacity:.4;pointer-events:none}
.ring.spin g{transform-origin:60px 60px;animation:turn 90s linear infinite}
.ring.slow g{animation-duration:140s}
@keyframes turn{to{transform:rotate(360deg)}}
.hero-stage{position:relative;transform-origin:0 0}
.pos,.flat{position:absolute}
.flat{width:132px;aspect-ratio:170/238;border-radius:7%/5%;overflow:hidden;box-shadow:0 2px 0 rgba(47,42,38,.06),0 22px 30px -18px rgba(47,42,38,.5)}
.flat svg{display:block;width:100%;height:100%}

/* 3D objects */
.o3{position:relative;perspective:1600px}
.o3in{position:absolute;left:0;top:0;transform-style:preserve-3d;transform-origin:0 0}
.f3{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.f3 svg{display:block;width:100%;height:100%}
.shadow3{position:absolute;left:-18%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,42,38,.26),rgba(47,42,38,0))}
.handle{position:absolute;border:10px solid #CDB794;border-bottom:none;border-radius:90px 90px 0 0}
.stage3{display:flex;justify-content:center;align-items:flex-end;padding:30px 0 22px}

/* why */
.why{background:var(--cream)}
.why-in{max-width:var(--max);margin:0 auto;padding:110px var(--gutR) 110px var(--gut);display:flex;flex-direction:column;gap:30px}
.statement{font-family:var(--serif);font-size:clamp(28px,3.6vw,48px);line-height:1.18;max-width:24ch;font-variation-settings:'SOFT' 100;letter-spacing:-.01em}
.statement em{color:var(--terraD)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:30px;border-top:1px solid var(--line);padding-top:36px}
.pillars > div{display:flex;flex-direction:column;gap:8px}
.pi{width:56px;height:56px;border-radius:50%;background:var(--paper);display:grid;place-items:center;margin-bottom:6px}
.pi svg{width:40px;height:40px}
.pillars h3{font-size:26px;font-style:italic}
.pillars p{color:var(--muted)}

/* section heads */
.sec-h{display:flex;flex-direction:column;gap:12px;max-width:620px;margin-bottom:48px}
.sec-h h2,.speak-txt h2,.join h2{font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.01em}
.sec-h p{color:var(--muted);font-size:18px}

/* shop */
.shop{max-width:var(--max);margin:0 auto;padding:110px var(--gutR) 110px var(--gut)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--cream)}
.tile-art{position:relative;display:block;background:var(--t);text-decoration:none;overflow:hidden}
.tile-art .stage3{height:280px;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.tile.big .tile-art .stage3{height:380px}
.tile:hover .tile-art .stage3{transform:translateY(-6px) scale(1.02)}
.tag{position:absolute;left:18px;top:18px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,253,248,.85);color:var(--d);padding:6px 12px;border-radius:999px}
.tile-body{padding:20px 24px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tile h3{font-size:clamp(24px,2.2vw,30px);font-style:italic;line-height:1.05}
.tile h3 a{text-decoration:none}
.age{font-size:13px;font-weight:800;color:var(--d,var(--terraD));white-space:nowrap}
.tile p{color:var(--muted)}
.foot-row{margin-top:auto;padding-top:12px;align-items:center}
.price{font-weight:800;font-size:16px}
.price.big{font-size:22px}

/* every card speaks */
.speak{background:var(--paper2)}
.speak-in{max-width:var(--max);margin:0 auto;padding:110px var(--gutR) 110px var(--gut);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:64px;align-items:center}
.phone{justify-self:center;width:min(300px,80%);aspect-ratio:300/600;border-radius:44px;background:var(--ink);padding:12px;box-shadow:0 30px 50px -30px rgba(47,42,38,.6)}
.phone-in{height:100%;border-radius:34px;background:linear-gradient(180deg,var(--t),#F3ECE1 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px}
.ph-logo{width:110px}
.ph-card{width:72%;aspect-ratio:170/238;border-radius:7%/5%;overflow:hidden;box-shadow:0 14px 22px -14px rgba(47,42,38,.45)}
.ph-card svg{display:block;width:100%;height:100%}
.ph-btn{display:inline-flex;align-items:center;gap:8px;background:var(--c);color:#FBF6EC;font-weight:800;font-size:15px;padding:10px 20px 10px 12px;border-radius:999px}
.ph-btn svg{width:26px;height:26px}
.speak-txt{display:flex;flex-direction:column;gap:18px}
.speak-txt > p{color:var(--muted);font-size:18px;max-width:46ch}
.ticks{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:10px}
.ticks li{padding-left:30px;position:relative;font-weight:700}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--terra);-webkit-mask:radial-gradient(circle,#000 0 40%,transparent 41%);mask:none;box-shadow:inset 0 0 0 5px #F4DDD2}

/* what's next */
.next{max-width:var(--max);margin:0 auto;padding:110px var(--gutR) 110px var(--gut)}
.nexts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.nx{display:flex;flex-direction:column;gap:14px}
.nx-art{position:relative;aspect-ratio:1;border-radius:24px;background:var(--t);display:grid;place-items:center}
.nx-art svg{width:78%;height:78%}
.soon{position:absolute;left:14px;top:14px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--d);background:rgba(255,253,248,.85);padding:5px 10px;border-radius:999px}
.nx h3{font-size:24px;font-style:italic;line-height:1.1}
.nx-en{font-size:13px;font-weight:800;color:var(--d)}
.nx-body p:last-child{color:var(--muted);font-size:15px}
.nx-body{display:flex;flex-direction:column;gap:4px}

/* invitation */
.join{background:var(--terra);color:#FBF6EC;overflow:hidden}
.join-in{position:relative;max-width:760px;margin:0 auto;padding:120px var(--gutR) 120px var(--gut);display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.join .ring{width:900px;fill:#D4795A;opacity:.5;top:50%}
.join .kicker{color:#F8D9C9;position:relative}
.join h2,.join p,.join .cta{position:relative}
.join p{font-size:18px;color:#FBEDE4;max-width:44ch}

/* footer */
.foot{background:var(--ink);color:#E9E0D3;padding:72px var(--gutR) 28px var(--gut)}
.foot-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:420px}
.foot-brand svg{width:180px;height:auto;display:block}
.foot-brand p{color:#C9BFB2}
.foot-brand .sig{color:#E7B49F}
.foot h4{font-family:var(--ui);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#A89C8E;margin:0 0 6px}
.foot-in > div{display:flex;flex-direction:column;gap:10px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot span{color:#A89C8E}
.copy{max-width:var(--max);margin:48px auto 0;font-size:13px;color:#8F8476;padding-bottom:env(safe-area-inset-bottom,0px)}

/* product page */
.crumbs{max-width:var(--max);margin:0 auto;padding:16px var(--gutR) 0 var(--gut);font-size:14px;color:var(--muted);display:flex;gap:10px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.prod-top{max-width:var(--max);margin:0 auto;padding:20px var(--gutR) 60px var(--gut);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.viewer{position:sticky;top:90px;height:clamp(400px,50vw,620px);border-radius:32px;background:radial-gradient(ellipse at 50% 88%,rgba(47,42,38,.08) 0%,rgba(47,42,38,0) 40%),var(--t);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}
.viewer:active{cursor:grabbing}
.vscene{position:absolute;left:50%;top:50%;width:0;height:0;perspective:1600px}
.vobj{position:absolute;transform-style:preserve-3d}
.hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;color:var(--muted);pointer-events:none}
.prod-info{display:flex;flex-direction:column;gap:16px;padding-top:12px}
.prod-info h1{font-style:italic;font-size:clamp(42px,5vw,64px);line-height:1}
.about{color:var(--muted);font-size:18px}
.buy{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:4px 0}
.qty{display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1.5px #D9CCB8;background:var(--cream)}
.qty button{width:46px;height:50px;border:0;background:none;font:700 20px var(--ui);cursor:pointer;color:var(--ink)}
.qty output{min-width:28px;text-align:center;font-weight:800}
.qty.sm button{width:36px;height:36px;font-size:18px}
.facts{list-style:none;padding:20px 0 0;margin:6px 0 0;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line)}
.facts li{padding-left:28px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:50%;background:var(--c)}
.ship{font-size:14px;color:var(--muted)}
.peek{max-width:var(--max);margin:0 auto;padding:60px var(--gutR) 40px var(--gut)}
.shop.more{padding-top:60px}
.flipgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.fcard{appearance:none;border:0;padding:0;background:none;cursor:pointer;perspective:900px;aspect-ratio:170/238;width:100%}
.fcard .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.fcard.flipped .in{transform:rotateY(180deg)}
.fcard .sd{position:absolute;inset:0;border-radius:7%/5%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 0 rgba(47,42,38,.06),0 18px 26px -20px rgba(47,42,38,.55)}
.fcard .sd.b{transform:rotateY(180deg)}
.fcard svg{display:block;width:100%;height:100%}

/* bag drawer */
.drawer{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:rgba(47,42,38,.35);opacity:0;transition:opacity .25s}
.panel{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);background:var(--paper);display:flex;flex-direction:column;gap:16px;padding:calc(20px + env(safe-area-inset-top,0px)) var(--gutR) calc(20px + env(safe-area-inset-bottom,0px)) 22px;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease}
.drawer.open .scrim{opacity:1}
.drawer.open .panel{transform:none}
.panel-h{display:flex;align-items:center;justify-content:space-between}
.panel-h h2{font-style:italic;font-size:32px}
.x{width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);font-size:26px;cursor:pointer;color:var(--ink)}
.items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.items li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:var(--cream);border-radius:16px;padding:10px}
.it-art{width:64px;height:84px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.it-art svg{width:48px;height:auto}
.it-txt{display:flex;flex-direction:column;gap:4px}
.it-txt b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;font-variation-settings:'SOFT' 100}
.it-txt span{font-size:14px;color:var(--muted)}
.rm{border:0;background:none;color:var(--muted);font:700 13px var(--ui);text-decoration:underline;cursor:pointer;min-height:44px}
.total{display:flex;justify-content:space-between;font-size:18px;border-top:1px solid var(--line);padding-top:12px}
.empty{text-align:center;color:var(--muted);padding:40px 0}
.order{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.order h3{font-size:22px;font-style:italic}
.order label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
.order input,.order textarea{font:inherit;font-weight:400;padding:10px 12px;min-height:44px;border-radius:12px;border:1.5px solid #D9CCB8;background:#fff;color:var(--ink)}
.fine{font-size:13px;color:var(--muted);text-align:center}

/* hidden QR card page */
.qr{min-height:100svh;display:flex;flex-direction:column;align-items:center;gap:18px;padding:calc(20px + env(safe-area-inset-top,0px)) var(--gutR) 28px var(--gut);background:linear-gradient(180deg,var(--t) 0%,var(--paper) 70%)}
.qr .logo{width:150px}
.qr-card{width:min(78vw,340px);aspect-ratio:170/238;border-radius:7%/5%;overflow:hidden;box-shadow:0 2px 0 rgba(47,42,38,.08),0 18px 30px -18px rgba(47,42,38,.45)}
.qr-card svg{display:block;width:100%;height:100%}
.play{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:40px;padding:16px 30px;min-height:60px;background:var(--c);color:#FBF6EC;font:800 20px var(--ui);cursor:pointer;box-shadow:0 3px 0 var(--d)}
.play svg{width:28px;height:28px}
.qr-ar{font-size:26px;font-weight:700}
.qr-pr{color:var(--muted);margin-top:-12px}
.qr-more{font-size:14px;color:var(--muted)}

@media (max-width:980px){
  .menu{display:none}
  .cart-btn{margin-left:auto}
  .hero-in{grid-template-columns:1fr;min-height:0;padding-top:24px;padding-bottom:40px}
  .tiles,.tiles.three{grid-template-columns:1fr 1fr}
  .tile.big .tile-art .stage3{height:300px}
  .pillars{grid-template-columns:1fr;gap:28px}
  .speak-in,.prod-top{grid-template-columns:1fr;gap:40px}
  .viewer{position:relative;top:0}
  .nexts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flipgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .why-in,.shop,.speak-in,.next,.join-in{padding-top:72px;padding-bottom:72px}
}
@media (max-width:600px){
  .tiles,.tiles.three{grid-template-columns:1fr}
  .nexts{gap:16px}
  .nx h3{font-size:20px}
  .foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ring.spin g{animation:none}.tile-art .stage3,.fcard .in,.panel,.scrim,.btn{transition:none}}