@charset "UTF-8";
/* ===========================================================================
   Dikson Paints — design system
   Palette ratio target: ~60% ivory/white, 25% green/graphite, 10% terracotta,
   5% gold/sage. Terracotta and gold are accents only. No blue anywhere.
   =========================================================================== */

/* --- 1. Fonts -------------------------------------------------------------
   Self-hosted subsets, only the weights the design uses. font-display:swap
   keeps text visible during load (no invisible-text CLS).                    */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20B9, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  /* Brand palette — supplied by the business, do not alter. */
  --brand-primary: #0B4F3C;
  --brand-primary-hover: #073B2E;
  --brand-heading: #202624;
  --brand-body: #56605C;
  --brand-terracotta: #E45B3D;
  --brand-terracotta-dark: #C9472E;
  --brand-gold: #F2B544;
  --brand-sage: #91A47B;
  --brand-background: #F7F3EA;
  --brand-section-light: #E7F0EC;
  --brand-white: #FFFFFF;
  --brand-border: #E5DED2;
  --brand-footer: #102C24;
  --brand-footer-text: #F7F3EA;

  /* Derived tones. */
  --brand-primary-soft: #F0F6F3;
  --brand-terracotta-soft: #FDF0EC;
  --brand-gold-soft: #FDF4E2;
  --brand-body-light: #7A837F;
  --brand-danger: #B4342A;
  --brand-danger-soft: #FBEDEC;
  --brand-success: #1D6B4B;
  --brand-success-soft: #E9F5EF;

  /* Type. */
  --font-heading: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h6: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-h5: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4: clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.85vw, 1.9375rem);
  --fs-h2: clamp(1.625rem, 1.32rem + 1.4vw, 2.5rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.3vw, 3.375rem);

  /* Space. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Shape. */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(32, 38, 36, .06);
  --shadow-sm: 0 2px 8px rgba(32, 38, 36, .06);
  --shadow: 0 6px 20px rgba(32, 38, 36, .08);
  --shadow-lg: 0 16px 44px rgba(32, 38, 36, .12);

  --container: 1220px;
  --container-narrow: 880px;
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;
}

/* --- 3. Reset & base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The browser hides [hidden] with display:none, but any component rule that
   sets its own display (.alert, .modal, .lightbox …) outranks it and the
   element reappears. This keeps the attribute authoritative everywhere. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--brand-body);
  background: var(--brand-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.18;
  color: var(--brand-heading);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-h5); font-weight: 600; }
h6 { font-size: var(--fs-h6); font-weight: 600; }

p { margin: 0 0 var(--space-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-primary-hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Placeholder ground while photos load — but never behind an image that is
   transparent on purpose, where it would fill the cut-out with a mint slab.
   (That is exactly what it did to the trowel.) */
img { background-color: var(--brand-section-light); }
.roller-scene__trowel, .logo img, .logo-lockup, .footer__logo-plate img { background-color: transparent; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--brand-border); margin: var(--space-6) 0; }

strong, b { font-weight: 600; color: var(--brand-heading); }

small { font-size: var(--fs-sm); }

table { border-collapse: collapse; width: 100%; }

/* Visible, high-contrast focus. Two-tone ring so it reads on any surface. */
:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.footer :focus-visible,
.b2b-callout :focus-visible {
  outline-color: var(--brand-gold);
}

::selection { background: var(--brand-gold); color: var(--brand-heading); }

/* Icons come from one sprite sheet. The outline set is stroked with
   currentColor, so `color` controls an icon everywhere; brand glyphs
   (WhatsApp, social) are solid and opt in with .icon-solid. */
.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon-solid { fill: currentColor; stroke: none; }

/* --- 4. Layout ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--light { background: var(--brand-section-light); }
.section--white { background: var(--brand-white); }

.section-head { max-width: 44rem; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--brand-body); font-size: var(--fs-lg); }
.section-head--center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-terracotta);
}
.section-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.skip-link {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--brand-primary);
  color: var(--brand-white);
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--brand-white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 5. Buttons ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--brand-primary);
  --btn-fg: var(--brand-white);
  --btn-bd: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--brand-primary-hover);
  --btn-bd: var(--brand-primary-hover);
  color: var(--brand-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--brand-primary);
  --btn-bd: var(--brand-primary);
}
.btn--secondary:hover { --btn-bg: var(--brand-primary); --btn-fg: var(--brand-white); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-heading);
  --btn-bd: var(--brand-border);
}
.btn--ghost:hover { --btn-bg: var(--brand-white); --btn-bd: var(--brand-primary); --btn-fg: var(--brand-primary); }

.btn--accent {
  --btn-bg: var(--brand-terracotta);
  --btn-bd: var(--brand-terracotta);
}
.btn--accent:hover { --btn-bg: var(--brand-terracotta-dark); --btn-bd: var(--brand-terracotta-dark); }

.btn--whatsapp {
  --btn-bg: #1FA855;
  --btn-bd: #1FA855;
}
.btn--whatsapp:hover { --btn-bg: #167C3F; --btn-bd: #167C3F; }

.btn--on-dark {
  --btn-bg: var(--brand-white);
  --btn-fg: var(--brand-primary);
  --btn-bd: var(--brand-white);
}
.btn--on-dark:hover { --btn-bg: var(--brand-gold); --btn-bd: var(--brand-gold); --btn-fg: var(--brand-heading); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--brand-footer-text);
  --btn-bd: rgba(247, 243, 234, .45);
}
.btn--outline-light:hover { --btn-bg: rgba(247, 243, 234, .12); --btn-bd: var(--brand-footer-text); --btn-fg: var(--brand-footer-text); }

.btn--sm { min-height: 40px; padding: 0.5rem 1.05rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 54px; padding: 0.9rem 1.9rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Loading state driven by JS on form submit. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: dp-spin .7s linear infinite;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }

.btn .icon { width: 1.05em; height: 1.05em; flex: none; }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--brand-primary); text-decoration: none;
}
.text-link::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}
.text-link:hover::after { transform: translateX(3px); }

/* --- 6. Badges & tags ---------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}
.badge--gold { background: var(--brand-gold); color: var(--brand-heading); }
.badge--terracotta { background: var(--brand-terracotta-soft); color: var(--brand-terracotta-dark); }
.badge--sage { background: #EDF1E7; color: #4C5A3C; }
.badge--outline { background: transparent; border: 1px solid var(--brand-border); color: var(--brand-body); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tag-list li { margin: 0; }
.tag {
  display: inline-block;
  padding: .22rem .6rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  font-size: var(--fs-xs);
  color: var(--brand-body);
}

/* --- 7. Cards ------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #D8CFBE; }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__title { margin: 0; font-size: var(--fs-h5); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--brand-primary); }
.card__text { margin: 0; font-size: var(--fs-sm); color: var(--brand-body); }
.card__foot { margin-top: auto; padding-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--brand-section-light);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__media .badge { position: absolute; top: var(--space-3); left: var(--space-3); }

/* Placeholder artwork used until the business supplies a real photograph. */
.media-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 22% 26%, rgba(145, 164, 123, .28), transparent 45%),
    radial-gradient(circle at 78% 72%, rgba(228, 91, 61, .16), transparent 48%),
    linear-gradient(140deg, var(--brand-section-light), #F1EADD);
  color: var(--brand-primary);
}
.media-placeholder span {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .55;
  text-align: center;
  padding: var(--space-3);
}

