/* ============================================================
   Serewebe v2 — cinematic layer. Loaded after styles.css.
   Dark, depth-first hero + story; light catalogue pages.
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.22,1,.36,1);
  --night-950:#0c0203; --night-900:#160305; --night-800:#220609;
}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
html.lenis{scroll-behavior:auto}

::selection{background:var(--red);color:#fff}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 70% at 72% 46%, rgba(158,11,34,.38) 0%, rgba(61,12,16,.55) 38%, transparent 70%),
    radial-gradient(90% 60% at 10% 100%, rgba(85,16,25,.55) 0%, transparent 60%),
    linear-gradient(180deg, var(--night-900) 0%, var(--night-950) 100%);
  color:#fff; display:flex; align-items:center;
}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; touch-action:pan-y; opacity:0; transition:opacity 1.2s var(--ease-out)}
.hero.scene-ready .hero-canvas{opacity:1}
.hero-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity .8s var(--ease-out)}
.hero.no-webgl .hero-poster{opacity:1}
.hero-grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-vignette{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,2,3,.82) 0%, rgba(12,2,3,.35) 38%, transparent 62%), linear-gradient(0deg, rgba(12,2,3,.7) 0%, transparent 28%)}
.hero-inner{position:relative; z-index:3; width:100%; max-width:1280px; margin:0 auto; padding:120px 40px 96px 40px}
.hero-copy{max-width:640px}
.hero-kicker{display:flex; align-items:center; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:28px}
.hero-kicker::before{content:""; width:34px; height:1px; background:var(--brass); opacity:.7}
.hero-title{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(46px,8.2vw,118px); line-height:.94; letter-spacing:-.035em; margin:0; font-variation-settings:'opsz' 144}
.hero-title .line{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.hero-title .line-inner{display:block; will-change:transform}
.hero-title em{font-style:italic; font-weight:300; color:var(--brass)}
.hero-sub{margin:30px 0 0 0; max-width:480px; font-size:clamp(15px,1.4vw,18px); line-height:1.6; color:rgba(255,255,255,.66)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}
.hero-scroll{position:absolute; z-index:3; left:max(40px, calc((100vw - 1280px)/2 + 40px)); bottom:34px; display:flex; align-items:center; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.hero-scroll i{display:block; width:1px; height:38px; background:linear-gradient(var(--brass), transparent); transform-origin:top; animation:scrollcue 2.2s var(--ease-out) infinite}
@keyframes scrollcue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero-meta{position:absolute; z-index:3; right:max(40px, calc((100vw - 1280px)/2 + 40px)); bottom:34px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); line-height:1.7}
.hero-meta b{color:rgba(255,255,255,.8); font-weight:500}

/* JS-driven reveal start states (with a no-JS / failure fallback) */
html.js .hero .line-inner{transform:translateY(110%); animation:reveal-fallback 0s 2.6s forwards}
html.js .hero [data-fade]{opacity:0; animation:fade-fallback 0s 2.6s forwards}
@keyframes reveal-fallback{to{transform:none}}
@keyframes fade-fallback{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html.js .hero .line-inner{transform:none; animation:none}
  html.js .hero [data-fade]{opacity:1; animation:none}
  .hero-scroll i{animation:none}
}

