/* =========================================================
   E-Sleep — Italian Mattress & Sofa's, Yelahanka, Bengaluru
   Design system

   Palette from the E-Sleep brand board:
     Dark Slate #0B1C23 · Dark Indigo Blue #223551 · Midnight Indigo #1C244C
     Quiet Bay #5C94CB · Frosty Riverbed #8CA4C7
   plus the logo's gold bar #EDCF62 for primary calls to action.
   ========================================================= */

:root{
  /* --- brand --- */
  --primary:#1C244C;          /* Midnight Indigo — header, buttons, heroes */
  --primary-deep:#0B1C23;     /* Dark Slate — footer, deepest ground */
  --primary-tint:#223551;     /* Dark Indigo Blue — labels, panels */
  --primary-soft:#8CA4C7;     /* Frosty Riverbed */
  --accent:#5C94CB;           /* Quiet Bay — rules, icons, active states */
  --accent-ink:#3B70A8;       /* Quiet Bay, deepened for small text on light */
  --accent-deep:#4A7FB5;
  --gold:#EDCF62;             /* logo bar — primary CTA */
  --gold-deep:#E1BD3F;
  --on-dark:#EDCF62;          /* eyebrows over photography / indigo */

  /* --- surfaces --- */
  --page:#F6F8FB;             /* misty off-white */
  --card:#ffffff;
  --sand:#E9EEF5;             /* Frosty Riverbed tint panel */
  --divider:#E1E7F0;

  /* --- ink --- */
  --ink:#0B1C23;
  --ink-head:#0B1C23;
  --ink-soft:#3A4A63;
  --ink-faint:#66758E;

  --line:rgba(28,36,76,.14);
  --line-soft:rgba(28,36,76,.07);

  --wa:#25D366;
  --wa-deep:#128C7E;

  --serif:"Cormorant Garamond","Georgia",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --maxw:1480px;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:10px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--accent);color:#fff;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.05;color:var(--ink-head);}
.display{font-size:clamp(42px,7.6vw,116px);font-weight:600;line-height:.98;letter-spacing:-.02em;}
.h1{font-size:clamp(36px,5.4vw,76px);letter-spacing:-.015em;}
.h2{font-size:clamp(29px,4vw,54px);letter-spacing:-.012em;}
.h3{font-size:clamp(23px,2.8vw,36px);letter-spacing:-.008em;}
.serif-i{font-style:italic;color:var(--accent-ink);}
.hero .serif-i,.bespoke .serif-i,.howwork .serif-i,.list-hero .serif-i{color:var(--gold);}
.eyebrow{
  font-family:var(--sans);font-weight:600;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-ink);
}
.lead{font-size:clamp(16px,1.25vw,19px);line-height:1.72;color:var(--ink-soft);font-weight:400;}
.muted{color:var(--ink-faint);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.section{padding-block:clamp(58px,8vw,128px);}
.center{text-align:center;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:600;font-size:13.5px;
  letter-spacing:.06em;
  padding:15px 30px;border-radius:var(--radius);
  transition:all .35s var(--ease);white-space:nowrap;
}
.btn-fill{background:var(--primary);color:#fff;}
.btn-fill:hover{background:var(--accent);}
.btn-orange{background:var(--gold);color:var(--primary);}
.btn-orange:hover{background:var(--gold-deep);color:var(--primary);}
.btn-outline{border:1.5px solid var(--primary);color:var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn-light{border:1.5px solid rgba(255,255,255,.6);color:#fff;backdrop-filter:blur(2px);}
.btn-light:hover{background:#fff;color:var(--primary);border-color:#fff;}
.btn-wa{background:var(--wa);color:#fff;}
.btn-wa:hover{background:var(--wa-deep);}

.link-u{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:13.5px;letter-spacing:.05em;font-weight:600;color:var(--primary);
  padding-bottom:4px;border-bottom:1.5px solid var(--primary);
  transition:gap .35s var(--ease),color .3s,border-color .3s;
}
.link-u:hover{gap:1em;color:var(--accent);border-color:var(--accent);}
.link-u .arrow{transition:transform .35s var(--ease);}
.link-u:hover .arrow{transform:translateX(3px);}

/* ---------- logo ---------- */
/* Official E-Sleep artwork as a horizontal lockup. Two variants ship in the
   header: indigo for the solid state, white wordmark while it floats over the hero.
   Only one is ever visible; --logo-h drives the size at each placement. */
.logo{display:inline-flex;align-items:center;line-height:0;}
.logo-img{display:block;width:auto;height:var(--logo-h,38px);max-width:none;}
.logo-auto{position:relative;}
.logo-auto .logo-dark{opacity:1;transition:opacity .35s var(--ease);}
.logo-auto .logo-lightimg{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease);}
.hdr.on-dark .logo-auto .logo-dark{opacity:0;}
.hdr.on-dark .logo-auto .logo-lightimg{opacity:1;}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:background .4s var(--ease),border-color .4s,box-shadow .4s;
  border-bottom:1px solid transparent;
}
.hdr-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--gut);}
.hdr.solid{background:#fff;border-bottom-color:var(--divider);box-shadow:0 1px 20px rgba(28,36,76,.05);}
.hdr.on-dark{color:#fff;}
.hdr.on-dark .navlink::after{background:#fff;}
.hdr .nav{display:flex;gap:30px;align-items:center;}
.nav-left{justify-content:flex-start;}
.nav-right{justify-content:flex-end;}
.navlink{position:relative;font-size:13.5px;letter-spacing:.02em;font-weight:500;padding:6px 0;white-space:nowrap;}
.navlink::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .35s var(--ease);}
.navlink:hover::after,.navlink.active::after{width:100%;}
.hdr .logo{--logo-h:50px;}
.icon-btn{display:inline-flex;align-items:center;gap:.5em;font-size:13.5px;font-weight:600;}
.hdr .icon-btn{background:var(--accent);color:#fff;padding:10px 20px;border-radius:var(--radius);transition:background .3s;}
.hdr .icon-btn:hover{background:var(--accent-deep);}
.burger{display:none;flex-direction:column;gap:5px;width:24px;}
.burger span{height:2px;background:currentColor;width:100%;border-radius:2px;}

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:200;background:var(--page);
  transform:translateY(-100%);transition:transform .5s var(--ease),visibility .5s;
  visibility:hidden;display:flex;flex-direction:column;padding:var(--gut);overflow-y:auto;
}
.drawer.open{transform:translateY(0);visibility:visible;}
.drawer a{font-family:var(--serif);font-size:clamp(28px,7vw,44px);padding:7px 0;display:block;color:var(--primary);}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6vh;}

/* ---------- footer ---------- */
.ftr{background:var(--primary);color:#fff;padding-block:clamp(56px,7vw,96px) 0;}
.ftr a{color:rgba(255,255,255,.75);transition:color .3s;}
.ftr a:hover{color:var(--accent);}
.ftr-inner{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:44px;}
.ftr-col{display:flex;flex-direction:column;gap:12px;font-size:15px;}
.ftr .logo{--logo-h:54px;}
.ftr-head{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);font-weight:600;color:var(--rose);margin-bottom:8px;}
.ftr-btm{
  display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  margin-top:64px;padding-block:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:rgba(255,255,255,.55);
}
.ftr-addr{font-style:normal;color:rgba(255,255,255,.75);line-height:1.7;}
/* Studio credit: quieter than the client's own copyright line, so it reads as
   a signature rather than a third piece of brand information. */
.ftr-built a{
  display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;
  border:1px solid rgba(255,255,255,.22);border-radius:100px;background:rgba(255,255,255,.06);
  color:#fff;text-decoration:none;line-height:1;
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.ftr-built-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--gold);color:var(--primary);flex-shrink:0;}
.ftr-built-mark svg{stroke-width:2.2;}
.ftr-built-text{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;}
.ftr-built-text em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65);}
.ftr-built-text strong{font-size:15px;font-weight:600;letter-spacing:.01em;color:#fff;}
.ftr-built-arrow{display:inline-flex;color:var(--gold);transition:transform .3s var(--ease);}
.ftr-built a:hover{border-color:var(--gold);background:rgba(237,207,98,.12);transform:translateY(-1px);}
.ftr-built a:hover .ftr-built-arrow{transform:translateX(3px);}
.ftr-built a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* Three items no longer fit on one line here — space-between was pushing the
   credit past the right edge, so stack them instead. */
@media(max-width:700px){
  .ftr-btm{flex-direction:column;align-items:flex-start;gap:10px;text-align:left;}
}

/* ---------- product card ---------- */
.card{display:block;cursor:pointer;}
/* Catalogue photography is square (1254x1254) studio work on white, so the
   frame is square too and the image is contained, never cropped — a 4/5 frame
   with object-fit:cover was cutting the ends off wide sofa sets. `contain`
   keeps that true if a differently-shaped photo is ever uploaded. */
.card-media{
  position:relative;overflow:hidden;background:var(--card);aspect-ratio:1/1;
  border-radius:var(--radius);border:1px solid var(--line-soft);
}
.card-media img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease),opacity .5s var(--ease);}
.card-media img.alt{position:absolute;inset:0;opacity:0;}
.card:hover .card-media img.main{opacity:0;}
.card:hover .card-media img.alt{opacity:1;transform:scale(1.04);}
.card-tag{
  position:absolute;top:13px;left:13px;z-index:2;background:rgba(255,255,255,.94);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:6px 11px;border-radius:100px;color:var(--primary);
}
.card-body{padding-top:16px;}
.card-name{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.15;color:var(--ink-head);}
.card-type{font-size:13.5px;color:var(--ink-faint);margin-top:2px;}
.card-poa{font-size:12.5px;font-weight:600;color:var(--accent-ink);margin-top:8px;letter-spacing:.03em;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.reveal.active{opacity:1;transform:none;}
.reveal-d1{transition-delay:.07s;}
.reveal-d2{transition-delay:.14s;}
.reveal-d3{transition-delay:.21s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- grids ---------- */
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.4vw,40px) clamp(16px,1.8vw,28px);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,32px);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,56px);}

