/* ============================================================
   KRITIKA HEALTHCARE PVT. LTD.
   Design System — "Herbal by Choice"
   Clean commercial B2B layout · botanical green · gold accent
   Type: Playfair Display (headings) + Outfit (text)
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */
:root{
  /* Brand greens */
  --forest-900:#08251B;
  --forest-800:#0C3427;
  --forest-700:#124B36;
  --forest-600:#1B5C42;
  --forest-500:#2F7D5D;   /* primary accent */
  --leaf-400:#3D9A6F;
  --leaf-300:#59B98A;
  --leaf-200:#A7DCC4;
  --leaf-50:#EDF6F1;      /* pale green tint band */

  /* Gold — used sparingly, from the logo */
  --gold-700:#8A6C15;
  --gold-600:#B08C1E;
  --gold-500:#C9A227;
  --gold-400:#DDBB4A;
  --gold-300:#EBD489;

  /* Neutrals — light, commercial */
  --cream-50:#FFFFFF;
  --cream-100:#F7F9F8;
  --cream-200:#EEF2F0;
  --cream-300:#DDE4E0;

  --ink-900:#111A15;
  --ink-700:#31413A;
  --ink-500:#5A6C64;
  --ink-400:#767F7B;
  --ink-300:#9AA5A0;

  --white:#FFFFFF;

  /* Semantic */
  --bg:#FFFFFF;
  --bg-alt:#F7F9F8;
  --surface:var(--white);
  --text:var(--ink-900);
  --text-muted:var(--ink-400);
  --line:#E4EAE7;
  --line-strong:#CFD9D4;

  /* Gradients */
  --grad-forest:linear-gradient(135deg,var(--forest-800) 0%,var(--forest-500) 60%,var(--forest-700) 100%);
  --grad-gold:linear-gradient(120deg,var(--gold-600),var(--gold-400) 45%,var(--gold-300) 70%,var(--gold-500));
  --grad-leaf:linear-gradient(135deg,var(--leaf-400),var(--forest-500));
  --grad-sheen:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 62%);

  /* Type */
  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Space & shape — squared, commercial */
  --radius-sm:2px;
  --radius:4px;
  --radius-lg:6px;
  --radius-xl:8px;
  --container:1320px;
  --gutter:clamp(18px,4vw,52px);
  --section-y:clamp(60px,7.5vw,112px);

  /* Elevation — flatter */
  --sh-xs:0 1px 2px rgba(17,26,21,.05);
  --sh-sm:0 2px 8px rgba(17,26,21,.06);
  --sh-md:0 8px 24px -10px rgba(17,26,21,.16);
  --sh-lg:0 20px 50px -20px rgba(17,26,21,.24);
  --sh-gold:0 10px 26px -12px rgba(176,140,30,.4);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur:.55s;

  --header-h:96px;   /* overridden per breakpoint in section 26 */
}

/* ---------- 2. Reset -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
/* Off-canvas panels are translated beyond the right edge; clip them so they
   never widen the page. `clip` is preferred over `hidden` because it does not
   turn the root into a scroll container (which would break position:sticky). */
html,body{overflow-x:hidden}
@supports (overflow:clip){ html,body{overflow-x:clip} }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--forest-500);outline-offset:3px;border-radius:2px}
::selection{background:var(--forest-500);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--cream-100)}
::-webkit-scrollbar-thumb{background:#C3CFC9;border-radius:99px;border:3px solid var(--cream-100)}
::-webkit-scrollbar-thumb:hover{background:#A8B7B0}

/* ---------- 3. Typography --------------------------------- */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.2;letter-spacing:-.022em;color:var(--ink-900)}
h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;line-height:1.14}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:clamp(1.2rem,1.85vw,1.55rem)}
h4{font-size:clamp(1.02rem,1.3vw,1.18rem);letter-spacing:-.012em}
h5{letter-spacing:-.01em}
p{color:var(--ink-500)}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.75;color:var(--ink-500)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--forest-500);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-500)}
.eyebrow.center::after{content:"";width:26px;height:2px;background:var(--gold-500)}
.eyebrow.on-dark{color:var(--gold-300)}
.eyebrow.on-dark::before,.eyebrow.on-dark::after{background:var(--gold-400)}

/* VCA-style heading: second line underscored in green */
.underline-accent{
  display:inline-block;position:relative;padding-bottom:.12em;
  border-bottom:3px solid var(--forest-500);
}
.bg-dark .underline-accent{border-bottom-color:var(--gold-400)}

.script{font-weight:600;color:var(--gold-600)}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-center{text-align:center}
.muted{color:var(--text-muted)}

/* ---------- 4. Layout ------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:1520px}
.container-narrow{max-width:880px}
.section{padding-block:var(--section-y);position:relative}
.section-head{max-width:740px;margin-bottom:clamp(32px,4vw,56px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin:.55em 0 .5em}
.grid{display:grid;gap:clamp(20px,2.4vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex}
.between{justify-content:space-between}
.aic{align-items:center}
.wrap{flex-wrap:wrap}
.gap-sm{gap:12px}.gap{gap:20px}.gap-lg{gap:34px}

.bg-alt{background:var(--bg-alt)}
.bg-tint{background:var(--leaf-50)}
.bg-dark{background:var(--forest-900);color:rgba(255,255,255,.78)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark h5{color:#fff}
.bg-dark p{color:rgba(255,255,255,.7)}

/* Decorative botanical grain */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(circle at 1px 1px,rgba(47,125,93,.055) 1px,transparent 0);
  background-size:22px 22px;
}
.bg-dark.grain::before{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0)}

/* ---------- 5. Buttons ------------------------------------ */
.btn{
  --btn-bg:var(--forest-500);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.9em;border-radius:var(--radius);
  font-size:.82rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  background:var(--btn-bg);color:var(--btn-fg);
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .35s var(--ease-out-expo),box-shadow .35s var(--ease),background .3s,filter .3s;
  box-shadow:var(--sh-sm);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--grad-sheen);transform:translateX(-120%);
  transition:transform .85s var(--ease-out-expo);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md);filter:brightness(1.06)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none;transition:transform .4s var(--ease-spring)}
.btn:hover svg{transform:translateX(3px)}

