/*
Theme Name: Fleximo
Theme URI: https://fleximo.in
Author: Maxions Technologies
Author URI: https://maxions.com
Description: Custom WordPress theme for Fleximo wooden doors and furniture.
Version: 1.0.2
Text Domain: fleximo
*/

/* ==========================================================================
   Fleximo — Shared Stylesheet
   Home page: premium design. About/Services/Products/Contact still use
   the foundational `.page-section` rules below, pending their redesign.
   ========================================================================== */

:root {
  /* Palette — warm ivory, natural wood brown, charcoal, muted gold */
  --color-ivory: #faf6ef;
  --color-ivory-dim: #f2ebdd;
  --color-wood: #6b4226;
  --color-wood-dark: #4a2d1a;
  --color-charcoal: #2a2521;
  --color-charcoal-deep: #1c1815;
  --color-gold: #b9974a;
  --color-gold-soft: #ddc794;
  --color-forest: #1f3d2b;
  --color-forest-deep: #142a1c;
  --color-text: #2a2521;
  --color-text-muted: #6e6459;
  --color-text-on-dark: #f2ecdf;
  --color-text-on-dark-muted: #c9bfae;
  --color-border: #e4dac9;
  --color-white: #ffffff;

  /* ---- Permanent Fleximo logo colour system ----
     Sampled directly from assets/images/fleximo- logo.png (the wordmark
     green and the leaf-icon gold). Per CLAUDE.md, every future new
     section/page uses these six tokens as its primary design system —
     do not introduce unrelated accent colours in new work. Existing
     sections built before this rule keep the palette above; they are
     not being retrofitted here. */
  --fleximo-green: #144c26;
  --fleximo-gold: #d39c39;
  --fleximo-ivory: #faf6ef;
  --fleximo-text-dark: #1c2b21;
  --fleximo-text-muted: #5c6b61;
  --fleximo-border: #e1ddca;

  --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-nav: Inter, 'Segoe UI', Arial, sans-serif; /* header/drawer navigation only — no external @font-face, falls through to Segoe UI/Arial wherever Inter isn't already installed */

  --header-height: 150px; /* moderately tightened top/bottom padding around the slightly-reduced 134px logo below (was 164px / 144px) */
  --header-max-width: 1366px; /* wider than --max-width so the logo + 8 nav links plus the E-Catalog button have room; see the nav rules below */
  --max-width: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 45px -25px rgba(28, 24, 21, 0.35);
  --shadow-card: 0 12px 30px -18px rgba(28, 24, 21, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-ivory);
  line-height: 1.65;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Accessibility helpers ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 1000;
  background: var(--color-charcoal);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Branded preloader (header.php: #fleximoPreloader, rendered as the very
   first thing after wp_body_open() so it appears with zero unstyled-
   content flash — visible by default from plain server-rendered markup,
   no JS required to show it; script.js only decides WHEN to hide it).

   One intentional top-level z-index (9999): this is the one element in
   the theme whose entire purpose is to sit above literally everything
   else — header, homepage slider, Pannellum, the gallery lightbox, the
   mobile drawer, floating actions — while visible, so a single sentinel
   value here is correct, not a case of "random extreme values on every
   child" (nothing else in the theme uses a value anywhere near this).

   Namespace: fleximo-preloader / __loader / __ring / __icon / __dots /
   __status. body.fleximo-preloader-active (set in the initial markup,
   removed by script.js on hide) is a dedicated scroll-lock class —
   separate from body.nav-open and body.lightbox-open, so none of the
   three ever fight over the same class.

   The door itself is a small inline SVG (outer frame + inset panel +
   a gold handle, see header.php) that stays completely still — only
   .fleximo-preloader__ring, a plain CSS circle around it, rotates.
   Replaces an earlier version that used a CSS-only door graphic with a
   perspective open/close swing; that entire construction (and its
   fleximoPreloaderDoor/Glow/Edge keyframes) has been removed rather
   than hidden, per this revision. ---- */
body.fleximo-preloader-active {
  overflow: hidden;
}

.fleximo-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background-color: var(--fleximo-green);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.fleximo-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Loader: the stationary door icon centred inside a rotating gold
   ring, with enough space between them that the ring never touches or
   overlaps the icon's artwork. ---- */
.fleximo-preloader__loader {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fleximo-preloader__ring {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(250, 246, 239, 0.18);
  border-top-color: var(--fleximo-gold);
  border-right-color: var(--fleximo-gold);
  border-radius: 50%;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-preloader__ring {
    animation: fleximoLoaderSpin 1s linear infinite;
  }

  @keyframes fleximoLoaderSpin {
    to {
      transform: rotate(360deg);
    }
  }
}

.fleximo-preloader.is-hidden .fleximo-preloader__ring {
  animation-play-state: paused;
}

/* ---- Icon: an original inline door outline (outer frame rect, inset
   inner panel rect, small gold handle circle — see header.php's SVG).
   No wood texture, no image file. currentColor drives the two stroked
   rects so the colour lives here, in CSS, not duplicated in the SVG
   markup. Kept well inside the ring via its own fixed size. A very
   subtle opacity pulse only — the icon itself never opens, rotates,
   bounces or shakes. ---- */
.fleximo-preloader__icon {
  position: relative;
  z-index: 1;
  display: flex;
  color: var(--fleximo-ivory);
}

.fleximo-preloader__icon svg {
  display: block;
  width: 42px;
  height: 58px;
}

.fleximo-preloader__icon-handle {
  fill: var(--fleximo-gold);
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-preloader__icon {
    animation: fleximoIconPulse 2.2s ease-in-out infinite;
  }

  @keyframes fleximoIconPulse {
    0%, 100% {
      opacity: 0.88;
    }

    50% {
      opacity: 1;
    }
  }
}

.fleximo-preloader.is-hidden .fleximo-preloader__icon {
  animation-play-state: paused;
}

.fleximo-preloader__status {
  margin: 0;
  font-family: var(--font-nav);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fleximo-ivory);
  max-width: 320px;
  padding: 0 24px;
}

.fleximo-preloader__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.fleximo-preloader__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--fleximo-gold);
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-preloader__dot {
    animation: fleximoPreloaderDot 1.2s ease-in-out infinite;
  }

  .fleximo-preloader__dot:nth-child(2) {
    animation-delay: 0.15s;
  }

  .fleximo-preloader__dot:nth-child(3) {
    animation-delay: 0.3s;
  }

  @keyframes fleximoPreloaderDot {
    0%, 100% {
      opacity: 0.3;
    }

    50% {
      opacity: 1;
    }
  }
}

.fleximo-preloader.is-hidden .fleximo-preloader__dot {
  animation-play-state: paused;
}

/* A modest size step-down on the smallest phones — well clear of any
   overflow risk at any width (100px in a 320px+ viewport), this is
   purely a proportion/readability nicety. Icon sizes stay within the
   48-56px (mobile) / 54-64px (desktop) suggested ranges throughout. */
@media (max-width: 767px) {
  .fleximo-preloader__loader {
    width: 92px;
    height: 92px;
  }

  .fleximo-preloader__icon svg {
    width: 37px;
    height: 51px;
  }
}

@media (max-width: 380px) {
  .fleximo-preloader {
    gap: 20px;
  }

  .fleximo-preloader__loader {
    width: 84px;
    height: 84px;
  }

  .fleximo-preloader__icon svg {
    width: 34px;
    height: 47px;
  }

  .fleximo-preloader__status {
    font-size: 0.85rem;
  }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  background-color: var(--color-wood);
  color: var(--color-white);
  border-color: var(--color-wood);
}

.btn--primary:hover {
  background-color: var(--color-wood-dark);
  border-color: var(--color-wood-dark);
  color: var(--color-white);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-wood);
  border-color: var(--color-wood);
}

.btn--outline:hover {
  background-color: var(--color-wood);
  color: var(--color-white);
}

.btn--ghost {
  background-color: rgba(250, 246, 239, 0.08);
  color: var(--color-text-on-dark);
  border-color: rgba(242, 236, 223, 0.5);
  backdrop-filter: blur(2px);
}

.btn--ghost:hover {
  background-color: var(--color-text-on-dark);
  color: var(--color-charcoal);
  border-color: var(--color-text-on-dark);
}

.btn--whatsapp {
  background-color: #2f6e4f;
  color: var(--color-white);
  border-color: #2f6e4f;
}

.btn--whatsapp:hover {
  background-color: #255939;
  border-color: #255939;
}

.btn--large {
  padding: 16px 32px;
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Site Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid (no backdrop-filter): a blurred header used to be the exact
     cause of the mobile drawer rendering as a squashed strip confined
     to the header's own height — backdrop-filter (like transform/
     filter/perspective) makes its element the CSS containing block for
     any position:fixed descendant, so .main-nav's "top:0; bottom:0"
     was resolving against .site-header's ~170px box instead of the
     viewport. Removing it here, rather than restructuring the drawer's
     DOM out from under the header, is the actual fix. */
  background-color: rgba(250, 246, 239, 0.97);
  border-bottom: 1px solid var(--color-border);
}

body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  /* Was justify-content: space-between. With eight top-level links
     that reliably filled most of the row's width, space-between read
     as "logo left, nav right" with only a modest gap in between. Now
     that the nav is just four items (Home, About, Products, Contact
     Us) plus the E-Catalog button, that same rule pinned a much
     narrower block against the far-right edge, leaving a large empty
     gap after the logo instead. flex-start plus .main-nav's own
     margin-left below is the intentional replacement — a controlled,
     fixed gap after the logo rather than however much empty space the
     row happens to have. */
  justify-content: flex-start;
  gap: 20px;
  height: var(--header-height);
  /* Wider than the standard .container so the logo and all nine nav
     links have genuine room on large desktops — the header is
     intentionally allowed to read a little wider than the 1240px
     body content below it. */
  max-width: var(--header-max-width);
}

/* ---- Logo ---- */
.site-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 440px;
  /* Trimmed modestly (was 144px) purely to let the header itself sit a
     little shorter — still clearly the enlarged 2x-scale logo (nearly
     double the original 72px), not a return to its old small size.
     object-fit: contain keeps the aspect ratio exact; nothing here
     crops, stretches or distorts it. */
  max-height: 134px;
  object-fit: contain;
  object-position: left center;
}

.site-logo__text {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-wood-dark);
}

.site-logo__text span {
  color: var(--color-gold);
}

.site-logo--footer {
  padding: 0;
  height: 84px;
}

.site-logo--footer .site-logo__img {
  max-height: 84px;
  object-position: left center;
  /* White-only inside the footer — the header keeps the logo's real
     colours. brightness(0) flattens every opaque pixel to black,
     invert(1) then flips that to white; transparency is untouched, so
     the aspect ratio and silhouette are preserved exactly. Applied
     only via this scoped selector — the source file itself is never
     modified. */
  filter: brightness(0) invert(1);
}

/* ---- Main Navigation ---- */
.main-nav {
  display: flex;
  align-items: center;
  /* Explicit, not just left at its default — guarantees every tap on
     this container and everything inside it (links, the drawer's own
     logo/close button, the Download E-Catalog button) is genuinely
     hit-testable, with nothing able to silently intercept it. */
  pointer-events: auto;
  /* The intentional, controlled gap after the logo (replacing
     .site-header__inner's old space-between, above) — a fixed 60px
     floor and 100px ceiling regardless of how wide the header gets,
     scaling gently in between via viewport width. Reset to 0 at the
     drawer breakpoint below: .main-nav becomes a position:fixed panel
     there, where a left margin has no visual effect anyway, but this
     keeps the rule from carrying a meaningless desktop-only value into
     that context. */
  margin-left: clamp(60px, 6vw, 100px);
}

.main-nav a {
  /* Same guarantee as above, applied directly to every anchor inside
     the nav (not just the plain link rows below) — the drawer logo
     link and the Download E-Catalog button included. */
  pointer-events: auto;
  /* Removes the default translucent grey/white flash mobile WebKit/
     Chrome paint over a tapped link — this is what was producing the
     "light-colour flash" on open/tap, not an actual colour or opacity
     change on the panel itself. Keyboard focus is untouched: the
     sitewide :focus-visible outline rule is a completely separate
     mechanism from this tap-only highlight. */
  -webkit-tap-highlight-color: transparent;
}

.main-nav ul {
  display: flex;
  align-items: center;
  /* Four top-level items now (Home, About, Products, Contact Us) —
     the five WPC product links live inside the Products submenu
     instead of as top-level items, so this row has room to breathe
     that it never had at eight items; the gap below is a deliberate,
     even space repeated between every item, .menu-item-has-children
     included, since nothing gives that <li> any margin of its own. */
  gap: 10px;
}

.main-nav ul a:not(.btn),
.menu-parent-label {
  display: inline-flex;
  align-items: center;
  /* Explicit minimum clickable height (independent of the reduced
     header height above) — the visible text/padding alone would sit
     just under the 44px comfortable tap-target size at this font
     size, so this guarantees the full row height is genuinely
     clickable without needing to inflate the visible padding. Shared
     with .menu-parent-label so "Products" sits on the exact same
     baseline as Home/About/Contact Us despite not being an <a>. */
  min-height: 44px;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
  white-space: nowrap;
}

.main-nav ul a:not(.btn) {
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.main-nav ul a:not(.btn):hover,
.main-nav ul a:not(.btn)[aria-current='page'] {
  color: var(--color-wood-dark);
  background-color: var(--color-ivory-dim);
}

.main-nav ul a:not(.btn)[aria-current='page'] {
  font-weight: 700;
}

/* ==========================================================================
   Products submenu — one shared markup block (rendered once by
   fleximo_fallback_menu(), see header.php) reshaped by CSS alone into
   a desktop hover/click dropdown here, and a mobile tap accordion in
   the "Nav drawer breakpoint" section below. No JS required for a
   functioning, fully keyboard/screen-reader-reachable menu: by
   default .sub-menu is a plain, permanently-expanded nested list
   (every product link always reachable via Tab); script.js's
   initProductsSubmenu() adds .js-enhanced to .menu-item-has-children
   the moment it actually runs, which is what switches these rules
   over to the collapsible dropdown/accordion look. .is-open is the
   JS-driven open/closed state (click, focus, Escape, outside-click);
   :hover is a plain-CSS supplement for desktop pointer users so
   hovering still works even in the unlikely event JS fails after
   having already added .js-enhanced.
   ========================================================================== */
.menu-item-has-children {
  position: relative;
}

.menu-parent-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu-parent-label {
  padding: 10px 0 10px 10px;
}

.menu-parent-label[aria-current='page'] {
  color: var(--color-wood-dark);
  font-weight: 700;
}

/* ---- Chevron toggle: same 44px tall hit area as every other nav
   control, vertically centred so it never sits above/below the
   Products label's own baseline. ---- */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.submenu-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.menu-item-has-children.js-enhanced:hover .submenu-toggle svg,
.menu-item-has-children.is-open .submenu-toggle svg {
  transform: rotate(180deg);
}

/* .main-nav .sub-menu (two classes), not just .sub-menu, so this
   reliably beats .main-nav ul's display:flex/gap (one class + one
   element — lower specificity, but a plain descendant selector that
   still matches #products-submenu too, since it's a <ul> nested
   inside .main-nav same as the top-level one). Without this, the
   dropdown inherited that flex row and rendered as one long
   horizontal strip of product links instead of a compact vertical
   list — the actual cause of the "submenu spans the header" bug. */
.main-nav .sub-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ---- Desktop dropdown (default/base rules — overridden for the
   mobile accordion inside the ≤1365px nav-drawer breakpoint below).
   Positioned flush against Products (top: 100%, no margin) rather
   than offset with a gap, precisely so there is never a dead strip of
   page between the two that a pointer could leave through mid-hover —
   "connected positioning" instead of a separate invisible bridge
   element. The visual breathing room between Products and the card
   comes from this element's own padding instead, which stays inside
   the always-hoverable box. ---- */
.menu-item-has-children.js-enhanced .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 250px;
  padding: 8px;
  background-color: var(--fleximo-ivory);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.menu-item-has-children.js-enhanced:hover .sub-menu,
.menu-item-has-children.js-enhanced.is-open .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .menu-item-has-children.js-enhanced .sub-menu {
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  }

  .menu-item-has-children.js-enhanced:hover .sub-menu,
  .menu-item-has-children.js-enhanced.is-open .sub-menu {
    transform: none;
    transition: opacity 0.15s ease, visibility 0s linear 0s;
  }
}

.sub-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--fleximo-text-dark);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.sub-menu a:hover,
.sub-menu a[aria-current='page'] {
  color: var(--fleximo-green);
  background-color: var(--color-ivory-dim);
}

.sub-menu a[aria-current='page'] {
  font-weight: 700;
}

/* ---- Desktop "E-Catalog" download button — sits between the nav and
   the hamburger on wide screens. Visually distinct from a normal nav
   link (a filled pill, matching .btn--outline) since it downloads the
   PDF directly instead of opening a page. Hidden below the drawer
   breakpoint, where the drawer's own "Download E-Catalog" CTA takes
   over instead. ---- */
.header-catalogue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* .main-nav has no gap of its own (it also serves as the mobile
     drawer's column layout, where a gap would misalign the header/body/
     footer sections) — margin here instead keeps this button clear of
     the last nav link without touching .main-nav's own spacing. */
  margin-left: 16px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-wood);
  color: var(--color-wood);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.header-catalogue svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.header-catalogue:hover {
  background-color: var(--color-wood);
  color: var(--color-white);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .header-catalogue:hover {
    transform: none;
  }
}