/* ---------- Buttons v2 ---------- */
.btn-v2{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:999px; font-size:14.5px; font-weight:600; letter-spacing:.01em; border:1px solid transparent; transition:transform .3s var(--ease-out), background .3s, color .3s, border-color .3s}
.btn-v2:active{transform:scale(.97)}
.btn-v2-light{background:#fff; color:var(--wine-900)}
.btn-v2-light:hover{background:var(--brass)}
.btn-v2-ghost{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); backdrop-filter:blur(10px)}
.btn-v2-ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- Nav over dark hero (home only) ---------- */
body.v2-home .nav{position:fixed; left:0; right:0; background:transparent; border-bottom-color:transparent; backdrop-filter:none; transition:background .35s var(--ease-out), border-color .35s, backdrop-filter .35s}
body.v2-home .nav .nav-logo{color:#fff}
body.v2-home .nav .nav-links a{color:rgba(255,255,255,.72)}
body.v2-home .nav .nav-links a.active, body.v2-home .nav .nav-links a:hover{color:#fff}
body.v2-home .nav .btn-ghost{color:#fff; border-color:rgba(255,255,255,.25)}
body.v2-home .nav.scrolled{background:rgba(16,3,5,.92); backdrop-filter:blur(22px) saturate(1.4); border-bottom-color:rgba(255,255,255,.08)}

body.v2-home .m-topbar{position:fixed; left:0; right:0; background:transparent; border-bottom-color:transparent; backdrop-filter:none; transition:background .35s var(--ease-out), border-color .35s}
body.v2-home .m-topbar .brand{color:#fff}
body.v2-home .m-topbar .icon-btn{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18)}
body.v2-home .m-topbar .icon-btn svg{stroke:#fff}
body.v2-home .m-topbar.scrolled{background:rgba(12,2,3,.78); backdrop-filter:blur(22px) saturate(1.4); border-bottom-color:rgba(255,255,255,.08)}

/* ---------- Phones ---------- */
@media (max-width:768px){
  .hero{align-items:flex-end; min-height:100svh}
  .hero-inner{padding:0 22px 118px 22px}
  .hero-copy{max-width:none}
  .hero-kicker{margin-bottom:18px; font-size:11px}
  .hero-title{font-size:clamp(44px,14vw,64px)}
  .hero-sub{margin-top:20px; font-size:15px; max-width:none; color:rgba(255,255,255,.7)}
  .hero-cta{margin-top:26px; flex-direction:column}
  .hero-cta .btn-v2{width:100%}
  .hero-vignette{background:linear-gradient(0deg, rgba(12,2,3,.96) 0%, rgba(12,2,3,.82) 34%, transparent 62%)}
  .hero-scroll,.hero-meta{display:none}
  .hero-canvas{height:68%}
}

.nav-logo img,.m-topbar .brand img{border-radius:50%}
.nav-logo img{height:34px !important}
.m-topbar .brand img{height:28px !important}

/* WhatsApp button waits until the hero is behind you (home only) */
body.v2-home .fab-wa{opacity:0; pointer-events:none; transform:scale(.85); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out)}
body.v2-home.past-hero .fab-wa{opacity:1; pointer-events:auto; transform:none}

/* ============================================================
   Photo hero (autoplay) — replaces the 3D slab in the hero
   ============================================================ */
.hero-slides{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--night-950)}
.hero-slides::after{content:""; position:absolute; inset:0; background:rgba(60,8,14,.2); mix-blend-mode:multiply; pointer-events:none}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.5s var(--ease-out)}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.1); filter:saturate(.96) brightness(.86); will-change:transform}
.hero-slide.is-active img{animation:kenburns 8.5s linear forwards}
@keyframes kenburns{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero-progress{position:absolute; z-index:3; left:max(40px, calc((100vw - 1280px)/2 + 40px)); bottom:34px; display:flex; align-items:center; gap:8px}
.hero-progress button{position:relative; width:46px; height:18px; padding:0; border:0; background:none}
.hero-progress button::before{content:""; position:absolute; left:0; right:0; top:8px; height:2px; background:rgba(255,255,255,.28); border-radius:2px}
.hero-progress button i{position:absolute; left:0; top:8px; height:2px; width:0; background:var(--brass); border-radius:2px}
.hero-progress button.is-active i{animation:prog var(--hold,6.5s) linear forwards}
.hero-progress.paused button.is-active i{animation-play-state:paused}
@keyframes prog{to{width:100%}}
.hero-caption{margin-left:12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:opacity .3s}
.hero .hero-scroll{display:none}
.hero-vignette{background:linear-gradient(90deg, rgba(12,2,3,.86) 0%, rgba(12,2,3,.5) 34%, rgba(12,2,3,.08) 64%, transparent 80%), linear-gradient(0deg, rgba(12,2,3,.7) 0%, transparent 30%), linear-gradient(180deg, rgba(12,2,3,.55) 0%, transparent 18%)}
@media (prefers-reduced-motion:reduce){
  .hero-slide.is-active img{animation:none; transform:none}
  .hero-progress button.is-active i{animation:none; width:100%}
}

/* ============================================================
   Explore our flooring
   ============================================================ */
.explore-sec{background:var(--bg)}
.explore-h{font-size:clamp(28px,4.2vw,52px); font-weight:400; line-height:1.05; letter-spacing:-.03em; margin-bottom:40px; max-width:760px}
.explore-h em{font-style:italic; font-weight:300; color:var(--red-dark)}
.explore{display:flex; gap:14px; height:min(560px,70vh)}
.xp{position:relative; flex:1 1 0; min-width:0; border-radius:22px; overflow:hidden; background:var(--wine-900); color:#fff; cursor:pointer; outline:none;
  transition:flex-grow .8s var(--ease-out); isolation:isolate}
.xp.is-active{flex-grow:2.7}
.xp>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(1.08); transition:transform 1.2s var(--ease-out), filter .6s}
.xp.is-active>img{transform:scale(1)}
.xp:not(.is-active)>img{filter:saturate(.7) brightness(.8)}
.xp-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(20,3,5,.9) 0%, rgba(20,3,5,.35) 45%, rgba(20,3,5,.1) 100%)}
.xp-body{position:absolute; left:0; right:0; bottom:0; padding:28px}
.xp-kicker{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin-bottom:8px}
.xp h3{font-size:clamp(20px,2.2vw,30px); font-weight:400; letter-spacing:-.02em; color:#fff; white-space:nowrap}
.xp-more{max-height:0; opacity:0; overflow:hidden; transition:max-height .8s var(--ease-out), opacity .5s .1s}
.xp.is-active .xp-more{max-height:180px; opacity:1}
.xp-more p{margin:12px 0 18px; max-width:420px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.78)}
.xp-link{display:inline-flex; gap:8px; align-items:center; padding:12px 20px; border-radius:999px; background:#fff; color:var(--wine-900); font-size:14px; font-weight:600; transition:background .3s}
.xp-link:hover{background:var(--brass)}
.xp-soon{display:inline-flex; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.3); font-size:12px; font-weight:600; letter-spacing:.04em; background:rgba(255,255,255,.08)}
.xp-tiles{background:
  linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/72px 72px,
  linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/72px 72px,
  radial-gradient(80% 90% at 70% 20%, #6b1520 0%, var(--wine-900) 70%)}
.xp:focus-visible{box-shadow:0 0 0 3px var(--brass)}

/* "In the light" band */
.lightband{position:relative; min-height:min(78vh,720px); overflow:hidden; display:flex; align-items:center; background:#1a1a1a; color:#fff; isolation:isolate}
.lightband-img{position:absolute; left:0; top:-14%; width:100%; height:128%; object-fit:cover; z-index:-2; will-change:transform}
.lightband-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(12,2,3,.78) 0%, rgba(12,2,3,.35) 55%, rgba(12,2,3,.1) 100%)}
.lightband-copy{padding-top:90px; padding-bottom:90px}
.lightband-quote{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(34px,6vw,84px); line-height:1; letter-spacing:-.035em; margin:0 0 34px 0; max-width:820px}
.lightband-quote em{font-style:italic; font-weight:300; color:var(--brass)}

/* Series split */
.series-split{display:grid; grid-template-columns:5fr 7fr; gap:22px; align-items:stretch}
.series-photo{margin:0; position:relative; border-radius:20px; overflow:hidden; min-height:420px}
.series-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.series-photo figcaption{position:absolute; left:16px; bottom:14px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(12,2,3,.5); backdrop-filter:blur(8px); padding:6px 10px; border-radius:999px}

@media (max-width:768px){
  .hero-slide img{transform:scale(1.14)}
  .hero-progress{left:22px; bottom:96px}
  .hero-slides::after{background:rgba(60,8,14,.28)}
  .explore{flex-direction:column; height:auto; gap:10px}
  .xp{flex:none; height:88px; transition:height .75s var(--ease-out); border-radius:18px}
  .xp.is-active{height:360px}
  .xp-body{padding:20px}
  .xp-kicker{margin-bottom:4px}
  .xp-more p{font-size:13.5px; margin:10px 0 14px}
  .explore-sec .wrap{padding:0 20px}
  .explore-h{margin-bottom:24px}
  .lightband{min-height:64vh}
  .lightband-copy{padding:60px 20px}
  .lightband-shade{background:linear-gradient(0deg, rgba(12,2,3,.82) 0%, rgba(12,2,3,.3) 70%)}
  .lightband{align-items:flex-end}
}
.lightband-copy{width:100%}
.hero-slide img{filter:saturate(1) brightness(.96)}
.hero-slides::after{background:rgba(60,8,14,.12)}
.xp-kicker{text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ============================================================
   Home sections: price explorer, bento, stats
   ============================================================ */
.sec-h{font-size:clamp(28px,4.2vw,52px); font-weight:400; line-height:1.04; letter-spacing:-.034em; margin:0 0 14px 0; max-width:820px}
.sec-h em{font-style:italic; font-weight:300; color:var(--red-dark)}
.sec-h-dark{color:#fff} .sec-h-dark em{color:var(--brass)}
.sec-sub{font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:520px; margin:0 0 36px 0}

.pe-sec{position:relative; background:var(--surface-2); overflow:hidden; padding-bottom:110px}
.pe-glow{position:absolute; width:720px; height:720px; right:-220px; top:-240px; border-radius:50%; background:radial-gradient(circle, rgba(200,16,46,.13), transparent 68%); filter:blur(30px); pointer-events:none}
.pe-card{position:relative; background:rgba(255,255,255,.82); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.9); border-radius:26px; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(42,7,9,.05), 0 40px 80px -30px rgba(42,7,9,.28); padding:26px}
.pe-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.pe-tabs{position:relative; display:inline-flex; gap:2px; padding:4px; background:rgba(42,7,9,.05); border-radius:999px}
.pe-tabs button{position:relative; z-index:1; border:0; background:none; padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:color .3s; white-space:nowrap}
.pe-tabs button.is-active{color:var(--ink)}
.pe-ind{position:absolute; top:4px; bottom:4px; left:0; width:0; background:#fff; border-radius:999px; box-shadow:0 1px 2px rgba(42,7,9,.1), 0 6px 14px -6px rgba(42,7,9,.2); transition:transform .5s var(--ease-out), width .5s var(--ease-out)}
.pe-sort{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair); background:#fff; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--ink-soft); transition:border-color .3s, color .3s}
.pe-sort:hover{color:var(--ink); border-color:rgba(200,16,46,.3)}
.pe-sort svg{width:15px; height:15px}
.pe-body{display:grid; grid-template-columns:1fr 290px; gap:34px; align-items:start}
.pe-unit{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px}
.pe-chart{position:relative; display:flex; flex-direction:column}
.pe-chart::before{content:""; position:absolute; left:150px; right:78px; top:0; bottom:0; pointer-events:none; opacity:.9;
  background:repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(42,7,9,.06) calc(25% - 1px), rgba(42,7,9,.06) 25%)}
.pe-row{position:relative; display:grid; grid-template-columns:150px 1fr 78px; align-items:center; gap:0; width:100%; padding:9px 0; border:0; background:none; text-align:left; font:inherit; color:inherit}
.pe-name{font-size:13.5px; font-weight:500; color:var(--ink-soft); padding-right:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .25s}
.pe-track{position:relative; height:10px}
.pe-bar{position:absolute; left:0; top:0; height:10px; width:0; min-width:4px; border-radius:2px 5px 5px 2px; background:linear-gradient(90deg, var(--red-dark), var(--red)); opacity:.34; transition:width .9s var(--ease-out), opacity .3s, box-shadow .3s}
.pe-val{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500; text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums; transition:color .25s}
.pe-row.is-sel .pe-bar,.pe-row:hover .pe-bar{opacity:1; box-shadow:0 0 18px rgba(200,16,46,.45)}
.pe-row.is-sel .pe-name,.pe-row.is-sel .pe-val,.pe-row:hover .pe-name,.pe-row:hover .pe-val{color:var(--ink)}
.pe-row:focus-visible{outline-offset:-2px}
.pe-detail{position:sticky; top:96px; background:#fff; border:1px solid var(--hair); border-radius:20px; padding:14px; box-shadow:var(--shadow-1)}
.pe-thumb{border-radius:14px; overflow:hidden; background:var(--surface-2); aspect-ratio:1/1}
.pe-thumb img{width:100%; height:100%; object-fit:cover; transition:opacity .35s}
.pe-dname{font-family:'Fraunces',serif; font-size:21px; letter-spacing:-.02em; margin:16px 4px 4px 4px}
.pe-dprice{margin:0 4px 16px 4px; display:flex; align-items:baseline; gap:8px}
.pe-dprice span{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--red-dark)}
.pe-dprice small{font-size:13px; color:var(--ink-faint)}
.pe-enq{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px; background:var(--wine-900); color:#fff; font-size:13.5px; font-weight:600; transition:background .3s, transform .3s var(--ease-out)}
.pe-enq svg{width:16px; height:16px; transition:transform .3s var(--ease-out)}
.pe-enq:hover{background:var(--red)} .pe-enq:hover svg{transform:translateX(3px)}
.pe-foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--hair); font-size:12.5px; color:var(--ink-faint)}
.pe-foot a{color:var(--red-dark); font-weight:600}

/* bento */
.bento-sec{background:var(--bg)}
.bento-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:44px}
.bento{position:relative; background:linear-gradient(180deg,#fff, #fdfbf8); border:1px solid var(--hair); border-radius:24px; padding:30px; box-shadow:var(--shadow-1); overflow:hidden; transition:box-shadow .5s var(--ease-out), transform .5s var(--ease-out), border-color .3s; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end}
.bento:hover{box-shadow:var(--shadow-2); border-color:rgba(200,16,46,.18)}
.b1{grid-column:span 7} .b2{grid-column:span 5} .b3{grid-column:span 5} .b4{grid-column:span 7}
.b-ic{position:absolute; top:26px; left:30px; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--red-dark); background:linear-gradient(145deg, rgba(200,16,46,.12), rgba(200,16,46,.04)); border:1px solid rgba(200,16,46,.14)}
.bento h3{font-size:22px; font-weight:500; letter-spacing:-.02em; margin:0 0 8px 0}
.bento p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:420px}
.b1::before{content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(201,166,107,.28), transparent 68%)}
.b4::before{content:""; position:absolute; left:40%; top:-90px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(200,16,46,.10), transparent 68%)}
.b-chips{position:absolute; right:30px; top:30px; display:flex; gap:8px}
.b-chips i{display:block; width:22px; height:22px; border-radius:7px 11px 8px 12px; transform:rotate(var(--r,0deg)); transition:transform .6s var(--ease-out); box-shadow:0 4px 10px -4px rgba(0,0,0,.3)}
.b-chips i:nth-child(odd){--r:12deg} .b-chips i:nth-child(even){--r:-14deg}
.b4:hover .b-chips i{transform:translateY(-6px) rotate(calc(var(--r) * -2))}

