/* ============================================================
   AARAVYA SPACES — v4 design language
   Continuous canvas, full-bleed bands (no floating dark boxes),
   editorial rows, scroll-driven door hero, bigger logo.
   ============================================================ */
:root{
  --silver:#CFD3D8; --silver-2:#9AA0A6; --nav-dark:#211710;
  --ink2:#2C2620; --cream2:#F7F1E7;
}
html.m-js [data-reveal], html.m-js [data-hero]{ opacity:0; }
html:not(.m-js) [data-reveal], html:not(.m-js) [data-hero]{ opacity:1 !important; transform:none !important; }
body{ background:var(--cream2); }

/* full-bleed helper: lets a block inside .container span the whole viewport */
.bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* ---------- NAV: always visible, BIG logo ---------- */
.header{ background:rgba(33,23,16,.96); backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(28,19,11,.20); border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .4s var(--ease), padding .4s var(--ease); padding:14px 0; }
.header.over:not(.scrolled){ background:rgba(33,23,16,.34); box-shadow:none; border-bottom-color:transparent; }
.header.scrolled{ padding:8px 0; background:rgba(33,23,16,.97); }
.header .brand-logo{ height:58px; width:auto; display:block; transition:height .4s var(--ease); filter:drop-shadow(0 2px 12px rgba(0,0,0,.4)); }
.header.scrolled .brand-logo{ height:48px; }
.brand-fallback{ display:none; align-items:center; gap:10px; color:#fff; font-family:var(--serif); font-size:1.6rem; font-weight:700; }
.brand-fallback .mark{ width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--oak),var(--brass));display:grid;place-items:center;color:#fff; }
.header .menu>li>a{ color:#F4ECDF; font-weight:500; }
.header .menu>li>a:hover, .header .menu>li.active>a{ color:#fff; background:rgba(255,255,255,.14); }
.header .dropdown{ background:#fff; } .header .dropdown a{ color:var(--ink); }
.header .nav-cta .btn-primary{ background:var(--brass); color:#211710; box-shadow:0 10px 26px rgba(192,149,79,.4); }
.header .nav-cta .btn-primary:hover{ background:#d2ab66; }
.header .burger{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.header .burger span{ background:#fff; }

/* ---------- SCROLL-DRIVEN DOOR HERO ---------- */
.door-hero{ position:relative; height:210vh; }
.door-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(140% 120% at 50% 120%, #5a3d24 0%, #3a2817 42%, #241910 100%); }
.door-interior{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(60% 60% at 50% 60%, rgba(232,193,128,.35), transparent 70%); }
.door-half{ position:absolute; top:-2%; height:104%; width:51%; z-index:1; will-change:transform;
  box-shadow:0 0 80px rgba(0,0,0,.5); }
.door-half::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 3px, transparent 3px 16px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px); }
.door-half.l{ left:0; background:linear-gradient(100deg,#3f2a19,#6e4a2f); border-right:2px solid rgba(0,0,0,.4); }
.door-half.r{ right:0; background:linear-gradient(260deg,#3f2a19,#6e4a2f); border-left:2px solid rgba(0,0,0,.4); }
.door-half .handle{ position:absolute; top:46%; width:7px; height:74px; border-radius:5px; background:rgba(247,235,210,.65); box-shadow:0 0 16px rgba(255,225,170,.5); }
.door-half.l .handle{ right:18px; } .door-half.r .handle{ left:18px; }
.door-content{ position:relative; z-index:2; text-align:center; color:#fff; padding:0 24px; max-width:980px; }
.door-content .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:22px; }
.door-content .hl::before,.door-content .hl::after{ content:""; width:34px; height:1px; background:var(--brass); }
.door-content h1{ color:#fff; font-size:clamp(3rem,8vw,7rem); line-height:.98; letter-spacing:-.02em; }
.door-content h1 .it{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.door-content .sub{ margin:26px auto 0; max-width:50ch; font-size:clamp(1.05rem,1.5vw,1.25rem); color:rgba(255,255,255,.85); line-height:1.65; }
.door-content .acts{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:36px; }
.door-content .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.door-content .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.door-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; color:rgba(255,255,255,.7); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:9px; }
.door-cue .ln{ width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:cue 2s ease-in-out infinite; transform-origin:top; }
@keyframes shine{ to{ background-position:200% center; } }
@keyframes cue{ 0%,100%{transform:scaleY(1);opacity:.7} 50%{transform:scaleY(.45);opacity:.3} }
html:not(.m-js) .door-half.l{ transform:translateX(-72%); }
html:not(.m-js) .door-half.r{ transform:translateX(72%); }

/* ---------- ETHOS line ---------- */
.ethos{ text-align:center; padding:120px 0 90px; max-width:1000px; margin:0 auto; }
.ethos .kicker{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); font-weight:600; }
.ethos h2{ font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.2; margin:22px 0 0; letter-spacing:-.01em; }
.ethos h2 b{ font-weight:600; color:var(--walnut); }

/* ---------- EDITORIAL ROWS (de-boxed products) ---------- */
.rows{ display:flex; flex-direction:column; gap:10px; }
.frow{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; padding:46px 0; border-top:1px solid var(--line); }
.frow:first-child{ border-top:none; }
.frow.rev .frow-media{ order:2; }
.frow-media{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 30px 70px rgba(76,51,31,.14); }
.frow-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.frow:hover .frow-media img{ transform:scale(1.06); }
.frow-media .num{ position:absolute; top:18px; left:20px; font-family:var(--serif); color:#fff; font-size:1.1rem; text-shadow:0 2px 8px rgba(0,0,0,.4); letter-spacing:.05em; }
.frow-body .kick{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); font-weight:600; }
.frow-body h3{ font-size:clamp(1.8rem,3.4vw,2.7rem); margin:12px 0 14px; letter-spacing:-.01em; }
.frow-body p{ color:var(--muted); font-size:1.06rem; max-width:46ch; }
.frow-body .lk{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; color:var(--walnut); font-weight:600; border-bottom:2px solid var(--brass); padding-bottom:3px; }
.frow-body .lk:hover{ gap:14px; }

/* ---------- ONE intentional dark CRAFT band (full-bleed) ---------- */
.craft{ background:radial-gradient(120% 120% at 80% 0%, #3a2817, #211710); color:#efe3d2; padding:110px 0; }
.craft .head{ max-width:680px; }
.craft .kicker{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); font-weight:600; }
.craft h2{ color:#fff; font-size:clamp(2rem,4vw,3rem); margin:16px 0 14px; }
.craft p.intro{ color:rgba(239,227,210,.75); font-size:1.05rem; }
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:60px; position:relative; }
.timeline::before{ content:""; position:absolute; top:33px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,rgba(192,149,79,.55) 12%,rgba(192,149,79,.55) 88%,transparent); }
.tstep{ text-align:center; }
.tstep .dot{ width:66px;height:66px;margin:0 auto 18px;border-radius:50%;background:#211710;border:2px solid var(--brass);color:var(--brass-soft);display:grid;place-items:center;font-family:var(--serif);font-size:1.4rem;position:relative;z-index:1;transition:transform .4s var(--ease),background .4s,color .4s; }
.tstep:hover .dot{ transform:translateY(-6px); background:var(--brass); color:#211710; }
.tstep h4{ color:#fff; font-size:1.12rem; margin-bottom:8px; }
.tstep p{ color:rgba(239,227,210,.7); font-size:.92rem; }

/* ---------- EXPORT (light editorial, sticky heading) ---------- */
.exportL{ padding:110px 0; }
.exportL .wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start; }
.exportL .lead{ position:sticky; top:120px; }
.exportL .kicker{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); font-weight:600; }
.exportL .lead h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin:16px 0 16px; letter-spacing:-.01em; }
.exportL .lead p{ color:var(--muted); }
.exportL .lead .stamp{ margin-top:22px; display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px; background:#efe6d4; color:var(--walnut); font-size:.9rem; font-weight:600; }
.exportL .lead .stamp svg{ width:20px; }
.exrow{ display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.exrow:first-child{ border-top:none; }
.exrow .no{ font-family:var(--serif); font-size:1.5rem; color:var(--brass); flex:none; width:46px; }
.exrow h4{ font-size:1.18rem; margin-bottom:6px; }
.exrow p{ color:var(--muted); font-size:.97rem; }

/* ---------- STATS minimal ---------- */
.statline{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 0; padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.statline .s{ flex:1 1 200px; text-align:center; }
.statline .v{ font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.4rem); color:var(--walnut); line-height:1; }
.statline .l{ color:var(--muted); margin-top:8px; font-size:.92rem; }

/* ---------- CTA band (full-bleed warm, not a floating box) ---------- */
.cta-band{ background:radial-gradient(120% 140% at 50% 0%, #5a3d24, #2f2113 60%, #211710); color:#fff; padding:110px 0; text-align:center; }
.cta-band .kicker{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); font-weight:600; }
.cta-band h2{ color:#fff; font-size:clamp(2.1rem,4.4vw,3.3rem); margin:16px auto 16px; max-width:18ch; }
.cta-band p{ color:rgba(255,255,255,.82); max-width:54ch; margin:0 auto 30px; font-size:1.06rem; }

/* ---------- FLATTEN legacy cards/sections used on other pages ---------- */
.pcard{ border:none; border-radius:16px; box-shadow:0 16px 44px rgba(76,51,31,.10); background:#fff; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover{ transform:translateY(-8px); box-shadow:0 30px 70px rgba(76,51,31,.16); }
.products{ gap:30px; }
.banner{ background:linear-gradient(180deg,#efe6d4,var(--cream2)); }
/* old floating dark blocks -> flat full-bleed friendly */
.process-wrap{ background:radial-gradient(120% 120% at 80% 0%, #3a2817, #211710) !important; border-radius:0 !important; }
.section.export{ background:radial-gradient(120% 120% at 80% 0%, #3a2817, #211710); }
.cta{ border-radius:0 !important; }
.cta .cta-bg{ display:none; }

/* ---------- PLACEHOLDERS (until real/AI photos added) ---------- */
.ph{ position:relative; width:100%; height:100%; min-height:200px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(150deg,#caa06a,#8a5f38); }
.ph::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(92deg, rgba(0,0,0,.06) 0 3px, transparent 3px 15px), radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 55%); }
.ph .ph-label{ position:relative; z-index:1; color:#fff; font-family:var(--serif); font-size:1.15rem; font-weight:600; text-align:center; padding:0 18px; text-shadow:0 2px 10px rgba(0,0,0,.3); }
.ph::before{ content:""; position:absolute; top:50%; left:22px; transform:translateY(-50%); width:5px; height:46px; border-radius:4px; background:rgba(255,255,255,.42); z-index:1; }
.ph-0{ background:linear-gradient(150deg,#9a6336,#5e3b22); } .ph-1{ background:linear-gradient(150deg,#c08a52,#7a5230); }
.ph-2{ background:linear-gradient(150deg,#d4ab70,#8a5f38); } .ph-3{ background:linear-gradient(150deg,#6e4a2f,#3f2a19); }
.ph-4{ background:linear-gradient(150deg,#b98a55,#6e4a2f); } .ph-5{ background:linear-gradient(150deg,#8a5f38,#4a331f); }

/* ---------- editorial rule (kept) ---------- */
.editorial-rule{ display:flex; align-items:center; gap:18px; margin:0 0 18px; }
.editorial-rule .l{ width:54px; height:2px; background:linear-gradient(90deg,var(--silver-2),var(--brass)); border-radius:2px; }
.editorial-rule .t{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); font-weight:600; }

@media (prefers-reduced-motion:reduce){ .door-content h1 .it,.door-cue .ln{ animation:none; } }
@media (max-width:980px){
  .exportL .wrap{ grid-template-columns:1fr; gap:30px; } .exportL .lead{ position:static; }
  .timeline{ grid-template-columns:1fr 1fr; gap:34px; } .timeline::before{ display:none; }
}
@media (max-width:760px){
  .door-hero{ height:200vh; }
  .frow{ grid-template-columns:1fr; gap:24px; padding:34px 0; } .frow.rev .frow-media{ order:0; }
  .timeline{ grid-template-columns:1fr; } .ethos{ padding:80px 0 60px; }
  .header .brand-logo{ height:54px; }
}

/* ---------- flatten remaining legacy cards (about/contact) ---------- */
.value{ border:none !important; box-shadow:0 16px 44px rgba(76,51,31,.08); border-radius:16px; }
.value:hover{ box-shadow:0 26px 60px rgba(76,51,31,.14); }
.info-card{ border:none !important; box-shadow:0 12px 34px rgba(76,51,31,.08); }
.cta{ background:radial-gradient(120% 140% at 50% 0%, #5a3d24, #2f2113 60%, #211710) !important; }

/* ============================================================
   SHOWCASE — de-boxed product gallery (replaces .pcard grid)
   ============================================================ */
.showcase{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:44px 32px; }
.scard{ display:flex; flex-direction:column; }
.scard .media{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3.3; box-shadow:0 22px 50px rgba(76,51,31,.13); }
.scard .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.scard:hover .media img{ transform:scale(1.06); }
.scard .media .ph{ min-height:0; }
.scard .tagm{ position:absolute; top:14px; left:14px; background:rgba(33,23,16,.78); color:#f0e6d6; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:30px; backdrop-filter:blur(4px); }
.scard h3{ font-size:1.4rem; margin:18px 0 8px; letter-spacing:-.01em; }
.scard p{ color:var(--muted); font-size:.98rem; }
.scard .more{ margin-top:14px; display:inline-flex; align-items:center; gap:9px; color:var(--walnut); font-weight:600; font-size:.94rem; width:max-content; border-bottom:2px solid var(--brass); padding-bottom:3px; transition:gap .3s var(--ease); }
.scard .more:hover{ gap:14px; }
.scard.feature .media{ aspect-ratio:16/10; }

/* ============================================================
   RESPONSIVE — mobile + tablet + desktop
   ============================================================ */
@media (max-width:1024px){
  .frow{ grid-template-columns:1fr 1fr; gap:40px; }
  .exportL .wrap{ grid-template-columns:1fr; gap:30px; } .exportL .lead{ position:static; }
}
@media (max-width:760px){
  .door-hero{ height:170vh; }
  .door-content{ padding:0 20px; }
  .door-content h1{ font-size:clamp(2.6rem,12vw,4rem); }
  .door-content .sub{ font-size:1rem; }
  .door-content .acts{ flex-direction:column; align-items:stretch; }
  .door-content .acts .btn{ justify-content:center; }
  .ethos{ padding:64px 0 50px; }
  .ethos h2{ font-size:clamp(1.5rem,6vw,2rem); }
  .frow{ grid-template-columns:1fr; gap:22px; padding:30px 0; } .frow.rev .frow-media{ order:0; }
  .frow-body p{ max-width:none; }
  .craft, .exportL, .cta-band{ padding:64px 0; }
  .timeline{ grid-template-columns:1fr; gap:30px; } .timeline::before{ display:none; }
  .showcase{ grid-template-columns:1fr; gap:32px; }
  .statline{ padding:44px 0; } .statline .s{ flex-basis:45%; }
  .cta-band h2{ font-size:clamp(1.7rem,7vw,2.2rem); }
  .header .brand-logo{ height:50px; } .header.scrolled .brand-logo{ height:44px; }
}
@media (max-width:430px){
  .door-content h1{ font-size:2.4rem; }
  .statline .s{ flex-basis:100%; }
}

/* ---------- slimmer, refined closing CTA (less "big box") ---------- */
.cta-band{ padding:80px 0; border-top:3px solid var(--brass); }
.cta-band .container{ max-width:780px; }
.cta-band h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin:14px auto 14px; max-width:20ch; }
.cta-band p{ font-size:1rem; margin-bottom:26px; }

/* ---------- image-led hero: interior revealed behind the doors ---------- */
.door-interior{ overflow:hidden; }
.door-interior img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.door-interior .door-img{ position:absolute; inset:0; background:linear-gradient(165deg,#7a5230,#3a2817); }
.door-interior::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(72% 72% at 50% 52%, transparent, rgba(20,13,7,.6)); }
.hero-trust{ display:flex; gap:8px 22px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.78); font-size:.8rem; letter-spacing:.03em; }
.hero-trust span::before{ content:""; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--brass); background:radial-gradient(circle,var(--brass) 0 40%,transparent 42%); flex:none; }

/* ---------- hero v2: image visible on load, doors ajar, readable ---------- */
.door-half.l{ transform:translateX(-42%); }
.door-half.r{ transform:translateX(42%); }
html:not(.m-js) .door-half.l{ transform:translateX(-42%); }
html:not(.m-js) .door-half.r{ transform:translateX(42%); }
.door-interior{ background:#241910; }
.door-interior img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kburn 22s ease-in-out infinite alternate; }
.door-interior::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(62% 56% at 50% 46%, rgba(20,13,7,.55), transparent 76%),
            linear-gradient(180deg, rgba(20,13,7,.42), rgba(20,13,7,.12) 32%, rgba(20,13,7,.66)); }
@keyframes kburn{ from{ transform:scale(1.02); } to{ transform:scale(1.1); } }
@media (prefers-reduced-motion:reduce){ .door-interior img{ animation:none; } }

/* ---------- hero background video ---------- */
.door-interior video.hero-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.door-interior .hero-fallimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; animation:kburn 22s ease-in-out infinite alternate; }
@media (prefers-reduced-motion:reduce){ .door-interior video.hero-vid{ display:none; } .door-interior .hero-fallimg{ z-index:0; animation:none; } }

/* ============================================================
   EDITORIAL SPLIT HERO (hero3) — light, premium, photo-led
   ============================================================ */
.hero3{ padding:150px 0 80px; background:linear-gradient(180deg,#efe6d4,var(--cream2)); }
.hero3-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:60px; align-items:center; }
.hero3-copy h1{ font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:1.04; letter-spacing:-.02em; margin:20px 0 22px; color:var(--ink); }
.hero3-copy h1 em{ font-style:italic; color:var(--walnut); }
.hero3-copy p{ color:var(--muted); font-size:1.12rem; max-width:48ch; line-height:1.65; }
.hero3-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.btn-ghost.dark{ color:var(--ink); border-color:var(--line); }
.btn-ghost.dark:hover{ border-color:var(--walnut); color:var(--walnut); }
.hero3-trust{ display:flex; gap:9px 20px; flex-wrap:wrap; margin-top:30px; }
.hero3-trust span{ font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:7px; letter-spacing:.01em; }
.hero3-trust span::before{ content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--brass); background:radial-gradient(circle,var(--brass) 0 40%,transparent 42%); flex:none; }
.hero3-media{ position:relative; }
.hero3-media img{ width:100%; aspect-ratio:4/4.7; object-fit:cover; border-radius:24px; box-shadow:0 44px 90px rgba(76,51,31,.24); }
.hero3-badge{ position:absolute; left:-22px; bottom:34px; background:#fff; border-radius:18px; padding:18px 22px; box-shadow:0 20px 50px rgba(76,51,31,.20); text-align:center; }
.hero3-badge .b{ font-family:var(--serif); font-size:2.1rem; color:var(--walnut); display:block; line-height:1; }
.hero3-badge small{ color:var(--muted); font-size:.74rem; letter-spacing:.02em; }
@media (max-width:860px){
  .hero3{ padding:120px 0 56px; }
  .hero3-grid{ grid-template-columns:1fr; gap:34px; }
  .hero3-media img{ aspect-ratio:4/3.2; }
  .hero3-badge{ left:14px; bottom:-18px; }
}

/* ============================================================
   BENTO PRODUCT-GRID HERO
   ============================================================ */
.hero-bento-sec{ padding:140px 0 72px; background:linear-gradient(180deg,#efe6d4,var(--cream2)); }
.hero-bento{ display:grid; grid-template-columns:1.02fr 1fr; gap:22px; align-items:stretch; }
.bento-head{ display:flex; flex-direction:column; justify-content:center; }
.bento-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; min-height:520px; }
.btile{ position:relative; border-radius:20px; overflow:hidden; box-shadow:0 26px 60px rgba(76,51,31,.16); display:block; }
.btile img,.btile .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.btile .ph{ min-height:0; }
.btile:hover img,.btile:hover .ph{ transform:scale(1.07); }
.btile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(20,13,7,.62)); z-index:1; }
.btile span{ position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; font-family:var(--serif); font-size:1.18rem; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,.4); }
@media (max-width:860px){
  .hero-bento-sec{ padding:120px 0 56px; }
  .hero-bento{ grid-template-columns:1fr; gap:26px; }
  .bento-grid{ min-height:0; grid-template-rows:repeat(2,150px); }
}

/* ============================================================
   LIGHT MINIMAL CTA (replaces heavy dark band, all pages)
   ============================================================ */
.cta-band{ background:var(--cream2) !important; color:var(--ink) !important; padding:96px 0 !important;
  border-top:1px solid var(--line); text-align:center; }
.cta-band .container{ max-width:760px; }
.cta-band .kicker{ display:inline-flex; align-items:center; gap:12px; color:var(--brass); }
.cta-band .kicker::before,.cta-band .kicker::after{ content:""; width:30px; height:1px; background:var(--brass); }
.cta-band h2{ color:var(--ink); font-size:clamp(1.9rem,3.8vw,2.8rem); margin:18px auto 16px; max-width:20ch; }
.cta-band p{ color:var(--muted); margin-bottom:28px; }
.cta-band .btn-light{ background:var(--walnut); color:#fff; box-shadow:0 14px 30px rgba(110,74,47,.28); }
.cta-band .btn-light:hover{ background:var(--walnut-deep); }

/* ---------- bento v2: asymmetric, alive ---------- */
.bento-grid{ grid-template-columns:1fr 1fr; grid-template-rows:1.15fr 1.15fr .9fr; min-height:580px;
  transition:transform .25s ease; transform-style:preserve-3d; }
.btile:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
.btile:nth-child(2){ grid-column:2; grid-row:1; }
.btile:nth-child(3){ grid-column:2; grid-row:2; }
.btile:nth-child(4){ grid-column:1 / span 2; grid-row:3; }
.btile::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%);
  transform:translateX(-130%); animation:sheen 7s ease-in-out infinite; }
.btile:nth-child(2)::before{ animation-delay:1.4s; }
.btile:nth-child(3)::before{ animation-delay:2.8s; }
.btile:nth-child(4)::before{ animation-delay:4.2s; }
@keyframes sheen{ 0%,14%{transform:translateX(-130%)} 32%{transform:translateX(130%)} 100%{transform:translateX(130%)} }
.rot{ display:inline-block; min-width:1ch; transition:opacity .3s var(--ease), transform .3s var(--ease); }
@media (prefers-reduced-motion:reduce){ .btile::before{ animation:none; } .bento-grid{ transform:none !important; } }
@media (max-width:860px){
  .bento-grid{ grid-template-rows:170px 170px 150px; transform:none !important; }
}

/* ---------- process v2: informative vertical steps ---------- */
.proc{ margin-top:48px; }
.pstep{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:26px 0; border-top:1px solid rgba(255,255,255,.12); }
.pstep:first-child{ border-top:none; }
.pn{ font-family:var(--serif); font-size:1.4rem; color:var(--brass-soft); width:56px; height:56px; flex:none;
  border:2px solid rgba(192,149,79,.5); border-radius:50%; display:grid; place-items:center; transition:.3s var(--ease); }
.pstep:hover .pn{ background:var(--brass); color:#211710; border-color:var(--brass); transform:translateY(-3px); }
.pbody h4{ color:#fff; font-family:var(--sans); font-size:1.2rem; margin-bottom:7px; }
.pbody p{ color:rgba(239,227,210,.78); font-size:.99rem; max-width:62ch; line-height:1.6; }
.pdel{ display:inline-block; margin-top:12px; font-size:.8rem; font-weight:600; color:#211710;
  background:var(--brass-soft); padding:5px 13px; border-radius:20px; }

/* ---------- hero scroll cue (pull into page) ---------- */
.hero-bento-sec{ padding-bottom:44px; }
.hero-scroll{ display:inline-flex; align-items:center; gap:13px; margin-top:30px; color:var(--walnut);
  font-weight:600; font-size:.92rem; letter-spacing:.01em; }
.hero-scroll:hover{ color:var(--walnut-deep); }
.hero-scroll .hsc{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--brass);
  display:inline-grid; place-items:center; position:relative; }
.hero-scroll .hsc::after{ content:""; width:7px; height:7px; border-right:2px solid var(--brass);
  border-bottom:2px solid var(--brass); transform:rotate(45deg); margin-top:-2px; animation:hbounce 1.6s ease-in-out infinite; }
@keyframes hbounce{ 0%,100%{transform:rotate(45deg) translateY(-2px);opacity:.6} 50%{transform:rotate(45deg) translateY(2px);opacity:1} }
@media (prefers-reduced-motion:reduce){ .hero-scroll .hsc::after{ animation:none; } }

/* ---------- process v3: light icon timeline ---------- */
.process2{ padding:104px 0; background:var(--ivory-2); }
.process2 .head.center{ text-align:center; margin:0 auto 44px; max-width:780px; }
.process2 .head.center p{ color:var(--muted); }
.ptl{ max-width:800px; margin:0 auto; position:relative; }
.ptl::before{ content:""; position:absolute; left:27px; top:14px; bottom:14px; width:2px; background:linear-gradient(var(--brass),rgba(192,149,79,.2)); }
.pnode{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:18px 0; }
.pic{ width:56px; height:56px; flex:none; border-radius:50%; background:#fff; border:2px solid var(--brass); color:var(--walnut); display:grid; place-items:center; z-index:1; box-shadow:0 10px 24px rgba(76,51,31,.12); transition:.3s var(--ease); }
.pnode:hover .pic{ background:var(--brass); color:#fff; transform:translateY(-3px); }
.pcontent{ padding-top:4px; }
.ptop{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pcontent h4{ font-size:1.22rem; }
.ptime{ font-size:.72rem; font-weight:600; color:var(--walnut); background:#efe6d4; padding:3px 11px; border-radius:20px; letter-spacing:.02em; }
.pcontent p{ color:var(--muted); margin:7px 0 9px; font-size:1rem; line-height:1.6; max-width:56ch; }
.pdel{ display:inline-block; font-size:.8rem; font-weight:600; color:var(--walnut); border:1px solid var(--line); background:#fff; padding:4px 12px; border-radius:20px; }
@media (max-width:600px){ .ptl::before{ left:21px; } .pic{ width:44px; height:44px; } .pnode{ gap:16px; } .process2{ padding:72px 0; } }

/* ============================================================
   SPOTLIGHT REVEAL HERO
   ============================================================ */
.spot-hero{ position:relative; min-height:92svh; display:flex; align-items:center; overflow:hidden; color:#fff; background:#1b120a; --x:60%; --y:42%; }
.spot-bg{ position:absolute; inset:0; z-index:0; }
.spot-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.spot-dim{ filter:brightness(.30) saturate(.92); }
.spot-bright{ filter:brightness(1.08) saturate(1.05);
  -webkit-mask:radial-gradient(circle 250px at var(--x) var(--y), #000 0 52%, transparent 78%);
          mask:radial-gradient(circle 250px at var(--x) var(--y), #000 0 52%, transparent 78%); }
.spot-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(18,12,7,.86) 0%, rgba(18,12,7,.55) 52%, rgba(18,12,7,.25) 100%); }
.spot-inner{ position:relative; z-index:2; padding:120px 0; max-width:760px; }
.spot-hero .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:22px; }
.spot-hero .hl::before{ content:""; width:36px; height:1px; background:var(--brass); }
.spot-hero h1{ color:#fff; font-size:clamp(2.8rem,6.5vw,5.6rem); line-height:1.02; letter-spacing:-.02em; }
.spot-hero h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.spot-hero .sub{ margin-top:24px; font-size:clamp(1.05rem,1.5vw,1.25rem); color:rgba(255,255,255,.85); max-width:54ch; line-height:1.65; }
.spot-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.spot-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.spot-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.spot-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; }
.spot-chips a{ font-size:.86rem; color:#f0e6d6; padding:9px 16px; border-radius:40px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); transition:.25s; }
.spot-chips a:hover{ background:var(--brass); color:#211710; border-color:var(--brass); }
.spot-hint{ margin-top:30px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); display:inline-flex; align-items:center; gap:9px; }
.spot-hint .dot{ width:8px; height:8px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 0 rgba(192,149,79,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(192,149,79,.5)} 70%{box-shadow:0 0 0 12px rgba(192,149,79,0)} 100%{box-shadow:0 0 0 0 rgba(192,149,79,0)} }
@media (max-width:760px){ .spot-inner{ padding:120px 0 80px; } .spot-acts{ flex-direction:column; align-items:stretch; } .spot-acts .btn{ justify-content:center; } }
@media (prefers-reduced-motion:reduce){ .spot-bright{ -webkit-mask:none; mask:none; filter:brightness(.6); } .spot-hint{ display:none; } }

/* ---------- floating WhatsApp button (all pages) ---------- */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:90; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.45); transition:transform .3s var(--ease); }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }
@media (max-width:600px){ .wa-float{ width:50px; height:50px; right:16px; bottom:16px; } }

/* ============================================================
   ANIMATED SVG LINE-ART HERO
   ============================================================ */
.la-hero{ position:relative; min-height:90svh; display:flex; align-items:center; overflow:hidden; color:#fff;
  background:radial-gradient(130% 120% at 78% 8%, #46311d 0%, #2a1d12 46%, #1b120a 100%); }
.la-bg{ position:absolute; inset:0; z-index:0; }
.la-bg::before{ content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:5px 5px; }
.la-glow{ position:absolute; right:8%; top:50%; transform:translateY(-50%); width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,150,75,.28), transparent 62%); filter:blur(20px); animation:laglow 7s ease-in-out infinite; }
@keyframes laglow{ 0%,100%{transform:translateY(-50%) scale(1);opacity:.8} 50%{transform:translateY(-54%) scale(1.06);opacity:1} }
.la-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr; gap:50px; align-items:center; padding:120px 0; }
.la-copy .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:22px; }
.la-copy .hl::before{ content:""; width:36px; height:1px; background:var(--brass); }
.la-copy h1{ color:#fff; font-size:clamp(2.7rem,6vw,5.4rem); line-height:1.02; letter-spacing:-.02em; }
.la-copy h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.la-copy .sub{ margin-top:24px; font-size:clamp(1.05rem,1.5vw,1.22rem); color:rgba(255,255,255,.84); max-width:52ch; line-height:1.65; }
.la-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.la-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.la-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.la-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:32px; }
.la-chips a{ font-size:.84rem; color:#f0e6d6; padding:8px 15px; border-radius:40px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); transition:.25s; }
.la-chips a:hover{ background:var(--brass); color:#211710; border-color:var(--brass); }
.la-art{ display:flex; justify-content:center; }
.la-art svg{ width:min(360px,80%); height:auto; color:var(--brass-soft); overflow:visible;
  filter:drop-shadow(0 0 26px rgba(201,150,75,.35)); animation:lafloat 7s ease-in-out infinite; }
@keyframes lafloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.la-d{ stroke-dasharray:1; stroke-dashoffset:1; animation:ladraw 1.5s var(--ease) forwards; }
@keyframes ladraw{ to{ stroke-dashoffset:0; } }
.la-fill{ fill:rgba(201,150,75,0); animation:ladraw 1.5s var(--ease) forwards, lafill 1.2s ease forwards 1.9s; }
@keyframes lafill{ to{ fill:rgba(201,150,75,.07); } }
.la-handle{ fill:rgba(247,235,210,0); animation:ladraw 1.5s var(--ease) forwards, lahandle 1s ease forwards 2.4s; }
@keyframes lahandle{ to{ fill:rgba(247,235,210,.9); } }
@media (prefers-reduced-motion:reduce){ .la-d,.la-fill,.la-handle,.la-art svg,.la-glow{ animation:none !important; stroke-dashoffset:0 !important; } .la-fill{ fill:rgba(201,150,75,.07);} .la-handle{ fill:rgba(247,235,210,.9);} }
@media (max-width:860px){
  .la-grid{ grid-template-columns:1fr; gap:14px; padding:120px 0 70px; }
  .la-art{ order:-1; } .la-art svg{ width:200px; }
  .la-acts{ flex-direction:column; align-items:stretch; } .la-acts .btn{ justify-content:center; }
}

/* ============================================================
   HOUSE LINE-TO-PRODUCT HERO
   ============================================================ */
.house-hero{ position:relative; overflow:hidden; color:#fff; padding:128px 0 70px;
  background:radial-gradient(130% 120% at 50% 0%, #46311d 0%, #2a1d12 48%, #1b120a 100%); }
.house-copy{ position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto; }
.house-copy .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:20px; }
.house-copy .hl::before,.house-copy .hl::after{ content:""; width:30px; height:1px; background:var(--brass); }
.house-copy h1{ color:#fff; font-size:clamp(2.6rem,6vw,5rem); line-height:1.04; letter-spacing:-.02em; }
.house-copy h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.house-copy .sub{ margin:22px auto 0; font-size:clamp(1.02rem,1.4vw,1.18rem); color:rgba(255,255,255,.82); max-width:54ch; line-height:1.6; }
.house-copy .la-acts{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.house-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.house-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }
.house-art{ position:relative; z-index:2; margin-top:18px; display:flex; justify-content:center; }
.house-art svg{ width:min(760px,100%); height:auto; color:var(--brass-soft); overflow:visible; }
.hz-fill{ opacity:0; animation:hzfill 1s ease forwards; transition:opacity .3s var(--ease), filter .3s; }
@keyframes hzfill{ to{ opacity:.85; } }
.fz-door{ fill:#5e3b22; } .fz-win{ fill:#b9d2da; } .fz-furn{ fill:#9a6a3c; } .fz-floor{ fill:#8a5f38; }
.hz{ cursor:pointer; }
.hz-label{ fill:rgba(255,255,255,.0); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.03em; opacity:0; pointer-events:none; animation:hzlabel .8s ease forwards 3.5s; }
@keyframes hzlabel{ to{ opacity:1; fill:rgba(255,255,255,.82); } }
.house-art:hover .hz .hz-fill{ opacity:.35; }
.hz:hover .hz-fill{ opacity:1 !important; filter:brightness(1.18); }
.hz:hover .hz-label{ opacity:1 !important; fill:#fff !important; }
@media (prefers-reduced-motion:reduce){
  .hz-fill,.hz-label,.la-glow{ animation:none !important; } .hz-fill{ opacity:.85; } .hz-label{ opacity:1; fill:rgba(255,255,255,.82); }
}
@media (max-width:600px){ .house-hero{ padding:116px 0 56px; } .hz-label{ font-size:15px; } }

/* ============================================================
   v5 — SCROLL-BUILT HOUSE -> PHOTO HERO (2.5D)
   Same SVG line geometry; scroll scrubs the draw, then the
   lines dissolve into one finished interior photo with pins.
   ============================================================ */
.house-hero.sd{ padding:0; }
.house-track{ position:relative; height:240vh; }
.house-stage{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
.house-stage > .container.house-wrap{ width:100%; }
.house-wrap{ display:grid; grid-template-columns:1.02fr 1.12fr; gap:54px; align-items:center; }
.house-hero.sd .house-copy{ text-align:left; margin:0; max-width:none; }
.house-hero.sd .house-copy .hl{ margin-bottom:18px; }
.house-hero.sd .la-acts{ justify-content:flex-start; }
.house-hero.sd .house-art{ margin-top:0; }

.house-3d{ position:relative; width:min(740px,100%); aspect-ratio:680/452; margin:0 auto;
  transform:perspective(1300px); transform-style:preserve-3d; will-change:transform; }
.house-photo{ position:absolute; inset:0; border-radius:20px; opacity:0; overflow:hidden;
  background-image:url('https://res.cloudinary.com/duwscyitr/image/upload/f_auto,q_auto/v1782582178/aaravya/hero-room.png');
  background-size:cover; background-position:center; transform:scale(1.08); transform-origin:center;
  box-shadow:0 40px 90px rgba(0,0,0,.5); will-change:opacity,transform; }
.house-photo::after{ content:""; position:absolute; inset:0; border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(20,12,6,.30)); }
.house-3d svg{ position:absolute; inset:0; width:100%; height:100%; color:var(--brass-soft); overflow:visible; z-index:2; }

.house-pins{ position:absolute; inset:0; opacity:0; pointer-events:none; z-index:3; }
.pin{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:inline-flex; align-items:center; }
.pin i{ width:15px; height:15px; border-radius:50%; background:var(--brass);
  box-shadow:0 0 0 6px rgba(201,150,75,.26),0 2px 10px rgba(0,0,0,.45); position:relative; }
.pin i::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(201,150,75,.65); animation:pinpulse 2.4s ease-out infinite; }
@keyframes pinpulse{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.8);opacity:0} }
.pin span{ position:absolute; left:24px; white-space:nowrap; background:rgba(20,12,6,.82); color:#f6ecdc;
  font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:40px; border:1px solid rgba(201,150,75,.4);
  opacity:0; transform:translateX(-6px); transition:.28s var(--ease); pointer-events:none; }
.pin:hover span{ opacity:1; transform:translateX(0); }
.pin:hover i{ background:#e0bd7c; }

/* scroll mode: JS drives stroke + fills, so disable the timed keyframes */
.house-hero.sd .la-d{ animation:none; }
.house-hero.sd .hz-fill{ animation:none; opacity:0; }
.house-hero.sd .hz-label{ animation:none; opacity:0; }

.hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); margin:0; z-index:4; color:rgba(255,255,255,.82); }
.hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.6); }
.hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }

/* fallbacks: no-JS -> show finished photo, faint lines, pins on, no pinning */
html:not(.m-js) .house-track{ height:auto; }
html:not(.m-js) .house-stage{ position:static; height:auto; padding:128px 0 80px; }
html:not(.m-js) .house-hero.sd .house-photo{ opacity:1; transform:scale(1); }
html:not(.m-js) .house-hero.sd .house-3d svg{ opacity:.16; }
html:not(.m-js) .house-hero.sd .house-pins{ opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion:reduce){
  .house-track{ height:auto; }
  .house-stage{ position:static; height:auto; padding:128px 0 80px; }
  .house-hero.sd .house-photo{ opacity:1; transform:scale(1); }
  .house-hero.sd .house-3d svg{ opacity:.16; }
  .house-hero.sd .house-pins{ opacity:1; pointer-events:auto; }
  .pin i::after{ animation:none; }
}

@media (max-width:860px){
  .house-wrap{ grid-template-columns:1fr; gap:24px; }
  .house-hero.sd .house-copy{ text-align:center; }
  .house-hero.sd .la-acts{ justify-content:center; }
  .house-3d{ order:-1; width:min(520px,100%); }
  .house-track{ height:220vh; }
}
/* phones: skip the scrub, show the finished result cleanly */
@media (max-width:600px){
  .house-track{ height:auto; }
  .house-stage{ position:static; height:auto; padding:118px 0 60px; }
  .house-hero.sd .house-photo{ opacity:1; transform:scale(1); }
  .house-hero.sd .house-3d svg{ opacity:.14; }
  .house-hero.sd .house-pins{ opacity:1; pointer-events:auto; }
  .pin span{ font-size:.72rem; }
}

/* v5 typographic polish (impeccable-typography intent) */
.house-copy h1{ text-wrap:balance; }
.house-copy .sub{ text-wrap:pretty; }
.house-hero.sd .house-copy h1{ letter-spacing:-.025em; }
@supports (font-variation-settings:normal){
  .house-copy h1, .house-copy .sub{ -webkit-font-smoothing:antialiased; }
}

/* ============================================================
   v6 — fix sticky scrub on desktop + true 3D photo-attach
   (overflow:hidden on .house-hero was disabling position:sticky)
   ============================================================ */
.house-hero.sd{ overflow:visible; }
.house-track{ height:300vh; }
.house-art{ perspective:1500px; }
.house-3d{ transform-style:preserve-3d; }
.house-3d svg{ z-index:2; }
.house-photo{ z-index:4; transform-style:preserve-3d; transform-origin:18% 50%;
  transform:rotateY(-78deg); }
.house-photo::after{ box-shadow:inset 0 0 0 2px rgba(201,150,75,.55);
  background:linear-gradient(180deg,rgba(0,0,0,0) 56%,rgba(20,12,6,.32)); }
.house-pins{ z-index:6; }
@media (max-width:860px){ .house-track{ height:270vh; } }
@media (max-width:600px){ .house-track{ height:auto; } .house-photo{ transform:none; } }

/* ============================================================
   v7 — facing-photo lines, bigger art, slower scrub
   ============================================================ */
.house-wrap{ grid-template-columns:0.9fr 1.28fr; gap:46px; }
.house-3d{ width:min(880px,100%); aspect-ratio:16/9; }
.house-track{ height:420vh; }            /* slower scrub */
@media (max-width:1100px){ .house-wrap{ grid-template-columns:0.95fr 1.2fr; } }
@media (max-width:860px){
  .house-wrap{ grid-template-columns:1fr; }
  .house-3d{ width:min(640px,100%); order:-1; }
  .house-track{ height:330vh; }
}
@media (max-width:600px){ .house-track{ height:auto; } }

/* ============================================================
   v8 — HERO: headline + 4 product image placeholders
   ============================================================ */
.hero4{ position:relative; overflow:hidden; color:#fff; padding:132px 0 88px;
  background:radial-gradient(130% 120% at 50% 0%, #46311d 0%, #2a1d12 48%, #1b120a 100%); }
.hero4-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.02fr 1.12fr; gap:56px; align-items:center; }
.hero4-copy .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:18px; }
.hero4-copy .hl::before{ content:""; width:32px; height:1px; background:var(--brass); }
.hero4-copy h1{ color:#fff; font-size:clamp(2.6rem,6vw,5rem); line-height:1.04; letter-spacing:-.025em; text-wrap:balance; }
.hero4-copy h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.hero4-copy .sub{ margin-top:22px; font-size:clamp(1.02rem,1.4vw,1.2rem); color:rgba(255,255,255,.84); max-width:50ch; line-height:1.62; text-wrap:pretty; }
.hero4 .la-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.hero4 .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.hero4 .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

.hero4-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.h4{ position:relative; display:block; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 26px 60px rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.08); }
.h4 img,.h4 .ph{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.h4 .ph{ border-radius:0; }
.h4::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(20,12,6,.55)); }
.h4-label{ position:absolute; left:15px; bottom:13px; z-index:2; color:#fff; font-weight:600; font-size:1rem; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.h4:hover img,.h4:hover .ph{ transform:scale(1.07); }
.h4:hover{ border-color:rgba(201,150,75,.5); }
/* editorial offset on the right column */
.hero4-tiles .t1, .hero4-tiles .t3{ transform:translateY(26px); }

@media (max-width:860px){
  .hero4{ padding:120px 0 64px; }
  .hero4-grid{ grid-template-columns:1fr; gap:32px; }
  .hero4 .la-acts{ justify-content:flex-start; }
  .hero4-tiles .t1, .hero4-tiles .t3{ transform:none; }
}
@media (max-width:600px){
  .hero4-tiles{ gap:12px; }
  .h4-label{ font-size:.92rem; }
}

/* ============================================================
   v9 — HERO: interactive 3D cutaway house (scroll tour)
   ============================================================ */
.house3d{ position:relative; color:#fff;
  background:radial-gradient(130% 120% at 50% 0%, #46311d 0%, #2a1d12 48%, #1b120a 100%); }
.house3d-track{ position:relative; height:560vh; }
.house3d-stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; }
.house3d-stage > .container.house3d-wrap{ width:100%; }
.house3d-wrap{ display:grid; grid-template-columns:0.92fr 1.18fr; gap:48px; align-items:center; }

.house3d-copy{ position:relative; z-index:2; }
.house3d-copy .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:16px; }
.house3d-copy .hl::before{ content:""; width:30px; height:1px; background:var(--brass); }
.house3d-copy h1{ color:#fff; font-size:clamp(2.4rem,5vw,4.4rem); line-height:1.04; letter-spacing:-.025em; }
.house3d-copy h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }

.h3-caps{ position:relative; margin-top:24px; min-height:150px; }
.h3-cap{ position:absolute; inset:0; opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none; }
.h3-cap.is-on{ opacity:1; transform:none; pointer-events:auto; }
.h3-cap .cnum{ font-family:var(--serif); font-size:.9rem; letter-spacing:.18em; color:var(--brass); }
.h3-cap h3{ color:#fff; font-size:clamp(1.4rem,2.4vw,2rem); margin:6px 0 10px; letter-spacing:-.01em; }
.h3-cap p{ color:rgba(255,255,255,.82); font-size:1.04rem; line-height:1.6; max-width:46ch; }
.h3-cap .lk{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:#fff; font-weight:600; border-bottom:2px solid var(--brass); padding-bottom:3px; }
.h3-cap .lk:hover{ gap:13px; }
.house3d .la-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
.house3d .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.house3d .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

.h3-dots{ display:flex; gap:10px; margin-top:28px; }
.h3-dots .dot{ width:9px; height:9px; border-radius:50%; padding:0; border:1px solid rgba(255,255,255,.45); background:transparent; cursor:pointer; transition:.3s; }
.h3-dots .dot.is-on{ background:var(--brass); border-color:var(--brass); transform:scale(1.25); }

.house3d-art{ position:relative; z-index:2; }
.house3d-svg{ width:100%; height:auto; max-height:78svh; display:block; overflow:visible;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.5)); }
.house3d-svg .z{ transition:opacity .45s var(--ease); }
.house3d-svg .halo{ fill:none; stroke:#f4cf86; stroke-width:5; opacity:0;
  filter:drop-shadow(0 0 10px rgba(240,200,120,.7)); transition:opacity .4s var(--ease); }

.hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); margin:0; z-index:4; color:rgba(255,255,255,.82); }
.hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.6); }
.hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }

/* fallbacks: no-JS / reduced-motion / mobile -> static, captions stacked */
html:not(.m-js) .house3d-track, .house3d.is-static .house3d-track{ height:auto; }
html:not(.m-js) .house3d-stage, .house3d.is-static .house3d-stage{ position:static; height:auto; padding:120px 0 70px; }
html:not(.m-js) .house3d .h3-caps, .house3d.is-static .h3-caps{ min-height:0; }
html:not(.m-js) .house3d .h3-cap, .house3d.is-static .h3-cap{ position:static; opacity:1; transform:none; pointer-events:auto; margin-bottom:22px; }
html:not(.m-js) .house3d .h3-dots, .house3d.is-static .h3-dots{ display:none; }
html:not(.m-js) .house3d .hero-scroll, .house3d.is-static .hero-scroll{ display:none; }

@media (prefers-reduced-motion:reduce){
  .house3d-track{ height:auto; } .house3d-stage{ position:static; height:auto; padding:120px 0 70px; }
  .house3d .h3-caps{ min-height:0; } .house3d .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:22px; }
  .house3d .h3-dots, .house3d .hero-scroll{ display:none; }
}
@media (max-width:920px){
  .house3d-wrap{ grid-template-columns:1fr; gap:26px; }
  .house3d-art{ order:-1; }
  .house3d-svg{ max-height:46svh; }
}

/* ============================================================
   v10 — HERO: full-screen cinematic focus-pull house tour
   ============================================================ */
.focus-hero{ position:relative; color:#fff; background:#1b120a; }
.fh-track{ position:relative; height:560vh; }
.fh-stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.fh-img{ position:absolute; inset:0; background-image:url('https://res.cloudinary.com/duwscyitr/image/upload/f_auto,q_auto/v1782582178/aaravya/hero-room.png'); background-size:cover; background-position:center;
  transform:scale(1.06); will-change:transform; }
.fh-blur{ filter:blur(17px) brightness(.6) saturate(1.05); opacity:0; transition:opacity .6s var(--ease);
  -webkit-mask:radial-gradient(circle at var(--fx,50%) var(--fy,50%), transparent 0 13vmax, #000 27vmax);
          mask:radial-gradient(circle at var(--fx,50%) var(--fy,50%), transparent 0 13vmax, #000 27vmax); }
.focus-hero.is-focus .fh-blur{ opacity:1; }
.fh-veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,11,5,.86) 0%, rgba(18,11,5,.55) 34%, rgba(18,11,5,.08) 62%, rgba(18,11,5,.18) 100%),
             linear-gradient(0deg, rgba(18,11,5,.6) 0%, rgba(18,11,5,0) 40%); }
.fh-tag{ position:absolute; z-index:3; left:var(--fx,50%); top:var(--fy,50%); transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:9px; opacity:0; transition:opacity .45s var(--ease), left .6s var(--ease), top .6s var(--ease); pointer-events:none; }
.focus-hero.is-focus .fh-tag{ opacity:1; }
.fh-tag i{ width:13px; height:13px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 6px rgba(201,150,75,.28); position:relative; }
.fh-tag i::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(201,150,75,.7); animation:pinpulse 2.2s ease-out infinite; }
.fh-tag b{ font-size:.74rem; font-weight:600; letter-spacing:.04em; background:rgba(18,11,5,.7); padding:5px 11px; border-radius:30px; border:1px solid rgba(201,150,75,.4); white-space:nowrap; }

.fh-ui{ position:relative; z-index:4; height:100%; display:flex; align-items:flex-end; padding-bottom:84px; }
.fh-copy{ max-width:560px; }
.fh-copy .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:14px; }
.fh-copy .hl::before{ content:""; width:30px; height:1px; background:var(--brass); }
.fh-copy h1{ color:#fff; font-size:clamp(2.3rem,4.6vw,4.2rem); line-height:1.04; letter-spacing:-.025em; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.fh-copy h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.fh-copy .h3-caps{ min-height:140px; }
.focus-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.focus-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }

.hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); margin:0; z-index:5; color:rgba(255,255,255,.85); }
.hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.6); } .hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }

/* fallbacks: no-JS / reduced-motion / mobile -> sharp image, captions stacked */
html:not(.m-js) .fh-track, .focus-hero.is-static .fh-track{ height:auto; }
html:not(.m-js) .fh-stage, .focus-hero.is-static .fh-stage{ position:static; height:auto; min-height:88svh; }
html:not(.m-js) .focus-hero .h3-caps, .focus-hero.is-static .h3-caps{ min-height:0; }
html:not(.m-js) .focus-hero .h3-cap, .focus-hero.is-static .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:20px; }
html:not(.m-js) .focus-hero .h3-dots, .focus-hero.is-static .h3-dots,
html:not(.m-js) .focus-hero .hero-scroll, .focus-hero.is-static .hero-scroll{ display:none; }

@media (prefers-reduced-motion:reduce){
  .fh-track{ height:auto; } .fh-stage{ position:static; height:auto; min-height:88svh; }
  .fh-blur{ display:none; } .focus-hero .h3-caps{ min-height:0; }
  .focus-hero .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:20px; }
  .focus-hero .h3-dots, .focus-hero .hero-scroll{ display:none; }
}
@media (max-width:760px){
  .fh-track{ height:auto; } .fh-stage{ position:static; height:auto; min-height:auto; padding:118px 0 56px; }
  .fh-img{ display:none; } .fh-veil{ display:none; }
  .focus-hero{ background:radial-gradient(130% 120% at 50% 0%, #46311d, #1b120a); }
  .fh-ui{ position:static; padding:0; } .focus-hero .h3-caps{ min-height:0; }
  .focus-hero .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:18px; }
  .focus-hero .h3-dots, .focus-hero .hero-scroll, .fh-tag{ display:none; }
}

/* ============================================================
   v11 — HERO: scroll-scrubbed cinematic fly-through video
   ============================================================ */
.vid-hero{ position:relative; color:#fff; background:#1b120a; }
.vh-track{ position:relative; height:600vh; }
.vh-stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.vh-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#1b120a; }
.vh-veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,11,5,.84) 0%, rgba(18,11,5,.5) 34%, rgba(18,11,5,.06) 62%, rgba(18,11,5,.16) 100%),
             linear-gradient(0deg, rgba(18,11,5,.6) 0%, rgba(18,11,5,0) 42%); }
.vh-ui{ position:relative; z-index:3; height:100%; display:flex; align-items:flex-end; padding-bottom:84px; }
.vh-copy{ max-width:560px; }
.vh-copy .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:14px; }
.vh-copy .hl::before{ content:""; width:30px; height:1px; background:var(--brass); }
.vh-copy h1{ color:#fff; font-size:clamp(2.3rem,4.6vw,4.2rem); line-height:1.04; letter-spacing:-.025em; text-shadow:0 4px 30px rgba(0,0,0,.55); }
.vh-copy h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.vh-copy .h3-caps{ min-height:140px; }
.vid-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.vid-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }

.vid-hero .hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); margin:0; z-index:4; color:rgba(255,255,255,.85); }
.vid-hero .hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.6); } .vid-hero .hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }

/* fallbacks: no-JS / reduced-motion / mobile -> poster frame, captions stacked */
html:not(.m-js) .vh-track, .vid-hero.is-static .vh-track{ height:auto; }
html:not(.m-js) .vh-stage, .vid-hero.is-static .vh-stage{ position:static; height:auto; min-height:88svh; }
html:not(.m-js) .vid-hero .h3-caps, .vid-hero.is-static .h3-caps{ min-height:0; }
html:not(.m-js) .vid-hero .h3-cap, .vid-hero.is-static .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:20px; }
html:not(.m-js) .vid-hero .h3-dots, .vid-hero.is-static .h3-dots,
html:not(.m-js) .vid-hero .hero-scroll, .vid-hero.is-static .hero-scroll{ display:none; }

@media (prefers-reduced-motion:reduce){
  .vh-track{ height:auto; } .vh-stage{ position:static; height:auto; min-height:88svh; }
  .vid-hero .h3-caps{ min-height:0; } .vid-hero .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:20px; }
  .vid-hero .h3-dots, .vid-hero .hero-scroll{ display:none; }
}
@media (max-width:760px){
  .vh-track{ height:auto; } .vh-stage{ position:static; height:auto; min-height:auto; padding-bottom:0; }
  .vh-video{ position:relative; height:54svh; }
  .vh-veil{ background:linear-gradient(0deg, rgba(18,11,5,.96) 0%, rgba(18,11,5,0) 46%); }
  .vh-ui{ position:static; padding:24px 0 56px; align-items:stretch; }
  .vid-hero .h3-caps{ min-height:0; } .vid-hero .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:18px; }
  .vid-hero .h3-dots, .vid-hero .hero-scroll{ display:none; }
}

/* ============================================================
   v12 — HERO: real-time WebGL 3D house (scroll tour)
   ============================================================ */
.scene3d{ position:relative; color:#fff; background:#140d06; }
.sc-track{ position:relative; height:600vh; }
.sc-stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.sc-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; }
.sc-canvas:active{ cursor:grabbing; }
.sc-veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(15,9,4,.8) 0%, rgba(15,9,4,.4) 36%, rgba(15,9,4,0) 64%),
             linear-gradient(0deg, rgba(15,9,4,.55) 0%, rgba(15,9,4,0) 42%); }