/* ---- Desktop-only WhatsApp + social actions, after E-Catalog (see
   header.php: WhatsApp Chat, then Facebook, then Instagram — kept
   close together as one group via the 10px gap below). Hidden below
   the drawer breakpoint exactly like .header-catalogue just above —
   the mobile drawer's own footer already has its own Download
   E-Catalog CTA and is otherwise unaffected by this addition entirely.
   margin-left reuses the exact same clamp() as .main-nav's own
   logo-to-Home gap, so the visual distance separating E-Catalog from
   this group reads the same way that gap does, rather than the
   noticeably tighter 18px it used before this group also contained
   the social icons. ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: clamp(60px, 6vw, 100px);
}

.header-actions__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--fleximo-border);
  color: var(--fleximo-green);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.header-actions__social svg {
  width: 17px;
  height: 17px;
}

.header-actions__social:hover {
  background-color: var(--fleximo-green);
  border-color: var(--fleximo-green);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* Same WhatsApp green already used by the floating WhatsApp widget
   (.floating-actions__btn--whatsapp) — kept consistent rather than
   introducing a second, slightly different "WhatsApp" colour. */
.header-actions__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background-color: #2f6e4f;
  color: var(--color-white);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.header-actions__whatsapp svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.header-actions__whatsapp:hover {
  background-color: #255939;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .header-actions__social:hover,
  .header-actions__whatsapp:hover {
    transform: none;
  }
}

/* ---- Mobile drawer chrome (hidden on desktop; the same <nav> is the
   plain horizontal bar there — see the ≤1365px block for the drawer
   itself). ---- */
.nav-drawer__header,
.nav-drawer__footer {
  display: none;
}

/* Body-scroll lock while the mobile drawer is open. Only ever applied
   while the drawer is actually open (the hamburger that triggers it is
   hidden on desktop), so this is safe to leave unscoped by breakpoint. */
body.nav-open {
  overflow: hidden;
}

/* ---- Dark backdrop behind the mobile drawer ---- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background-color: rgba(18, 22, 19, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay {
    transition: opacity 0s linear, visibility 0s linear;
  }
}

/* ---- Mobile Nav Toggle ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle .bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-charcoal);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded='true'] .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Main Content ---- */
main {
  min-height: 60vh;
}

/* ---- Legacy foundation sections (About / Services / Products / Contact) ---- */
.page-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--color-border);
}

.page-section:last-child {
  border-bottom: none;
}

.page-section h1 {
  font-size: 2rem;
  color: var(--color-wood-dark);
  margin-top: 0;
}

.page-section h2 {
  font-size: 1.4rem;
  color: var(--color-wood-dark);
}

.page-section p {
  color: var(--color-text);
}

/* ==========================================================================
   Section shell + shared typography
   ========================================================================== */
.section {
  padding: 96px 0;
}

.section__intro-row {
  max-width: 720px;
  margin: 0 0 48px;
}

.section__label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 14px;
}

.section__heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--color-wood-dark);
}

/* ==========================================================================
   WPC Hero Slider
   Three-slide product carousel, sharing one markup structure reshaped
   very differently by breakpoint:
   - Mobile (≤767px, unchanged by the split-layout rules further down):
     each slide's photo is a full-bleed background layer (a direct
     child of .wpc-hero__slide, absolutely positioned inset:0) with a
     green gradient overlay and the text content layered on top of it.
   - Desktop/tablet (≥768px, see the "Desktop/tablet: two-column split
     layout" rules below): .wpc-hero__slide becomes a two-column grid —
     centred content on the left half, the same <img> as a normal
     right-half column (object-fit: contain, never cropped) instead of
     a background layer. The straight column seam is replaced by one
     smooth curve (an SVG clipPath defined once in front-page.php,
     #wpcHeroCurveClip) that IS the panel's actual green fill
     (.wpc-hero__slide::before/::after — .wpc-hero__container itself
     carries no background of its own) rather than a tint over the
     photo.
   Fleximo logo colour system throughout (--fleximo-* tokens defined in
   :root); no logo image anywhere in this section.
   Base (mobile) stacking order inside each slide: 1) .wpc-hero__photo
   (background, z-index 0), 2) .wpc-hero__overlay (z-index 1),
   3) .wpc-hero__container (content, z-index 2), 4) .wpc-hero__controls
   (arrows + dots, z-index 3, a single instance shared across all
   slides since it lives outside the track). ---- */
.wpc-hero {
  --wpc-hero-content-width: 46%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--fleximo-green);
}

.wpc-hero__viewport {
  overflow: hidden;
}

.wpc-hero__track {
  display: flex;
  width: 300%;
}

@media (prefers-reduced-motion: no-preference) {
  .wpc-hero__track {
    transition: transform 0.7s var(--ease);
  }
}

.wpc-hero__slide {
  position: relative;
  width: 33.3333%;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Desktop and tablet (>767px — mobile keeps its own separate,
     unrelated min-height formula in the ≤767px block below entirely).
     Sized from viewport WIDTH rather than height: each source photo is
     a 1254x1254 square whose
     actual door (frame to floor) fills roughly 77-84% of that square's
     height — checked per image, not assumed — so on a landscape hero
     box, object-fit: cover's width-driven scaling crops the door's top
     and/or bottom by an amount that depends entirely on how much wider
     the box is than it is tall. A vh-based height doesn't control that
     ratio at all (two screens of the same height but very different
     widths would crop completely differently); this vw-based formula
     keeps the box's own width:height ratio inside a bounded range
     (roughly 1.4:1 at the low end, capped before it gets much more
     landscape than that at very wide viewports) so the doors stay
     fully or almost fully in frame at every common desktop width
     instead of only at whichever one the height was tuned for. The
     900px ceiling is the deliberate limit on how tall this is allowed
     to get on very wide/ultrawide screens — beyond it, a small amount
     of cropping at the extreme top/bottom of the door is an accepted
     trade-off rather than making the hero impractically tall. */
  min-height: clamp(700px, 71vw, 900px);
  /* Each slide's own focal-point pair (used by .wpc-hero__photo below).
     Desktop hero boxes are always landscape (wider than the square
     source image), so object-fit: cover matches width exactly and
     crops top/bottom — the Y value is what keeps the door in frame.
     Mobile hero boxes are portrait, so cover matches height exactly and
     crops left/right instead — the X value matters there. Set per
     slide, never reused blindly, since each photo frames its door
     slightly differently. */
  --hero-position-desktop: center center;
  --hero-position-mobile: 65% center;
}

/* ---- Desktop object-position Y per slide: the vertical midpoint of
   each photo's actual door-plus-frame span, measured individually by
   inspecting each image (not one shared value) —
   Plain: door spans roughly 7.5-84.5% of the frame height, midpoint
     ~46%.
   Carving: spans roughly 7.5-87%, midpoint ~47%.
   Digital: spans roughly 3.5-87% (its frame sits noticeably closer to
     the top of its photo than the other two), midpoint ~45%.
   Centring the crop window on the door's own midpoint means that as
   the hero's height grows via the clamp() above, more of the door
   becomes visible symmetrically from its centre outward — the closest
   a single value can get to "fully visible" across a range of widths,
   rather than a fixed offset that only happens to work at one exact
   height. ---- */
.wpc-hero__slide--plain {
  --hero-position-desktop: center 46%;
  --hero-position-mobile: 62% center;
}

.wpc-hero__slide--carving {
  --hero-position-desktop: center 47%;
  --hero-position-mobile: 66% center;
}

.wpc-hero__slide--digital {
  --hero-position-desktop: center 45%;
  --hero-position-mobile: 60% center;
}

/* ---- Full-bleed background photo. Decorative only (alt="" +
   aria-hidden on the <img> itself in the markup) — the accessible name
   for each slide comes entirely from the text content below, never the
   image. ---- */
.wpc-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position-desktop);
  display: block;
}

@media (max-width: 767px) {
  .wpc-hero__photo {
    object-position: var(--hero-position-mobile);
  }
}

/* ---- Controlled overlay: a left-to-right Fleximo-green gradient so the
   content column (left-aligned) sits over a solid, readable field while
   the product itself stays clearly visible toward the right. Never a
   flat full-strength tint.
   Desktop/tablet stops (mobile has its own separate top-to-bottom
   version below, untouched): the door sits at roughly 40-75% of the
   slide's full width once the whole photo is shown edge to edge, so
   this fades out well before that — strong only behind the text
   column itself (0-24%), then drops quickly through the transition
   zone and is fully transparent by 52%, instead of the previous
   gradient which was still ~35-60% opaque across most of the door's
   own position and visibly dimmed it. ---- */
.wpc-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(10, 40, 22, 0.86) 0%,
    rgba(10, 40, 22, 0.62) 24%,
    rgba(10, 40, 22, 0.22) 38%,
    rgba(10, 40, 22, 0.05) 46%,
    rgba(10, 40, 22, 0) 52%
  );
}

@media (max-width: 767px) {
  .wpc-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(9, 36, 20, 0.9) 0%,
      rgba(10, 42, 23, 0.78) 45%,
      rgba(10, 42, 23, 0.66) 100%
    );
  }
}

.wpc-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ---- Content column: vertically centred (via .wpc-hero__slide's own
   flex), left-aligned, capped to a readable measure so it never spans
   into the calmer right-hand area of the photo on mobile. At ≥768px
   this max-width is overridden to fill the left grid column instead —
   see the "Desktop/tablet: two-column split layout" rules below. ---- */
.wpc-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--wpc-hero-content-width);
  display: flex;
  flex-direction: column;
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Small decorative accent — three muted gold dots, never a logo. */
.wpc-hero__accent {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
}

.wpc-hero__accent i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--fleximo-gold);
  font-style: normal;
}

.wpc-hero__accent i:nth-child(2) {
  opacity: 0.65;
}

.wpc-hero__accent i:nth-child(3) {
  opacity: 0.35;
}

.wpc-hero__label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin-bottom: 16px;
}

.wpc-hero__heading {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 18px;
}

.wpc-hero__desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 30px;
  max-width: 46ch;
}

.wpc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.wpc-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.wpc-hero__btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.wpc-hero__btn:hover {
  transform: translateY(-2px);
}

.wpc-hero__btn--primary {
  background-color: var(--fleximo-green);
  border-color: var(--fleximo-green);
  color: var(--color-white);
}

.wpc-hero__btn--primary:hover {
  background-color: #0d331a;
  border-color: #0d331a;
}

.wpc-hero__btn--whatsapp {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

.wpc-hero__btn--whatsapp:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--fleximo-green);
}

@media (prefers-reduced-motion: reduce) {
  .wpc-hero__btn:hover {
    transform: none;
  }
}

/* ---- Subtle, slow "Ken Burns" style zoom on the active slide's photo
   only — never continuous/looping, disabled entirely under
   prefers-reduced-motion: reduce. ---- */
@media (prefers-reduced-motion: no-preference) {
  .wpc-hero__photo {
    transform: scale(1);
    transition: transform 7s var(--ease);
  }

  .wpc-hero__slide.is-active .wpc-hero__photo {
    transform: scale(1.03);
  }
}

/* ---- Subtle content entrance animation on the active slide only;
   fully disabled under prefers-reduced-motion (no opacity/transform
   applied at all there, so content is simply visible immediately —
   including on first paint if JavaScript never runs). ---- */
@media (prefers-reduced-motion: no-preference) {
  .wpc-hero__content > * {
    opacity: 0;
    transform: translateY(14px);
  }

  .wpc-hero__slide.is-active .wpc-hero__content > * {
    animation: wpcHeroContentIn 0.6s var(--ease) forwards;
  }

  .wpc-hero__slide.is-active .wpc-hero__content > *:nth-child(1) {
    animation-delay: 0.05s;
  }

  .wpc-hero__slide.is-active .wpc-hero__content > *:nth-child(2) {
    animation-delay: 0.12s;
  }

  .wpc-hero__slide.is-active .wpc-hero__content > *:nth-child(3) {
    animation-delay: 0.19s;
  }

  .wpc-hero__slide.is-active .wpc-hero__content > *:nth-child(4) {
    animation-delay: 0.26s;
  }

  .wpc-hero__slide.is-active .wpc-hero__content > *:nth-child(5) {
    animation-delay: 0.33s;
  }

  @keyframes wpcHeroContentIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---- Controls: a single instance (arrows + dots) shared across all
   three slides, living outside .wpc-hero__track so it never scrolls
   with the slides. inset:0 gives it the same coordinate space as
   .wpc-hero itself; pointer-events is re-enabled per child so the
   transparent gaps between them stay click-through. Sits above the
   content layer (z-index 3), satisfying the required background →
   overlay → content → controls stacking order. ---- */
.wpc-hero__controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.wpc-hero__controls > * {
  pointer-events: auto;
}

/* ---- Arrows: vertically centred on the section. This base left
   offset is mobile-irrelevant in practice (the ≤767px block further
   down repositions arrows to the bottom corners entirely) and is
   itself overridden again at ≥768px to sit just past the new 50/50
   column split — see the "Desktop/tablet: two-column split layout"
   rules below. Kept here mainly as the pre-≥768px fallback. ---- */
.wpc-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(20, 76, 38, 0.4);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.wpc-hero__arrow svg {
  width: 22px;
  height: 22px;
}

.wpc-hero__arrow:hover {
  background-color: rgba(20, 76, 38, 0.65);
}

.wpc-hero__arrow--prev {
  left: calc(var(--wpc-hero-content-width) + 20px);
}

.wpc-hero__arrow--next {
  right: 20px;
}

/* ---- Dots: centred along the bottom edge, clear of the arrows and of
   the CTA row above them (content keeps a matching bottom padding
   reserve on mobile so the two never collide). ---- */
.wpc-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.wpc-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wpc-hero__dot.is-active {
  background-color: var(--fleximo-gold);
  border-color: var(--fleximo-gold);
  transform: scale(1.2);
}

/* ==========================================================================
   Desktop/tablet: two-column split layout (≥768px)
   Reshapes the exact same markup mobile uses (photo, overlay,
   container/content — nothing added or removed) into a clean 50/50
   grid: content on the left, the photo as a normal right-side column
   instead of a full-bleed background. Scoped to min-width: 768px, the
   precise complement of the ≤767px mobile breakpoint used everywhere
   else in this component, so these rules can never reach mobile and
   the ≤767px rules can never reach this range — no overlap either way.

   object-fit: contain (not cover) on the photo is deliberate: the
   task's hard requirement is that the complete door is visible with
   nothing important cut, and the hero's height is intentionally NOT
   being increased to make room for it. On a source image this tall
   relative to a half-width column at some of the required widths
   (notably 768-1024px, where the column is noticeably narrower than
   it is tall), object-fit: cover would need to crop the sides of the
   photo — potentially into the door itself — to fill the box edge to
   edge. contain guarantees the entire photo, and therefore the entire
   door, is always shown at every width, at the cost of a soft
   letterboxed margin (filled with the ivory background below, not
   raw white/transparent) rather than an edge-to-edge photo on the
   narrower end of this range. No per-slide object-position tuning is
   needed here the way the mobile background layer requires it: with
   contain nothing is ever cropped regardless of where the door sits
   within its own square photo, so a single centred position already
   works correctly for all three slides. ---- */
@media (min-width: 768px) {
  .wpc-hero__slide {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: stretch;
  }

  /* Purely a content-positioning wrapper now — no background colour
     of its own. The curve layer further down (.wpc-hero__slide::after)
     is the ONLY source of the panel's green fill, since it needs to
     draw the panel's real shape (including the narrower finish near
     the bottom), not just a flat 0-50% rectangle sitting in front of
     it and hiding that shape. position: relative + the base rule's
     z-index: 2 is what keeps the actual content above that curve
     layer (z-index: 1) — unrelated to background. Existing white/gold
     text colours are kept exactly as they are (they already read
     correctly against the deep green curve), rather than switching to
     a cream panel that would force also rewriting every text colour
     in this component. */
  .wpc-hero__container {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Content group: capped to a comfortable measure and centred both
     ways within the left panel — horizontally via the container's own
     justify-content: center above (since this is no longer width:
     100%, it has real room to be centred in), vertically already
     covered by align-items: center on the same container.
     align-items: center here (a column flex) centres the eyebrow/
     heading/CTA row as a block within that measure; text-align:
     center cascades to the label/heading/paragraph text itself so
     wrapped lines are centred too, not just the block as a whole. */
  .wpc-hero__content {
    /* Widened from 480px so the longest heading line at this
       breakpoint's font size ("Distinctive Entrances.") comfortably
       fits on one line without wrapping again inside its own span —
       see .wpc-hero__heading-line below. Harmless where the grid
       column itself is narrower than this (≤1024px — the tablet
       tier further down applies its own smaller heading font-size for
       exactly that width range), since max-width can never exceed the
       parent's own available width regardless of this value. */
    max-width: 580px;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  /* ---- Heading: forced two-line layout (desktop/tablet only).
     Each heading's markup (front-page.php) is already split into two
     .wpc-hero__heading-line spans at its natural sentence break —
     this is the only rule that turns that into an actual two-line
     result, by putting each span on its own line; below this
     breakpoint the spans stay inline (the default for a span), so
     mobile keeps flowing and wrapping the text exactly as one
     sentence, same as before this change. ---- */
  .wpc-hero__heading-line {
    display: block;
  }

  .wpc-hero__ctas {
    justify-content: center;
  }

  .wpc-hero__photo {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* Fills any letterboxed margin left/right or top/bottom by
       contain — the photos' own light interior backdrops already sit
       close to this tone, so the join reads as intentional rather
       than as empty space. */
    background-color: var(--fleximo-ivory);
  }

  /* No tint of any kind over the photo — the previous soft seam blend
     is retired the same way the earlier wave version already retired
     it; the curve below is what marks the transition now. Kept as an
     empty layer (still present, still pointer-events: none) rather
     than removed outright, since removing the element would need a
     markup change this task doesn't call for. */
  .wpc-hero__overlay {
    grid-column: 1 / -1;
    grid-row: 1;
    background: none;
  }

  /* ---- Centre curve: one genuinely smooth curve (defined once as an
     SVG clipPath in front-page.php — #wpcHeroCurveClip — via a
     Catmull-Rom-through-waypoints construction, not a CSS polygon()
     approximation or a single hand-guessed cubic), referenced here by
     both layers, and now the ONLY source of the panel's green fill
     (see .wpc-hero__container above — its own background was removed
     specifically so this shape's real silhouette shows, rather than
     being flattened by a rectangle sitting in front of it).
     Shape: wide at the very top (53%, briefly easing out to 58% just
     below it), holding a comfortably wide, gently-eased plateau
     (roughly 52-58%) through the entire middle of the height — this
     is deliberately where the vertically-centred text sits — then
     sweeping into a real, unmasked taper only in the final ~20% of
     the height, finishing at 35% near the bottom-centre. One
     unbroken curve throughout: matching tangents at every internal
     waypoint (the Catmull-Rom construction guarantees this) is what
     keeps it reading as a single sweep with no visible kink, not
     multiple joined pieces, an S-bend, a wave or a circular cut-out.
     clipPathUnits="objectBoundingBox" on the SVG side is what lets a
     handful of 0-1 path coordinates stay correct at any hero height
     the clamp() formula produces, or any viewport width in this
     range, the same way a CSS percentage would — a plain CSS
     clip-path: path(...) cannot do this, since its coordinates are
     fixed pixels that do not rescale with the element's own box.
     Content safety is verified by calculation, not assumed: at every
     tested width (768-1920px), .wpc-hero__content's own actual right
     edge (accounting for its 580px cap, .container's 24px padding and
     how far it naturally shrinks on a narrower column) sits at least
     ~4 percentage points of the slide's width inside the curve's
     narrowest point across the whole text-bearing middle section —
     the tightest case, 1024px, still clears by roughly 43px. Two
     layers of the identical clip, the gold one nudged 3px right, give
     "a very subtle warm-gold edge highlight along the curve" without
     a separate stroke technique. Purely decorative: inert to
     pointer/keyboard interaction, sits below the arrows/dots
     (z-index 3) and the text content (z-index 2), above the photo
     (z-index 0) only. ---- */
  .wpc-hero__slide::before,
  .wpc-hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    clip-path: url(#wpcHeroCurveClip);
  }

  .wpc-hero__slide::before {
    background-color: var(--fleximo-gold);
    transform: translateX(3px);
  }

  .wpc-hero__slide::after {
    background-color: var(--fleximo-green);
  }

  /* The arrows sit vertically centred on the whole slide (top: 50%,
     from the base rule) — exactly where this curve's own plateau
     reaches its widest, around 53-58% of the slide's width (see that
     rule's own comment). A plain 50% + 20px offset would put the
     arrow's own edge inside the curve's green fill at that height;
     56% clears the plateau with a couple of percentage points to
     spare, and the added 16px is just normal breathing room on top of
     that, the same way the previous fixed offset worked. */
  .wpc-hero__arrow--prev {
    left: calc(56% + 16px);
  }

  .wpc-hero__arrow--next {
    right: 20px;
  }
}

/* ==========================================================================
   WPC Introduction (Doors, Boards & Frames)
   The post-hero editorial section: a large square product photo with a
   deep Fleximo-green content panel overlapping its edge — a distinct
   catalogue-style composition, not a reuse of the old side-by-side
   text/image layout. Fleximo logo colour system throughout.
   ========================================================================== */
.wpc-intro__row {
  position: relative;
}

.wpc-intro__media {
  position: relative;
  width: 56%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background-color: var(--fleximo-ivory);
}

.wpc-intro__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Content panel: deep Fleximo-green, overlapping the image's
   right edge slightly for a premium catalogue/editorial look. One
   thin vertical gold line is the only geometric accent — no curves,
   circles or extra floating boxes. ---- */
.wpc-intro__panel {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  width: 48%;
  padding: 48px 44px 48px 56px;
  background-color: var(--fleximo-green);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 34px 64px -28px rgba(20, 76, 38, 0.5);
}

.wpc-intro__panel::before {
  content: '';
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 24px;
  width: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
}

.wpc-intro__label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin: 0 0 14px;
}

.wpc-intro__heading {
  font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.3rem);
  color: var(--color-white);
  margin: 0 0 18px;
}

.wpc-intro__copy {
  color: var(--color-text-on-dark-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 26px;
}

/* ---- Product identifiers: small labels only, separated by subtle
   gold dots — never individual cards or descriptions. ---- */
.wpc-intro__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-text-on-dark);
}