.btn-dark{--btn-bg:var(--forest-800)}
.btn-gold{--btn-bg:var(--gold-500);--btn-fg:var(--forest-900);box-shadow:var(--sh-gold)}
.btn-wa{--btn-bg:#25D366;--btn-fg:#fff}
.btn-wa:hover{filter:brightness(1.04)}
.btn-outline{
  --btn-bg:transparent;--btn-fg:var(--forest-700);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.btn-outline:hover{--btn-fg:#fff;--btn-bg:var(--forest-500);box-shadow:var(--sh-sm)}
.btn-ghost-light{--btn-bg:rgba(255,255,255,.1);--btn-fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn-ghost-light:hover{--btn-bg:rgba(255,255,255,.2)}
.btn-sm{padding:.68em 1.35em;font-size:.74rem}
.btn-block{width:100%}

/* Text link with underline sweep */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;position:relative;
  font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-600);
}
.link-arrow::before{
  content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;
  background:var(--gold-500);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out-expo);
}
.link-arrow:hover::before{transform:scaleX(1);transform-origin:left}
.link-arrow svg{width:16px;transition:transform .4s var(--ease-spring)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 6. Preloader ---------------------------------- */
#preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--forest-900);
  transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden}
.pl-mark{display:flex;flex-direction:column;align-items:center;gap:22px}
.pl-mark img{width:96px;filter:drop-shadow(0 8px 28px rgba(0,0,0,.4));animation:plPulse 2.2s var(--ease) infinite}
.pl-bar{width:180px;height:2px;background:rgba(255,255,255,.14);border-radius:9px;overflow:hidden}
.pl-bar i{display:block;height:100%;width:0;background:var(--grad-gold);transition:width .3s linear}
.pl-word{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--gold-300);letter-spacing:.05em}
@keyframes plPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.07);opacity:1}}

/* ---------- 7. Header ------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;background:var(--white);
  /* No hairline here — the header's last row is the solid green bar, and a
     light rule under it reads as a stray white line over dark page heroes. */
  transition:box-shadow .4s var(--ease),transform .5s var(--ease);
}
/* The header stays put at all times — no hide-on-scroll. */
.site-header.scrolled{box-shadow:0 2px 18px -8px rgba(17,26,21,.22)}

/* --- Row 1: utility bar --- */
.topbar{
  background:var(--forest-800);color:rgba(255,255,255,.82);
  font-size:.76rem;letter-spacing:.01em;
  height:36px;overflow:hidden;
  transition:height .35s var(--ease),opacity .3s;
}
.topbar .container{height:36px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar a{display:inline-flex;align-items:center;gap:.4em;transition:color .3s}
.topbar a:hover{color:var(--gold-300)}
.topbar svg{width:13px;height:13px;opacity:.75}
.topbar-tag{display:inline-flex;align-items:center;gap:.45em;font-weight:600;letter-spacing:.02em;color:var(--gold-300)}
.site-header.scrolled .topbar{height:0;opacity:0}

/* --- Row 2: brand + credentials + actions --- */
.navbar{
  height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:height .35s var(--ease);
}
.site-header.scrolled .navbar{height:86px}

.brand{display:flex;align-items:center;flex:none}
/* The lock-up carries three lines of type — "KRITIKA", "HEALTHCARE PVT. LTD."
   and the motto. Below ~80px the middle line stops being readable, so the brand
   row is sized around the logo rather than the other way round. */
.brand img{height:86px;width:auto;transition:height .35s var(--ease);image-rendering:auto}
.site-header.scrolled .brand img{height:70px}

/* Credential blocks (VCA-style) */
.credentials{display:none;align-items:center;gap:clamp(20px,2.6vw,46px);margin-left:auto;margin-right:auto}
.cred{line-height:1.35}
.cred b{display:block;font-size:.8rem;font-weight:700;color:var(--ink-900)}
.cred span{display:block;font-size:.74rem;color:var(--ink-400)}

.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-quote{display:none}
.cart-btn{
  position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius);
  background:var(--cream-200);color:var(--forest-700);
  transition:background .3s,color .3s,transform .3s var(--ease-spring);
}
.cart-btn:hover{background:var(--forest-500);color:#fff;transform:translateY(-2px)}
.cart-btn svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:99px;
  background:var(--gold-500);color:var(--forest-900);
  font-size:.66rem;font-weight:800;box-shadow:0 2px 7px rgba(176,140,30,.45);
  transform:scale(0);transition:transform .4s var(--ease-spring);
}
.cart-count.show{transform:scale(1)}
.cart-count.bump{animation:bump .55s var(--ease-spring)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.4)}100%{transform:scale(1)}}

.burger{display:grid;place-items:center;width:42px;height:42px;gap:5px;border-radius:var(--radius);background:var(--cream-200)}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--forest-800);transition:transform .45s var(--ease-out-expo),opacity .3s,width .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;width:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Row 3: solid green nav bar --- */
.navbar-green{display:none;background:var(--forest-500)}
.navbar-green .container{display:flex;align-items:center;justify-content:center}
.nav{display:flex;align-items:center;gap:clamp(4px,.7vw,10px);flex-wrap:wrap;justify-content:center}
.nav-link{
  position:relative;display:block;
  font-size:.82rem;font-weight:600;letter-spacing:.045em;text-transform:uppercase;
  color:rgba(255,255,255,.9);padding:14px clamp(9px,1.1vw,17px);
  transition:color .3s,background .3s;white-space:nowrap;
}
.nav-link:hover{color:#fff;background:rgba(0,0,0,.13)}
.nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;
  background:var(--gold-400);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out-expo);
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.nav-link.active{color:#fff;background:rgba(0,0,0,.13)}

.has-drop{position:relative}
.drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:275px;background:var(--surface);border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--sh-lg);border:1px solid var(--line);border-top:3px solid var(--gold-500);
  padding:8px;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .4s var(--ease-out-expo),visibility .3s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{
  display:flex;flex-direction:column;gap:2px;padding:10px 13px;border-radius:var(--radius);
  font-size:.88rem;font-weight:600;color:var(--ink-700);transition:background .25s,color .25s,padding-left .25s;
}
.drop a small{font-size:.73rem;font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0}
.drop a:hover{background:var(--leaf-50);color:var(--forest-500);padding-left:18px}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:890;background:var(--forest-900);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 42px) 56px);
  transition:clip-path .75s var(--ease-out-expo);
}
.drawer.open{clip-path:circle(160% at calc(100% - 42px) 56px)}
.drawer a{
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:#fff;
  opacity:0;transform:translateY(20px);
  transition:opacity .45s var(--ease),transform .55s var(--ease-out-expo),color .3s;
}
.drawer.open a{opacity:1;transform:none}
.drawer a:hover{color:var(--gold-300)}
.drawer-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:11px}
.drawer-foot .btn{width:100%}

/* ---------- 8. Hero --------------------------------------- */
.hero{
  position:relative;min-height:min(88svh,760px);display:flex;align-items:center;
  background:var(--forest-900);overflow:hidden;isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);opacity:1;will-change:transform}