.sc-ui{ position:relative; z-index:3; height:100%; display:flex; align-items:flex-end; padding-bottom:84px; pointer-events:none; }
.sc-ui .vh-copy{ pointer-events:auto; }
.scene3d .hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); margin:0; z-index:4; color:rgba(255,255,255,.85); }
.scene3d .hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.6); } .scene3d .hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }

/* fallbacks: no-WebGL / no-JS / reduced-motion / mobile -> poster + stacked captions */
html:not(.m-js) .sc-track, .scene3d.is-static .sc-track{ height:auto; }
html:not(.m-js) .sc-stage, .scene3d.is-static .sc-stage{ position:static; height:auto; min-height:88svh;
  background:linear-gradient(180deg,rgba(15,9,4,.2),rgba(15,9,4,.6)), url('https://res.cloudinary.com/duwscyitr/image/upload/f_auto,q_auto/v1782582178/aaravya/hero-room.png') center/cover; }
.scene3d.is-static .sc-canvas, html:not(.m-js) .scene3d .sc-canvas{ display:none; }
html:not(.m-js) .scene3d .h3-caps, .scene3d.is-static .h3-caps{ min-height:0; }
html:not(.m-js) .scene3d .h3-cap, .scene3d.is-static .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:20px; }
html:not(.m-js) .scene3d .h3-dots, .scene3d.is-static .h3-dots,
html:not(.m-js) .scene3d .hero-scroll, .scene3d.is-static .hero-scroll{ display:none; }