.wpc-intro__tags li:not(:first-child) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wpc-intro__tags li:not(:first-child)::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--fleximo-gold);
}

.wpc-intro__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.wpc-intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.wpc-intro__btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.wpc-intro__btn:hover {
  transform: translateY(-2px);
}

.wpc-intro__btn--primary {
  background-color: var(--fleximo-gold);
  border-color: var(--fleximo-gold);
  color: var(--fleximo-green);
}

.wpc-intro__btn--primary:hover {
  background-color: #e6bd6e;
  border-color: #e6bd6e;
}

.wpc-intro__btn--whatsapp {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}

.wpc-intro__btn--whatsapp:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .wpc-intro__btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   WPC Product Categories (Doors, Boards, Frames)
   Three image-led cards sharing one combined product photograph
   (assets/images/"WPC - Door,Board , Frame.png"), each panned to a
   different focal point via an oversized, absolutely-positioned <img>
   inside an overflow:hidden media box — object-position alone can't
   isolate a horizontal slice of a perfectly square source inside a
   landscape (wider-than-tall) box, since cover always fits a square
   image to such a box by width with no horizontal overflow to crop;
   sizing the <img> well past 100% and translating it is what creates a
   genuine pannable window. Reuses the site's existing .reveal /
   initScrollReveal() IntersectionObserver for the scroll-in animation
   (no second observer) — only the stagger delay and the no-JS
   <noscript> fallback are new, both added in front-page.php/CSS only.
   ========================================================================== */
.wpc-cat {
  background-color: var(--fleximo-ivory);
}

.wpc-cat__intro {
  max-width: 640px;
  margin: 0 0 48px;
}

.wpc-cat__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin-bottom: 14px;
}

.wpc-cat__heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--fleximo-green);
  margin-bottom: 16px;
}

.wpc-cat__desc {
  color: var(--fleximo-text-muted);
  font-size: 1.05rem;
  max-width: 60ch;
}

.wpc-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.wpc-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* The shared .reveal rule (elsewhere in this file) also sets a
   `transition` shorthand on this same element for its scroll-in fade;
   since a later shorthand fully replaces an earlier one at equal
   specificity, the hover transition here is combined onto the higher-
   specificity ".wpc-cat-card.reveal" instead of split across two
   competing single-class rules — this way both the fade-in and the
   hover lift/shadow/border animate correctly regardless of source
   order. */
.wpc-cat-card.reveal {
  transition: opacity 0.7s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.wpc-cat-card:hover,
.wpc-cat-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--fleximo-gold);
}

/* ---- Media: a landscape display box (drives the ~58-62%-of-card
   proportion) with a much larger square <img> panned inside it — see
   the section comment above for why this is necessary. The clipping
   (overflow:hidden) lives on the nested __media-clip wrapper, not on
   __media itself, so __number can overlap out of the image area at
   the bottom without being cut off by that same clip. ---- */
.wpc-cat-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background-color: var(--fleximo-ivory);
}

.wpc-cat-card__media-clip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.wpc-cat-card__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 320%;
  max-width: none;
  display: block;
}

/* Checked visually against the source photo: boards sit in the left
   third, the door is centred, frames sit in the right third. */
.wpc-cat-card__img--doors {
  transform: translate(-50%, -50%);
}

.wpc-cat-card__img--boards {
  transform: translate(-20%, -50%);
}

.wpc-cat-card__img--frames {
  transform: translate(-80%, -50%);
}

@media (prefers-reduced-motion: no-preference) {
  .wpc-cat-card__img {
    transition: transform 0.5s var(--ease);
  }

  .wpc-cat-card:hover .wpc-cat-card__img--doors,
  .wpc-cat-card:focus-visible .wpc-cat-card__img--doors {
    transform: translate(-50%, -50%) scale(1.08);
  }

  .wpc-cat-card:hover .wpc-cat-card__img--boards,
  .wpc-cat-card:focus-visible .wpc-cat-card__img--boards {
    transform: translate(-20%, -50%) scale(1.08);
  }

  .wpc-cat-card:hover .wpc-cat-card__img--frames,
  .wpc-cat-card:focus-visible .wpc-cat-card__img--frames {
    transform: translate(-80%, -50%) scale(1.08);
  }
}

/* ---- Category number: overlaps the image/content boundary. ---- */
.wpc-cat-card__number {
  position: absolute;
  left: 24px;
  bottom: -18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--fleximo-green);
  color: var(--fleximo-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 18px -8px rgba(20, 76, 38, 0.5);
}

.wpc-cat-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 32px 24px 28px;
}

/* Subtle gold accent line — a slightly different width per card so the
   three feel individually considered while staying one clear system. */
.wpc-cat-card__accent {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
  margin-bottom: 16px;
}

.wpc-cat-card:nth-child(2) .wpc-cat-card__accent {
  width: 44px;
}

.wpc-cat-card:nth-child(3) .wpc-cat-card__accent {
  width: 30px;
}

.wpc-cat-card__title {
  font-size: 1.2rem;
  color: var(--fleximo-green);
  margin-bottom: 10px;
}

.wpc-cat-card__desc {
  color: var(--fleximo-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 20px;
}

.wpc-cat-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--fleximo-gold);
}

.wpc-cat-card__link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.wpc-cat-card:hover .wpc-cat-card__link svg,
.wpc-cat-card:focus-visible .wpc-cat-card__link svg {
  transform: translateX(4px);
}

/* ---- Stagger the scroll-reveal: Doors, then Boards, then Frames.
   Only transition-delay is set here — the shared opacity/transform
   transition itself still comes from the sitewide .reveal rule. ---- */
@media (prefers-reduced-motion: no-preference) {
  .wpc-cat-grid .wpc-cat-card:nth-child(1) {
    transition-delay: 0s;
  }

  .wpc-cat-grid .wpc-cat-card:nth-child(2) {
    transition-delay: 0.12s;
  }

  .wpc-cat-grid .wpc-cat-card:nth-child(3) {
    transition-delay: 0.24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpc-cat-card:hover,
  .wpc-cat-card:focus-visible {
    transform: none;
  }

  .wpc-cat-card:hover .wpc-cat-card__link svg,
  .wpc-cat-card:focus-visible .wpc-cat-card__link svg {
    transform: none;
  }
}

/* ==========================================================================
   Why Fleximo (WPC benefits)
   Asymmetric two-column layout on a light Fleximo-ivory ground —
   replaces the old dark full-bleed "Why Choose Fleximo" band entirely.
   Fleximo logo colour system throughout.
   ========================================================================== */
.wpc-why {
  background-color: var(--fleximo-ivory);
}

.wpc-why__row {
  display: flex;
  align-items: center;
  gap: 64px;
}

/* ---- Left content panel ---- */
.wpc-why__content {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  padding-left: 26px;
}

.wpc-why__accent {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
}

.wpc-why__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin-bottom: 14px;
}

.wpc-why__heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--fleximo-green);
  margin-bottom: 18px;
}

.wpc-why__desc {
  color: var(--fleximo-text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 30px;
}

.wpc-why__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 13px 26px;
  border-radius: 999px;
  background-color: var(--fleximo-green);
  border: 1.5px solid var(--fleximo-gold);
  color: var(--color-white);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.wpc-why__cta svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.wpc-why__cta:hover,
.wpc-why__cta:focus-visible {
  background-color: #0d331a;
  transform: translateY(-2px);
}

.wpc-why__cta:hover svg,
.wpc-why__cta:focus-visible svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .wpc-why__cta:hover,
  .wpc-why__cta:focus-visible {
    transform: none;
  }

  .wpc-why__cta:hover svg,
  .wpc-why__cta:focus-visible svg {
    transform: none;
  }
}

/* ---- Right benefits panel ---- */
.wpc-why__panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* A very subtle pale green/gold shape behind the list — low enough
   opacity to stay well clear of any text-contrast concerns. */
.wpc-why__panel::before {
  content: '';
  position: absolute;
  inset: -28px -20px;
  background: linear-gradient(155deg, rgba(20, 76, 38, 0.05) 0%, rgba(211, 156, 57, 0.07) 100%);
  border-radius: 56px;
  z-index: 0;
  pointer-events: none;
}

.wpc-why__benefits {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 8px 12px;
}

.wpc-why__line {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 50px;
  width: 1.5px;
  background-color: rgba(211, 156, 57, 0.35);
  z-index: 0;
}

.wpc-why__benefit {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: 20px;
}

.wpc-why__icon-wrap {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--fleximo-ivory);
  border: 1.5px solid var(--fleximo-gold);
  color: var(--fleximo-gold);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.wpc-why__icon {
  display: inline-flex;
}

.wpc-why__icon svg {
  width: 24px;
  height: 24px;
}

.wpc-why__benefit:hover .wpc-why__icon-wrap {
  background-color: var(--fleximo-gold);
  color: var(--color-white);
}

.wpc-why__benefit-title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fleximo-green);
  margin-bottom: 6px;
}

.wpc-why__benefit-desc {
  color: var(--fleximo-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- Scroll-in animation: reuses the sitewide .reveal /
   initScrollReveal() IntersectionObserver (no second observer). These
   modifier classes only change WHICH transform each element animates
   from — the fade-in mechanics (JS-toggled .is-visible, one-time
   trigger, prefers-reduced-motion guard) all come from the shared
   .reveal rule. ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal.reveal--left {
    transform: translateX(-32px);
  }

  .reveal.reveal--left.is-visible {
    transform: translateX(0);
  }

  /* Mirror of .reveal--left, for content that should slide in from the
     opposite side (e.g. the About page's image-left/content-right
     "Who We Are" section). Same sitewide .reveal / initScrollReveal()
     mechanics — only the starting transform differs. */
  .reveal.reveal--right {
    transform: translateX(32px);
  }

  .reveal.reveal--right.is-visible {
    transform: translateX(0);
  }

  .reveal.reveal--line {
    opacity: 1;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    transition: transform 0.9s var(--ease);
  }

  .reveal.reveal--line.is-visible {
    transform: translateX(-50%) scaleY(1);
  }

  /* Doors-style stagger: each benefit row fades up a little after the
     previous one. */
  .wpc-why__benefits .wpc-why__benefit:nth-child(2) {
    transition-delay: 0.1s;
  }

  .wpc-why__benefits .wpc-why__benefit:nth-child(3) {
    transition-delay: 0.2s;
  }

  .wpc-why__benefits .wpc-why__benefit:nth-child(4) {
    transition-delay: 0.3s;
  }

  .wpc-why__benefits .wpc-why__benefit:nth-child(5) {
    transition-delay: 0.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpc-why__line {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   Fleximo 360° WPC Showroom (Pannellum panorama viewer)
   Namespace: .fleximo-showroom. A genuine 2:1 equirectangular photo
   (assets/images/fleximo-360-showroom.png) rendered with the Pannellum
   library (assets/vendor/pannellum/, loaded only on the front page).
   Pannellum owns the panorama canvas, drag/zoom/rotate math and its
   own control bar inside #fleximoPano; everything below only styles
   that container's frame plus our own custom hotspot markers and info
   panel, layered above it with z-index. z-index ladder inside the
   viewer: pano/Pannellum controls (default stacking) < hint (2) <
   panel (4) — kept low deliberately so sitewide fixed elements (the
   mobile drawer at 200, nav overlay at 150, floating actions at 120)
   always still win if they ever visually coincide with this section.
   ========================================================================== */
.fleximo-showroom__intro {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.fleximo-showroom__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin-bottom: 14px;
}

.fleximo-showroom__heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--fleximo-green);
  margin-bottom: 16px;
}

.fleximo-showroom__desc {
  color: var(--fleximo-text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ---- Viewer frame ---- */
.fleximo-showroom__viewer {
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  height: 560px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(211, 156, 57, 0.5);
  box-shadow: 0 40px 80px -40px rgba(20, 76, 38, 0.45);
  overflow: hidden;
  background-color: var(--fleximo-green);
}

.fleximo-showroom__pano {
  position: absolute;
  inset: 0;
}

/* ---- Pannellum control-bar re-skin: brand colours instead of the
   library default, without touching the vendor CSS file itself or its
   positioning — Pannellum's own zoom/fullscreen controls sit top-left
   by default (.pnlm-controls-container), which is deliberately left
   alone here rather than moved to a bottom corner: the global floating
   WhatsApp/Catalogue buttons are always fixed bottom-right, so keeping
   these controls at their native top-left spot guarantees the two can
   never visually collide on any screen size. ---- */
.fleximo-showroom__pano .pnlm-control {
  background-color: rgba(13, 26, 18, 0.55);
  border-radius: 6px;
}

.fleximo-showroom__pano .pnlm-control:hover {
  background-color: rgba(211, 156, 57, 0.85);
}

.fleximo-showroom__pano .pnlm-load-box {
  display: none; /* replaced by our own branded .fleximo-showroom__loading */
}

.fleximo-showroom__pano .pnlm-hotspot-base {
  z-index: 1;
}

/* ---- Loading state ---- */
.fleximo-showroom__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: var(--fleximo-green);
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.fleximo-showroom__loading[hidden] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  display: flex; /* keep transitioning out instead of vanishing instantly */
  pointer-events: none;
}

.fleximo-showroom__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--fleximo-gold);
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-showroom__spinner {
    animation: fleximoShowroomSpin 0.9s linear infinite;
  }
}

@keyframes fleximoShowroomSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- "Drag to look around" hint — fades out after the first
   interaction (script.js adds .is-hidden to the viewer). ---- */
.fleximo-showroom__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: rgba(13, 26, 18, 0.55);
  color: var(--color-white);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.fleximo-showroom__hint span {
  color: rgba(255, 255, 255, 0.5);
  margin: 0 2px;
}

.fleximo-showroom__viewer.is-hinted .fleximo-showroom__hint {
  opacity: 0;
}

/* ---- Custom hotspot marker (rendered into Pannellum's hotspot div
   via createTooltipFunc in script.js — Pannellum itself only computes
   the yaw/pitch -> screen position). ---- */
.fleximo-showroom__hotspot {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fleximo-showroom__hotspot-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--fleximo-gold);
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

.fleximo-showroom__hotspot-pulse {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(211, 156, 57, 0.55);
}

.fleximo-showroom__hotspot:hover .fleximo-showroom__hotspot-dot,
.fleximo-showroom__hotspot:focus-visible .fleximo-showroom__hotspot-dot,
.fleximo-showroom__hotspot[aria-expanded='true'] .fleximo-showroom__hotspot-dot {
  transform: scale(1.2);
}

.fleximo-showroom__hotspot:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-showroom__hotspot-pulse {
    animation: fleximoShowroomPulse 2.4s ease-out infinite;
  }

  @keyframes fleximoShowroomPulse {
    0% {
      transform: scale(0.6);
      opacity: 0.55;
    }
    80%,
    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-showroom__hotspot-pulse {
    display: none;
  }
}

/* ---- Info panel: a compact popover near the hotspot on desktop
   (positioned via inline left/top set by script.js, clamped inside the
   viewer); becomes a bottom sheet on mobile — see the mobile
   breakpoint below. ---- */
.fleximo-showroom__panel {
  position: absolute;
  z-index: 4;
  width: 272px;
  max-width: calc(100% - 32px);
  padding: 20px 22px 22px;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  box-shadow: 0 24px 48px -20px rgba(20, 76, 38, 0.4);
}

.fleximo-showroom__panel[hidden] {
  display: none;
}

.fleximo-showroom__panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--fleximo-text-muted);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fleximo-showroom__panel-close svg {
  width: 16px;
  height: 16px;
}