/* ---------- chips ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  font-size:13px;font-weight:500;padding:9px 17px;background:#fff;
  border:1px solid var(--line);border-radius:100px;transition:.25s var(--ease);color:var(--ink-soft);
  /* Category names are multi-word; they must stay on one line so the
     horizontally-scrolling nav row reads as pills, not stacked text. */
  white-space:nowrap;
}
.chip:hover{border-color:var(--primary);color:var(--primary);}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ---------- quote drawer ---------- */
.qdrawer-backdrop{
  position:fixed;inset:0;z-index:300;background:rgba(11,28,35,.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s,visibility .35s;
  display:flex;justify-content:flex-end;
}
.qdrawer-backdrop.open{opacity:1;pointer-events:auto;visibility:visible;}
.qdrawer{
  width:min(520px,100%);background:var(--page);height:100%;overflow-y:auto;
  transform:translateX(40px);transition:transform .45s var(--ease);padding:clamp(24px,4vw,44px);
}
.qdrawer-backdrop.open .qdrawer{transform:none;}
.qdrawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:26px;}
.qdrawer-head .icon-btn{background:none;color:var(--ink-soft);padding:0;}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.field span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:13px 15px;border-radius:var(--radius);
  transition:border-color .25s,box-shadow .25s;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(92,148,203,.15);
}

/* =========================================================
   PAGE SECTIONS
   ========================================================= */

/* ---- hero ---- */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s ease-in-out;z-index:1;pointer-events:none;}
.hero-media img.active{opacity:1;z-index:2;animation:heroZoom 16s var(--ease) forwards;pointer-events:auto;}
@keyframes heroZoom{from{transform:scale(1.07);}to{transform:scale(1);}}
/* Catalogue photography is bright and low-contrast, so the lower veil has to
   carry far enough up the frame to keep the eyebrow and headline legible. */
.hero-veil{position:absolute;inset:0;z-index:3;background:
  linear-gradient(180deg,rgba(11,28,35,.5) 0%,rgba(11,28,35,0) 26%),
  linear-gradient(0deg,rgba(11,28,35,.88) 0%,rgba(11,28,35,.55) 30%,rgba(11,28,35,.16) 55%,rgba(11,28,35,0) 74%);}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,8vh,88px);}
.hero-copy{max-width:880px;}
.hero .display{color:#fff;margin-top:16px;}
.hero-sub{color:rgba(255,255,255,.88);max-width:500px;margin-top:22px;}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.hero-scroll{
  position:absolute;right:var(--gut);bottom:clamp(48px,8vh,88px);z-index:2;
  display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.8);
}
.hero-scroll svg{animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* ---- usp strip ---- */
.usp{background:var(--primary);color:#fff;}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:26px;}
.usp-item{display:flex;align-items:center;gap:13px;font-size:14px;}
.usp-item svg{color:var(--accent);flex-shrink:0;}
.usp-item b{display:block;font-weight:600;font-size:14.5px;}
.usp-item span{color:rgba(255,255,255,.65);font-size:12.5px;}

/* ---- section heads ---- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(30px,3.6vw,50px);}

/* ---- category tiles ---- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);}
.cat-tile{display:block;}
.cat-media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--card);border-radius:var(--radius);
}
.cat-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.cat-tile:hover .cat-media img{transform:scale(1.06);}
.cat-meta{display:flex;justify-content:space-between;align-items:center;padding-top:16px;gap:14px;}
.cat-line{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-weight:600;}
.cat-name{font-family:var(--serif);font-size:clamp(20px,1.9vw,27px);font-weight:600;line-height:1.1;}
.cat-count{font-size:12.5px;color:var(--ink-faint);margin-top:3px;}
.cat-arrow{transition:transform .4s var(--ease);color:var(--ink-faint);}
.cat-tile:hover .cat-arrow{transform:translateX(6px);color:var(--accent);}

/* ---- editorial ---- */
.edit-img img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--radius);}
.edit-copy{padding-left:clamp(0px,2vw,36px);}

/* ---- craft ---- */
.craft-card{border-top:2px solid var(--divider);padding-top:22px;}
.craft-num{font-family:var(--serif);font-size:42px;font-weight:600;color:var(--rose);line-height:1;}

/* ---- bespoke band ---- */
.bespoke{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden;}
.bespoke-media{position:absolute;inset:0;}
.bespoke-media img{width:100%;height:100%;object-fit:cover;}
.bespoke-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,36,76,.86) 0%,rgba(28,36,76,.5) 58%,rgba(28,36,76,.2) 100%);}
.bespoke-inner{position:relative;z-index:2;padding-block:clamp(56px,8vw,110px);}

/* ---- quote / testimonial ---- */
.quote{
  font-family:var(--serif);font-weight:500;font-size:clamp(25px,3.2vw,44px);line-height:1.26;
  margin:24px 0 0;font-style:italic;color:var(--ink-head);
}
.quote-by{margin-top:26px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;}