/* The hero backdrops are composed artwork in the brand palette, so the scrim
   only has to protect the copy on the left — it is no longer hiding a
   washed-out photograph. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(100deg,rgba(6,30,21,.82) 0%,rgba(6,30,21,.62) 26%,rgba(6,30,21,.22) 52%,rgba(6,30,21,0) 74%),
    linear-gradient(to top,rgba(8,37,27,.92) 1%,transparent 34%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 1px,transparent 0);
  background-size:26px 26px;
}
.hero-orb{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;z-index:-2;pointer-events:none;
  animation:orbFloat 18s ease-in-out infinite;
}
.hero-orb.a{width:520px;height:520px;background:var(--leaf-400);top:-14%;right:-8%}
.hero-orb.b{width:400px;height:400px;background:var(--gold-500);bottom:-16%;left:-6%;animation-delay:-7s;opacity:.28}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,42px) scale(1.12)}}

.hero-inner{position:relative;z-index:2;padding-block:calc(var(--header-h) + clamp(34px,6vh,72px)) clamp(64px,9vh,104px)}
/* Constrain the text, not the container — so the hero lines up with the
   header, sections and footer instead of drifting right on wide screens. */
.hero-inner h1{max-width:880px}
.hero-inner .hero-cta,.hero-inner .hero-badges{max-width:780px}
.hero h1{color:var(--cream-50);margin:.32em 0 .38em;letter-spacing:-.025em}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease-out-expo)}
.hero.ready h1 .line > span{transform:none}
.hero h1 .line:nth-child(2) > span{transition-delay:.1s}
.hero h1 .line:nth-child(3) > span{transition-delay:.2s}
.hero-sub{
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.8;color:rgba(242,237,223,.8);max-width:620px;
  opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) .45s,transform .9s var(--ease-out-expo) .45s;
}
.hero.ready .hero-sub{opacity:1;transform:none}
.hero-cta{
  display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(30px,4vw,44px);
  opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) .62s,transform .9s var(--ease-out-expo) .62s;
}
.hero.ready .hero-cta{opacity:1;transform:none}
.hero-eyebrow{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) .25s,transform .8s var(--ease) .25s}
.hero.ready .hero-eyebrow{opacity:1;transform:none}

.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .8s,transform .9s var(--ease) .8s;
}
.hero.ready .hero-badges{opacity:1;transform:none}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,237,223,.88);
  backdrop-filter:blur(10px);transition:background .3s,transform .35s var(--ease-spring);
}
.hero-badge:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.hero-badge svg{width:15px;height:15px;color:var(--gold-400)}

.hero-slides{position:absolute;inset:0;z-index:-3}
.hero-slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 1.4s var(--ease)}
/* The slide on its way out stays solid beneath the incoming one, so the hero
   never dips to an empty backdrop mid-cross-fade. */
.hero-slide.holding{opacity:1;z-index:1;transition:none}
.hero-slide.active{opacity:1;z-index:2}
.hero-slide img{width:100%;height:100%;object-fit:cover;opacity:1;transform:scale(1.04);animation:kenBurns 18s ease-in-out infinite alternate}
@keyframes kenBurns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-1.4%,-1.4%)}}

.hero-dots{position:absolute;bottom:52px;right:var(--gutter);z-index:3;display:flex;gap:10px}
.hero-dots button{width:34px;height:3px;border-radius:9px;background:rgba(255,255,255,.24);transition:background .4s,width .4s var(--ease)}
.hero-dots button.active{background:var(--gold-400);width:52px}

.scroll-hint{
  position:absolute;bottom:40px;left:var(--gutter);z-index:3;display:flex;align-items:center;gap:12px;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,237,223,.55);
}
.scroll-hint i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold-400),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;top:0;left:0;width:100%;height:14px;background:var(--gold-300);animation:scrollDot 2s var(--ease) infinite}
@keyframes scrollDot{0%{transform:translateY(-16px)}100%{transform:translateY(48px)}}

/* ---------- 9. Marquee ------------------------------------ */
.marquee{
  overflow:hidden;background:var(--forest-800);
  border-block:1px solid rgba(255,255,255,.07);padding-block:18px;
}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite;gap:0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  display:inline-flex;align-items:center;gap:16px;padding-inline:30px;
  font-size:1.05rem;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.55);white-space:nowrap;
}
.marquee-item::after{content:"✦";color:var(--gold-500);font-size:.8rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 10. Reveal animations ------------------------- */
[data-reveal]{opacity:0;transform:translateY(38px);transition:opacity .95s var(--ease),transform 1.05s var(--ease-out-expo)}
[data-reveal].in{opacity:1;transform:none}
/* Sideways reveals need room to start off-position without widening the page,
   so below 1280px they slide vertically instead. */
[data-reveal="left"]{transform:translateY(28px)}
[data-reveal="right"]{transform:translateY(28px)}
@media (min-width:1280px){
  [data-reveal="left"]{transform:translateX(-44px)}
  [data-reveal="right"]{transform:translateX(44px)}
}
[data-reveal="scale"]{transform:scale(.93)}
[data-reveal="blur"]{filter:blur(12px)}
[data-reveal="blur"].in{filter:blur(0)}
[data-reveal].in{transform:none}
[data-delay="1"]{transition-delay:.09s}
[data-delay="2"]{transition-delay:.18s}
[data-delay="3"]{transition-delay:.27s}
[data-delay="4"]{transition-delay:.36s}
[data-delay="5"]{transition-delay:.45s}
[data-delay="6"]{transition-delay:.54s}
[data-delay="7"]{transition-delay:.63s}
[data-delay="8"]{transition-delay:.72s}

.split-line{display:block;overflow:hidden}
.split-line > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out-expo)}
.in .split-line > span,.split-line.in > span{transform:none}

/* Parallax layer */
[data-parallax]{will-change:transform}

/* ---------- 11. Cards ------------------------------------- */
.card{
  position:relative;background:var(--surface);border-radius:var(--radius-lg);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .5s var(--ease-out-expo),box-shadow .5s var(--ease),border-color .4s;
  will-change:transform;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--forest-500)}

