/* ===========================================================
   IMAGINE BLINDS & SHUTTERS — main.css
   Warm-wood editorial + liquid glass
   -----------------------------------------------------------
   CONTENTS  (search the CAPITALISED name to jump to a section)
     1. DESIGN TOKENS .... colours, fonts, glass variables (:root)
     2. BASE ............. reset, typography, helpers
     3. BUTTONS
     4. HEADER ........... fixed glass navbar
     5. HERO ............. split layout, glass panel, slat reveal
     6. MARQUEE .......... scrolling product strip
     7. SECTIONS ......... shared section + heading layout
     8. SERVICES ......... the four product cards
     9. PROCESS .......... 3-step "how it works"
    10. REVIEWS .......... glass review cards
    11. GALLERY TEASER ... homepage photo grid
    12. CTA BAND ........ orange call-to-action
    13. FOOTER .......... links + social icons
    14. GALLERY PAGE .... filter bar, masonry, lightbox
    15. MOBILE NAV
    16. REVEAL .......... scroll-in animation
   -----------------------------------------------------------
   COLOURS:  edit the values in section 1 to re-theme the whole
             site. Everything else references those variables.
   =========================================================== */
:root{
  --ink:        #17120D;
  --ink-2:      #221A12;
  --char:       #2C2218;
  --paper:      #F7F2E9;
  --paper-2:    #EDE3D2;
  --cream:      #FFFCF6;
  --slate:      #6E6358;

  /* punchier orange, used as a gradient for richness */
  --orange:     #FF5A1F;
  --orange-2:   #FF8242;
  --ember:      #E5371A;
  --grad-orange:linear-gradient(135deg,#FF8242 0%,#FF5A1F 45%,#E5371A 100%);

  --wood:       #C68B4E;
  --wood-2:     #E4C193;
  --gold:       #F0D3A2;

  --hair-d:     rgba(247,242,233,0.16);
  --hair-l:     rgba(23,18,13,0.13);

  /* liquid glass tokens */
  --glass:        rgba(255,255,255,0.09);
  --glass-strong: rgba(255,255,255,0.15);
  --glass-border: rgba(255,255,255,0.22);
  --glass-hi:     inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.10);
  --glass-shadow: 0 18px 50px rgba(10,6,3,0.40);
  --glass-light:        rgba(255,255,255,0.50);
  --glass-light-border: rgba(255,255,255,0.75);
  --blur: blur(22px) saturate(150%);

  --display:"Fraunces","Georgia",serif;
  --grotesk:"Space Grotesk","Arial",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",monospace;

  --container:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }

h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; line-height:1.04; letter-spacing:-0.015em; }

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--orange);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--orange); }

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

.slatmark{ display:inline-flex; flex-direction:column; gap:3px; width:22px; }
.slatmark i{ height:3px; background:var(--orange); border-radius:1px; display:block; }
.slatmark i:nth-child(2){ width:80%; }
.slatmark i:nth-child(3){ width:60%; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:8px;
  font-family:var(--grotesk); font-weight:600; font-size:15px; letter-spacing:0.01em;
  border:1.5px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s, color .3s;
}
.btn svg{ width:16px; height:16px; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background-image:var(--grad-orange); color:#fff; box-shadow:0 8px 24px rgba(255,90,31,0.34); }
.btn-primary:hover{ box-shadow:0 12px 32px rgba(255,90,31,0.46); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:#000; }
.btn-glass{
  background:var(--glass-strong); color:var(--cream);
  border-color:var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--glass-hi);
}
.btn-glass:hover{ background:rgba(255,255,255,0.22); border-color:var(--wood-2); }
.btn-ghost-l{ border-color:var(--hair-l); color:var(--ink); }
.btn-ghost-l:hover{ border-color:var(--ink); }

/* ============ HEADER (glass) ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0; transition:padding .35s var(--ease);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:12px; padding-bottom:12px; border-radius:16px;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
  border:1px solid transparent;
}
.site-header.is-scrolled{ padding:10px 0; }
.site-header.is-scrolled .container{
  background:rgba(23,18,13,0.55);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-color:var(--glass-border);
  box-shadow:var(--glass-hi), 0 12px 40px rgba(10,6,3,0.30);
  padding-left:22px; padding-right:14px;
}
.brand img{ height:34px; width:auto; transition:height .35s var(--ease); }
.site-header.is-scrolled .brand img{ height:28px; }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{ color:var(--paper); font-family:var(--grotesk); font-size:14.5px; font-weight:500; position:relative; padding:6px 0; }
.main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--orange); transition:right .28s var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }

.header-cta{ display:flex; align-items:center; gap:16px; }
.header-phone{ display:flex; flex-direction:column; align-items:flex-end; color:var(--paper); }
.header-phone small{ font-family:var(--mono); font-size:10px; color:var(--wood-2); letter-spacing:.12em; text-transform:uppercase; }
.header-phone strong{ font-family:var(--mono); font-size:16px; font-weight:500; }

.nav-toggle{ display:none; background:none; border:none; width:40px; height:40px; position:relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:9px; right:9px; height:2px; background:var(--paper); transition:.25s;
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

/* ============ HERO — full-bleed van background + glass ============ */
.hero{
  background:var(--ink); color:var(--paper);
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; position:relative; overflow:hidden;
}
/* the van photo, full-bleed */
.hero-bg{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:62% center; }
/* readability scrim: dark on the left where the copy sits, opening up to the
   sunset on the right; plus a soft bottom gradient under the glass panel */
.hero-overlay{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(23,18,13,0.94) 0%, rgba(23,18,13,0.78) 34%, rgba(23,18,13,0.30) 66%, rgba(23,18,13,0.10) 100%),
    linear-gradient(0deg, rgba(23,18,13,0.80) 0%, rgba(23,18,13,0.10) 42%, transparent 70%);
}
.hero-left{
  position:relative; z-index:3; width:100%; max-width:var(--container);
  margin:0 auto; padding:150px 32px 80px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-copy{ max-width:62%; }
.hero-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--wood-2); display:flex; align-items:center; gap:12px; margin-bottom:28px;
}
.js .hero-eyebrow{ opacity:0; }
.hero-eyebrow::before{ content:""; width:28px; height:2px; background:var(--orange); }

