/* ============================================================================
   Pak Middle East — design system v2
   Warm, saturated, textile-led. Colour does the work; images are still missing.
   No framework, no web fonts, no external requests.
   ========================================================================= */

:root{
  /* ink + surfaces */
  --ink:#17120e;
  --ink-2:#463a30;
  --mut:#7d7168;
  --line:#ece4d9;
  --line-2:#d9cdbc;
  --bg:#ffffff;
  --bg-2:#fdf9f3;
  --bg-3:#f6eee1;

  /* brand — warm brass */
  --brand:#a97c3f;
  --brand-dk:#8a6230;
  --brand-lt:#f8f0e2;

  /* saturated accents — used as full colour blocks, not just highlights */
  --teal:#0f5f57;
  --teal-lt:#e4f2ef;
  --teal-dk:#0a4741;
  --terra:#c2542f;
  --terra-lt:#fdece5;
  --plum:#6b2545;
  --gold:#e0a53c;
  /* --gold is a decorative fill and fails WCAG AA as text: #e0a53c on white is
     2.18:1. --gold-ink is the same hue taken down to 4.86:1 for glyphs that
     carry meaning rather than decoration — the review stars, which are the only
     representation of an individual review's rating. */
  --gold-ink:#96690f;
  --sand:#e8d7b8;
  --ok:#157347;
  /* WhatsApp's own #25d366 gives white text 1.98:1, which is severe for a CTA
     that sits on every page. Taken to a deeper green of the same family:
     4.86:1, still unmistakably the WhatsApp button, icon unchanged. */
  --wa:#0f7a45;
  --hot:#d62828;

  /* gradients */
  --g-warm:linear-gradient(135deg,#fdf6ea 0%,#f6e3c9 50%,#eed4b0 100%);
  --g-brand:linear-gradient(135deg,#c4914c 0%,#a97c3f 45%,#7d5729 100%);
  --g-teal:linear-gradient(135deg,#127166 0%,#0f5f57 50%,#0a4741 100%);
  --g-dusk:linear-gradient(160deg,#2b1c14 0%,#4a2f1e 45%,#6b3f24 100%);
  --g-terra:linear-gradient(135deg,#e0704a 0%,#c2542f 100%);

  --shadow:0 1px 2px rgba(23,18,14,.05),0 8px 24px -14px rgba(23,18,14,.22);
  --shadow-lg:0 2px 6px rgba(23,18,14,.07),0 24px 56px -24px rgba(23,18,14,.34);
  --shadow-xl:0 4px 10px rgba(23,18,14,.08),0 40px 90px -30px rgba(23,18,14,.42);
  --r:16px; --r-sm:10px; --r-lg:24px;
  --wrap:1200px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(32px,5vw,56px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(18px,2vw,23px)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
li{margin-bottom:.4em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;
  padding:15px 28px;border-radius:100px;border:2px solid transparent;
  font:700 15px/1 var(--sans);cursor:pointer;transition:.18s cubic-bezier(.2,.8,.3,1);text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-p{background:var(--g-brand);color:#fff;box-shadow:0 6px 18px -6px rgba(169,124,63,.6)}
.btn-p:hover{color:#fff;box-shadow:0 12px 28px -8px rgba(169,124,63,.75)}
.btn-o{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-o:hover{border-color:var(--brand);color:var(--brand-dk)}
.btn-gh{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.36);backdrop-filter:blur(6px)}
.btn-gh:hover{background:rgba(255,255,255,.24);color:#fff}
.btn-w{background:var(--wa);color:#fff;box-shadow:0 6px 18px -6px rgba(15,122,69,.55)}
.btn-w:hover{color:#fff}
.btn-lg{padding:18px 36px;font-size:16.5px}
.btn-sm{padding:10px 18px;font-size:13.5px;border-width:1px}

/* ---------------------------------------------------------------- header */
/* status dot in the hero eyebrow (previously scoped to the announcement bar) */
.spark{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(224,165,60,.7);animation:pulse 2.4s infinite;flex-shrink:0}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,165,60,.7)}70%{box-shadow:0 0 0 9px rgba(224,165,60,0)}100%{box-shadow:0 0 0 0 rgba(224,165,60,0)}}

header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:.25s}
header.site.shrunk{box-shadow:0 6px 24px -12px rgba(23,18,14,.24)}
.hd{display:flex;align-items:center;gap:14px;padding:13px 0}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:clamp(30px,2.7vw,42px);width:auto}
.logo:hover{text-decoration:none}
.logo .mark{width:40px;height:40px;border-radius:11px;background:var(--g-brand);
  display:grid;place-items:center;color:#fff;font:700 18px var(--sans);
  box-shadow:0 4px 12px -4px rgba(169,124,63,.7)}
.logo small{display:block;font:600 10.5px/1.1 var(--sans);color:var(--brand);letter-spacing:.1em;text-transform:uppercase}

nav.main{margin-left:auto;display:flex;align-items:center;gap:1px;flex-wrap:nowrap}
nav.main .btn{white-space:nowrap;flex-shrink:0}
nav.main a.nl{padding:9px clamp(5px,0.62vw,10px);border-radius:9px;color:var(--ink-2);font-size:14.5px;font-weight:600;white-space:nowrap}
nav.main a.nl:hover{background:var(--brand-lt);text-decoration:none;color:var(--brand-dk)}
.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:310px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-xl);
  padding:9px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:10px 13px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14.5px}
.drop a:hover{background:var(--brand-lt);color:var(--brand-dk);text-decoration:none}
.drop a b{display:block;font-weight:600;color:var(--ink)}
.drop a span{font-size:12.5px;color:var(--mut)}

.burger{display:none;margin-left:auto;background:var(--ink);color:#fff;border:0;
  border-radius:10px;padding:11px 15px;cursor:pointer;font:600 14px var(--sans)}
#mnav{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 0 18px;
  max-height:78vh;overflow-y:auto}
#mnav.open{display:block}
#mnav a{display:block;padding:12px 20px;color:var(--ink-2);border-bottom:1px solid var(--bg-3);font-size:15.5px}
#mnav .grp{padding:16px 20px 6px;font:700 11.5px/1 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand)}
@media (max-width:1450px){nav.main a.nl{font-size:13.6px}}
@media (max-width:1320px){nav.main a.nl{font-size:13px} nav.main .btn{font-size:13px;padding-left:14px;padding-right:14px}}
@media (max-width:1215px){nav.main{display:none} .burger{display:block}}

/* ================================================================ HERO */
/* ---------------------------------------------------------------- hero */
/* Photo sits in the normal flow at z-index 0 with the tint above it — a
   negative z-index child would paint behind the element's own background. */
.hero{position:relative;color:#fff;overflow:hidden;background:#12211d;
  padding:clamp(40px,5vw,68px) 0 0}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg picture{display:contents}
/* absolute rather than height:100% — percentage heights through a <picture>
   are unreliable, and this fills the box whatever the wrapper resolves to */
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% 50%;
  filter:saturate(1.1) contrast(1.06) brightness(1.12)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(6,16,14,.95) 0%, rgba(8,16,13,.92) 22%, rgba(10,15,12,.80) 38%,
                            rgba(14,15,11,.46) 58%, rgba(16,16,12,.10) 100%)}
@media (max-width:900px){
  .hero::after{background:linear-gradient(180deg,rgba(10,24,22,.93),rgba(30,20,12,.88))}
}
.hero > .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4vw,56px);align-items:start}
/* The enquiry form is taller than the copy beside it on the contact, booking,
   product and area heroes, which left a block of empty background under the
   text — read as a hole rather than as space. Centring the short column shares
   that space above and below it instead. Only where the difference is real:
   below 900px the hero is a single column and this does nothing. */
@media (min-width:901px){
  .hero > .wrap{align-items:center}
  .hero > .wrap > :first-child{align-self:center}
}
.hero-copy{max-width:none}
.hero h1{color:#fff;margin-bottom:20px;font-size:clamp(34px,4.6vw,58px);line-height:1.08;
  text-wrap:balance;text-shadow:0 2px 26px rgba(0,0,0,.28)}
.hero h1 em{font-style:normal;
  background:linear-gradient(100deg,#f3d9a0,#e0a53c 48%,#f6e3bb);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:clamp(16.5px,1.35vw,19px);color:rgba(255,255,255,.92);
  max-width:54ch;margin-bottom:30px;text-shadow:0 1px 14px rgba(0,0,0,.3)}
/* the default link ink is 3:1 on the dark hero. --gold is flagged above as
   decorative because it fails on white, but reads 7.6:1 against the hero. The
   spec cells are transparent over the hero too, and carry the tel:/mailto:
   links that replace the contact placeholders once those are real. */
.hero .lede a,.hero table.spec td a{color:var(--gold)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero .cta .btn{flex:0 1 auto}
@media (min-width:1100px){.hero .cta .btn{white-space:nowrap}}
.hero .cta .btn svg{flex-shrink:0}


.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:8px 17px;
  font-size:12.5px;font-weight:600;color:#f6e6cc;margin-bottom:22px;backdrop-filter:blur(8px)}

/* One band across the full width, instead of stats on the left and trust cards
   floating on the right with a dead gap between them. */
.hero-band{position:relative;z-index:2;margin-top:clamp(26px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(6,18,16,.30),rgba(6,18,16,.62));
  backdrop-filter:blur(6px);padding:22px 0 4px}
.hb-stats{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  gap:14px;margin:0 0 20px;padding:0}
.hb-stats li{text-align:center}
.hb-stats b{display:block;font:800 clamp(19px,2.1vw,26px)/1 var(--sans);
  color:var(--gold);letter-spacing:-.02em;margin-bottom:4px}
.hb-stats span{font-size:12px;color:rgba(255,255,255,.72);line-height:1.3;display:block}

.hb-books{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding:16px 0 18px}
.hb-lead{font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-right:4px}
.hb-book{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;transition:.16s;flex:1 1 190px;min-width:0}
.hb-book:hover{background:rgba(255,255,255,.17);border-color:var(--gold);text-decoration:none;transform:translateY(-2px)}
.hb-book img{width:38px;height:50px;object-fit:cover;object-position:center;border-radius:6px;
  flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 1px rgba(224,165,60,.45)}
.hb-book b{display:block;font-size:14px;color:#fff;line-height:1.2}
.hb-book i{display:block;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.66);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:900px){
  .hero > .wrap{grid-template-columns:1fr}
  .hero-copy{max-width:none}
  .hb-stats{grid-template-columns:repeat(3,1fr);gap:16px 10px}
  .hb-stats li:nth-child(4),.hb-stats li:nth-child(5){grid-column:span 1}
}
@media (max-width:560px){
  .hb-stats{grid-template-columns:repeat(2,1fr)}
  .hb-book{flex:1 1 100%}
}

/* the wizard flashes when the hero button points at it */
@keyframes wizFlash{0%,100%{box-shadow:var(--shadow-xl)}
  35%{box-shadow:0 0 0 5px rgba(224,165,60,.55),var(--shadow-xl)}}
.wiz.flash{animation:wizFlash 1.1s ease-out 2}

/* the live-preview stage now lives in the "live preview" block below */

.offerhead{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
@media (max-width:820px){.offerhead{grid-template-columns:1fr;gap:18px}}

@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:32px}
  .hero .wrap > div[style*='grid-column:2']{grid-column:1!important;margin-top:0!important}}

/* ================================================================ WIZARD */
.wiz{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow:hidden;color:var(--ink)}
.wiz .bar{height:5px;background:var(--bg-3)}
.wiz .bar i{display:block;height:100%;background:var(--g-brand);width:20%;transition:width .35s cubic-bezier(.2,.8,.3,1)}
.wiz .pad{padding:26px 26px 24px}
.wiz .step{display:none;animation:fade .3s}
.wiz .step.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wiz .cnt{font:700 11.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--brand-dk);margin-bottom:9px}
.wiz h3{font-size:22px;margin-bottom:5px}
.wiz .sub{color:var(--mut);font-size:14px;margin-bottom:18px}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:13px;padding:14px 16px;border:2px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;transition:.15s;background:#fff;text-align:left;font:inherit;width:100%}
.opt:hover{border-color:var(--brand);background:var(--brand-lt)}
.opt[aria-pressed=true]{border-color:var(--brand);background:var(--brand-lt);
  box-shadow:0 0 0 3px rgba(169,124,63,.14)}
.opt .ic{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  font-size:19px;background:var(--bg-3)}
.opt b{display:block;font-size:15px}
.opt span{display:block;font-size:12.5px;color:var(--mut);line-height:1.4}
.wiz .nav{display:flex;gap:10px;margin-top:18px;align-items:center}
.wiz .back{background:none;border:0;color:var(--mut);cursor:pointer;font:600 14px var(--sans);padding:8px}
.wiz .back:hover{color:var(--ink)}
.wiz .result{background:var(--g-dusk);color:#fff;padding:22px 26px}
.wiz .result h3{color:#fff}
.wiz .big{font:800 clamp(30px,5vw,42px)/1 var(--sans);letter-spacing:-.02em;margin:6px 0}
@media (max-width:520px){.opts.two{grid-template-columns:1fr} .wiz .pad{padding:20px}}

/* the enquiry form as a card on the dark hero, same treatment as .wiz. On the
   light sections it is also rendered in it needs none of this. */
.hero .hero-card{background:#fff;color:var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);padding:26px 26px 24px}
@media (max-width:520px){.hero .hero-card{padding:20px}}

/* ---------------------------------------------------------------- fields */
.field{margin-bottom:15px}
.field label{display:block;font:700 12.5px/1 var(--sans);margin-bottom:7px;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:2px solid var(--line);
  border-radius:var(--r-sm);font:15px var(--sans);background:#fff;color:var(--ink);transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(169,124,63,.14)}
.field .row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.field .x{color:var(--mut)}
.hint{font-size:12.5px;color:var(--mut);margin-top:6px}

/* ---------------------------------------------------------------- ticker */
.ticker{background:var(--g-terra);color:#fff;padding:11px 0;overflow:hidden;white-space:nowrap}
.ticker .run{display:inline-block;animation:slide 30s linear infinite;font-weight:600;font-size:14px}
.ticker .run span{margin:0 26px;display:inline-block}
.ticker .run span::before{content:"◆";margin-right:11px;opacity:.65}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- usps */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.usps div{background:#fff;padding:24px 20px;text-align:center;transition:.2s}
.usps div:hover{background:var(--brand-lt)}
.usps .ic{font-size:26px;margin-bottom:9px;display:block}
.usps b{display:block;font-size:15px;margin-bottom:3px}
.usps span{font-size:13.5px;color:var(--mut)}
@media (max-width:860px){.usps{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- sections */
section{padding:clamp(48px,6.5vw,86px) 0}
section.tint{background:var(--bg-2)}
section.sand{background:var(--g-warm)}
section.dark{background:var(--g-dusk);color:#fff}
section.dark h2,section.dark h3{color:#fff}
section.dark p{color:rgba(255,255,255,.78)}
section.tealbg{background:var(--g-teal);color:#fff}
section.tealbg h2,section.tealbg h3{color:#fff}
section.tealbg p{color:rgba(255,255,255,.8)}
.sec-head{max-width:680px;margin-bottom:40px}
.sec-head .kick,.revhead .kick,.lp-copy .kick{display:inline-block;font:700 12px/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand-dk);margin-bottom:13px;padding:6px 13px;
  background:var(--brand-lt);border-radius:100px}
section.dark .sec-head .kick,section.tealbg .sec-head .kick{background:rgba(255,255,255,.15);color:#f2dcb4}
.sec-head p{color:var(--mut);font-size:17px;margin:0}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.22s cubic-bezier(.2,.8,.3,1);position:relative}
.card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card .thumb{aspect-ratio:4/3;background:var(--bg-3);position:relative;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .thumb img{transform:scale(1.05)}
.card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:8px;font-size:19px}
.card h3 a{color:var(--ink)}
.card p{font-size:14.5px;color:var(--mut);margin-bottom:16px;flex:1}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:14px;border-top:1px solid var(--line)}
.price{font:700 16px/1.2 var(--sans);color:var(--ink)}
.price small{display:block;font-weight:400;font-size:12px;color:var(--mut);margin-top:3px}
.price del{color:var(--mut);font-weight:400;font-size:13.5px;margin-right:7px}
.price ins{text-decoration:none;color:var(--terra)}

.tag{display:inline-block;background:var(--brand-lt);color:var(--brand-dk);border-radius:100px;
  padding:5px 12px;font:700 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.badge{position:absolute;top:13px;left:13px;z-index:2;padding:7px 13px;border-radius:100px;
  font:700 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#fff;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.badge.hot{background:var(--hot)} .badge.new{background:var(--teal)}
.badge.best{background:var(--g-brand)} .badge.save{background:var(--terra)}

/* ---------------------------------------------------------------- offer */
.offer{background:var(--g-dusk);border-radius:var(--r-lg);padding:clamp(26px,4vw,44px);
  color:#fff;position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 88% 0%,rgba(224,165,60,.32),transparent 60%)}
.offer>*{position:relative;z-index:1}
.countdown{display:flex;gap:11px;margin:20px 0 6px}
.countdown div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:12px 8px;min-width:68px;text-align:center;backdrop-filter:blur(6px)}
.countdown b{display:block;font:800 26px/1 var(--sans);font-variant-numeric:tabular-nums}
.countdown span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
@media (max-width:520px){.countdown div{min-width:56px;padding:10px 6px} .countdown b{font-size:21px}}

/* ---------------------------------------------------------------- reviews */
/* One scroll-snapped row with arrows, shown at the foot of every page. The old
   5/4/3-star breakdown was removed: it was noise on a block nobody reads for
   statistics. */
.stars{color:var(--gold-ink);letter-spacing:2px;font-size:15px}
/* on a dark panel the decorative gold has plenty of contrast and reads better */
section.dark .stars,section.tealbg .stars,.revsec.dark .stars{color:var(--gold)}

.revsec{background:var(--bg-2);border-top:1px solid var(--line);
  padding:clamp(46px,5vw,72px) 0 clamp(40px,4.4vw,60px)}
.revhead{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:26px}
.revhead h2{margin:6px 0 8px}
.revhead p{margin:0;color:var(--mut);font-size:15px;max-width:52ch}
.revagg{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:14px 20px;flex-shrink:0}
.revagg b{font:800 34px/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.revagg .stars{font-size:14px;line-height:1.2}
.revagg span{font-size:12.5px;color:var(--mut)}

.revrail{position:relative;display:flex;align-items:center;gap:10px}
.revtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:6px 2px 14px;flex:1;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none}
.revtrack::-webkit-scrollbar{display:none}
.revtrack:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:var(--r)}

.revcard{scroll-snap-align:start;flex:0 0 clamp(268px,31%,368px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 20px;display:flex;flex-direction:column;gap:14px;transition:.2s}
.revcard:hover{box-shadow:var(--shadow);border-color:var(--line-2);transform:translateY(-2px)}
.revcard .stars{font-size:16px;letter-spacing:3px}
.revcard p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.65;flex:1}
.revfoot{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:15px}
.revfoot .av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font:700 16px var(--sans);color:#fff}
.revfoot .who b{display:block;font-size:14.5px;line-height:1.3}
.revfoot .who span{font-size:12px;color:var(--mut)}
.revtag{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-dk);
  font-weight:700}

.revnav{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:.16s;box-shadow:var(--shadow)}
.revnav:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.revnav[disabled]{opacity:.32;cursor:default;box-shadow:none}
.revnav[disabled]:hover{background:#fff;color:var(--ink);border-color:var(--line-2)}

.revnote{margin:16px 0 0;font-size:12.5px;color:var(--mut);max-width:78ch}

@media (max-width:900px){
  .revhead{align-items:flex-start}
  .revagg{padding:12px 16px}
  .revcard{flex:0 0 min(84vw,340px)}
  .revrail{display:grid;grid-template-columns:1fr auto auto;gap:10px 10px;align-items:start}
  .revtrack{grid-column:1/-1;grid-row:1;gap:14px}
  .revnav{grid-row:2;width:42px;height:42px}
  .revnav.prev{grid-column:2}
  .revnav.next{grid-column:3}
}

/* ---------------------------------------------------------------- steps */
.steps{counter-reset:s;display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.steps>div{counter-increment:s;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);padding:26px;position:relative;transition:.2s}
.steps>div:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow)}
.steps>div::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;
  border-radius:12px;background:var(--g-brand);color:#fff;font:800 18px var(--sans);margin-bottom:15px}
.steps h3{font-size:17px;margin-bottom:6px}
.steps p{font-size:14.5px;color:var(--mut);margin:0}
section.dark .steps>div{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.15)}
section.dark .steps p{color:rgba(255,255,255,.72)}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.sw{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;transition:.2s}
/* the catalogue swatches are links to their own shade page now, not lightbox
   triggers — keep the card looking like a card, not like body copy */
a.sw{display:block;color:inherit;text-decoration:none}
a.sw:hover{text-decoration:none;border-color:var(--brand)}
.sw:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sw .chip{aspect-ratio:3/2;position:relative;overflow:hidden}
.sw .chip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.sw:hover .chip img{transform:scale(1.06)}
.sw .chip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.16),transparent 46%,rgba(0,0,0,.10))}
.sw .meta{padding:11px 12px}
.sw .meta b{display:block;font-size:13.5px;font-weight:600}
.sw .meta span{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- misc */
.crumbs{font-size:13.5px;color:var(--mut);padding:16px 0}
.crumbs a{color:var(--mut)}
.crumbs span{margin:0 7px;opacity:.5}
.notice{background:var(--brand-lt);border:1px solid var(--line-2);border-radius:var(--r);
  padding:18px 20px;font-size:15px;color:var(--ink-2)}
.notice.warn{background:#fff8e6;border-color:#f0d089}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{background:#fff;border:1px solid var(--line-2);border-radius:100px;padding:8px 16px;
  font-size:13.5px;color:var(--ink-2);font-weight:500}
.chips a:hover{border-color:var(--brand);color:var(--brand-dk);text-decoration:none;background:var(--brand-lt)}
.hero .chips a{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#f3e7d4}
.hero .chips a:hover{background:rgba(255,255,255,.24);color:#fff}

.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:19px 22px;cursor:pointer;font-weight:600;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--brand);font-weight:400;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{background:var(--brand-lt)}
.faq .ans{padding:2px 22px 20px;color:var(--ink-2);font-size:15.5px;max-width:78ch}

.prose{max-width:74ch}
.prose h2{margin-top:1.7em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.4em;font-size:19px}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:1.4em 0}
.prose th,.prose td{padding:11px 13px;border:1px solid var(--line);text-align:left}
.prose th{background:var(--bg-2);font-weight:600}

table.spec{width:100%;border-collapse:collapse;font-size:14.5px}
table.spec th,table.spec td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.spec th{width:34%;font-weight:600;color:var(--ink-2);background:var(--bg-2)}
@media (max-width:560px){table.spec th{width:44%}}

/* product page bits */
.phead{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;padding:10px 0 clamp(34px,5vw,56px)}
@media (max-width:900px){.phead{grid-template-columns:1fr;gap:28px}}
/* The picture column finishes long before the specification table on every
   shade and product page (gapcheck.py: 346px early of 1025px on a shade), which
   left a dead rectangle under the gallery. Sticking it closes the hole and is
   the better behaviour: the cloth stays in view while you read what it is. */
@media (min-width:901px){.phead > :first-child{position:sticky;top:88px}}
.pgal{background:var(--bg-3);border-radius:var(--r-lg);aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.pgal img{width:100%;height:100%;object-fit:cover}
.pricebox{background:var(--g-warm);border:1px solid var(--line-2);border-radius:var(--r);padding:22px;margin:20px 0}
.pricebox .from{font-size:13px;color:var(--ink-2);font-weight:600}
.pricebox .amt{font:800 34px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.pricebox .per{font-size:13px;color:var(--ink-2);margin-top:6px}
.trust{display:grid;gap:10px;margin:18px 0}
.trust div{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.trust .ic{color:var(--ok);flex-shrink:0;font-weight:700}
.tabs{border-bottom:2px solid var(--line);display:flex;gap:2px;margin-bottom:26px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:14px 20px;
  font:700 15px var(--sans);color:var(--mut);cursor:pointer;white-space:nowrap;margin-bottom:-2px}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--brand)}
.tabp{display:none} .tabp.on{display:block}

/* estimator */
.est{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.est .in{padding:30px}
.est .out{padding:30px;background:var(--g-dusk);color:#fff}
.est .out h3{color:#fff}
@media (max-width:780px){.est{grid-template-columns:1fr}}
.bignum{font:800 clamp(32px,5vw,46px)/1.05 var(--sans);letter-spacing:-.025em;margin:6px 0 4px}
.est .out .sub{font-size:13.5px;opacity:.75;margin-bottom:20px}
.lines{border-top:1px solid rgba(255,255,255,.18);padding-top:16px}
.lines div{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:7px 0;opacity:.9}
.lines div.tot{border-top:1px solid rgba(255,255,255,.18);margin-top:8px;padding-top:12px;
  font-weight:700;opacity:1;font-size:16.5px}
.savechip{display:inline-block;background:var(--ok);color:#fff;border-radius:100px;
  padding:6px 14px;font:700 12.5px/1 var(--sans);margin-bottom:14px}
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:22px}
.bands div{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:15px;text-align:center;transition:.2s}
.bands div:hover{border-color:var(--brand);transform:translateY(-2px)}
.bands b{display:block;font:800 24px var(--sans);color:var(--terra)}
.bands span{font-size:12px;color:var(--mut)}
@media (max-width:700px){.bands{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- band */
.band{background:var(--g-teal);color:#fff;text-align:center;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 50% 0%,rgba(224,165,60,.24),transparent 62%)}
.band .wrap{position:relative;z-index:1}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.82);max-width:58ch;margin:0 auto 28px}
.band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--ink);color:#b5a99c;padding:60px 0 26px;font-size:14.5px}
/* five columns since the footer gained a Dubai column: at four, the fifth
   wrapped under the brand block and left a hole across the middle */
footer.site .cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px;margin-bottom:38px}
@media (max-width:1100px){footer.site .cols{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site h3{color:#fff;font-family:var(--sans);font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:15px}
footer.site a{color:#b5a99c;display:block;padding:4px 0}
footer.site a:hover{color:var(--gold)}
footer.site .fine{border-top:1px solid rgba(255,255,255,.11);padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;opacity:.72}
.todo{background:rgba(224,165,60,.14);border:1px solid rgba(224,165,60,.42);color:#f0cd8d;
  border-radius:9px;padding:10px 13px;font-size:12.5px;margin-top:14px}

/* ---------------------------------------------------------------- chat */
.dock{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px}
.dockbtn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:0;
  cursor:pointer;box-shadow:var(--shadow-lg);transition:.2s;position:relative}
.dockbtn:hover{transform:scale(1.08)}
.dockbtn svg{width:28px;height:28px;fill:#fff}
.dockbtn.wa{background:var(--wa)}
.dockbtn.ai{background:var(--g-brand);color:#fff;font-size:23px}
.dockbtn .dot{position:absolute;top:1px;right:1px;width:14px;height:14px;border-radius:50%;
  background:var(--hot);border:2px solid #fff}
.chatw{position:fixed;right:16px;bottom:16px;z-index:90;width:min(390px,calc(100vw - 32px));
  height:min(580px,calc(100vh - 32px));background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);display:none;flex-direction:column;overflow:hidden}
.chatw.on{display:flex}
.chatw .hd2{background:var(--g-brand);color:#fff;padding:15px 18px;display:flex;align-items:center;gap:11px}
.chatw .hd2 .av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-size:19px}
.chatw .hd2 b{display:block;font-size:15px}
.chatw .hd2 span{font-size:12px;opacity:.85;display:flex;align-items:center;gap:5px}
.chatw .hd2 span::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ef0a5}
.chatw .hd2 button{margin-left:auto;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}
.chatb{flex:1;overflow-y:auto;padding:16px;background:var(--bg-2);display:flex;flex-direction:column;gap:11px}
.msg{max-width:84%;padding:11px 14px;border-radius:15px;font-size:14.5px;line-height:1.55;white-space:pre-wrap}
.msg.bot{background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.msg.me{background:var(--g-brand);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg a{color:var(--brand-dk);font-weight:600}
.msg.me a{color:#fff;text-decoration:underline}
.qr{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--bg-2)}
.qr button{background:#fff;border:1px solid var(--line-2);border-radius:100px;padding:8px 14px;
  font:600 12.5px var(--sans);cursor:pointer;color:var(--brand-dk);transition:.15s}
.qr button:hover{background:var(--brand-lt);border-color:var(--brand)}
.chatf{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.chatf input{flex:1;padding:12px 15px;border:2px solid var(--line);border-radius:100px;font:15px var(--sans)}
.chatf input:focus{outline:0;border-color:var(--brand)}
.chatf button{width:46px;height:46px;border-radius:50%;border:0;background:var(--g-brand);
  color:#fff;cursor:pointer;font-size:18px;flex-shrink:0}
.typing{display:flex;gap:4px;padding:13px 15px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:bounce 1.3s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* ---------------------------------------------------------------- reveal */
/* Reveal is decoration only — content is never hidden behind it, so a slow
   device or a failed observer can't leave a section blank. */
.js .rv.in{animation:rvin .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes rvin{from{transform:translateY(20px)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .rv.in{transform:none;animation:none}
}



/* ================================================== conversion furniture */

/* sticky mobile action bar */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
  background:rgba(23,18,14,.97);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.12);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.mobar a,.mobar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;color:#e8ddd0;font:600 11px var(--sans);background:none;border:0;
  cursor:pointer;text-decoration:none;border-radius:10px}
.mobar a span,.mobar button span{font-size:19px;line-height:1}
.mobar a:hover,.mobar button:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.mobar .hi{background:var(--g-brand);color:#fff}
@media (max-width:900px){
  .mobar{display:flex}
  body{padding-bottom:74px}
  .dock{bottom:82px}
  .chatw{bottom:82px;height:min(560px,calc(100vh - 150px))}
}

/* slide-up sheets */
.sheetbg{position:fixed;inset:0;z-index:95;background:rgba(23,18,14,.55);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.25s}
.sheetbg.on{opacity:1;visibility:visible}
.sheet{position:fixed;z-index:96;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(460px,calc(100vw - 28px));max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:28px;
  opacity:0;visibility:hidden;transition:.25s cubic-bezier(.2,.8,.3,1)}
.sheet.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.sheet h3{font-size:23px;margin:8px 0 6px}
.sheet .sub{color:var(--mut);font-size:14.5px;margin-bottom:20px}
.sheet .kick{font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.sheet .sx{position:absolute;top:14px;right:16px;background:none;border:0;font-size:28px;
  line-height:1;color:var(--mut);cursor:pointer;padding:4px 8px}
.sheet .sx:hover{color:var(--ink)}
@media (max-width:600px){
  .sheet{top:auto;bottom:0;left:0;transform:translateY(100%);width:100%;max-width:none;
    border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh}
  .sheet.on{transform:translateY(0)}
}

/* radio / checkbox slot pickers */
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){.slots{grid-template-columns:1fr}}
.slot{position:relative;display:block}
.slot input{position:absolute;opacity:0;pointer-events:none}
.slot span{display:block;padding:12px 13px;border:2px solid var(--line);border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;text-align:center;color:var(--ink-2)}
.slot span:hover{border-color:var(--brand)}
.slot input:checked + span{border-color:var(--brand);background:var(--brand-lt);color:var(--brand-dk);
  box-shadow:0 0 0 3px rgba(169,124,63,.14)}
.slot input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

/* payment plan strip */
/* ---- "paying for it": four numbered stages + a trust strip -------------- */
.paysteps{list-style:none;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px)}
.paysteps li{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:30px 20px 24px;text-align:center;box-shadow:var(--shadow)}
/* the connector between stages: a hairline with a gold chevron, desktop only */
@media (min-width:861px){
  .paysteps li:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(var(--gap,22px) * -1);
    width:calc(var(--gap,22px));height:1px;background:var(--line2);transform:translateY(-50%)}
  .paysteps li:not(:last-child)::before{content:"";position:absolute;top:50%;right:-7px;width:9px;height:9px;
    border-top:1.6px solid var(--brand);border-right:1.6px solid var(--brand);
    transform:translateY(-50%) rotate(45deg);z-index:1}
}
.paysteps .num{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  min-width:38px;height:26px;padding:0 9px;border-radius:100px;
  background:var(--g-brand,var(--brand));color:#fff;
  display:grid;place-items:center;font:800 12.5px/1 var(--sans);letter-spacing:.06em;
  box-shadow:0 2px 8px rgba(169,124,63,.32)}
.paysteps .ic{width:52px;height:52px;border-radius:50%;margin:8px auto 12px;
  display:grid;place-items:center;background:var(--brand-lt);color:var(--brand-dk)}
.paysteps b{display:block;font:800 15.5px/1.3 var(--sans);color:var(--ink)}
.paysteps .rule{display:block;width:34px;height:2px;border-radius:2px;
  background:var(--brand);opacity:.55;margin:9px auto 10px}
.paysteps .d{display:block;font-size:13px;line-height:1.55;color:var(--mut)}

.paytrust{list-style:none;margin:26px 0 0;padding:16px clamp(14px,2vw,24px);display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);
  background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:var(--r)}
.paytrust li{display:flex;gap:11px;align-items:flex-start}
.paytrust .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-lt);color:var(--brand-dk)}
.paytrust b{display:block;font:700 13.5px/1.3 var(--sans);color:var(--ink)}
.paytrust em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:var(--mut);margin-top:2px}

@media (max-width:860px){
  .paysteps,.paytrust{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .paysteps,.paytrust{grid-template-columns:1fr}
  .paysteps li{padding:26px 18px 20px}
}

/* ============================================== product page enhancements */
.pthumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.pthumbs button{width:88px;aspect-ratio:4/3;border:2px solid var(--line);border-radius:10px;
  overflow:hidden;padding:0;background:none;cursor:pointer;transition:.15s}
.pthumbs button img{width:100%;height:100%;object-fit:cover}
.pthumbs button:hover,.pthumbs button.on{border-color:var(--brand)}

.pbadges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
@media (max-width:620px){.pbadges{grid-template-columns:repeat(2,1fr)}}
.pbadges div{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 11px;text-align:center}
.pbadges span{font-size:19px;display:block;margin-bottom:5px}
.pbadges b{display:block;font-size:13px;line-height:1.25}
.pbadges i{display:block;font-style:normal;font-size:12px;color:var(--mut);margin-top:2px}

.offpill{display:inline-block;background:var(--terra);color:#fff;border-radius:100px;
  padding:3px 10px;font:700 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;margin-left:7px}

.miniest{margin-top:16px;padding-top:15px;border-top:1px solid var(--line-2)}
.miniest .mel{display:block;font:700 12px var(--sans);color:var(--ink-2);margin-bottom:8px}
.miniest .mrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--mut)}
.miniest input{width:74px;padding:9px 10px;border:1.5px solid var(--line-2);border-radius:8px;
  font:14px var(--sans);background:#fff;text-align:center}
.miniest input:focus{outline:0;border-color:var(--brand)}
.miniest .mout{margin-top:12px}
.miniest .mout b{display:block;font:800 24px/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.miniest .mout i{font-style:normal;font-size:12.5px;color:var(--mut)}


/* --------------------------------------------------- responsive hardening */
/* nothing may push the page sideways */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,table,pre{max-width:100%}


@media (max-width:900px){
  .hero{padding-top:34px}
  .hero h1{font-size:clamp(30px,7.6vw,40px)}
  .hero .cta .btn{flex:1 1 100%;justify-content:center}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .sec-head{margin-bottom:26px}
  .steps>div,.card .body,.faq summary{padding-left:16px;padding-right:16px}
  .est .in,.est .out,.wiz .pad{padding:18px}
  .phead{gap:20px}
  .bands{grid-template-columns:1fr 1fr}
  .countdown div{min-width:0;flex:1}
  .pbadges{gap:8px}
  .swatches{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
}

/* Several sections set a two-column grid inline; collapse them on small
   screens so the enquiry form and prose stop overflowing. */
@media (max-width:820px){
  .wrap[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:28px !important}
}

/* touch targets: 40px minimum for anything clickable that is not inline text */
@media (max-width:900px){
  .btn,.btn-sm{min-height:44px}
  .burger{min-height:44px;padding:12px 16px}
  footer.site a{min-height:40px;display:flex;align-items:center}
  .chips a{min-height:40px;display:inline-flex;align-items:center}
  .drop a,#mnav a{min-height:44px;display:flex;align-items:center}
}

/* ------------------------------------------------------ single shade page */
.shadestrip{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.shadestrip .dot{width:42px;height:42px;border-radius:50%;flex-shrink:0;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06)}
.shadestrip b{display:block;font-size:16px}
.shadestrip span{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.shadestrip>div{flex:1;min-width:0}
@media (max-width:560px){.shadestrip{flex-wrap:wrap}.shadestrip .btn{width:100%;justify-content:center}}



/* ------------------------------------------- catalogue (book) page hero */
.bookhero{padding:clamp(30px,4vw,54px) 0 clamp(34px,4vw,58px)}
.bookhero > .wrap{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4vw,54px);align-items:center}
.bh-cover{position:relative}
.bh-cover img{width:100%;height:auto;border-radius:14px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.55), 0 0 0 1px rgba(224,165,60,.30)}
.bh-copy h1{margin-bottom:16px;font-size:clamp(30px,3.8vw,46px)}
.bh-copy h1 em{font-style:normal;background:linear-gradient(100deg,#f3d9a0,#e0a53c 48%,#f6e3bb);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bh-copy .lede{max-width:56ch;margin-bottom:22px}
.bh-facts{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,34px);margin:0 0 24px;padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.18)}
.bh-facts b{display:block;font:800 clamp(19px,2vw,25px)/1 var(--sans);color:var(--gold);letter-spacing:-.02em}
.bh-facts b i{font-style:normal;font-size:.55em;font-weight:600;margin-left:1px}
.bh-facts span{font-size:12px;color:rgba(255,255,255,.7);display:block;margin-top:4px}
.bookhero .tag{background:rgba(255,255,255,.14);color:#f4e6c8;border:1px solid rgba(255,255,255,.24)}
@media (max-width:820px){
  .bookhero > .wrap{grid-template-columns:1fr;gap:24px}
  .bh-cover{max-width:220px}
  .bh-facts{gap:14px 22px}
}


/* ---------------------------------------------- mobile home refinements */
/* The old mobile scrim was .93/.88 over the whole hero, which hid the
   photograph completely. Keep the photo to the top band, behind the copy,
   at an opacity that still passes contrast, then fade into the hero colour. */
@media (max-width:900px){
  .hero{--hero-photo:clamp(430px,108vw,600px)}
  .hero-bg{bottom:auto;height:var(--hero-photo)}
  .hero-bg img{object-position:62% 45%}
  .hero::after{bottom:auto;height:var(--hero-photo);
    background:linear-gradient(180deg,
      rgba(8,20,18,.82) 0%, rgba(8,20,18,.74) 42%,
      rgba(14,27,24,.90) 80%, #12211d 100%)}
}


/* clear the sticky action bar properly */
@media (max-width:900px){.dock{bottom:90px}}

/* ------------------------------------------- catalogue cards on the home page */
/* The books are portrait; cropping them to the card's 4:3 thumb cuts the cover
   art in half, so they sit whole on the catalogue's own gradient. */
/* The four covers are normalised to one 3:4 master with their own branded
   ground and shadow baked in (deploy/normalise_covers.php), so the card simply
   matches that ratio: the image fills it exactly — no letterbox bars, no crop,
   nothing stretched, and identical treatment in every place they appear. */
.bookcard .thumb{display:grid;place-items:center;aspect-ratio:3/4;height:auto;padding:0;
  background:#efe7d9}
.bookcard .thumb.hascover img{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:center;transition:transform .45s}
.bookcard:hover .thumb.hascover img{transform:scale(1.035)}
.bookcard .bookno{font:700 46px var(--serif)}

/* ==================================================== live preview (stage) */
/* The panels are photographs of the real cloth, lit rather than tinted: fold
   cores multiplied in, ridge highlights soft-lit back out, ambient occlusion
   where cloth meets wall, and a screen-blend glow for the sheers that pass
   light. Flat colour over a mask is what makes paint visualisers look cheap —
   preserving the photograph's own luminance is what does not. */

.lp{background:linear-gradient(180deg,var(--bg-2) 0%,#f6ece0 100%);
  border-top:1px solid var(--line);padding:clamp(48px,5.4vw,84px) 0}
.lp-grid{display:grid;grid-template-columns:minmax(300px,.86fr) minmax(0,1.2fr);
  gap:clamp(30px,4vw,64px);align-items:center}
/* the swatch tray is 76 items wide; without this the grid track sizes to it */
.lp-grid > *{min-width:0}
.lp-stagewrap{min-width:0}
.stage,.lp-tray{max-width:100%}

.lp-copy h2{margin:8px 0 14px}
.lp-copy .lede{font-size:17px;color:var(--mut);margin:0 0 22px;max-width:46ch}
.lp-hints{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.lp-hints li{display:flex;gap:11px;align-items:flex-start;
  font-size:14.5px;color:var(--ink-2);line-height:1.5}
.lp-hints b{color:var(--ink);font-weight:700}
.lp-hints .tx{min-width:0}
.lp-hints .ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;background:var(--brand-lt);color:var(--brand-dk);margin-top:-3px}
.lp-hints .ic svg{width:16px;height:16px}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------------------------- the frame */
.stage{position:relative;border-radius:calc(var(--r-lg) + 4px);
  background:linear-gradient(180deg,#2a211a,#160f0a);padding:10px 10px 0;
  box-shadow:0 2px 6px rgba(23,18,14,.10),0 42px 80px -34px rgba(23,18,14,.55),
             0 0 0 1px rgba(255,255,255,.06) inset}
.sc{position:relative;aspect-ratio:16/11;overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;isolation:isolate;
  background:#e9ddc9;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc > *{position:absolute}

/* The room. Contemporary glazing is slim-sightline aluminium — 20-25mm frames,
   one big opening, no astragal grid; a fat cream frame divided into four panes
   is what dates a render. And an interior photograph always blows the view out,
   because outside runs 10-15x brighter than the room, so the glass is a pale
   wash with a glare that wraps over the frame, not a picture of a sky. */
.sc-ceil{left:0;right:0;top:0;height:9%;
  background:linear-gradient(180deg,rgba(74,58,36,.34),rgba(74,58,36,.10) 42%,rgba(74,58,36,0));
  pointer-events:none;z-index:1}
.sc-wall{inset:0;background:
  radial-gradient(120% 70% at 50% 30%,rgba(255,250,240,.92),rgba(255,250,240,0) 68%),
  radial-gradient(80% 46% at 50% 104%,rgba(206,170,124,.5),rgba(206,170,124,0) 72%),
  linear-gradient(96deg,rgba(255,251,242,.30),rgba(255,251,242,0) 46%,rgba(72,54,32,.13) 100%),
  linear-gradient(178deg,#e7dccb 0%,#efe5d5 26%,#e6dac6 70%,#d5c5aa 100%)}
.sc-bleed{inset:0;background:
  radial-gradient(52% 46% at 10% 50%,var(--bleed),transparent 74%),
  radial-gradient(52% 46% at 90% 50%,var(--bleed),transparent 74%);
  mix-blend-mode:multiply;opacity:.22;transition:background .6s ease,opacity .6s ease}

/* the opening */
.sc-win{left:15.5%;right:15.5%;top:12%;bottom:17%;overflow:hidden;border-radius:2px}
.sc-view{position:absolute;inset:0;background:
  radial-gradient(58% 34% at 62% 16%,rgba(255,253,244,.95),rgba(255,253,244,0) 70%),
  linear-gradient(179deg,#bcdcf2 0%,#cbe6f6 20%,#dcedf7 38%,
                  #e9eeeb 52%,#f4ead6 68%,#e9dcc2 100%)}
/* A garden, kept well inside the haze. Planting is what is actually outside a
   villa window here, and it gives the glass something to be *of* — but it has
   to stay soft and over-exposed or the eye reads it as wallpaper, not a view. */
.sc-garden{position:absolute;left:-8%;right:-8%;top:24%;bottom:0;filter:blur(4px);opacity:.9;
  background:
    radial-gradient(30% 40% at 9% 30%,rgba(74,106,56,.98),rgba(74,106,56,0) 66%),
    radial-gradient(24% 32% at 26% 16%,rgba(104,136,68,.92),rgba(104,136,68,0) 70%),
    radial-gradient(20% 28% at 41% 30%,rgba(64,96,52,.9),rgba(64,96,52,0) 70%),
    radial-gradient(28% 36% at 63% 20%,rgba(82,114,58,.95),rgba(82,114,58,0) 68%),
    radial-gradient(22% 30% at 82% 32%,rgba(112,142,72,.9),rgba(112,142,72,0) 70%),
    radial-gradient(18% 26% at 95% 22%,rgba(70,102,54,.88),rgba(70,102,54,0) 72%),
    linear-gradient(180deg,rgba(92,120,72,0) 34%,rgba(78,106,58,.6) 46%,rgba(92,120,72,0) 60%),
    linear-gradient(180deg,rgba(154,170,106,0) 52%,rgba(142,162,88,.62) 72%,
      rgba(166,174,104,.72) 100%)}
/* trunks and a path, barely there — depth cues, not detail */
.sc-garden::after{content:"";position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(90deg,rgba(86,68,48,0) 17.4%,rgba(86,68,48,.7) 17.8%,rgba(86,68,48,0) 18.4%),
    linear-gradient(90deg,rgba(86,68,48,0) 70.4%,rgba(86,68,48,.6) 70.9%,rgba(86,68,48,0) 71.5%),
    radial-gradient(46% 16% at 50% 100%,rgba(226,214,186,.75),rgba(226,214,186,0) 70%)}
.sc-haze{position:absolute;left:0;right:0;top:40%;height:26%;filter:blur(12px);opacity:.5;
  background:linear-gradient(180deg,rgba(236,240,242,0) 0%,rgba(240,238,228,.7) 42%,
    rgba(248,238,216,.9) 70%,rgba(248,238,216,0) 100%)}
/* glass: two soft reflection streaks, and the room reflected faintly at the foot */
.sc-refl{position:absolute;inset:0;background:
  linear-gradient(106deg,rgba(255,255,255,.42) 0 9%,rgba(255,255,255,0) 26%),
  linear-gradient(106deg,rgba(255,255,255,0) 56%,rgba(255,255,255,.20) 65%,rgba(255,255,255,0) 78%),
  linear-gradient(0deg,rgba(146,132,110,.20),rgba(146,132,110,0) 14%)}
/* the meeting stile of a slider — one line, 3px, no grid */
.sc-stile{position:absolute;left:calc(50% - 1.5px);top:0;bottom:0;width:3px;
  background:linear-gradient(90deg,rgba(38,40,44,.5),#4a4d52 40%,#2f3236 60%,rgba(38,40,44,.5))}
/* 25mm sightlines: the frame is a hairline, not a moulding */
.sc-frame{position:absolute;inset:0;border:3px solid #3b3e43;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),
             inset 0 10px 22px -14px rgba(20,24,30,.85)}
/* the plaster return around the opening — lit on the light side, shadowed opposite */
.sc-reveal{left:14%;right:14%;top:10.5%;bottom:15.4%;pointer-events:none;border-radius:3px;
  box-shadow:
    -1px -1px 0 0 rgba(255,253,247,.9), 1px 1px 0 0 rgba(255,253,247,.5),
    inset 0 0 0 1px rgba(120,102,78,.28),
    0 -10px 24px -12px rgba(70,54,32,.5),
    0 16px 30px -14px rgba(70,54,32,.45)}
/* glare wrapping past the frame is what sells the exposure difference */
.sc-bloom{left:12%;right:12%;top:9%;height:30%;pointer-events:none;filter:blur(16px);opacity:.5;
  background:linear-gradient(180deg,rgba(255,253,246,.85),rgba(255,253,246,0) 78%)}

.sc-sill{left:14.7%;right:14.7%;top:83%;height:1.9%;border-radius:1px;
  background:linear-gradient(180deg,#fdf8ee 0%,#e4d7c0 55%,#bfae91 100%);
  box-shadow:0 7px 14px -7px rgba(60,44,26,.5)}
.sc-skirt{left:0;right:0;bottom:9%;height:3.4%;
  background:linear-gradient(180deg,#f3ead9,#ddcdb2 62%,#c3ae8d);
  box-shadow:0 4px 10px -5px rgba(56,40,20,.45)}
.sc-floor{left:0;right:0;bottom:0;height:9%;
  background:linear-gradient(180deg,#c4ad8b 0%,#b99f7c 40%,#a98d68 100%)}
/* the window's own shape thrown onto the floor, cut by the meeting stile */
.sc-pool{left:17%;right:17%;bottom:0;height:11%;filter:blur(7px);opacity:.6;
  transform:perspective(300px) rotateX(52deg);transform-origin:50% 0;
  background:linear-gradient(90deg,rgba(255,248,228,.95) 0 48.6%,rgba(255,248,228,.35) 48.6% 51.4%,
    rgba(255,248,228,.95) 51.4% 100%);
  transition:.7s cubic-bezier(.4,0,.2,1)}
.stage.half .sc-pool{opacity:.74}

/* ---------------------------------------------------------------- the rod */
/* a slim brushed rod near the ceiling, not a fat pole across the glass */
.sc-rod{left:6%;right:6%;top:6.4%;height:1.4%;min-height:6px;border-radius:99px;z-index:6;
  background:linear-gradient(180deg,#f4e3bd 0%,#cfa965 34%,#96703099 70%,#e3cb9a 100%);
  box-shadow:0 4px 10px -4px rgba(52,36,14,.55)}
.sc-rod i{position:absolute;top:50%;width:1.7%;aspect-ratio:1;min-width:9px;border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle at 32% 30%,#f9edd0,#caa057 58%,#856016)}
.sc-rod i:first-child{left:-1%} .sc-rod i:last-child{right:-1%}

/* -------------------------------------------------------------- the cloth */
/* Three states. Resting is half-drawn: it shows the most cloth while still
   reading as a window, which is how curtains are photographed for a catalogue.
   No class = fully closed, .open = drawn right back. */
.pn{position:absolute;top:7.2%;bottom:3.4%;width:43%;z-index:5;
  transition:transform .85s cubic-bezier(.33,.9,.28,1);will-change:transform}
.pn.l{left:7.5%;transform-origin:0% 0%}
.pn.r{right:7.5%;transform-origin:100% 0%}
.stage.half .pn.l,.stage.half .pn.r{transform:scaleX(.68)}

.pn-in{position:absolute;inset:0;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 97.6%,88% 99.3%,74% 97.7%,60% 99.5%,
                    46% 97.9%,32% 99.4%,18% 98%,0 99.2%);
  transform-origin:50% 0}
.pn-in > i{position:absolute;inset:0;display:block}
/* the heading: cloth is gathered tightest where it meets the hooks, and it
   throws a shadow down the first few centimetres of the drop */
.pn-in::before{content:"";position:absolute;left:0;right:0;top:0;height:6%;z-index:3;
  mix-blend-mode:multiply;background:
    linear-gradient(180deg,rgba(30,20,10,.09),rgba(30,20,10,.01) 70%,rgba(30,20,10,.05)),
    repeating-linear-gradient(91deg,rgba(24,16,8,.09) 0 2px,rgba(24,16,8,0) 2px 11px)}

/* the shade's own photograph, and the layer the next one fades in on */
/* one crop of the photograph, not a tiled swatch — a repeat seam is the first
   thing that reads as fake. It also compresses with the panel when gathered. */
.pn-img{background-size:210% auto;background-position:38% 30%;background-repeat:no-repeat;
  opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
.pn-img.on{opacity:1}
.pn.r .pn-img{background-position:70% 66%;transform:scaleX(-1)}

/* Fold cores and ridge highlights. The periods are percentages of the panel,
   so the folds hold their proportion at any size — and gather closer together
   when the panel scales in, which is what real cloth does when you draw it. */
.pn-fold{mix-blend-mode:multiply;opacity:.76;
  transform:rotate(.5deg) scale(1.07);transform-origin:50% 0;
  background-repeat:repeat;
  background-image:
    linear-gradient(91deg,rgba(24,16,8,0) 0%,rgba(24,16,8,.24) 16%,rgba(24,16,8,.50) 30%,
      rgba(24,16,8,.26) 44%,rgba(24,16,8,0) 66%,rgba(24,16,8,0) 100%),
    linear-gradient(91deg,rgba(24,16,8,0) 0%,rgba(24,16,8,.26) 22%,rgba(24,16,8,0) 52%,
      rgba(24,16,8,0) 100%),
    linear-gradient(91deg,rgba(24,16,8,0) 0%,rgba(24,16,8,.18) 30%,rgba(24,16,8,0) 70%,
      rgba(24,16,8,0) 100%);
  background-size:13.5% 100%,21% 100%,33.5% 100%}
.pn-spec{mix-blend-mode:soft-light;opacity:.95;
  transform:rotate(.5deg) scale(1.07);transform-origin:50% 0;
  background-repeat:repeat;
  background-image:
    linear-gradient(91deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,
      rgba(255,255,255,.62) 76%,rgba(255,255,255,0) 96%),
    linear-gradient(91deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 60%,
      rgba(255,255,255,0) 88%);
  background-size:13.5% 100%,21% 100%}
/* sheers are backlit: the window edge glows through the cloth */
.pn-glow{mix-blend-mode:screen;opacity:0;transition:opacity .5s ease}
.pn.l .pn-glow{background:linear-gradient(270deg,rgba(255,244,214,.62),rgba(255,244,214,0) 58%)}
.pn.r .pn-glow{background:linear-gradient(90deg,rgba(255,244,214,.62),rgba(255,244,214,0) 58%)}
.stage[data-family="sheer"] .pn-glow{opacity:1}
.stage[data-family="sheer"] .pn-img{opacity:.88}
.stage[data-family="sheer"] .pn-img.on{opacity:.88}
.stage[data-family="sheer"] .pn-fold{opacity:.6}

/* heading shadow at the top, hem shadow at the bottom, and side occlusion —
   light comes from the window, so the outer edge of each panel is the dark one */
.pn-ao{mix-blend-mode:multiply;background:
  linear-gradient(180deg,rgba(28,18,8,.16) 0%,rgba(28,18,8,.05) 9%,rgba(0,0,0,0) 34%,
    rgba(28,18,8,.06) 76%,rgba(28,18,8,.40) 100%)}
.pn.l .pn-ao{background-image:
  linear-gradient(180deg,rgba(28,18,8,.16) 0%,rgba(28,18,8,.05) 9%,rgba(0,0,0,0) 34%,
    rgba(28,18,8,.06) 76%,rgba(28,18,8,.40) 100%),
  linear-gradient(90deg,rgba(28,18,8,.20),rgba(0,0,0,0) 26%)}
.pn.r .pn-ao{background-image:
  linear-gradient(180deg,rgba(28,18,8,.16) 0%,rgba(28,18,8,.05) 9%,rgba(0,0,0,0) 34%,
    rgba(28,18,8,.06) 76%,rgba(28,18,8,.40) 100%),
  linear-gradient(270deg,rgba(28,18,8,.20),rgba(0,0,0,0) 26%)}

/* the light that runs across the cloth as a new shade lands on it */
.pn-sweep{mix-blend-mode:screen;opacity:0;pointer-events:none;background:
  linear-gradient(102deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.50) 47%,
    rgba(255,255,255,.14) 55%,rgba(255,255,255,0) 68%)}
/* the shadow the panel throws onto the wall */
/* A curtain's shadow on the wall behind it is soft and close. The earlier
   version spilled a dark band out over the wall and the glass, which read as a
   dirty stripe down the side of the cloth. */
.pn-drop{position:absolute;top:1%;bottom:-1%;z-index:-1;
  filter:blur(16px);border-radius:16px;background:rgba(46,32,16,.13)}
.pn.l .pn-drop{left:-3.5%;right:-1%}
.pn.r .pn-drop{left:-1%;right:-3.5%}
/* where the hem meets the floor — the darkest, tightest shadow in the scene */
.pn::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-2.5%;height:6%;
  filter:blur(8px);border-radius:50%;background:rgba(44,30,14,.30);z-index:-1}

.stage.swap .pn-sweep{animation:pnSweep .8s cubic-bezier(.3,0,.2,1)}
.stage.swap .pn-in{animation:pnSettle 1s cubic-bezier(.24,.86,.3,1)}
@keyframes pnSweep{
  0%{opacity:0;transform:translateX(-72%)}
  22%{opacity:1}
  100%{opacity:0;transform:translateX(72%)}}
@keyframes pnSettle{
  0%{transform:skewX(0deg) scaleY(1)}
  26%{transform:skewX(-.75deg) scaleY(1.006)}
  58%{transform:skewX(.4deg) scaleY(.998)}
  100%{transform:skewX(0deg) scaleY(1)}}
/* The panel scales down, so percentage folds would multiply in density.
   Widen the tiles as the cloth gathers to keep the fold count believable. */
.stage.half .pn-fold{opacity:.82;background-size:19.5% 100%,30% 100%,48% 100%}
.stage.half .pn-spec{background-size:19.5% 100%,30% 100%}
.pn-fold,.pn-spec{transition:background-size .85s cubic-bezier(.33,.9,.28,1)}

/* atmosphere: a vignette and a little grain tie the layers into one photo */
.sc-vig{inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(48,32,14,.34),inset 0 -30px 50px -30px rgba(48,32,14,.5)}
.sc-grain{inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.sc-toggle{inset:0;width:100%;height:100%;border:0;background:none;cursor:pointer;z-index:7}
.sc-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}

/* ----------------------------------------------------------------- tray */
.lp-tray{position:relative;z-index:2;padding:14px 14px 16px;color:#f3e7d4}
.lp-now{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  font:600 14px var(--sans)}
.lp-now .chip{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:rgba(224,165,60,.22);color:#f0cf8e;border:1px solid rgba(224,165,60,.4);
  border-radius:100px;padding:6px 10px}
.lp-more{margin-left:auto;font-size:12.5px;color:rgba(255,255,255,.72);
  display:inline-flex;align-items:center;min-height:44px}
.lp-more:hover{color:#fff}

.lp-drape{display:inline-flex;gap:3px;margin-bottom:12px;padding:3px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.lp-dr{flex:0 0 auto;cursor:pointer;font:700 12.5px var(--sans);color:rgba(255,255,255,.66);
  padding:9px 15px;min-height:40px;background:none;border:0;border-radius:100px;transition:.16s}
.lp-dr:hover{color:#fff;background:rgba(255,255,255,.10)}
.lp-dr.on{background:rgba(255,255,255,.94);color:#241a0d}

.lp-books{display:flex;gap:6px;margin-bottom:12px}
.lp-book{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:5px;cursor:pointer;
  font:700 13px var(--sans);color:rgba(255,255,255,.66);padding:10px 14px;min-height:44px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:100px;
  transition:.16s}
.lp-book small{font-size:10.5px;opacity:.6;font-weight:600}
.lp-book:hover{background:rgba(255,255,255,.13);color:#fff}
.lp-book.on{background:var(--gold);border-color:var(--gold);color:#221709}
.lp-book.on small{opacity:.72}

.swatchrow{display:flex;gap:9px;overflow-x:auto;padding:3px 2px 6px;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.swatchrow::-webkit-scrollbar{display:none}
.swatchrow .sw{flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:12px;cursor:pointer;
  overflow:hidden;scroll-snap-align:start;background:none;
  border:2px solid rgba(255,255,255,.24);transition:.16s;position:relative}
.swatchrow .sw img{width:100%;height:100%;object-fit:cover;display:block}
.swatchrow .sw:hover{border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
.swatchrow .sw.on{border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(224,165,60,.35),0 6px 14px -6px rgba(0,0,0,.6)}
.swatchrow .sw.off{display:none}

/* ------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .lp-grid{grid-template-columns:1fr;gap:30px}
  .lp-copy .lede{max-width:60ch}
  .lp-hints{grid-template-columns:repeat(3,1fr);gap:14px}
  .lp-hints li{flex-direction:column;gap:8px}
}
@media (max-width:760px){
  .sc{aspect-ratio:5/4}
  .lp-hints{grid-template-columns:1fr;gap:10px}
  .lp-hints li{flex-direction:row;align-items:flex-start}
  .lp-cta{flex-direction:column;align-items:stretch}
  .lp-cta .btn{justify-content:center}
  /* the buttons read better after the thing they refer to */
  .lp-copy{display:contents}
  .lp-copy .kick{order:1;align-self:flex-start} .lp-copy h2{order:2} .lp-copy .lede{order:3}
  .lp-stagewrap{order:4} .lp-hints{order:5;margin-top:22px} .lp-cta{order:6}
  .lp-grid{display:flex;flex-direction:column;align-items:stretch}
}
@media (max-width:520px){
  .sc{aspect-ratio:4/3.4}
  .stage{padding:7px 7px 0}
  .lp-tray{padding:12px 10px 14px}
  .swatchrow .sw{width:40px;height:40px;border-radius:10px}
  .lp-now{font-size:13px;gap:8px}
  .lp-more{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  .pn,.pn-img,.sc-pool{transition:none}
  .stage.swap .pn-sweep,.stage.swap .pn-in{animation:none}
}

/* ============================================================================
   COMFORTABLE DENSITY  +  CARD ACTIONS
   ----------------------------------------------------------------------------
   An earlier pass tried to force every section into one 640px laptop viewport.
   It worked as arithmetic and failed as design: capping a media box with
   max-height while it still has an aspect-ratio does not scale the artwork, it
   crops and squashes it — the window scene became a squat letterbox with dead
   space beside it, and catalogue thumbnails lost their tops and bottoms.

   What is kept is the part that was genuinely wrong before: 172px of section
   padding on a laptop, headings sized off viewport WIDTH so they ballooned on a
   wide-but-short screen, and buttons that wrapped mid-label.

   Rules that hold here:
     - never put max-height on an element that has aspect-ratio; let the ratio size it
     - scale rhythm (padding, gaps, type) with the viewport, never the artwork
     - a section is allowed to be taller than the screen if that is what the
       content honestly needs
   ========================================================================= */

/* --- every width ---------------------------------------------------------- */

/* a button that breaks "Get it" over two lines looks amateurish */
.btn{white-space:nowrap}
.card .foot .btn{flex-shrink:0}

/* an offer price is two figures; side by side they wrap mid-amount in a narrow
   card ("AED / 950"), so the old price sits on its own line above the new one */
.foot-price{justify-content:space-between;align-items:flex-end}
.foot-price .price{display:block}
.foot-price .price del{display:block;margin:0 0 2px;font-size:12.5px;white-space:nowrap}
.foot-price .price ins{display:block;white-space:nowrap;font-size:18px;line-height:1.1}
.foot-price .price small{margin-top:2px}
/* inline-flex + min-height keeps this a legal touch target */
.seemore{display:inline-flex;align-items:center;min-height:40px;padding:0 2px;
  font:700 13px/1 var(--sans);color:var(--brand-dk);white-space:nowrap}
.seemore:hover{text-decoration:underline}

.cardacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cardacts .btn{width:100%;padding:11px 10px;font-size:13.5px;gap:6px}
.cardacts .btn svg{flex-shrink:0}
@media (max-width:420px){.cardacts{grid-template-columns:1fr}}

.morewrap{display:flex;justify-content:center;margin-top:22px}
.morebtn{min-width:190px}

/* --- desktop rhythm -------------------------------------------------------
   Sized against viewport height so a short laptop gets a tighter rhythm than a
   1080p desktop, but with floors high enough that nothing reads as cramped.
   Compare the originals: section padding maxed at 86px, h2 at 40px. */
@media (min-width:1000px){
  section{padding:clamp(40px,5.6vh,76px) 0}

  .sec-head{margin-bottom:clamp(20px,3vh,36px);max-width:72ch}
  .sec-head p{font-size:clamp(15px,2vh,17px);line-height:1.55}

  h2{font-size:clamp(26px,3.9vh,40px);margin-bottom:clamp(10px,1.5vh,16px)}
  h3{font-size:clamp(17px,2.3vh,22px)}
  .prose p{font-size:clamp(15px,2vh,16.5px);line-height:1.65}

  .grid{gap:clamp(16px,2.2vh,22px)}

  /* cards: keep the original 4:3 thumbnail. No max-height — that was the bug. */
  .card .body{padding:clamp(14px,2vh,20px)}
  .card .body h3{font-size:clamp(16px,2.2vh,19px)}
  .card .body p{font-size:clamp(13.5px,1.85vh,15px);line-height:1.5;
                display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  .cardacts{margin-top:clamp(10px,1.5vh,14px)}

  /* hero: the one place worth compacting hard, because it stacks a headline, a
     lede, two CTAs, a chip row and a five-step wizard above the fold */
  .hero{padding:clamp(26px,4vh,56px) 0 0}
  .hero h1{font-size:clamp(32px,5.6vh,54px);margin-bottom:clamp(10px,1.7vh,20px)}
  .hero .lede{font-size:clamp(15px,2.1vh,18.5px);margin-bottom:clamp(14px,2.2vh,28px)}
  .hero .cta{margin-bottom:clamp(14px,2.1vh,28px)}
  .hero > .wrap{gap:clamp(28px,3.4vh,52px)}
  .wiz .pad{padding:clamp(16px,2.5vh,26px)}
  .wiz h3{font-size:clamp(18px,2.8vh,22px)}
  .wiz .sub{font-size:clamp(13px,1.9vh,14px);margin-bottom:clamp(10px,1.8vh,18px)}
  .opt{padding:clamp(9px,1.6vh,14px) clamp(12px,1.8vh,16px)}
  .opt .ic{width:clamp(30px,4.2vh,40px);height:clamp(30px,4.2vh,40px)}

  .field{margin-bottom:clamp(10px,1.5vh,15px)}
  .field input,.field select,.field textarea{padding:clamp(10px,1.7vh,13px) 15px}
}
/* ============================================================================
   PROCESS — the four steps, as one spine rather than four cards
   ========================================================================= */
/* ---- how it works: four steps, all visible -----------------------------
   The motion lives in the photographs — each card holds two and cross-fades
   between them on a stagger, so nothing textual ever moves under the reader. */
.pw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

.pw-step{position:relative;display:flex;flex-direction:column}
.pw-spine{position:relative;height:34px;margin-bottom:14px}
.pw-spine::before{content:"";position:absolute;top:50%;left:-50%;right:50%;height:2px;
  background:var(--line)}
.pw-step:first-child .pw-spine::before{display:none}
.pw-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font:700 14px var(--sans);z-index:1}

.pw-fig{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;
  background:var(--bg-3);border:1px solid var(--line);margin-bottom:14px}
.pw-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pw-fig .pw-alt{opacity:0;transition:opacity .9s ease}
.pw-fig.swap .pw-alt{opacity:1}
.pw-fig.drawn{display:grid;place-items:center;aspect-ratio:3/2;color:var(--brand)}
.pw-fig.drawn svg{width:52px;height:52px;opacity:.9}
.pw-cost{position:absolute;left:10px;top:10px;z-index:2;
  font:700 11.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  background:rgba(23,18,14,.72);color:#fff;padding:6px 10px;border-radius:100px;
  backdrop-filter:blur(4px)}

.pw-body{display:flex;flex-direction:column;flex:1}
.pw-time{align-self:flex-start;font:700 11.5px/1 var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--brand-dk);background:var(--brand-lt);
  padding:6px 11px;border-radius:100px;margin-bottom:9px}
.pw-body h3{font-size:19px;margin-bottom:6px}
.pw-body p{color:var(--mut);font-size:14.5px;line-height:1.55;margin:0 0 10px}
.pw-get{color:var(--ink-2) !important;font-size:13.5px !important;
  border-left:3px solid var(--brand);padding-left:11px;margin-bottom:10px !important}
.pw-get b{display:block;font:700 11.5px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-dk);margin-bottom:3px}
.pw-more{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;
  min-height:44px;min-width:44px;padding:4px 2px;white-space:nowrap;
  font:600 14px var(--sans);color:var(--brand-dk)}

.proc-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

@media (max-width:960px){
  .pw{grid-template-columns:repeat(2,1fr);gap:20px}
  /* the spine only reads as a spine across one row */
  .pw-step:nth-child(3) .pw-spine::before{display:none}
}
@media (max-width:620px){
  .pw{grid-template-columns:1fr;gap:8px}
  /* three children into two columns puts the copy in the 34px spine column —
     the figure and the body both have to be pinned to column 2 */
  .pw-step{display:grid;grid-template-columns:34px 1fr;gap:0 14px;align-items:start}
  .pw-fig,.pw-body{grid-column:2}
  .pw-spine{grid-column:1;grid-row:1 / span 2;height:auto;margin:0;align-self:stretch}
  .pw-spine::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;
    transform:translateX(-50%)}
  .pw-step:nth-child(3) .pw-spine::before{display:block}
  .pw-dot{top:17px}
  .pw-fig{margin-bottom:12px;aspect-ratio:16/9}
  .pw-body{padding-bottom:20px}
}

/* ---- onward links on the pages that were dead ends ---------------------- */
.nextsteps{gap:14px}
.nextstep{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;transition:.18s cubic-bezier(.2,.8,.3,1)}
.nextstep:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);
  text-decoration:none}
.ns-t{display:block;font:700 16px/1.3 var(--sans);color:var(--ink);margin-bottom:5px}
.nextstep:hover .ns-t{color:var(--brand-dk)}
.ns-w{display:block;font-size:14px;line-height:1.5;color:var(--mut)}
@media (min-width:1000px){
  .ns-t{font-size:clamp(15px,2vh,16.5px)}
  .ns-w{font-size:clamp(13px,1.8vh,14px)}
  .nextstep{padding:clamp(12px,2vh,18px)}
}

/* shared small print under a section */
.ba-note{font-size:13.5px;color:var(--mut);margin-top:14px;max-width:70ch}
.ba-note a{color:var(--brand-dk)}

/* ---- guide cards: whole card is the link, no thumbnail to fake ---------- */
.guidecard{display:block;text-decoration:none}
.guidecard .body{display:flex;flex-direction:column;gap:6px;height:100%}
.guidecard h3{margin:0}
.guidecard p{flex:1}
.gc-mins{align-self:flex-start;font:700 11px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-dk);background:var(--brand-lt);
  border-radius:100px;padding:5px 9px}
.guidecard:hover h3{color:var(--brand-dk)}



/* Spam honeypot. Never position this off-canvas with a physical offset — in an
   RTL document left:-9999px makes the page ~10000px wide, the initial scroll
   sits at the far edge and the viewport paints blank. Clip it instead. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---- "what the price covers" cards ------------------------------------- */
.inclcard .body{padding:clamp(20px,2.4vw,28px)}
.inclcard h3{font-size:19px;margin-bottom:12px}
ul.incl{list-style:none;margin:0;padding:0}
ul.incl li{position:relative;padding-left:26px;margin-bottom:11px;font-size:15px;color:var(--ink-2)}
ul.incl li::before{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;
  border:2px solid var(--brand);border-top:0;border-right:0;transform:rotate(-45deg)}
ul.incl.sep li::before{border:0;top:9px;left:1px;width:12px;height:2px;background:var(--mut);
  transform:none}
.inclcard .body p{display:block;-webkit-line-clamp:none;overflow:visible;
  font-size:15px;line-height:1.62;margin-bottom:0}
.imgcredit{font-size:11.5px;color:var(--mut);margin:8px 0 0}

/* ============================================================================
   Image lightbox — see the cloth, not a thumbnail
   ----------------------------------------------------------------------------
   A 168px swatch or a cover-cropped 4:3 hero cannot show a weave, and every
   processed image already exists at 1600w. This opens that file full screen.

   The zoomed state shows the image at its natural pixel size and lets the
   container scroll, rather than transform:scale() — a transform creates no
   scrollable overflow, so a scaled image has its edges permanently out of
   reach. Natural size also means the zoom is the real detail in the file
   rather than an interpolated blur.

   Everything is behind `.js` because the affordance is script-driven: with no
   JS there is no zoom cursor and no fake button role, which is the honest
   failure. The overlay markup is built on first open rather than shipped on
   all 138 pages.
   ========================================================================= */
.js [data-zoom]{position:relative;cursor:zoom-in}
.js [data-zoom]::after{content:"⤢";position:absolute;right:10px;bottom:10px;z-index:4;
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:rgba(15,95,87,.86);color:#fff;font:600 15px/1 var(--sans);
  opacity:0;transition:opacity .18s;pointer-events:none}
.js [data-zoom]:hover::after,.js [data-zoom]:focus-visible::after{opacity:1}
/* touch has no hover, so the hint has to be standing there already */
@media (hover:none){.js [data-zoom]::after{opacity:.8}}

.lbx{position:fixed;inset:0;z-index:100;display:none;background:rgba(12,10,8,.95);
  padding:60px 16px 78px}
.lbx.on{display:block}
/* The frame has to carry a definite height, not max-height:100% on an auto box:
   a percentage max-height on the image resolves against nothing there, the
   image renders at its natural size, overflows the viewport and paints over
   the backdrop. */
.lbx-fig{width:100%;height:100%;display:flex;overflow:auto}
.lbx-fig img{max-width:100%;max-height:100%;object-fit:contain;margin:auto;
  border-radius:6px;background:#221a13}
.lbx-fig.can img{cursor:zoom-in}
.lbx-fig.z img{max-width:none;max-height:none;margin:0;border-radius:0;cursor:grab}
.lbx-fig.z.drag img{cursor:grabbing}
.lbx-btn{position:absolute;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font:400 24px/1 var(--sans)}
.lbx-btn:hover{background:rgba(255,255,255,.28)}
.lbx-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lbx-x{top:14px;right:14px}
.lbx-p{left:14px;top:50%;margin-top:-23px}
.lbx-n{right:14px;top:50%;margin-top:-23px}
.lbx-one .lbx-p,.lbx-one .lbx-n{display:none}
.lbx-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 72px;
  color:#f2e9db;font-size:13.5px;line-height:1.5;text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))}
.lbx-cap b{display:block;margin-bottom:3px;color:var(--gold);
  font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .lbx{padding:54px 8px 72px}
  .lbx-btn{width:40px;height:40px;font-size:21px}
  .lbx-p{left:6px;margin-top:-20px}.lbx-n{right:6px;margin-top:-20px}
  .lbx-cap{padding:12px 14px;font-size:12.5px}
}

/* Footer social links — only rendered when a profile URL has been set */
footer.site .social{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
footer.site .social a{display:inline}

/* Communities, in the area-page hero */
.herocov{margin-top:26px;max-width:56ch}
.covlabel{font:700 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:#f2dcb4;margin-bottom:12px}
.covnote{margin:12px 0 0;font-size:14px;color:rgba(255,255,255,.7)}

/* Hero bullet list — what the free visit actually is. Sits under the CTA in the
   area heroes. Gold marks rather than discs: --gold is decorative on white but
   measures 7.6:1 on the dark hero, which is where this lives. */
.herolist{list-style:none;margin:0;padding:0;max-width:52ch}
.herolist li{position:relative;padding:0 0 11px 26px;font-size:15.5px;line-height:1.55;
  color:rgba(255,255,255,.86)}
.herolist li:last-child{padding-bottom:0}
.herolist li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold);font-weight:700}

/* ---- prose beside an enquiry form ---------------------------------------
   Seven templates put long prose next to the enquiry form. The form is a fixed
   height and the prose is not, so on a long page the right-hand column ran out
   hundreds of pixels early and left a dead rectangle beside the text —
   `deploy/gapcheck.py` measures it. Sticking the form fixes the hole and is the
   better behaviour anyway: the way to get in touch stays on screen while you
   read, instead of scrolling away at the top of the page. */
@media (min-width:901px){
  .proseform > :last-child{position:sticky;top:88px}
}

/* ---- "four questions" section ------------------------------------------
   Rebuilt: the picture used to sit in its own short column beside a 2x2 card
   grid, so the left column ran out of content and left a large empty rectangle
   under it. The introduction now lives in that column with the picture, which
   is what makes both columns finish at roughly the same place, and the points
   are a numbered list because that is what they are. */
.knowgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,3.4vw,54px);align-items:start}
/* The list is the taller column by design — four numbered points against one
   introduction. Rather than padding the introduction to match, it sticks: it
   stays with you while the questions scroll past, which is the reason to put
   them side by side at all. Only above the stacking breakpoint, and only where
   the browser supports it. */
@media (min-width:901px){
  .knowintro{position:sticky;top:88px}
}
.knowintro .sec-head{margin-bottom:24px}
.knowfig{margin:0}
.knowfig img{width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.16)}
.knowfig figcaption{margin-top:11px;font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.66)}
.knowcta{margin-top:22px}

.knowlist{list-style:none;margin:0;padding:0}
.knowlist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.6vw,22px);
  padding:22px 0;border-top:1px solid rgba(255,255,255,.16)}
.knowlist li:first-child{border-top:0;padding-top:0}
.knowlist li:last-child{padding-bottom:0}
.knowlist .n{font:700 13px/1 var(--sans);letter-spacing:.1em;color:var(--gold);padding-top:6px}
.knowlist h3{font-size:19px;margin:0 0 8px}
.knowlist p{margin:0}
.knowlist .ask{margin-top:10px;font-size:14.5px;color:#f2dcb4}
.knowlist .ask a{color:#fff;text-decoration:underline;text-underline-offset:2px}

@media (max-width:900px){
  .knowgrid{grid-template-columns:1fr;gap:28px}
  .knowfig{max-width:520px}
  .knowlist li{padding:18px 0}
}
/* NOTE: a stray '}' used to sit here. A top-level stray closer makes the CSS
   parser discard the NEXT rule as error recovery, which silently ate
   `.postfig{margin:0}` — so every guide hero fell back to the UA default
   figure margin of 1em 40px and rendered inset and undersized on all 17
   guides and the area pages. Verified live before and after. Keep the
   brace count balanced; deploy/csscheck.py fails the build if not. */

/* ---- guide hero ------------------------------------------------------- */
.postfig{margin:0}
.postfig img{width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--line)}

/* Book card heading: title on the left, a quiet "See shades" link on the right,
   so the card keeps to two buttons and one row underneath. */
.bookhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bookhead .seeshades{font-size:12.5px;font-weight:600;color:var(--brand-dk);white-space:nowrap}
/* The card used to be one big link, so the whole thing was the tap target. Now
   that the title and "See shades" are separate links they are only ~14–20px
   tall — responsive.py flags that on touch. The hit area is padded out to 44px
   and pulled back with a negative margin, so the layout is unchanged. */
.bookhead a{display:inline-flex;align-items:center;min-height:44px;
  padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}

/* .cardacts belongs inside a card, where a 2-up grid is right. On a full-width
   section it stretched across the page — this keeps the buttons their own size. */
.actrow .cardacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.actrow .cardacts .btn{width:auto;padding:11px 18px}

/* ---- dedicated SEO content -------------------------------------------------
   The last section of the MAIN content, not the footer. It gets its own tint
   and a rule above it so a reader sees an editorial section, not footer text. */
/* NOT var(--sand): that token is #e8d7b8, a strong band colour meant for short
   promo strips. Under a long read it drops link contrast to 4.02:1 (contrast.py
   caught it). A soft warm tint keeps the section visually separate from both the
   page and the footer while leaving text and links comfortably above AA. */
.seoblock{background:#faf7f1;border-top:1px solid var(--line);
  padding:clamp(34px,5vw,60px) 0}
.seoblock-in{max-width:72ch}
.seoblock h2{font-size:clamp(21px,2.6vw,28px);margin-bottom:14px;line-height:1.22}
.seoblock .prose h3{font-size:clamp(17px,1.5vw,19.5px);font-weight:700;margin:30px 0 8px;line-height:1.3}
.seoblock .prose h3:first-child{margin-top:6px}
.seoblock .prose p{margin:0 0 14px}
.seoblock .prose ul{margin:0 0 16px;padding-left:20px}
.seoblock .prose li{margin-bottom:7px}
@media (max-width:760px){
  .seoblock .prose,.seoblock .prose p,.seoblock .prose li{font-size:15.5px;line-height:1.72}
  .seoblock .prose p{margin:0 0 12px}
  .seoblock .prose h3{margin:24px 0 6px;padding-top:16px;border-top:1px solid rgba(23,18,14,.1)}
  .seoblock .prose h3:first-child{padding-top:0;border-top:0}
  .seoblock h2{margin-bottom:12px}
}

/* Area page: the coverage strip lives under the hero, not inside it */
.covband{background:#fff;border-bottom:1px solid var(--line);padding:20px 0}
.covband .covlabel{display:block;font:700 11px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.covband .chips a{background:var(--bg);border-color:var(--line)}
.covband .covnote{margin:12px 0 0;font-size:13.5px;color:var(--mut)}
/* the hero's promise list reads better as two columns beside the form */
@media (min-width:900px){
  .hero .herolist{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;max-width:none}
}
/* Area hero: compact fact strip under the promise list */
.herostats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px;margin-top:26px;max-width:520px}
.herostats div{border-left:2px solid rgba(224,165,60,.55);padding-left:12px}
.herostats b{display:block;font:700 21px/1.2 var(--serif,Georgia,serif);color:var(--gold)}
.herostats span{display:block;font-size:13px;color:rgba(255,255,255,.75);margin-top:2px}

/* ============================================================================
   Article measure — one column, not three
   ----------------------------------------------------------------------------
   post.php used to carry three different hardcoded widths inline: the header at
   780px, the hero at 900px and the body at 74ch (~660px). Nothing shared a left
   edge, so the title, the picture and the first paragraph each started at a
   different place down the page. It read as an accident because it was one —
   three separate edits, none aware of the others.

   Now there is a single measure. The header and the body sit on it. The hero is
   allowed to break out past it, but by a decisive amount and symmetrically, so
   it reads as a deliberate full-bleed rather than a near-miss.
   ========================================================================= */
:root{ --measure:74ch; --measure-wide:900px }

.article-col{max-width:var(--measure);margin-inline:auto}
.article-fig{max-width:var(--measure-wide);margin-inline:auto}

/* The dateline under the title. Was an inline style on a bare <p>. */
.article-meta{color:var(--mut);font-size:14.5px;margin:0}

/* The opening paragraph carries the piece. Slightly larger, slightly looser,
   and it stops at a shorter measure than the body so the eye has an easy first
   line. Scoped to .prose so it cannot leak into cards or the SEO block. */
.prose > p:first-of-type{font-size:17.5px;line-height:1.72;color:var(--ink-2)}

/* h2 was clamping up to 40px, which is a page-title size. In a 660px column
   above 16px body text it shouted, and on mobile it took three lines. This is
   still clearly a section break, just proportioned to the column it sits in. */
.prose h2{font-size:clamp(23px,2.6vw,30px);letter-spacing:-.01em}
.prose h3{font-size:clamp(17px,1.7vw,19px)}

/* Long guides are mostly prose and lists; give the lists a little more air so a
   six-item list does not read as a solid block. */
.prose li{margin-bottom:.55em}
.prose ul,.prose ol{margin-bottom:1.35em}

/* On mobile the WhatsApp dock button duplicated the WhatsApp tab already in the
   sticky .mobar, so the same action sat on screen twice — and the dock overlays
   the article text, which is the one place a reader is trying to read. The bar
   keeps it; the floating copy goes. The AI button has no equivalent in the bar,
   so it stays. */
@media (max-width:900px){
  .dock .dockbtn.wa{display:none}
}

/* ---- "Paying for it": an illustrated card row over a soft background --------
   Two earlier attempts were wrong and both are worth recording. A single hero
   at the guide measure was a square slab that pushed the steps off screen; a
   full-width band was better but still one decorative picture bolted above the
   content. What the section actually wanted is what the owner drew: EVERY STAGE
   ILLUSTRATED, on a background that sets the scene behind the whole thing.

   Every image is optional. No background -> the plain sand section as before.
   No step picture -> that card falls back to icon-only and still lines up with
   its neighbours, because the picture is a block above the number, not a layer
   the layout depends on. */
.paysec.hasbg{position:relative;isolation:isolate}
/* The picture is decorative and sits behind text, so it is a very low-contrast
   wash rather than a photograph: the copy above it has to stay AA. */
.paysec.hasbg::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--paybg);background-size:cover;background-position:center 30%;
  opacity:.34}
.paysec.hasbg::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(253,246,234,.82) 0%,rgba(246,227,201,.9) 100%)}

/* the photograph on a step card: a band across the top, corners following the
   card, and a fixed ratio so four cards stay the same height whatever the
   source images are */
/* The card keeps its side padding for the text, so the picture has to break out
   of it with negative margins to reach the card edges — and overflow:hidden on
   the li clips it back to the rounded corners. */
/* NOT overflow:hidden on the li. That clipped the chevron connector between
   cards, which is drawn as an ::after sitting OUTSIDE the card's box — the
   picture is rounded directly instead, which keeps both. */
.paysteps li.haspic{padding-top:0}
.paysteps .pic{display:block;margin:0 -20px 18px}
.paysteps .pic img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* The badge used to hang off the top edge (top:-13px), which overflow:hidden on
   an illustrated card would slice in half. On a picture card it moves inside and
   to the left, sitting ON the photograph the way the reference does. */
.paysteps li.haspic .num{top:12px;left:12px;transform:none;z-index:2}
/* and the icon moves up to straddle the picture's bottom edge, which is what
   makes the card read as one object rather than a photo with a card under it */
.paysteps li.haspic .ic{margin-top:-46px;position:relative;z-index:2;
  background:#fff;box-shadow:0 2px 10px rgba(23,18,14,.14)}

/* Team member portrait. Profile photos are square or upright, so at the 900px
   hero width a studio headshot became a 900x900 slab that pushed the whole
   profile below the fold. A portrait gets a portrait measure instead. */
.memberfig{max-width:420px;margin-inline:auto}

/* ---- assistant section -----------------------------------------------------
   Was an inline-styled 1.1fr/.9fr grid relying on the generic
   [style*=grid-template-columns] override to collapse. It has its own class and
   breakpoints now, and the chat mock is dressed as a real panel — header, body,
   and a footer that is the entry point rather than a decorative input box. */
.aigrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,56px);align-items:center}
.ailede{font-size:17.5px;max-width:52ch}

/* four capability cards instead of a bullet list */
.aipoints{list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.aipoints li{display:grid;grid-template-columns:22px 1fr;gap:2px 10px;margin:0;
  font-size:14.5px;line-height:1.5}
.aipoints .tick{grid-row:span 2;width:22px;height:22px;border-radius:50%;margin-top:2px;
  display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff}
.aipoints b{color:#fff;font-size:15px}
.aipoints span:not(.tick){color:rgba(255,255,255,.78)}
.aicta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* the chat panel */
.aicard{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-lg);backdrop-filter:blur(8px);overflow:hidden}
.aihead{display:flex;align-items:center;gap:9px;padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.16);color:#fff;font-size:14.5px}
.aihead .dot{width:8px;height:8px;border-radius:50%;background:#5fd39b;
  box-shadow:0 0 0 3px rgba(95,211,155,.25)}
/* "Example" is not decoration — an unlabelled transcript reads as a real
   customer exchange, which this is not.
   The BACKGROUND has to be set explicitly: the global .tag is
   background:var(--brand-lt) (near-white) with dark brand text, so overriding
   only the colour to white left white-on-near-white and the label vanished. */
.aihead .tag{margin-left:auto;font:700 12px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.30);border-radius:100px;padding:5px 9px}
.aibody{display:flex;flex-direction:column;gap:10px;padding:18px}
.aibody .msg{max-width:92%}
.aibody .msg.me{max-width:82%}

/* the footer is a button, so the mock has a way in rather than a dead input */
.aifoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:14px 18px;border:0;border-top:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);
  font:500 14.5px var(--sans);cursor:pointer;text-align:left;transition:.18s}
.aifoot:hover{background:rgba(255,255,255,.14);color:#fff}
.aifoot .go{font-size:17px}

@media (max-width:900px){
  .aigrid{grid-template-columns:1fr}
  .ailede{max-width:none}
}
@media (max-width:520px){
  .aipoints{grid-template-columns:1fr;gap:12px}
  .aicta .btn{width:100%;justify-content:center}
}

/* ---- blog cards on the home page ------------------------------------------
   A short image strip, deliberately not a card-top hero. Six of these sit in one
   grid, so a tall picture on each would turn the section into a wall of imagery
   and push the copy — which is the reason to click — below the fold. 16:7 shows
   enough to recognise the subject and no more.
   The minutes pill moves onto the strip so the text block keeps the height it
   had before, and cards whose post has no hero still align, because the strip is
   a block above .body rather than something the layout depends on. */
.guidecard.haspic{display:flex;flex-direction:column}
.gc-pic{position:relative;display:block;line-height:0}
.gc-pic img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* on the strip the pill needs its own contrast, not the page's cream chip */
.gc-pic .gc-mins{position:absolute;left:12px;top:12px;background:rgba(23,18,14,.72);
  color:#fff;backdrop-filter:blur(4px)}
.guidecard.haspic .body{padding-top:16px}

/* The area cards reuse .gc-pic from the home blog cards — same short strip, same
   reason (eight tall pictures would bury the community lists this page ranks
   for). Only the card-level flex is needed, since .card is not display:flex. */
.card.haspic{display:flex;flex-direction:column}

/* ---------------------------------------------- Google Business Profile block */
.gbp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.gbp-map{border-radius:var(--r);overflow:hidden;box-shadow:0 12px 34px -20px rgba(23,18,14,.5);
  line-height:0;background:#e9e4db}
.gbp-map iframe{width:100%;height:340px;border:0;display:block}
.gbp-rev{font-size:14.5px;color:var(--mut);margin-top:16px}
@media (max-width:900px){.gbp{grid-template-columns:1fr;gap:26px}.gbp-map iframe{height:260px}}

/* ------------------------------------------------------------ social links */
.sociallinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.sociallinks a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;border:1px solid rgba(23,18,14,.14);
  color:var(--ink-2);background:#fff;transition:.18s}
.sociallinks a:hover{border-color:var(--brand);color:var(--brand-dk);
  transform:translateY(-2px);text-decoration:none}
.sociallinks svg{width:19px;height:19px;fill:currentColor}
.sociallinks span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.sociallinks.light a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#e8ded2}
.sociallinks.light a:hover{background:rgba(255,255,255,.16);border-color:var(--gold);color:#fff}
.followblock{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.followblock p{margin:0;max-width:46ch}

@media (max-width:760px){
  .seoblock .prose > p:first-of-type{font-size:16.5px;line-height:1.66}
}
@media (min-width:901px){
  .prose,.seoblock-in{max-width:none!important;margin-left:0!important;margin-right:0!important}
}
footer.site .sociallinks a{display:inline-flex;align-items:center;justify-content:center;padding:0;min-height:44px}