/* Product card */
.p-card{display:flex;flex-direction:column;height:100%}
.p-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,var(--cream-100),var(--cream-200));
}
.p-media img{width:100%;height:100%;object-fit:contain;padding:14%;transition:transform 1s var(--ease-out-expo)}
.p-card:hover .p-media img{transform:scale(1.09) rotate(-1.5deg)}
.p-media::after{
  content:"";position:absolute;inset:0;background:var(--grad-sheen);
  transform:translateX(-130%) skewX(-12deg);transition:transform 1s var(--ease-out-expo);
}
.p-card:hover .p-media::after{transform:translateX(130%) skewX(-12deg)}
.p-code{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  padding:.35em .7em;border-radius:var(--radius);background:rgba(8,37,27,.82);color:var(--gold-300);
  backdrop-filter:blur(6px);
}
.p-media-link{position:absolute;inset:0;z-index:1}
.p-quick{
  position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:8px;
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .5s var(--ease-out-expo);
}
.p-card:hover .p-quick{opacity:1;transform:none}
.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius);
  background:var(--surface);color:var(--forest-700);box-shadow:var(--sh-md);
  transition:background .3s,color .3s,transform .35s var(--ease-spring);
}
.icon-btn:hover{background:var(--forest-600);color:var(--cream-50);transform:scale(1.12)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.added{background:var(--leaf-400);color:#fff}

.p-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;gap:10px}
.p-cat{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600)}
.p-name{font-weight:700;letter-spacing:-.015em;font-size:1.5rem;line-height:1.15;color:var(--forest-900);transition:color .35s}
.p-card:hover .p-name{color:var(--forest-500)}
.p-bot{font-style:italic;font-size:.84rem;color:var(--text-muted)}
.p-desc{font-size:.9rem;line-height:1.6;color:var(--ink-500);flex:1}
.p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tag{
  font-size:.68rem;font-weight:600;letter-spacing:.04em;padding:.35em .75em;border-radius:var(--radius);
  background:var(--cream-100);color:var(--forest-600);border:1px solid var(--line);
}
.tag.gold{background:rgba(201,162,39,.1);color:var(--gold-700);border-color:rgba(201,162,39,.24)}
.p-foot{display:flex;align-items:center;gap:10px;padding-top:16px;margin-top:6px;border-top:1px solid var(--line)}
.p-foot .btn{flex:1}

/* Category card */
.cat-card{
  position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;
  min-height:340px;color:var(--cream-50);isolation:isolate;
  transition:transform .65s var(--ease-out-expo),box-shadow .6s var(--ease);
}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.15s var(--ease-out-expo)}
.cat-card:hover img{transform:scale(1.1)}
.cat-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,37,27,.94) 8%,rgba(8,37,27,.55) 45%,rgba(8,37,27,.18) 100%);
  transition:opacity .5s;
}
.cat-body{position:relative;height:100%;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px}
.cat-body h3{color:var(--cream-50);margin-bottom:8px}
.cat-body p{color:rgba(242,237,223,.72);font-size:.9rem}
.cat-count{
  position:absolute;top:20px;right:20px;padding:.4em .9em;border-radius:var(--radius);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
}
.cat-more{
  display:inline-flex;align-items:center;gap:.5em;margin-top:16px;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);
  transform:translateY(8px);opacity:0;transition:transform .5s var(--ease-out-expo),opacity .45s;
}
.cat-card:hover .cat-more{transform:none;opacity:1}

/* Feature / value card */
.feature{
  position:relative;padding:34px 30px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;height:100%;
  transition:transform .6s var(--ease-out-expo),box-shadow .55s,border-color .45s;
}
.feature::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-gold);transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s var(--ease-out-expo);
}
.feature:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:transparent}
.feature:hover::before{transform:scaleY(1);transform-origin:top}
.feature-ico{
  width:54px;height:54px;border-radius:var(--radius);display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,var(--cream-100),var(--cream-200));color:var(--forest-600);
  transition:background .45s,color .45s,transform .55s var(--ease-spring);
}
.feature:hover .feature-ico{background:var(--grad-forest);color:var(--gold-300);transform:rotate(-6deg) scale(1.06)}
.feature-ico svg{width:26px;height:26px}
.feature h4{margin-bottom:10px}
.feature p{font-size:.92rem}

.feature-num{
  font-weight:800;letter-spacing:-.04em;font-size:3rem;line-height:1;color:var(--cream-300);
  transition:color .5s;margin-bottom:12px;display:block;
}
.feature:hover .feature-num{color:var(--gold-400)}

/* ---------- 12. Stats ------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden}
.stat{padding:34px 26px;background:var(--forest-800);text-align:center;transition:background .5s}
.stat:hover{background:var(--forest-700)}
.stat-num{font-weight:800;letter-spacing:-.03em;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;color:var(--gold-400)}
.stat-num sup{font-size:.5em;vertical-align:super}
.stat-label{margin-top:10px;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,237,223,.62)}

/* ---------- 13. Process timeline -------------------------- */
.process{position:relative;display:grid;gap:0}
.process::before{
  content:"";position:absolute;left:27px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(var(--gold-400),var(--forest-500),transparent);
}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;padding-block:20px}
.step-dot{
  position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--line-strong);
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--forest-600);
  transition:background .5s var(--ease),color .5s,border-color .5s,transform .55s var(--ease-spring),box-shadow .5s;
}
.step:hover .step-dot,.step.in .step-dot{background:var(--grad-forest);color:var(--gold-300);border-color:transparent;box-shadow:0 10px 30px -10px rgba(18,75,54,.6)}
.step:hover .step-dot{transform:scale(1.08)}
.step h4{margin-bottom:6px}
.step p{font-size:.92rem}

/* ---------- 14. Split media block ------------------------- */
.split{display:grid;gap:clamp(34px,5vw,72px);align-items:center}
/* Grid items default to min-width:auto, so a child with large padding can
   push its track past the container. Let them shrink. */
.split > *,.grid > *,.g2 > *,.g3 > *,.g4 > *{min-width:0}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s var(--ease-out-expo)}
.split-media:hover img{transform:scale(1.06)}
.split-media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(8,37,27,.35))}
.split-badge{
  position:absolute;z-index:2;bottom:26px;left:26px;right:26px;
  padding:20px 24px;border-radius:var(--radius);
  background:rgba(253,252,247,.92);backdrop-filter:blur(14px);box-shadow:var(--sh-md);
}
.split-badge .k{font-weight:800;letter-spacing:-.03em;font-size:2rem;line-height:1;color:var(--forest-700)}
.split-badge .v{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-top:5px}

.check-list{display:grid;gap:14px;margin-top:26px}
.check-list li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--ink-500)}
.check-list svg{flex:none;width:22px;height:22px;color:var(--leaf-400);margin-top:1px}
.bg-dark .check-list li{color:rgba(242,237,223,.78)}

/* ---------- 15. CTA band ---------------------------------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:var(--grad-forest);color:var(--cream-50);
  padding:clamp(44px,6vw,80px);isolation:isolate;
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background:radial-gradient(70% 120% at 88% 12%,var(--leaf-400),transparent 62%),
             radial-gradient(60% 100% at 6% 92%,var(--gold-600),transparent 62%);
}
.cta-band h2{color:var(--cream-50)}
.cta-band p{color:rgba(242,237,223,.78)}

/* ---------- 16. Forms ------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-400)}
.field label .req{color:#C0392B}
.input,.select,.textarea{
  width:100%;padding:.85em 1.05em;border-radius:var(--radius);
  background:var(--surface);border:1.5px solid var(--line);
  font-size:.95rem;color:var(--text);
  transition:border-color .35s,box-shadow .35s,background .3s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--forest-500);box-shadow:0 0 0 4px rgba(31,122,76,.12);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-300)}
.textarea{min-height:130px;resize:vertical;line-height:1.65}
.select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  padding-right:2.9em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D7268' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;background-size:16px;
}
.form-grid{display:grid;gap:20px}

.alert{
  display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--radius);
  font-size:.92rem;margin-bottom:24px;border:1px solid transparent;
  animation:alertIn .55s var(--ease-out-expo);
}
@keyframes alertIn{from{opacity:0;transform:translateY(-10px)}}
.alert svg{flex:none;width:20px;height:20px;margin-top:1px}
.alert-success{background:rgba(46,158,91,.1);border-color:rgba(46,158,91,.28);color:#1B6B3F}
.alert-error{background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.25);color:#A0342A}
.alert-info{background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.28);color:var(--gold-700)}

/* ---------- 17. Filter bar -------------------------------- */
.filter-bar{
  position:sticky;top:calc(var(--header-h) - 12px);z-index:60;
  background:rgba(253,252,247,.9);backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--sh-sm);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.filter-bar .search{position:relative;flex:1;min-width:220px}
