/* ===========================================================
   Jirah Hub General Trading — brand stylesheet
   Palette (from brand flyers): navy #0F2E5C · green #4CA22F
            white #FFFFFF · ink #16233F
   Type: 'DM Serif Display' (headings) + 'Jost' (body)
=========================================================== */

/* Self-hosted webfonts. Previously pulled from fonts.googleapis.com, which put
   a render-blocking stylesheet plus a second origin's DNS/TLS handshake in
   front of every first paint. Same files, served from our own origin.
   Jost is the variable cut — one file covers 400 through 600. */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/dm-serif-display-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/dm-serif-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* `optional`, not `swap`, for both faces: Jost is the body font used
   almost everywhere, so swapping it in after first paint reflows most of
   the page at once — a large layout shift on whatever sits below the fold
   (the footer, mainly). DM Serif Display sits on the hero <h1>, the LCP
   element itself, so a late swap there is worse: it's the single biggest
   font-size on the page, and re-metricing it after paint is what was
   driving CLS over the "poor" 0.25 threshold. `optional` still uses the
   webfont when it's ready in time (it's preloaded, so usually is) but
   never swaps late. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('assets/fonts/jost-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('assets/fonts/jost-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --forest: #0F2E5C;       /* primary navy — headings, buttons, footer */
  --forest-deep: #0A2247;  /* deep navy — hover/pressed */
  --leaf: #4CA22F;         /* brand green — accents, CTAs, hovers */
  --leaf-dark: #2F6B1D;
  --leaf-soft: #8FCB6B;
  --navy: #2F6B1D;         /* seal accent (green, for pop against navy chrome) */
  --cream: #F5F7FA;        /* page background — cool light gray */
  --paper: #FFFFFF;        /* card background — pure white */
  --ink: #16233F;
  --ink-soft: #33445F;
  --ink-muted: #526079;
  --ink-faint: #5C6A82;
  --ink-quiet: #5E6C85;
  --line: #E1E5EC;
  --line-soft: #E9ECF3;
  --tint-green: #E1F0D8;
  --tint-green-2: #EAF5E2;
  --tint-sand: #E3E9F6;    /* light navy tint (paired with tint-green in alternating badges) */
  --tint-clay: #234070;    /* text color for navy-tinted badges */
  --placeholder: #E4E9F1;  /* neutral cool placeholder behind photos while they load */
  --focus: #4CA22F;

  --shadow-card: 0 18px 40px -22px rgba(15, 46, 92, .35);
  --shadow-lift: 0 26px 60px -40px rgba(15, 46, 92, .38);
  --shadow-seal: 0 14px 34px -18px rgba(47, 107, 29, .55);

  --max: 1240px;
  --pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#home, #shop, #story, #contact { scroll-margin-top: 88px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}
p { margin: 0; }
a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--leaf); }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
::selection { background: #D8E6CB; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Only matches on the pages app.js still renders client-side (products,
   contact) — index.html ships prerendered, so #app-main has children and
   this never applies there. app.js is deferred, so the browser paints the
   shell before the script runs; without a reserved height the footer would
   paint directly under the header, then drop once the content lands. That
   was worth 0.276 CLS the last time it happened. Holding a viewport of
   space keeps the footer off-screen until it's in its final position, and
   a shift below the fold costs nothing. */
#app-main:empty { min-height: 100vh; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; margin: 0; padding: 12px 20px; overflow: visible;
  clip: auto; white-space: normal; background: var(--forest); color: #fff;
  border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lift);
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ================= HEADER ================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(189,199,218,.95); /* --tint-sand, ~30% darker (WCAG relative luminance) */
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,46,92,.18);
}
/* The brand-name/tagline colors were tuned for the old near-white header
   and drop below 4.5:1 on this darker background — override just those two
   here rather than touching --navy/--leaf/--ink-faint site-wide. */