.hero h1{ font-size:clamp(2.6rem, 4.8vw, 4.4rem); line-height:1.05; max-width:20ch; text-shadow:0 2px 30px rgba(0,0,0,0.35); }
.h1-break{ display:block; }
.js .hero h1{ opacity:0; }
.hero h1 .accent{ font-style:italic; color:var(--wood-2); }
.hero h1 .mark{
  background:var(--grad-orange); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-sub{ margin-top:26px; max-width:46ch; font-size:18px; color:var(--paper-2); text-shadow:0 1px 16px rgba(0,0,0,0.4); }
.js .hero-sub{ opacity:0; }
.hero-actions{ margin-top:36px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.js .hero-actions{ opacity:0; }
.hero-actions .btn-primary{ font-size:16px; padding:17px 30px; }
.hero-call-note{ font-family:var(--mono); font-size:12.5px; color:var(--wood-2); }

/* glass stat panel */
.hero-glass{
  margin-top:48px; display:inline-flex; gap:8px; padding:8px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--glass-hi), var(--glass-shadow); width:fit-content;
}
.js .hero-glass{ opacity:0; }
.hero-glass .m{ padding:14px 22px; border-radius:11px; transition:background .3s; }
.hero-glass .m + .m{ position:relative; }
.hero-glass .m + .m::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--glass-border); }
.hero-glass .m strong{ display:block; font-family:var(--display); font-size:1.7rem; color:var(--cream); line-height:1; }
.hero-glass .m span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--wood-2); margin-top:6px; display:block; }

/* reveal: JS hides these via .js, then adds .is-revealed to animate them in */
.js .hero.is-revealed .hero-eyebrow{ animation:rise .8s var(--ease) .10s forwards; }
.js .hero.is-revealed h1{ animation:rise .9s var(--ease) .18s forwards; }
.js .hero.is-revealed .hero-sub{ animation:rise .9s var(--ease) .30s forwards; }
.js .hero.is-revealed .hero-actions{ animation:rise .9s var(--ease) .42s forwards; }
.js .hero.is-revealed .hero-glass{ animation:rise .9s var(--ease) .54s forwards; }
@keyframes rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

/* Failsafe: if the JS reveal never runs, force the copy visible after 3s.
   When .is-revealed IS present, the higher-specificity rise rules above win. */
.js .hero-eyebrow,
.js .hero h1,
.js .hero-sub,
.js .hero-actions,
.js .hero-glass{ animation:rise .6s var(--ease) 3s forwards; }

.shutter-rig{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; pointer-events:none; }
.shutter-rig .slat{ flex:1; background:var(--char); transform-origin:left center; border-bottom:1px solid rgba(0,0,0,.4); }

/* floating glass review pill on the image */
.hero-review-pill{
  position:absolute; right:28px; top:120px; z-index:6;
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:14px;
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--glass-hi), var(--glass-shadow); color:var(--cream);
}
.hero-review-pill .stars{ color:#FFC24B; font-size:14px; letter-spacing:1px; }
.hero-review-pill .rp-num{ font-family:var(--display); font-size:1.2rem; line-height:1; }
.hero-review-pill .rp-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--wood-2); }

.hero-badge{
  position:absolute; right:28px; bottom:28px; z-index:6;
  background:var(--glass-strong); color:var(--cream); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--glass-hi);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 16px; border-radius:12px; display:flex; align-items:center; gap:8px;
}

@media (max-width:980px){
  .hero{ min-height:92vh; min-height:92svh; }
  .hero-bg img{ object-position:60% center; }
  .hero-left{ padding:130px 28px 56px; justify-content:flex-end; }
  .hero-copy{ max-width:100%; }
  .hero h1{ max-width:18ch; }
  .hero-review-pill{ top:96px; right:18px; }
  .hero-overlay{
    background:
      linear-gradient(0deg, rgba(23,18,13,0.92) 0%, rgba(23,18,13,0.55) 38%, rgba(23,18,13,0.25) 70%),
      linear-gradient(90deg, rgba(23,18,13,0.55), rgba(23,18,13,0.2));
  }
}

/* ============ MARQUEE ============ */
.marquee{ background:var(--ink-2); border-top:1px solid var(--hair-d); border-bottom:1px solid var(--hair-d); overflow:hidden; }
.marquee-track{ display:flex; gap:48px; padding:18px 0; white-space:nowrap; font-family:var(--display); font-style:italic; font-size:20px; color:var(--paper-2); width:max-content; animation:slide 32s linear infinite; }
.marquee-track span{ display:inline-flex; align-items:center; gap:48px; }
.marquee-track span::after{ content:"✦"; color:var(--orange); font-style:normal; font-size:13px; }
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ============ SECTIONS ============ */
section{ padding:128px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:68px; flex-wrap:wrap; }
.section-head .sh-left{ max-width:60%; }
.section-head h2{ font-size:clamp(2.1rem,3.8vw,3.4rem); margin-top:18px; max-width:18ch; }
.section-head p{ max-width:40ch; color:var(--slate); font-size:16.5px; margin:0; }

/* ============ SERVICES — interactive product showroom ============ */
.services{ background:var(--paper); }
.products{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:22px; align-items:stretch; }

/* "Imagine" brand word in product titles */
.ib{ color:var(--orange); font-style:normal; }

/* left: category tabs */
.products-tabs-wrap{ position:relative; }
.products-tabs{ display:flex; flex-direction:column; gap:10px; }
/* scroll hint (mobile only — hidden on desktop where tabs stack vertically) */
.ptabs-more{ display:none; }
.ptab{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  text-align:left; padding:20px 22px; border-radius:16px;
  background:var(--cream); border:1px solid var(--hair-l);
  transition:transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s;
}
.ptab:hover{ transform:translateX(4px); border-color:var(--wood); }
.ptab-num{ font-family:var(--mono); font-size:12px; color:var(--slate); letter-spacing:.05em; transition:color .35s; }
.ptab-text{ display:flex; flex-direction:column; gap:2px; }
.ptab-text strong{ font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--ink); line-height:1.05; letter-spacing:-0.02em; }
.ptab-text small{ font-family:var(--grotesk); font-size:13px; color:var(--slate); }
.ptab-arrow{ width:18px; height:18px; color:var(--wood); opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .35s; }
.ptab.is-active{ background:var(--ink); border-color:var(--ink); box-shadow:0 18px 40px rgba(23,18,13,0.22); }
.ptab.is-active .ptab-num{ color:var(--orange); }
.ptab.is-active .ptab-text strong{ color:var(--cream); }
.ptab.is-active .ptab-text small{ color:var(--wood-2); }
.ptab.is-active .ptab-arrow{ opacity:1; transform:translateX(0); color:var(--orange); }