/* Category card — larger, image-led. */
.category-card { position: relative; }
.category-card .card__media { aspect-ratio: 16 / 11; }
.category-card__count { font-size: var(--fs-xs); color: var(--brand-body-light); }

/* Product card. */
.product-card .card__media { aspect-ratio: 1 / 1; }
.product-card__category {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-sage);
}
.product-card__sizes { font-size: var(--fs-xs); color: var(--brand-body-light); }
.product-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); width: 100%; }
.product-card__actions .btn { width: 100%; padding-inline: .75rem; }
.product-card__actions--single { grid-template-columns: 1fr; }

/* --- Catalogue card size --------------------------------------------------
   Beside the Browse panel the grid gets about 852px. At a 17rem minimum track
   the third column missed by twelve pixels, so auto-fit dropped to two and
   stretched them to 414px each — a card 685px tall, taller than most windows,
   for a product that is a bowl of chips. A smaller minimum keeps three across
   and brings the card back to a sensible size. */
@media (min-width: 601px) {
  .grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
  .product-card .card__body { padding: var(--space-4); }
  /* Two lines of summary. All nine products share almost the same sentence, so
     a third line adds height without adding information. */
  .product-card .card__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- Catalogue on a phone -------------------------------------------------
   One product per screen means nine screens of scrolling to see nine
   products. Two compact columns let a visitor compare shades the way they
   actually shop for them, which is the whole job of this page. */
@media (max-width: 600px) {
  .grid--products { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .product-card .card__body { padding: var(--space-3); gap: .35rem; }
  .product-card .card__title { font-size: var(--fs-base); line-height: 1.25; }
  .product-card__category { font-size: 10px; }
  /* Two lines of description, then an ellipsis: enough to tell the shades
     apart without the card growing to the height of the photograph. */
  .product-card .card__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-sm);
  }
  .product-card__actions { grid-template-columns: 1fr; }
  .product-card__actions .btn { font-size: var(--fs-xs); min-height: 40px; }
  .page-products .card__foot { padding-top: var(--space-3); }
  /* Three stacked buttons on a card this size is mostly buttons. The picture
     and the title already open the product, so the one that only repeats them
     goes; ordering and asking stay. */
  .product-card__actions .btn--secondary { display: none; }
}

/* Narrower than this and two columns stop being readable. */
@media (max-width: 380px) {
  .grid--products { grid-template-columns: 1fr; }
  .product-card .card__text { -webkit-line-clamp: 3; }
}

/* Feature / icon card. */
.feature-card {
  padding: var(--space-5);
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  height: 100%;
}
.feature-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}
.feature-card__icon .icon { width: 24px; height: 24px; }
.feature-card--accent .feature-card__icon { background: var(--brand-terracotta-soft); color: var(--brand-terracotta-dark); }
.feature-card--gold .feature-card__icon { background: var(--brand-gold-soft); color: #8A6512; }
.feature-card h3 { font-size: var(--fs-h5); margin-bottom: var(--space-2); }
.feature-card p { font-size: var(--fs-sm); margin: 0; }

/* Application chip card. */
.app-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  color: var(--brand-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.app-card:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary); transform: translateY(-2px); }
.app-card .icon { width: 22px; height: 22px; flex: none; color: var(--brand-terracotta); }
.app-card small { display: block; font-weight: 400; color: var(--brand-body-light); font-size: var(--fs-xs); }

/* Step / process. */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.step { position: relative; padding-left: 3.5rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.step h3 { font-size: var(--fs-h5); margin-bottom: var(--space-1); }
.step p { font-size: var(--fs-sm); margin: 0; }

/* --- 8. Top bar & header ------------------------------------------------- */

.topbar {
  display: none;
  background: var(--brand-footer);
  color: rgba(247, 243, 234, .82);
  font-size: var(--fs-xs);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 40px; }
.topbar__links { display: flex; align-items: center; gap: var(--space-5); }
.topbar a { color: rgba(247, 243, 234, .82); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--brand-gold); }
.topbar .icon { width: 14px; height: 14px; }
@media (min-width: 992px) { .topbar { display: block; } }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-white);
  border-bottom: 1px solid var(--brand-border);
}
.header.is-stuck { box-shadow: var(--shadow-sm); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* The supplied logo is placed at its native ratio and never stretched. */
.logo { display: inline-flex; align-items: center; text-decoration: none; padding-block: .5rem; }
.logo img, .logo picture { height: 46px; width: auto; background: none; }
.logo img { object-fit: contain; }
@media (max-width: 575px) { .logo img, .logo picture { height: 36px; } }

.nav { display: none; }
@media (min-width: 992px) {
  .nav { display: flex; align-items: center; gap: var(--space-1); }
}
.nav__link {
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  color: var(--brand-heading);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--brand-primary); background: var(--brand-primary-soft); }
.nav__link.is-active { color: var(--brand-primary); font-weight: 600; position: relative; }
.nav__link.is-active::after {
  content: "";
  position: absolute; left: .8rem; right: .8rem; bottom: .15rem;
  height: 2px; border-radius: 2px;
  background: var(--brand-terracotta);
}