.site-header .brand-name { color: var(--forest); }
.site-header .brand-name span { color: #2A591A; }
.site-header .brand-sub { color: #455062; }
.nav {
  max-width: var(--max); margin: 0 auto; padding: 16px var(--pad);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
}
.brand { margin-right: auto; flex: none; display: flex; align-items: center; gap: 10px; }
/* 56x40, not a 40px square: the lockup is ~1.4:1, so a square slot would
   contain-fit it to 40x28 and waste a third of the height. */
.brand-mark {
  width: 56px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: block; line-height: 1; }
.brand-name {
  display: block; font-family: 'DM Serif Display', serif; font-size: 26px;
  letter-spacing: -0.01em; color: var(--navy); white-space: nowrap;
}
.brand-name span { color: var(--leaf); }
.brand-sub {
  display: block; font-size: 9px; letter-spacing: .28em; color: var(--ink-faint);
  margin-top: 5px; text-transform: uppercase; white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav-link {
  font-size: 15px; color: var(--ink-soft); white-space: nowrap; position: relative; padding: 4px 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--leaf); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--forest); font-weight: 500; }
.nav-search {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 18px;
  min-width: 170px; flex: 0 1 230px;
}
.nav-search input {
  border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink-soft);
  outline: none; width: 100%;
}
.nav-search button { border: 0; background: transparent; cursor: pointer; color: var(--forest); display: grid; place-items: center; padding: 0; }
.icon-btn {
  position: relative; border: 0; background: transparent; cursor: pointer; color: var(--forest);
  padding: 4px; display: grid; place-items: center; transition: color .2s ease, transform .2s ease;
}
.icon-btn:hover { color: var(--leaf); transform: translateY(-1px); }
.badge {
  position: absolute; top: -3px; right: -7px; min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--leaf); color: #fff; font-size: 10.5px; font-weight: 600;
  display: grid; place-items: center; padding: 0 4px; transition: transform .2s ease;
}
.badge.pulse { animation: badgepulse .5s ease; }
@keyframes badgepulse { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.nav-toggle { display: none; }

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; gap: 14px; border-radius: 999px;
  font-size: 16px; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, transform .15s ease;
  border: 1px solid transparent;
}
.btn:active { transform: scale(.98); }
.btn-primary {
  background: var(--forest); border-color: var(--forest); color: var(--cream);
  padding: 15px 16px 15px 30px;
}
.btn-primary:hover { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn-primary .btn-arrow {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,.18); flex: none;
}
.btn-outline {
  border-color: var(--line); background: transparent; color: var(--forest);
  padding: 12px 26px; font-size: 15px;
}
.btn-outline:hover { background: var(--tint-green-2); }
.btn-pill {
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 10px 20px; font-size: 14.5px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap;
}
.btn-pill:hover { background: var(--tint-green-2); }
.btn-pill.active { border-color: var(--forest); background: var(--forest); color: var(--cream); }

/* ================= HERO ================= */
/* Side padding is var(--pad), never 0: every rule below is applied to an
   element that also carries .wrap, and a shorthand with 0 in the
   horizontal slot silently overrides .wrap's gutters (same specificity,
   later in the file) and drops the section flush against the screen edge.
   Decorative blobs still bleed past the gutter — they're absolutely
   positioned and overflow clips at the padding box, not the content box. */
.hero { position: relative; padding: clamp(24px,4vw,56px) var(--pad) 0; overflow: hidden; }
/* top+bottom (not top+height) so the shape always spans the section's real
   rendered height, including when that height is itself content-driven
   (auto) rather than fixed — a plain percentage `height` doesn't reliably
   resolve against an auto-height ancestor and was coming up short of the
   text on some breakpoints. */
.hero-blob-a {
  position: absolute; left: -14%; top: -6%; bottom: -6%; width: 74%;
  background: var(--tint-green); border-radius: 52% 48% 44% 56% / 58% 42% 58% 42%;
  opacity: .75; pointer-events: none;
}
.hero-blob-b {
  position: absolute; right: -8%; top: 2%; bottom: 2%; width: 56%;
  background: var(--tint-sand); border-radius: 50% 50% 46% 54% / 54% 46% 54% 46%;
  pointer-events: none;
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap: clamp(24px,4vw,48px); align-items: center; min-height: 520px;
}
.hero-copy { padding: clamp(8px,2vw,28px) 0 clamp(28px,4vw,52px); }
.hero-title {
  font-size: clamp(44px,5.6vw,74px); line-height: 1.04; color: var(--forest);
  position: relative; display: inline-block;
}
.hero-leaf { position: absolute; top: -18px; right: -70px; width: 96px; height: 80px; opacity: .9; }
.hero-lede { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--ink-muted); max-width: 30ch; }
.trust-row { display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,44px); margin-top: clamp(38px,5vw,62px); }
.trust-item { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--ink-soft); }
.trust-item svg { color: var(--tint-clay); }
.trust-item:nth-child(1) svg, .trust-item:nth-child(2) svg, .trust-item:nth-child(3) svg { color: var(--leaf-dark); }