/* right: image stage + style panel */
.products-stage{ position:relative; border-radius:20px; overflow:hidden; min-height:520px; background:var(--ink); box-shadow:var(--glass-shadow); }
.pstage-media{ position:absolute; inset:0; overflow:hidden; }
.pstage-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .7s var(--ease); }
.pstage-media img.is-active{ opacity:1; transform:scale(1); transition:opacity .7s var(--ease), transform 7s var(--ease); }
.pstage-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,18,13,0) 30%, rgba(23,18,13,0.55) 64%, rgba(23,18,13,0.92) 100%); }
/* shutter-slat reveal that sweeps when the product changes */
.pstage-slats{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; pointer-events:none; opacity:0; }
.pstage-slats i{ flex:1; background:var(--ink); transform-origin:center top; transform:scaleY(0); }
.pstage-slats.is-sweeping{ opacity:1; }
.pstage-slats.is-sweeping i{ animation:slatSweep .62s var(--ease) forwards; }
@keyframes slatSweep{ 0%{ transform:scaleY(0); } 45%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }

.pstage-panel{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:34px 36px; color:var(--cream); }
.pstage-panel[hidden]{ display:none; }
.pstage-panel h3{ font-size:2rem; color:var(--cream); margin-bottom:10px; }
.pstage-panel > p{ color:var(--paper-2); font-size:15.5px; max-width:52ch; margin:0 0 18px; }
.ptypes{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.ptypes li{
  font-family:var(--grotesk); font-size:12.5px; color:var(--cream); letter-spacing:.01em;
  padding:7px 14px; border-radius:30px;
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
}
.pstage-panel .service-link{ font-family:var(--grotesk); color:var(--wood-2); font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; transition:color .25s; }
.pstage-panel .service-link svg{ width:15px; height:15px; transition:transform .25s; }
.pstage-panel .service-link:hover{ color:var(--orange); }
.pstage-panel .service-link:hover svg{ transform:translateX(5px); }
/* panel fades/rises in when its product becomes active */
.pstage-panel:not([hidden]){ animation:panelIn .6s var(--ease) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

@media (max-width:900px){
  .products{ grid-template-columns:1fr; gap:14px; }
  /* let the grid/flex items shrink to the column instead of their content width
     (min-width:auto would otherwise blow the stage out past the viewport) */
  .products-tabs-wrap, .products-stage{ min-width:0; }
  .products-tabs{ flex-direction:row; overflow-x:auto; gap:10px; padding-bottom:4px; -ms-overflow-style:none; scrollbar-width:none; scroll-behavior:smooth; }
  .products-tabs::-webkit-scrollbar{ display:none; }
  .ptab{ flex:0 0 auto; grid-template-columns:auto auto; padding:14px 18px; }
  .ptab .ptab-arrow{ display:none; }
  .ptab-text small{ display:none; }
  .ptab:hover{ transform:none; }
  .products-stage{ min-height:440px; }

  /* "there's more →" affordance: right-edge fade + a nudging chevron */
  .products-tabs-wrap::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:64px; z-index:2;
    background:linear-gradient(90deg, rgba(247,242,233,0) 0%, var(--paper) 78%); pointer-events:none; transition:opacity .35s; }
  .ptabs-more{ display:flex; position:absolute; right:8px; top:50%; z-index:3; width:36px; height:36px; border-radius:50%;
    align-items:center; justify-content:center; color:#fff; background-image:var(--grad-orange);
    box-shadow:0 8px 20px rgba(255,90,31,0.45); pointer-events:none;
    transform:translateY(-50%); animation:moreNudge 1.4s var(--ease) infinite; transition:opacity .35s; }
  .ptabs-more svg{ width:17px; height:17px; }
  /* fade the hint away once you've scrolled to the end */
  .products-tabs-wrap.at-end::after, .products-tabs-wrap.at-end .ptabs-more{ opacity:0; }
  @keyframes moreNudge{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(5px); } }
}
@media (max-width:600px){
  /* stack the stage on phones (image banner + panel below) so tall content
     like the 8 blind styles can never overflow or clip the heading */
  .products-stage{ min-height:0; display:flex; flex-direction:column; min-width:0; }
  .pstage-media{ position:relative; inset:auto; height:200px; flex:0 0 auto; min-width:0; }
  .pstage-panel{ min-width:0; }
  .pstage-media::after{ background:linear-gradient(180deg, rgba(23,18,13,0) 55%, rgba(23,18,13,0.55) 100%); }
  .pstage-panel{ position:relative; left:auto; right:auto; bottom:auto; padding:24px 22px 26px; }
  .pstage-panel h3{ font-size:1.7rem; }
}