.header__actions { display: flex; align-items: center; gap: var(--space-2); }
.header__actions .btn--quote { display: none; }
@media (min-width: 768px) { .header__actions .btn--quote { display: inline-flex; } }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border: 1.5px solid var(--brand-border);
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  color: var(--brand-primary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn--whatsapp { color: #1FA855; }
.icon-btn--whatsapp:hover { border-color: #1FA855; background: #EAF7EF; }

.nav-toggle { display: inline-grid; }
@media (min-width: 992px) { .nav-toggle { display: none; } }

/* Mobile drawer. */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, 24rem);
  z-index: 130;
  display: flex; flex-direction: column;
  background: var(--brand-white);
  border-left: 1px solid var(--brand-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[data-open="true"] { transform: translateX(0); }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--brand-border);
}
.mobile-nav__list { list-style: none; margin: 0; padding: var(--space-3); }
.mobile-nav__list li { margin: 0; }
.mobile-nav__list a {
  display: block;
  padding: .85rem var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--brand-heading);
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav__list a:hover, .mobile-nav__list a.is-active { background: var(--brand-primary-soft); color: var(--brand-primary); }
.mobile-nav__foot { margin-top: auto; padding: var(--space-4); border-top: 1px solid var(--brand-border); display: grid; gap: var(--space-3); }
.mobile-nav__contact { font-size: var(--fs-sm); color: var(--brand-body); }

.overlay {
  position: fixed; inset: 0;
  z-index: 120;
  background: rgba(16, 44, 36, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.overlay[data-open="true"] { opacity: 1; visibility: visible; }

body.is-locked { overflow: hidden; }

/* --- 9. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background:
    radial-gradient(ellipse 60% 70% at 88% 12%, rgba(145, 164, 123, .18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 4% 88%, rgba(228, 91, 61, .1), transparent 60%),
    var(--brand-background);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 992px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }

.hero h1 { margin-bottom: var(--space-4); }

/* --- Brush-stroke highlight --------------------------------------------
   Three tapered strokes in terracotta, gold and sage, stacked the way they
   are under the D in the logo. Drawn as a background image on the span
   rather than a pseudo-element, so a phrase that wraps onto a second line
   keeps its stroke on both fragments (box-decoration-break: clone).

   The sweep grows from the left on load, like a brush being pulled across,
   then stops. It runs once and never loops — decoration, not motion for its
   own sake. */
.ink {
  --ink-height: .30em;
  position: relative;
  display: inline;
  padding-bottom: .14em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M3 6.5C48 2.6 112 1.9 237 4.6' fill='none' stroke='%23E45B3D' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M4 11.6C52 7.6 118 7 236 10.2' fill='none' stroke='%23F2B544' stroke-width='3.1' stroke-linecap='round'/%3E%3Cpath d='M6 16.4C58 12.8 124 12.4 234 15.4' fill='none' stroke='%2391A47B' stroke-width='2.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--ink-height);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: ink-sweep 900ms cubic-bezier(.25, .8, .3, 1) 350ms forwards;
}

/* A second, later phrase starts after the first has finished, so the eye
   follows them in order instead of seeing both move at once. */
.ink:nth-of-type(2) { animation-delay: 900ms; }
.ink:nth-of-type(3) { animation-delay: 1400ms; }

@keyframes ink-sweep {
  from { background-size: 0 var(--ink-height); }
  to   { background-size: 100% var(--ink-height); }
}

/* The words themselves lift very slightly as the stroke passes under them. */
.ink__word {
  display: inline;
  color: var(--brand-primary);
}

/* On the dark callouts the forest green would disappear, so the words stay
   ivory and only the stroke carries the colour. */
.on-dark .ink__word, .callout--dark .ink__word { color: var(--brand-white); }

@media (prefers-reduced-motion: reduce) {
  .ink {
    animation: none;
    background-size: 100% var(--ink-height);
  }
}
.hero__lead { font-size: var(--fs-lg); max-width: 34rem; margin-bottom: var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.hero__points { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.hero__points li {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand-heading);
}
.hero__points .icon { width: 18px; height: 18px; color: var(--brand-primary); flex: none; }

/* Banner-led hero: the artwork runs the full width of the container at its own
   16:9, and the headline sits underneath it as text. */
/* Text on the left, the products on the right. */
@media (min-width: 900px) {
  .hero--split .hero__grid { grid-template-columns: 1.1fr 1fr; }
}

.hero__media { position: relative; }
.hero__media img,
.hero__media .media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
/* --- Brand panel ---------------------------------------------------------
   Stands where a photograph would, on pages where the company itself is the
   subject. The logo is centred at its own size rather than stretched to fill,
   with the brand's own sweep of colour behind it. */
.brand-panel {
  display: grid;
  place-content: center;
  gap: var(--space-4);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius-xl);
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-lg);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 90% at 18% 12%, rgba(145, 164, 123, .22), transparent 60%),
    radial-gradient(ellipse 60% 80% at 88% 88%, rgba(242, 181, 68, .20), transparent 62%),
    linear-gradient(150deg, var(--brand-white), var(--brand-section-light));
}
.brand-panel img {
  width: min(100%, 22rem);
  height: auto;
  margin-inline: auto;
}
.brand-panel__line {
  margin: 0;
  max-width: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

/* Curved paint-stroke motif drawn from the logo language. */
.hero__stroke {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero__stroke--1 { top: -3%; right: -6%; width: 46%; color: var(--brand-gold); opacity: .5; }
.hero__stroke--2 { bottom: -8%; left: -8%; width: 38%; color: var(--brand-terracotta); opacity: .35; }

.hero__badge {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  box-shadow: var(--shadow);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-heading);
}
.hero__badge .icon { width: 18px; height: 18px; color: var(--brand-primary); }

/* --- Waterproofing scene ------------------------------------------------
   Rain falls, the canopy turns it away, the house stays dry. The falling
   drops stop at the canopy line and reappear as runoff down each side, so
   the coating reads as doing the work. */
.wp-scene {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-lg);
  background: var(--brand-background);
}
.wp-scene svg { display: block; width: 100%; height: auto; }

/* Each drop is already positioned by its own <g>, so the only transform here
   is downward: no sideways drift, no stretching across the frame. How far it
   travels is --fall, set per drop from the canopy's curve, so a drop over the
   umbrella stops on the fabric and one outside it reaches the ground. */
.wp-drop {
  animation-name: wp-fall;
  animation-timing-function: cubic-bezier(.45, .05, .75, .55);
  animation-iteration-count: infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@keyframes wp-fall {
  0%   { transform: translateY(0) scaleY(1); opacity: 0; }
  10%  { opacity: .85; }
  88%  { transform: translateY(calc(var(--fall) * .93)) scaleY(1); opacity: .85; }
  100% { transform: translateY(var(--fall)) scaleY(.3); opacity: 0; }
}

/* Runoff: rolls off the rim and down the outside, clear of the house. */
.wp-shed {
  animation: wp-shed 1.9s cubic-bezier(.4, 0, .8, .5) infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes wp-shed {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  18%  { opacity: .7; }
  100% { transform: translateY(150px) scale(1); opacity: 0; }
}

/* Water collecting at the edges, where the runoff lands. */
.wp-pool { animation: wp-pool 2.6s ease-in-out infinite; transform-origin: center; }
.wp-pool--right { animation-delay: .9s; }
@keyframes wp-pool {
  0%, 100% { transform: scaleX(.94); opacity: .30; }
  50%      { transform: scaleX(1.04); opacity: .44; }
}

/* The canopy settles under the weight of the rain, very slightly. */
.wp-umbrella { animation: wp-settle 5.5s ease-in-out infinite; transform-origin: 240px 182px; }
@keyframes wp-settle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-drop, .wp-shed, .wp-umbrella, .wp-pool { animation: none; }
  /* Drops rest where they would have landed — on the canopy, or on the
     ground beside the house. */
  .wp-drop { opacity: .7; transform: translateY(var(--fall)); }
  .wp-shed { opacity: .5; }
}

/* --- Before / after comparison slider -----------------------------------
   One custom property, --pos, drives everything: the width of the reveal, the
   position of the divider and the position of the knob. The range input on
   top is the actual control and is invisible apart from its thumb, which is
   sized to match the knob it sits under. */
.compare { margin: 0; --pos: 50%; --focus: 50% 50%; }

.compare__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--brand-border);
  background: var(--brand-section-light);
  isolation: isolate;
  touch-action: pan-y;            /* let the page still scroll vertically */
}

.compare__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  object-position: var(--focus);
  user-select: none;
  -webkit-user-drag: none;
}

/* The "after" picture is laid over the "before" one at exactly the same size
   and then clipped. Clipping rather than resizing a narrower box is what keeps
   the two views in perfect register as the handle travels. */
.compare__reveal {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__reveal .compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Divider and knob. */
.compare__bar {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), var(--brand-white) 18%, var(--brand-white) 82%, rgba(255,255,255,.35));
  box-shadow: 0 0 0 1px rgba(11, 79, 60, .18), 0 2px 14px rgba(0, 0, 0, .28);
  pointer-events: none;
}
.compare__knob {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--brand-white);
  color: var(--brand-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .26), 0 0 0 3px var(--brand-gold);
  transition: scale 160ms ease;
}
.compare__knob svg { width: 24px; height: 24px; }

/* Corner captions. */
.compare__tag {
  position: absolute;
  bottom: var(--space-4);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.compare__tag--before {
  left: var(--space-4);
  background: rgba(32, 38, 36, .72);
  color: #F7F3EA;
}
.compare__tag--after {
  right: var(--space-4);
  background: var(--brand-gold);
  color: var(--brand-heading);
}

/* The control itself: full-bleed, transparent, thumb aligned to the knob. */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: ew-resize;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}
.compare__range::-webkit-slider-runnable-track { background: transparent; border: 0; }
.compare__range::-moz-range-track { background: transparent; border: 0; }
.compare__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.compare__range::-moz-range-thumb {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.compare__range:focus { outline: none; }
.compare__range:focus-visible ~ .compare__bar .compare__knob,
.compare__frame:hover .compare__knob { scale: 1.08; }
.compare__range:focus-visible ~ .compare__bar .compare__knob {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .26), 0 0 0 3px var(--brand-gold), 0 0 0 6px rgba(242, 181, 68, .45);
}