/* ---- visit ---- */
.visit-info{display:flex;gap:50px;margin-top:30px;flex-wrap:wrap;}
.visit-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:600;}
.visit-info > div{font-size:15px;line-height:1.7;color:var(--ink-soft);}
.visit-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);}

/* ---- listing hero ---- */
.list-hero{position:relative;min-height:clamp(360px,48vh,520px);display:flex;align-items:flex-end;overflow:hidden;}
.list-hero-media{position:absolute;inset:0;}
.list-hero-media img{width:100%;height:100%;object-fit:cover;}
.list-hero-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,36,76,.9) 0%,rgba(28,36,76,.55) 45%,rgba(11,28,35,.5) 100%);}
.list-hero-inner{position:relative;z-index:2;padding-bottom:clamp(38px,6vh,66px);padding-top:120px;}
.list-hero-inner .h1{color:#fff;}

/* ---- category nav / toolbar ---- */
.cat-nav{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--divider);}
.cat-nav-inner{padding-block:15px;overflow-x:auto;scrollbar-width:none;}
.cat-nav-inner::-webkit-scrollbar{display:none;}
.cat-nav .tag-row{flex-wrap:nowrap;}
.list-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--divider);
}
.list-count{display:flex;align-items:center;gap:26px;font-size:13.5px;}
.sort{display:flex;align-items:center;gap:9px;}
.sort select{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--sans);
  font-size:13.5px;padding:9px 14px;color:var(--ink);cursor:pointer;
}
.sort select:focus{outline:none;border-color:var(--accent);}

.quote-strip{background:var(--primary);color:#fff;}
.quote-strip .h2{color:#fff;}
.quote-strip .lead{color:rgba(255,255,255,.78);}
.quote-strip .btn-outline{border-color:#fff;color:#fff;}
.quote-strip .btn-outline:hover{background:#fff;color:var(--primary);}

.page{padding-top:0;}

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */
.pdp .crumbs{display:flex;gap:10px;align-items:center;font-size:13px;padding-top:100px;padding-bottom:26px;color:var(--ink-soft);flex-wrap:wrap;}
.pdp .crumbs span{color:var(--ink-faint);}
.pdp .crumbs a:hover{color:var(--accent);}

.pdp-top{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(30px,4vw,68px);align-items:start;}
.pdp-gallery{position:sticky;top:86px;}
.pdp-main{background:var(--card);aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-soft);}
.pdp-main img{width:100%;height:100%;object-fit:contain;}
.pdp-thumbs{display:flex;gap:12px;margin-top:12px;}
.pdp-thumb{
  width:84px;height:84px;background:var(--card);overflow:hidden;border-radius:8px;
  border:2px solid transparent;transition:border-color .25s,opacity .25s;opacity:.65;
}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;}
.pdp-thumb.active,.pdp-thumb:hover{border-color:var(--accent);opacity:1;}

.pdp-info{padding-top:6px;}
.pdp-name{font-family:var(--serif);font-size:clamp(34px,4.4vw,58px);font-weight:600;line-height:1.03;margin:10px 0 0;letter-spacing:-.02em;}
.pdp-tag{font-size:15px;color:var(--ink-faint);margin-top:10px;display:block;}
.pdp-block{margin-top:30px;}
.pdp-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);}
.pdp-price-note{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:30px;padding:20px;border-radius:var(--radius);background:var(--sand);
}
.pdp-poa{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--primary);}
.pdp-cta{display:flex;gap:11px;margin-top:16px;flex-wrap:wrap;}
.pdp-assure{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:14.5px;color:var(--ink-soft);}
.pdp-assure li{display:flex;align-items:center;gap:10px;}
.pdp-assure svg{color:var(--accent);flex-shrink:0;}

.detail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--ink-soft);}
.detail-list li{display:flex;align-items:center;gap:10px;}
.detail-list svg{color:var(--accent);flex-shrink:0;}

.pdp-band{height:clamp(340px,52vh,600px);overflow:hidden;}
.pdp-band img{width:100%;height:100%;object-fit:cover;}

.pdp-custom-callout{
  display:inline-flex;align-items:center;gap:11px;width:100%;
  background:rgba(37,211,102,.09);border:1.5px dashed var(--wa);color:var(--wa-deep);
  padding:14px 18px;border-radius:var(--radius);font-size:14px;font-weight:600;
  transition:all .3s var(--ease);
}
.pdp-custom-callout:hover{background:rgba(37,211,102,.16);border-color:var(--wa-deep);}

.pdp-care-warranty{
  border-top:1px solid var(--divider);background:var(--sand);
  padding-block:clamp(44px,6vw,80px);margin-top:clamp(44px,6vw,76px);
}
.care-warranty-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,60px);align-items:start;}
.care-title{display:flex;align-items:center;gap:11px;font-size:23px;margin-bottom:20px;}
.care-title svg{color:var(--accent);}
.care-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;}
.care-list li{position:relative;padding-left:20px;font-size:15px;line-height:1.65;color:var(--ink-soft);}
.care-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.warranty-text{
  font-size:16px;line-height:1.65;color:var(--ink);background:#fff;
  padding:22px;border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;margin:0;
}

