/* =========================================================
   Hallmark — furniture, Ichalkaranji
   Design system

   Palette is lifted from urbanladder.com's live theme tokens:
     primary #023047 · page #fff9f3 · accent #bea5a9 · link #552531
     orange #ec7744 · footer bottom #022a3f · divider #f2edee
   ========================================================= */

:root{
  /* --- brand (urbanladder tokens) --- */
  --primary:#023047;          /* deep petrol — headers, buttons, footer */
  --primary-deep:#022a3f;     /* footer bottom bar */
  --primary-tint:#35596c;     /* labels */
  --primary-soft:#678391;     /* secondary text */
  --orange:#ec7744;           /* signature accent */
  --orange-deep:#d95f2c;
  --rose:#bea5a9;             /* dusty rose accent */
  --maroon:#552531;           /* links */

  /* --- surfaces --- */
  --page:#fff9f3;             /* warm off-white page */
  --card:#ffffff;
  --sand:#f7ece3;             /* deeper warm panel */
  --divider:#f2edee;

  /* --- ink --- */
  --ink:#010e15;
  --ink-head:#000507;
  --ink-soft:#35596c;
  --ink-faint:#678391;

  --line:rgba(2,48,71,.14);
  --line-soft:rgba(2,48,71,.07);

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

  --serif:"Fraunces","Georgia",serif;
  --sans:"Inter","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(--orange);color:#fff;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.08;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(21px,2.6vw,33px);letter-spacing:-.008em;}
.serif-i{font-style:italic;color:var(--orange);}
.eyebrow{
  font-family:var(--sans);font-weight:600;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);
}
.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(--orange);}
.btn-orange{background:var(--orange);color:#fff;}
.btn-orange:hover{background:var(--orange-deep);}
.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(--orange);border-color:var(--orange);}
.link-u .arrow{transition:transform .35s var(--ease);}
.link-u:hover .arrow{transform:translateX(3px);}

/* ---------- logo ---------- */
/* Official artwork, recoloured to the site orange. Two variants ship in the
   header: petrol for the solid state, white for 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(2,48,71,.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(--orange);transition:width .35s var(--ease);}
.navlink:hover::after,.navlink.active::after{width:100%;}
.hdr .logo{--logo-h:48px;}
.icon-btn{display:inline-flex;align-items:center;gap:.5em;font-size:13.5px;font-weight:600;}
.hdr .icon-btn{background:var(--orange);color:#fff;padding:10px 20px;border-radius:var(--radius);transition:background .3s;}
.hdr .icon-btn:hover{background:var(--orange-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(--orange);}
.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:44px;}
.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 Hallmark information. */
.ftr-built a{color:rgba(255,255,255,.5);text-decoration:none;}
.ftr-built strong{font-weight:600;color:rgba(255,255,255,.8);transition:color .3s;}
.ftr-built a:hover,.ftr-built a:hover strong{color:var(--orange);}
/* 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(--orange);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(1,14,21,.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(--orange);box-shadow:0 0 0 3px rgba(236,119,68,.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(1,14,21,.5) 0%,rgba(1,14,21,0) 26%),
  linear-gradient(0deg,rgba(1,14,21,.88) 0%,rgba(1,14,21,.55) 30%,rgba(1,14,21,.16) 55%,rgba(1,14,21,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(--orange);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(--orange);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(--orange);}

/* ---- 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(2,48,71,.86) 0%,rgba(2,48,71,.5) 58%,rgba(2,48,71,.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(--orange);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(--orange);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(2,48,71,.9) 0%,rgba(2,48,71,.55) 45%,rgba(1,14,21,.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(--orange);}

.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(--orange);}

.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(--orange);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(--orange);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(--orange);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(--orange);}
.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(--orange);}
.warranty-text{
  font-size:16px;line-height:1.65;color:var(--ink);background:#fff;
  padding:22px;border-left:3px solid var(--orange);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 of "Hallmark" 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(--orange);}
.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(2,48,71,.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(--orange);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(1,14,21,.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(1,14,21,.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(--orange);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(--orange);}
.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:#ffc9a6;
  text-shadow:0 1px 10px rgba(1,14,21,.75), 0 0 3px rgba(1,14,21,.5);
}
.list-hero-inner .eyebrow{text-shadow:0 1px 10px rgba(1,14,21,.65);}
.chip-note{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);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(2,48,71,.93),rgba(1,14,21,.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(--orange);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(--orange);}
.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(2,48,71,.09);
  border-color:rgba(236,119,68,.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(236,119,68,.12);color:var(--orange);padding:5px 12px;border-radius:100px;
}
.mattress-card-icon{
  width:48px;height:48px;border-radius:12px;background:rgba(236,119,68,.1);color:var(--orange);
  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(--orange);
  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(--orange);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(--orange);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(--orange);border-color:var(--orange);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:34px;}
@media(max-width:860px){
  .hdr .logo{--logo-h:38px;}
  .ftr .logo{--logo-h:38px;}
}


/* ---------- 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:#ffb38a;}

.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(2,48,71,.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:#ffb38a;}

/* 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(--orange);
}
.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(2,48,71,.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(--orange),rgba(236,119,68,.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(2,48,71,.16);
}

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

.tl-yr{
  font-family:var(--serif);font-size:clamp(34px,4vw,54px);font-weight:600;
  color:var(--orange);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;}
}