.compare__caption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--brand-muted);
}
.compare__caption .icon { width: 16px; height: 16px; color: var(--brand-gold); flex: none; }

@media (max-width: 560px) {
  .compare__knob { width: 40px; height: 40px; }
  .compare__knob svg { width: 20px; height: 20px; }
  .compare__range::-webkit-slider-thumb { width: 40px; height: 40px; }
  .compare__range::-moz-range-thumb { width: 40px; height: 40px; }
  .compare__tag { bottom: var(--space-3); font-size: 10px; }
  .compare__tag--before { left: var(--space-3); }
  .compare__tag--after { right: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .compare__knob { transition: none; }
}

/* Inner page header. */
.page-hero {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  background:
    radial-gradient(ellipse 60% 100% at 92% 0%, rgba(145, 164, 123, .16), transparent 62%),
    var(--brand-section-light);
  border-bottom: 1px solid var(--brand-border);
}
.page-hero h1 { margin-bottom: var(--space-3); }
.page-hero p { font-size: var(--fs-lg); max-width: 52rem; }
.page-hero__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- 10. Breadcrumbs ----------------------------------------------------- */

.breadcrumbs { padding-block: var(--space-3); font-size: var(--fs-xs); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-body-light); }
.breadcrumbs li + li::before { content: "/"; color: var(--brand-border); }
.breadcrumbs a { color: var(--brand-body); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-primary); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--brand-heading); font-weight: 500; }

/* --- 11. Forms ----------------------------------------------------------- */

.form-card {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-grid .field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label, .field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-heading);
}
.field__hint { font-size: var(--fs-xs); color: var(--brand-body-light); }
.field__optional {
  margin-left: .4rem;
  padding: .1rem .45rem;
  border-radius: var(--radius-pill);
  background: var(--brand-section-light);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-body-light);
}
.req { color: var(--brand-terracotta-dark); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1.5px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--brand-white);
  color: var(--brand-heading);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #A7AFAB; }
.input:hover, .select:hover, .textarea:hover { border-color: #D2C8B6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(11, 79, 60, .14);
}
.textarea { min-height: 8rem; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2356605C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 12px;
}

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--brand-danger);
  background: var(--brand-danger-soft);
}
.field__error {
  display: flex; align-items: flex-start; gap: .35rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--brand-danger);
}

.input-file {
  padding: .55rem;
  border: 1.5px dashed var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--brand-background);
  font-size: var(--fs-sm);
  width: 100%;
}

.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); }
.checkbox input[type="checkbox"], .checkbox input[type="radio"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.checkbox label { font-weight: 400; color: var(--brand-body); cursor: pointer; }

.radio-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.radio-card {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--brand-border);
  border-radius: var(--radius);
  background: var(--brand-white);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.radio-card:hover { border-color: var(--brand-primary); }
.radio-card:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.radio-card:has(input:focus-visible) { outline: 3px solid var(--brand-primary); outline-offset: 2px; }

/* Honeypot — off-screen but not display:none, so bots still fill it. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
.form-note { font-size: var(--fs-xs); color: var(--brand-body-light); }

/* --- 12. Alerts ---------------------------------------------------------- */

.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}
.alert .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert p { margin: 0; }
.alert--success { background: var(--brand-success-soft); border-color: #BFE0CE; color: #14513A; }
.alert--error { background: var(--brand-danger-soft); border-color: #EFC9C5; color: #8C2820; }
.alert--info { background: var(--brand-primary-soft); border-color: #CFE2D9; color: var(--brand-primary); }
.alert--warning { background: var(--brand-gold-soft); border-color: #EFD9A8; color: #78570C; }

.error-summary { border-left: 4px solid var(--brand-danger); }
.error-summary ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; }
.error-summary li { font-size: var(--fs-xs); }
.error-summary a { color: inherit; }

/* --- 13. Filters (products) --------------------------------------------- */

.catalogue { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 992px) { .catalogue { grid-template-columns: 17rem 1fr; } }

.filters {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
@media (max-width: 991px) {
  .filters {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(90vw, 22rem);
    z-index: 130;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .filters[data-open="true"] { transform: translateX(0); }
}
.filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.filters__head h2 { font-size: var(--fs-h5); margin: 0; }
.filters__close { display: inline-grid; }
@media (min-width: 992px) { .filters__close { display: none; } }

.filter-group { padding-block: var(--space-4); border-top: 1px solid var(--brand-border); }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group__title { font-size: var(--fs-sm); font-weight: 600; color: var(--brand-heading); margin-bottom: var(--space-3); }
.filter-options { display: flex; flex-direction: column; gap: var(--space-2); max-height: 15rem; overflow-y: auto; }
.filter-option { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); cursor: pointer; }
.filter-option input { width: 18px; height: 18px; accent-color: var(--brand-primary); flex: none; }
.filter-option span { color: var(--brand-body); }
.filter-option:hover span { color: var(--brand-heading); }

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.filter-bar__count { font-size: var(--fs-sm); color: var(--brand-body); }
.filter-bar__spacer { margin-left: auto; }
.filters-toggle { display: inline-flex; }
@media (min-width: 992px) { .filters-toggle { display: none; } }

/* On a phone: Browse and the count share the first line, sort takes the next,
   rather than three items fighting over one row and wrapping unevenly. */
@media (max-width: 600px) {
  .filter-bar { gap: var(--space-2); margin-bottom: var(--space-4); }
  .filter-bar__spacer { display: none; }
  .filter-bar__count { margin-left: auto; }
  .filter-bar .field { flex: 1 1 100%; min-width: 0; }
  .filter-bar .select { min-height: 44px; }
}

.search-box { position: relative; flex: 1 1 16rem; }
.search-box .input { padding-left: 2.6rem; }
.search-box .icon {
  position: absolute; left: .9rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: var(--brand-body-light);
  pointer-events: none;
}

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem .3rem .75rem;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
}
.chip:hover { background: #E1EDE7; color: var(--brand-primary-hover); }
.chip__x { font-size: 1rem; line-height: 1; opacity: .7; }

.empty-state {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--brand-white);
  border: 1px dashed var(--brand-border);
  border-radius: var(--radius-lg);
}
.empty-state .icon { width: 40px; height: 40px; color: var(--brand-sage); margin-bottom: var(--space-3); }
.empty-state p { margin-inline: auto; }

/* --- 14. Pagination ------------------------------------------------------ */

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.pagination a, .pagination span {
  display: inline-grid; place-items: center;
  min-width: 44px; height: 44px;
  padding-inline: .6rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--brand-white);
  color: var(--brand-heading);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.pagination a:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pagination [aria-current="page"] { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white); }
.pagination .is-disabled { opacity: .45; pointer-events: none; }

/* --- 15. Product detail -------------------------------------------------- */

.product-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: start; }
@media (min-width: 900px) { .product-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.gallery-main {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.gallery-thumb {
  width: 72px; height: 72px;
  padding: 0;
  border: 2px solid var(--brand-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--brand-white);
  cursor: pointer;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb[aria-current="true"] { border-color: var(--brand-primary); }

.product-summary__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.product-summary h1 { margin-bottom: var(--space-3); }
.product-summary__lead { font-size: var(--fs-lg); margin-bottom: var(--space-5); }
.product-summary__actions { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-bottom: var(--space-4); }

.external-notice {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--brand-body-light);
  margin-bottom: var(--space-5);
}
.external-notice .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }

.pack-sizes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pack-size {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1.5px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--brand-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-heading);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.pack-size[aria-pressed="true"] { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch { text-align: center; width: 74px; }
.swatch__chip {
  width: 74px; height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-border);
  background-size: cover;
  background-position: center;
}
.swatch span { display: block; font-size: var(--fs-xs); margin-top: .35rem; color: var(--brand-body); }

.spec-table { width: 100%; font-size: var(--fs-sm); }
.spec-table th, .spec-table td {
  padding: var(--space-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--brand-border);
}
.spec-table th { width: 38%; font-weight: 600; color: var(--brand-heading); padding-right: var(--space-4); }
.spec-table td { color: var(--brand-body); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
@media (max-width: 575px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table th { border-bottom: 0; padding-bottom: 0; }
  .spec-table td { padding-top: .25rem; }
}

.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.doc-list li { margin: 0; }
.doc-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background: var(--brand-white);
  text-decoration: none;
  color: var(--brand-heading);
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: all var(--dur) var(--ease);
}
.doc-item:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary); }
.doc-item .icon { width: 22px; height: 22px; flex: none; color: var(--brand-terracotta); }
.doc-item small { display: block; font-weight: 400; color: var(--brand-body-light); font-size: var(--fs-xs); }
.doc-item__arrow { margin-left: auto; }