/* ---- bespoke steps ---- */
.bespoke-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.5vw,38px);}
.bstep{border-top:2px solid var(--divider);padding-top:22px;}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .cat-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1080px){
  .grid-products{grid-template-columns:repeat(3,1fr);}
  .ftr-inner{grid-template-columns:1fr 1fr;gap:36px;}
  .usp-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:980px){
  .pdp-top{grid-template-columns:1fr;}
  .pdp-gallery{position:static;}
  .bespoke-steps{grid-template-columns:repeat(2,1fr);}
  .care-warranty-grid{grid-template-columns:1fr;}
}
@media(max-width:1120px){
  .hdr .nav{display:none;}
  .hdr-inner{grid-template-columns:auto 1fr auto;}
  .hdr .logo{font-size:24px;}
  .burger{display:flex;grid-column:3;justify-self:end;}
}
@media(max-width:860px){
  .grid-products{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .edit-copy{padding-left:0;}
  .visit-info{gap:30px;}
}
@media(max-width:520px){
  .grid-products{grid-template-columns:repeat(2,1fr);gap:18px 12px;}
  .card-name{font-size:18px;}
  .bespoke-steps{grid-template-columns:1fr;}
  .usp-grid{grid-template-columns:1fr;gap:14px;}
  .ftr-inner{grid-template-columns:1fr;}
}

/* ---------- WordPress core classes ---------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed!important;top:12px;left:12px;z-index:999;width:auto;height:auto;
  clip:auto;background:var(--primary);color:#fff;padding:12px 20px;border-radius:var(--radius);
}
.entry-copy p{margin:0 0 1.1em;}
.entry-copy a{color:var(--maroon);text-decoration:underline;}
.entry-copy img{border-radius:var(--radius);}

.pagination,.nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.pagination .page-numbers,.nav-links .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  font-size:14px;font-weight:500;color:var(--ink-soft);transition:.25s var(--ease);
}
.pagination .page-numbers:hover,.nav-links .page-numbers:hover{border-color:var(--primary);color:var(--primary);}
.pagination .page-numbers.current,.nav-links .page-numbers.current{
  background:var(--primary);color:#fff;border-color:var(--primary);
}
.pagination .screen-reader-text{display:none;}

/* admin bar offset for the fixed header */
body.admin-bar .hdr{top:32px;}
body.admin-bar .cat-nav{top:32px;}
@media(max-width:782px){
  body.admin-bar .hdr{top:46px;}
  body.admin-bar .cat-nav{top:46px;}
}

/* If JavaScript never runs, the reveal animation must not leave the page blank. */
.no-js .reveal{opacity:1;transform:none;}

/* =========================================================
   v1.1 — spec additions
   ========================================================= */

:root{ --hdr-h:84px; }

/* ---------- opening animation ---------- */
/*
 * The lockup assembles: the monogram drops in, the letters fly in
 * from outside and join up, the FURNITURE rule wipes across, the whole thing
 * swells once and settles, then rises to the header position as the ground
 * dissolves. Each piece is a slice from assets/img/logo-parts, positioned by
 * the percentages in parts.json.
 */
html.intro-running,
html.intro-running body{overflow:hidden;}

.intro{
  position:fixed;inset:0;z-index:400;background:var(--page);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
}
.intro.show{opacity:1;pointer-events:auto;}

.intro-stage{width:min(78vw,640px);}
.intro-lockup{position:relative;width:100%;transform-origin:50% 50%;}

.ipart{
  position:absolute;left:var(--l);top:var(--t);width:var(--w);
  height:auto;opacity:0;will-change:transform,opacity;
}

/* monogram drops in with a little overshoot */
.intro.show .ipart-mark{animation:markIn .72s cubic-bezier(.2,1.5,.4,1) .04s forwards;}
@keyframes markIn{
  0%  {opacity:0;transform:translateY(-14%) scale(.5) rotate(-8deg);}
  60% {opacity:1;}
  100%{opacity:1;transform:none;}
}

/* letters converge from outside; --dx is how far out each one starts */
.intro.show .ipart-glyph{
  animation:glyphIn .62s cubic-bezier(.22,1.15,.32,1) var(--delay,0ms) forwards;
}
@keyframes glyphIn{
  0%  {opacity:0;transform:translateX(var(--dx,0)) translateY(-6%) scale(1.5);}
  55% {opacity:1;}
  100%{opacity:1;transform:none;}
}

/* the rule + FURNITURE wipes in left to right */
.intro.show .ipart-sub{
  animation:subIn .5s var(--ease) .80s forwards;
  clip-path:inset(0 100% 0 0);
}
@keyframes subIn{
  0%  {opacity:1;clip-path:inset(0 100% 0 0);}
  100%{opacity:1;clip-path:inset(0 0 0 0);}
}

/* assembled — the whole lockup breathes out and settles back */
.intro.show .intro-lockup{animation:lockupSwell 1s cubic-bezier(.34,1.3,.4,1) 1.05s both;}
@keyframes lockupSwell{
  0%  {transform:scale(1);}
  38% {transform:scale(1.075);}
  100%{transform:scale(1);}
}

/* then it travels to the header position and the ground dissolves */
.intro.done{opacity:0;transition:opacity .5s var(--ease) .3s;}
.intro.done .intro-stage{
  transform:translateY(calc(-50vh + var(--hdr-h) / 2)) scale(.27);
  transition:transform .8s cubic-bezier(.62,.02,.3,1);
}
.intro.done .intro-lockup{animation:none;}

@media(max-width:640px){ .intro-stage{width:86vw;} }
@media(prefers-reduced-motion:reduce){ .intro{display:none;} }

/* ---------- logo ---------- */

/* ---------- header additions ---------- */
.hdr-inner{min-height:var(--hdr-h);}
.hdr-brand{justify-self:center;}
.hdr-mobile{display:none;align-items:center;gap:14px;justify-self:end;}
.iconlink{display:inline-flex;align-items:center;justify-content:center;padding:6px;color:inherit;}
.iconlink:hover{color:var(--accent);}
.btn-wa-sm{
  display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;
  padding:9px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:600;
  transition:background .3s;white-space:nowrap;
}
.btn-wa-sm:hover{background:var(--wa-deep);color:#fff;}

/* ---------- mega nav ---------- */
.navitem{position:relative;}
.navpanel{
  position:absolute;top:100%;left:-18px;z-index:130;min-width:250px;
  background:#fff;border:1px solid var(--divider);border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(28,36,76,.14);
  padding:10px;margin-top:10px;
  display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.navpanel-wide{grid-template-columns:repeat(2,minmax(190px,1fr));min-width:440px;gap:1px 8px;}
.navitem:hover .navpanel,
.navitem.open .navpanel{opacity:1;visibility:visible;transform:none;}
.navpanel a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:7px;font-size:14px;color:var(--ink);
  transition:background .18s,color .18s;
}
.navpanel a:hover{background:var(--sand);color:var(--primary);}
.navpanel em{font-style:normal;font-size:12px;color:var(--ink-faint);}
.navpanel em.instore{color:var(--accent);font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
/* The panel must stay readable when the header is transparent over the hero. */
.hdr.on-dark .navpanel{color:var(--ink);}
.hdr.on-dark .navpanel a{color:var(--ink);}

/* ---------- search ---------- */
.searchwrap{
  position:fixed;inset:0;z-index:260;background:rgba(11,28,35,.55);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;
  display:flex;align-items:flex-start;justify-content:center;padding:clamp(70px,12vh,140px) var(--gut) 0;
}
.searchwrap.open{opacity:1;visibility:visible;pointer-events:auto;}
.searchbox{
  width:min(760px,100%);background:#fff;border-radius:14px;padding:clamp(16px,2vw,22px);
  box-shadow:0 26px 70px rgba(11,28,35,.3);transform:translateY(-12px);
  transition:transform .3s var(--ease);
}
.searchwrap.open .searchbox{transform:none;}
.searchbox form{display:flex;align-items:center;gap:12px;}
.searchbox form > svg{color:var(--ink-faint);flex-shrink:0;}
.searchbox input[type=search]{
  flex:1;min-width:0;border:none;background:transparent;font-family:var(--sans);
  font-size:clamp(16px,2vw,20px);color:var(--ink);padding:8px 0;
}
.searchbox input[type=search]:focus{outline:none;}
.searchhints{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--divider);}
.searchhints .muted{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.searchinline{
  display:flex;align-items:center;gap:12px;margin-top:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:8px 8px 8px 16px;max-width:620px;
}
.searchinline > svg{color:var(--ink-faint);flex-shrink:0;}
.searchinline input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--sans);font-size:16px;padding:9px 0;}
.searchinline input:focus{outline:none;}
.searchpage{padding-top:var(--hdr-h);}

/* ---------- drawer ---------- */
.drawer-nav{display:flex;flex-direction:column;}
.drawer-group{border-bottom:1px solid var(--divider);}
.drawer-toggle,.drawer-top-link{
  display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px;
  font-family:var(--serif);font-size:23px;font-weight:600;color:var(--primary);
  padding:15px 0;text-align:left;
}
.drawer-toggle svg{color:var(--accent);transition:transform .3s var(--ease);flex-shrink:0;}
.drawer-toggle[aria-expanded="true"] svg{transform:rotate(45deg);}
.drawer-sub{display:none;padding:0 0 14px 2px;flex-direction:column;gap:2px;}
.drawer-sub.open{display:flex;}
.drawer-sub a{font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--ink-soft);padding:8px 0;}
.drawer-sub a:hover{color:var(--accent);}
.drawer-cta{display:flex;gap:12px;flex-wrap:wrap;padding-top:26px;}
.drawer a{font-size:inherit;padding:0;}

