/* ==========================================================================
   AEK by The KariGhars - Ultra Luxury Interiors, Gurugram
   Landing page stylesheet
   The Brand Bee - V1.0, 14 September 2026
   Palette drawn from theaek.com (near-black, warm grey, restrained champagne).
   Type: Matteo Bold for headings, Matteo Regular for content.
   Editorial pacing referenced from yabupushelberg.com.
   ========================================================================== */

@font-face{
  font-family:'Matteo';
  src:url('../fonts/matteo-font-family/Matteo-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Matteo';
  src:url('../fonts/matteo-font-family/Matteo-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#0f0e0d;              /* near-black canvas            */
  --ink-2:#171615;            /* raised dark panel            */
  --paper:#f6f3ee;            /* warm off-white               */
  --paper-2:#efeae2;          /* warm section tint            */
  --line:#d9d2c7;            /* hairline on paper            */
  --line-dark:#2e2b27;       /* hairline on ink              */
  --grey:#8c8b8a;            /* AEK body grey                */
  --grey-2:#6a6764;
  --champagne:#b4986a;       /* single accent, used sparingly */
  --champagne-soft:#cbb894;

  --display:'Matteo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans:'Matteo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --w-head:500;               /* Matteo Bold */
  --w-body:400;               /* Matteo Regular */

  --pad:clamp(22px, 5vw, 90px);
  --gap:clamp(34px, 5vw, 74px);
  --sec-y:clamp(64px, 9vw, 140px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:var(--w-body);
  font-size:clamp(15px,1.02vw,16.5px); line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

.wrap{ width:100%; max-width:1440px; margin:0 auto; padding:0 var(--pad); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:99; background:var(--ink); color:var(--paper); padding:10px 16px; }

/* ---------- shared type ----------
   Headings: Matteo Bold
   Body / UI: Matteo Regular
   ---------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:var(--w-head); margin:0;
  text-transform:uppercase; letter-spacing:.012em;
}
h1{ font-size:clamp(30px,4.9vw,62px); line-height:1.16; font-weight:var(--w-head); }
h2{ font-size:clamp(23px,2.65vw,37px); line-height:1.24; }
h1 em,h2 em,h3 em{ font-style:normal; font-weight:var(--w-head); color:var(--champagne); }
.light,.light em{ color:var(--paper); }
.light em{ color:var(--champagne-soft); }

.eyebrow,.num{
  font-family:var(--sans); font-weight:var(--w-body); text-transform:uppercase;
  font-size:10.5px; letter-spacing:1px; color:var(--grey-2); margin:0 0 18px;
}
.num.light{ color:var(--champagne-soft); }
.body{ color:var(--grey-2); margin:24px 0 0; max-width:62ch; }
.body.light{ color:#c9c4bc; }
.body.lede{ font-size:clamp(16px,1.18vw,19px); color:var(--grey-2); }
.sec{ padding:var(--sec-y) 0; }
.sec-head{ max-width:820px; margin-bottom:clamp(34px,4.4vw,64px); }
.sec-cta{ margin-top:clamp(30px,3.6vw,52px); }

/* reveal on scroll */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.7,.3,1); }
.rev.in{ opacity:1; transform:none; }
.rev.d1{ transition-delay:.08s } .rev.d2{ transition-delay:.16s }
.rev.d3{ transition-delay:.24s } .rev.d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .hero-strip-track{ animation:none; }
}

/* ---------- buttons ---------- */
.btn {
  display: flex;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: var(--w-body);
  letter-spacing: 0px;
  text-transform: capitalize;
  padding: 0px 30px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background .35s ease, color .35s ease, border-color .35s ease, opacity .35s ease;
  border-radius: 100px;
  height: 52px;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-ghost{ border-color:rgba(246,243,238,.45); color:var(--paper); }
.btn-ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-solid{ background:var(--ink); border-color:var(--ink); color:var(--paper); width:100%; padding:18px 26px; }
.btn-solid:hover{ background:#2a2724; border-color:#2a2724; color:var(--paper); }
.btn-sm{ padding:12px 20px; font-size:10.5px; }
.link-arrow{
  font-family:var(--sans); font-size:11.5px; font-weight:var(--w-body); letter-spacing:1px;
  text-transform:uppercase; border-bottom:1px solid var(--champagne); padding-bottom:6px;
  transition:color .3s ease, border-color .3s ease;
}
.link-arrow::after{ content:'\2192'; margin-left:12px; }
.link-arrow:hover{ color:var(--champagne); }

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:28px 0; transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.hdr.stuck{ background:rgba(15,14,13,.94); backdrop-filter:blur(9px); padding:11px 0; border-color:var(--line-dark); }
.hdr-in{ display:flex; align-items:center; gap:26px; width:100%; max-width:1440px; margin:0 auto; padding:0 var(--pad); }
.hdr-logo{ display:flex; align-items:center; flex:0 0 auto; }
.hdr-logo img{ width:clamp(86px,7vw,112px); }
.hdr-nav{
  display:flex; align-items:center; gap:clamp(16px,1.9vw,32px);
  margin-left:auto; height:44px;
}
.hdr-nav a{
  display:flex; align-items:center; height:44px; position:relative;
  font-size:11px; font-weight:var(--w-body); letter-spacing:.7px; text-transform:uppercase; line-height:1;
  color:rgba(246,243,238,.82); transition:.3s;
}
.hdr-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:13px; height:1px;
  background:transparent; transition:.3s;
}
.hdr-nav a:hover{ color:var(--paper); }
.hdr-nav a:hover::after{ background:var(--champagne); }
.hdr-cta{ display:flex; align-items:center; gap:20px; height:44px; }
.hdr-cta .tel{
  display:flex; align-items:center; height:44px;
  font-size:11.5px; letter-spacing:.4px; line-height:1; color:rgba(246,243,238,.82);
}
.hdr-cta .tel:hover{ color:var(--paper); }
.hdr-cta .btn{
  height:44px; padding:0 20px; font-size:11px; line-height:1;
  border-color:rgba(246,243,238,.5); color:var(--paper);
}
.hdr-cta .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.burger{ display:none; background:none; border:0; padding:8px; margin-left:auto; }
.burger span{ display:block; width:24px; height:1px; background:var(--paper); margin:5px 0; transition:.3s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }
.drawer{ display:none; }

/* ---------- 1. hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--ink); overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.5; transform:scale(1.04); }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(15 14 13 / 20%) 0%, rgb(15 14 13 / 28%) 42%, rgb(15 14 13 / 66%) 100%);
}
.hero-in{
  position:relative; z-index:2; width:100%; max-width:1440px; margin:0 auto;
  padding:clamp(140px,17vh,220px) var(--pad) clamp(96px,13vh,150px);
}
.hero .eyebrow{ color:var(--champagne-soft); }
.hero h1 {
  color: var(--paper);
  max-width: 19ch;
  font-size: 60px;
}
.hero-lede{ color:#ddd8d0; font-size:clamp(16px,1.32vw,21px); line-height:1.4; max-width:58ch; margin:16px 0px; }
.hero-sub {
  color: #a8a39b;
  max-width: 52ch;
  margin: 14px 0 0;
  font-size: 16px !important;
  line-height: 1.4;
}
.hero-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.4vw,44px); }
.hero .btn:not(.btn-ghost){
  background:var(--paper);
  border-color:var(--paper);
  color:var(--ink);
}
.hero .btn:not(.btn-ghost):hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
  opacity:.82;
}
.hero-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:15px var(--pad); border-top:1px solid var(--line-dark); background:rgba(15,14,13,.6);
  font-size:10.5px; font-weight:var(--w-body); letter-spacing:.9px; text-transform:uppercase; color:#b2ada5;
}
.hero-strip-track,.hero-strip-set{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; }
.hero-strip-set[aria-hidden="true"]{ display:none; }
.hero-strip i{ width:4px; height:4px; background:var(--champagne); border-radius:50%; flex:0 0 auto; }

/* ---------- two-column blocks ---------- */
.two{ display:grid; grid-template-columns:1.02fr .98fr; gap:var(--gap); align-items:center; }
.two.flip .col-media{ order:-1; }
.col-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.explore{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; margin:clamp(26px,3vw,38px) 0 0; padding:0; }
.explore a{
  font-size:11px; font-weight:var(--w-body); letter-spacing:.8px; text-transform:uppercase;
  color:var(--grey-2); border-bottom:1px solid var(--line); padding-bottom:5px; transition:.3s;
}
.explore a:hover{ color:var(--ink); border-color:var(--champagne); }

/* ---------- 3. philosophy ---------- */
.philosophy{ background:var(--paper-2); }
.pull{
  font-family:var(--display); font-weight:var(--w-head); text-transform:uppercase; letter-spacing:.012em;
  font-size:clamp(16px,1.5vw,22px); line-height:1.45; color:var(--ink);
  margin:clamp(28px,3vw,40px) 0 0; padding-left:22px; border-left:1px solid var(--champagne);
}

/* ---------- 4. disciplines ---------- */
.disc-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.disc-grid li{
  font-family:var(--display); font-weight:var(--w-head); text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(15px,1.42vw,21px); color:var(--ink);
  padding:clamp(26px,3vw,40px) 18px clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:16px;
  transition:color .3s ease;
}
.disc-grid li span{
  font-family:var(--sans); font-size:10.5px; font-weight:var(--w-body); letter-spacing:.8px;
  color:var(--champagne); flex:0 0 auto;
}
.disc-grid li:hover{ color:var(--champagne); }

/* ---------- 5. collective ---------- */
.collective{ background:var(--ink); color:var(--paper); }
.collective h2{ color:var(--paper); }
.collective h2 em{ color:var(--champagne-soft); }
.collective .num{ color:var(--champagne-soft); }
.collective .body{ color:#c9c4bc; }
.part-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.part figure{ margin:0 0 22px; overflow:hidden; }
.part img{ width:100%; aspect-ratio:1/1.02; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.part:hover img{ transform:scale(1.045); }
.part h3{ font-size:clamp(14px,1.16vw,17px); font-weight:var(--w-head); letter-spacing:.03em; color:var(--paper); }
.part p{ color:#a8a39b; margin:10px 0 0; font-size:14.5px; }
.collective .link-arrow{ color:var(--paper); }
.collective .link-arrow:hover{ color:var(--champagne-soft); }

/* ---------- 6. story ---------- */
.story{ position:relative; background:var(--ink-2); overflow:hidden; }
.story-media{ position:absolute; inset:0; }
.story-media img{ width:100%; height:100%; object-fit:cover; opacity:.28;object-position: bottom; }
.story-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,14,13,.95) 0%, rgba(15,14,13,.72) 62%, rgba(15,14,13,.5) 100%); }
.story-in{ position:relative; z-index:2; }
.story-in > div{ max-width:720px; }
.story-one{
  font-family:var(--display); font-weight:var(--w-head); text-transform:uppercase; letter-spacing:.012em;
  font-size:clamp(15px,1.4vw,21px); color:var(--champagne-soft); margin:clamp(22px,2.6vw,32px) 0 0;
}
.story-triad{
  font-family:var(--sans); font-size:11.5px; font-weight:var(--w-body); letter-spacing:1px; text-transform:uppercase;
  color:var(--paper); margin:clamp(28px,3.2vw,42px) 0 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.story-triad i{ color:var(--champagne); font-style:normal; }

/* ---------- 7. the work ---------- */
.rail-wrap{ margin-top:clamp(30px,3.6vw,48px); }
.rail{
  display:flex; gap:clamp(16px,2vw,30px); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:auto;
  padding:0 var(--pad) 10px; cursor:grab; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  user-select:none; -webkit-user-select:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.card{ flex:0 0 clamp(240px,25vw,360px); scroll-snap-align:start; scroll-snap-stop:normal; }
.card figure{ margin:0 0 18px; overflow:hidden; }
.card figure,.card img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
.card img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.card:hover img{ transform:scale(1.045); }
.card h3{ font-size:clamp(13.5px,1.1vw,16px); font-weight:var(--w-head); letter-spacing:.03em; }
.card p{ color:var(--grey-2); font-size:14px; margin:9px 0 0; }
.rail-ui{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:1440px; margin:22px auto 0; padding:0 var(--pad);
}
.rail-hint{ font-size:10.5px; font-weight:var(--w-body); letter-spacing:.9px; text-transform:uppercase; color:var(--grey); margin:0; }
.rail-btns{ display:flex; gap:10px; }
.rail-btns button{
  width:46px; height:46px; border:1px solid var(--line); background:transparent; color:var(--ink);
  font-size:15px; transition:.3s;
}
.rail-btns button:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- 8. experience centre ---------- */
.centre{ background:var(--paper-2); }
.centre-addr{
  font-style:normal; font-size:14.5px; color:var(--grey-2);
  margin:clamp(22px,2.6vw,30px) 0 0; padding-left:20px; border-left:1px solid var(--champagne);
}
.centre .btn:not(.btn-ghost){
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.centre .btn:not(.btn-ghost):hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
  opacity:.82;
}
.centre .btn-ghost{ border-color:var(--ink); color:var(--ink); }
.centre .btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- 9. invitation ---------- */
.invitation{ background:var(--ink); color:var(--paper); }
.form-two{ grid-template-columns:1fr 1fr; align-items:start; }
.assure{ list-style:none; margin:clamp(26px,3vw,36px) 0 0; padding:0; }
.assure li{ position:relative; padding:0 0 0 22px; margin-bottom:11px; color:#a8a39b; font-size:14.5px; }
.assure li::before{ content:''; position:absolute; left:0; top:11px; width:9px; height:1px; background:var(--champagne); }
.assure-tel{ font-size:13.5px; color:#a8a39b; margin:26px 0 0; }
.assure-tel a{ color:var(--paper); border-bottom:1px solid var(--champagne); padding-bottom:2px; }

.form-card{ background:var(--paper); color:var(--ink); padding:clamp(24px,3vw,42px); }
.f-row{ margin-bottom:18px; border:0; padding:0; }
.f-row.two-up{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label,legend{
  display:block; font-size:10.5px; font-weight:var(--w-body); letter-spacing:.8px; text-transform:uppercase;
  color:var(--grey-2); margin-bottom:8px;
}
label span{ color:var(--champagne); }
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%; font-family:var(--sans); font-size:15px; font-weight:var(--w-body); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:10px 0; transition:border-color .3s ease;
}
input:focus,select:focus,textarea:focus{ outline:0; border-color:var(--champagne); }
textarea{ resize:vertical; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chips label{ margin:0; }
.chips input{ position:absolute; opacity:0; width:0; height:0; }
.chips span{
  display:inline-block; font-size:11.5px; letter-spacing:.5px; text-transform:none; font-weight:var(--w-body);
  color:var(--grey-2); border:1px solid var(--line); padding:9px 15px; transition:.25s; cursor:pointer;
}
.chips input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chips input:focus-visible + span{ border-color:var(--champagne); }
.chips.is-bad span{ border-color:var(--champagne); }
.f-note{ font-size:11.5px; color:var(--grey); margin:14px 0 0; }
.f-ok{ font-size:14px; color:var(--ink); margin:16px 0 0; padding-left:18px; border-left:2px solid var(--champagne); }
.f-err{ font-size:14px; color:#8a3b2a; margin:16px 0 0; padding-left:18px; border-left:2px solid #8a3b2a; }
.btn-solid:disabled{ opacity:.55; cursor:wait; }

/* ---------- thank you page ---------- */
.page-thanks{ background:var(--ink); }
.page-thanks .hdr{ position:fixed; }
.thanks{
  min-height:100svh; display:flex; align-items:center;
  background:var(--ink); color:var(--paper);
  padding:clamp(120px,16vh,180px) 0 clamp(72px,10vh,120px);
}
.thanks-in{ max-width:720px; }
.thanks-kicker{
  font-size:10.5px; font-weight:var(--w-body); letter-spacing:1px; text-transform:uppercase;
  color:var(--champagne-soft); margin:0 0 18px;
}
.thanks h1{
  color:var(--paper); font-size:clamp(28px,4.2vw,52px); line-height:1.18; max-width:18ch;
  word-spacing:.18em;
}
.thanks .lede{ margin-top:22px; max-width:52ch; }
.thanks .assure{ max-width:52ch; }
.thanks .hero-btns .btn:not(.btn-ghost){
  background:var(--paper); border-color:var(--paper); color:var(--ink);
}
.thanks .hero-btns .btn:not(.btn-ghost):hover{ opacity:.82; }
.page-thanks .thanks-hdr-cta{ margin-left:auto; }
.page-thanks .hdr-cta .btn{
  height:44px; padding:0 20px; font-size:11px;
  border-color:rgba(246,243,238,.5); color:var(--paper);
}
.page-thanks .hdr-cta .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
@media (max-width:1024px){
  .page-thanks .hdr-cta{ display:flex; }
}

/* ---------- 10. closing ---------- */
.closing{ text-align:center; }
.closing .num,.closing .body{ margin-left:auto; margin-right:auto; }
.closing .btn{
  display:inline-flex;
  width:max-content;
  justify-content:center;
  margin:clamp(26px,3vw,38px) auto 0;
}

/* ---------- footer ---------- */
.ftr{ background:var(--ink-2); color:#a8a39b; padding:clamp(52px,6vw,84px) 0 0; }
.ftr-in{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--gap); }
.ftr-brand img{ width:104px; margin-bottom:20px; }
.ftr-brand p,.ftr-col p{ font-size:14px; line-height:1.85; margin:0; }
.ftr-col h4{
  font-family:var(--display); font-size:10.5px; font-weight:var(--w-head); letter-spacing:1px;
  text-transform:uppercase; color:var(--paper); margin:0 0 14px;
}
.ftr-col a:hover{ color:var(--paper); }
.ftr-base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:clamp(40px,5vw,64px); padding:22px var(--pad); border-top:1px solid var(--line-dark);
}
.ftr-base p{ font-size:11px; letter-spacing:.5px; margin:0; color:#7d7973; }

/* ---------- desktop floating contact ---------- */
.float-cta{
  position:fixed; right:22px; bottom:28px; z-index:55;
  display:flex; flex-direction:column; gap:10px;
}
.float-cta a{
  position:relative; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding:0; line-height:0; overflow:visible;
  background:var(--ink); color:var(--paper);
  box-shadow:0 10px 28px rgba(15,14,13,.28);
  transition:transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.float-cta a:hover{
  transform:translateY(-2px);
  background:#2a2724;
  box-shadow:0 14px 32px rgba(15,14,13,.34);
}
.float-cta .float-wa{ background:#25D366; color:#fff; }
.float-cta .float-wa:hover{ background:#1EBE57; }
.float-cta svg{
  width:26px; height:26px; display:block; flex:0 0 auto;
  overflow:visible; overflow-clip-margin:unset;
}
.float-cta .float-wa svg{ width:28px; height:28px; }
.float-cta span{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}

/* ---------- sticky mobile bar ---------- */
.sticky-bar{ display:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .hdr-nav,.hdr-cta,.float-cta{ display:none; }
  .burger{ display:block; }
  .drawer{
    display:block; max-height:0; overflow:hidden; background:rgba(15,14,13,.98);
    transition:max-height .45s ease; margin-top:14px;
  }
  .drawer.open{ max-height:70vh; }
  .drawer a{
    display:block; padding:15px var(--pad); font-size:12px; letter-spacing:.8px; text-transform:uppercase;
    color:rgba(246,243,238,.85); border-bottom:1px solid var(--line-dark);
  }
  .drawer .drawer-cta{ color:var(--champagne-soft); }
  .two,.form-two{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); }
  .two.flip .col-media{ order:0; }
  .part-grid{ grid-template-columns:1fr 1fr; }
  .disc-grid{ grid-template-columns:1fr 1fr; }
  .ftr-in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:680px){
  body{ padding-bottom:52px; }          /* room for the sticky bar */
  .hero{ min-height:92svh; }
  .hero-media img{ opacity:.45; }
  .hero h1{ max-width:none; }
  .hero-btns .btn{ width:100%; text-align:center; }
  .hero-strip{
    overflow:hidden; justify-content:flex-start; font-size:9.5px; padding:12px 0;
  }
  .hero-strip-track{
    display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:0; width:max-content;
    animation:strip-marquee 22s linear infinite;
  }
  .hero-strip-set{
    display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:18px;
    flex:0 0 auto; padding:0 18px; white-space:nowrap;
  }
  .hero-strip-set[aria-hidden="true"]{ display:flex; }
  .hero-strip span{ white-space:nowrap; }
  @keyframes strip-marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .part-grid,.disc-grid,.ftr-in{ grid-template-columns:1fr; }
  .f-row.two-up{ grid-template-columns:1fr; }
  .card{ flex:0 0 78vw; }
  .ftr-base{ flex-direction:column; }
  .sticky-bar{
    display:flex; align-items:stretch; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(15,14,13,.97); border-top:0; backdrop-filter:blur(8px);
  }
  .sticky-bar a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:12px 4px; font-size:11px; font-weight:var(--w-body); line-height:1;
    letter-spacing:0; text-transform:capitalize; color:var(--paper);
    border-right:1px solid var(--line-dark); white-space:nowrap;
  }
  .sticky-bar a:last-child{ border-right:0; }
  .sticky-ico{ width:14px; height:14px; flex:0 0 auto; display:block; }
  .sticky-bar .sticky-main{
    flex:1.35; background:var(--champagne); color:#17150f;
    white-space:normal; line-height:1.15; padding:12px 6px; text-align:center;
  }
  .hero h1 {
    font-size: 30px;
}
figure{
  margin:0px !important
}
.hero-btns .btn_arrange_btn{
  display: none;
}
}

@media print{
  .hdr,.sticky-bar,.rail-ui,.float-cta{ display:none; }
  body{ background:#fff; color:#000; }
}
.kitchen-image{
  object-position: right;
}