/* --- 16. Accordion (FAQ) ------------------------------------------------- */

.accordion { display: grid; gap: var(--space-3); }
.accordion__item {
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background: var(--brand-white);
  overflow: hidden;
}
.accordion__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: 600;
  color: var(--brand-heading);
  text-align: left;
  cursor: pointer;
}
.accordion__trigger:hover { color: var(--brand-primary); }
.accordion__icon {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  transition: transform var(--dur) var(--ease);
  font-size: 1rem; line-height: 1;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { padding: 0 var(--space-5) var(--space-5); font-size: var(--fs-sm); }
.accordion__panel[hidden] { display: none; }

/* --- 17. Gallery & lightbox --------------------------------------------- */

.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.gallery-filter {
  min-height: 44px;
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--brand-border);
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  color: var(--brand-heading);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center;
  transition: all var(--dur) var(--ease);
}
.gallery-filter:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.gallery-filter[aria-pressed="true"], .gallery-filter.is-active {
  background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white);
}

.gallery-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.gallery-item {
  position: relative;
  padding: 0;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-white);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__caption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: linear-gradient(to top, rgba(16, 44, 36, .85), transparent);
  color: var(--brand-white);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: left;
}

.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  padding: var(--space-5);
  background: rgba(16, 44, 36, .92);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 82vh; border-radius: var(--radius); object-fit: contain; }
.lightbox__caption { color: var(--brand-footer-text); font-size: var(--fs-sm); margin-top: var(--space-3); text-align: center; }
.lightbox__close {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(247, 243, 234, .4);
  border-radius: 50%;
  background: transparent;
  color: var(--brand-footer-text);
  font-size: 1.4rem;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(247, 243, 234, .14); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(247, 243, 234, .4);
  border-radius: 50%;
  background: transparent;
  color: var(--brand-footer-text);
  font-size: 1.3rem;
  cursor: pointer;
}
.lightbox__nav--prev { left: var(--space-4); }
.lightbox__nav--next { right: var(--space-4); }
.lightbox__nav:hover { background: rgba(247, 243, 234, .14); }

/* --- 18. Testimonials ---------------------------------------------------- */

.testimonial {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  height: 100%;
}
.testimonial__quote { font-size: var(--fs-base); color: var(--brand-heading); margin: 0; }
.testimonial__quote::before { content: "“"; font-family: var(--font-heading); font-size: 2rem; line-height: 0; color: var(--brand-gold); margin-right: .15rem; vertical-align: -.35rem; }
.testimonial__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.testimonial__avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.testimonial__name { font-weight: 600; color: var(--brand-heading); font-size: var(--fs-sm); }
.testimonial__role { font-size: var(--fs-xs); color: var(--brand-body-light); }

/* --- 19. Callouts -------------------------------------------------------- */

.callout {
  position: relative;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.callout--dark {
  background: var(--brand-footer);
  color: rgba(247, 243, 234, .85);
}
.callout--dark h2, .callout--dark h3 { color: var(--brand-white); }
.callout--dark::after {
  content: "";
  position: absolute; right: -8%; top: -30%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(145, 164, 123, .25), transparent 68%);
  pointer-events: none;
}
.callout--sage { background: var(--brand-section-light); border: 1px solid #D6E4DC; }
.callout--gold { background: var(--brand-gold-soft); border: 1px solid #EFDCB2; }
/* A callout's normal padding is sized for a full-width band. Dropped into a
   17rem sidebar it swallows the column and every line wraps twice, so a narrow
   column gets a narrow inset. */
.callout--compact { padding: var(--space-5); }
.callout__grid { display: grid; gap: var(--space-5); align-items: center; position: relative; z-index: 1; }
@media (min-width: 800px) { .callout__grid { grid-template-columns: 1.4fr auto; } }
.callout__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Photographic callout -----------------------------------------------
   A shipping photograph behind the international enquiry block. The photo is
   set as --callout-image on the element; the gradient over it is not decoration
   but the thing that keeps the text readable whatever the photograph happens to
   be, and pulls a blue stock image back towards the brand green. Without an
   uploaded photograph the same gradient stands on its own, so the block never
   looks like it is waiting for something. */
.callout--photo {
  --callout-image: none;
  background:
    linear-gradient(104deg, rgba(6, 51, 39, .95) 0%, rgba(9, 66, 50, .88) 38%, rgba(11, 79, 60, .62) 68%, rgba(11, 79, 60, .45) 100%),
    var(--callout-image),
    radial-gradient(ellipse 90% 120% at 88% 10%, #12654C, #063327 72%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(247, 243, 234, .9);
  border: 1px solid rgba(247, 243, 234, .14);
}
.callout--photo h2, .callout--photo h3 { color: var(--brand-white); }
.callout--photo .eyebrow { color: var(--brand-gold); }
/* A soft edge at the bottom so the text never sits on a busy patch of sea. */
.callout--photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(6, 51, 39, .55));
  pointer-events: none;
}

/* World-map motif for the export callout — decorative, claims nothing. */
.export-map { width: 100%; max-width: 26rem; opacity: .5; color: var(--brand-sage); }
.callout--photo .export-map { color: var(--brand-gold); opacity: .65; }

/* --- Auto-scrolling texture strip ---------------------------------------
   The list is rendered twice and the track moves by exactly -50%, so the
   second copy lands where the first began and the loop has no seam. Because
   the distance is a percentage of the track's own width, the strip works with
   any number of tiles without retuning the animation. */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-2);
  /* Fade both ends so tiles enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 56s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__list {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 var(--space-2) 0 0;
  list-style: none;
}
.marquee__item { flex: none; width: 300px; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.texture-card {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow);
}
.texture-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.texture-card figcaption {
  padding: .6rem var(--space-4) .75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--brand-heading);
  border-top: 1px solid var(--brand-border);
}

/* The same machinery at card size, filling a card's picture area instead of
   running across the page. No captions and no border: inside a card it is the
   picture, not a component sitting in one. */