.fleximo-showroom__panel-close:hover {
  background-color: var(--fleximo-ivory);
}

.fleximo-showroom__panel-title {
  font-size: 1.05rem;
  color: var(--fleximo-green);
  margin: 0 24px 8px 0;
}

.fleximo-showroom__panel-desc {
  color: var(--fleximo-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 14px;
}

.fleximo-showroom__panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--fleximo-gold);
}

.fleximo-showroom__panel-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.fleximo-showroom__panel-link:hover svg {
  transform: translateX(4px);
}

/* ---- Reveal (scale-in) modifier, reusing the sitewide .reveal /
   initScrollReveal() IntersectionObserver — no second reveal observer. ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal.reveal--scale {
    opacity: 0;
    transform: scale(0.98);
  }

  .reveal.reveal--scale.is-visible {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- Fallback (shown only if Pannellum/the panorama fails to load,
   or if JavaScript is disabled entirely — see the <noscript> in
   front-page.php). Not part of the normal experience. ---- */
.fleximo-showroom__fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background-color: var(--fleximo-ivory);
}

.fleximo-showroom__fallback[hidden] {
  display: none;
}

.fleximo-showroom__fallback-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.fleximo-showroom__fallback-msg {
  color: var(--fleximo-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.fleximo-showroom__fallback-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fleximo-showroom__fallback-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--fleximo-border);
  background-color: var(--color-white);
  color: var(--fleximo-green);
  font-weight: 700;
  font-size: 0.88rem;
}

.fleximo-showroom__fallback-links a:hover {
  border-color: var(--fleximo-gold);
  background-color: rgba(211, 156, 57, 0.08);
}

.fleximo-showroom__fallback-links svg {
  width: 18px;
  height: 18px;
  color: var(--fleximo-gold);
}

/* ---- Contact CTA below the viewer: a separate area, outside
   .fleximo-showroom__viewer entirely, so it never overlaps the
   panorama canvas, Pannellum's own controls, or the hotspot info
   panel. ---- */
.fleximo-showroom__contact {
  max-width: 1180px;
  margin: 28px auto 0;
  padding: 0 12px;
  text-align: center;
}

.fleximo-showroom__contact-text {
  color: var(--fleximo-text-dark);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 18px;
}

.fleximo-showroom__contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 30px;
  border-radius: 999px;
  background-color: var(--fleximo-green);
  border: 1.5px solid var(--fleximo-green);
  color: var(--color-white);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fleximo-showroom__contact-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--fleximo-gold);
}

.fleximo-showroom__contact-icon svg {
  width: 18px;
  height: 18px;
}

.fleximo-showroom__contact-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.fleximo-showroom__contact-btn:hover {
  background-color: #0d331a;
  border-color: #0d331a;
  transform: translateY(-2px);
}

.fleximo-showroom__contact-btn:hover .fleximo-showroom__contact-arrow {
  transform: translateX(4px);
}

.fleximo-showroom__contact-btn:focus-visible {
  outline: 2px solid var(--fleximo-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-showroom__contact-btn:hover {
    transform: none;
  }

  .fleximo-showroom__contact-btn:hover .fleximo-showroom__contact-arrow {
    transform: none;
  }
}

/* ==========================================================================
   Process timeline (From Requirement to Installation)
   Namespace: .fleximo-process. A connected horizontal timeline on
   desktop/tablet — a continuous line running through 4 circular
   markers, each with its own connector segment reaching to the next
   step — collapsing to a vertical timeline (line on the left, markers
   on it, content to the right) at the mobile breakpoint. Fleximo logo
   colour system throughout.
   ========================================================================== */
.fleximo-process__intro {
  max-width: 640px;
  margin: 0 0 48px;
}

.fleximo-process__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin-bottom: 14px;
}

.fleximo-process__heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--fleximo-green);
  margin-bottom: 16px;
}

.fleximo-process__desc {
  color: var(--fleximo-text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.fleximo-process__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.fleximo-process__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 26px;
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* One connector per gap (steps 1-3 have one, step 4 doesn't) — sized
   relative to its own step's box so it works regardless of the
   timeline's actual rendered width, and reaches exactly to the next
   marker's edge across the flex gap. */
.fleximo-process__connector {
  position: absolute;
  /* Marker top = the step's own 28px top padding; marker centre = that
     plus half its 54px height (27px) = 55px; minus half the line's own
     2px thickness centres the line exactly on the marker. */
  top: 54px;
  left: calc(50% + 27px);
  width: calc(100% + 32px - 54px);
  height: 2px;
  background-color: var(--fleximo-green);
  z-index: 0;
  transform-origin: left;
}

.fleximo-process__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--fleximo-ivory);
  border: 2px solid var(--fleximo-gold);
  color: var(--fleximo-green);
  margin-bottom: 18px;
}

.fleximo-process__marker svg {
  width: 24px;
  height: 24px;
}

.fleximo-process__step-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fleximo-process__step-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin-bottom: 8px;
}

.fleximo-process__step-title {
  font-size: 1.08rem;
  color: var(--fleximo-green);
  margin-bottom: 8px;
}

.fleximo-process__step-desc {
  color: var(--fleximo-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---- Scroll-reveal: reuses the sitewide .reveal /
   initScrollReveal() IntersectionObserver — no second observer. The
   connector grows left-to-right (desktop/tablet) or top-to-bottom
   (mobile, see the mobile breakpoint below) just ahead of the step
   that follows it, and steps themselves fade up with a stagger. ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal.reveal--connector {
    transform: scaleX(0);
  }

  .reveal.reveal--connector.is-visible {
    transform: scaleX(1);
    transition-delay: 0.1s;
  }

  .fleximo-process__timeline .fleximo-process__step:nth-child(2) {
    transition-delay: 0.12s;
  }

  .fleximo-process__timeline .fleximo-process__step:nth-child(3) {
    transition-delay: 0.24s;
  }

  .fleximo-process__timeline .fleximo-process__step:nth-child(4) {
    transition-delay: 0.36s;
  }
}

/* ==========================================================================
   Homepage CTA band (Upgrade Your Space with Complete WPC Solutions)
   Namespace: .fleximo-cta. A deep-green rounded panel with a low-
   opacity CSS-only pattern, replacing the old plain brown rectangle.
   ========================================================================== */
.fleximo-cta {
  padding: 0 0 96px;
}

.fleximo-cta__inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 56px;
  border-radius: var(--radius-lg);
  background-color: var(--fleximo-green);
  box-shadow: 0 40px 80px -40px rgba(20, 76, 38, 0.5);
}

/* Subtle abstract pattern — thin diagonal lines (a nod to WPC surface
   grain) plus a soft gold glow — kept low-opacity so it never competes
   with the text for attention. */
.fleximo-cta__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.07;
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0px, rgba(255, 255, 255, 0.5) 1px, transparent 1px, transparent 26px),
    radial-gradient(circle at 88% 15%, var(--fleximo-gold) 0%, transparent 45%);
  pointer-events: none;
}

.fleximo-cta__content {
  position: relative;
  z-index: 1;
  max-width: 46ch;
}

.fleximo-cta__accent {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
  margin-bottom: 18px;
}

.fleximo-cta__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin-bottom: 14px;
}

.fleximo-cta__heading {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.35rem);
  line-height: 1.2;
  color: var(--fleximo-ivory);
  margin-bottom: 14px;
}

.fleximo-cta__desc {
  color: rgba(250, 246, 239, 0.78);
  font-size: 1rem;
  line-height: 1.65;
}

.fleximo-cta__actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fleximo-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fleximo-cta__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.fleximo-cta__btn:hover {
  transform: translateY(-2px);
}

.fleximo-cta__btn--primary {
  background-color: var(--fleximo-gold);
  border-color: var(--fleximo-gold);
  color: var(--fleximo-green);
}

.fleximo-cta__btn--primary:hover {
  background-color: #e6bd6e;
  border-color: #e6bd6e;
}

.fleximo-cta__btn--whatsapp {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--fleximo-ivory);
}

.fleximo-cta__btn--whatsapp:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
}

/* .reveal--left (the content panel's fade-in-from-the-left) is already
   defined as a reusable sitewide modifier — see the WPC "Why Fleximo"
   section's CSS — and is reused here as-is, not redeclared. */

@media (prefers-reduced-motion: reduce) {
  .fleximo-cta__btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Scroll reveal (disabled entirely under reduced-motion preference)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Site Footer
   ========================================================================== */
.site-footer {
  background-color: var(--color-charcoal-deep);
  color: var(--color-text-on-dark-muted);
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  /* Rebalanced from the original 1.6fr/1fr/1fr/1fr: "Get In Touch" (the
     4th column) needs real room for a full email address and a
     multi-line street address, while "Quick Links" (the 2nd) only ever
     holds short one-word/two-word links — giving it a smaller share
     and the last column a larger one is what actually fixes the
     desktop email/address clipping, not a text-wrapping property. At
     1240px this puts Get In Touch at roughly 330px (up from ~230px). */
  grid-template-columns: 1.4fr 0.7fr 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

.footer-col h3 {
  color: var(--color-text-on-dark);
  font-size: 1rem;
  margin-bottom: 18px;
}

/* Direct-child combinator is deliberate: Quick Links/Products/Get In
   Touch each have their <ul> as a direct child of .footer-col, but the
   social icons <ul class="footer-social__list"> sits two levels deep
   (.footer-col--brand > .footer-social > ul). A bare ".footer-col ul"
   descendant selector matched that too and, at equal-or-higher
   specificity than .footer-social__list's single class, silently won
   the flex-direction: column — that mismatch, not a missing rule, was
   why the social row rendered stacked vertically. */
.footer-col > ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--color-gold-soft);
}

/* ---- Brand column: logo, brand name, description and social block
   share one consistent vertical rhythm via this flex gap, rather than
   one-off margins on each piece. ---- */
.footer-col--brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  margin: 0;
}

.footer-col__desc {
  font-size: 0.92rem;
  max-width: 36ch;
  margin: 0;
}

/* ---- Connect With Us: one horizontal row of equal circular icons,
   left-aligned with the rest of the brand column. Real (temporary)
   profile links now exist, so a hover state is included. ---- */
.footer-social__heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  margin: 0 0 12px;
}

.footer-social__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.footer-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(242, 236, 223, 0.28);
  color: var(--color-text-on-dark-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.footer-social__icon:hover {
  color: var(--color-gold-soft);
  border-color: var(--color-gold-soft);
  background-color: rgba(221, 199, 148, 0.1);
}

.footer-social__icon svg {
  width: 18px;
  height: 18px;
}

/* ---- Get In Touch: icon + text rows, aligned to the first line so
   the multi-line address still reads cleanly. ---- */
.footer-contact li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-on-dark);
}

.footer-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-gold-soft);
}

.footer-contact__icon svg {
  width: 18px;
  height: 18px;
}

.footer-contact__text {
  /* min-width: 0 lets this flex item actually shrink/wrap inside its
     row instead of forcing the row (and the column) wider than
     available space — a flex item's default min-width: auto is the
     other half of what made the email/address overflow the column
     before this fix. Plain word-boundary wrapping (the default) is
     enough at every width once the column itself has real room (see
     .footer-grid above); forcing overflow-wrap: anywhere here
     unconditionally was breaking the email and address mid-word
     whenever the column got even slightly tight. */
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 360px) {
  /* Last-resort safety net for the very narrowest phones only — normal
     word-boundary wrapping is sufficient at every width down to here,
     but this guarantees the address/email can never force horizontal
     overflow if a future edit makes either noticeably longer. */
  .footer-contact__text {
    overflow-wrap: anywhere;
  }
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(242, 236, 223, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--color-text-on-dark-muted);
}

.footer-bottom a {
  color: var(--color-gold-soft);
  font-weight: 600;
}

/* Groups the copyright + "Designed & Developed by" lines as one flex
   item, so adding the legal-links nav alongside keeps .footer-bottom's
   existing two-item space-between layout intact rather than spreading
   three items unevenly across the row. */
.footer-bottom__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Secondary, not a nav-style pill — plain understated text links,
   consistent with the rest of .footer-bottom, with enough padding for
   a real 44px touch target without visually enlarging the text. */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
}

@media (max-width: 767px) {
  .footer-bottom__copy {
    gap: 6px;
  }

  .footer-legal-links {
    gap: 0 20px;
  }
}

/* ==========================================================================
   Inner-page hero (e.g. Contact Us) — a compact banner below the header,
   distinct from the homepage's full carousel hero.
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
  color: var(--color-text-on-dark);
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 2px, transparent 2px, transparent 7px),
    linear-gradient(135deg, var(--color-forest) 0%, var(--color-forest-deep) 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.page-hero .section__label {
  color: var(--color-gold-soft);
  margin-bottom: 16px;
}

.page-hero__heading {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  color: var(--color-text-on-dark);
  margin-bottom: 16px;
}

.page-hero__desc {
  color: var(--color-text-on-dark-muted);
  font-size: 1.05rem;
  max-width: 62ch;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  margin-bottom: 22px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-text-on-dark-muted);
}

.breadcrumb a {
  color: var(--color-text-on-dark-muted);
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--color-gold-soft);
}

.breadcrumb li[aria-current='page'] {
  color: var(--color-gold-soft);
  font-weight: 600;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin: 0 8px;
  color: rgba(242, 236, 223, 0.4);
}

/* ==========================================================================
   Responsive: Nav drawer breakpoint (≤1365px)
   The primary nav becomes a right-side off-canvas drawer below this
   width — originally chosen for the earlier eight-top-level-link menu
   plus the E-Catalog button and a 2x logo, not a generic 768px/1024px
   default. The nav itself is now just four top-level items (Home,
   About, a Products submenu, Contact Us), which fit comfortably well
   above this width, but the breakpoint is left as-is rather than
   lowered — nothing in this task asked for that, and the drawer
   already works correctly on both sides of it. The header logo and
   height stay at full desktop size through this tier (only the true
   tablet breakpoint below shrinks them) — only the nav itself changes
   shape. This is also where the Products submenu switches from the
   desktop hover/click dropdown to the tap accordion (see the
   "Products submenu" section above for the shared base rules both
   variants build on).
   ========================================================================== */