.hero-visual { position: relative; align-self: stretch; min-height: 460px; }
.hero-photo {
  position: absolute; inset: clamp(10px,2vw,24px) 0 clamp(0px,2vw,18px) clamp(0px,2vw,10px);
  border-radius: 63% 37% 30% 70% / 53% 45% 55% 47%;
  overflow: hidden; background: transparent;
  box-shadow: 0 40px 80px -50px rgba(15,46,92,.4);
}
.hero-photo img,
.hero-carousel-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent;
}
.hero-carousel-img {
  opacity: 0; transition: opacity .6s ease;
}
.hero-carousel-img.active { opacity: 1; }
.hero-seal {
  position: absolute; top: clamp(14px,2.4vw,30px); right: clamp(6px,2vw,22px);
  width: clamp(104px,11vw,138px); aspect-ratio: 1; border-radius: 999px;
  background: var(--navy); color: var(--cream); display: grid; place-items: center;
  box-shadow: var(--shadow-seal); animation: sealspin 26s linear infinite;
}
@keyframes sealspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hero-seal svg { animation: none; }

/* ================= PROMISES BAR ================= */
.promises-wrap { position: relative; z-index: 2; margin-top: clamp(-28px,-2vw,-8px); }
.promises {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 22px;
  box-shadow: var(--shadow-lift); display: grid; grid-template-columns: repeat(4,1fr);
}
.promise {
  padding: 30px 26px; text-align: center; border-left: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.promise:first-child { border-left: 0; }
.promise-icon {
  width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; flex: none;
}
.promise-title { font-size: 16px; font-weight: 500; color: #22301E; }
.promise-body { font-size: 13.5px; color: var(--ink-faint); margin-top: -6px; }

/* ================= SECTION HEADS ================= */
.section { padding: clamp(48px,6vw,84px) var(--pad) clamp(20px,3vw,32px); }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; margin-bottom: 26px;
}
.section-title { font-size: clamp(30px,3.6vw,42px); color: var(--forest); }
.section-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-muted); }
.eyebrow {
  display: block; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint);
}

/* ================= PRODUCT CARDS ================= */
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }
.grid-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 20px; }
.card {
  position: relative; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card > a { display: block; color: inherit; }
.card-name { display: block; }
a.card-name:hover { color: var(--leaf); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card-media { position: relative; background: transparent; aspect-ratio: 1; overflow: hidden; }
.card-media.ratio-43 { aspect-ratio: 4/3; }
.card-media img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.heart-btn {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 999px;
  border: 0; background: rgba(255,253,249,.92); color: var(--ink-muted); display: grid; place-items: center;
  cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease;
}
.heart-btn:hover { background: var(--tint-green-2); color: var(--leaf); }
.heart-btn.active { color: var(--leaf); }
.heart-btn.pop svg { animation: heartpop .35s ease; }
@keyframes heartpop { 0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(1)} }
.card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card-name { font-size: 15.5px; font-weight: 500; color: #22301E; }
.card-cat { font-size: 12.5px; color: var(--ink-quiet); }
.card-price { font-size: 16px; font-weight: 500; color: var(--forest); margin-top: 10px; }
.card-tag {
  align-self: flex-start; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--leaf-dark); background: var(--tint-green-2); border-radius: 999px; padding: 4px 11px;
}
.card-sub { font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); flex: 1; }
.card-foot { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-top: 8px; }
.card-foot .btn-outline { width: 100%; text-align: center; justify-content: center; }
.quote-link { border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--leaf); cursor: pointer; padding: 0; }
.quote-link:hover { text-decoration: underline; }