/* ---------- category tiles ---------- */
.cat-badge{
  position:absolute;top:12px;left:12px;z-index:2;background:var(--primary);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;
}
.cat-media{position:relative;}
.hero-est{
  color:var(--gold);
  text-shadow:0 1px 10px rgba(11,28,35,.75), 0 0 3px rgba(11,28,35,.5);
}
.list-hero-inner .eyebrow{text-shadow:0 1px 10px rgba(11,28,35,.65);}
.chip-note{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-left:7px;}

/* ---------- how we bring it together ---------- */
.howwork{position:relative;overflow:hidden;color:#fff;}
.howwork-media{position:absolute;inset:0;}
.howwork-media img{width:100%;height:100%;object-fit:cover;}
.howwork-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,36,76,.93),rgba(11,28,35,.9));}
.howwork-inner{position:relative;z-index:2;padding-block:clamp(60px,8vw,120px);}
.howwork-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px);}
.howstep{border-top:2px solid rgba(255,255,255,.25);padding-top:20px;}
.howstep-num{font-family:var(--serif);font-size:38px;font-weight:600;color:var(--accent);line-height:1;}
.howstep h3{color:#fff;margin:10px 0 8px;font-size:clamp(19px,2vw,25px);}
.howstep p{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.65;margin:0;}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px);}
.review-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,32px);margin:0;display:flex;flex-direction:column;gap:14px;
}
.review-stars{display:flex;gap:3px;color:var(--accent);}
.review-stars svg{fill:currentColor;}
.review-card blockquote{margin:0;font-size:16px;line-height:1.7;color:var(--ink-soft);}
.review-card figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px;margin-top:auto;}
.review-card figcaption strong{color:var(--ink-head);font-weight:600;}

/* ---------- mattress brand band ---------- */
.brandband{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;background:var(--sand);border-radius:14px;padding:clamp(26px,3vw,42px);
}
.brandband-cta{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- mattress catalogue download cards ---------- */
.mattress-docs{margin-top:clamp(36px,4.5vw,60px);}
.mattress-docs-head{text-align:center;max-width:680px;margin:0 auto clamp(28px,3.5vw,44px);}
.mattress-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2vw,28px);margin-bottom:32px;
}
.mattress-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:16px;
  position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.mattress-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(28,36,76,.09);
  border-color:rgba(92,148,203,.3);
}
.mattress-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mattress-badge{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(92,148,203,.12);color:var(--accent);padding:5px 12px;border-radius:100px;
}
.mattress-card-icon{
  width:48px;height:48px;border-radius:12px;background:rgba(92,148,203,.1);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mattress-card h3{font-family:var(--serif);font-size:22px;margin:0;color:var(--ink-head);line-height:1.2;}
.mattress-card p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0;flex-grow:1;}
.mattress-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.mattress-drive-banner{
  background:var(--sand);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(20px,2.5vw,28px);display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}


/* ---------- in-store panel ---------- */
.instore-panel{
  background:#fff;border:1px dashed var(--line);border-radius:14px;
  padding:clamp(30px,4vw,56px);text-align:center;max-width:820px;margin:0 auto;
}
.instore-mark{
  width:64px;height:64px;border-radius:50%;background:var(--sand);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.instore-panel .lead{max-width:620px;margin:14px auto 0;}
.instore-tags{justify-content:center;margin-top:22px;}
.instore-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;}

/* ---------- established band ---------- */
.estband{background:var(--primary);color:#fff;}
.estband-inner{display:flex;align-items:center;gap:clamp(22px,4vw,50px);padding-block:clamp(34px,4vw,54px);flex-wrap:wrap;}
.estband-year{
  font-family:var(--serif);font-size:clamp(56px,9vw,110px);font-weight:600;line-height:.9;
  color:var(--accent);letter-spacing:-.03em;
}
.estband .eyebrow{color:var(--rose);}
.estband .lead{color:rgba(255,255,255,.8);max-width:560px;}

/* ---------- story timeline ---------- */
.timeline{display:flex;flex-direction:column;gap:clamp(36px,5vw,72px);}
.tl-item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,60px);align-items:center;}
.tl-item:nth-child(even) .tl-media{order:2;}
.tl-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);}
.tl-year{
  font-family:var(--serif);font-size:clamp(30px,3.4vw,46px);font-weight:600;
  color:var(--accent);line-height:1;margin-bottom:10px;
}
.tl-copy h2{margin-bottom:10px;}

/* ---------- footer additions ---------- */
.ftr-blurb{font-size:14.5px;margin:16px 0 0;max-width:300px;color:rgba(255,255,255,.72);line-height:1.7;}
.ftr-social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.ftr-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);
  transition:background .25s,color .25s,border-color .25s;
}
.ftr-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.ftr-wa{color:#25D366 !important;margin-top:6px;display:inline-flex;align-items:center;gap:7px;}

/* ---------- responsive ---------- */
@media(max-width:1120px){
  .hdr-mobile{display:flex;}
  .howwork-steps{grid-template-columns:repeat(2,1fr);}
  .review-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .tl-item{grid-template-columns:1fr;}
  .tl-item:nth-child(even) .tl-media{order:0;}
  .review-grid{grid-template-columns:1fr;}
  .brandband{flex-direction:column;align-items:flex-start;}
}
@media(max-width:520px){
  .howwork-steps{grid-template-columns:1fr;}
  .estband-inner{gap:14px;}
  .searchwrap{padding-top:80px;}
  .searchbox form{flex-wrap:wrap;}
  .searchbox input[type=search]{flex:1 1 100%;order:-1;}
}

.drawer-top .logo{--logo-h:38px;}
@media(max-width:860px){
  .hdr .logo{--logo-h:38px;}
  .ftr .logo{--logo-h:44px;}
}


/* ---------- Visit Us: showroom storefront ---------- */
/* The header carries the copy so nothing sits over the building, and the
   photograph is never cropped — it is a symmetrical elevation, so losing the
   signage or the entrance steps would spoil it. Capping the width keeps its
   natural 3:2 from running to 960px tall on a desktop. */
.visit-head{
  background:var(--primary);
  padding-block:calc(var(--hdr-h) + clamp(30px,4vw,54px)) clamp(30px,4vw,54px);
}
.visit-head .eyebrow{color:var(--on-dark);}

.showroom-shot{
  margin:0;
  background:var(--sand);
  padding:clamp(22px,3vw,48px) var(--gut) clamp(16px,2vw,26px);
}
.showroom-shot img{
  display:block;width:100%;height:auto;
  max-width:1120px;margin-inline:auto;
  border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(28,36,76,.14);
}
.showroom-shot figcaption{
  max-width:1120px;margin:14px auto 0;
  font-size:13.5px;color:var(--ink-faint);text-align:center;
}

/* ---------- Our Story: founder + growth timeline ---------- */
.story-head{
  background:var(--primary);
  padding-block:calc(var(--hdr-h) + clamp(26px,3.4vw,44px)) clamp(28px,3.6vw,46px);
}
.story-head .eyebrow{color:var(--on-dark);}

/* Copy on the left, the numbers that make up the story on the right, so the
   band is not half empty. A hairline separates them on wide screens. */
.story-head-grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px);align-items:center;
}
.story-head-copy .h1{margin:10px 0 0;color:#fff;}
.story-strap{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,1.7vw,23px);line-height:1.45;
  color:rgba(255,255,255,.86);margin:16px 0 0;max-width:44ch;
}
.story-sub{
  font-size:16px;line-height:1.7;
  color:rgba(255,255,255,.62);margin:12px 0 0;max-width:54ch;
}