.filter-bar .search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-300)}
.filter-bar .search .input{padding-left:44px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:.55em 1.1em;border-radius:var(--radius);font-size:.8rem;font-weight:600;
  background:var(--cream-100);color:var(--ink-500);border:1px solid var(--line);
  transition:background .3s,color .3s,transform .35s var(--ease-spring),border-color .3s;
}
.chip:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.chip.active{background:var(--grad-forest);color:var(--cream-50);border-color:transparent;box-shadow:var(--sh-sm)}

/* ---------- 18. Product detail ---------------------------- */
.pd-hero{padding-top:calc(var(--header-h) + 60px);padding-bottom:clamp(40px,5vw,70px);background:var(--bg-alt);position:relative;overflow:hidden}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.55em;font-size:.8rem;color:var(--text-muted);margin-bottom:26px}
.breadcrumb a:hover{color:var(--forest-600)}
.breadcrumb span{opacity:.5}

.pd-grid{display:grid;gap:clamp(30px,4vw,60px);align-items:start}
.pd-gallery{position:relative}
.pd-main{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-md);aspect-ratio:1/1;
}
.pd-main img{width:100%;height:100%;object-fit:contain;padding:10%;transition:transform .8s var(--ease-out-expo)}
.pd-main:hover img{transform:scale(1.08)}
.pd-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.pd-thumb{
  width:78px;height:78px;border-radius:var(--radius);overflow:hidden;background:var(--surface);
  border:2px solid var(--line);cursor:pointer;transition:border-color .35s,transform .4s var(--ease-spring);
}
.pd-thumb img{width:100%;height:100%;object-fit:contain;padding:10%}
.pd-thumb:hover{transform:translateY(-3px)}
.pd-thumb.active{border-color:var(--gold-500)}

.pd-title{font-size:clamp(2.2rem,3.6vw,3.2rem);margin:.15em 0 .1em}
.pd-botanical{font-style:italic;font-weight:500;font-size:1.1rem;color:var(--gold-600);margin-bottom:18px}
.spec-table{margin-top:8px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:0}
.spec-table th,.spec-table td{padding:14px 20px;text-align:left;font-size:.9rem;vertical-align:top}
.spec-table th{width:42%;font-weight:600;color:var(--ink-400);background:var(--cream-100);letter-spacing:.02em}
.spec-table td{color:var(--ink-700)}

.pill-list{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:var(--radius);
  font-size:.82rem;font-weight:600;background:var(--cream-100);border:1px solid var(--line);color:var(--forest-700);
  transition:transform .35s var(--ease-spring),background .3s,box-shadow .3s;
}
.pill:hover{transform:translateY(-2px);background:var(--surface);box-shadow:var(--sh-sm)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-500);flex:none}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:32px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;padding:14px 22px;white-space:nowrap;
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);
  transition:color .3s;
}
.tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--grad-gold);transform:scaleX(0);transition:transform .45s var(--ease-out-expo)}
.tab.active{color:var(--forest-700)}
.tab.active::after{transform:scaleX(1)}
.tab-panel{display:none;animation:fadeUp .6s var(--ease-out-expo)}
.tab-panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}

/* Enquiry box on product page */
.enq-box{
  position:sticky;top:calc(var(--header-h) + 24px);
  padding:28px;border-radius:var(--radius-lg);
  background:var(--grad-forest);color:var(--cream-50);box-shadow:var(--sh-lg);
  overflow:hidden;isolation:isolate;
}
.enq-box::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.4;background:radial-gradient(80% 90% at 90% 5%,var(--leaf-400),transparent 60%)}
.enq-box h4{color:var(--cream-50);margin-bottom:6px}
.enq-box p{color:rgba(242,237,223,.72);font-size:.88rem;margin-bottom:20px}
.enq-box .field label{color:rgba(242,237,223,.6)}
.enq-box .input,.enq-box .select{background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:var(--cream-50)}
.enq-box .input{background-image:none}
.enq-box .input::placeholder{color:rgba(242,237,223,.4)}
.enq-box .input:focus,.enq-box .select:focus{border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(201,162,39,.18)}
.enq-box .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBD489' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95em center;background-size:16px;
}
.qty-row{display:grid;grid-template-columns:1fr 100px;gap:10px}