/* ================= TRADE CIRCLE ================= */
.circle-band { border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); background: var(--forest); }
.circle-copy { padding: clamp(28px,3.4vw,44px); }
.circle-title { font-size: clamp(24px,2.6vw,32px); color: var(--cream); }
.circle-lede { margin: 14px 0 24px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 32ch; }
.circle-form { display: flex; background: var(--cream); border-radius: 999px; padding: 5px 5px 5px 20px; max-width: 340px; }
.circle-form input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: #22301E; outline: none; }
.circle-form button { border: 0; border-radius: 999px; background: var(--leaf); color: #fff; font: inherit; font-size: 14.5px; padding: 10px 20px; cursor: pointer; transition: background .2s ease; }
.circle-form button:hover { background: #3D8524; }
.circle-joined { display: inline-block; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--cream); font-size: 14.5px; padding: 13px 22px; }
.circle-photo { background: transparent; min-height: 230px; }
.circle-photo img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.circle-quote { padding: clamp(28px,3.4vw,44px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.circle-quote-mark { font-family: 'DM Serif Display', serif; font-size: 56px; line-height: .5; color: var(--leaf-soft); }
.circle-quote-text { margin: 22px 0 0; font-family: 'DM Serif Display', serif; font-size: clamp(20px,2.2vw,27px); line-height: 1.32; color: var(--cream); max-width: 24ch; }
.circle-quote-leaf { position: absolute; right: 22px; bottom: 18px; width: 70px; height: 78px; opacity: .85; }

/* ================= VALUES STRIP ================= */
.values-section {
  padding: clamp(36px,4.5vw,64px) var(--pad) clamp(48px,6vw,80px);
  display: grid; grid-template-columns: auto auto 1fr; gap: clamp(24px,4vw,54px); align-items: center;
}
.values-title { font-size: clamp(22px,2.4vw,28px); line-height: 1.3; color: var(--forest); }
.values-list {
  display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,3vw,40px);
  border-left: 1px solid var(--line); padding-left: clamp(24px,4vw,52px);
}
.value-item { display: flex; align-items: center; gap: 14px; }
.value-item span { font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.value-item small { display: block; color: var(--ink-quiet); }

/* ================= SHOP / CATALOGUE PAGE ================= */
.shop-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #EAF3E4 0%, var(--cream) 78%);
  padding-bottom: clamp(24px,3.4vw,36px);
}
.shop-hero-wave-a {
  position: absolute; left: -18%; bottom: -18%; width: 90%; height: 78%;
  background: var(--tint-green); opacity: .8;
  border-radius: 44% 56% 38% 62% / 62% 44% 56% 38%;
  pointer-events: none;
}
.shop-hero-wave-b {
  position: absolute; right: -14%; bottom: -30%; width: 60%; height: 62%;
  background: var(--forest); opacity: .1;
  border-radius: 50% 50% 40% 60% / 55% 45% 55% 45%;
  pointer-events: none;
}
.shop-hero-dot { position: absolute; width: 10px; height: 10px; border-radius: 999px; background: var(--forest); opacity: .28; pointer-events: none; }
.shop-hero-dot.sd-1 { top: 20%; left: 47%; }
.shop-hero-dot.sd-2 { top: 64%; left: 41%; width: 7px; height: 7px; }
.shop-hero-sparkle { position: absolute; color: var(--leaf); opacity: .6; pointer-events: none; }
.shop-hero-sparkle.sk-1 { top: 14%; right: 40%; }
.shop-hero-sparkle.sk-2 { bottom: 20%; right: 7%; }

.shop-hero-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px,4vw,56px); align-items: center;
  padding-top: clamp(28px,4vw,48px); min-height: 420px;
}
.shop-hero-brandline {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--leaf-dark); font-weight: 500;
}
.shop-hero-title { font-size: clamp(40px,5vw,62px); line-height: 1.04; color: var(--forest); margin-top: 12px; }
.shop-hero-title .accent { color: var(--leaf); }
.shop-hero-lede { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); max-width: 46ch; }