@media (max-width: 1365px) {
  .nav-toggle {
    display: flex;
    /* .site-header__inner's justify-content is flex-start (needed for
       the desktop logo-to-nav gap fix) rather than space-between. At
       this breakpoint .main-nav becomes position:fixed, which takes it
       out of the flex layout entirely — leaving only the logo and this
       button as participating flex items, so flex-start alone would
       otherwise leave the hamburger sitting right next to the logo
       instead of at the far right. margin-left: auto claims all
       remaining space on this one item, pushing it to the end of the
       row regardless of the container's own justify-content. */
    margin-left: auto;
  }

  /* The drawer has its own "Download E-Catalog" button in its footer;
     the desktop pill would otherwise crowd the hamburger here. */
  .header-catalogue {
    display: none;
  }

  /* Desktop-only, same as .header-catalogue just above — this task is
     scoped to the desktop header only, so the mobile drawer stays
     exactly as it already was. */
  .header-actions {
    display: none;
  }

  .main-nav {
    /* The desktop-only "gap after the logo" value — meaningless once
       .main-nav becomes this fixed, right-anchored panel below. */
    margin-left: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    height: 100dvh;
    /* Fully opaque by design — no alpha channel on the background, no
       filter/backdrop-filter/mix-blend-mode, and opacity is pinned to
       1 explicitly (not just left at its 1 default) so the panel can
       never render washed out regardless of what else changes nearby.
       The dark backdrop behind the drawer belongs to the separate
       .nav-overlay element only (z-index 150, strictly below this
       drawer's z-index 200) — it never touches the drawer's own box. */
    opacity: 1;
    background-color: var(--color-ivory);
    box-shadow: -16px 0 40px rgba(20, 24, 19, 0.25);
    overflow-y: auto;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
    visibility: hidden;
    /* Pre-promote this panel to its own compositor layer, at rest,
       before it ever animates. Mobile Safari/Chrome can otherwise
       paint the very first frame of a freshly-visible, off-screen
       `transform`-animated fixed element from a blank/white backing
       store — a one-frame flash to a lighter colour than the panel's
       actual solid ivory — before the real background is composited
       in on a later frame. will-change tells the browser to build
       that layer (with the true background already painted on it)
       ahead of time, so there is nothing left to flash. */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  body.admin-bar .main-nav {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
  }

  @media screen and (max-width: 782px) {
    body.admin-bar .main-nav {
      top: 46px;
      height: calc(100vh - 46px);
      height: calc(100dvh - 46px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .main-nav {
      transition: visibility 0s linear;
    }
  }

  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s var(--ease), visibility 0s linear 0s;
  }

  .nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-drawer__logo .site-logo__img {
    max-height: 56px;
  }

  .nav-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-drawer__close svg {
    width: 24px;
    height: 24px;
  }

  .nav-drawer__close:hover {
    background-color: var(--color-ivory-dim);
  }

  .nav-drawer__body {
    flex: 1 1 auto;
  }

  .nav-drawer__footer {
    display: block;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 18px 20px 24px;
    border-top: 1px solid var(--color-border);
  }

  .nav-drawer__cta {
    width: 100%;
    border-radius: 999px;
    /* .btn's own justify-content: center would otherwise centre "icon
       + label" as one block; this is a leading icon with no trailing
       element to anchor against, so a plain flex-start keeps the icon
       on the left and the label immediately after it, never
       overlapping. */
    justify-content: flex-start;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 0;
  }

  .main-nav ul a:not(.btn) {
    display: block;
    /* Explicit, not just the default: guarantees every full-width row
       stays a real clickable/tappable target with nothing (a
       decorative pseudo-element, an animation artifact) ever able to
       intercept the tap ahead of the anchor underneath it. */
    pointer-events: auto;
    /* Long WPC names (e.g. "WPC Digital Printing Doors") wrap onto
       their own extra line here instead of clipping or forcing the
       drawer wider than its fixed width. */
    white-space: normal;
    line-height: 1.35;
    padding: 16px 20px;
    min-height: 44px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font-size: 1.02rem;
    font-weight: 600;
  }

  .main-nav ul a:not(.btn):hover {
    background-color: var(--color-ivory-dim);
  }

  .main-nav ul a:not(.btn)[aria-current='page'] {
    color: var(--color-forest);
    font-weight: 700;
    background-color: var(--color-ivory-dim);
    box-shadow: inset 3px 0 0 var(--color-gold);
  }

  /* ---- Products row: label on the left, chevron toggle on the
     right, aligned with every other drawer row (same 44px minimum,
     same bottom divider). ---- */
  .menu-parent-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
  }

  .menu-parent-label {
    display: block;
    flex: 1 1 auto;
    padding: 16px 20px;
    min-height: 44px;
    font-size: 1.02rem;
    white-space: normal;
    line-height: 1.35;
  }

  .menu-parent-label[aria-current='page'] {
    color: var(--color-forest);
    font-weight: 700;
  }

  .submenu-toggle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-right: 8px;
  }

  .submenu-toggle svg {
    width: 18px;
    height: 18px;
  }

  /* Nested product links reuse the exact same full-width row treatment
     as the top-level items (both already match .main-nav ul a:not(.btn)
     above) — only the left indent and a very faint background tint are
     added here, via a selector specific enough to win without touching
     the base rule's own shorthand padding (a longhand-only override,
     matching this stylesheet's established padding-shorthand-conflict
     fix used elsewhere for the exact same reason). */
  .main-nav .sub-menu a:not(.btn) {
    padding-left: 36px;
    background-color: rgba(20, 76, 38, 0.025);
  }

  /* ---- Accordion: resets the desktop dropdown's absolute positioning
     back to a normal in-flow block, so expanding it pushes Contact Us
     and the Download E-Catalog button downward within the drawer's own
     scrollable column exactly like any other row being added — never
     floating over them. No opacity transition anywhere here, only
     max-height: animating opacity on a container that itself holds
     visible menu text is exactly what produced this drawer's earlier
     "light colour flash" bug, and a height-only transition cannot
     reproduce that. ---- */
  .menu-item-has-children.js-enhanced .sub-menu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .menu-item-has-children.js-enhanced.is-open .sub-menu {
    max-height: 400px;
  }

  @media (prefers-reduced-motion: reduce) {
    .menu-item-has-children.js-enhanced .sub-menu {
      transition: none;
    }
  }
}

/* ==========================================================================
   Responsive: Tablet (≤1024px)
   Unrelated to the nav breakpoint above — this is where the header
   itself (logo/height) and the hero/contact/footer layouts genuinely
   need to shrink for tablet-width screens.
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --header-height: 120px;
  }

  .site-header__inner {
    gap: 14px;
  }

  .site-logo__img {
    max-height: 92px;
  }

  .section {
    padding: 64px 0;
  }

  /* ---- WPC hero: min-height and --hero-position-desktop are NOT
     overridden here (they previously were, pinned to a 600px/
     42-40-44% set specific to this tier) — this tier shares the base
     .wpc-hero__slide rules' clamp(700px, 71vw, 900px) height and each
     slide's measured door-midpoint object-position. The horizontal
     layout itself (--wpc-hero-content-width, arrow offsets) no longer
     needs a tablet-specific value either: the two-column split layout
     in the ≥768px block below already covers this entire 768-1024px
     range with one shared 50/50 column split, so those tablet-only
     overrides were removed rather than left silently unused. Mobile
     (≤767px) is unaffected either way — it has its own separate,
     unrelated rules entirely. ---- */
  .wpc-hero__content {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* ---- Heading: a tablet-specific size, smaller than the base
     clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem) would otherwise produce
     here. Needed because the two-column split's left column is only
     ~336-464px wide across this exact 768-1024px range (50% of the
     slide, minus .wpc-hero__container's own 24px side padding) — at
     the base clamp's size, the longest heading second line
     ("Distinctive Entrances.") measures 427-503px, wider than that
     column, and would wrap inside its own .wpc-hero__heading-line
     span instead of staying on its intended single line. This is a
     genuine reduction, not a cosmetic one, but a bounded one: tuned so
     the same longest line fits with a safety margin at both 768px and
     1024px (checked directly, not assumed), never dropping below
     1.75rem — noticeably larger than the 1.05rem body copy, and only
     slightly below the 1.9rem mobile floor. ---- */
  .wpc-hero__heading {
    font-size: clamp(1.75rem, 3.91vw - 2px, 2.38rem);
  }

  /* ---- WPC intro: reduce the overlap gradually as width decreases
     (from ~4% of the row's width down to ~2% here), so the panel never
     crowds against the image before the mobile breakpoint takes over
     and removes the overlap entirely. ---- */
  .wpc-intro__media {
    width: 58%;
  }

  .wpc-intro__panel {
    width: 44%;
    padding: 40px 32px 40px 44px;
  }

  /* ---- WPC why: tighten the column gap; the 42%/auto split still
     leaves both panels comfortably readable down to this width. ---- */
  .wpc-why__row {
    gap: 40px;
  }

  /* ---- Showroom: a proportionally shorter viewer for tablet width. ---- */
  .fleximo-showroom__viewer {
    height: 500px;
  }

  .fleximo-showroom__panel {
    width: 240px;
  }

  /* ---- Process timeline: tighten spacing slightly; still horizontal
     at this width. ---- */
  .fleximo-process__timeline {
    gap: 20px;
  }

  .fleximo-process__step {
    padding: 24px 16px 22px;
  }

  .fleximo-process__connector {
    /* Marker top is now 24px (this step's own top padding), so its
       centre shifts to 24 + 27 = 51px; minus half the line's 2px
       thickness keeps it centred on the marker. */
    top: 50px;
    width: calc(100% + 20px - 54px);
  }

  /* ---- CTA: let content/actions stack if the two-column layout
     starts to feel tight, before the full mobile breakpoint. ---- */
  .fleximo-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 40px;
  }

  .fleximo-cta__content {
    max-width: none;
  }

  .fleximo-cta__actions {
    flex-direction: row;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Inner-page hero: adjust padding before stacking at mobile
     (shared by every page built on .page-hero — About, Contact,
     product pages). ---- */
  .page-hero {
    padding: 56px 0 44px;
  }
}

/* ==========================================================================
   Responsive: WPC categories, three-to-two columns (≤900px)
   A dedicated breakpoint (rather than reusing the 1024px tablet tier)
   because three columns are still comfortably readable right down to
   ~900px, but get cramped below it — well before the mobile stack
   breakpoint takes over. The third card centres at half-width instead
   of stretching awkwardly across both columns.
   ========================================================================== */
@media (max-width: 900px) {
  .wpc-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wpc-cat-card:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 16px);
    margin: 0 auto;
  }
}