/* ---------- 19. Enquiry cart drawer ----------------------- */
.cart-overlay{
  position:fixed;inset:0;z-index:940;background:rgba(8,37,27,.55);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:950;width:min(460px,100%);
  background:var(--bg);display:flex;flex-direction:column;
  transform:translateX(100%);
  /* No shadow while the panel is parked off-canvas: it points left, so it
     bled back over the right edge of every page as a dark band. */
  box-shadow:none;
  /* Hidden only once it has finished sliding out, so the close still animates
     — and while hidden it is out of the tab order. */
  visibility:hidden;
  transition:transform .7s var(--ease-out-expo),box-shadow .4s var(--ease),visibility 0s .7s;
}
.cart-panel.open{
  transform:none;
  visibility:visible;
  box-shadow:-30px 0 80px -30px rgba(8,37,27,.5);
  transition:transform .7s var(--ease-out-expo),box-shadow .4s var(--ease),visibility 0s;
}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line);background:var(--surface)}
.cart-head h4{font-size:1.3rem}
.cart-items{flex:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.cart-item{
  display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:start;
  padding:14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
  animation:fadeUp .5s var(--ease-out-expo);
}
.cart-item img{width:66px;height:66px;object-fit:contain;border-radius:var(--radius);background:var(--cream-100);padding:6px}
.cart-item h5{font-size:1.08rem;line-height:1.2;color:var(--forest-900)}
.cart-item .meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.cart-qty{display:flex;gap:6px;margin-top:8px}
.cart-qty input{width:74px;padding:.4em .6em;font-size:.82rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--cream-50)}
.cart-qty select{width:78px;padding:.4em .5em;font-size:.82rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--cream-50)}
.cart-remove{color:var(--ink-300);transition:color .3s,transform .35s var(--ease-spring)}
.cart-remove:hover{color:#C0392B;transform:scale(1.15)}
.cart-remove svg{width:18px;height:18px}
.cart-foot{padding:22px 24px;border-top:1px solid var(--line);background:var(--surface);display:grid;gap:12px}
.cart-empty{display:grid;place-items:center;gap:16px;text-align:center;padding:60px 20px;color:var(--text-muted)}
.cart-empty svg{width:64px;height:64px;color:var(--cream-300)}

/* ---------- 20. Floating WhatsApp ------------------------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:800;
  display:flex;align-items:center;gap:12px;
  padding:14px 20px 14px 16px;border-radius:99px;
  background:linear-gradient(135deg,#128C7E,#25D366);color:#fff;
  box-shadow:0 18px 44px -14px rgba(18,140,126,.7);
  transform:translateY(120px);opacity:0;
  transition:transform .7s var(--ease-out-expo),opacity .5s,box-shadow .4s;
}
.wa-float.show{transform:none;opacity:1}
.wa-float:hover{box-shadow:0 22px 54px -12px rgba(18,140,126,.85);transform:translateY(-3px)}
.wa-float svg{width:26px;height:26px;flex:none}
.wa-float span{font-size:.84rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:99px;border:2px solid rgba(37,211,102,.55);
  animation:waPing 2.6s var(--ease) infinite;
}
@keyframes waPing{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.35);opacity:0}}

/* Back to top */
.to-top{
  position:fixed;right:24px;bottom:96px;z-index:790;width:44px;height:44px;border-radius:var(--radius);
  display:grid;place-items:center;background:var(--forest-800);color:var(--gold-300);
  box-shadow:var(--sh-md);opacity:0;transform:translateY(20px) scale(.8);
  transition:opacity .5s,transform .55s var(--ease-spring),background .3s;
}
.to-top.show{opacity:1;transform:none}
.to-top:hover{background:var(--forest-600)}
.to-top svg{width:20px;height:20px}

/* Scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:3px;z-index:999;background:var(--grad-gold);width:0;transition:width .1s linear}

/* ---------- 21. Footer ------------------------------------ */
/* Extra room at the bottom so the floating WhatsApp and back-to-top
   buttons never sit on top of the footer text. */
.site-footer{background:var(--forest-900);color:rgba(242,237,223,.68);position:relative;overflow:hidden;padding-bottom:64px}
.site-footer::before{
  content:"";position:absolute;inset:0;opacity:.4;
  background:radial-gradient(60% 90% at 88% 8%,rgba(46,158,91,.28),transparent 60%),
             radial-gradient(50% 80% at 4% 96%,rgba(176,140,30,.2),transparent 62%);
}
.footer-main{position:relative;padding-block:clamp(56px,7vw,90px) 44px;display:grid;gap:clamp(34px,4vw,56px)}
.footer-lockup{margin-bottom:22px}
.footer-lockup img{height:88px;width:auto}
.footer-brand p{font-size:.92rem;line-height:1.75;max-width:340px}
.footer-motto{font-weight:700;font-size:1.05rem;letter-spacing:.01em;color:var(--gold-400);margin-top:16px}
.footer h5{
  font-family:var(--font-body);font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-50);margin-bottom:20px;
}
.footer-links{display:grid;gap:11px}
.footer-links a{font-size:.92rem;color:rgba(242,237,223,.66);transition:color .3s,transform .35s var(--ease);display:inline-block}
.footer-links a:hover{color:var(--gold-300);transform:translateX(5px)}
.footer-contact{display:grid;gap:16px}
.footer-contact li{display:flex;gap:13px;font-size:.9rem;line-height:1.6}
.footer-contact svg{flex:none;width:19px;height:19px;color:var(--gold-500);margin-top:2px}
.footer-contact a:hover{color:var(--gold-300)}
.socials{display:flex;gap:11px;margin-top:24px}
.socials a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(242,237,223,.8);
  transition:background .35s,color .35s,transform .4s var(--ease-spring);
}
.socials a:hover{background:var(--grad-gold);color:var(--forest-900);transform:translateY(-4px) rotate(-4deg)}
.socials svg{width:18px;height:18px}
.footer-bottom{
  position:relative;border-top:1px solid rgba(255,255,255,.09);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  font-size:.82rem;color:rgba(255,255,255,.5);
}
.footer-credit{margin-left:auto;color:rgba(255,255,255,.45)}
.footer-credit a{color:var(--gold-400);font-weight:600;transition:color .3s}
.footer-credit a:hover{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:var(--gold-300)}

/* ---------- 22. Page hero (inner pages) ------------------- */
.page-hero{
  position:relative;padding-top:calc(var(--header-h) + clamp(70px,9vw,120px));
  padding-bottom:clamp(60px,7vw,100px);
  background:var(--forest-900);color:var(--cream-50);overflow:hidden;isolation:isolate;
}
.page-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.92}
/* Weighted to the left, where the heading sits — the artwork on the right is
   meant to be seen, not muddied. */
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,37,27,.94) 0%,rgba(8,37,27,.76) 34%,rgba(8,37,27,.18) 68%,rgba(8,37,27,.34) 100%);
}
.page-hero h1{color:var(--cream-50);margin:.3em 0 .3em}
.page-hero p{color:rgba(242,237,223,.75);max-width:640px}

/* ---------- 23. Pagination -------------------------------- */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:56px;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:44px;height:44px;padding:0 14px;border-radius:var(--radius);
  display:grid;place-items:center;font-size:.9rem;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-500);
  transition:background .3s,color .3s,transform .35s var(--ease-spring),border-color .3s;
}
.pagination a:hover{transform:translateY(-3px);border-color:var(--line-strong);color:var(--forest-600)}
.pagination .current{background:var(--grad-forest);color:var(--cream-50);border-color:transparent;box-shadow:var(--sh-sm)}
.pagination .disabled{opacity:.4;pointer-events:none}

/* ---------- 24. Toast ------------------------------------- */
.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:980;display:grid;gap:10px;width:min(420px,calc(100% - 32px))}
.toast{
  display:flex;align-items:center;gap:13px;padding:15px 20px;border-radius:var(--radius);
  background:var(--forest-800);color:var(--cream-50);box-shadow:var(--sh-lg);
  font-size:.9rem;font-weight:500;
  animation:toastIn .55s var(--ease-out-expo);
}
.toast.out{animation:toastOut .45s var(--ease) forwards}
.toast svg{flex:none;width:20px;height:20px;color:var(--leaf-300)}
@keyframes toastIn{from{opacity:0;transform:translateY(28px) scale(.95)}}
@keyframes toastOut{to{opacity:0;transform:translateY(20px) scale(.96)}}