@media (prefers-reduced-motion:reduce){
  .sc-track{ height:auto; } .sc-stage{ position:static; height:auto; min-height:88svh; background:linear-gradient(180deg,rgba(15,9,4,.2),rgba(15,9,4,.6)), url('https://res.cloudinary.com/duwscyitr/image/upload/f_auto,q_auto/v1782582178/aaravya/hero-room.png') center/cover; }
  .sc-canvas{ display:none; } .scene3d .h3-caps{ min-height:0; }
  .scene3d .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:20px; }
  .scene3d .h3-dots, .scene3d .hero-scroll{ display:none; }
}
@media (max-width:760px){
  .sc-track{ height:auto; } .sc-stage{ position:static; height:auto; min-height:auto; padding:118px 0 56px;
    background:linear-gradient(180deg,rgba(15,9,4,.25),rgba(15,9,4,.7)), url('https://res.cloudinary.com/duwscyitr/image/upload/f_auto,q_auto/v1782582178/aaravya/hero-room.png') center/cover; }
  .sc-canvas{ display:none; } .sc-veil{ display:none; }
  .sc-ui{ position:static; padding:0; } .scene3d .h3-caps{ min-height:0; }
  .scene3d .h3-cap{ position:static; opacity:1; transform:none; margin-bottom:18px; }
  .scene3d .h3-dots, .scene3d .hero-scroll{ display:none; }
}