.shop-hero-visual { position: relative; min-height: 340px; }
.shop-hero-photo-main {
  position: absolute; right: 4%; top: 0; width: 64%; aspect-ratio: 3/4;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(15,46,92,.4); background: transparent;
}
.shop-hero-photo-main img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.shop-hero-photo-sub {
  position: absolute; left: 0; bottom: 4%; width: 40%; aspect-ratio: 1;
  border-radius: 999px; overflow: hidden; background: transparent;
  border: 4px solid var(--cream); box-shadow: 0 22px 40px -18px rgba(15,46,92,.4);
}
.shop-hero-photo-sub img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.shop-hero-leaf { position: absolute; left: 34%; top: 4%; width: 60px; opacity: .5; color: var(--leaf-soft); }

.seg-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(28px,3.4vw,40px); position: relative; z-index: 2; }

@media (max-width: 860px) {
  .shop-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .shop-hero-visual { min-height: 260px; order: -1; }
  .shop-hero-photo-main { width: 58%; right: 8%; }
  .shop-hero-photo-sub { width: 34%; }
}

/* ================= ABOUT PAGE ================= */
/* The horizontal padding has to stay var(--pad): this element is also a
   .wrap, and a three-value shorthand here would reset the side gutters to
   0 and let the section run edge-to-edge while every other section stays
   inset. The blob still bleeds past the gutter — it's absolutely
   positioned and overflow clips at the padding box, not the content box. */
.about-hero { position: relative; padding: clamp(30px,4vw,56px) var(--pad) clamp(28px,4vw,52px); overflow: hidden; }
/* top+bottom, not top+height — see .hero-blob-a comment. The old top:8%/
   height:78% also undershot on desktop whenever the photo column (which
   sets .about-grid's height) was taller than the vertically-centered text
   column, leaving the last line of copy outside the shape entirely. */
.about-blob { position: absolute; left: -14%; top: -6%; bottom: -6%; width: 60%; background: var(--tint-green); border-radius: 52% 48% 44% 56% / 58% 42% 58% 42%; opacity: .6; pointer-events: none; }
.about-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(28px,4vw,64px); align-items: center; }
.about-title { margin: 14px 0 0; font-size: clamp(36px,4.4vw,56px); line-height: 1.08; color: var(--forest); }
.about-copy p { margin: 16px 0 0; font-size: 16.5px; line-height: 1.68; color: var(--ink-muted); }
.about-copy p:first-of-type { margin-top: 20px; }
.about-photo { position: relative; aspect-ratio: 1; border-radius: 999px; overflow: hidden; background: transparent; }
.about-photo img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
/* The logo is a square image on a round plate, so two things keep it whole.

   Percentage padding, not a clamp() in pixels: the inset needed to keep the
   artwork inside the circle scales with the plate. The old clamp() landed
   just above the threshold on desktop (56px on a ~500px plate) but bottomed
   out at 20px on a 375px phone, which shaved the ends off the
   "QUALITY - TRUST - SERVICE" line.

   overflow: visible is the belt to that braces. The circular clip inherited
   from .about-photo exists to crop rectangular product photography; this
   logo already carries its own transparent corners (verified: alpha 0 at
   all four), so the round white plate comes from this rule's background and
   the clip only ever risks cropping the artwork. Turning it off means no
   combination of viewport, padding or future logo art can crop the mark —
   it renders identically today, with ~39px of clearance at 448px wide. */
.about-photo-logo {
  background: var(--paper); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lift); padding: 12%;
  overflow: visible;
}
.about-photo-logo img { object-fit: contain; }

.mission-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; }
.mission-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 18px; padding: 28px 26px; }
.mission-no {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
  background: var(--tint-green); color: var(--leaf-dark); font-size: 15px; font-weight: 500;
}
.mission-card h2 { margin: 18px 0 8px; font-size: 22px; color: var(--forest); }
.mission-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-faint); }