/* homepage showroom → full products page */
.products-cta{ margin-top:46px; display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.products-cta-note{ font-family:var(--grotesk); font-size:14px; color:var(--slate); }
@media (max-width:540px){ .products-cta{ gap:14px; } .products-cta-note{ text-align:center; } }

/* ============ SHUTTER COLLECTIONS (image-topped cards) ============ */
.col-head{ text-align:center; max-width:60ch; margin:80px auto 34px; }
.col-head h3{ font-family:var(--display); font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--ink); margin-bottom:12px; }
.col-head p{ color:var(--slate); font-size:15.5px; margin:0; }
.col-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.col-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:var(--cream); border:1px solid var(--hair-l); box-shadow:0 12px 30px rgba(23,18,13,0.06); transition:transform .4s var(--ease), box-shadow .4s; }
.col-card:hover{ transform:translateY(-5px); box-shadow:0 24px 52px rgba(23,18,13,0.14); }
.col-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.col-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.col-card:hover .col-img img{ transform:scale(1.05); }
.col-content{ display:flex; flex-direction:column; flex:1; padding:26px 28px 30px; }
.col-tag{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--wood); }
.col-card h3{ font-family:var(--display); font-size:1.9rem; margin:10px 0; color:var(--ink); letter-spacing:-0.02em; }
.col-content > p{ color:var(--slate); font-size:14.5px; line-height:1.55; margin:0 0 22px; }
.col-spec{ margin-top:auto; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--hair-l); padding-top:18px; }
.col-spec li{ font-family:var(--grotesk); font-size:13.5px; color:var(--char); display:flex; align-items:center; gap:10px; }
.col-spec li::before{ content:""; width:6px; height:6px; border-radius:50%; background-image:var(--grad-orange); flex-shrink:0; }
/* featured (Hawaii) card in dark for emphasis */
.col-card.is-featured{ background:var(--ink); border-color:var(--ink); box-shadow:0 26px 54px rgba(23,18,13,0.26); }
.is-featured .col-tag{ color:var(--wood-2); }
.is-featured h3{ color:var(--cream); }
.is-featured .col-content > p{ color:var(--paper-2); }
.is-featured .col-spec{ border-color:var(--hair-d); }
.is-featured .col-spec li{ color:var(--paper-2); }
.col-badge{ position:absolute; top:14px; left:14px; z-index:2; background-image:var(--grad-orange); color:#fff; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:6px 13px; border-radius:20px; box-shadow:0 8px 20px rgba(255,90,31,0.42); }
.col-note{ text-align:center; margin:34px auto 0; color:var(--slate); font-size:15px; max-width:54ch; }
@media (max-width:820px){ .col-grid{ grid-template-columns:1fr; } }

/* ============ PRODUCTS PAGE ============ */
.products-hero{ background:var(--ink); color:var(--paper); padding:180px 0 84px; position:relative; overflow:hidden; }
.products-hero::before{ content:""; position:absolute; right:-8%; top:-10%; width:52%; height:130%; background:radial-gradient(circle, rgba(255,90,31,0.16), rgba(255,90,31,0) 70%); pointer-events:none; }
.products-hero .container{ position:relative; z-index:1; }
.products-hero h1{ font-size:clamp(2.6rem,5vw,4rem); max-width:16ch; margin-top:20px; }
.products-hero p{ color:var(--paper-2); max-width:56ch; margin-top:20px; font-size:17px; }
.prod-jump{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.prod-jump a{ font-family:var(--grotesk); font-weight:600; font-size:14px; color:var(--cream); padding:11px 22px; border-radius:30px;
  background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
  transition:background .3s, border-color .3s, transform .3s var(--ease); }
.prod-jump a:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-2px); }

.prod{ scroll-margin-top:88px; }
.prod-shutters{ background:var(--paper); }
.prod-blinds{ background:var(--paper-2); }
.prod-curtains{ background:var(--paper); }
.prod-awnings{ background:var(--paper-2); }

.prod-feature{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.prod-feature.reverse .prod-media{ order:2; }
.prod-media{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3.1; box-shadow:0 26px 60px rgba(23,18,13,0.2); }
.prod-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.prod-feature:hover .prod-media img{ transform:scale(1.03); }
.prod-media-tag{ position:absolute; top:16px; left:16px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--cream);
  background:var(--glass-strong); border:1px solid var(--glass-border); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi); padding:8px 14px; border-radius:20px; }
.prod-body h2{ font-size:clamp(2rem,3.4vw,3rem); margin:16px 0 18px; max-width:16ch; }
.prod-body > p{ color:var(--char); font-size:16.5px; line-height:1.6; max-width:52ch; margin:0 0 24px; }
.prod-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.prod-chips li{ font-family:var(--grotesk); font-size:13px; color:var(--char); padding:9px 16px; border-radius:30px; background:var(--cream); border:1px solid var(--hair-l); }

/* blind types grid */
.bt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px; }
.bt{ padding:24px 22px; border-radius:16px; background:var(--cream); border:1px solid var(--hair-l); transition:transform .35s var(--ease), box-shadow .35s; }
.bt:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(23,18,13,0.1); }
.bt strong{ display:block; font-family:var(--display); font-size:1.18rem; color:var(--ink); margin-bottom:8px; letter-spacing:-0.01em; }
.bt span{ font-family:var(--grotesk); font-size:13px; color:var(--slate); line-height:1.5; }

@media (max-width:900px){
  .prod-feature{ grid-template-columns:1fr; gap:30px; }
  .prod-feature.reverse .prod-media{ order:0; }
  .prod-media{ aspect-ratio:16/10; }
  .bt-grid{ grid-template-columns:repeat(2,1fr); margin-top:40px; }
  .col-head{ margin-top:52px; }
}
@media (max-width:540px){
  .products-hero{ padding:150px 0 60px; }
  .bt-grid{ grid-template-columns:1fr; }
  .prod-body h2{ max-width:100%; }
}

/* ============ PROCESS ============ */
.process{ background:var(--char); color:var(--paper); position:relative; overflow:hidden; }
.process::before{ content:""; position:absolute; right:-10%; top:-20%; width:60%; height:80%; background:radial-gradient(circle, rgba(255,90,31,0.12), rgba(255,90,31,0) 70%); pointer-events:none; }
.process .container{ position:relative; z-index:1; }
.process .section-head h2{ color:var(--paper); }
.process .section-head p{ color:var(--wood-2); }
/* interactive stepper: click through, revealed by shutters opening */
.stepper{ }
.step-bar{ display:flex; gap:12px; margin-bottom:22px; }
.step-pip{ flex:1; display:flex; align-items:center; gap:12px; text-align:left; padding:16px 20px; border-radius:14px;
  background:transparent; border:1px solid var(--hair-d); color:var(--paper-2);
  transition:background .35s var(--ease), border-color .35s, color .35s; }
.step-pip b{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--wood-2); transition:color .35s; }
.step-pip span{ font-family:var(--grotesk); font-size:14.5px; font-weight:500; }
/* step icon chip — always white so the shape reads at a glance */
.step-ico{ flex-shrink:0; width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#fff;
  transition:background .35s var(--ease), border-color .35s, transform .35s var(--ease); }