.marquee--card {
  position: absolute;
  inset: 0;
  padding: 0;
  -webkit-mask-image: none;
          mask-image: none;
}
.marquee--card .marquee__track { height: 100%; animation-duration: 34s; }
.marquee--card .marquee__list { gap: 0; padding: 0; height: 100%; }
.marquee--card .marquee__item { width: auto; height: 100%; aspect-ratio: 4 / 3; }
.marquee--card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The card's own hover zoom would fight the scroll, so it is switched off. */
.card:hover .marquee--card img { transform: none; }

/* On a phone the moving strip becomes a plain two-column grid: every shade on
   screen at once, no waiting for the loop to bring the one you wanted round
   again. The duplicate copy that makes the desktop loop seamless is dropped,
   so nothing appears twice. The in-card variant keeps scrolling — it is a
   picture, not a chooser. */
@media (max-width: 700px) {
  .marquee:not(.marquee--card) {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: var(--space-4);
  }
  .marquee:not(.marquee--card) .marquee__track { width: auto; display: block; animation: none; }
  .marquee:not(.marquee--card) .marquee__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: 0; }
  .marquee:not(.marquee--card) .marquee__list[aria-hidden="true"] { display: none; }
  .marquee:not(.marquee--card) .marquee__item { width: auto; }
}

/* Motion off: a plain row the visitor scrolls themselves, so every tile is
   still reachable. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
  .marquee__list[aria-hidden="true"] { display: none; }
  /* Inside a card the strip sits within a link, where a scrolling region would
     be a trap. It settles on the first picture instead. */
  .marquee--card { overflow: hidden; }
  .marquee--card .marquee__item ~ .marquee__item { display: none; }
}

/* --- 20. Footer ---------------------------------------------------------- */

/* Kept deliberately compact — the footer is a directory, not a section of the
   page. Smaller type, tighter rhythm, less vertical space. */
.footer {
  background: var(--brand-footer);
  color: rgba(247, 243, 234, .72);
  padding-block: var(--space-6) var(--space-4);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.footer h2, .footer h3 {
  color: var(--brand-white);
  font-size: var(--fs-sm);
  letter-spacing: .01em;
  margin-bottom: var(--space-3);
}
.footer p { font-size: var(--fs-xs); }
.footer a { color: rgba(247, 243, 234, .78); text-decoration: none; }
.footer a:hover { color: var(--brand-gold); text-decoration: underline; }
/* Footer layout is set per breakpoint rather than left to auto-fit, which
   could drop four columns to one at awkward widths and leave the brand block
   stretched across the full width with a short paragraph in it. */
.footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }

/* Small phones upward: two columns, brand across the top. */
@media (min-width: 480px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .footer__brand { grid-column: 1 / -1; }
}

/* Tablets: brand takes its own column beside the link lists. */
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; max-width: 34rem; }
}

/* Desktop: brand wider than the three link columns. */
@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1.15fr 1.2fr;
    gap: var(--space-6) var(--space-5);
    align-items: start;
  }
  .footer__brand { grid-column: auto; max-width: 24rem; }
}
.footer__brand { max-width: 22rem; }
/* The wordmark is dark graphite, so on the dark footer the logo sits on an
   ivory plate with clear space rather than being recoloured or inverted. */
