:root{
    --bg:#faf6ee;
    --bg-soft:#f2ebdb;
    --card:#ffffff;
    --ink:#241c13;
    --ink-dim:#665b48;
    --muted:#8c7f68;
    --gold:#e8a33d;
    --gold-deep:#c97f1f;
    --teal:#1c7a6e;
    --teal-deep:#125c53;
    --terracotta:#e0653a;
    --violet:#6a5bd1;
    --line: rgba(36,28,19,0.10);
    --line-strong: rgba(36,28,19,0.18);
    --shadow: 0 24px 50px -24px rgba(36,28,19,0.28);
    --shadow-sm: 0 10px 24px -14px rgba(36,28,19,0.22);
    --serif: 'Fraunces', 'Hind Siliguri', serif;
    --sans: 'Hind Siliguri', 'Fraunces', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.6;
    overflow-x:hidden;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 44px;}
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold-deep);
    display:flex; align-items:center; gap:10px;
    font-weight:600;
  }
  .eyebrow::before{content:''; width:22px; height:2px; background:var(--terracotta); border-radius:2px;}

  h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-0.01em; color:var(--ink);}

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(250,246,238,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1180px; margin:0 auto; padding:18px 44px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{
    display:flex; align-items:center; gap:11px;
  }
  .logo .mark-wrap{
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(135deg, var(--gold), var(--terracotta));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px -6px rgba(224,101,58,.55);
  }
  .logo .mark{width:21px; height:21px;}
  .logo .logo-txt{line-height:1.05;}
  .logo .lt-main{
    display:block; font-family:var(--serif); font-weight:700;
    font-size:23px; letter-spacing:.005em;
  }
  .logo .lt-a{
    font-style:italic;
    background:linear-gradient(115deg, var(--gold-deep) 0%, var(--terracotta) 55%, #b8431f 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
  .logo .lt-b{
    color:var(--teal-deep); font-weight:600; font-style:italic;
  }
  .logo small{
    display:block; font-family:var(--mono); font-size:9px; letter-spacing:0.2em;
    font-weight:700; margin-top:3px; text-align:center;
    background:linear-gradient(90deg, var(--gold-deep), var(--terracotta) 45%, var(--teal-deep));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
  nav.links{display:flex; gap:34px; font-size:14.5px; color:var(--ink-dim); font-weight:500;}
  nav.links a{position:relative; padding:4px 0; transition:color .25s ease;}
  nav.links a:hover{color:var(--terracotta);}
  nav.links a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--gold), var(--terracotta)); transition:width .25s ease;
  }
  nav.links a:hover::after{width:100%;}
  .btn{
    font-family:var(--sans); font-weight:700; font-size:14px;
    padding:12px 22px; border-radius:10px; border:1px solid transparent;
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .btn-primary{background:linear-gradient(135deg, var(--gold), var(--terracotta)); color:#2a1608; box-shadow:var(--shadow-sm);}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(224,101,58,0.45);}
  .btn-ghost{border-color:var(--line-strong); color:var(--ink); background:var(--card);}
  .btn-ghost:hover{border-color:var(--teal); color:var(--teal-deep); transform:translateY(-2px); box-shadow:var(--shadow-sm);}
  .btn-wood{
    background:linear-gradient(135deg, var(--gold), var(--terracotta));
    color:#2a1608; border-color:transparent; box-shadow:var(--shadow-sm);
    border-radius:5px; font-weight:700; letter-spacing:0.01em;
  }
  .btn-wood:hover{transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(224,101,58,0.5);}
  .btn-sm{padding:9px 16px; font-size:12.5px; border-radius:8px;}
  .btn-wood.btn-sm{border-radius:5px;}

  /* ---------- HERO ---------- */
  .hero-outer{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--bg);
  }
  .hero{
    position:relative;
    padding-top:30px; padding-bottom:25px;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:35px; align-items:center;
  }
  .blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35; z-index:0;}
  .blob-1{width:480px; height:480px; background:var(--gold); top:-200px; right:2%;}
  .blob-2{width:520px; height:340px; background:var(--teal); bottom:-160px; left:-4%; opacity:0.2;}
  .blob-3{width:320px; height:320px; background:var(--violet); top:36%; right:26%; opacity:0.13;}

  .hero-copy, .hero-visual{position:relative; z-index:1;}
  .hero-copy h1{
    font-size:clamp(38px, 5vw, 60px);
    line-height:1.08; margin:20px 0 22px;
  }
  .hero-copy h1 em{
    font-style:normal; color:var(--terracotta);
    background:linear-gradient(180deg, transparent 62%, rgba(232,163,61,0.35) 62%);
  }
  .hero-copy p.lede{
    font-size:17px; color:var(--ink-dim); max-width:480px; margin-bottom:34px;
  }
  .hero-actions{display:flex; gap:14px; margin-bottom:46px; flex-wrap:wrap;}
  .stat-row{display:flex; gap:38px; border-top:1px solid var(--line); padding-top:26px; flex-wrap:wrap; row-gap:18px;}
  .stat b{
    display:block; font-family:var(--serif); font-size:26px; font-weight:700;
    background:linear-gradient(135deg, var(--gold-deep), var(--terracotta));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .stat span{font-size:12.5px; color:var(--muted); font-weight:500;}

  .hero-visual{display:flex; justify-content:center; width:100%;}
  .door-frame{
    position:relative; width:100%; max-width:600px;
    filter:drop-shadow(0 30px 50px rgba(36,28,19,0.22));
    animation:riseIn 1s cubic-bezier(.2,.8,.2,1) both;
  }
  .door-frame svg{width:100%; height:auto;}
  @keyframes riseIn{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);} }
  .hang-tag{
    position:absolute; top:-38px; right:18px; z-index:5;
    animation:swing 6s ease-in-out infinite;
    transform-origin:top center;
  }
  @keyframes swing{ 0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} }
  .hang-tag .string{width:1px; height:34px; background:var(--muted); margin:0 auto;}
  .hang-tag .card{
    background:var(--ink); color:var(--bg); border-radius:6px;
    padding:8px 12px; font-family:var(--mono); font-size:10.5px; text-align:center;
    box-shadow:var(--shadow-sm);
    transform:rotate(2deg);
  }
  .hang-tag .card b{display:block; font-size:12px; letter-spacing:0.04em; color:var(--gold);}

  /* ---------- SECTIONS GENERIC ---------- */
  section{padding:25px 0; position:relative;}
  .page-hero-outer{padding:20px 0;}
  /* gallery sits right after the door section — keep the gap between the door
     category and the design category small (not the doubled 56+56). */
  #gallery{padding-top:0;}
  #doorcats{padding-bottom:22px;}
  .section-head{max-width:900px; margin-bottom:36px;}
  .section-head h2{font-size:clamp(28px,3.4vw,40px); margin-top:16px; white-space:normal;}
  .section-head p{color:var(--ink-dim); margin-top:14px; font-size:15.5px; max-width:560px;}
  .divider{border:none; border-top:1px solid var(--line); margin:0;}

  /* ---------- FAQ ---------- */
  .faq-list{display:flex; flex-direction:column; gap:12px; max-width:820px; margin:0 auto;}
  .faq-item{
    background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
    transition:border-color .2s ease;
  }
  .faq-item.open{border-color:var(--terracotta);}
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:none; border:none; cursor:pointer; padding:18px 22px; text-align:left;
    font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink);
  }
  .faq-chevron{width:19px; height:19px; flex-shrink:0; color:var(--terracotta); transition:transform .3s ease;}
  .faq-item.open .faq-chevron{transform:rotate(180deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
  .faq-a p{padding:0 22px 18px; font-size:13.5px; color:var(--ink-dim); line-height:1.7;}

  /* ---------- FLOATING WHATSAPP BUTTON ---------- */
  .wa-float{
    position:fixed; bottom:24px; right:24px; z-index:60;
    width:58px; height:58px; border-radius:50%;
    background:linear-gradient(135deg, #4fd17d, #1f9e53); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -10px rgba(31,158,83,0.55);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .wa-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 18px 36px -10px rgba(31,158,83,0.6);}
  .wa-float svg{width:28px; height:28px;}
  .wa-float::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    background:rgba(31,158,83,0.55); animation:wa-pulse 2.2s ease-out infinite; z-index:-1;
  }
  @keyframes wa-pulse{
    0%{transform:scale(1); opacity:0.6;}
    100%{transform:scale(1.9); opacity:0;}
  }
  @media (max-width:640px){
    .wa-float{width:52px; height:52px; bottom:16px; right:16px;}
    .wa-float svg{width:25px; height:25px;}
  }
  .reviews-carousel{position:relative; display:flex; align-items:center; gap:14px;}
  .reviews-viewport{
    flex:1; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; touch-action:pan-x; cursor:grab;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .reviews-viewport::-webkit-scrollbar{display:none;}
  .reviews-viewport.dragging{cursor:grabbing; scroll-snap-type:none;}
  .reviews-track{display:flex; gap:22px;}
  .review-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 24px;
    box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
    flex:0 0 calc((100% - 44px)/3); scroll-snap-align:start;
  }
  .review-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
  a.review-card{text-decoration:none; color:inherit; cursor:pointer;}
  .review-stars{color:var(--gold-deep); font-size:15px; margin-bottom:12px; display:inline-flex; gap:2px;}
  /* shared crisp SVG star (inherits its container's colour via currentColor — same gold look, sharper) */
  .ic-star{width:1em; height:1em; fill:currentColor; flex:0 0 auto; vertical-align:-0.12em;}
  .ic-star.empty{fill:none; stroke:currentColor; stroke-width:1.6; opacity:.42;}
  .review-text{font-size:14px; color:var(--ink-dim); line-height:1.7; margin-bottom:18px; min-height:96px;}
  .review-author{display:flex; align-items:center; gap:12px;}
  .review-avatar{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--gold), var(--terracotta)); color:#2a1608;
    display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:15px;
  }
  .review-author b{display:block; font-size:13.5px; color:var(--ink);}
  .review-author span{font-size:12px; color:var(--muted);}
  .rv-arrow{
    width:44px; height:44px; border-radius:50%; background:var(--card); border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    box-shadow:var(--shadow-sm); transition:all .2s ease; color:var(--ink);
  }
  .rv-arrow:hover{border-color:var(--terracotta); color:var(--terracotta); transform:translateY(-2px);}
  .rv-arrow svg{width:20px; height:20px;}
  @media (max-width:900px){ .review-card{flex:0 0 calc((100% - 22px)/2);} }
  @media (max-width:640px){ .review-card{flex:0 0 100%;} .rv-arrow{display:none;} }
  #usp{padding-top:56px; padding-bottom:56px;}
  .usp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .usp-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 22px;
    box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
  }
  .usp-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
  .usp-head{display:flex; align-items:center; gap:14px; margin-bottom:10px;}
  .usp-icon{
    width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:var(--bg-soft); flex-shrink:0;
  }
  .usp-icon svg{width:24px; height:24px;}
  .usp-card h4{font-family:var(--serif); font-size:16.5px; font-weight:600; margin-bottom:0;}
  .usp-card p{font-size:13.5px; color:var(--ink-dim); line-height:1.6;}
  @media (max-width:900px){ .usp-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:880px){ .usp-grid{grid-template-columns:1fr !important;} }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  .craft-outer{
    position:relative; width:100%; overflow:hidden; padding:0;
    background:linear-gradient(180deg, rgba(106,91,209,0.07), rgba(224,101,58,0.08));
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .craft-outer .blob{filter:blur(90px);}
  .craft-outer .blob-c1{width:420px; height:420px; background:var(--violet); top:-180px; right:-6%; opacity:0.15;}
  .craft-outer .blob-c2{width:380px; height:380px; background:var(--terracotta); bottom:-180px; left:-2%; opacity:0.16;}
  .craft-outer #craft{padding-top:56px; padding-bottom:56px; position:relative; z-index:1;}

  /* ---------- REVIEWS SECTION (full-width outer) ---------- */
  .reviews-outer{
    position:relative; width:100%; overflow:hidden; padding:0;
    background:linear-gradient(180deg, rgba(28,122,110,0.08), rgba(106,91,209,0.09));
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .reviews-outer .blob{filter:blur(90px);}
  .reviews-outer .blob-r1{width:420px; height:420px; background:var(--teal); top:-180px; right:-6%; opacity:0.16;}
  .reviews-outer .blob-r2{width:380px; height:380px; background:var(--violet); bottom:-180px; left:-4%; opacity:0.16;}
  .reviews-outer #reviews{padding-top:56px; padding-bottom:56px; position:relative; z-index:1;}
  .reviews-outer .review-card{background:var(--card);}
  .reviews-outer .rv-arrow{background:var(--card);}

  /* ---------- CRAFT CARDS ---------- */
  .craft-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .craft-card{
    background:var(--card); padding:32px 28px; border-radius:20px;
    border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .craft-card::after{
    content:''; position:absolute; inset:0; border-radius:20px; padding:1.5px;
    background:linear-gradient(135deg, var(--violet), var(--terracotta), var(--gold));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .3s ease; pointer-events:none;
  }
  .craft-card:hover{transform:translateY(-7px); box-shadow:var(--shadow); border-color:transparent;}
  .craft-card:hover::after{opacity:1;}
  .craft-card .step-head{display:flex; align-items:center; gap:14px; margin-bottom:10px;}
  .craft-card h3{font-size:22px; margin:0;}
  .craft-card p{font-size:14.5px; color:var(--ink-dim);}
  .craft-icon-wrap{
    width:54px; height:54px; border-radius:14px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .craft-icon-wrap.c1{background:linear-gradient(135deg, rgba(232,163,61,0.28), rgba(224,101,58,0.22));}
  .craft-icon-wrap.c2{background:linear-gradient(135deg, rgba(28,122,110,0.22), rgba(106,91,209,0.16));}
  .craft-icon-wrap.c3{background:linear-gradient(135deg, rgba(106,91,209,0.22), rgba(232,163,61,0.22));}
  .craft-icon{width:26px; height:26px;}

  /* ---------- GALLERY ---------- */
  .gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .design-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    overflow:hidden; transition:transform .35s ease, box-shadow .35s ease;
    position:relative; box-shadow:var(--shadow-sm); cursor:pointer;
  }
  .design-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
  .design-panel{
    aspect-ratio:16/9.1; display:flex; align-items:center; justify-content:center; position:relative;
    border-bottom:1px solid var(--line);
  }
  .dp1{background:linear-gradient(155deg, #fde9c8, #fbd9a0);}
  .dp2{background:linear-gradient(155deg, #cfeae4, #a9d9d0);}
  .dp3{background:linear-gradient(155deg, #e4ddfb, #cabff2);}
  .dp4{background:linear-gradient(155deg, #fbd9c9, #f3b79a);}
  .dp5{background:linear-gradient(155deg, #fdeccb, #f8d99f);}
  .dp6{background:linear-gradient(155deg, #d7ecd6, #b6dbb3);}
  .design-panel svg{width:72%; height:72%;}
  .design-panel svg .carve{stroke:var(--ink); opacity:0.55; transition:opacity .35s ease;}
  .design-card:hover .design-panel svg .carve{opacity:0.95;}
  .design-meta{padding:18px 20px 20px;}
  .design-meta .row1{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
  .design-meta .dno{
    font-family:var(--mono); font-size:11px; color:#fff; font-weight:600;
    background:linear-gradient(135deg, var(--teal), var(--teal-deep));
    padding:3px 9px; border-radius:20px;
  }
  .design-meta h4{font-family:var(--serif); font-size:17px; font-weight:600; margin-top:10px;}
  .design-meta .spec{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-bottom:14px;}
  .design-meta .price{font-family:var(--mono); font-size:14px; color:var(--ink); font-weight:700; margin-bottom:14px;}
  .design-meta .price span{color:var(--muted); font-size:11px; font-weight:400;}

  /* ---------- DOOR CATEGORIES ---------- */
  .catgrid{
    display:flex; flex-wrap:wrap; gap:16px; margin-bottom:40px;
  }
  /* PC only: centre the category chips; phone keeps its left/scroll layout */
  @media(min-width:881px){ .catgrid{ justify-content:center; } }
  .cat-tab{
    position:relative; text-align:left; cursor:pointer; border:1px solid var(--line);
    border-radius:16px; padding:16px 20px; background:var(--card);
    box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display:flex; flex-direction:column; overflow:hidden;
    flex:1 1 calc(25% - 12px);
  }
  .cat-tab::before{
    content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s ease; z-index:0;
  }
  .cat-tab:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
  .cat-tab.active{border-color:transparent; box-shadow:var(--shadow);}
  .cat-tab.active::before{opacity:1;}
  .cat-tab[data-cat="main"]::before{background:linear-gradient(150deg, var(--gold), var(--terracotta));}
  .cat-tab[data-cat="bedroom"]::before{background:linear-gradient(150deg, var(--teal), var(--violet));}
  .cat-tab[data-cat="double"]::before{background:linear-gradient(150deg, var(--violet), var(--gold-deep));}
  .cat-tab[data-cat="kitchen"]::before{background:linear-gradient(150deg, var(--gold), var(--teal));}
  .cat-tab[data-cat="bathroom"]::before{background:linear-gradient(150deg, var(--teal-deep), var(--terracotta));}
  .cat-tab[data-cat="thick"]::before{background:linear-gradient(150deg, var(--violet), var(--terracotta));}
  .cat-tab .cat-head{
    display:flex; align-items:center; gap:12px; position:relative; z-index:1; flex-wrap:wrap;
  }
  .cat-tab .cat-icon-wrap{
    width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    background:linear-gradient(135deg, rgba(36,28,19,0.06), rgba(36,28,19,0.03));
    transition:background .3s ease;
  }
  .cat-tab.active .cat-icon-wrap{background:rgba(255,255,255,0.22);}
  .cat-tab .cat-icon{width:21px; height:21px; stroke:var(--ink); transition:stroke .3s ease;}
  .cat-tab.active .cat-icon{stroke:#fff;}
  .cat-tab .cat-title-row{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap; position:relative; z-index:1;
  }
  .cat-tab .cat-name{
    font-family:var(--serif); font-weight:700; font-size:16.5px; letter-spacing:-0.01em;
    color:var(--ink); transition:color .3s ease; line-height:1.25;
  }
  .cat-tab.active .cat-name{color:#fff;}
  .cat-tab .cat-badge{
    display:inline-flex; align-items:center; justify-content:center;
    position:relative; z-index:1; font-family:var(--mono); font-weight:700; font-size:11.5px;
    color:#fff; padding:2px 9px; border-radius:20px; letter-spacing:0.02em; line-height:1.6;
    transition:background .3s ease, box-shadow .3s ease;
  }
  .cat-tab[data-cat="main"] .cat-badge{background:linear-gradient(120deg, var(--gold), var(--terracotta));}
  .cat-tab[data-cat="bedroom"] .cat-badge{background:linear-gradient(120deg, var(--teal), var(--violet));}
  .cat-tab[data-cat="double"] .cat-badge{background:linear-gradient(120deg, var(--violet), var(--gold-deep));}
  .cat-tab[data-cat="kitchen"] .cat-badge{background:linear-gradient(120deg, var(--gold), var(--teal));}
  .cat-tab[data-cat="bathroom"] .cat-badge{background:linear-gradient(120deg, var(--teal-deep), var(--terracotta));}
  .cat-tab[data-cat="thick"] .cat-badge{background:linear-gradient(120deg, var(--violet), var(--terracotta));}
  .cat-tab.active .cat-badge{background:rgba(255,255,255,0.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4);}

  .doors-showcase{
    background:var(--bg-soft); border:1px solid var(--line); border-radius:20px; padding:34px;
  }
  .doors-showcase-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:10px;}
  .doors-showcase-head h3{font-size:21px;}
  .doors-showcase-head .tag-pill{
    font-family:var(--mono); font-size:11px; font-weight:600; color:var(--gold-deep);
    background:rgba(232,163,61,0.15); padding:6px 14px; border-radius:20px;
  }
  .doors-carousel-viewport{
    overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; touch-action:pan-x; cursor:grab;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .doors-carousel-viewport::-webkit-scrollbar{display:none;}
  .doors-carousel-viewport.dragging{cursor:grabbing; scroll-snap-type:none;}
  .door-items{display:flex; gap:22px;}
  .door-item{
    background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
    animation:fadeUp .45s ease both; scroll-snap-align:start; flex:0 0 calc((100% - 44px)/3);
    cursor:pointer;
  }
  .door-item:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
  /* design gallery cards inside the carousel behave like door items */
  #galleryViewport .df-card{flex:0 0 calc((100% - 44px)/3); scroll-snap-align:start;}
  @keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
  .door-item .di-panel{
    aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; position:relative;
    border-bottom:1px solid var(--line); pointer-events:none;
  }
  .door-item .di-panel svg{width:46%; height:82%;}
  .door-item .di-meta{padding:16px 18px 18px;}
  .door-item .di-meta h4{font-family:var(--serif); font-size:16px; font-weight:600; margin-bottom:4px;}
  .door-item .di-meta .di-spec{font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:10px;}
  .door-item .di-meta .di-price{font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:12px;}
  .door-item .di-meta .di-price span{color:var(--muted); font-size:10.5px; font-weight:400;}

  /* ---------- PRODUCT MODAL ---------- */
  .pm-overlay{
    position:fixed; inset:0; z-index:300; background:rgba(20,14,6,0.6); backdrop-filter:blur(4px);
    display:flex; align-items:flex-start; justify-content:center; padding:48px 20px;
    opacity:0; pointer-events:none; transition:opacity .3s ease; overflow-y:auto;
  }
  .pm-overlay.open{opacity:1; pointer-events:auto;}
  body.pm-lock{overflow:hidden;}
  .product-modal{
    background:var(--card); width:100%; max-width:1100px; border-radius:26px; overflow:hidden;
    box-shadow:var(--shadow); position:relative; margin:auto; transform:translateY(28px) scale(0.98);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .pm-overlay.open .product-modal{transform:translateY(0) scale(1);}
  .pm-close{
    position:absolute; top:18px; right:18px; z-index:6; width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,0.95); border:1px solid var(--line); display:flex; align-items:center;
    justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .2s ease;
  }
  .pm-close:hover{transform:rotate(90deg);}
  .pm-close svg{width:16px; height:16px; stroke:var(--ink); stroke-width:2;}

  .pm-scroll{max-height:92vh; overflow-y:auto;}
  .pm-body{display:grid; grid-template-columns:1fr 1fr;}

  .pm-gallery{padding:30px; background:linear-gradient(165deg, var(--bg-soft), #ece2cc);}
  .pm-gallery-main{
    border-radius:20px; overflow:hidden; aspect-ratio:1/1.05; display:flex; align-items:center;
    justify-content:center; border:1px solid var(--line); margin-bottom:14px; position:relative;
    box-shadow:var(--shadow-sm);
  }
  .pm-gallery-main svg{width:48%; height:78%; transition:opacity .25s ease;}
  .pm-id-badge{
    position:absolute; top:16px; left:16px; font-family:var(--mono); font-size:11px; font-weight:700;
    color:#fff; background:var(--teal-deep); padding:5px 12px; border-radius:20px; letter-spacing:0.04em;
  }
  .pm-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:9px;}
  .pm-thumb{
    aspect-ratio:1/1; border-radius:11px; border:2px solid transparent; cursor:pointer; overflow:hidden;
    display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, transform .2s ease;
  }
  .pm-thumb:hover{transform:translateY(-2px);}
  .pm-thumb.active{border-color:var(--gold-deep);}
  .pm-thumb svg{width:58%; height:68%;}

  .pm-details{padding:34px 34px 8px;}
  .pm-cat-tag{
    display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
    font-weight:600; color:var(--gold-deep); background:rgba(232,163,61,0.14); padding:5px 12px;
    border-radius:20px; margin-bottom:14px;
  }
  .pm-title{font-family:var(--serif); font-size:27px; font-weight:700; margin-bottom:6px; letter-spacing:-0.01em;}
  .pm-spec-line{color:var(--ink-dim); font-size:14px; margin-bottom:12px;}
  .pm-rating{display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
  .pm-stars{display:flex; gap:2px;}
  .pm-stars svg{width:15px; height:15px; fill:var(--gold); stroke:var(--gold);}
  .pm-stars svg.empty{fill:none; stroke:var(--line-strong);}
  .pm-rating-num{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink);}
  .pm-rating-count{font-size:12.5px; color:var(--muted); text-decoration:underline; cursor:pointer;}

  .pm-price-box{
    display:flex; align-items:baseline; gap:8px; padding:16px 18px; border-radius:14px;
    background:linear-gradient(120deg, rgba(232,163,61,0.13), rgba(224,101,58,0.10));
    border:1px solid rgba(232,163,61,0.25); margin-bottom:22px;
  }
  .pm-price-box .amt{font-family:var(--mono); font-size:21px; font-weight:700; color:var(--ink);}
  .pm-price-box .note{font-size:12px; color:var(--muted);}

  .pm-section-label{
    font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--muted); margin:22px 0 10px; font-weight:600;
  }
  .pm-options{display:flex; gap:9px; flex-wrap:wrap;}
  .pm-opt{
    padding:9px 16px; border-radius:10px; border:1.5px solid var(--line); cursor:pointer;
    font-size:13px; font-weight:600; color:var(--ink-dim); background:var(--card); transition:all .2s ease;
  }
  .pm-opt:hover{border-color:var(--gold);}
  .pm-opt.active{
    border-color:var(--gold-deep); color:var(--gold-deep);
    background:linear-gradient(120deg, rgba(232,163,61,0.15), rgba(224,101,58,0.12));
  }

  .pm-size-row{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:10px;}
  .pm-custom-toggle{
    font-size:12.5px; color:var(--teal-deep); font-weight:600; cursor:pointer; display:inline-flex;
    align-items:center; gap:5px; text-decoration:underline; text-underline-offset:2px;
  }
  .pm-custom-inputs{
    display:none; gap:12px; margin-top:12px; padding:14px; background:var(--bg-soft);
    border-radius:12px; border:1px solid var(--line);
  }
  .pm-custom-inputs.open{display:flex;}
  .pm-field{flex:1;}
  .pm-field label{display:block; font-size:11px; color:var(--muted); margin-bottom:5px; font-weight:600;}
  .pm-field .in-wrap{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:9px; background:var(--card); overflow:hidden;}
  .pm-field input{border:none; padding:9px 10px; font-family:var(--mono); font-size:13.5px; width:100%; outline:none; background:transparent; color:var(--ink);}
  .pm-field .unit{padding:0 10px; font-size:11px; color:var(--muted); font-family:var(--mono);}

  .pm-qty-row{display:flex; align-items:center; gap:14px; margin:22px 0 6px;}
  .pm-qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:10px; overflow:hidden;}
  .pm-qty button{width:36px; height:36px; border:none; background:var(--bg-soft); cursor:pointer; font-size:16px; font-weight:700; color:var(--ink);}
  .pm-qty input{width:42px; text-align:center; border:none; font-family:var(--mono); font-weight:700; font-size:14px; outline:none;}

  .pm-order-btn{
    width:100%; margin-top:18px; padding:15px 20px; border-radius:14px; border:none; cursor:pointer;
    background:linear-gradient(135deg, var(--gold), var(--terracotta)); color:#2a1608; font-weight:700;
    font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:var(--shadow-sm); transition:transform .2s ease;
  }
  .pm-order-btn:hover{transform:translateY(-2px);}
  .pm-order-btn svg{width:18px; height:18px;}
  .pm-trust-row{display:flex; gap:16px; margin-top:16px; flex-wrap:wrap;}
  .pm-trust-row .ti{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); font-weight:500;}
  .pm-trust-row .ti svg{width:15px; height:15px; stroke:var(--teal-deep);}

  .pm-desc{padding:26px 34px 6px; border-top:1px solid var(--line);}
  .pm-desc-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
  .pm-desc-list li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-dim); line-height:1.5;}
  .pm-desc-list li svg{width:16px; height:16px; stroke:var(--teal-deep); flex-shrink:0; margin-top:2px;}

  .pm-reviews{padding:8px 34px 32px; border-top:1px solid var(--line); margin-top:14px;}
  .pm-reviews-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:20px 0 18px;}
  .pm-reviews-summary{display:flex; align-items:center; gap:14px;}
  .pm-reviews-summary .big{font-family:var(--serif); font-size:34px; font-weight:700; color:var(--ink);}
  .pm-review-card{
    padding:16px 18px; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:var(--bg-soft);
  }
  .pm-review-top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
  .pm-avatar{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:700; font-size:13px; color:#fff; flex-shrink:0;
  }
  .pm-review-name{font-weight:700; font-size:13.5px; color:var(--ink);}
  .pm-review-date{font-size:11px; color:var(--muted);}
  .pm-review-text{font-size:13.5px; color:var(--ink-dim); line-height:1.6;}

  .pm-review-form{
    margin-top:18px; padding:18px; border:1px dashed var(--line-strong); border-radius:14px; background:var(--card);
  }
  .pm-review-form .pm-stars-input{display:flex; gap:4px; margin-bottom:12px; cursor:pointer;}
  .pm-review-form .pm-stars-input svg{width:22px; height:22px; fill:none; stroke:var(--line-strong); transition:all .15s ease;}
  .pm-review-form .pm-stars-input svg.filled{fill:var(--gold); stroke:var(--gold);}
  .pm-review-form input[type=text], .pm-review-form textarea{
    width:100%; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-family:var(--sans);
    font-size:13.5px; margin-bottom:10px; outline:none; background:var(--bg-soft); color:var(--ink);
  }
  .pm-review-form textarea{resize:vertical; min-height:64px;}
  .pm-review-form button{
    padding:10px 22px; border-radius:10px; border:none; background:var(--teal-deep); color:#fff;
    font-weight:700; font-size:13px; cursor:pointer;
  }

  @media (max-width: 760px){
    .pm-body{grid-template-columns:1fr;}
    .pm-details{padding:26px 20px 6px;}
    .pm-desc, .pm-reviews{padding-left:20px; padding-right:20px;}
    .pm-desc-list{grid-template-columns:1fr;}
    .pm-overlay{padding:0;}
    .product-modal{border-radius:0; max-width:100%; min-height:100vh;}
    .pm-scroll{max-height:100vh;}
  }

  /* ---------- PROCESS ---------- */
  .process-outer{
    position:relative; width:100%; overflow:hidden; padding:0;
    background:linear-gradient(180deg, rgba(28,122,110,0.07), rgba(232,163,61,0.09));
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .process-outer .blob{filter:blur(90px);}
  .process-outer .blob-p1{width:420px; height:420px; background:var(--teal); top:-180px; left:-6%; opacity:0.16;}
  .process-outer .blob-p2{width:380px; height:380px; background:var(--gold); bottom:-180px; right:0%; opacity:0.18;}
  .process-outer section{padding-top:56px; padding-bottom:56px;}
  .process{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0 18px; align-items:start; position:relative;}
  .process-step{
    background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 28px;
    box-shadow:var(--shadow-sm); position:relative; z-index:1;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .process-step:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
  .process-connector{
    display:flex; align-items:center; justify-content:center; position:relative; z-index:0;
  }
  .process-connector svg{width:34px; height:14px; opacity:0.6;}
  .process-step .step-head{
    display:flex; align-items:center; gap:14px; margin-bottom:18px;
  }
  .process-step .idx-badge{
    width:52px; height:52px; border-radius:14px; margin-bottom:0; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--gold), var(--terracotta));
    box-shadow:var(--shadow-sm);
  }
  .process-step .idx-badge span{
    font-family:var(--serif); font-size:20px; font-weight:800; color:#2a1608;
  }
  .process-step h3{font-size:19px; margin-bottom:0;}
  .process-step p{font-size:14.5px; color:var(--ink-dim);}

  /* ---------- CONTACT ---------- */
  .contact-shell{
    background:var(--card); border:1px solid var(--line); border-radius:20px;
    padding:54px; display:grid; grid-template-columns:1fr 1fr; gap:50px;
    box-shadow:var(--shadow);
  }
  .contact-info h2{font-size:30px; margin-bottom:16px;}
  .contact-info p{color:var(--ink-dim); font-size:15px; margin-bottom:28px; max-width:380px;}
  .contact-line{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px;}
  .contact-line .ic-wrap{
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:linear-gradient(135deg, rgba(232,163,61,0.22), rgba(224,101,58,0.16));
    display:flex; align-items:center; justify-content:center;
  }
  .contact-line .ic{width:16px; height:16px;}
  .contact-line b{display:block; font-size:14px; color:var(--ink);}
  .contact-line span{font-size:13px; color:var(--muted);}

  /* SOCIAL LINKS — styling moved to shared public/css/social.css */

  form.order-form{display:flex; flex-direction:column; gap:14px;}
  .order-form label{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--muted); text-transform:uppercase; display:block; margin-bottom:6px; font-weight:600;}
  .order-form input, .order-form select, .order-form textarea{
    width:100%; background:var(--bg-soft); border:1px solid var(--line-strong); border-radius:10px;
    padding:12px 14px; color:var(--ink); font-family:var(--sans); font-size:14px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .order-form input:focus, .order-form select:focus, .order-form textarea:focus{
    outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(28,122,110,0.15);
  }
  .order-form textarea{resize:vertical; min-height:70px;}

  footer{background:var(--bg-soft); color:var(--ink-dim); margin-top:20px; border-top:1px solid var(--line);}
  .footer-top{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; padding-bottom:40px;}
  .footer-brand .logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:20px; color:var(--ink); margin-bottom:14px;}
  .footer-brand .logo .lt-main{font-size:20px;}
  .footer-brand .logo .mark-wrap{
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(135deg, var(--gold), var(--terracotta));
    display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-sm);
  }
  .footer-brand .logo .mark-wrap svg{width:18px; height:18px;}
  .footer-brand p{font-size:13.5px; line-height:1.75; color:var(--ink-dim); max-width:320px; margin-bottom:18px;}
  .footer-social{display:flex; gap:10px;}
  .footer-social a{
    width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    background:var(--card); border:1px solid var(--line-strong); color:var(--ink-dim); box-shadow:var(--shadow-sm);
    transition:all .2s ease;
  }
  .footer-social a:hover{background:linear-gradient(135deg, var(--gold), var(--terracotta)); color:#2a1608; border-color:transparent; transform:translateY(-2px);}
  .footer-social a svg{width:16px; height:16px;}
  .footer-col h5{font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin-bottom:16px;}
  .footer-col ul{list-style:none;}
  .footer-col li{margin-bottom:11px;}
  .footer-col a{font-size:13.5px; color:var(--ink-dim); transition:color .2s ease;}
  .footer-col a:hover{color:var(--terracotta);}
  .footer-col .fc-line{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px;}
  .footer-col .fc-line svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--terracotta);}
  .footer-col .fc-line div{font-size:13.5px; color:var(--ink-dim); line-height:1.5;}
  .footer-col .fc-line b{display:block; color:var(--ink); font-weight:600; font-size:13.5px;}
  .footer-bottom{
    padding:22px 0; border-top:1px solid var(--line-strong);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  }
  .footer-bottom p{font-size:12.5px; color:var(--muted);}
  @media (max-width:820px){
    .footer-top{grid-template-columns:1fr; gap:30px;}
  }
  footer p{font-size:12.5px; color:var(--muted);}

  @media (max-width: 880px){
    .hero{grid-template-columns:1fr; padding-top:30px; padding-bottom:25px;}
    .hero-visual{order:-1;}
    .door-frame{max-width:460px;}
    .hero-copy{text-align:center;}
    .hero-copy .eyebrow{justify-content:center;}
    .hero-copy p.lede{margin-left:auto; margin-right:auto;}
    .hero-actions{justify-content:center;}
    .stat-row{justify-content:center;}
    .stat{text-align:center;}
    .craft-grid, .gallery-grid{grid-template-columns:1fr;}
    .door-item, #galleryViewport .df-card{flex-basis:100%;}
    .cat-tab{flex-basis:calc(50% - 8px);}
    .process{grid-template-columns:1fr; gap:20px;}
    .process-connector{display:none;}
    .contact-shell{grid-template-columns:1fr; padding:32px;}
    nav.links{display:none;}
    .wrap{padding:0 24px;}
  }

  @media (max-width: 480px){
    .wrap{padding:0 18px;}
    .nav-inner{padding:16px 18px;}
    .logo .lt-main{font-size:20px;}
    .logo .mark-wrap{width:35px; height:35px;}
    .logo .mark{width:20px; height:20px;}
    .logo small{font-size:8.5px;}
    .hero-actions{flex-direction:column; align-items:stretch;}
    .hero-actions .btn{justify-content:center;}
    .stat-row{gap:24px;}
    .contact-shell{padding:22px;}
    .design-meta{padding:16px;}
    .process-step .step-head{flex-direction:column; align-items:flex-start; gap:8px;}
    .catgrid{gap:10px;}
    .cat-tab{padding:16px 18px; flex-basis:100%;}
    .door-item{flex-basis:100%;}
    .doors-showcase{padding:22px;}
    .doors-showcase-head{flex-direction:column; align-items:flex-start;}
  }

  :focus-visible{outline:2px solid var(--terracotta); outline-offset:3px;}

  /* ====== SHARED SITE-WIDE ADDITIONS (nav toggle + unified dark footer) ====== */
  nav.links a.active{color:var(--terracotta);}
  nav.links a.active::after{width:100%;}
  .nav-toggle{
    display:none; width:40px; height:40px; border-radius:9px; border:1px solid var(--line-strong);
    background:var(--card); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .nav-toggle svg{width:20px; height:20px; color:var(--ink);}
  .mobile-menu{
    display:none; max-height:0; overflow:hidden; background:var(--bg);
    border-top:1px solid var(--line); transition:max-height .35s ease;
  }
  .mobile-menu.open{max-height:480px;}
  .mobile-menu-inner{padding:10px 24px 22px; display:flex; flex-direction:column; gap:2px;}
  .mobile-menu a{padding:13px 4px; font-size:15px; font-weight:600; color:var(--ink-dim); border-bottom:1px solid var(--line);}
  .mobile-menu a.active{color:var(--terracotta);}
  .mobile-menu .btn{margin-top:14px; justify-content:center;}
  @media (max-width:880px){ .nav-toggle{display:flex;} .mobile-menu{display:block;} }

  footer{background:linear-gradient(135deg, var(--bg-soft) 0%, #f4e2c6 55%, #f7dbbf 100%); color:var(--ink-dim); margin-top:20px; border-top:1px solid var(--line);}
  footer .wrap{padding-top:56px;}
  .footer-top{grid-template-columns:1.1fr 2fr;}
  .footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .footer-badge{
    display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px;
    letter-spacing:0.08em; color:var(--gold-deep); background:rgba(255,255,255,0.55); border:1px solid var(--line-strong);
    border-radius:5px; padding:6px 12px; margin-top:16px;
  }
  .footer-badge svg{width:12px; height:12px; color:var(--terracotta);}
  .footer-bottom{border-top:1px solid var(--line-strong);}
  .footer-bottom p{color:var(--muted);}
  footer p{color:var(--muted);}
  @media (max-width:820px){ .footer-top{grid-template-columns:1fr;} .footer-cols{grid-template-columns:1fr 1fr; gap:26px;} }
  @media (max-width:520px){ .footer-cols{grid-template-columns:1fr;} }
/* Social section styling now lives in the shared public/css/social.css (loaded globally). */

/* ===== homepage hero slideshow (inside the door-frame) + work-photo gallery ===== */
.hero-slider{position:relative;width:100%;aspect-ratio:3/2;border-radius:14px;overflow:hidden;border:2.5px solid #e0653a;box-shadow:0 20px 44px -18px rgba(36,28,19,.4)}
/* PC: wider box but keep the original height (not taller) */
@media(min-width:881px){.hero-slider{aspect-ratio:3/2;height:auto}}
.hs-slide{position:absolute;inset:0;background:#2a231a center/cover no-repeat;opacity:0;transition:opacity .8s ease}
.hs-slide.on{opacity:1}
.hs-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:2}
.hs-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.hs-dot.on{background:#fff;transform:scale(1.3)}
/* masonry gallery — each photo keeps its natural shape (no crop) */
/* only this section scrolls internally, however many photos there are */
.hp-scroll{max-height:74vh;overflow-y:auto;overflow-x:hidden;padding:8px 8px 2px;margin:0 -8px;border-radius:16px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;overscroll-behavior:contain}
.hp-scroll::-webkit-scrollbar{width:9px}
.hp-scroll::-webkit-scrollbar-track{background:transparent}
.hp-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
.hp-grid{column-count:6;column-gap:12px}
.hp-item{display:block;width:100%;margin:0 0 12px;border-radius:10px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;cursor:zoom-in;break-inside:avoid;-webkit-column-break-inside:avoid}
.hp-item img{width:100%;height:auto;display:block;transition:transform .4s ease}
.hp-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hp-item:hover img{transform:scale(1.05)}
@media(max-width:880px){.hp-grid{column-count:4;column-gap:10px}.hp-item{margin-bottom:10px}}
@media(max-width:520px){.hp-grid{column-count:3;column-gap:8px}.hp-item{margin-bottom:8px}}

/* ===== customer review popup ===== */
.rv-modal{position:fixed;inset:0;background:rgba(20,14,6,.6);backdrop-filter:blur(4px);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto}
.rv-modal.open{display:flex}
.rv-modal-box{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;max-width:480px;width:100%;padding:28px 26px;box-shadow:var(--shadow);animation:riseIn .4s ease both}
.rv-modal-box h3{font-family:var(--serif);font-size:22px;margin:0 0 4px;color:var(--ink)}
.rv-modal-sub{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.rv-modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;background:var(--bg-soft);border-radius:50%;cursor:pointer;font-size:15px;color:var(--ink)}
.rv-modal-box label{display:block;font-size:13px;font-weight:600;color:var(--ink-dim);margin:12px 0 5px}
.rv-modal-box input,.rv-modal-box textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:10px;padding:11px 13px;font:inherit;font-size:14.5px;background:var(--bg);color:var(--ink)}
.rv-modal-box input:focus,.rv-modal-box textarea:focus{outline:none;border-color:var(--teal)}
.rv-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rv-stars-input{display:flex;gap:4px}
.rv-star{border:none;background:none;cursor:pointer;font-size:30px;line-height:1;color:var(--line-strong);transition:color .15s,transform .15s;padding:0}
.rv-star.on{color:var(--gold)}
.rv-star:hover{transform:scale(1.15)}
@media(max-width:480px){.rv-row{grid-template-columns:1fr}}

/* homepage card feature photos (fill the panel) */
.di-panel{position:relative;overflow:hidden;background:var(--bg-soft)}
.di-panel .di-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px) saturate(1.2) brightness(1.04);transform:scale(1.2);opacity:.75;z-index:0}
.di-panel .di-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.df-panel .df-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px) saturate(1.2) brightness(1.04);transform:scale(1.2);opacity:.75;z-index:0}
.df-panel .df-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}

/* ============ HOMEPAGE SUMMARY GRIDS — match /door-category, /catalog, /showpieces ============ */
.hp-sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:6px 0 20px;}
.hp-sec-head h3{font-family:var(--serif); font-size:21px; font-weight:700;}
.hp-sec-head .btn-sm{white-space:nowrap;}

/* door summary grid = /door-category look */
#doorcats .full-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
#doorcats .door-item{cursor:default;}
#doorcats .door-item:hover{border-color:var(--line-strong);}
#doorcats .door-item .di-panel{aspect-ratio:5/8; overflow:hidden;}
#doorcats .door-item .di-photo{transition:transform .35s ease;}
#doorcats .door-item:hover .di-photo{transform:scale(1.06);}
#doorcats .door-item .di-meta{text-align:center;}
.di-panel .di-cat-tag{
  position:absolute; right:10px; bottom:10px; z-index:2;
  font-family:var(--sans); font-size:11px; font-weight:700; line-height:1; letter-spacing:.01em;
  color:#fff; background:rgba(36,22,8,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:6px 11px; border-radius:5px; box-shadow:0 2px 8px rgba(0,0,0,.28);
}

/* catalog + showpiece summary grids = /catalog look */
#catalog-preview .cbx-grid, #showpiece-preview .cbx-grid, #plasticdoor-preview .cbx-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.cbx-cell{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:5/8;background:var(--bg-soft);cursor:zoom-in;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.cbx-cell:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cbx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(20px) saturate(1.2) brightness(1.04);transform:scale(1.2);opacity:.75;z-index:0}
.cbx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.cbx-code{position:absolute;left:9px;bottom:9px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;background:rgba(36,22,8,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:5px 10px;border-radius:5px}

/* shared image lightbox (same as /catalog) */
.clb{position:fixed;inset:0;background:rgba(10,7,4,.94);z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 14px}
.clb[hidden]{display:none}
.clb-img{max-width:92vw;max-height:72vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.clb-bar{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.clb-meta{color:#fff;font-family:var(--mono);font-size:13px;opacity:.92}
.clb-wa{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#25d366,#128c4a);color:#fff;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:5px;text-decoration:none;box-shadow:0 12px 26px -10px rgba(18,140,74,.6);transition:transform .18s}
.clb-wa:hover{transform:translateY(-2px)}
.clb-wa svg{width:20px;height:20px}
.clb-x,.clb-prev,.clb-next{position:fixed;background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s}
.clb-x:hover,.clb-prev:hover,.clb-next:hover{background:rgba(255,255,255,.3)}
.clb-x{top:18px;right:18px;width:44px;height:44px;font-size:19px}
.clb-prev,.clb-next{top:44%;width:50px;height:50px;font-size:28px}
.clb-prev{left:18px}.clb-next{right:18px}

@media(max-width:900px){
  #doorcats .full-grid{grid-template-columns:repeat(3,1fr);}
  #catalog-preview .cbx-grid, #showpiece-preview .cbx-grid, #plasticdoor-preview .cbx-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:600px){.clb-prev,.clb-next{display:none}}
@media(max-width:560px){
  #doorcats .full-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  #doorcats .door-item{border-radius:13px;}
  #doorcats .door-item .di-meta{padding:10px 11px 12px;}
  #doorcats .door-item .di-meta h4{font-size:13px; margin-bottom:3px; line-height:1.3;}
  #doorcats .door-item .di-meta .di-price{font-size:11.5px; margin-bottom:8px;}
  #doorcats .door-item .di-meta .di-price span{font-size:9.5px;}
  #doorcats .door-item .di-meta .btn-sm{padding:7px 10px; font-size:11px;}
  .di-panel .di-cat-tag{font-size:9.5px; padding:4px 8px; right:7px; bottom:7px;}
  #catalog-preview .cbx-grid, #showpiece-preview .cbx-grid, #plasticdoor-preview .cbx-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .cbx-code{font-size:10px;padding:4px 8px;left:6px;bottom:6px}
  .hp-sec-head h3{font-size:18px;}
}

/* homepage category chips — same as /door-category, /catalog */
#doorcats .chip-row, #catalog-preview .chip-row, #showpiece-preview .chip-row{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 18px;}
.chip{
  font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 16px; border-radius:5px;
  border:1px solid var(--line-strong); background:var(--card); color:var(--ink-dim);
  transition:all .2s ease; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.chip:hover{border-color:var(--terracotta); color:var(--terracotta); transform:translateY(-2px);}
.chip.active{background:linear-gradient(135deg, var(--gold), var(--terracotta)); color:#2a1608; border-color:transparent; box-shadow:var(--shadow-sm);}
.chip .cnt{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); background:var(--bg-soft); padding:1px 8px; border-radius:20px; transition:all .25s ease;}
.chip.active .cnt{background:rgba(255,255,255,0.35); color:#2a1608;}
@media(max-width:560px){
  #doorcats .chip-row, #catalog-preview .chip-row, #showpiece-preview .chip-row{gap:7px;}
  .chip{font-size:12px; padding:7px 12px;}
}

/* FAQ question icon — a ? badge before every FAQ question (all pages) */
.faq-q{justify-content:flex-start;}
.faq-q::before{content:"?";flex-shrink:0;width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8a33d,#e0653a);color:#2a1608;font-weight:800;font-size:13px;line-height:1;font-family:inherit;}
.faq-q .faq-chevron,.faq-q svg.faq-chevron{margin-left:auto;}

/* hero: 3 CTA buttons (door · catalog · showpiece) in one row, WhatsApp below */
.hero-actions.hero-cta3{flex-wrap:nowrap; gap:10px; margin-bottom:10px;}
.hero-actions.hero-cta3 .btn{flex:1 1 0; min-width:0; gap:7px; justify-content:center; white-space:nowrap; padding:12px 10px; font-size:14px;}
.hero-actions.hero-cta-wa{margin-bottom:46px;}
.hero-actions.hero-cta-wa .btn{width:100%; gap:8px; justify-content:center; padding:12px 10px; font-size:14px;}
.hero-actions .btn svg{flex-shrink:0;}
@media(max-width:480px){
  .hero-actions.hero-cta3{flex-direction:row; align-items:stretch; gap:7px;}
  .hero-actions.hero-cta3 .btn{font-size:12px; padding:11px 6px;}
  .hero-actions.hero-cta-wa .btn{font-size:12px; padding:11px 6px;}
}

/* hero interlinks land below the sticky header */
#doorcats, #catalog-preview, #showpiece-preview{scroll-margin-top:82px;}

/* ===== HERO with full-section background image + overlaid info ===== */
.hero-outer.hero-bg{position:relative; overflow:hidden; padding:0;}
.hero-outer.hero-bg .hero-cta-wa{margin-bottom:0;}
.hero-outer.hero-bg .hero-bgslider{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border:none; border-radius:0; box-shadow:none; z-index:0;}
.hero-outer.hero-bg .hero-bgslider .hs-slide{background-size:cover; background-position:center;}
.hero-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(95deg, rgba(24,14,6,.90) 0%, rgba(24,14,6,.70) 38%, rgba(24,14,6,.34) 66%, rgba(24,14,6,.10) 100%);}
.hero-outer.hero-bg .hero{position:relative; z-index:2; grid-template-columns:1fr; min-height:0; padding-top:37px; padding-bottom:37px; align-items:center;}
.hero-outer.hero-bg .hero-copy{max-width:640px;}
.hero-outer.hero-bg .eyebrow{color:#f6c98a;}
.hero-outer.hero-bg h1{color:#fff;}
.hero-outer.hero-bg .lede{color:rgba(255,255,255,.9);}
.hero-outer.hero-bg .stat-row{border-top-color:rgba(255,255,255,.22);}
.hero-outer.hero-bg .stat span{color:rgba(255,255,255,.82);}
.hero-outer.hero-bg .hero-cta-wa .btn.btn-ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); color:#fff;}
.hero-outer.hero-bg .hero-cta-wa .btn.btn-ghost:hover{background:rgba(255,255,255,.2);}
.hero-outer.hero-bg .hs-dots{display:none;}
/* separate mobile hero image: phone shows .hero-mobile-bg, PC shows the slider */
.hero-outer.hero-bg .hero-mob{display:none;}
@media(max-width:880px){
  .hero-outer.hero-bg.hero-hasmob .hero-pc{display:none;}
  .hero-outer.hero-bg .hero-mob{display:block;}
}
@media(max-width:880px){
  .hero-outer.hero-bg .hero{min-height:0; padding-top:37px; padding-bottom:37px; text-align:left;}
  .hero-outer.hero-bg .hero-copy{text-align:left;}
  .hero-outer.hero-bg .hero-copy .eyebrow{justify-content:flex-start; font-size:10px; letter-spacing:.02em; max-width:none; white-space:nowrap;}
  /* phone: text stays in the left ~2/3, right ~1/3 reveals the image */
  .hero-outer.hero-bg .hero-copy h1,
  .hero-outer.hero-bg .hero-copy .lede{max-width:66%;}
  .hero-outer.hero-bg .hero-copy .lede{margin-left:0; margin-right:auto; font-size:13px; line-height:1.6;}
  .hero-outer.hero-bg .hero-copy h1{font-size:clamp(22px,6.4vw,30px); line-height:1.16;}
  .hero-scrim{background:linear-gradient(90deg, rgba(24,14,6,.9) 0%, rgba(24,14,6,.76) 46%, rgba(24,14,6,.32) 76%, rgba(24,14,6,.08) 100%);}
}

/* stats strip below hero — one row on PC + phone */
.hero-stats{padding:0;}
.hero-stats .hs-strip{display:flex; flex-wrap:nowrap; justify-content:space-between; gap:10px;
  background:linear-gradient(135deg, rgba(232,163,61,.13), rgba(224,101,58,.10));
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm);
  padding:22px 26px; margin:10px 0 -7px;}
.hero-stats .hs-item{flex:1; min-width:0; text-align:center;}
.hero-stats .hs-item b{display:block; font-family:var(--serif); font-size:24px; font-weight:700;
  background:linear-gradient(135deg, var(--gold-deep), var(--terracotta)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-stats .hs-item span{font-size:12.5px; color:var(--muted); font-weight:500;}
@media(max-width:560px){
  .hero-stats .hs-strip{gap:6px; padding:16px 10px; border-radius:12px;}
  .hero-stats .hs-item b{font-size:16px;}
  .hero-stats .hs-item span{font-size:9.5px; line-height:1.3; display:block;}
}