.story-facts{
  margin:0;padding:0 0 0 clamp(28px,4vw,64px);
  border-left:1px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column;gap:clamp(18px,2.2vw,30px);
}
.story-fact dt{
  display:flex;align-items:baseline;gap:.42em;
  font-family:var(--serif);font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;
}
.story-fact-n{font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.02em;}
.story-fact-u{
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.story-fact dd{
  margin:5px 0 0;font-size:13.5px;color:rgba(255,255,255,.58);
}

@media(max-width:980px){
  .story-head-grid{grid-template-columns:1fr;gap:clamp(26px,4vw,38px);}
  .story-facts{
    flex-direction:row;flex-wrap:wrap;gap:22px clamp(24px,5vw,48px);
    border-left:0;border-top:1px solid rgba(255,255,255,.18);
    padding:clamp(22px,3vw,30px) 0 0;
  }
}

/* The founder piece is an illustrated poster with its own typography baked in,
   so it is never cropped — only capped, and centred on the sand panel. */
.founder-shot{
  margin:0;background:var(--sand);
  padding:clamp(22px,3vw,48px) var(--gut);
}
.founder-frame{
  position:relative;max-width:1120px;margin-inline:auto;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 44px rgba(28,36,76,.14);
}
.founder-shot img{display:block;width:100%;height:auto;}

/* Opt out of the shared .reveal slide — this one is unveiled instead. */
.founder-shot.reveal{opacity:1;transform:none;}

/* Two panels cover the portrait, then draw back to either side. */
.founder-curtain{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:var(--sand);
  transition:transform 1.15s cubic-bezier(.66,0,.24,1);
  z-index:2;
}
.founder-curtain--l{left:0;}
.founder-curtain--r{right:0;}
.founder-shot.active .founder-curtain--l{transform:translateX(-101%);}
.founder-shot.active .founder-curtain--r{transform:translateX(101%);}

/* The portrait settles as the panels clear it. */
.founder-frame img{
  transform:scale(1.05);
  transition:transform 1.5s cubic-bezier(.22,.61,.36,1);
}
.founder-shot.active .founder-frame img{transform:none;}

@media(prefers-reduced-motion:reduce){
  .founder-curtain{display:none;}
  .founder-frame img{transform:none;transition:none;}
}

/* Timeline: a centre spine with the showroom on one side and the milestone on
   the other, alternating. The spine is decorative, so it is drawn on the list
   rather than added as markup. */
.tl{
  list-style:none;margin:0;padding:0;position:relative;
  display:flex;flex-direction:column;gap:clamp(34px,4.5vw,64px);
}
.tl::before{
  content:"";position:absolute;top:6px;bottom:6px;left:50%;
  width:2px;margin-left:-1px;
  background:linear-gradient(180deg,var(--accent),rgba(92,148,203,.28));
}
.tl-row{
  display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;
}
.tl-pic{margin:0;grid-column:1;}
.tl-text{grid-column:3;}
.tl-row--flip .tl-pic{grid-column:3;}
.tl-row--flip .tl-text{grid-column:1;text-align:right;}

.tl-pic img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(28,36,76,.16);
}

.tl-node{
  grid-column:2;justify-self:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px var(--page);
}
.tl-node--open{background:var(--page);border:2px solid var(--accent);}

.tl-yr{
  font-family:var(--serif);font-size:clamp(34px,4vw,54px);font-weight:600;
  color:var(--accent);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tl-text h3{margin:8px 0 6px;}
.tl-area{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);
}
.tl-text p{margin:10px 0 0;color:var(--ink-soft);font-size:16px;line-height:1.65;}

.tl-row--end{grid-template-columns:1fr 64px 1fr;}
.tl-row--end .tl-text{grid-column:3;}

@media(max-width:900px){
  /* Spine moves to the left edge and every row reads top-to-bottom. */
  .tl::before{left:9px;margin-left:0;}
  .tl-row,
  .tl-row--end{grid-template-columns:38px 1fr;gap:0 8px;}
  .tl-pic,
  .tl-row--flip .tl-pic{grid-column:2;margin-bottom:16px;}
  .tl-text,
  .tl-row--flip .tl-text,
  .tl-row--end .tl-text{grid-column:2;text-align:left;}
  .tl-node{grid-column:1;grid-row:1;justify-self:start;margin-top:6px;}
  .tl-row{align-items:start;}
}

/* ---------- no phone configured yet ----------
   ESLEEP_PHONE_E164 is empty: hide every WhatsApp affordance rather than
   pointing it somewhere else. The quote drawer is the enquiry path. */
.no-phone .btn-wa,
.no-phone .pdp-custom-callout,
.no-phone .ftr-wa,
.no-phone [data-quote-wa]{display:none !important;}
.btn-quote-sm{background:var(--gold);color:var(--primary);border:0;}
.btn-quote-sm:hover{background:var(--gold-deep);}
.ftr a.ftr-sub{font-size:13.5px;padding-left:12px;opacity:.75;}
.ftr-linkbtn{padding:0;text-align:left;font-size:inherit;color:inherit;opacity:.85;cursor:pointer;}
.ftr-linkbtn:hover{color:var(--gold);opacity:1;}

/* ---------- home: five sofa collections ---------- */
.cat-grid-5{grid-template-columns:repeat(5,1fr);}
.cat-grid-5 .cat-media{aspect-ratio:4/5;}
@media(max-width:1080px){.cat-grid-5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:620px){.cat-grid-5{grid-template-columns:repeat(2,1fr);}}

/* ---------- home: shop by upholstery ---------- */
.fabric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);}
.fabric-tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--primary);}
.fabric-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.fabric-tile:hover img{transform:scale(1.06);}
.fabric-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,28,35,.85) 0%,rgba(28,36,76,.25) 55%,rgba(28,36,76,0) 100%);}
.fabric-copy{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);color:#fff;display:flex;flex-direction:column;gap:4px;}
.fabric-copy b{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);font-weight:600;line-height:1;}
.fabric-copy em{font-style:normal;font-size:13.5px;color:rgba(255,255,255,.8);}
.fabric-copy::after{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-top:10px;transition:width .4s var(--ease);}
.fabric-tile:hover .fabric-copy::after{width:64px;}
@media(max-width:860px){.fabric-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- PDP: placeholder imagery note ---------- */
.pdp-illus{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--ink-faint);
  background:var(--sand);padding:7px 12px;border-radius:100px;}
.pdp-main{position:relative;}
.pdp-main .pdp-illus-badge{position:absolute;left:14px;bottom:14px;background:rgba(28,36,76,.85);color:#fff;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:100px;}
.card-media .card-illus{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(28,36,76,.8);color:#fff;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:100px;}

/* ---------- contact: outlet map ---------- */
.map-embed{margin:0;line-height:0;background:var(--sand);}
.map-embed iframe{display:block;width:100%;height:clamp(300px,42vw,480px);border:0;filter:saturate(.85);}

/* ---------- our story ---------- */
.story-logo{display:flex;justify-content:center;align-items:center;}
.story-logo img{width:min(340px,70%);height:auto;background:#fff;border-radius:18px;padding:22px;box-shadow:0 18px 44px rgba(11,28,35,.25);}
.story-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);}
.story-strip figure{margin:0;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);}
.story-strip img{width:100%;height:100%;object-fit:cover;}
@media(max-width:760px){.story-strip{grid-template-columns:repeat(2,1fr);}}