.step-ico svg{ width:20px; height:20px; }
.step-pip:hover .step-ico{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.28); }
.step-pip:hover{ border-color:var(--wood); color:var(--cream); }
.step-pip.is-active{ background:var(--glass); border-color:var(--glass-border); color:var(--cream);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi); }
.step-pip.is-active b{ color:var(--orange); }
.step-pip.is-active .step-ico{ background:var(--grad-orange); border-color:transparent; box-shadow:0 6px 18px rgba(255,90,31,0.4); transform:scale(1.03); }

.step-stage{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/8.4; background:var(--ink);
  box-shadow:var(--glass-shadow); perspective:1300px; }
.step-slides{ position:absolute; inset:0; }
.step-slide{ position:absolute; inset:0; opacity:0; transition:opacity .3s var(--ease); }
.step-slide.is-active{ opacity:1; }
.step-slide img{ width:100%; height:100%; object-fit:cover; }
.step-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,18,13,0) 34%, rgba(23,18,13,0.55) 62%, rgba(23,18,13,0.93) 100%); }
.step-caption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:38px 40px; }
.step-caption .step-idx{ font-family:var(--mono); color:var(--orange); font-size:12px; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:12px; }
.step-caption h3{ font-size:2rem; color:var(--cream); margin-bottom:10px; }
.step-caption p{ color:var(--paper-2); font-size:15.5px; margin:0; max-width:46ch; line-height:1.55; }

/* shutter louvres that close over the stage, then open to reveal the next step */
.step-shutter{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; pointer-events:none; }
.step-shutter i{ flex:1; transform-origin:center; opacity:0; transform:rotateX(80deg);
  background:linear-gradient(180deg, #EAD1A8 0%, #CE9E63 52%, #9C6A34 100%);
  border-top:1px solid rgba(255,255,255,0.22);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,0.30), inset 0 2px 3px rgba(255,255,255,0.28);
  transition:transform .5s var(--ease), opacity .42s var(--ease); }
.step-shutter.is-closed i{ opacity:1; transform:rotateX(0deg); }

/* progress bar that fills as you advance — a sense of getting somewhere */
.step-progress{ height:3px; border-radius:3px; background:var(--hair-d); margin:16px 2px 24px; overflow:hidden; }
.step-progress span{ display:block; height:100%; width:33.33%; border-radius:3px; background-image:var(--grad-orange); transition:width .6s var(--ease); }

.step-nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:24px; }
.step-prev, .step-next{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:30px;
  font-family:var(--grotesk); font-weight:600; font-size:14px;
  transition:background .3s, border-color .3s, transform .3s var(--ease), opacity .3s, box-shadow .3s; }
.step-prev svg, .step-next svg{ width:16px; height:16px; }
/* Back: quiet glass */
.step-prev{ color:var(--cream); background:var(--glass-strong); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi); }
.step-prev:hover{ background:rgba(255,255,255,0.2); border-color:var(--wood-2); transform:translateY(-2px); }
.step-prev:disabled{ opacity:.32; cursor:default; transform:none; background:var(--glass); }
/* Next: inviting orange with a gently nudging arrow */
.step-next{ color:#fff; background-image:var(--grad-orange); border:1px solid transparent; box-shadow:0 10px 26px rgba(255,90,31,0.38); }
.step-next:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,90,31,0.5); }
.step-next svg{ animation:nudge 1.5s var(--ease) infinite; }
.step-next:hover svg{ animation:none; }
/* Final CTA: switch to a warm cream pill — distinct 'goal' colour, not another orange */
.step-next.is-cta{
  background-image:none !important; background-color:var(--cream); color:var(--ink);
  border-color:var(--wood-2);
  box-shadow:0 14px 34px rgba(23,18,13,0.35), 0 0 0 4px rgba(240,211,162,0.18);
  padding:13px 26px 13px 22px;
  animation:ctaPulse 2.6s var(--ease) infinite;
}
.step-next.is-cta::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background-image:var(--grad-orange); box-shadow:0 0 12px rgba(255,90,31,0.7);
  flex-shrink:0;
}
.step-next.is-cta:hover{ background-color:#fff; border-color:var(--orange); }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 14px 34px rgba(23,18,13,0.35), 0 0 0 4px rgba(240,211,162,0.18); }
  50%   { box-shadow:0 16px 40px rgba(23,18,13,0.42), 0 0 0 7px rgba(240,211,162,0.28); }
}
.step-count{ font-family:var(--mono); font-size:13px; color:var(--paper-2); min-width:56px; text-align:center; }
.step-count b{ color:var(--cream); font-weight:500; }
.step-count i{ color:var(--slate); font-style:normal; }
@media (max-width:520px){
  .step-nav{ gap:12px; }
  .step-count{ display:none; }
  .step-prev, .step-next{ padding:12px 18px; font-size:13px; }
  .step-next .sn-label{ max-width:56vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (max-width:820px){
  .step-bar{ flex-direction:column; gap:8px; }
  .step-pip{ padding:13px 16px; }
  .step-stage{ aspect-ratio:4/3.4; }
  .step-caption{ padding:24px; }
  .step-caption h3{ font-size:1.5rem; }
}

/* ============ STATEMENT — sunlight through the slats ============ */
.statement{ position:relative; overflow:hidden; background:var(--ink-2); color:var(--cream); text-align:center; }
.statement .container{ position:relative; z-index:2; }
/* warm light raking across like sun through plantation shutters */
.statement-light{ position:absolute; inset:-25% -15%; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:repeating-linear-gradient(108deg,
    transparent 0 42px,
    rgba(255,178,92,0.05) 42px 50px,
    rgba(255,138,58,0.10) 50px 58px,
    rgba(255,178,92,0.05) 58px 66px,
    transparent 66px 104px);
  animation:lightRake 16s ease-in-out infinite alternate;
}
.statement::after{ content:""; position:absolute; right:-10%; top:-40%; width:55%; height:160%; z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(255,90,31,0.14), rgba(255,90,31,0) 70%); }
@keyframes lightRake{ from{ transform:translateX(-5%); } to{ transform:translateX(5%); } }
.statement-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--wood-2); display:inline-block; margin-bottom:24px; }
.statement-line{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.18; letter-spacing:-0.015em; color:var(--paper); max-width:20ch; margin:0 auto; }
.statement-line .mark{ background:var(--grad-orange); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }

/* ============ ABOUT — the people behind it ============ */
.about{ background:var(--paper-2); position:relative; overflow:hidden; }
.about::before{ content:""; position:absolute; left:-8%; bottom:-20%; width:46%; height:80%; background:radial-gradient(circle, rgba(198,139,78,0.15), rgba(198,139,78,0) 72%); pointer-events:none; }
.about .container{ position:relative; z-index:1; }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-media{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/4.6; box-shadow:0 30px 70px rgba(23,18,13,0.28); }
/* pinned to the bottom so their faces are never cropped — only the sky up top is trimmed */
.about-media img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.about-media-tag{
  position:absolute; left:18px; top:18px; z-index:2;
  display:flex; align-items:center; gap:10px;
  background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--cream);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 16px; border-radius:12px;
}
.about-copy h2{ font-size:clamp(2rem,3.4vw,3rem); margin:18px 0 22px; max-width:16ch; }
.about-copy > p{ color:var(--char); font-size:16.5px; max-width:52ch; margin:0 0 18px; }
.about-points{ display:flex; gap:14px; flex-wrap:wrap; margin:26px 0; }
.about-points .ap{ flex:1; min-width:200px; padding:18px 20px; border-radius:14px; background:var(--cream); border:1px solid var(--hair-l); box-shadow:0 10px 30px rgba(23,18,13,0.06); }
.about-points .ap strong{ display:block; font-family:var(--grotesk); font-size:15px; color:var(--ink); margin-bottom:4px; }
.about-points .ap span{ font-size:13px; color:var(--slate); font-family:var(--grotesk); }
.about-sign{ font-family:var(--display); font-style:italic; font-size:1.25rem; color:var(--wood); margin:0; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:40px; } .about-media{ aspect-ratio:4/4; max-width:440px; } }

/* ============ REVIEWS (glass cards) ============ */
.reviews{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; }
.reviews::before{ content:""; position:absolute; left:-12%; top:8%; width:55%; height:70%; background:radial-gradient(circle, rgba(255,90,31,0.17), rgba(255,90,31,0) 70%); pointer-events:none; }
.reviews::after{ content:""; position:absolute; right:-12%; bottom:0; width:50%; height:70%; background:radial-gradient(circle, rgba(198,139,78,0.15), rgba(198,139,78,0) 72%); pointer-events:none; }
.reviews .container{ position:relative; z-index:1; }
.reviews .section-head h2{ color:var(--paper); }
.reviews .section-head p{ color:var(--wood-2); }
.reviews-rating{
  display:inline-flex; align-items:center; gap:16px; margin-top:18px;
  padding:14px 20px; border-radius:14px;
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
}
.reviews-rating .rr-stars{ color:#FFC24B; font-size:18px; letter-spacing:2px; }
.reviews-rating .rr-text{ font-family:var(--grotesk); font-size:13.5px; color:var(--paper-2); }
.reviews-rating .rr-text b{ color:var(--cream); }
/* --- carousel --- */
.reviews-carousel{ position:relative; margin:8px 0 44px; }
/* viewport scrolls horizontally with snap; scrollbar hidden; edges feathered */
.rc-viewport{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  padding:14px max(32px, calc((100vw - var(--container))/2 + 32px)) 26px;
  cursor:grab; outline:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.rc-viewport.is-dragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.rc-viewport.is-dragging .review-card{ cursor:grabbing; }
.rc-viewport::-webkit-scrollbar{ display:none; }
.rc-viewport{ scrollbar-width:none; -ms-overflow-style:none; }
.rc-track{ display:flex; gap:20px; width:max-content; }
.rc-viewport:focus-visible{ box-shadow:inset 0 0 0 2px var(--orange); border-radius:18px; }

.review-card{
  flex:0 0 380px; max-width:82vw;
  padding:32px; border-radius:18px; min-height:300px;
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--glass-hi), var(--glass-shadow);
  display:flex; flex-direction:column; gap:16px;
  transition:transform .45s var(--ease), background .45s, border-color .45s, box-shadow .45s;
}
.review-card:hover{ transform:translateY(-6px); background:var(--glass-strong); border-color:var(--wood-2); }
.review-card .rc-stars{ color:#FFC24B; font-size:15px; letter-spacing:1.5px; }
.review-card p{ font-family:var(--display); font-size:1.16rem; line-height:1.48; color:var(--cream); margin:0; }
.review-card .rc-author{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.review-card .rc-avatar{ width:42px; height:42px; border-radius:50%; background-image:var(--grad-orange); display:flex; align-items:center; justify-content:center; font-family:var(--grotesk); font-weight:600; color:#fff; font-size:15px; box-shadow:0 6px 16px rgba(255,90,31,0.4); }
.review-card .rc-meta strong{ display:block; font-family:var(--grotesk); font-size:14px; color:var(--cream); }
.review-card .rc-meta span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--wood-2); }

/* controls: arrows + dots */
.rc-controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:6px; }
.rc-arrow{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--cream);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
  transition:transform .3s var(--ease), background .3s, border-color .3s, opacity .3s;
}
.rc-arrow svg{ width:20px; height:20px; }
.rc-arrow:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-2px); }
.rc-arrow:disabled{ opacity:.32; cursor:default; transform:none; background:var(--glass); }
.rc-dots{ display:flex; align-items:center; gap:9px; }
.rc-dots button{
  width:9px; height:9px; border-radius:50%; padding:0; border:none;
  background:rgba(255,255,255,0.28); transition:transform .3s var(--ease), background .3s, width .3s;
}
.rc-dots button:hover{ background:rgba(255,255,255,0.55); }
.rc-dots button.is-active{ width:26px; border-radius:5px; background-image:var(--grad-orange); }