/* ==========================================================================
   Responsive: Mobile (≤767px)
   Only the logo and hamburger remain in the collapsed header row — the
   desktop E-Catalog button is hidden well above this width already
   (it is never shown inside the drawer either, which has its own
   "Download E-Catalog" CTA instead). Header height and logo size step
   down further so the header never feels oversized on a phone, but the
   logo stays clearly bigger than its old pre-2x size.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --header-height: 88px;
  }

  /* The sticky mobile header now serves a wide, tightly-cropped logo
     variant (see header.php's <picture>/FLEXIMO_LOGO_MOBILE_FILENAME —
     aspect ratio ~3.24:1, versus the original full-canvas file's
     ~1.41:1), so at any given height it renders noticeably wider than
     before. A flat max-height big enough to look right on a 430px+
     phone would render too wide to fit next to the hamburger at
     320-360px, so this scales with viewport width instead: the 60px
     floor keeps the ~195px-wide result at 320px comfortably clear of
     the 44px hamburger + its own margin-left: auto gap, and the 84px
     ceiling (reached by ~470px) still fits well inside the unchanged
     88px header height, so this doesn't require growing the header
     itself. This rule only affects the main header logo — the drawer's
     own logo keeps its separate, unrelated 56px cap (.nav-drawer__logo
     .site-logo__img, above) via that selector's higher specificity. */
  .site-logo__img {
    max-height: clamp(60px, 18vw, 84px);
  }

  /* ---- Footer: single stacked column (brand → Quick Links →
     Products → Get In Touch, matching source order exactly), tighter
     top/bottom padding, and the copyright/developer-credit lines
     stacked explicitly rather than left to wrap. ---- */
  .site-footer {
    padding: 48px 0 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 36px;
  }

  /* ---- WPC hero: still a full-bleed background photo, but the
     content column now spans the full width with tight, safe
     horizontal padding, and a stronger overlay carries the contrast
     since the text sits over most of the image at this width. ---- */
  .wpc-hero {
    --wpc-hero-content-width: 100%;
  }

  .wpc-hero__slide {
    min-height: clamp(620px, 82svh, 760px);
  }

  @supports not (height: 1svh) {
    .wpc-hero__slide {
      min-height: clamp(620px, 82vh, 760px);
    }
  }

  .wpc-hero__content {
    max-width: 100%;
    padding: 40px 20px 104px;
  }

  .wpc-hero__heading {
    font-size: clamp(1.5rem, 1rem + 4vw, 2.1rem);
  }

  .wpc-hero__desc {
    font-size: 0.98rem;
    max-width: none;
  }

  /* CTAs always stacked on mobile — full width, left-aligned internals
     preserved (icon → text → arrow via margin-left: auto on the arrow,
     no absolute positioning), never the centred layout that previously
     caused icon/label/arrow overlap. */
  .wpc-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .wpc-hero__btn--primary svg {
    margin-left: auto;
  }

  /* ---- Arrows: pinned to the bottom corners, clear of the content
     column's reserved bottom padding above, each an independent 44×44
     touch target. ---- */
  .wpc-hero__arrow {
    top: auto;
    bottom: 20px;
    left: auto;
    right: auto;
    transform: none;
    width: 44px;
    height: 44px;
    background-color: rgba(20, 76, 38, 0.9);
  }

  .wpc-hero__arrow--prev {
    left: 20px;
  }

  .wpc-hero__arrow--next {
    right: 20px;
  }

  .wpc-hero__dots {
    bottom: 34px;
  }

  /* ---- WPC intro: the combined product photo first, the green panel
     below it — desktop overlap removed entirely so nothing ever clips
     the image, and the whole Door/Board/Frame composition stays
     visible. The <img> drives its own height (width:100%; height:auto)
     rather than a cropped aspect-ratio box, per the source image's
     square shape. ---- */
  .wpc-intro__media {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .wpc-intro__photo {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .wpc-intro__panel {
    /* Stays "relative" (not "static") so its own ::before gold line
       keeps positioning against this panel's box — clearing the
       desktop top/right offsets and transform is what actually returns
       it to normal document flow below the image. */
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    padding: 36px 24px 40px 40px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .wpc-intro__panel::before {
    left: 16px;
  }

  /* ---- WPC categories: single stacked column, Doors then Boards then
     Frames, matching source order. Overrides the ≤900px two-column
     rule's nth-child(3) centring back to a plain full-width card. ---- */
  .wpc-cat {
    padding: 56px 0;
  }

  .wpc-cat__intro {
    margin-bottom: 32px;
  }

  .wpc-cat__heading {
    font-size: clamp(1.5rem, 1.1rem + 2.5vw, 2rem);
  }

  .wpc-cat-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wpc-cat-card:nth-child(3) {
    grid-column: auto;
    width: 100%;
    margin: 0;
  }

  /* ---- WPC why: heading + paragraph + CTA first, benefits below —
     the vertical icon connector concept is kept, just at a smaller
     scale; icons stay left-aligned with text beside them via the same
     grid columns, so nothing can overlap regardless of description
     length. ---- */
  .wpc-why__row {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .wpc-why__content {
    flex: 0 0 auto;
    max-width: 100%;
    padding-left: 22px;
  }

  .wpc-why__heading {
    font-size: clamp(1.5rem, 1.1rem + 3vw, 2rem);
  }

  .wpc-why__panel::before {
    inset: -16px -12px;
    border-radius: 32px;
  }

  .wpc-why__benefits {
    padding: 8px 4px;
    gap: 28px;
  }

  .wpc-why__benefit {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }

  .wpc-why__icon-wrap {
    width: 44px;
    height: 44px;
  }

  .wpc-why__icon svg {
    width: 20px;
    height: 20px;
  }

  .wpc-why__line {
    top: 22px;
    bottom: 22px;
    left: 26px;
  }

  /* ---- Showroom: full available width, a taller-relative-to-width
     viewer height so the panorama still reads clearly on a narrow
     screen, and the info panel becomes a bottom sheet inside the
     viewer instead of a floating popover; JS skips setting inline
     left/top on this breakpoint (matchMedia-gated) so this plain
     positioning isn't fought by an inline style. Pannellum's controls
     stay at their native top-left (see the base rule above) so they
     never coincide with the global floating WhatsApp/Catalogue
     buttons, which are always fixed bottom-right. ---- */
  .fleximo-showroom__viewer {
    height: clamp(420px, 65vh, 580px);
  }

  .fleximo-showroom__panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 65%;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .fleximo-showroom__hint {
    font-size: 0.78rem;
    padding: 7px 14px;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Contact CTA: full available width up to a sensible cap, kept
     comfortably clear of the global floating WhatsApp/Catalogue
     buttons since it sits in normal document flow, not fixed. ---- */
  .fleximo-showroom__contact-btn {
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }

  /* ---- Process: vertical timeline — connecting line on the left,
     markers on it, content consistently to the right (never
     alternating sides). Cards drop their border/shadow/background
     here so four stacked boxes don't feel heavy on a narrow screen;
     spacing alone separates the steps. ---- */
  .fleximo-process__timeline {
    flex-direction: column;
    gap: 0;
  }

  .fleximo-process__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0 0 32px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .fleximo-process__step:last-child {
    padding-bottom: 0;
  }

  .fleximo-process__connector {
    top: 44px;
    left: 21px;
    width: 2px;
    height: 32px;
    transform-origin: top;
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal.reveal--connector {
      transform: scaleY(0);
    }

    .reveal.reveal--connector.is-visible {
      transform: scaleY(1);
    }
  }

  .fleximo-process__marker {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
  }

  .fleximo-process__marker svg {
    width: 20px;
    height: 20px;
  }

  .fleximo-process__step-body {
    align-items: flex-start;
    text-align: left;
    padding-left: 18px;
  }

  /* ---- CTA: fully stacked, left-aligned, full-width buttons. ---- */
  .fleximo-cta {
    padding: 0 0 64px;
  }

  .fleximo-cta__inner {
    padding: 36px 24px;
    border-radius: var(--radius-md);
    gap: 28px;
  }

  .fleximo-cta__heading {
    font-size: clamp(1.4rem, 1rem + 4vw, 1.8rem);
  }

  .fleximo-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .fleximo-cta__btn {
    width: 100%;
    /* Overrides this component's own justify-content: center once
       full width — a stable left-aligned row (icon/label flush left,
       any trailing arrow pushed to the far right via its own
       margin-left: auto below) rather than centring the whole group,
       which previously left icon, label and arrow overlapping. */
    justify-content: flex-start;
  }

  .fleximo-cta__btn--primary svg {
    margin-left: auto;
  }

  /* ---- Inner-page hero: full vertical stack (shared by every page
     built on .page-hero). ---- */
  .page-hero {
    padding: 44px 0 36px;
  }
}

@media (max-width: 560px) {
  /* .wpc-hero__ctas is already stacked from the ≤767px rule above; this
     covers the remaining non-hero intro CTAs at this narrower width. */
  .wpc-intro__ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   Global floating actions (WhatsApp + Download Catalog)
   Rendered once in footer.php, so every template that calls get_footer()
   picks them up automatically — no per-page markup. Fixed bottom-right,
   z-index 120: below .nav-overlay (150) and the mobile drawer (200), so
   opening the drawer correctly dims/covers these buttons instead of
   floating above it.
   Stacked one-above-the-other (WhatsApp on top, Download Catalog below,
   matching their order in footer.php) at every viewport width — never
   side by side, so the pair keeps a consistent, predictable shape on
   phones, tablets and desktop alike. `align-items: flex-end` right-
   aligns both pills against the same edge without forcing them to
   share a width; each keeps its own natural width from its content. */
.floating-actions {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.floating-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-white);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(20, 24, 19, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-actions__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.floating-actions__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 24, 19, 0.28);
}

.floating-actions__btn--whatsapp {
  background-color: #2f6e4f;
}

.floating-actions__btn--whatsapp:hover {
  background-color: #255939;
}

.floating-actions__btn--catalog {
  background-color: var(--color-wood);
}

.floating-actions__btn--catalog:hover {
  background-color: var(--color-wood-dark);
}

@media (prefers-reduced-motion: reduce) {
  .floating-actions__btn:hover {
    transform: none;
  }
}

/* ---- Attention animation: a brief, staggered double-nudge (WhatsApp,
   then Download Catalog 1s later — both bounces finish by t=1.8s) that
   repeats every 8s, leaving a ~6.2s still rest between complete
   sequences, so visitors notice the widgets without either button
   bouncing continuously. The whole 8s span is one keyframe animation
   per button — the actual movement is compressed into its first
   ~800ms (0px → -5px → 0px → -2px → 0px, matching the sitewide easing
   token) and the remaining ~7.2s simply holds the resting 0/scale(1)
   state, so a single `animation` declaration produces "bounce, then
   rest, then repeat" with no JS timer needed. transform/box-shadow
   only — no layout properties are touched, so this can never shift
   surrounding content or the button's own hit area. */
@keyframes fleximo-float-attention {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 20px rgba(20, 24, 19, 0.22);
  }

  2.5% {
    transform: translateY(-5px) scale(1.025);
    box-shadow: 0 14px 28px rgba(20, 24, 19, 0.32);
  }

  6% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 20px rgba(20, 24, 19, 0.22);
  }

  8% {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 11px 24px rgba(20, 24, 19, 0.27);
  }

  10% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 20px rgba(20, 24, 19, 0.22);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .floating-actions__btn--whatsapp {
    animation: fleximo-float-attention 8s ease-in-out infinite;
  }

  .floating-actions__btn--catalog {
    animation: fleximo-float-attention 8s ease-in-out infinite;
    /* Starts its own copy of the same 8s cycle 1s after WhatsApp's —
       the "after a small delay, Download Catalog performs the same
       animation" stagger — while still repeating together every 8s. */
    animation-delay: 1s;
  }

  /* `animation: none` (not animation-play-state: paused) is
     deliberate: a *paused* CSS animation still wins the cascade for
     the properties it targets over a normal same-element :hover rule,
     which would otherwise freeze transform/box-shadow at whatever
     frame the bounce was on and silently break the existing hover
     lift. Fully removing the animation here lets .floating-actions__btn
     :hover's own transform/box-shadow apply cleanly and immediately —
     functionally still "the attention animation pauses on interaction"
     from the visitor's point of view, since it resumes its normal 7s
     cycle the moment hover/focus/press ends. */
  .floating-actions__btn:hover,
  .floating-actions__btn:focus-visible,
  .floating-actions__btn:active {
    animation: none;
  }
}

/* ---- Mobile: tighter offsets so the pair (already stacked above, at
   every width) clears a 360px-wide viewport with no horizontal
   overflow; labels shrink slightly but the 44px tap height is
   preserved and each button keeps its own width (no stretch-to-equal-
   width) so "WhatsApp" and "Download Catalog" aren't stretched wider
   than their text needs. ---- */
@media (max-width: 480px) {
  .floating-actions {
    right: 14px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .floating-actions__btn {
    padding: 11px 14px;
    font-size: 0.78rem;
  }
}

/* ---- Hide beneath the open mobile drawer's overlay rather than
   floating above the site while it's open (the overlay itself already
   outranks .floating-actions in z-index, but this also keeps them out
   of the way of the drawer's own focus trap and tap targets). ---- */
body.nav-open .floating-actions {
  display: none;
}

/* ==========================================================================
   About Page (/about/)
   Namespace: .fleximo-about-. Built on the same shared primitives used
   elsewhere in the theme — .page-hero / .breadcrumb, .section /
   .container, .btn, .reveal + initScrollReveal(), and the homepage's
   .fleximo-cta band, reused as-is for this page's final CTA — plus
   this page's own scoped classes for anything visually unique to it.
   Uses the permanent Fleximo logo colour system (--fleximo-* tokens)
   throughout, per CLAUDE.md's rule for all new pages/sections.
   ========================================================================== */

/* ---- Shared eyebrow/heading pair, reused by every section below.
   --fleximo-gold reads correctly on both this page's light section
   backgrounds and the dark hero/CTA overlays, so one label class
   covers every context; heading colour (deep green) is only ever used
   on the light backgrounds — the hero's own <h1> keeps the sitewide
   .page-hero__heading cream colour instead. ---- */
.fleximo-about-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin: 0 0 14px;
}

.fleximo-about-heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--fleximo-green);
  line-height: 1.2;
  margin: 0 0 16px;
}

/* ---- 1. Hero ----
   Extends the sitewide .page-hero (position: relative; overflow:
   hidden; already provides the containing block/clipping) with a real
   photograph instead of the flat two-tone gradient .page-hero uses on
   its own — that gradient becomes a separate overlay layer glazed over
   the photo instead of the section's only background. */
.fleximo-about-hero {
  background: none;
  padding: 0;
  min-height: 460px;
  display: flex;
  align-items: center;
}

.fleximo-about-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ---- Factory photo (About - hero.png, 1672x941). At every desktop/
   tablet hero height this section actually uses, the hero box is
   proportionally WIDER than the photo's own ~1.78:1 aspect ratio, so
   object-fit: cover matches the box's width exactly (the full width —
   and with it the FLEXIMO name board, wherever it sits horizontally —
   is always visible) and crops top/bottom instead. "center 52%" keeps
   the roofline, name board and enough of the yard/vehicles in that
   visible band without the plain sky at the very top. Re-checked
   against the actual photo, not applied blindly. ---- */
.fleximo-about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

/* Dark-green gradient, strongest where the text sits (left) and easing
   off toward the right so the photograph — and the FLEXIMO name board,
   which sits centre-right in the source photo — stays clearly legible.
   A controlled overlay for text contrast, not a flat colour block. */
.fleximo-about-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(15, 36, 24, 0.86) 0%, rgba(15, 36, 24, 0.66) 36%, rgba(15, 36, 24, 0.26) 64%, rgba(15, 36, 24, 0.1) 100%);
  pointer-events: none;
}

.fleximo-about-hero .page-hero__inner {
  position: relative;
  z-index: 1;
  /* padding-top/-bottom ONLY — never the `padding` shorthand here. This
     element renders as <div class="container page-hero__inner">, so
     its horizontal padding is meant to come entirely from .container
     (padding: 0 24px). A shorthand `padding: 64px 0` on this
     higher-specificity descendant selector (.fleximo-about-hero
     .page-hero__inner, two classes, beats .container's one) was
     silently zeroing the left/right padding .container had just set —
     the actual cause of the hero content sitting flush against the
     mobile viewport edges. */
  padding-top: 64px;
  padding-bottom: 64px;
}

.fleximo-about-hero__accent {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
  margin-bottom: 18px;
}

@media (max-width: 1024px) {
  .fleximo-about-hero {
    min-height: 420px;
  }
}

/* ---- Mobile: a separate, independently-tuned focal point — the hero
   box is narrower relative to its height here than the photo's own
   aspect ratio, so cover crops left/right instead of top/bottom (the
   full photo height shows). "58% center" keeps the FLEXIMO name board
   (centred around ~58% of the photo's width) in frame; the desktop
   Y-biased position would do nothing useful here since the cropping
   axis has flipped. ---- */
@media (max-width: 767px) {
  .fleximo-about-hero {
    min-height: 400px;
  }

  .fleximo-about-hero__media img {
    object-position: 58% center;
  }

  .fleximo-about-hero .page-hero__inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ---- 2. About Fleximo ("Who We Are") ---- */
.fleximo-about-intro {
  background-color: var(--fleximo-ivory);
}

.fleximo-about-intro__row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.fleximo-about-intro__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5;
}

.fleximo-about-intro__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Restrained corner accents — two short gold strokes rather than a
   full decorative border, echoing a technical drawing's corner marks. */
.fleximo-about-intro__frame::before,
.fleximo-about-intro__frame::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid var(--fleximo-gold);
  z-index: 1;
  pointer-events: none;
}

.fleximo-about-intro__frame::before {
  top: 14px;
  left: 14px;
  border-right: none;
  border-bottom: none;
}

.fleximo-about-intro__frame::after {
  bottom: 14px;
  right: 14px;
  border-left: none;
  border-top: none;
}

.fleximo-about-intro__copy {
  color: var(--fleximo-text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 18px;
}

.fleximo-about-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.fleximo-about-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fleximo-text-dark);
}

.fleximo-about-trust svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fleximo-gold);
}

@media (max-width: 1024px) {
  .fleximo-about-intro__row {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  /* Grid items stack in DOM order (image markup comes first in
     page-about.php), so the image shows above the text automatically —
     no explicit `order` needed. */
  .fleximo-about-intro__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fleximo-about-intro__frame {
    aspect-ratio: 16 / 11;
  }
}

/* ---- 2b. Why WPC (moisture / termite / impact protection) ----
   A warm ivory-dim background (distinct from the intro section's
   plain ivory right above it, so the seam between the two stays
   legible) with the image at roughly 52% and content at roughly 48% —
   .fleximo-about-feature / __icon / __title / __desc (already defined
   above for the capabilities section) are reused as-is for the three
   benefit rows: same icon-circle + thin-divider + stagger treatment,
   no need to redeclare it under a second name. */
.fleximo-about-protect {
  background-color: var(--color-ivory-dim);
}

.fleximo-about-protect__row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

/* The source photograph is a perfect square (1254x1254) with its
   water/termite/impact motifs reaching close to every edge — an
   aspect-ratio that matches it exactly, rather than a wide/tall crop,
   is what "object-fit: cover only if the important content remains
   visible" comes out to here: cover and contain behave identically on
   a same-ratio box, so nothing is cropped away. */
.fleximo-about-protect__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--fleximo-gold);
  box-shadow: var(--shadow-card);
  aspect-ratio: 1 / 1;
}

.fleximo-about-protect__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Restrained gold corner accents — the same understated corner-mark
   treatment as .fleximo-about-intro__frame, not a full decorative
   border. */
.fleximo-about-protect__frame::before,
.fleximo-about-protect__frame::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid var(--fleximo-green);
  z-index: 1;
  pointer-events: none;
}

.fleximo-about-protect__frame::before {
  top: 14px;
  left: 14px;
  border-right: none;
  border-bottom: none;
}

.fleximo-about-protect__frame::after {
  bottom: 14px;
  right: 14px;
  border-left: none;
  border-top: none;
}

.fleximo-about-protect__desc {
  color: var(--fleximo-text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 28px;
}

.fleximo-about-protect__list {
  display: flex;
  flex-direction: column;
}

.fleximo-about-protect__note {
  margin: 24px 0 0;
  color: var(--fleximo-text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.fleximo-about-protect__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 16px;
  padding: 14px 26px;
  border-radius: 999px;
  background-color: var(--fleximo-green);
  color: var(--fleximo-ivory);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.92rem;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fleximo-about-protect__cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--ease);
}

.fleximo-about-protect__cta:hover {
  background-color: var(--fleximo-text-dark);
  transform: translateY(-2px);
}

.fleximo-about-protect__cta:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-about-protect__cta:hover {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .fleximo-about-protect__row {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .fleximo-about-protect__row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fleximo-about-protect__frame {
    /* Keeps the full square image visible without an excessively tall
       mobile section — a touch shorter than a true 1:1 box at
       narrower widths, still with nothing cropped from the sides. */
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
  }

  .fleximo-about-protect__cta {
    width: 100%;
    max-width: 340px;
    /* A left-aligned row (label flush left, arrow pushed to the far
       right via its own margin-left: auto below) instead of centring
       "label + arrow" as one block — the previous centring left the
       label off true-centre and, combined with the absolute-position
       attempt since reverted, overlapping the arrow. */
    justify-content: flex-start;
  }

  .fleximo-about-protect__cta svg {
    margin-left: auto;
  }
}

/* ---- 3. What We Do (5 product cards) ---- */
.fleximo-about-services {
  background-color: var(--color-white);
}

.fleximo-about-services__intro {
  max-width: 700px;
  margin: 0 0 44px;
}

.fleximo-about-services__intro p {
  color: var(--fleximo-text-muted);
  font-size: 1.05rem;
}

/* Six-column grid so the last two cards can each span two columns
   offset by one, centring them under the three cards above (2/4 and
   4/6 of six columns) — the "three then two, centred" layout. */
.fleximo-about-service-grid {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: without the explicit 0 minimum, a
     grid item's default min-width: auto can force its track wider than
     available space to fit unbroken content (a known CSS Grid
     overflow trap), matching the same minmax(0, …) idiom already used
     by .fleximo-contact-grid and .wpc-intro__row elsewhere in this
     file. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}

.fleximo-about-service-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background-color: var(--fleximo-ivory);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  min-height: 44px;
}

.fleximo-about-service-grid > :nth-child(4) {
  grid-column: 2 / 4;
}

.fleximo-about-service-grid > :nth-child(5) {
  grid-column: 4 / 6;
}

/* Combined onto one rule (rather than split across two competing
   single-class rules) so both the scroll-in fade and the hover/focus
   lift animate correctly regardless of source order — same reasoning
   as .wpc-cat-card.reveal elsewhere in this file. */
.fleximo-about-service-card.reveal {
  transition: opacity 0.7s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.fleximo-about-service-card:hover,
.fleximo-about-service-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--fleximo-gold);
}

.fleximo-about-service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(211, 156, 57, 0.12);
  color: var(--fleximo-green);
}

.fleximo-about-service-card__icon svg {
  width: 24px;
  height: 24px;
}

.fleximo-about-service-card__title {
  font-size: 1.08rem;
  color: var(--fleximo-text-dark);
  margin: 0;
}

.fleximo-about-service-card__desc {
  flex: 1;
  color: var(--fleximo-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.fleximo-about-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fleximo-green);
}

.fleximo-about-service-card__link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}

.fleximo-about-service-card:hover .fleximo-about-service-card__link svg,
.fleximo-about-service-card:focus-visible .fleximo-about-service-card__link svg {
  transform: translateX(4px);
}

/* Small upward stagger, matching the sitewide .wpc-why__benefit
   convention — a longhand transition-delay on top of the .reveal
   shorthand above, at higher specificity, so only the delay differs. */
@media (prefers-reduced-motion: no-preference) {
  .fleximo-about-service-grid > :nth-child(2) {
    transition-delay: 0.08s;
  }

  .fleximo-about-service-grid > :nth-child(3) {
    transition-delay: 0.16s;
  }

  .fleximo-about-service-grid > :nth-child(4) {
    transition-delay: 0.24s;
  }

  .fleximo-about-service-grid > :nth-child(5) {
    transition-delay: 0.32s;
  }
}