/* stats */
.stats-sec{position:relative; overflow:hidden; padding:110px 32px; color:#fff; background:linear-gradient(165deg, var(--night-900), var(--wine-800) 55%, var(--wine-900))}
.stats-glow{position:absolute; width:800px; height:800px; left:55%; top:-380px; border-radius:50%; background:radial-gradient(circle, rgba(200,16,46,.34), transparent 65%); filter:blur(40px); pointer-events:none}
.stats-row{position:relative; display:grid; grid-template-columns:repeat(4,1fr); margin-top:56px; border-top:1px solid rgba(255,255,255,.12)}
.stat{padding:30px 26px 0 0}
.stat+.stat{padding-left:26px; border-left:1px solid rgba(255,255,255,.1)}
.stat-n{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(44px,6vw,84px); line-height:1; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums}
.stat-t{font-style:italic; color:var(--brass)}
.stat-l{margin-top:12px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.58); max-width:200px}

@media (max-width:768px){
  .pe-sec{padding:44px 0 56px}
  .pe-glow{width:420px; height:420px; right:-200px; top:-160px}
  .pe-card{padding:16px; border-radius:22px}
  .pe-top{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:18px}
  .pe-tabs{display:flex; overflow-x:auto; scrollbar-width:none} .pe-tabs::-webkit-scrollbar{display:none}
  .pe-tabs button{padding:9px 14px; font-size:13px}
  .pe-sort{align-self:flex-start}
  .pe-body{grid-template-columns:1fr; gap:20px}
  .pe-chart::before{left:0; right:0; top:22px}
  .pe-row{grid-template-columns:1fr auto; grid-template-areas:"n v" "t t"; padding:8px 0 10px; row-gap:6px}
  .pe-name{grid-area:n; white-space:normal} .pe-val{grid-area:v} .pe-track{grid-area:t}
  .pe-detail{position:static; display:grid; grid-template-columns:88px 1fr; column-gap:14px; align-items:center; padding:12px}
  .pe-thumb{grid-row:1 / 4; aspect-ratio:1/1; width:88px}
  .pe-dname{margin:0; font-size:18px} .pe-dprice{margin:2px 0 8px 0} .pe-enq{padding:10px}
  .sec-sub{margin-bottom:22px; font-size:15px}
  .bento-sec .wrap,.pe-sec .wrap,.stats-sec .wrap{padding:0 20px}
  .bento-grid{grid-template-columns:1fr 1fr; gap:10px; margin-top:26px}
  .b1,.b2,.b3,.b4{grid-column:span 1}
  .b1,.b4{grid-column:span 2}
  .bento{padding:20px; min-height:190px; border-radius:20px}
  .b-ic{top:18px; left:20px; width:40px; height:40px; border-radius:12px}
  .bento h3{font-size:17px} .bento p{font-size:13px}
  .b-chips{right:20px; top:22px} .b-chips i{width:16px; height:16px}
  .stats-sec{padding:64px 0 70px}
  .stats-row{grid-template-columns:1fr 1fr; margin-top:36px}
  .stat{padding:22px 14px 24px 0; border-bottom:1px solid rgba(255,255,255,.1)}
  .stat+.stat{padding-left:0; border-left:0}
  .stat:nth-child(even){padding-left:18px; border-left:1px solid rgba(255,255,255,.1)}
  .stat-n{font-size:46px} .stat-l{font-size:12.5px}
}
@media (max-width:768px){ .pe-chart::before{display:none} }