/* ================= CONTACT PAGE ================= */
.contact-hero { position: relative; padding: clamp(30px,4vw,56px) var(--pad) clamp(48px,6vw,84px); overflow: hidden; }
.contact-blob { position: absolute; right: -10%; top: -10%; width: 48%; height: 320px; background: var(--tint-sand); border-radius: 50% 50% 46% 54% / 54% 46% 54% 46%; pointer-events: none; }
.contact-title { margin: 14px 0 30px; font-size: clamp(38px,4.8vw,58px); line-height: 1.06; color: var(--forest); }
.contact-layout { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: clamp(24px,4vw,44px); align-items: start; position: relative; }
.contact-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 20px; padding: clamp(24px,3vw,36px); }
/* minmax(0,...) so a wide field (the careers CV picker) can't force the
   column past the card and scroll the page sideways. */
.qform { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.qform label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--ink-faint); }
.qform label.full { grid-column: 1 / -1; }
.qform input, .qform textarea {
  border: 1px solid var(--line); border-radius: 12px; background: var(--cream);
  padding: 12px 14px; font: inherit; font-size: 15px; color: #22301E; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.qform input:focus, .qform textarea:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(76,162,47,.12); }
.qform input.invalid, .qform textarea.invalid { border-color: #B4483C; box-shadow: 0 0 0 3px rgba(180,72,60,.1); }
.qform textarea { min-height: 110px; resize: vertical; }
.qform .submit { grid-column: 1 / -1; justify-self: start; }
.qform .field-error { color: #B4483C; font-size: 12px; min-height: 1px; }

.sent-state { text-align: center; padding: 28px 8px; }
.sent-check {
  display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 999px;
  background: var(--tint-green); color: var(--leaf-dark); margin-bottom: 18px;
  animation: checkpop .4s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes checkpop { 0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1} }
.sent-state h3 { margin: 0 0 8px; font-size: 26px; color: var(--forest); }
.sent-state p { margin: 0 0 22px; font-size: 15px; color: var(--ink-faint); }

.contact-row {
  display: flex; gap: 16px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line);
}
.contact-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: var(--tint-green); color: var(--leaf-dark); flex: none; }
.contact-label { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-quiet); }
.contact-value-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.contact-value { font-size: 17px; color: #22301E; transition: color .2s ease, transform .2s ease; display: inline-block; }
.contact-value:hover { color: var(--leaf); transform: translateX(2px); }
.contact-note { margin: 20px 4px 0; font-size: 13.5px; color: var(--ink-quiet); }

.coverage-band {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}
.coverage-copy { padding: clamp(26px,3.2vw,42px); display: flex; flex-direction: column; justify-content: center; }
.coverage-title { margin: 12px 0 0; font-size: clamp(26px,3vw,36px); line-height: 1.12; color: var(--forest); }
.coverage-lede { margin: 16px 0 22px; font-size: 15.5px; line-height: 1.62; color: var(--ink-muted); max-width: 32ch; }
.coverage-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.coverage-pill { border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: 13px; color: var(--forest); background: var(--tint-sand); white-space: nowrap; }
.map-holder { background: var(--cream); border-left: 1px solid var(--line-soft); min-height: 380px; position: relative; }
.map-holder uae-map { position: absolute; inset: 0; }
.map-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 13px; letter-spacing: .08em; color: var(--ink-quiet); text-transform: uppercase;
  transition: opacity .3s ease;
}
.map-loading.hide { opacity: 0; pointer-events: none; }
.map-loading-spin {
  width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--line);
  border-top-color: var(--leaf); animation: mapspin .8s linear infinite;
}
@keyframes mapspin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .map-holder { border-left: 0; border-top: 1px solid var(--line-soft); } }

/* ================= FOOTER ================= */
.site-footer { background: var(--forest); color: rgba(255,255,255,.8); }
/* var(--pad), not 0: this is a .wrap too, and a shorthand with 0 in the
   horizontal slot silently drops the gutters — the footer row then ran to
   the screen edge while the copyright line right beneath it stayed inset. */
.footer-row {
  padding: clamp(30px,3.6vw,44px) var(--pad); display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: flex-start; font-size: 14px;
}
.footer-brand { font-family: 'DM Serif Display', serif; font-size: 24px; color: var(--cream); }
.footer-brand span { color: var(--leaf-soft); }
.footer-brand small { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-left: 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: clamp(16px,3vw,36px); }
.footer-links a, .footer-links span { color: rgba(255,255,255,.85); }
.footer-links a:hover { color: var(--leaf-soft); }
/* Brand and its social icons form one block, icons sitting under the
   wordmark rather than off at the far end of the row. */