/* ---------- 25. Misc -------------------------------------- */
.divider-leaf{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold-500);margin-block:10px}
.divider-leaf::before,.divider-leaf::after{content:"";height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,var(--gold-400))}
.divider-leaf::after{background:linear-gradient(270deg,transparent,var(--gold-400))}
.divider-leaf svg{width:20px;height:20px}

.empty-state{text-align:center;padding:80px 20px;display:grid;gap:18px;place-items:center}
.empty-state svg{width:70px;height:70px;color:var(--cream-300)}

.rich h2,.rich h3,.rich h4{margin:1.6em 0 .6em}
.rich h2:first-child,.rich h3:first-child{margin-top:0}
.rich p{margin-bottom:1.1em;line-height:1.8}
.rich ul{margin:0 0 1.3em;display:grid;gap:10px}
.rich ul li{position:relative;padding-left:28px;color:var(--ink-500)}
.rich ul li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold-500)}
.rich ol{margin:0 0 1.3em 20px;list-style:decimal;display:grid;gap:10px}
.rich ol li{color:var(--ink-500);padding-left:6px}
.rich blockquote{
  margin:1.6em 0;padding:22px 28px;border-left:3px solid var(--gold-500);
  background:var(--cream-100);border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.08rem;font-weight:500;color:var(--forest-700);
}
.rich a{color:var(--forest-600);text-decoration:underline;text-underline-offset:3px}
.rich img{border-radius:var(--radius);margin-block:1.4em}
.rich table{margin-block:1.4em;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rich th,.rich td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
.rich th{background:var(--cream-100);font-weight:600}

.tilt{transform-style:preserve-3d;will-change:transform}
.tilt-inner{transform:translateZ(28px)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.noscroll{overflow:hidden}

/* ---------- 26. Responsive -------------------------------- */
/* Mobile-first header height: utility bar + brand row (no green bar). */
:root{ --header-h:126px; }

@media (min-width:600px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .form-grid.two{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
  .split{grid-template-columns:1fr 1fr}
  .split.reverse .split-media{order:2}
  .footer-main{grid-template-columns:1.5fr 1fr 1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  :root{ --header-h:184px; }   /* utility bar + brand row + green nav bar */
  .navbar-green{display:block}
  .nav-quote{display:inline-flex}
  .burger{display:none}
  .drawer{display:none}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .pd-grid{grid-template-columns:1.05fr .95fr}
  .footer-main{grid-template-columns:1.6fr 1fr 1fr 1.3fr}
}
@media (min-width:1200px){
  .credentials{display:flex}
}
@media (max-width:1023px){
  .enq-box{position:static}
  .filter-bar{position:static}
  /* The product card lives on the right of the hero artwork. On narrow
     viewports the crop would slide it under the headline, so pan the backdrop
     left and let the gradient carry the section instead. */
  .hero-bg img,.hero-slide img,.page-hero img.bg{object-position:16% 50%}
  .page-hero::before{
    background:linear-gradient(180deg,rgba(8,37,27,.9) 0%,rgba(8,37,27,.8) 60%,rgba(8,37,27,.9) 100%);
  }
}

/* ---------- Tablet ---------------------------------------- */
@media (max-width:767px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{gap:32px}
  .pd-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr;gap:34px}
  .section-head{margin-bottom:28px}
  .cta-band .grid.g2{gap:24px}
  .cta-band .flex{justify-content:flex-start !important}
}

/* ---------- Phone ----------------------------------------- */
@media (max-width:640px){
  :root{ --section-y:clamp(46px,11vw,64px); --gutter:18px; }

  body{font-size:15px}
  h1{font-size:clamp(1.85rem,7.4vw,2.5rem)}
  h2{font-size:clamp(1.5rem,6vw,2rem)}
  h3{font-size:clamp(1.2rem,5vw,1.45rem)}
  .lede{font-size:1rem;line-height:1.7}

  /* Header */
  .topbar{height:34px}
  .topbar .container{height:34px;justify-content:center}
  .topbar-left{display:none}
  .topbar-tag{font-size:.74rem}
  .navbar{height:88px}
  .brand img{height:68px}
  .site-header.scrolled .navbar{height:78px}
  .site-header.scrolled .brand img{height:60px}
  .cart-btn,.burger{width:40px;height:40px}
  .footer-lockup img{height:74px}

  /* Hero */
  .hero{min-height:auto}
  .hero-inner{padding-block:calc(var(--header-h) + 34px) 54px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero-badges{gap:7px;margin-top:24px}
  .hero-badge{font-size:.66rem;padding:.45em .8em}
  .hero-dots{bottom:22px;right:18px}
  .scroll-hint{display:none}
  .hero-orb{display:none}

  /* Buttons stack full width where they are the main action */
  .btn{padding:.92em 1.5em;font-size:.78rem}
  .cta-band .btn,.empty-state .btn{width:100%;justify-content:center}

  /* Cards & media */
  .card:hover{transform:none}
  .tilt{transform:none !important}
  .p-media img{padding:11%}
  .p-quick{opacity:1;transform:none;right:12px;bottom:12px}
  .cat-card,.cat-body{min-height:250px}
  .split-badge{position:static;margin:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:none;border-top:1px solid var(--line)}
  .split-media{border-radius:var(--radius-lg) var(--radius-lg) 0 0}

  /* Product detail */
  /* On phones the extract-form list would sit between the photo and the
     product name; the same choices appear in the enquiry box dropdown and
     the Specifications tab, so hide the standalone block here. */
  .pd-forms{display:none}
  .pd-hero{padding-top:calc(var(--header-h) + 26px)}
  .pd-main{aspect-ratio:4/3}
  .pd-thumb{width:58px;height:58px}
  .tabs{gap:0}
  .tab{padding:12px 14px;font-size:.74rem}
  .spec-table th,.spec-table td{padding:11px 13px;font-size:.85rem}
  .spec-table th{width:44%}
  .qty-row{grid-template-columns:1fr 92px}

  /* Enquiry cart */
  .cart-panel{width:100%}
  .cart-item{grid-template-columns:54px 1fr auto;gap:11px;padding:12px}
  .cart-item img{width:54px;height:54px}
  .cart-qty{flex-wrap:wrap}
  .cart-qty input,.cart-qty select{width:calc(50% - 3px)}

  /* Filters */
  .filter-bar{padding:12px;gap:9px}
  .filter-bar .select{width:100%;max-width:none}
  .filter-bar .search{min-width:100%}

  /* Process timeline */
  .process::before{left:21px}
  .step{grid-template-columns:44px 1fr;gap:16px;padding-block:14px}
  .step-dot{width:44px;height:44px;font-size:.95rem}

  /* Floating actions */
  .wa-float span{display:none}
  .wa-float{padding:15px;border-radius:50%;right:16px;bottom:16px}
  .to-top{bottom:84px;right:18px;width:40px;height:40px}

  /* Footer */
  .footer-lockup img{height:52px}
  .footer-lockup b{font-size:1.5rem}
  .site-footer{padding-bottom:78px}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px;font-size:.78rem}
  .footer-credit{margin-left:0}

  /* Misc */
  .page-hero{padding-top:calc(var(--header-h) + 34px);padding-bottom:44px}
  .breadcrumb{font-size:.75rem}
  .pagination a,.pagination span{min-width:38px;height:38px;padding:0 10px;font-size:.82rem}
  .marquee-item{font-size:1.05rem;padding-inline:20px}
  .rich blockquote{padding:16px 18px;font-size:1.05rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .toast-wrap{bottom:16px;width:calc(100% - 24px)}
}

/* ---------- Touch comfort --------------------------------- */
/*
 * On a phone every link is hit with a fingertip, not a 1px cursor. These rules
 * give the small text links a real tap area (~44px, the usual minimum) and lift
 * the micro-labels above the ~11px floor where uppercase tracking stops being
 * readable — without changing any of the desktop layout.
 */
@media (max-width:1023px){
  .footer-links{gap:2px}
  .footer-links a{
    display:flex;align-items:center;min-height:44px;font-size:.95rem;
    padding-block:2px;
  }
  .footer-links a:hover{transform:none}

  .footer-contact a,.footer-contact li > span{min-height:42px;display:flex;align-items:center;gap:10px}
  .footer-credit{padding-block:10px}
  .footer-credit a{display:inline-block;padding:8px 4px}

  .breadcrumb{gap:.4em .7em;font-size:.8rem}
  .breadcrumb a{display:inline-flex;align-items:center;min-height:36px}

  .socials a{min-width:44px;min-height:44px}

  /* Card titles: the whole card is tappable, but the heading link itself
     should still be comfortable to hit directly. */
  .p-body h3 a,.cat-card h3 a,.p-title a{display:block;padding-block:4px}

  /* Micro-labels — keep the uppercase tracking legible. */
  .p-cat{font-size:.72rem;letter-spacing:.14em}
  .tag{font-size:.74rem;padding:.42em .78em}
  .hero-badge{font-size:.7rem}
  .eyebrow{font-size:.72rem;letter-spacing:.16em}
  .spec-table th,.spec-table td{font-size:.88rem;padding:12px 14px}

  /* Anything tabular gets its own scroller rather than pushing the page wide. */
  .rich table,.spec-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  .cta-band{padding:30px 22px}

  /* Inline text links inside prose still need a finger-sized hit area. */
  .link-arrow{display:inline-flex;align-items:center;min-height:44px}
  .rich a,.lede a,p a{display:inline-block;padding-block:8px}

  /* Utility-bar phone / email (visible on tablets) */
  .topbar a{display:inline-flex;align-items:center;min-height:40px}

  /* Forms: 16px inputs stop iOS zooming in on focus. */
  .input,.select,.textarea,.qmodal-form input,.qmodal-form textarea{font-size:16px}
  .btn{min-height:46px}
}

/* ---------- Small phone ----------------------------------- */
@media (max-width:380px){
  :root{ --gutter:14px; }
  .brand img{height:56px}
  .nav-actions{gap:7px}
  .hero-badge{font-size:.62rem}
  .qty-row{grid-template-columns:1fr}
  .cart-item{grid-template-columns:1fr auto}
  .cart-item img{display:none}
}

/* ---------- Landscape phone ------------------------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-inner{padding-block:calc(var(--header-h) + 24px) 40px}
  .drawer{padding-top:calc(var(--header-h) + 12px)}
  .drawer a{padding:11px 0;font-size:1.1rem}
}

/* Touch devices: no hover-only affordances */
@media (hover:none){
  .p-quick{opacity:1;transform:none}
  .cat-more{opacity:1;transform:none}
  .btn:hover{transform:none}
  .card:hover{transform:none}
}

/* ---------- 27. Reduced motion ---------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important}
  .hero h1 .line > span,.split-line > span{transform:none !important}
  .hero-sub,.hero-cta,.hero-eyebrow,.hero-badges{opacity:1 !important;transform:none !important}
}

/* ---------- 28. Print ------------------------------------- */
@media print{
  .site-header,.wa-float,.to-top,.cart-panel,.cart-overlay,.drawer,#preloader,.scroll-progress{display:none !important}
  body{background:#fff}
  .section{padding-block:24px}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ---------- 27. Quick-quote popup ------------------------- */
.qmodal{position:fixed;inset:0;z-index:960;display:flex;align-items:center;justify-content:center;padding:24px}
.qmodal[hidden]{display:none}
.qmodal-overlay{
  position:absolute;inset:0;background:rgba(6,26,18,.62);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .38s var(--ease);
}
.qmodal.open .qmodal-overlay{opacity:1}
.qmodal-panel{
  position:relative;width:min(720px,100%);max-height:min(88svh,880px);overflow-y:auto;
  background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(8,37,27,.55);
  padding:clamp(26px,3.4vw,44px);
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .42s var(--ease),transform .52s var(--ease-out-expo);
}
.qmodal.open .qmodal-panel{opacity:1;transform:none}
.qmodal-x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-400);background:var(--cream-100);
  transition:background .3s,color .3s,transform .35s var(--ease-spring);
}
.qmodal-x:hover{background:var(--forest-600);color:var(--cream-50);transform:rotate(90deg)}
.qmodal-x svg{width:18px;height:18px}

.qmodal-head{margin-bottom:24px;padding-right:44px}
.qmodal-head h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.24em 0 .3em;letter-spacing:-.02em}
.qmodal-head p{color:var(--ink-400);font-size:.95rem;line-height:1.7;margin:0}

.qmodal-form{display:flex;flex-direction:column;gap:18px}
.qmodal-form .field > span{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-400);
}
.qmodal-form .field > span i{color:#C0392B;font-style:normal}
.qmodal-form input,.qmodal-form textarea{
  width:100%;padding:.8em 1em;border-radius:var(--radius);
  background:var(--bg);border:1.5px solid var(--line);
  font-family:inherit;font-size:.95rem;color:var(--text);
  transition:border-color .3s,box-shadow .3s;
}
.qmodal-form input:focus,.qmodal-form textarea:focus{
  outline:none;border-color:var(--forest-500);box-shadow:0 0 0 4px rgba(31,122,76,.12);
}
.qmodal-form input.invalid,.qmodal-form textarea.invalid{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.qmodal-form textarea{resize:vertical;line-height:1.6}
.qmodal-submit{width:100%;justify-content:center;margin-top:4px}
.qmodal-err{margin:0;color:#C0392B;font-size:.86rem;font-weight:600}
.qmodal-err[hidden]{display:none}
.qmodal-alt{margin:0;text-align:center;font-size:.84rem;color:var(--ink-400)}
.qmodal-alt a{color:var(--forest-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .qmodal{padding:14px}
  .qmodal-panel{max-height:92svh;border-radius:var(--radius)}
}