/* ============================================================
   v13 — HERO: cinematic full-bleed photography + mobile pass
   ============================================================ */
.cine-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden;
  color:#fff; background:#160f08; }
.cine-bg{ position:absolute; inset:0; z-index:0; }
.cine-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:cineZoom 18s ease-in-out infinite alternate; }
@keyframes cineZoom{ to{ transform:scale(1.14); } }
@media (prefers-reduced-motion:reduce){ .cine-bg img{ animation:none; transform:scale(1.04); } }
.cine-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,9,4,.6) 0%, rgba(15,9,4,.18) 30%, rgba(15,9,4,.55) 72%, rgba(15,9,4,.92) 100%),
             linear-gradient(90deg, rgba(15,9,4,.72) 0%, rgba(15,9,4,.2) 48%, rgba(15,9,4,0) 80%); }
.cine-inner{ position:relative; z-index:2; padding:150px 0 64px; max-width:760px; }
.cine-inner .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:18px; }
.cine-inner .hl::before{ content:""; width:32px; height:1px; background:var(--brass); }
.cine-inner h1{ color:#fff; font-size:clamp(2.5rem,5.4vw,4.8rem); line-height:1.03; letter-spacing:-.025em; text-shadow:0 6px 40px rgba(0,0,0,.5); text-wrap:balance; }
.cine-inner h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.cine-inner .sub{ margin-top:22px; font-size:clamp(1.04rem,1.5vw,1.24rem); color:rgba(255,255,255,.86); max-width:54ch; line-height:1.62; text-wrap:pretty; }
.cine-inner .la-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.cine-hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.cine-hero .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }

.cine-strip{ display:flex; gap:14px; margin-top:40px; }
.cstrip{ position:relative; flex:1; border-radius:14px; overflow:hidden; aspect-ratio:11/8; min-width:0;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 40px rgba(0,0,0,.4); }
.cstrip img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.cstrip::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,9,4,.78), rgba(15,9,4,0) 60%); }
.cstrip span{ position:absolute; left:12px; bottom:10px; z-index:2; color:#fff; font-weight:600; font-size:.86rem; letter-spacing:.01em; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.cstrip:hover img{ transform:scale(1.08); }
.cstrip:hover{ border-color:rgba(201,150,75,.6); }
.cine-hero .hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); margin:0; z-index:3; color:rgba(255,255,255,.82); }
.cine-hero .hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.55); } .cine-hero .hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }

@media (max-width:760px){
  .cine-hero{ min-height:88svh; }
  .cine-inner{ padding:120px 0 44px; }
  .cine-inner .sub{ font-size:1rem; }
  .cine-strip{ gap:10px; margin-top:28px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; }
  .cine-strip::-webkit-scrollbar{ display:none; }
  .cstrip{ flex:0 0 44%; aspect-ratio:5/4; }
  .cine-hero .hero-scroll{ display:none; }
}

/* ---------- GLOBAL MOBILE PASS ---------- */
@media (max-width:760px){
  .ethos{ padding:64px 0 48px; }
  .frow{ grid-template-columns:1fr; gap:18px; padding:30px 0; }
  .frow.rev .frow-media{ order:0; }
  .frow-media{ aspect-ratio:16/10; }
  .frow-body p{ max-width:none; }
  .process2{ padding:64px 0; }
  .ptl{ gap:8px; }
  .section{ padding:54px 0; }
  .cta-band{ padding:60px 0 !important; }
  .statline, .stat-row{ flex-wrap:wrap; }
  h2{ overflow-wrap:break-word; }
  .container{ padding-left:20px; padding-right:20px; }
}
@media (max-width:420px){
  .cstrip{ flex:0 0 60%; }
  .cine-inner h1{ font-size:2.15rem; }
}