.footer__logo-plate {
  display: inline-block;
  padding: .7rem 1.1rem;
  margin-bottom: var(--space-4);
  background: var(--brand-white);
  border-radius: var(--radius);
}
.footer__logo-plate img, .footer__logo-plate picture { height: 42px; width: auto; background: none; }
.footer__logo-plate img { object-fit: contain; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer__list li { margin: 0; }

/* Icon-led footer links.
   The icon sits in sage — the quietest colour in the palette — so it reads as
   a marker rather than competing with the label. On hover the whole row shifts
   a couple of pixels and the icon picks up the gold, which is the same gesture
   the main navigation uses. A left rule appears on hover to anchor the motion
   so the text does not look like it is drifting. */
.footer__list--icons { gap: 1px; }
.footer__list--icons a {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  align-items: center;
  gap: .7rem;
  padding: .42rem .6rem .42rem .5rem;
  margin-left: -.5rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: rgba(247, 243, 234, .74);
  line-height: 1.4;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer__list--icons .icon {
  width: 15px; height: 15px;
  color: var(--brand-sage);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer__list--icons a:hover,
.footer__list--icons a:focus-visible {
  color: var(--brand-white);
  background: rgba(247, 243, 234, .05);
  border-left-color: var(--brand-gold);
  transform: translateX(3px);
  text-decoration: none;
}
.footer__list--icons a:hover .icon,
.footer__list--icons a:focus-visible .icon {
  color: var(--brand-gold);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .footer__list--icons a:hover,
  .footer__list--icons a:focus-visible { transform: none; }
  .footer__list--icons a:hover .icon { transform: none; }
}
.footer__contact { display: grid; gap: var(--space-3); }
.footer__contact div { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer__contact .icon { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--brand-gold); }
/* Registration badge. inline-flex rather than inline-block: as an inline-block
   the label broke onto a second line inside the pill and left the icon stranded
   beside the first half. Flex keeps the mark and the words on one baseline, and
   nowrap keeps the pill a pill. */
.footer__gstin {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  margin-top: var(--space-2);
  padding: .35rem .75rem;
  border: 1px solid rgba(247, 243, 234, .22);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
}
.footer__gstin .icon { width: 15px; height: 15px; flex: none; color: var(--brand-gold); }
/* Below this even one line will not fit on the narrowest phones, so the pill is
   allowed to wrap — with the icon pinned to the first line rather than centred
   against a two-line block. */
@media (max-width: 359px) {
  .footer__gstin { white-space: normal; align-items: flex-start; }
  .footer__gstin .icon { margin-top: .15rem; }
}
.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(247, 243, 234, .22);
  border-radius: 50%;
}
.footer__social a:hover { border-color: var(--brand-gold); background: rgba(242, 181, 68, .12); }
.footer__social .icon { width: 18px; height: 18px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(247, 243, 234, .14);
  font-size: var(--fs-xs);
}
.footer__bottom p { margin: 0; }

/* The legal links wrap onto as many rows as they need, and centre once the
   row stacks, so a narrow phone never leaves one orphaned link left-aligned
   under a centred copyright line. */
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer__legal a { padding-block: 2px; }

@media (max-width: 639px) {
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer__legal { justify-content: center; }
}

/* Contact column: long addresses and email addresses must never push the
   footer wider than the screen. */
.footer__contact span, .footer__contact a { min-width: 0; overflow-wrap: anywhere; }

/* Developer credit — the quietest line on the page. Small on purpose: it is a
   signature, not a message to the customer. */
.footer__credit {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(247, 243, 234, .07);
  font-size: 11px;
  letter-spacing: .01em;
  color: rgba(247, 243, 234, .38);
  text-align: center;
}
.footer__credit a { color: rgba(247, 243, 234, .55); text-decoration: none; }
.footer__credit a:hover { color: var(--brand-gold); text-decoration: underline; }

/* --- 21. Floating & sticky actions -------------------------------------- */

.fab-whatsapp {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1FA855;
  color: #fff;
  box-shadow: 0 8px 24px rgba(31, 168, 85, .35);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fab-whatsapp:hover { background: #167C3F; transform: scale(1.06); color: #fff; }
.fab-whatsapp .icon { width: 30px; height: 30px; }
@media (max-width: 767px) { .fab-whatsapp { bottom: calc(64px + 1rem); } }

/* --- Jump to top / bottom ------------------------------------------------
   Left-hand side, so it never covers the WhatsApp button or the mobile action
   bar. Hidden until there is enough page to make it worth having, and each
   half greys out at the end it points to. */
.scroll-nav {
  position: fixed;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 89;
  display: grid;
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  box-shadow: 0 6px 20px rgba(16, 44, 36, .16);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.scroll-nav[data-visible="true"] { opacity: 1; transform: none; }
.scroll-nav[hidden] { display: none; }

.scroll-nav__btn {
  display: grid;
  place-items: center;
  width: 44px; height: 40px;
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.scroll-nav__btn + .scroll-nav__btn { border-top: 1px solid var(--brand-border); }
.scroll-nav__btn svg { width: 20px; height: 20px; }
.scroll-nav__btn:hover { background: var(--brand-section-light); }
.scroll-nav__btn:disabled { color: var(--brand-border); cursor: default; background: transparent; }

@media (max-width: 767px) { .scroll-nav { bottom: calc(64px + 1rem); } }

@media (prefers-reduced-motion: reduce) {
  .scroll-nav, .scroll-nav__btn { transition: none; }
}

.sticky-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--brand-white);
  border-top: 1px solid var(--brand-border);
  box-shadow: 0 -4px 16px rgba(32, 38, 36, .09);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 768px) { .sticky-bar { display: none; } }
.sticky-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 64px;
  padding: .5rem .25rem;
  color: var(--brand-heading);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border-right: 1px solid var(--brand-border);
}
.sticky-bar a:last-child { border-right: 0; }
.sticky-bar a:active { background: var(--brand-primary-soft); }
.sticky-bar .icon { width: 21px; height: 21px; color: var(--brand-primary); }
.sticky-bar a.is-primary { background: var(--brand-primary); color: var(--brand-white); }
.sticky-bar a.is-primary .icon { color: var(--brand-white); }
.sticky-bar a.is-whatsapp .icon { color: #1FA855; }
@media (max-width: 767px) { body { padding-bottom: 64px; } }

/* --- 22. Modal / drawer -------------------------------------------------- */

.modal {
  position: fixed; inset: 0;
  z-index: 140;
  display: grid; place-items: end center;
  padding: 0;
}
.modal[hidden] { display: none; }
@media (min-width: 640px) { .modal { place-items: center; padding: var(--space-5); } }
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--brand-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
@media (min-width: 640px) { .modal__dialog { border-radius: var(--radius-xl); padding: var(--space-6); } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.modal__head h2 { font-size: var(--fs-h4); margin: 0; }
.modal__close {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--brand-border);
  border-radius: 50%;
  background: var(--brand-white);
  font-size: 1.2rem;
  color: var(--brand-body);
  cursor: pointer;
}
.modal__close:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* Exit-intent popup — desktop only, once per session. */
.exit-popup .modal__dialog { max-width: 30rem; text-align: center; }
.exit-popup .modal__dialog h2 { margin-bottom: var(--space-3); }

/* --- 23. Misc ------------------------------------------------------------ */

.prose h2 { margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose ul li::marker { color: var(--brand-terracotta); }
.prose a { font-weight: 500; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.tick-list li { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; font-size: var(--fs-sm); }
.tick-list .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand-primary); }

/* --- Contact detail cards ------------------------------------------------
   Each fact led by its own icon. The card is quiet at rest and warms towards
   the brand gold on hover: the tile fills, the hairline picks up colour and the
   whole card lifts a little. One idea repeated six times, which is what stops a
   grid of boxes reading as a template. */
/* Wide enough for three across, so six cards land as two even rows of three
   rather than four and a gap — and wide enough that an email address never has
   to break mid-word. */
.info-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.info-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 164, 123, .10), transparent 70%),
    var(--brand-white);
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
/* A hairline of brand colour along the top edge, drawn in on hover. */
.info-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-gold) 55%, var(--brand-terracotta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: #E4D7BC;
}
.info-card:hover::before { transform: scaleX(1); }

.info-card__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-1);
  border-radius: 12px;
  background: var(--brand-section-light);
  color: var(--brand-primary);
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}
.info-card__icon .icon { width: 20px; height: 20px; }
.info-card:hover .info-card__icon { background: var(--brand-gold-soft); color: #8A6512; }

.info-card__label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-sage);
}
.info-card__value {
  margin: 0;
  max-width: none;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-heading);
  /* break-word, not anywhere: only split a long address when it truly cannot
     fit, instead of chopping it wherever the line happens to end. */
  overflow-wrap: break-word;
}
/* The two a visitor is most likely to act on carry more weight. */
.info-card--strong .info-card__value { font-size: var(--fs-lg); }
.info-card--strong .info-card__icon { background: rgba(11, 79, 60, .09); }
/* A reference number reads better spaced out and in a fixed pitch. */
.info-card__value--mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
}
.info-card a { text-decoration: none; color: inherit; }
.info-card a:hover { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .info-card, .info-card::before, .info-card__icon { transition: none; }
  .info-card:hover { transform: none; }
}

.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--brand-border); background: var(--brand-section-light); }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

.divider-stroke { display: block; width: 100%; height: auto; color: var(--brand-border); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.muted { color: var(--brand-body-light); }
.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }

/* --- 24. Motion ---------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card:hover, .btn:hover, .app-card:hover { transform: none; }
}

/* --- 25. Print ----------------------------------------------------------- */

@media print {
  .header, .topbar, .footer, .fab-whatsapp, .sticky-bar, .filters, .modal, .breadcrumbs { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card, .form-card { border: 1px solid #ccc; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* --- Language switch ------------------------------------------------------
   Both languages always visible, never a dropdown: someone who cannot read the
   English label would not be able to read a closed menu either. The inactive
   one is a plain link to the same page, so it works with JavaScript off and the
   Hindi address can be shared. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgba(247, 243, 234, .10);
}
.lang-switch__item {
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.lang-switch__item:hover { background: rgba(247, 243, 234, .16); text-decoration: none; }
.lang-switch__item.is-active {
  background: var(--brand-gold);
  color: #3B2C0A;
}
.lang-switch--footer {
  background: rgba(247, 243, 234, .08);
  margin-right: auto;
}
@media (max-width: 600px) {
  .lang-switch--footer { margin: 0 0 var(--space-3); }
}

/* --- Blog -----------------------------------------------------------------
   Articles are read, not scanned, so the body column is held near 68
   characters and the type scale is left alone. The listing reuses the product
   card grid so the site keeps one card language throughout. */
.grid--posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

.post-card .card__media { aspect-ratio: 16 / 9; }
.post-card .card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.post-card__meta { margin: 0; font-size: var(--fs-xs); color: var(--brand-body-light); }

/* Topic filter: a row of links, the current one marked. */
.topic-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topic-nav__item {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-body);
  text-decoration: none;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background-color 160ms var(--ease);
}
.topic-nav__item:hover { border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none; }
.topic-nav__item.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white); }
.topic-nav__n { font-size: var(--fs-xs); opacity: .65; font-variant-numeric: tabular-nums; }

.post-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.post-head h1 { margin: 0; }
.post-head__topic {
  align-self: flex-start;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-terracotta); text-decoration: none;
}
.post-head__topic:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-head__lead { font-size: var(--fs-lg); color: var(--brand-body); margin: 0; }
.post-head__meta,
.post-head__byline { margin: 0; font-size: var(--fs-sm); color: var(--brand-body-light); display: flex; flex-wrap: wrap; gap: .45rem; }
.post-head__byline strong { color: var(--brand-heading); }