/* ---------- opening animation: E-Sleep stacked logo ----------
   No sliced parts for this artwork, so the whole mark drifts down like
   settling into a pillow, swells once, then lifts to the header. */
.intro-logo{display:flex;justify-content:center;opacity:0;}
.intro-logo .logo-full{width:min(300px,62vw);height:auto;}
.intro.show .intro-logo{animation:esIntroIn 1.1s cubic-bezier(.22,1.2,.36,1) .05s forwards;}
@keyframes esIntroIn{
  0%  {opacity:0;transform:translateY(-18px) scale(.86);filter:blur(6px);}
  60% {opacity:1;filter:blur(0);}
  80% {transform:translateY(0) scale(1.04);}
  100%{opacity:1;transform:none;}
}
.intro.done .intro-logo{animation:none;opacity:1;}

/* drawer CTAs: full-width stack, sans type, no wrapping */
.drawer-cta{display:flex;flex-direction:column;gap:10px;}
.drawer .drawer-cta .btn{width:100%;font-family:var(--sans);font-size:13.5px;white-space:nowrap;display:inline-flex;padding:15px 22px;}
.drawer .drawer-cta .btn-wa{color:#fff;}

/* ---------- header fit for the wide E-Sleep lockup ----------
   Full nav shows above 1120px. There, keep clear space either side of the
   logo and, up to 1380px, shrink the logo, tighten the nav and collapse the
   WhatsApp button to its icon so nothing touches the mark. Below 1120px the
   burger layout puts the logo flush left at the tablet size. */
@media(min-width:1121px){
  .hdr-brand{margin-inline:clamp(18px,2.4vw,40px);}
}
@media(max-width:1380px) and (min-width:1121px){
  .hdr .logo{--logo-h:42px;}
  .hdr .nav{gap:clamp(16px,1.7vw,26px);}
  .btn-wa-sm span{display:none;}
  .btn-wa-sm{padding:10px 12px;}
}
@media(max-width:1120px) and (min-width:861px){
  .hdr .logo{--logo-h:42px;}
  .hdr-brand{justify-self:start;}
}

/* ---------- hero video ----------
   Poster underneath (LCP), video fades in over it once playing. */
.hero-media .hero-poster{opacity:1;z-index:1;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  opacity:0;transition:opacity 1s var(--ease);pointer-events:none;}
.hero-video.is-playing{opacity:1;}

/* ---------- lead forms ---------- */
.lead-error{color:#b3261e;font-size:14.5px;margin:6px 0 0;}
.lead-wa-btn[disabled],.btn[disabled]{opacity:.65;cursor:progress;}
.field select{width:100%;}
[hidden]{display:none !important;}

/* ---------- WhatsApp pre-chat popup (minimal, IndoCasa-style) ----------
   A chat widget anchored above the floating WhatsApp button, bottom-right.
   No backdrop: the page stays visible and scrollable behind it. */
.wachat{position:fixed;z-index:300;right:clamp(14px,2.4vw,28px);
  bottom:calc(clamp(14px,2.4vw,28px) + 58px + 14px);width:min(420px,calc(100vw - 2 * clamp(14px,2.4vw,28px)));}
.wachat[hidden]{display:none !important;}
.wachat-card{position:relative;width:100%;
  max-height:calc(100svh - clamp(14px,2.4vw,28px) - 58px - 14px - 24px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--page);padding:clamp(22px,3vw,30px);border-radius:4px;
  box-shadow:0 18px 50px rgba(11,28,35,.28),0 2px 8px rgba(11,28,35,.08);
  transform-origin:bottom right;animation:wachatIn .24s var(--ease);}
@keyframes wachatIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.wachat-close{position:absolute;top:14px;right:14px;color:var(--ink-soft);padding:6px;line-height:0;}
.wachat-close:hover{color:var(--primary);}
.wachat-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,5vw,31px);line-height:1.1;padding-right:36px;}
.wachat-intro{margin:12px 0 4px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
.wachat-about{margin:8px 0 0;font-size:13.5px;color:var(--accent-ink);font-weight:500;}
.wachat form{margin-top:18px;}
.wachat .field{display:block;margin:0 0 15px;}
.wachat .field span{display:block;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px;}
.wachat .field input,.wachat .field select{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;padding:8px 0;font-size:16px;color:var(--ink);box-shadow:none;}
.wachat .field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%230B1C23'/%3E%3C/svg%3E") no-repeat right 4px center;}
.wachat .field textarea{width:100%;border:1px solid var(--line);border-radius:0;background:transparent;padding:10px;font-size:15px;resize:vertical;}
.wachat .field input:focus,.wachat .field select:focus,.wachat .field textarea:focus{outline:none;border-color:var(--primary);box-shadow:none;}
.wachat-btn{width:100%;margin-top:6px;padding:17px 20px;background:var(--wa);color:#fff;border:0;border-radius:2px;
  font-size:13.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:background .25s;}
.wachat-btn:hover{background:var(--wa-deep);}
.wachat-btn[disabled]{opacity:.7;cursor:progress;}

/* floating WhatsApp button */
.wa-fab{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:140;width:58px;height:58px;
  border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(11,28,35,.28);transition:transform .25s var(--ease),background .25s,bottom .35s var(--ease);}
.wa-fab:hover{transform:scale(1.06);background:var(--wa-deep);color:#fff;}
.wa-fab svg{stroke-width:1.5;}
/* keep the floating WhatsApp button off the Stuv.ai badge (bottom-right on desktop) */
@media(min-width:701px){ .ftr-btm{padding-right:calc(58px + clamp(14px,2.4vw,28px));} }
@media(max-width:700px){ .ftr-btm{padding-bottom:calc(22px + 58px + 14px);} }

/* phones: full-width card above the button */
@media(max-width:520px){
  .wachat{right:12px;left:12px;width:auto;bottom:calc(14px + 58px + 12px);}
  .wachat-card{max-height:calc(100svh - 14px - 58px - 12px - 16px);}
}
/* the floating button doubles as the close toggle while the card is open */
.wa-fab.is-open{background:var(--primary);}

/* =========================================================
   Stuv Virtual Try-On — E-Sleep Theme Integration
   ========================================================= */

:root {
  --stuv-primary: var(--primary);
  --stuv-btn-bg: var(--primary);
  --stuv-btn-fg: #ffffff;
  --stuv-btn-radius: var(--radius);
  --stuv-surface: #ffffff;
  --stuv-border: var(--line);
  --stuv-text-muted: var(--ink-faint);
}

/* ---- PDP Try-On button ---- */
.pdp-tryon-box {
  width: 100%;
}
.pdp-tryon-box .stuv-tryon-wrapper {
  display: block;
  width: 100%;
  margin: 0;
}
.pdp-tryon-box .stuv-tryon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 15px 22px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-tint) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 36, 76, 0.16);
  transition: all .35s var(--ease);
  text-decoration: none;
}
.pdp-tryon-box .stuv-tryon-btn:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: 0 6px 20px rgba(92, 148, 203, 0.35);
  transform: translateY(-1px);
  color: #ffffff;
}
.pdp-tryon-box .stuv-tryon-btn .stuv-btn-icon svg {
  stroke: currentColor;
  transition: transform .35s var(--ease);
  display: block;
}
.pdp-tryon-box .stuv-tryon-btn:hover .stuv-btn-icon svg {
  transform: scale(1.1);
}

.stuv-tryon-powered-by {
  display: none !important;
}