/* ============================================================
   v14 — HERO: kinetic product wall (moving columns + bold type)
   ============================================================ */
.kwall{ position:relative; min-height:100svh; overflow:hidden; background:#0f0a05; color:#fff; display:flex; align-items:center; }
.kw-cols{ position:absolute; top:-8%; left:-2%; right:-2%; bottom:-8%; z-index:0; display:flex; gap:16px; }
.kw-col{ flex:1; overflow:hidden; }
.kw-track{ display:flex; flex-direction:column; gap:16px; animation:kwUp 42s linear infinite; will-change:transform; }
.kw-col:nth-child(2) .kw-track{ animation:kwDown 52s linear infinite; }
.kw-col:nth-child(3) .kw-track{ animation-duration:46s; }
.kw-track img{ width:100%; aspect-ratio:5/6; object-fit:cover; border-radius:14px; display:block; box-shadow:0 18px 40px rgba(0,0,0,.4); }
@keyframes kwUp{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes kwDown{ from{transform:translateY(-50%)} to{transform:translateY(0)} }
.kwall::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,8,4,.9) 0%, rgba(12,8,4,0) 16%, rgba(12,8,4,0) 84%, rgba(12,8,4,.95) 100%); }
.kw-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,8,4,.97) 0%, rgba(12,8,4,.85) 34%, rgba(12,8,4,.5) 66%, rgba(12,8,4,.74) 100%); }
.kwall .kw-copy{ position:relative; z-index:2; max-width:660px; padding-top:96px; padding-bottom:84px; }
.kwall .hl{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:18px; }
.kwall .hl::before{ content:""; width:32px; height:1px; background:var(--brass); }
.kwall h1{ color:#fff; font-size:clamp(2.6rem,5.6vw,5rem); line-height:1.02; letter-spacing:-.025em; text-shadow:0 6px 40px rgba(0,0,0,.6); }
.kwall h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.kwall .sub{ margin-top:22px; font-size:clamp(1.04rem,1.5vw,1.22rem); color:rgba(255,255,255,.86); max-width:52ch; line-height:1.62; }
.kwall .la-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.kwall .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.kwall .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }
.kwall .hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); margin:0; z-index:3; color:rgba(255,255,255,.85); }
.kwall .hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.55); } .kwall .hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }

@media (prefers-reduced-motion:reduce){ .kw-track{ animation:none !important; } }

@media (max-width:1000px){ .kw-col:nth-child(3){ display:none; } }
@media (max-width:760px){
  .kwall{ min-height:92svh; }
  .kw-cols{ gap:10px; }
  .kw-veil{ background:linear-gradient(180deg, rgba(12,8,4,.6) 0%, rgba(12,8,4,.92) 46%, rgba(12,8,4,.97) 100%); }
  .kwall .kw-copy{ padding-top:120px; padding-bottom:56px; }
  .kwall .sub{ font-size:1rem; }
  .kwall .hero-scroll{ display:none; }
}

/* ============================================================
   v15 — EXECUTION POLISH (premium type, refined dark hero)
   Grounded in One Page Love "Luxury" gallery (Landmark, OODOS,
   Swiss Diamond): distinctive display serif + slow refined motion.
   ============================================================ */
:root{ --serif:'Playfair Display', Georgia, 'Times New Roman', serif; --sans:'Inter', system-ui, -apple-system, sans-serif; }
body{ font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,.ethos h2,.kwall h1,.frow-body h3,.head h2{ font-family:var(--serif); font-optical-sizing:auto; }
h1,h2{ letter-spacing:-.02em; }

/* refined kinetic wall — dim the imagery so the type leads (luxury) */
.kw-track img{ filter:brightness(.58) saturate(1.04) contrast(1.02); }
.kw-track{ animation-duration:64s; } .kw-col:nth-child(2) .kw-track{ animation-duration:78s; } .kw-col:nth-child(3) .kw-track{ animation-duration:70s; }
.kw-veil{ background:linear-gradient(90deg, rgba(10,7,3,.97) 0%, rgba(10,7,3,.88) 38%, rgba(10,7,3,.66) 70%, rgba(10,7,3,.82) 100%); }
.kwall{ background:#0b0703; }
.kwall .kw-copy{ max-width:720px; }
.kwall .hl{ font-family:var(--sans); font-size:.7rem; letter-spacing:.34em; color:var(--brass); margin-bottom:22px; }
.kwall h1{ font-weight:500; font-size:clamp(2.9rem,7vw,6.2rem); line-height:.98; letter-spacing:-.03em; }
.kwall h1 .rot{ font-weight:500; font-style:italic; }
.kwall .sub{ font-family:var(--sans); margin-top:26px; font-size:clamp(1.04rem,1.4vw,1.2rem); color:rgba(255,255,255,.78); max-width:50ch; line-height:1.7; }
.kwall .la-acts{ margin-top:36px; gap:16px; }

/* refine buttons to a quieter, premium feel */
.btn{ letter-spacing:.01em; }
.kwall .btn-primary{ background:var(--brass); color:#1a1108; box-shadow:0 14px 36px rgba(192,149,79,.34); }
.kwall .btn-primary:hover{ background:#d2ab66; transform:translateY(-1px); }

/* section headings a touch more editorial */
.ethos h2{ font-weight:500; letter-spacing:-.015em; }
.frow-body h3{ font-weight:500; }
.head h2, .process2 h2, .exportL h2{ font-weight:500; letter-spacing:-.015em; }

/* ============================================================
   v16 — HERO: cinematic (image/video) + kinetic Playfair
   ============================================================ */
.cine2{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; background:#0b0703; }
.cine2-media{ position:absolute; inset:0; z-index:0; }
.cine2-vid{ display:none; width:100%; height:100%; object-fit:cover; }
.cine2.has-video .cine2-vid{ display:block; } .cine2.has-video .cine2-img{ display:none; }
.cine2-img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation:cineZoom 22s ease-in-out infinite alternate; }
@keyframes cineZoom{ to{ transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce){ .cine2-img{ animation:none; transform:scale(1.04); } }
.cine2-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,7,3,.5) 0%, rgba(11,7,3,.08) 24%, rgba(11,7,3,.4) 60%, rgba(11,7,3,.93) 100%),
             linear-gradient(90deg, rgba(11,7,3,.74) 0%, rgba(11,7,3,.2) 50%, rgba(11,7,3,0) 82%); }
.cine2-grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cine2-inner{ position:relative; z-index:2; padding:150px 0 88px; max-width:760px; }
.cine2-inner .hl{ display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:20px; }
.cine2-inner .hl::before{ content:""; width:34px; height:1px; background:var(--brass); }
.cine2-inner h1{ font-family:var(--serif); color:#fff; font-weight:600; font-size:clamp(2.7rem,6vw,5.4rem); line-height:1.02; letter-spacing:-.02em; text-shadow:0 6px 44px rgba(0,0,0,.55); }
.cine2-inner h1 .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.cine2-inner .sub{ font-family:var(--sans); margin-top:24px; font-size:clamp(1.05rem,1.4vw,1.22rem); color:rgba(255,255,255,.85); max-width:52ch; line-height:1.66; }
.cine2-inner .la-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.cine2 .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.cine2 .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }
.cine2 .btn-primary{ background:var(--brass); color:#1a1108; box-shadow:0 16px 40px rgba(192,149,79,.34); }
.cine2 .hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); margin:0; z-index:3; color:rgba(255,255,255,.85); }
.cine2 .hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.55);} .cine2 .hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }
@media (max-width:760px){
  .cine2{ min-height:92svh; }
  .cine2-inner{ padding:120px 0 60px; }
  .cine2-veil{ background:linear-gradient(180deg, rgba(11,7,3,.45), rgba(11,7,3,.2) 40%, rgba(11,7,3,.95) 100%); }
  .cine2 .hero-scroll{ display:none; }
}

/* v16b — video only on capable desktop; still image on phone / reduced-motion */
@media (max-width:760px){ .cine2.has-video .cine2-vid{ display:none; } .cine2.has-video .cine2-img{ display:block; } }
@media (prefers-reduced-motion:reduce){ .cine2.has-video .cine2-vid{ display:none; } .cine2.has-video .cine2-img{ display:block; } }

/* ============================================================
   v17 — ampersand glyph swap + BOLD type-masked video hero
   ============================================================ */
/* Refined ampersand (EB Garamond italic) everywhere via subset font */
body{ font-family:'EB Garamond','Inter',system-ui,-apple-system,sans-serif; }
h1,h2,h3,h4,.ethos h2,.frow-body h3,.head h2,.cine2-inner h1{ font-family:'EB Garamond','Playfair Display',Georgia,serif; }

.mh{ position:relative; min-height:100svh; overflow:hidden; background:#0b0703; color:#fff; }
.mh-media{ position:absolute; inset:0; z-index:0; }
.mh-vid,.mh-img{ width:100%; height:100%; object-fit:cover; }
.mh-vid{ display:none; } .mh.has-video .mh-vid{ display:block; } .mh.has-video .mh-img{ display:none; }
.mh-knock{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; }
.mh-ui{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:118px 24px 108px; pointer-events:none; }
.mh-ui .hl{ display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--brass-soft); }
.mh-ui .hl::before,.mh-ui .hl::after{ content:""; width:30px; height:1px; background:var(--brass); }
.mh-bottom{ max-width:620px; pointer-events:auto; }
.mh-bottom .sub{ font-family:var(--sans); font-size:clamp(1rem,1.3vw,1.16rem); color:rgba(255,255,255,.82); line-height:1.6; }
.mh-bottom .la-acts{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.mh .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.mh .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }
.mh .btn-primary{ background:var(--brass); color:#1a1108; box-shadow:0 16px 40px rgba(192,149,79,.34); }
.mh-marquee{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; white-space:nowrap; overflow:hidden; padding:12px 0; border-top:1px solid rgba(255,255,255,.1); background:rgba(11,7,3,.4); pointer-events:none; }
.mh-marquee span{ flex:0 0 auto; font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft); animation:mhmq 45s linear infinite; }
@keyframes mhmq{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .mh-marquee span{ animation:none; } .mh.has-video .mh-vid{ display:none; } .mh.has-video .mh-img{ display:block; } }
@media (max-width:760px){
  .mh{ min-height:90svh; }
  .mh.has-video .mh-vid{ display:none; } .mh.has-video .mh-img{ display:block; }
  .mh-ui{ padding:100px 20px 94px; }
  .mh-bottom .sub{ font-size:.95rem; }
}

/* ============================================================
   v18 — KINETIC EDITORIAL HERO (warm, no black) — Global-Leathers ideology
   ============================================================ */