.reviews-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:8px; }
@media (max-width:560px){
  .review-card{ flex-basis:300px; padding:26px; min-height:270px; }
  .rc-viewport{ padding-left:24px; padding-right:24px; }
}

/* ============ GALLERY TEASER ============ */
.gallery-teaser{ background:var(--paper-2); }
.teaser-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:218px; gap:14px; }
.tz{ position:relative; overflow:hidden; border-radius:16px; background:var(--ink); }
.tz img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.tz::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,18,13,0) 42%, rgba(23,18,13,0.72) 100%); transition:opacity .4s; }
.tz:hover img{ transform:scale(1.06); }
.tz-feat{ grid-column:span 2; grid-row:span 2; }
.tz-wide{ grid-column:span 2; }
.tz-band{ grid-column:span 4; }
/* persistent glass category chip */
.tz-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--cream);
  background:var(--glass-strong); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
  padding:6px 12px; border-radius:20px;
}
/* caption slides up on hover */
.tz-cap{
  position:absolute; left:16px; bottom:16px; z-index:2;
  font-family:var(--display); font-size:1.05rem; color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.5);
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.tz:hover .tz-cap{ opacity:1; transform:translateY(0); }
.tz-feat .tz-cap{ opacity:1; transform:none; font-size:1.4rem; }
.teaser-cta{ margin-top:40px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.teaser-count{ font-family:var(--grotesk); font-size:15px; color:var(--slate); }
.teaser-count strong{ font-family:var(--display); font-size:1.3rem; color:var(--ink); margin-right:4px; }
@media (max-width:820px){
  .teaser-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .tz-feat{ grid-column:span 2; grid-row:span 2; }
  .tz-wide, .tz-band{ grid-column:span 2; }
}
@media (max-width:520px){
  .teaser-grid{ grid-auto-rows:150px; }
  .tz-feat{ grid-row:span 2; }
  .tz-cap{ opacity:1; transform:none; }
}

/* ============ CTA BAND ============ */
.cta-band{ position:relative; overflow:hidden; background:var(--ink); color:var(--cream); }
.cta-band::before{ content:""; position:absolute; top:0;left:0;right:0;bottom:0; background-image:var(--grad-orange); opacity:1; }
.cta-band::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:46%; background-image:repeating-linear-gradient(180deg, rgba(255,255,255,0.08) 0 4px, transparent 4px 34px); pointer-events:none; }
.cta-band .container{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(2rem,3.8vw,3rem); max-width:15ch; color:#fff; }
.cta-glass{
  display:flex; align-items:center; gap:24px; padding:18px 24px; border-radius:16px;
  background:var(--glass-strong); border:1px solid rgba(255,255,255,0.4);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
}
.cta-phone-block{ display:flex; flex-direction:column; gap:4px; }
.cta-phone-block small{ font-family:var(--mono); color:rgba(255,255,255,.85); text-transform:uppercase; letter-spacing:.12em; font-size:11px; }
.cta-phone-block .big-phone{ font-family:var(--mono); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:500; color:#fff; }
.cta-band .btn-dark{ background:var(--ink); }
.cta-band .btn-dark:hover{ background:#000; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--ink-2); color:var(--paper-2); padding-top:88px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; padding-bottom:64px; border-bottom:1px solid var(--hair-d); }
.footer-brand img{ height:32px; margin-bottom:20px; }
.footer-brand p{ max-width:34ch; color:var(--slate); font-size:14.5px; }
.footer-socials{ display:flex; gap:12px; margin-top:22px; }
.footer-socials a{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--glass-hi);
  color:var(--paper); transition:transform .3s var(--ease), background .3s, color .3s;
}
.footer-socials a:hover{ transform:translateY(-3px); background:var(--glass-strong); color:var(--orange); }
.footer-socials svg{ width:19px; height:19px; }
.footer-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--wood-2); margin-bottom:20px; font-weight:500; }
.footer-col li{ margin-bottom:12px; font-size:14.5px; font-family:var(--grotesk); }
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:28px 0; font-size:13px; color:var(--slate); flex-wrap:wrap; gap:10px; font-family:var(--mono); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ============ GALLERY PAGE ============ */
.gallery-hero{ background:var(--ink); color:var(--paper); padding:180px 0 76px; position:relative; overflow:hidden; }
.gallery-hero::before{ content:""; position:absolute; right:-8%; top:-10%; width:50%; height:120%; background:radial-gradient(circle, rgba(255,90,31,0.16), rgba(255,90,31,0) 70%); pointer-events:none; }
.gallery-hero .container{ position:relative; z-index:1; }
.gallery-hero h1{ font-size:clamp(2.6rem,5vw,4rem); max-width:18ch; margin-top:20px; }
.gallery-hero p{ color:var(--paper-2); max-width:52ch; margin-top:20px; font-size:17px; }

.filter-bar{ position:sticky; top:14px; z-index:50; }
.filter-bar .container{
  display:flex; gap:10px; flex-wrap:wrap; padding:14px 18px; align-items:center;
  background:var(--glass-light); border:1px solid var(--glass-light-border); border-radius:16px;
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:0 10px 30px rgba(23,18,13,0.10);
}
.filter-bar .fb-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-right:8px; }
.filter-btn{ background:rgba(255,255,255,0.4); border:1.5px solid var(--hair-l); color:var(--slate); padding:9px 18px; border-radius:30px; font-family:var(--grotesk); font-size:13.5px; font-weight:500; transition:.25s; }
.filter-btn:hover{ border-color:var(--orange); color:var(--ink); }
.filter-btn.active{ background:var(--ink); border-color:var(--ink); color:var(--cream); }

.masonry-wrap{ margin-top:-30px; }
.masonry{ padding:54px 0 128px; columns:4 280px; column-gap:16px; }
.masonry-item{ break-inside:avoid; margin-bottom:16px; position:relative; overflow:hidden; border-radius:14px; cursor:zoom-in; }
.masonry-item img{ width:100%; transition:transform .55s var(--ease); }
.masonry-item::after{ content:""; position:absolute; top:0;left:0;right:0;bottom:0; background:linear-gradient(180deg,transparent 55%, rgba(23,18,13,.5)); opacity:0; transition:.3s; }
.masonry-item:hover img{ transform:scale(1.05); }
.masonry-item:hover::after{ opacity:1; }
.masonry-item .tag{ position:absolute; left:12px; bottom:12px; z-index:2; background:var(--glass-strong); border:1px solid var(--glass-border); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); color:var(--cream); font-family:var(--mono); font-size:10.5px; padding:6px 12px; border-radius:20px; letter-spacing:.05em; opacity:0; transform:translateY(8px); transition:.3s; box-shadow:var(--glass-hi); }
.masonry-item:hover .tag{ opacity:1; transform:translateY(0); }
.masonry-item.hide{ display:none; }
@media (max-width:820px){ .masonry{ columns:2 180px; } }