.post-figure { margin: 0 0 var(--space-6); }
.post-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: var(--radius-lg);
}

.post-body h2 { margin-top: var(--space-7); }
.post-body h3 { margin-top: var(--space-5); }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.post-body th, .post-body td { padding: .55rem .7rem; border-bottom: 1px solid var(--brand-border); text-align: left; vertical-align: top; }
.post-body th { font-weight: 700; color: var(--brand-heading); }
/* A wide table scrolls inside itself rather than pushing the page sideways. */
.post-body .table-scroll { overflow-x: auto; }

.post-cta {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--brand-section-light);
  border: 1px solid #D6E4DC;
  border-radius: var(--radius-lg);
}
.post-cta h2 { font-size: var(--fs-h4); margin: 0 0 var(--space-2); }
.post-cta p { margin: 0; }

/* --- Roller scene ---------------------------------------------------------
   A roller crosses the band right-to-left; the finished texture is revealed
   behind it. Both movements are the same keyframe timing on the same duration,
   so the paint edge and the tool can never drift apart. The tool itself is a
   photographed steel trowel with its own transparency, so its depth needs only
   a drop shadow and a slight working tilt. */
.roller-band {
  padding-block: var(--space-7) var(--space-6);
  background: var(--brand-section-light);
}
.roller-scene {
  --travel: 3.6s;                     /* one pass, shared by every moving part */
  position: relative;
  height: clamp(180px, 30vw, 260px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

/* Bare plaster, waiting for the material. */
.roller-scene__wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 30% 0%, rgba(0, 0, 0, .05), transparent 55%),
    linear-gradient(105deg, #E9E2D4, #F2EDE1 45%, #E5DECF);
}

/* The texture, one photograph per shade, side by side. Revealed right-to-left
   by animating the clip inset — transform would stretch the photographs. */
.roller-scene__paint {
  position: absolute; inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  clip-path: inset(0 0 0 100%);
  animation: roller-reveal var(--travel) cubic-bezier(.45, .05, .55, .95) 0.4s forwards;
}
.roller-scene__stroke {
  /* One swatch covering its own column: tiling a square this small produced
     visible banding where the repeats met, and each column is close enough to
     the swatch's own shape that cover barely scales the grain. */
  background-size: cover;
  background-position: center;
  box-shadow: inset 7px 0 12px -9px rgba(0, 0, 0, .5);   /* seam between shades */
}
/* Eight columns on a phone leaves each a sliver: the band grows a little
   taller and the seams slim further, so it reads as a fan of shades. */
@media (max-width: 700px) {
  .roller-scene { height: clamp(150px, 42vw, 220px); }
  .roller-scene__stroke { box-shadow: inset 4px 0 8px -6px rgba(0, 0, 0, .5); }
}
@keyframes roller-reveal {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0%); }
}

/* The tool, one positioning element so every part moves as one. */
.roller-scene__tool {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateX(100%);
  animation: roller-travel var(--travel) cubic-bezier(.45, .05, .55, .95) 0.4s forwards;
  pointer-events: none;
  z-index: 2;
}
@keyframes roller-travel {
  from { transform: translateX(calc(100% - clamp(88px, 15vw, 132px))); }
  to   { transform: translateX(0); }
}

/* The trowel: a photograph, so its depth needs only a shadow and a slight
   working tilt — blade leading, handle toward the direction of travel. */
.roller-scene__trowel {
  position: absolute;
  top: 50%;
  left: 0;
  /* 92% of the band's own height: big, but always fully inside the frame —
     the earlier fixed clamp could poke past the band on middle screens. */
  height: calc(clamp(180px, 30vw, 260px) * 0.92);
  width: auto;
  transform: translateY(-50%) rotate(-4deg);
  filter: drop-shadow(5px 9px 12px rgba(0, 0, 0, .38));
}
/* The phone band is shorter; keep the same proportion of it. */
@media (max-width: 700px) {
  .roller-scene__trowel { height: calc(clamp(150px, 42vw, 220px) * 0.92); }
}

/* Contact shadow at the blade's foot, riding with it. */
.roller-scene__shadow {
  position: absolute;
  top: calc(50% + clamp(72px, 12vw, 112px));
  left: clamp(32px, 5.5vw, 52px);
  width: clamp(70px, 12vw, 110px);
  height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .32), transparent 68%);
  filter: blur(2px);
}

.roller-band__caption {
  margin: var(--space-4) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--brand-body-light);
}

/* Replay on hover or tap: restarting the two animations by re-declaring them
   through a class the JS toggles would need JS — instead the finished state is
   the resting state, and the scene runs once per page view. Deliberate: an
   animation that loops forever next to reading copy becomes noise. */

@media (prefers-reduced-motion: reduce) {
  .roller-scene__paint { animation: none; clip-path: inset(0 0 0 0%); }
  .roller-scene__tool { animation: none; transform: translateX(0); }
}

/* ---------------------------------------------------------------------------
   Video embed (facade)

   The poster is served from our own domain and the real player is injected on
   click, so a visitor who never plays the video never loads YouTube. The frame
   gets a little more presence than a bare iframe: a warm mat, a soft lift, and
   a play control that responds to hover and to the keyboard.
   --------------------------------------------------------------------------- */
.video-frame {
  margin: 0;
  max-width: 62rem;
  margin-inline: auto;
}

.video-frame__stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-footer);
  box-shadow: var(--shadow-lg);
  /* A hairline keeps the frame from dissolving into a light section. */
  outline: 1px solid var(--brand-border);
  outline-offset: 0;
}

.video-facade {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--brand-footer);
  cursor: pointer;
  color: var(--brand-white);
  /* Never let the button's own font metrics add a stray baseline gap. */
  line-height: 0;
}

.video-facade__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* site.css paints a mint ground behind every img; the poster fills its box. */
  background-color: transparent;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.video-facade__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(16, 44, 36, .10) 0%, rgba(16, 44, 36, .48) 100%);
  transition: background .4s ease;
}

.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(4rem, 9vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--brand-white);
  color: var(--brand-primary);
  box-shadow: 0 10px 30px rgba(16, 44, 36, .35);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), background .3s ease, color .3s ease;
}

/* The triangle is optically off-centre in its circle; nudge it back. */
.video-facade__play svg { margin-left: .18em; }

.video-facade__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.75rem);
  transform: translateX(-50%);
  font-size: var(--fs-small, .875rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(16, 44, 36, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--brand-white);
}

.video-facade:hover .video-facade__poster,
.video-facade:focus-visible .video-facade__poster { transform: scale(1.03); }

.video-facade:hover .video-facade__scrim,
.video-facade:focus-visible .video-facade__scrim {
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(16, 44, 36, .04) 0%, rgba(16, 44, 36, .40) 100%);
}

.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--brand-primary);
  color: var(--brand-white);
}

.video-facade:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 3px;
}

/* Once played, the iframe replaces the button and fills the same box. */
.video-frame__stage iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.video-frame__caption {
  margin-top: var(--space-4, 1rem);
  text-align: center;
  color: var(--brand-body);
  font-size: var(--fs-small, .9375rem);
  max-width: 46rem;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .video-facade__poster,
  .video-facade__scrim,
  .video-facade__play { transition: none; }
  .video-facade:hover .video-facade__poster,
  .video-facade:focus-visible .video-facade__poster { transform: none; }
}