.footer-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.22);
  transition: color .2s, border-color .2s, background-color .2s;
}
.footer-social a:hover {
  color: var(--forest); background: var(--leaf-soft); border-color: var(--leaf-soft);
}

/* toast for whatsapp/enquiry */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%,20px); z-index: 200;
  background: var(--forest); color: var(--cream); padding: 14px 22px; border-radius: 999px;
  font-size: 14px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%,0); pointer-events: auto; }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px) {
  .grid-5 { grid-template-columns: repeat(3,1fr); }
  .promises { grid-template-columns: repeat(2,1fr); }
  .promise:nth-child(3) { border-left: 1px solid var(--line-soft); }
  .values-section { grid-template-columns: 1fr; }
  .values-list { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
}
@media (max-width: 760px) {
  .nav-search, .brand-sub { display: none; }
  .nav { flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; display: none; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 12px; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: grid; place-items: center; border: 0; background: transparent; color: var(--forest); cursor: pointer; padding: 4px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual { min-height: 320px; order: -1; }
  /* Text runs full-width once the grid stacks to one column, so the blobs
     (sized for the ~45%-wide desktop text column) need to widen too or
     copy spills past their right edge onto plain background. */
  .hero-blob-a { width: 92%; left: -8%; }
  .about-blob { width: 92%; left: -8%; }
  .grid-5 { grid-template-columns: repeat(2,1fr); }
  .promises { grid-template-columns: repeat(2,1fr); }
  .qform { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px) {
  .grid-5 { grid-template-columns: repeat(2,1fr); }
  .promises { grid-template-columns: 1fr; }
  .promise { border-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .promise:first-child { border-top: 0; }
}

@media print {
  .site-header, .icon-btn, .heart-btn, .circle-form, .qform button { display: none; }
}

/* ================= CATEGORY DETAIL PAGES ================= */
.cat-subnav {
  position: sticky; top: 73px; z-index: 90; background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft);
}
.cat-subnav-inner {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 12px var(--pad); max-width: var(--max); margin: 0 auto; scrollbar-width: thin;
}
.cat-subnav-inner::-webkit-scrollbar { height: 5px; }
.cat-subnav-inner::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.cat-subnav a {
  flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; color: var(--ink-soft); white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cat-subnav a:hover { background: var(--tint-green-2); }
.cat-subnav a[aria-current="page"] { background: var(--forest); border-color: var(--forest); color: #fff; font-weight: 500; }

.breadcrumb { font-size: 13px; color: var(--ink-quiet); margin: 20px 0 0; }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--leaf); }
.breadcrumb .current { color: var(--forest); font-weight: 500; }

.cat-hero { position: relative; overflow: hidden; padding: 22px var(--pad) clamp(28px,4vw,48px); }
.cat-hero-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,4vw,56px);
  align-items: center; margin-top: 18px;
}
.cat-hero-media {
  position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/3;
  box-shadow: var(--shadow-card); background: transparent;
}
.cat-hero-media img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.cat-hero-title { font-size: clamp(34px,4.4vw,54px); color: var(--forest); margin-top: 12px; line-height: 1.05; }
.cat-hero-price { font-size: 19px; color: var(--leaf-dark); font-weight: 500; margin-top: 16px; }
.cat-hero-lede { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--ink-muted); max-width: 52ch; }
.cat-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ================= CAREERS ================= */
/* The decorative blob is absolutely positioned, so it paints above static
   siblings — it was sitting on top of the hero copy and washing it out.
   Positioning the copy puts it back in front, the same way .about-grid
   does on the story section. */
.cat-hero-copy { position: relative; z-index: 1; }
/* Careers copy is the page's whole message rather than a caption under a
   product shot, so it carries more weight than the shared category lede. */
.cat-hero-copy .cat-hero-lede { color: var(--ink-soft); font-size: 17px; max-width: 60ch; }
.perk-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 14px 26px; margin-top: 6px;
}
.perk { display: flex; gap: 12px; align-items: flex-start; }
.perk-check {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: 999px; background: var(--tint-green); color: var(--leaf-dark); margin-top: 2px;
}
.perk b { display: block; color: var(--forest); font-weight: 500; font-size: 15.5px; }
.perk span { font-size: 14.5px; line-height: 1.55; color: var(--ink-faint); }