.lightbox{ position:fixed; top:0;left:0;right:0;bottom:0; z-index:300; background:rgba(23,18,13,0.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox figure{ margin:0; max-width:88vw; max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox img{ max-width:88vw; max-height:78vh; object-fit:contain; border-radius:10px; }
.lightbox figcaption{ font-family:var(--mono); font-size:12px; color:var(--wood-2); letter-spacing:.05em; }
.lightbox-close,.lightbox-prev,.lightbox-next{ position:absolute; background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); color:var(--paper); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; transition:.25s; box-shadow:var(--glass-hi); }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{ border-color:var(--orange); color:var(--orange); }
.lightbox-close{ top:28px; right:28px; }
.lightbox-prev{ left:28px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:28px; top:50%; transform:translateY(-50%); }

/* ============ MOBILE NAV ============ */
@media (max-width:920px){
  /* the scrolled header's backdrop-filter creates a containing block that traps
     the fixed menu inside it — drop the blur on mobile so the drawer fills the
     viewport. (Use a solid-ish header background instead.) */
  .site-header.is-scrolled .container{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(23,18,13,0.92); }
  /* near-opaque drawer so page content never bleeds through when scrolled */
  .main-nav{ position:fixed; top:0; right:0; bottom:0; width:min(84vw,340px); background:rgba(20,14,9,0.98);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    flex-direction:column; align-items:flex-start; padding:104px 32px 40px; gap:2px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    border-left:1px solid var(--glass-border); box-shadow:-24px 0 70px rgba(0,0,0,0.55); overflow-y:auto; }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ font-size:19px; padding:16px 0; width:100%; border-bottom:1px solid var(--hair-d); font-family:var(--display); }
  .header-phone small{ display:none; }
  .nav-toggle{ display:block; }
}

/* ============ MOBILE POLISH ============ */
@media (max-width:760px){
  /* floating hero decorations overlap the header on small screens — drop them
     (the rating already lives in the stat panel and the reviews section) */
  .hero-review-pill, .hero-badge{ display:none; }
  /* declutter the top bar: the Call now button covers the phone anyway */
  .header-phone{ display:none; }
  .header-cta{ gap:10px; }
  .site-header{ padding:12px 0; }
  .site-header .container{ padding-left:16px; padding-right:12px; }
}
@media (max-width:640px){
  /* tighter, more deliberate vertical rhythm than the desktop 128px */
  section{ padding:74px 0; }
  .container{ padding:0 20px; }
  .section-head{ margin-bottom:36px; gap:14px; }
  .section-head .sh-left{ max-width:100%; }
  .section-head h2{ margin-top:12px; }
  .hero-left{ padding:120px 22px 48px; }
  .hero h1{ font-size:clamp(2.4rem,10vw,3rem); }
  .hero-sub{ font-size:16.5px; }
  /* stat panel: let it use the full width and space evenly */
  .hero-glass{ width:100%; justify-content:space-between; gap:2px; }
  .hero-glass .m{ padding:12px 10px; flex:1; text-align:center; }
  .hero-glass .m + .m::before{ display:none; }
  .hero-actions{ gap:12px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-call-note{ width:100%; text-align:center; }

  /* stronger scrim so overlaid captions stay readable over bright photos */
  .pstage-media::after{ background:linear-gradient(180deg, rgba(23,18,13,0.22) 0%, rgba(23,18,13,0.58) 44%, rgba(23,18,13,0.95) 100%); }
  .step-slide::after{ background:linear-gradient(180deg, rgba(23,18,13,0.22) 0%, rgba(23,18,13,0.58) 44%, rgba(23,18,13,0.95) 100%); }
  .pstage-panel{ padding:22px 22px 26px; }
  .step-caption{ padding:22px 22px 26px; }

  /* CTA band: stack the phone + button cleanly instead of squashing side-by-side */
  .cta-band .container{ gap:22px; }
  .cta-glass{ flex-direction:column; align-items:stretch; width:100%; gap:14px; text-align:center; padding:20px; }
  .cta-glass .cta-phone-block{ align-items:center; }
  .cta-band .btn-dark{ justify-content:center; width:100%; }

  /* decorative background glows create faint circular-edge seams on narrow
     screens — drop them on phones; the flat dark sections look clean */
  .reviews::before, .reviews::after,
  .process::before,
  .about::before,
  .statement::after, .statement-light,
  .gallery-hero::before,
  .products-hero::before{ display:none; }
}

/* ============ SCROLL CUE (blind pull-cord) ============ */
.scroll-cue{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 10px; background:none; border:none; cursor:pointer;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.scroll-cue.is-hidden{ opacity:0; pointer-events:none; transform:translateY(12px); }
/* a longer cord so it reads as a blind pull hanging by the window edge */
.sc-cord{ width:2px; height:30px; border-radius:2px; background:linear-gradient(180deg, rgba(255,90,31,0) 0%, var(--orange) 100%); }
.sc-bead{
  width:11px; height:11px; border-radius:50%; background-image:var(--grad-orange);
  box-shadow:0 0 0 5px rgba(255,90,31,0.14), 0 5px 14px rgba(255,90,31,0.55);
  animation:cordBob 1.9s var(--ease) infinite;
}
.sc-chev{ width:15px; height:15px; color:var(--orange); margin-top:1px; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3)); animation:cordBob 1.9s var(--ease) infinite; animation-delay:.09s; }
@keyframes cordBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ============ REVEAL ============ */
.reveal{ transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(30px); }
.reveal.is-in{ opacity:1; transform:translateY(0); }