@media (max-width: 1024px) {
  .fleximo-about-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fleximo-about-service-card,
  .fleximo-about-service-grid > :nth-child(4),
  .fleximo-about-service-grid > :nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .fleximo-about-service-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 4. WPC capabilities ---- */
.fleximo-about-capabilities {
  background-color: var(--fleximo-ivory);
}

.fleximo-about-capabilities__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}

.fleximo-about-capabilities__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5;
}

.fleximo-about-capabilities__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fleximo-about-capabilities__desc {
  max-width: 60ch;
  color: var(--fleximo-text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 30px;
}

/* Feature rows separated by thin gold/cream dividers — a nod to a
   technical product sheet's line items rather than boxed cards. */
.fleximo-about-feature-list {
  display: flex;
  flex-direction: column;
}

.fleximo-about-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--fleximo-border);
}

.fleximo-about-feature:first-child {
  border-top: 1px solid var(--fleximo-gold);
}

.fleximo-about-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(20, 76, 38, 0.08);
  color: var(--fleximo-green);
}

.fleximo-about-feature__icon svg {
  width: 20px;
  height: 20px;
}

.fleximo-about-feature__title {
  font-size: 1rem;
  color: var(--fleximo-text-dark);
  margin: 0 0 4px;
}

.fleximo-about-feature__desc {
  color: var(--fleximo-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* Short stagger for the capability icons/rows. */
@media (prefers-reduced-motion: no-preference) {
  .fleximo-about-feature:nth-child(2) {
    transition-delay: 0.06s;
  }

  .fleximo-about-feature:nth-child(3) {
    transition-delay: 0.12s;
  }

  .fleximo-about-feature:nth-child(4) {
    transition-delay: 0.18s;
  }
}

.fleximo-about-range {
  margin: 26px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--fleximo-green);
}

.fleximo-about-capabilities__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fleximo-green);
}

.fleximo-about-capabilities__cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--ease);
}

.fleximo-about-capabilities__cta:hover svg,
.fleximo-about-capabilities__cta:focus-visible svg {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .fleximo-about-capabilities__row {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .fleximo-about-capabilities__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fleximo-about-capabilities__media {
    aspect-ratio: 16 / 11;
  }
}

/* ---- 5. Applications & Our Approach ---- */
.fleximo-about-applications {
  background-color: var(--color-ivory-dim);
}

.fleximo-about-applications__intro {
  max-width: 700px;
  margin: 0 0 44px;
}

.fleximo-about-applications__intro p {
  color: var(--fleximo-text-muted);
  font-size: 1.05rem;
}

.fleximo-about-applications__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.fleximo-about-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.fleximo-about-app-block {
  padding: 24px;
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
}

.fleximo-about-app-block__index {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fleximo-gold);
  margin-bottom: 10px;
}

.fleximo-about-app-block__title {
  font-size: 1.02rem;
  color: var(--fleximo-text-dark);
  margin: 0 0 8px;
}

.fleximo-about-app-block__desc {
  color: var(--fleximo-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Our Approach panel: a numbered vertical sequence with a static
   connecting line (this panel reveals as one whole unit, so the line
   doesn't need its own separate .reveal--line scroll-in like wpc-why's
   does). ---- */
.fleximo-about-approach {
  padding: 32px 28px;
  background-color: var(--fleximo-green);
  border-radius: var(--radius-md);
  color: var(--fleximo-ivory);
}

.fleximo-about-approach__heading {
  font-size: 1.15rem;
  color: var(--fleximo-ivory);
  margin: 0 0 22px;
}

.fleximo-about-approach__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fleximo-about-approach__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 0 22px;
}

.fleximo-about-approach__list li:last-child {
  padding-bottom: 0;
}

.fleximo-about-approach__list::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 13px;
  width: 1px;
  background-color: rgba(250, 246, 239, 0.25);
}

.fleximo-about-approach__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--fleximo-gold);
  color: var(--fleximo-green);
  font-size: 0.85rem;
  font-weight: 700;
}

.fleximo-about-approach__list li span:last-child {
  padding-top: 4px;
  font-size: 0.95rem;
  color: rgba(250, 246, 239, 0.92);
}

@media (max-width: 1024px) {
  .fleximo-about-applications__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .fleximo-about-app-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 6. Final CTA — reuses the sitewide .fleximo-cta component as-is
   (same deep-green rounded panel, CSS-only pattern already
   pointer-events: none, gold/cream palette); only two page-scoped
   tweaks below, neither of which touches the homepage's own instance. ---- */
.fleximo-about-cta {
  padding-bottom: 120px;
}

.fleximo-about-cta .fleximo-cta__btn {
  min-height: 48px;
}

@media (max-width: 767px) {
  .fleximo-about-cta {
    padding-bottom: 96px;
  }
}

/* ==========================================================================
   WPC Product Pages (/wpc-plain-doors/, /wpc-carving-doors/,
   /wpc-digital-printing-doors/, /wpc-boards/, /wpc-frames/)
   Namespace: .fleximo-product-. One shared stylesheet section for all
   five pages, rendered by the one shared page-wpc-product.php template
   — reuses .page-hero / .breadcrumb, .section / .container, .btn,
   .reveal + initScrollReveal() and .fleximo-cta exactly as the About
   page does, plus this page family's own scoped classes.
   ========================================================================== */

.fleximo-product-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin: 0 0 14px;
}

.fleximo-product-heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--fleximo-green);
  line-height: 1.2;
  margin: 0 0 16px;
}

/* ---- Shared image-pan technique for the Boards/Frames pages, which
   have no dedicated photo of their own and instead isolate one third
   of the same combined "boards | door | frames" photograph already
   used on the homepage — identical technique to .wpc-cat-card__img--
   boards/--frames elsewhere in this file (checked visually against the
   source photo: boards sit in the left third, frames in the right
   third). Scoped to any .fleximo-product-media--boards/--frames
   container (the hero frame, the explanation image, or a gallery
   item), not one specific component. ---- */
.fleximo-product-media--boards img,
.fleximo-product-media--frames img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 320%;
  max-width: none;
}

.fleximo-product-media--boards img {
  transform: translate(-20%, -50%);
}

.fleximo-product-media--frames img {
  transform: translate(-80%, -50%);
}

/* ---- 1. Hero ----
   Keeps .page-hero's own dark-green gradient background as-is (no
   photo replaces it, unlike the About page's hero) and adds a second
   column for the product photo alongside the text — avoids awkwardly
   cropping a portrait-ish product render into a wide full-bleed banner. */
.fleximo-product-hero {
  padding: 56px 0;
  min-height: 460px;
  display: flex;
  align-items: center;
}

.fleximo-product-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}

.fleximo-product-hero__row .page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: none;
}

.fleximo-product-hero__accent {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
  margin-bottom: 18px;
}

.fleximo-product-hero__media {
  display: flex;
  justify-content: center;
}

.fleximo-product-hero__frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(250, 246, 239, 0.25);
  box-shadow: 0 30px 60px -30px rgba(10, 20, 14, 0.5);
}

.fleximo-product-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Restrained gold corner accent, echoing the About page's intro-image
   frame treatment — not a full decorative border. */
.fleximo-product-hero__frame::after {
  content: '';
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--fleximo-gold);
  border-top: none;
  border-left: none;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .fleximo-product-hero {
    min-height: 390px;
  }
}

/* The hero photo is desktop/tablet-only: keeping both a legible
   breadcrumb + heading + description AND a product photo within the
   suggested 300-360px mobile hero height isn't workable together, and
   the explanation section directly below already shows a full-width
   product photo first thing (image-before-text on mobile), so the
   photo is never actually missing from the mobile page — just not
   duplicated inside this compact banner too. */
@media (max-width: 767px) {
  .fleximo-product-hero {
    min-height: 330px;
    padding: 44px 0;
  }

  .fleximo-product-hero__row {
    grid-template-columns: 1fr;
  }

  .fleximo-product-hero__media {
    display: none;
  }
}

/* ---- 2. Product explanation ---- */
.fleximo-product-explain {
  background-color: var(--fleximo-ivory);
}

.fleximo-product-explain__row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.fleximo-product-explain__frame {
  order: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--fleximo-border);
  box-shadow: var(--shadow-card);
  /* 1:1, matching every uploaded product photo (hero, explanation and
     gallery images across all five categories are all 1254x1254) — on
     a matching-ratio box, object-fit: cover scales without cropping
     anything, which a narrower 4:5 box could not guarantee for every
     photo (doors need their full height kept intact; the Frames
     category in particular spreads its profiles across the photo's
     full width, which a narrower box would crop into). */
  aspect-ratio: 1 / 1;
}

.fleximo-product-explain__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fleximo-product-explain__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fleximo-product-explain__content {
  order: 2;
}

.fleximo-product-explain__copy {
  color: var(--fleximo-text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* Desktop-only alternation: the image swaps to the right on pages that
   opt into it (Carving Doors, Boards), for visual variety across the
   five pages. */
.fleximo-product-explain__row--reverse .fleximo-product-explain__frame {
  order: 2;
}

.fleximo-product-explain__row--reverse .fleximo-product-explain__content {
  order: 1;
}

@media (max-width: 1024px) {
  .fleximo-product-explain__row {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  /* The image always comes first on mobile, regardless of the
     desktop-only --reverse modifier above — both selectors are reset
     to the same order here. */
  .fleximo-product-explain__row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fleximo-product-explain__frame,
  .fleximo-product-explain__row--reverse .fleximo-product-explain__frame {
    order: 1;
  }

  .fleximo-product-explain__content,
  .fleximo-product-explain__row--reverse .fleximo-product-explain__content {
    order: 2;
  }
}

/* ---- 3. Quality & key benefits ----
   A 2x2 technical-sheet-style grid (2-column on desktop) rather than a
   single row of four or a plain vertical list — thin gold/cream
   dividers between cells, like a printed spec sheet's rule lines. */
.fleximo-product-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid var(--fleximo-gold);
  border-left: 1px solid var(--fleximo-border);
}

.fleximo-product-feature {
  padding: 28px;
  border-right: 1px solid var(--fleximo-border);
  border-bottom: 1px solid var(--fleximo-border);
}

.fleximo-product-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: rgba(20, 76, 38, 0.08);
  color: var(--fleximo-green);
}

.fleximo-product-feature__icon svg {
  width: 24px;
  height: 24px;
}

.fleximo-product-feature__title {
  font-size: 1.05rem;
  color: var(--fleximo-text-dark);
  margin: 0 0 8px;
}

.fleximo-product-feature__desc {
  color: var(--fleximo-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-product-feature:nth-child(2) {
    transition-delay: 0.08s;
  }

  .fleximo-product-feature:nth-child(3) {
    transition-delay: 0.16s;
  }

  .fleximo-product-feature:nth-child(4) {
    transition-delay: 0.24s;
  }
}

@media (max-width: 767px) {
  .fleximo-product-feature-grid {
    grid-template-columns: 1fr;
    border-left: none;
  }

  .fleximo-product-feature {
    border-right: none;
    padding: 22px 0;
  }
}

/* ---- Boards-only technical-sheet panel ---- */
.fleximo-product-board-panel {
  margin-top: 56px;
  padding: 40px;
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.fleximo-product-board-panel__heading {
  font-size: 1.25rem;
  color: var(--fleximo-green);
  margin: 0 0 24px;
}

.fleximo-product-board-panel__rows {
  margin: 0 0 28px;
}

.fleximo-product-board-panel__row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--fleximo-border);
}

.fleximo-product-board-panel__row:first-child {
  border-top: 1px solid var(--fleximo-gold);
}

.fleximo-product-board-panel__row dt {
  font-weight: 700;
  color: var(--fleximo-text-dark);
  font-size: 0.92rem;
}

.fleximo-product-board-panel__row dd {
  margin: 0;
  color: var(--fleximo-text-muted);
  font-size: 0.92rem;
}

@media (max-width: 600px) {
  .fleximo-product-board-panel {
    padding: 28px 22px;
  }

  .fleximo-product-board-panel__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---- 4. Gallery ---- */
.fleximo-product-gallery-section {
  background-color: var(--color-white);
}

.fleximo-product-gallery__intro {
  max-width: 700px;
  margin: 0 0 40px;
}

.fleximo-product-gallery__intro p {
  color: var(--fleximo-text-muted);
  font-size: 1.05rem;
}

.fleximo-product-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.fleximo-product-gallery__item {
  margin: 0;
}

.fleximo-product-gallery__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fleximo-product-gallery__media {
  position: relative;
  display: flex;
  /* 1:1 — every uploaded gallery photo (all five product folders) is
     1254x1254; matching that ratio here means object-fit: cover scales
     to fit without cropping any of the door/board/frame content, and
     every card (real photo or placeholder) shares the exact same
     frame height for a clean, even grid. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  background-color: var(--fleximo-ivory);
  transition: border-color 0.2s var(--ease);
}

.fleximo-product-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}

.fleximo-product-gallery__trigger:hover .fleximo-product-gallery__media,
.fleximo-product-gallery__trigger:focus-visible .fleximo-product-gallery__media {
  border-color: var(--fleximo-gold);
}

.fleximo-product-gallery__trigger:hover .fleximo-product-gallery__media img,
.fleximo-product-gallery__trigger:focus-visible .fleximo-product-gallery__media img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-product-gallery__media img {
    transition: none;
  }

  .fleximo-product-gallery__trigger:hover .fleximo-product-gallery__media img,
  .fleximo-product-gallery__trigger:focus-visible .fleximo-product-gallery__media img {
    transform: none;
  }
}

/* Placeholder gallery slots — no real photo yet (see the code comment
   above each one in page-wpc-product.php for how to replace it). Not
   wrapped in a <button>: there is nothing to open in a lightbox, so it
   is presentational only rather than a focusable no-op control. */
.fleximo-product-gallery__media--placeholder {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-style: dashed;
  color: var(--fleximo-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.fleximo-product-gallery__media--placeholder svg {
  width: 32px;
  height: 32px;
  color: var(--fleximo-gold);
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-product-gallery__item:nth-child(2) {
    transition-delay: 0.06s;
  }

  .fleximo-product-gallery__item:nth-child(3) {
    transition-delay: 0.12s;
  }

  .fleximo-product-gallery__item:nth-child(4) {
    transition-delay: 0.18s;
  }

  .fleximo-product-gallery__item:nth-child(5) {
    transition-delay: 0.24s;
  }

  .fleximo-product-gallery__item:nth-child(6) {
    transition-delay: 0.3s;
  }
}

@media (max-width: 1024px) {
  .fleximo-product-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .fleximo-product-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 5. Related products ---- */
.fleximo-product-related {
  background-color: var(--color-ivory-dim);
}

.fleximo-product-related__heading {
  margin-bottom: 24px;
}

.fleximo-product-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fleximo-product-related__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  color: var(--fleximo-green);
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fleximo-product-related__link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}

.fleximo-product-related__link:hover,
.fleximo-product-related__link:focus-visible {
  border-color: var(--fleximo-gold);
  background-color: var(--fleximo-ivory);
  transform: translateY(-2px);
}

.fleximo-product-related__link:hover svg,
.fleximo-product-related__link:focus-visible svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-product-related__link:hover,
  .fleximo-product-related__link:focus-visible {
    transform: none;
  }
}

/* ---- 6. Final CTA — reuses the sitewide .fleximo-cta component as-is
   (same treatment as .fleximo-about-cta on the About page); only two
   page-scoped tweaks, neither touching the homepage's own instance. ---- */
.fleximo-product-cta {
  padding-bottom: 120px;
}

.fleximo-product-cta .fleximo-cta__btn {
  min-height: 48px;
}

@media (max-width: 767px) {
  .fleximo-product-cta {
    padding-bottom: 96px;
  }
}

/* ==========================================================================
   Product image lightbox
   Namespace: .fleximo-lightbox. Opened by .fleximo-product-gallery__
   trigger buttons (script.js: initFleximoProductGallery()). z-index 190
   — above ordinary page content, the header, the 360° panorama and its
   Pannellum controls, the floating WhatsApp/catalogue widgets, and the
   .nav-overlay backdrop (150), but intentionally still below the mobile
   drawer (200) so an open mobile menu always stays on top of it, per
   the same layering rule used for the floating action buttons.

   .fleximo-lightbox__dialog is the positioning context for the close
   button and both nav arrows — they are anchored to ITS box via
   position:absolute, never laid out as flex siblings of the image. The
   previous layout had prev/img/next as a single flex row: a plain
   <img> as a flex item has an automatic minimum width equal to its
   INTRINSIC size (1254px) unless something overrides it, so on narrow
   viewports the row refused to shrink below roughly
   44 + 1254 + 44 (+gaps) — far wider than the screen — and the centred
   row simply overflowed equally off both the left and right edges,
   leaving only slivers of the prev/next buttons on-screen (the
   reported "controls outside the viewport" bug). Making the image
   purely a sized, centred child of the dialog and the nav buttons
   independently absolute-positioned removes that dependency entirely,
   so the controls' position no longer has anything to do with how the
   image happens to size itself, at any viewport width.

   Stacking order inside the dialog: 0) backdrop, 1) dialog/image,
   2) nav controls, 3) close button — matching the required
   background → image → controls → close order without resorting to
   arbitrary large z-index values anywhere. ---- */
.fleximo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fleximo-lightbox[hidden] {
  display: none;
}

.fleximo-lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(15, 20, 17, 0.88);
}

.fleximo-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(94vw, 1100px);
  max-height: 94vh;
  max-height: 94dvh;
  padding: 0 76px;
}

.fleximo-lightbox__img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  min-width: 0;
  max-height: 94vh;
  max-height: 94dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background-color: var(--fleximo-ivory);
}

/* ---- Close button: inset within the dialog's own box (never a
   negative offset above/beside it), so it can never land outside a
   short or landscape viewport the way a fixed "top: -48px" would. ---- */
.fleximo-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(211, 156, 57, 0.5);
  border-radius: 50%;
  background-color: rgba(20, 76, 38, 0.85);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  color: var(--fleximo-ivory);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.fleximo-lightbox__close svg {
  width: 20px;
  height: 20px;
}

.fleximo-lightbox__close:hover {
  background-color: var(--fleximo-green);
}

.fleximo-lightbox__close:active {
  transform: scale(0.92);
}

/* ---- Prev/next: absolute within the dialog, vertically centred,
   inset from the dialog's own left/right edges (which already sit
   safely inside the viewport via the dialog's own width calc) rather
   than the raw viewport edge, plus a safe-area floor for notched
   devices. A solid deep-green circle with a muted-gold border and a
   cream arrow keeps them readable over both light and dark product
   photos. ---- */
.fleximo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(211, 156, 57, 0.5);
  border-radius: 50%;
  background-color: rgba(20, 76, 38, 0.85);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  color: var(--fleximo-ivory);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.fleximo-lightbox__nav--prev {
  left: max(12px, env(safe-area-inset-left));
}

.fleximo-lightbox__nav--next {
  right: max(12px, env(safe-area-inset-right));
}

.fleximo-lightbox__nav[hidden] {
  display: none;
}

.fleximo-lightbox__nav svg {
  width: 20px;
  height: 20px;
}

.fleximo-lightbox__nav:hover {
  background-color: var(--fleximo-green);
}

.fleximo-lightbox__nav:active {
  transform: translateY(-50%) scale(0.92);
}

.fleximo-lightbox__close:focus-visible,
.fleximo-lightbox__nav:focus-visible {
  outline: 2px solid var(--fleximo-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-lightbox__close,
  .fleximo-lightbox__nav {
    transition: none;
  }
}

body.lightbox-open {
  overflow: hidden;
}

/* ---- Mobile/tablet: buttons keep the same absolute-within-dialog
   approach, just with a little less side padding so the image still
   gets most of the narrower width. Both controls stay fully inside the
   dialog (itself inset 12px from the viewport edge via its own
   width calc), never depending on the image's own rendered size. ---- */
@media (max-width: 768px) {
  .fleximo-lightbox__dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    /* Unchanged: 60px = the 48px nav button + its 12px safe-area inset,
       the minimum gutter that keeps the enlarged image from reaching
       under either control. */
    padding: 0 60px;
  }

  .fleximo-lightbox__img {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}


/* ==========================================================================
   Contact Page (/contact-us/)
   Namespace: .fleximo-contact-. Replaces the old .contact-*/.form-*/
   .map-* rules entirely (removed above) — reuses .page-hero /
   .breadcrumb, .section / .container, .reveal + initScrollReveal() and
   .fleximo-cta exactly as the About/product pages do, plus this page's
   own scoped classes.
   ========================================================================== */

/* ---- Shared eyebrow/heading pair, matching the identical pattern
   already used by .fleximo-about-label/__heading and
   .fleximo-product-label/__heading. ---- */
.fleximo-contact-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin: 0 0 14px;
}

.fleximo-contact-heading {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--fleximo-green);
  line-height: 1.2;
  margin: 0 0 16px;
}