.kin{ position:relative; overflow:hidden; color:var(--ink); background:linear-gradient(180deg,#FAF6EF 0%, #F3E9D9 100%); }
.kin-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:center; min-height:100svh; padding:150px 0 96px; }
.kin-eye{ display:inline-block; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); margin-bottom:22px; }
.kin-h{ font-family:var(--serif); font-weight:600; color:var(--walnut); font-size:clamp(3.2rem,8.5vw,7rem); line-height:.94; letter-spacing:-.025em; margin:0; }
.kin-h .ln{ display:block; overflow:hidden; padding-bottom:.05em; }
.kin-h .w{ display:inline-block; }
.kin-h .gold{ font-style:italic; color:var(--brass); }
html.m-js .kin-h .w{ opacity:0; transform:translateY(46px); }
html:not(.m-js) .kin-h .w{ opacity:1; transform:none; }
.kin-sub{ margin-top:26px; color:var(--muted); font-size:clamp(1.05rem,1.3vw,1.2rem); max-width:46ch; line-height:1.65; }
.kin-acts{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.kin .btn-ghost{ color:var(--walnut); border-color:rgba(76,51,31,.35); }
.kin .btn-ghost:hover{ border-color:var(--walnut); background:rgba(76,51,31,.06); color:var(--walnut); }
.kin-media{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 50px 90px rgba(76,51,31,.22); }
.kin-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.kin-media:hover img{ transform:scale(1.05); }
.kin-tag{ position:absolute; left:16px; bottom:14px; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(33,23,16,.55); padding:7px 12px; border-radius:30px; }
.kin-marquee{ position:relative; display:flex; white-space:nowrap; overflow:hidden; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.4); }
.kin-marquee span{ flex:0 0 auto; font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--walnut); opacity:.66; animation:kinmq 50s linear infinite; }
@keyframes kinmq{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .kin-marquee span{ animation:none; } html.m-js .kin-h .w{ opacity:1; transform:none; } }
@media (max-width:880px){
  .kin-grid{ grid-template-columns:1fr; gap:28px; min-height:auto; padding:128px 0 36px; }
  .kin-media{ order:-1; aspect-ratio:16/11; }
  .kin-h{ font-size:clamp(2.8rem,15vw,5rem); }
}

/* ============================================================
   v19 — FLOATING SHOWROOM hero (rotating headline, warm, connected)
   ============================================================ */
.kin-h{ font-size:clamp(2.5rem,5.2vw,4.7rem); line-height:1.05; }
.kin-h .rot{ font-style:italic; color:var(--brass); display:inline-block; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.kin-float{ position:relative; width:100%; max-width:560px; aspect-ratio:1/1; margin:0 auto; will-change:transform; transition:transform .25s ease-out; }
.fcard{ position:absolute; border-radius:16px; overflow:hidden; border:5px solid #fff; box-shadow:0 30px 64px rgba(76,51,31,.24); display:block; }
.fcard img{ width:100%; height:100%; object-fit:cover; display:block; }
.fcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,12,6,.5), transparent 55%); }
.fcard span{ position:absolute; left:13px; bottom:11px; z-index:2; color:#fff; font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.04em; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.fcard:hover{ box-shadow:0 42px 84px rgba(76,51,31,.34); }
.fc1{ width:56%; aspect-ratio:3/4; left:4%; top:9%; rotate:-4deg; z-index:2; animation:ff1 7s ease-in-out infinite; }
.fc2{ width:46%; aspect-ratio:4/3; right:0; top:0; rotate:4deg; z-index:3; animation:ff2 8.4s ease-in-out infinite; }
.fc3{ width:50%; aspect-ratio:4/3; right:3%; bottom:2%; rotate:-2deg; z-index:1; animation:ff3 9.2s ease-in-out infinite; }
@keyframes ff1{ 50%{ translate:0 -16px; } }
@keyframes ff2{ 50%{ translate:0 13px; } }
@keyframes ff3{ 50%{ translate:0 -12px; } }
@media (prefers-reduced-motion:reduce){ .fcard{ animation:none !important; } .kin-float{ transition:none; } }
@media (max-width:880px){
  .kin-float{ order:-1; max-width:440px; aspect-ratio:5/4; margin:0 auto 6px; }
  .kin-h{ font-size:clamp(2.3rem,9vw,3.4rem); }
}

/* ============================================================
   v20 — HERO media: sunlit walkthrough video panel (warm, gold-framed)
   ============================================================ */
.kin-vidwrap{ position:relative; width:100%; max-width:600px; aspect-ratio:16/11; margin:0 auto; border-radius:20px; overflow:hidden;
  box-shadow:0 50px 92px rgba(76,51,31,.24); border:6px solid #fff; }
.kin-vidwrap::after{ content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; box-shadow:inset 0 0 0 1.5px rgba(192,149,79,.55); }
.kin-vid, .kin-vidimg{ width:100%; height:100%; object-fit:cover; display:block; }
.kin-vid{ display:none; } .kin-vidwrap.has-video .kin-vid{ display:block; } .kin-vidwrap.has-video .kin-vidimg{ display:none; }
.kin-tag{ position:absolute; left:14px; bottom:13px; z-index:2; color:#fff; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:rgba(33,23,16,.5); padding:7px 13px; border-radius:30px; }
@media (prefers-reduced-motion:reduce){ .kin-vidwrap.has-video .kin-vid{ display:none; } .kin-vidwrap.has-video .kin-vidimg{ display:block; } }
@media (max-width:880px){
  .kin-vidwrap{ order:-1; max-width:520px; aspect-ratio:16/10; margin:0 auto 6px; }
  .kin-vidwrap.has-video .kin-vid{ display:none; } .kin-vidwrap.has-video .kin-vidimg{ display:block; }
}

/* ============================================================
   v21 — CONNECTED LAYER: marquee divider + draggable collections
   ============================================================ */
.mqdiv{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#f1e7d5; padding:14px 0; }
.mqtrack{ display:flex; white-space:nowrap; }
.mqtrack span{ flex:0 0 auto; font-family:var(--sans); font-size:.8rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--walnut); opacity:.6; animation:mqdrift 55s linear infinite; }
@keyframes mqdrift{ to{ transform:translateX(-100%); } }

.collections{ background:#faf6ef; }
.collections .head{ margin-bottom:22px; }
.drag-rail{ display:flex; gap:18px; overflow-x:auto; padding:6px 6vw 26px; scroll-snap-type:x proximity; cursor:grab; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.drag-rail::-webkit-scrollbar{ display:none; }
.drag-rail.dragging{ cursor:grabbing; }
.dcard{ flex:0 0 300px; scroll-snap-align:start; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 26px 56px rgba(76,51,31,.18); border:1px solid rgba(192,149,79,.18); }
.dcard img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); pointer-events:none; }
.dcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,12,6,.58), transparent 56%); }
.dcard span{ position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; font-family:var(--serif); font-size:1.05rem; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.dcard:hover img{ transform:scale(1.06); }
.dcard:hover{ border-color:rgba(192,149,79,.55); }
@media (prefers-reduced-motion:reduce){ .mqtrack span{ animation:none; } }
@media (max-width:600px){ .dcard{ flex-basis:240px; } .drag-rail{ padding:6px 20px 22px; } }

/* connective hover polish (consistent across cards/links) */
.scard{ transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.scard:hover{ transform:translateY(-6px); }

/* ============================================================
   v22 — HERO: full-screen full-bleed walkthrough video (warm, no split)
   ============================================================ */
.herofull{ position:relative; height:100svh; min-height:600px; overflow:hidden; color:#fff; background:#1a1108; display:flex; align-items:flex-end; }
.hf-media{ position:absolute; inset:0; z-index:0; }
.hf-vid,.hf-img{ width:100%; height:100%; object-fit:cover; display:block; }
.hf-vid{ display:none; } .herofull.has-video .hf-vid{ display:block; } .herofull.has-video .hf-img{ display:none; }
.hf-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,17,8,.5) 0%, rgba(26,17,8,.05) 28%, rgba(26,17,8,.32) 60%, rgba(26,17,8,.88) 100%),
             linear-gradient(90deg, rgba(26,17,8,.62) 0%, rgba(26,17,8,.12) 55%, rgba(26,17,8,0) 85%); }
.hf-inner{ position:relative; z-index:2; padding-bottom:120px; padding-top:120px; max-width:840px; }
.hf-inner .hl{ display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:18px; }
.hf-inner .hl::before{ content:""; width:32px; height:1px; background:var(--brass); }
.hf-h{ font-family:var(--serif); color:#fff; font-weight:600; font-size:clamp(2.6rem,6vw,5.4rem); line-height:1.02; letter-spacing:-.02em; text-shadow:0 6px 44px rgba(0,0,0,.5); margin:0; }
.hf-h .rot{ font-style:italic; background:linear-gradient(100deg,#e9c98e,#fff5e3,#c0954f,#f3deb4); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shine 6s linear infinite; }
.hf-sub{ font-family:var(--sans); margin-top:22px; font-size:clamp(1.04rem,1.4vw,1.2rem); color:rgba(255,255,255,.88); max-width:54ch; line-height:1.62; }
.hf-acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.herofull .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.herofull .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }
.herofull .hero-scroll.hs-fixed{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); margin:0; z-index:3; color:rgba(255,255,255,.85); }
.herofull .hero-scroll.hs-fixed .hsc{ border-color:rgba(255,255,255,.55); } .herofull .hero-scroll.hs-fixed .hsc::after{ border-color:#fff; }
@media (prefers-reduced-motion:reduce){ .herofull.has-video .hf-vid{ display:none; } .herofull.has-video .hf-img{ display:block; } }
@media (max-width:760px){
  .herofull{ height:90svh; } .hf-inner{ padding-bottom:90px; }
  .herofull.has-video .hf-vid{ display:none; } .herofull.has-video .hf-img{ display:block; }
  .herofull .hero-scroll{ display:none; }
}

/* ---- Product showcase: clickable photo + arrow that points toward the image ---- */
a.frow-media{ display:block; text-decoration:none; cursor:pointer; }
.frow-body .lk{ text-decoration:none; }
.frow-body .lk::before,
.frow-body .lk::after{ display:inline-block; transition:transform .32s var(--ease); }
/* rows with the image on the RIGHT (rev): arrow after the text, pointing right */
.frow.rev .frow-body .lk::after{ content:"\2192"; }
.frow.rev .frow-body .lk:hover::after{ transform:translateX(6px); }
/* rows with the image on the LEFT (default): arrow before the text, pointing left */
.frow:not(.rev) .frow-body .lk::before{ content:"\2190"; }
.frow:not(.rev) .frow-body .lk:hover::before{ transform:translateX(-6px); }

/* Keep the four product links' hover animation identical: only the arrow slides
   (equal distance + timing toward each image); no gap-shift asymmetry. */
.frow-body .lk:hover{ gap:9px; }