/* Floating Launcher & WhatsApp Vertical Stack */
#stuv-tryon-entry-point {
  position: fixed !important;
  bottom: clamp(14px, 2.4vw, 28px) !important;
  right: clamp(14px, 2.4vw, 28px) !important;
  z-index: 999998 !important;
}

body:has(#stuv-tryon-entry-point .is-visible) .wa-fab,
body.has-stuv-look .wa-fab {
  bottom: calc(clamp(14px, 2.4vw, 28px) + 60px) !important;
}

body:has(#stuv-tryon-entry-point .is-visible) .wachat,
body.has-stuv-look .wachat {
  bottom: calc(clamp(14px, 2.4vw, 28px) + 60px + 64px) !important;
}

@media (max-width: 520px) {
  #stuv-tryon-entry-point {
    bottom: 14px !important;
    right: 14px !important;
  }
  body:has(#stuv-tryon-entry-point .is-visible) .wa-fab,
  body.has-stuv-look .wa-fab {
    bottom: 74px !important;
    right: 14px !important;
  }
  body:has(#stuv-tryon-entry-point .is-visible) .wachat,
  body.has-stuv-look .wachat {
    bottom: calc(74px + 58px + 12px) !important;
  }
}

/* Floating Launcher */
#stuv-tryon-entry-point .stuv-entry-btn {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 6px 20px rgba(28, 36, 76, 0.22) !important;
  border-radius: 9999px !important;
  transition: all .3s var(--ease) !important;
}
#stuv-tryon-entry-point .stuv-entry-btn:hover {
  background-color: var(--accent) !important;
  box-shadow: 0 8px 24px rgba(92, 148, 203, 0.35) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Drawer Backdrop & Sheet */
.stuv-drawer-overlay {
  background: rgba(11, 28, 35, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.stuv-drawer-sheet {
  background: var(--page) !important;
  box-shadow: -6px 0 32px rgba(11, 28, 35, 0.18) !important;
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}

/* Drawer Header */
.stuv-drawer-header {
  border-bottom: 1px solid var(--line) !important;
  padding: 20px 26px !important;
}
.stuv-drawer-header h3 {
  font-family: var(--serif) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ink-head) !important;
  letter-spacing: -.01em !important;
}
.stuv-drawer-close {
  color: var(--ink-soft) !important;
  font-size: 26px !important;
  transition: color .25s var(--ease), transform .25s var(--ease) !important;
}
.stuv-drawer-close:hover {
  color: var(--accent) !important;
  transform: scale(1.1) !important;
}

/* Drawer Body & Typography */
.stuv-drawer-content {
  padding: 24px 26px !important;
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}
.stuv-drawer-content h3,
.stuv-result-container h3 {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ink-head) !important;
  letter-spacing: -.01em !important;
}
.stuv-drawer-content h4,
.stuv-upload-section h4 {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}

/* Upload Dropzone */
.stuv-upload-section > div {
  font-family: var(--sans) !important;
}
.stuv-upload-section div[style*="border: 2px dashed"],
.stuv-upload-section div[style*="border:2px dashed"] {
  border: 1.5px dashed var(--line) !important;
  border-radius: var(--radius) !important;
  background: #ffffff !important;
  transition: border-color .3s var(--ease), background-color .3s var(--ease) !important;
}
.stuv-upload-section div[style*="border: 2px dashed"]:hover,
.stuv-upload-section div[style*="border:2px dashed"]:hover {
  border-color: var(--accent) !important;
  background: rgba(92, 148, 203, 0.04) !important;
}

/* Primary Action Buttons */
.stuv-btn-primary,
#stuv-start-generate-btn,
#stuv-choose-photo-btn,
#stuv-view-modal-btn,
#stuv-lead-submit-btn {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  border-radius: var(--radius) !important;
  border: none !important;
  padding: 13px 22px !important;
  box-shadow: 0 4px 12px rgba(28, 36, 76, 0.14) !important;
  transition: all .35s var(--ease) !important;
  cursor: pointer !important;
}
.stuv-btn-primary:hover:not(:disabled),
#stuv-start-generate-btn:hover:not(:disabled),
#stuv-choose-photo-btn:hover:not(:disabled),
#stuv-view-modal-btn:hover:not(:disabled),
#stuv-lead-submit-btn:hover:not(:disabled) {
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(92, 148, 203, 0.32) !important;
  transform: translateY(-1px) !important;
}

/* Secondary Action Buttons */
.stuv-btn-secondary,
#stuv-try-another-btn,
.stuv-result-modal-close {
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--line) !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  border-radius: var(--radius) !important;
  padding: 11px 20px !important;
  transition: all .35s var(--ease) !important;
  cursor: pointer !important;
}
.stuv-btn-secondary:hover:not(:disabled),
#stuv-try-another-btn:hover:not(:disabled),
.stuv-result-modal-close:hover:not(:disabled) {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Action Chips */
.stuv-action-chip {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  border: 1px solid var(--line) !important;
  transition: all .25s var(--ease) !important;
}
.stuv-action-chip:hover:not(:disabled) {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

/* Progress & Generating State */
.stuv-generating-container {
  font-family: var(--sans) !important;
}
.stuv-generating-container h3,
#stuv-generating-title {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink-head) !important;
}
#stuv-generating-body,
.stuv-generating-caption {
  font-family: var(--sans) !important;
  color: var(--ink-soft) !important;
  font-size: 14px !important;
}
.stuv-generating-progress {
  background: rgba(28, 36, 76, 0.08) !important;
  border-radius: 9999px !important;
  height: 6px !important;
  overflow: hidden !important;
}
.stuv-generating-progress span,
#stuv-generating-bar {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%) !important;
  border-radius: 9999px !important;
}

/* Result Modal & Lead Dialog */
.stuv-result-modal-backdrop {
  background: rgba(11, 28, 35, 0.7) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}
.stuv-result-modal-dialog {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 20px 60px rgba(11, 28, 35, 0.25) !important;
  font-family: var(--sans) !important;
}
.stuv-result-modal-header {
  border-bottom: 1px solid var(--line) !important;
  padding: 18px 24px !important;
}
.stuv-result-modal-header h3 {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ink-head) !important;
}
.stuv-result-modal-lead {
  background: var(--page) !important;
  border-left: 1px solid var(--line) !important;
  padding: 24px 28px !important;
}
.stuv-result-modal-lead h4 {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink-head) !important;
  margin-bottom: 10px !important;
}
.stuv-result-modal-lead p.stuv-lead-desc {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}

/* Lead Form Fields */
.stuv-lead-form-group label {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
}
.stuv-lead-form-group input {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  padding: 12px 15px !important;
  border-radius: var(--radius) !important;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.stuv-lead-form-group input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(92, 148, 203, 0.15) !important;
}

/* Privacy note and links */
.stuv-privacy-note {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink-faint) !important;
}
.stuv-privacy-note a {
  color: var(--accent) !important;
  text-decoration: underline !important;
}
.stuv-drawer-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-top: 1px solid var(--line) !important;
  background: var(--page) !important;
  font-family: var(--sans) !important;
  color: var(--ink-faint) !important;
  font-size: 12px !important;
  padding: 16px 24px !important;
}
.stuv-drawer-footer > div,
.stuv-drawer-footer span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.stuv-drawer-footer strong,
.stuv-drawer-footer a {
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
  text-decoration: none !important;
  transition: color .2s var(--ease) !important;
}
.stuv-drawer-footer a:hover {
  color: var(--accent) !important;
}