/* ---- Small generic addition to the shared .fleximo-cta component: a
   transparent/outline secondary button variant with the exact same
   look as .fleximo-cta__btn--whatsapp, under a name that isn't
   WhatsApp-specific (used here for "Call Now"; available to any future
   .fleximo-cta instance that needs a second, non-WhatsApp action). ---- */
.fleximo-cta__btn--outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--fleximo-ivory);
}

.fleximo-cta__btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---- 1. Hero ----
   Same image + overlay treatment as .fleximo-about-hero (full-bleed
   photo behind the text, dark-green gradient for contrast). */
.fleximo-contact-hero {
  background: none;
  padding: 0;
  min-height: 430px;
  display: flex;
  align-items: center;
}

.fleximo-contact-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fleximo-contact-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.fleximo-contact-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(15, 36, 24, 0.94) 0%, rgba(15, 36, 24, 0.86) 34%, rgba(15, 36, 24, 0.55) 62%, rgba(15, 36, 24, 0.22) 100%);
  pointer-events: none;
}

.fleximo-contact-hero .page-hero__inner {
  position: relative;
  z-index: 1;
  /* padding-top/-bottom ONLY — see the identical note on
     .fleximo-about-hero .page-hero__inner above: a `padding` shorthand
     here was zeroing out the horizontal padding .container (padding: 0
     24px) already applied to this same element, which is what pushed
     the hero text flush against the mobile viewport edges. */
  padding-top: 56px;
  padding-bottom: 56px;
}

.fleximo-contact-hero__accent {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
  margin-bottom: 18px;
}

@media (max-width: 1024px) {
  .fleximo-contact-hero {
    min-height: 370px;
  }
}

@media (max-width: 767px) {
  .fleximo-contact-hero {
    min-height: 310px;
  }

  .fleximo-contact-hero .page-hero__inner {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

/* ---- 2. Contact details + enquiry form ---- */
.fleximo-contact-main {
  background-color: var(--fleximo-ivory);
}

.fleximo-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.fleximo-contact-panel__copy {
  color: var(--fleximo-text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 28px;
}

.fleximo-contact-panel__list {
  display: flex;
  flex-direction: column;
  margin: 0 0 28px;
}

.fleximo-contact-panel__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--fleximo-border);
}

.fleximo-contact-panel__item:first-child {
  border-top: 1px solid var(--fleximo-gold);
}

.fleximo-contact-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(20, 76, 38, 0.08);
  color: var(--fleximo-green);
}

.fleximo-contact-panel__icon svg {
  width: 20px;
  height: 20px;
}

.fleximo-contact-panel__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin: 0 0 4px;
}

.fleximo-contact-panel__value {
  display: block;
  color: var(--fleximo-text-dark);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}

a.fleximo-contact-panel__value:hover {
  color: var(--fleximo-green);
}

.fleximo-contact-panel__whatsapp {
  width: 100%;
  /* Overrides .btn's own justify-content: center — a leading icon
     with no trailing element to anchor against, so a plain flex-start
     keeps the icon on the left and the label immediately after it. */
  justify-content: flex-start;
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-contact-panel__item:nth-child(2) {
    transition-delay: 0.06s;
  }

  .fleximo-contact-panel__item:nth-child(3) {
    transition-delay: 0.12s;
  }
}

/* ---- Enquiry form ---- */
.fleximo-contact-form {
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
}

.fleximo-contact-form__intro {
  margin: 0 0 28px;
}

.fleximo-contact-form__intro p {
  color: var(--fleximo-text-muted);
  font-size: 1rem;
  margin-top: 8px;
}

.fleximo-contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.fleximo-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.fleximo-contact-form__row .fleximo-contact-form__field {
  margin-bottom: 0;
}

.fleximo-contact-form__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fleximo-text-dark);
}

.fleximo-contact-form__required {
  color: var(--fleximo-gold);
  margin-left: 2px;
}

.fleximo-contact-form__input,
.fleximo-contact-form__select,
.fleximo-contact-form__textarea {
  font: inherit;
  font-size: 0.98rem;
  padding: 13px 16px;
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-sm);
  background-color: var(--fleximo-ivory);
  color: var(--fleximo-text-dark);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  width: 100%;
  min-height: 48px;
}

.fleximo-contact-form__input:focus,
.fleximo-contact-form__select:focus,
.fleximo-contact-form__textarea:focus {
  outline: none;
  border-color: var(--fleximo-green);
  box-shadow: 0 0 0 3px rgba(20, 76, 38, 0.16);
}

.fleximo-contact-form__textarea {
  resize: vertical;
  min-height: 140px;
}

.fleximo-contact-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23144c26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
}

/* Honeypot: visually hidden, but not display:none/aria-hidden — real
   assistive-tech users never reach it via normal tab order (tabindex
   -1), while bots that indiscriminately fill every field still do. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fleximo-contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 24px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fleximo-text-dark);
}

.fleximo-contact-form__consent input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--fleximo-green);
}

.fleximo-contact-form__submit {
  display: inline-flex;
  align-items: center;
  /* A left-aligned row (label flush left, trailing icon pushed to the
     far right via its own margin-left: auto below) instead of
     centring "label + icon" as one block. */
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background-color: var(--fleximo-green);
  color: var(--fleximo-ivory);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fleximo-contact-form__submit svg {
  width: 18px;
  height: 18px;
  margin-left: auto;
}

.fleximo-contact-form__submit:hover {
  background-color: var(--fleximo-text-dark);
  transform: translateY(-2px);
}

.fleximo-contact-form__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-contact-form__submit:hover {
    transform: none;
  }
}

.fleximo-contact-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.fleximo-contact-alert svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.fleximo-contact-alert--success {
  background-color: #e7f3ea;
  color: #1f3d2b;
  border: 1px solid #b9d9c2;
}

.fleximo-contact-alert--error {
  background-color: #fbeceb;
  color: #7a2b23;
  border: 1px solid #eec3bd;
}

@media (max-width: 1024px) {
  .fleximo-contact-grid {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .fleximo-contact-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .fleximo-contact-form {
    padding: 24px;
  }

  .fleximo-contact-form__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---- 3. Quick product-selection strip ---- */
.fleximo-contact-products {
  background-color: var(--color-ivory-dim);
}

.fleximo-contact-products__intro {
  max-width: 700px;
  margin: 0 0 32px;
}

.fleximo-contact-products__intro p {
  color: var(--fleximo-text-muted);
  font-size: 1.02rem;
}

.fleximo-contact-products__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.fleximo-contact-products__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  color: var(--fleximo-green);
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fleximo-contact-products__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--fleximo-gold);
}

.fleximo-contact-products__item:hover,
.fleximo-contact-products__item:focus-visible {
  border-color: var(--fleximo-gold);
  background-color: var(--fleximo-ivory);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: no-preference) {
  .fleximo-contact-products__grid > :nth-child(2) {
    transition-delay: 0.06s;
  }

  .fleximo-contact-products__grid > :nth-child(3) {
    transition-delay: 0.12s;
  }

  .fleximo-contact-products__grid > :nth-child(4) {
    transition-delay: 0.18s;
  }

  .fleximo-contact-products__grid > :nth-child(5) {
    transition-delay: 0.24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-contact-products__item:hover {
    transform: none;
  }
}

/* ---- 4. Map ---- */
.fleximo-contact-map {
  background-color: var(--color-white);
}

.fleximo-contact-map__desc {
  color: var(--fleximo-text-muted);
  max-width: 72ch;
  font-size: 1.02rem;
  margin-bottom: 32px;
}

.fleximo-contact-map__frame {
  position: relative;
  width: 100%;
  padding-top: 42%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--fleximo-gold);
  background-color: var(--color-ivory-dim);
}

.fleximo-contact-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.fleximo-contact-map__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

.fleximo-contact-map__address {
  font-weight: 600;
  color: var(--fleximo-text-dark);
  font-size: 1.02rem;
  max-width: 60ch;
}

.fleximo-contact-map__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 999px;
  background-color: var(--fleximo-green);
  color: var(--fleximo-ivory);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.fleximo-contact-map__cta:hover {
  background-color: var(--fleximo-text-dark);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-contact-map__cta:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  .fleximo-contact-map__frame {
    padding-top: 100%;
  }

  .fleximo-contact-map__footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  /* .fleximo-contact-map__footer's align-items: stretch above already
     stretches this button to the full row width. A left-aligned row
     (label flush left, arrow pushed to the far right via its own
     margin-left: auto) keeps label and arrow apart regardless of
     label length, rather than centring them as one block. */
  .fleximo-contact-map__cta {
    justify-content: flex-start;
  }

  .fleximo-contact-map__cta svg {
    margin-left: auto;
  }
}

/* ---- 5. Final assistance CTA — reuses .fleximo-cta as-is (same
   treatment as .fleximo-about-cta / .fleximo-product-cta). ---- */
.fleximo-contact-cta {
  padding-bottom: 120px;
}

.fleximo-contact-cta .fleximo-cta__btn {
  min-height: 48px;
}

@media (max-width: 767px) {
  .fleximo-contact-cta {
    padding-bottom: 96px;
  }
}

/* ==========================================================================
   Legal Pages (/privacy-policy/, /terms-and-conditions/)
   Namespace: .fleximo-legal-. Deliberately restrained — no reveal
   animation, no hero photo — reuses .page-hero / .breadcrumb, .section
   / .container exactly as the other inner pages do.
   ========================================================================== */

/* ---- 1. Hero ----
   No image/overlay layer at all: .page-hero's own flat deep-green
   gradient background is used completely unmodified, and the section
   is kept noticeably shorter than the photo-led About/Contact/product
   heroes, as required for a plain legal-page banner. */
.fleximo-legal-hero {
  min-height: 260px;
  display: flex;
  align-items: center;
}

.fleximo-legal-hero .page-hero__inner {
  /* padding-top/-bottom only, never the `padding` shorthand — see the
     identical note on .fleximo-about-hero / .fleximo-contact-hero
     .page-hero__inner elsewhere in this file: a shorthand here would
     zero out the horizontal padding .container already applies to
     this same element. */
  padding-top: 48px;
  padding-bottom: 48px;
}

.fleximo-legal-hero__accent {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background-color: var(--fleximo-gold);
  margin-bottom: 18px;
}

@media (max-width: 1024px) {
  .fleximo-legal-hero {
    min-height: 220px;
  }
}

@media (max-width: 767px) {
  .fleximo-legal-hero {
    min-height: 200px;
  }

  .fleximo-legal-hero .page-hero__inner {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* ---- 2/3/4. Table of contents + main article ---- */
.fleximo-legal-body {
  background-color: var(--fleximo-ivory);
}

.fleximo-legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.fleximo-legal-toc {
  position: sticky;
  /* Reuses the same --header-height custom property the sticky header
     itself sizes against (already redefined per breakpoint), so this
     offset — and every section's scroll-margin-top below — stay
     correct automatically at every viewport without a duplicated set
     of breakpoint-specific pixel values. */
  top: calc(var(--header-height) + 24px);
}

.fleximo-legal-toc__heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
  margin: 0 0 14px;
}

.fleximo-legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--fleximo-border);
}

.fleximo-legal-toc a {
  display: block;
  padding: 8px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.9rem;
  color: var(--fleximo-text-muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.fleximo-legal-toc a:hover,
.fleximo-legal-toc a:focus-visible {
  color: var(--fleximo-green);
  border-left-color: var(--fleximo-gold);
}

.fleximo-legal-article {
  max-width: 72ch;
  color: var(--fleximo-text-dark);
}

.fleximo-legal-updated {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fleximo-text-muted);
  margin: 0 0 10px;
}

.fleximo-legal-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fleximo-text-muted);
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--fleximo-border);
}

.fleximo-legal-section {
  margin-bottom: 44px;
  /* Keeps an anchor-jumped-to heading clear of the sticky header, at
     every breakpoint, via the same --header-height variable used
     above. */
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.fleximo-legal-section:last-of-type {
  margin-bottom: 0;
}

.fleximo-legal-section__title {
  font-size: 1.3rem;
  color: var(--fleximo-green);
  margin: 0 0 16px;
}

.fleximo-legal-section p {
  color: var(--fleximo-text-dark);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 14px;
}

.fleximo-legal-section p:last-child {
  margin-bottom: 0;
}

.fleximo-legal-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fleximo-legal-list li {
  position: relative;
  padding-left: 22px;
  color: var(--fleximo-text-dark);
  line-height: 1.6;
}

.fleximo-legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--fleximo-gold);
  pointer-events: none;
}

/* ---- 5. Contact panel ---- */
.fleximo-legal-contact {
  padding: 28px;
  background-color: var(--color-white);
  border: 1px solid var(--fleximo-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.fleximo-legal-contact__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fleximo-legal-contact__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.fleximo-legal-contact__label {
  min-width: 80px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fleximo-gold);
}

.fleximo-legal-contact__value {
  color: var(--fleximo-text-dark);
  font-weight: 600;
}

a.fleximo-legal-contact__value:hover {
  color: var(--fleximo-green);
}

/* ---- 6. Cross-link to the other legal page ---- */
.fleximo-legal-crosslink {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--fleximo-border);
}

.fleximo-legal-crosslink a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--fleximo-green);
}

.fleximo-legal-crosslink svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s var(--ease);
}

.fleximo-legal-crosslink a:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .fleximo-legal-crosslink a:hover svg {
    transform: none;
  }
}

@media (max-width: 1024px) {
  .fleximo-legal-layout {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 40px;
  }
}

/* Table of contents becomes a normal stacked list ahead of the
   article, rather than a sticky sidebar, once there is no longer room
   for a genuine two-column layout. */
@media (max-width: 900px) {
  .fleximo-legal-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .fleximo-legal-toc {
    position: static;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fleximo-border);
  }
}