/* ---- Editorial label typography + logo mark ---- */
.hero-kicker,.xp-kicker,.hero-caption,.hero-meta,.pe-unit,.series-photo figcaption{font-family:'Fraunces',serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:0}
.hero-kicker{font-size:clamp(17px,1.5vw,21px); margin-bottom:22px; gap:0}
.hero-kicker::before{display:none}
.hero-caption{font-size:15px; margin-left:14px; color:rgba(255,255,255,.7)}
.hero-meta{font-size:15px; line-height:1.6; color:rgba(255,255,255,.6)}
.hero-meta b{font-style:normal; font-family:'IBM Plex Sans',sans-serif; font-weight:600; color:#fff}
.xp-kicker{font-size:16px; color:var(--brass); margin-bottom:6px}
.pe-unit{font-size:17px; color:var(--ink-soft); margin-bottom:12px}
.series-photo figcaption{font-size:14px; padding:6px 13px}
.pe-val,.pe-dprice span{font-family:'IBM Plex Sans',sans-serif; font-variant-numeric:tabular-nums}
.pe-val{font-size:13.5px; font-weight:600}
.pe-dprice span{font-size:22px; font-weight:600}
.eyebrow[style*="brass"]{color:var(--brass) !important}

/* Logo: just the S-house mark, fused into the dark gradient (no white disc, no red ring) */
body.v2-home .nav-logo img,body.v2-home .m-topbar .brand img{border-radius:0; width:auto; filter:drop-shadow(0 0 12px rgba(200,16,46,.5)) drop-shadow(0 2px 6px rgba(0,0,0,.35))}
body.v2-home .nav-logo img{height:30px !important}
body.v2-home .m-topbar .brand img{height:24px !important}
body.v2-home .nav-logo{gap:12px} body.v2-home .m-topbar .brand{gap:10px}