.apply-layout {
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,1fr);
  gap: clamp(20px,3vw,36px); align-items: start; margin-top: 26px;
}
/* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), so the column
   cannot shrink below its content's min-content width — and a file input
   has a wide one. That pushed the column to 386px inside a 335px container
   and scrolled the page sideways on a phone. */
@media (max-width: 820px) { .apply-layout { grid-template-columns: minmax(0,1fr); } }

/* width:0 + flex-grow lets the picker take the column's width instead of
   dictating it — a file input's min-content is wide enough to burst a
   narrow card otherwise. */
.file-input {
  padding: 10px 12px; background: var(--cream); cursor: pointer;
  width: 100%; min-width: 0;
}
.file-input::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 8px;
  background: var(--forest); color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
.file-input::file-selector-button:hover { background: var(--leaf); }
.field-hint { font-size: 12px; line-height: 1.5; color: var(--ink-faint); }

.apply-aside {
  background: var(--forest); color: var(--cream); border-radius: 20px;
  padding: clamp(22px,3vw,30px); display: flex; flex-direction: column; gap: 10px;
}
.apply-aside .eyebrow { color: var(--leaf-soft); }
.apply-note { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.8); }
.apply-mail {
  font-size: clamp(15px,1.6vw,17px); color: #fff; word-break: break-word;
  border-bottom: 1px solid rgba(255,255,255,.4); align-self: flex-start; padding-bottom: 2px;
}
.apply-mail:hover { color: var(--leaf-soft); border-color: var(--leaf-soft); }
.apply-grow {
  margin: 6px 0 0; font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px; color: var(--leaf-soft);
}

.cat-section { padding: clamp(32px,4.6vw,56px) var(--pad); border-top: 1px solid var(--line-soft); }
.cat-section-title { font-size: clamp(22px,2.4vw,30px); color: var(--forest); margin-bottom: 22px; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 14px; }
.spec-item {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft);
}
.spec-item svg { color: var(--leaf-dark); flex: none; margin-top: 2px; }
.use-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.use-chip { background: var(--tint-sand); color: var(--forest); border-radius: 999px; padding: 9px 18px; font-size: 14px; }

.cat-cta-band {
  background: var(--forest); border-radius: 20px; padding: clamp(28px,4vw,48px);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.cat-cta-band h3 { color: #fff; font-size: clamp(22px,2.4vw,28px); }
.cat-cta-band p { color: rgba(255,255,255,.78); margin-top: 8px; max-width: 44ch; font-size: 15px; line-height: 1.6; }
.cat-cta-band .btn-primary { background: var(--leaf); border-color: var(--leaf); }
.cat-cta-band .btn-primary:hover { background: #fff; color: var(--forest); border-color: #fff; }

.cat-prevnext { display: flex; justify-content: space-between; gap: 16px; padding: clamp(24px,3vw,36px) 0 clamp(48px,6vw,72px); flex-wrap: wrap; }
.cat-prevnext a { display: flex; flex-direction: column; gap: 4px; max-width: 46%; }
.cat-prevnext .dir { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); }
.cat-prevnext .name { font-size: 17px; color: var(--forest); font-weight: 500; }
.cat-prevnext .cp-next { text-align: right; margin-left: auto; }

@media (max-width: 820px) {
  .cat-hero-grid { grid-template-columns: 1fr; }
  .cat-hero-media { order: -1; aspect-ratio: 16/10; }
}
@media (max-width: 520px) {
  .cat-prevnext a { max-width: 100%; }
  .cat-prevnext .cp-next { text-align: left; }
}

/* ================= FAQ ================= */
.faq-list { display: grid; gap: 14px; max-width: 760px; }
.faq-item { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 14px; padding: 20px 24px; }
.faq-q { font-size: 17px; color: var(--forest); margin: 0 0 8px; font-family: 'Jost', sans-serif; font-weight: 500; }
.faq-a { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); margin: 0; }