/* ==========================================================================
   Jameck Services India (P) Ltd. — Core stylesheet
   --------------------------------------------------------------------------
   STRUCTURE
     01. Design tokens (:root)   <- RE-THEME HERE. Change these, not the rules.
     02. Reset & base
     03. Layout helpers
     04. Typography blocks
     05. Buttons & links
     06. Placeholder media  (.ph)  <- swap these blocks for real <img> later
     07. Site header & navigation
     08. Site footer
     09. Hero (home) & page hero (inner pages)
     10. Stats / counters
     11. Card systems
     12. Marquee (certification logos)
     13. Global reach
     14. Testimonials slider
     15. CTA banner
     16. About page (mission, timeline, team)
     17. Products page (filter grid)
     18. Product detail page
     19. Certifications page
     20. Gallery page + lightbox
     21. Contact page (form, info, map placeholder)
     22. Floating actions (WhatsApp, back-to-top)
     23. Responsive breakpoints
   Animation-only rules live in animations.css.
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   Everything visual is driven from here. When the real brand kit arrives,
   edit this block and the whole site re-themes.
   ========================================================================== */
:root {
  /* --- Brand: deep navy → azure (primary / trust). Matches Template 2. --- */
  --brand-900: #0B2239;
  --brand-800: #0E3350;
  --brand-700: #0369A1;
  --brand-600: #0284C7;
  --brand-500: #0EA5E9;
  --brand-400: #7DD3FC;
  --brand-200: #BAE6FD;
  --brand-100: #E0F2FE;

  /* --- Accent: cyan (secondary / CTA highlights) --- */
  --accent-700: #0E7490;
  --accent-600: #0891B2;
  --accent-500: #06B6D4;
  --accent-300: #67E8F9;
  --accent-100: #CFFAFE;

  /* --- Bright cyan highlight (hero em, active dots) --- */
  --ochre-600: #0891B2;
  --ochre-500: #22D3EE;
  --ochre-200: #CFFAFE;

  /* --- Neutrals: cool paper + slate ink (Template 2) --- */
  --sand-50:  #F8FAFC;
  --sand-100: #F1F5F9;
  --sand-200: #E7EDF3;
  --sand-300: #D8E0EA;
  --ink:       #334155;
  --ink-soft:  #475569;
  --ink-muted: #64748B;
  --white:     #FFFFFF;

  /* --- Semantic aliases (use these in rules, not raw scale values) --- */
  --color-bg: var(--sand-50);
  --color-bg-alt: var(--sand-100);
  --color-surface: var(--white);
  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-text-muted: var(--ink-muted);
  --color-heading: var(--brand-900);
  --color-primary: var(--brand-700);
  --color-accent: var(--accent-600);
  --color-border: var(--sand-200);
  --color-border-strong: var(--sand-300);
  --color-focus: var(--accent-600);

  /* --- Typography — Inter + JetBrains Mono (matches Template 2) --- */
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  /* Aurora tint used on the body background */
  --aurora: radial-gradient(1100px 560px at 82% -12%, rgba(2,132,199,.10), transparent 60%),
            radial-gradient(820px 460px at 6% 6%, rgba(6,182,212,.08), transparent 58%);

  --fs-eyebrow: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-base: 1.0rem;
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.24rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-h3: clamp(1.3rem, 1.18rem + 0.6vw, 1.65rem);
  --fs-h2: clamp(1.85rem, 1.5rem + 1.6vw, 3rem);
  --fs-h1: clamp(2.35rem, 1.7rem + 3vw, 4.15rem);

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --section-y: clamp(4rem, 8vw, 7.5rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 820px;
  --container-pad: clamp(1.15rem, 4vw, 2.5rem);
  --header-h: 84px;
  --header-h-scrolled: 66px;

  /* --- Radii (sharper, Template 2) --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Elevation (cool slate, Template 2) --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 14px 34px -16px rgba(15, 23, 42, 0.20);
  --shadow-lg: 0 30px 60px -28px rgba(15, 23, 42, 0.28);

  /* --- Motion (expo.out, Template 2) --- */
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* --- Placeholder blocks --- */
  --ph-bg: var(--brand-100);
  --ph-bg-alt: var(--sand-200);
  --ph-fg: var(--brand-600);
  --ph-border: var(--brand-200);

  --z-header: 100;
  --z-nav-overlay: 110;
  --z-float: 90;
  --z-lightbox: 200;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--color-bg);
  background-image: var(--aurora);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Template 2 signature: monospaced eyebrows / stat figures. */
.eyebrow { font-family: var(--font-mono); letter-spacing: 0.14em; }
.stat__num { font-family: var(--font-mono); }

/* Locks background scrolling while the mobile nav or lightbox is open. */
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--color-heading);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.022em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }

a {
  color: var(--color-primary);
  text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-accent); text-decoration-color: currentColor; }

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

button, input, select, textarea { font: inherit; color: inherit; }

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

/* Visible focus states everywhere (accessibility requirement). */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--ochre-200); color: var(--ink); }

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

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-900);
  color: var(--white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--white); }

/* ==========================================================================
   03. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt { background: var(--color-bg-alt); }
/* "Dark" section kept as a soft tinted panel so the page stays airy. */
.section--dark {
  background: linear-gradient(180deg, var(--brand-100), var(--sand-100));
  color: var(--ink);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--brand-900); }
.section--dark .section-head__text { color: var(--ink-soft); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-lg { gap: var(--sp-6); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.stack > * + * { margin-top: var(--sp-4); }

/* ==========================================================================
   04. TYPOGRAPHY BLOCKS
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-600);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.section--dark .eyebrow { color: var(--accent-600); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head__text {
  font-size: var(--fs-lead);
  color: var(--color-text-soft);
  margin-bottom: 0;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--color-text-soft);
}

/* Small decorative rule used under headings in a few places. */
.rule {
  width: 54px;
  height: 3px;
  background: var(--ochre-500);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-5);
}
.section-head--center .rule { margin-inline: auto; }

/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */
.btn {
  --btn-bg: var(--brand-700);
  --btn-fg: var(--white);
  --btn-bd: var(--brand-700);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.6rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
/* Subtle fill sweep on hover (micro-interaction). */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn:hover,
.btn:focus-visible {
  color: var(--white);
  border-color: var(--accent-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--accent-600); --btn-bd: var(--accent-600); }
.btn--accent::before { background: var(--brand-700); }
.btn--accent:hover, .btn--accent:focus-visible { border-color: var(--brand-700); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--brand-800); --btn-bd: var(--brand-800); }

.btn--light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.55); }
.btn--light::before { background: var(--white); }
.btn--light:hover, .btn--light:focus-visible { color: var(--brand-900); border-color: var(--white); }

.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.82rem; }
.btn--lg { padding: 1.02rem 2rem; font-size: 0.98rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Text link with a travelling arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-600);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg,
a:hover .link-arrow svg,
.card:hover .link-arrow svg { transform: translateX(5px); }

/* ==========================================================================
   06. PLACEHOLDER MEDIA  (.ph)
   --------------------------------------------------------------------------
   HANDOFF NOTE: every .ph block is a stand-in for a real image.
   Replace the whole <figure class="ph ..."> with:
       <img src="assets/images/your-file.jpg" alt="Meaningful description">
   and keep the surrounding .media-frame wrapper for the hover-zoom effect.
   The label inside each block states the intended pixel dimensions.
   ========================================================================== */
.ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-4);
  aspect-ratio: 4 / 3;
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 11px,
    color-mix(in srgb, var(--ph-fg) 8%, transparent) 11px 12px
  );
  border: 1px dashed var(--ph-border);
  border-radius: var(--radius-md);
  color: var(--ph-fg);
  text-align: center;
  overflow: hidden;
}
.ph__icon { width: 34px; height: 34px; opacity: 0.75; }
.ph__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  opacity: 0.9;
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--3x4  { aspect-ratio: 3 / 4; }
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--tall { aspect-ratio: 2 / 3; }
.ph--free { aspect-ratio: auto; height: 100%; }
.ph--sand { --ph-bg: var(--ph-bg-alt); --ph-fg: var(--ink-muted); --ph-border: var(--sand-300); }
.ph--dark { --ph-bg: var(--brand-800); --ph-fg: var(--brand-200); --ph-border: var(--brand-600); }
.ph--round { border-radius: 50%; }

/* Fixed frame that clips the hover zoom. */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.media-frame > .ph,
.media-frame > img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .media-frame > .ph,
.card:hover .media-frame > img,
.media-frame:hover > .ph,
.media-frame:hover > img { transform: scale(1.06); }

/* ==========================================================================
   07. SITE HEADER & NAVIGATION
   Identical markup on all 7 pages — only the .is-active nav item changes.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--header-h);
  transition: height var(--dur) var(--ease-out);
}

/* Scrolled state: shrinks + gains background and shadow (set by main.js). */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--sand-50) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-scrolled); }
.site-header.is-scrolled .brand__mark { transform: scale(0.9); }

/* Homepage hero is a dark slideshow: header text is WHITE at the top, then
   flips to dark once the sticky header gains its background on scroll
   (.is-scrolled, toggled by main.js past ~60px). */
.site-header--over-hero .brand__name { color: #fff; text-shadow: 0 1px 4px rgba(8,20,30,.45); }
.site-header--over-hero .brand__sub { color: color-mix(in srgb, #fff 82%, transparent); text-shadow: 0 1px 4px rgba(8,20,30,.45); }
.site-header--over-hero .nav__link,
.site-header--over-hero .nav-toggle { color: #fff; }
.site-header--over-hero .nav__link { text-shadow: 0 1px 4px rgba(8,20,30,.35); }
.site-header--over-hero .nav__link::after { background: var(--accent-300); }
.site-header--over-hero .btn--ghost { --btn-fg: #fff; --btn-bd: color-mix(in srgb, #fff 55%, transparent); }
/* Scrolled: revert to the normal dark-on-light header. */
.site-header--over-hero.is-scrolled .brand__name,
.site-header--over-hero.is-scrolled .nav__link,
.site-header--over-hero.is-scrolled .nav-toggle { color: var(--brand-900); text-shadow: none; }
.site-header--over-hero.is-scrolled .brand__sub { color: var(--ink-muted); text-shadow: none; }
.site-header--over-hero.is-scrolled .nav__link::after { background: var(--accent-600); }
.site-header--over-hero.is-scrolled .btn--ghost { --btn-fg: var(--brand-800); --btn-bd: var(--brand-800); }

/* --- Brand wordmark -------------------------------------------------------
   PLACEHOLDER: text wordmark + monogram tile. When the real logo lands,
   replace the whole .brand contents with a single <img> and delete .brand__mark.
--------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand__mark {
  display: grid;
  place-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--brand-600), var(--brand-800));
  color: var(--ochre-500);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform var(--dur) var(--ease-out);
}
/* Real logo image: drop the placeholder square/gradient. */
img.brand__mark {
  background: none;
  box-shadow: none;
  border-radius: 0;
  object-fit: contain;
  width: 50px;
  height: 50px;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--brand-900);
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease-out);
}
.brand__sub {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease-out);
}

/* --- Desktop nav --- */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.15rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-900);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 2px;
  background: var(--accent-600);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--accent-600); }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--accent-600); }
.site-header--over-hero .nav__link.is-active { color: var(--accent-300); }
.site-header--over-hero.is-scrolled .nav__link.is-active { color: var(--accent-600); }

/* --- Products dropdown ---------------------------------------------------
   Desktop: a floating panel on hover / keyboard focus / caret click.
   Mobile:  collapses into an inline accordion inside the nav overlay
            (see the max-width: 960px block near the bottom of this file).
--------------------------------------------------------------------------- */
.nav__item { position: relative; }
.has-dropdown { display: flex; align-items: center; gap: 1px; }

.nav__caret {
  display: grid;
  place-content: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__caret svg { width: 14px; height: 14px; }
.has-dropdown:hover > .nav__caret,
.nav__caret[aria-expanded="true"] { color: var(--accent-600); }
.nav__caret[aria-expanded="true"] { transform: rotate(180deg); }
.site-header--over-hero .nav__caret { color: #fff; }
.site-header--over-hero.is-scrolled .nav__caret { color: var(--brand-900); }

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -0.75rem;
  z-index: 5;
  min-width: 250px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* Instant on open, deferred on close — same reasoning as the lightbox. */
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
/* Invisible bridge across the gap so the panel survives the mouse travelling
   from the link down into it. */
.has-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 16px;
}
.has-dropdown.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear 0s;
}
/* Hover-open only where hovering is real, so a tap on touch devices doesn't
   leave the panel stuck open. */
@media (hover: hover) and (min-width: 961px) {
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility 0s linear 0s;
  }
}

.dropdown__link {
  display: block;
  padding: 0.58rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--brand-800);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}
.dropdown__link:hover,
.dropdown__link:focus-visible {
  background: var(--brand-100);
  color: var(--accent-600);
  padding-left: 1.05rem;
}
.dropdown [role="separator"] {
  height: 1px;
  margin: 0.35rem 0.6rem;
  background: var(--color-border);
}

.header-cta { flex: none; }

/* CTA duplicated inside the nav panel — only shown at mobile widths. */
.nav__cta { display: none; }

/* --- Hamburger --- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-900);
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex: none;
}
.nav-toggle__box {
  position: relative;
  display: block;
  width: 24px; height: 16px;
  margin-inline: auto;
}
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              width var(--dur) var(--ease-out);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; width: 70%; }
.nav-toggle__bar:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dim layer behind the mobile nav panel. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav-overlay) - 1);
  background: rgba(8, 32, 30, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
body.nav-open .nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear 0s;
}
/* The header is a stacking context, so the nav panel inside it is trapped at
   the header's z-index. When the menu opens, lift the whole header above the
   scrim so the panel and its links sit above the scrim and receive taps. */
body.nav-open .site-header { z-index: calc(var(--z-nav-overlay) + 5); }

/* ==========================================================================
   08. SITE FOOTER
   ========================================================================== */
.site-footer {
  background: var(--brand-900);
  color: var(--brand-200);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--ochre-500), var(--accent-600));
}
.site-footer a { color: var(--brand-200); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ochre-500); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--sp-8);
}
.footer-brand .brand { margin-right: 0; margin-bottom: var(--sp-4); }
.footer-brand .brand__name { color: var(--white); }
.footer-brand .brand__sub { color: var(--brand-400); }
.footer-brand p { font-size: var(--fs-sm); line-height: 1.75; max-width: 38ch; }

.footer-col__title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-4);
}
.footer-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.footer-list li + li { margin-top: 0.7rem; }
.footer-list a {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.footer-list a:hover { transform: translateX(4px); }

.footer-contact { list-style: none; margin: 0 0 var(--sp-5); padding: 0; font-size: var(--fs-sm); }
.footer-contact li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  line-height: 1.6;
}
.footer-contact li + li { margin-top: var(--sp-3); }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--ochre-500); }

/* Newsletter — PLACEHOLDER ONLY, no backend wired up. */
.newsletter { margin-top: var(--sp-5); }
.newsletter__row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.newsletter input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand-600);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-size: var(--fs-sm);
}
.newsletter input::placeholder { color: var(--brand-400); }
.newsletter input:focus-visible { outline-color: var(--ochre-500); }

.social-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.social-row a {
  display: grid;
  place-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--brand-600);
  color: var(--brand-200);
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.social-row a:hover,
.social-row a:focus-visible {
  background: var(--ochre-500);
  border-color: var(--ochre-500);
  color: var(--brand-900);
  transform: translateY(-3px);
}
.social-row svg { width: 18px; height: 18px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--brand-700);
  font-size: 0.82rem;
  color: var(--brand-400);
}
.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  margin: 0; padding: 0;
}

/* ==========================================================================
   09. HERO (home) & PAGE HERO (inner pages)
   ========================================================================== */
/* Light & airy hero: warm paper with a soft sage/ochre glow, dark text. */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--ochre-500) 22%, transparent), transparent 60%),
    radial-gradient(820px 460px at 4% 4%, color-mix(in srgb, var(--brand-400) 18%, transparent), transparent 58%),
    var(--sand-50);
  color: var(--ink);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  top: -18%; right: -12%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ochre-500) 20%, transparent), transparent 68%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { color: var(--brand-900); margin-bottom: var(--sp-5); }
.hero h1 em {
  font-style: normal;
  color: var(--accent-600);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.hero__sub {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.42rem 0.95rem 0.42rem 0.55rem;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--sand-300);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__badge span {
  display: grid;
  place-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ochre-500);
  color: var(--brand-900);
}
.hero__badge svg { width: 13px; height: 13px; }

.hero__media { position: relative; }
.hero__media .ph { --ph-bg: var(--brand-100); --ph-fg: var(--brand-600); --ph-border: var(--brand-200); }
/* Small floating stat card overlapping the hero image. */
.hero__float {
  position: absolute;
  left: -1.5rem; bottom: -1.5rem;
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 190px;
}
.hero__float strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--brand-800);
}
.hero__float span {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
}
.hero__scroll svg { width: 18px; height: 18px; color: var(--accent-600); }

/* --------------------------------------------------------------------------
   HOME HERO SLIDESHOW (export) — full-bleed rotating port/ship imagery with
   overlaid text. Slides crossfade; JS (initHeroSlider) toggles .is-active and
   pauses under reduced motion. One slideshow per page.
   -------------------------------------------------------------------------- */
.hero--slideshow {
  padding: 0;
  min-height: min(90vh, 780px);
  display: flex;
  align-items: flex-end;
  background: var(--brand-900);
  color: var(--white);
}
.hero--slideshow::after { content: none; }

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 7s ease;
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
/* Readability wash — darker at the left where the text sits. */
.hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      color-mix(in srgb, var(--brand-900) 88%, transparent) 0%,
      color-mix(in srgb, var(--brand-900) 62%, transparent) 42%,
      color-mix(in srgb, var(--brand-900) 20%, transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--brand-900) 72%, transparent) 0%,
      transparent 48%);
}

.hero--slideshow .hero__inner {
  display: block;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero--slideshow .hero__content { max-width: 660px; }
/* Heading + subheading rotate in sync with the slides. min-height keeps the
   buttons/dots from jumping as copy of different lengths swaps in. */
.hero__rotate {
  min-height: clamp(11rem, 22vw, 15rem);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease;
}
.hero__rotate.is-swapping {
  opacity: 0;
  transform: translateY(10px);
}
.hero--slideshow h1 { color: var(--white); text-wrap: balance; }
.hero--slideshow h1 em {
  color: var(--ochre-500);
  font-style: normal;
}
.hero--slideshow .hero__sub {
  color: color-mix(in srgb, var(--white) 88%, transparent);
  max-width: 56ch;
}
.hero--slideshow .hero__badge {
  background: color-mix(in srgb, var(--white) 14%, transparent);
  border-color: color-mix(in srgb, var(--white) 30%, transparent);
  color: var(--white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Per-slide caption pill (bottom-right of the hero). */
.hero-slide-caption {
  position: absolute;
  right: var(--container-pad);
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-900) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 90%, transparent);
}
.hero-slide-caption svg { width: 15px; height: 15px; color: var(--ochre-500); }

/* Slide dots (bottom-left, under the copy). */
.hero-dots {
  display: inline-flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero-dots button {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white) 32%, transparent);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.hero-dots button.is-active {
  width: 52px;
  background: var(--ochre-500);
}

/* --- Inner page hero (light) --- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.25rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.25rem);
  background:
    radial-gradient(900px 480px at 85% -20%, color-mix(in srgb, var(--brand-400) 20%, transparent), transparent 62%),
    var(--sand-50);
  color: var(--ink-soft);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -8%; top: -60%;
  width: 40vw; height: 40vw;
  max-width: 520px; max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ochre-500) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 64ch; }
.page-hero h1 { color: var(--brand-900); margin-bottom: var(--sp-4); }
.page-hero p { font-size: var(--fs-lead); color: var(--ink-soft); margin-bottom: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-600); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--sand-300); }
.breadcrumb [aria-current="page"] { color: var(--accent-600); }

/* ==========================================================================
   10. STATS / COUNTERS
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.stat {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 18%;
  height: 64%;
  width: 1px;
  background: var(--color-border-strong);
}
.stat__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.06em;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.35rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brand-800);
  letter-spacing: -0.03em;
}
.stat__num small {
  font-size: 0.5em;
  color: var(--accent-600);
  font-weight: 600;
}
.stat__label {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 0;
}
.section--dark .stat__num { color: var(--brand-800); }
.section--dark .stat__label { color: var(--ink-muted); }
.section--dark .stat + .stat::before { background: var(--brand-200); }

/* ==========================================================================
   11. CARD SYSTEMS
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
/* Hover lift — the shared micro-interaction across every card grid. */
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-200);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto;
}
.card__body > * { margin: 0; }
.card__title { font-size: var(--fs-h4); margin: 0; }
.card__text { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.7; }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }
/* Makes the whole card clickable while keeping one real <a> for a11y. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Category card (home + products) */
.card--category .card__title a { text-decoration: none; color: inherit; }
.card--category .card__title a:hover { color: var(--accent-600); }
.card--category .badge {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  z-index: 2;
}
/* Text-only category cards (no image): the badge must flow above the title
   instead of overlapping it. */
.card--category:not(:has(.media-frame)) .badge {
  position: static;
  align-self: flex-start;
  margin: var(--sp-5) var(--sp-5) 0;
}
.card--category:not(:has(.media-frame)) .card__body {
  padding-top: var(--sp-3);
}

.badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--brand-900);
  color: var(--ochre-500);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.badge--sand { background: var(--sand-200); color: var(--brand-800); }

/* Feature card (why choose us) */
.feature {
  padding: var(--sp-6) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-200);
}
.feature__icon {
  display: grid;
  place-content: center;
  width: 54px; height: 54px;
  margin-bottom: var(--sp-4);
  border-radius: 14px;
  background: var(--brand-100);
  color: var(--brand-700);
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.feature__icon svg { width: 25px; height: 25px; }
.feature:hover .feature__icon {
  background: var(--brand-700);
  color: var(--ochre-500);
  transform: rotate(-6deg);
}
.feature h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.feature p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

.feature--numbered { position: relative; }
.feature--numbered .feature__num {
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--sand-200);
  transition: color var(--dur) var(--ease-out);
}
.feature--numbered:hover .feature__num { color: var(--ochre-200); }

/* Dark variant used inside .section--dark */
.section--dark .feature {
  background: var(--white);
  border-color: var(--color-border);
}
.section--dark .feature p { color: var(--ink-muted); }
.section--dark .feature__icon { background: var(--brand-100); color: var(--brand-700); }

/* ==========================================================================
   12. MARQUEE (certification / partner logos)
   The track is duplicated in the HTML so the loop is seamless. Animation
   itself lives in animations.css.
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: max-content;
}
.marquee__item {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  flex: none;
  width: 168px;
  height: 92px;
  padding: var(--sp-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--ink-muted);
  text-align: center;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.marquee__item:hover {
  color: var(--brand-700);
  border-color: var(--brand-400);
  transform: translateY(-3px);
}
.marquee__item svg { width: 26px; height: 26px; opacity: .8; }
.marquee__item span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ==========================================================================
   13. GLOBAL REACH
   ========================================================================== */
.reach__map {
  position: relative;
  padding: var(--sp-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.reach__map img { width: 100%; opacity: 1; }
.reach__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.reach__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.reach__legend i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-600);
  display: inline-block;
}
.reach__legend i.is-alt { background: var(--accent-500); }

.reach-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  font-size: var(--fs-sm);
}
.reach-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--ink-soft);
}
.reach-list svg { width: 16px; height: 16px; color: var(--brand-600); flex: none; }

/* ==========================================================================
   14. TESTIMONIALS SLIDER
   ========================================================================== */
.slider { position: relative; }
.slider__viewport { overflow: hidden; padding-block: var(--sp-2); }
.slider__track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-in-out);
  will-change: transform;
}
.slide {
  flex: 0 0 33.3333%;
  padding-inline: var(--sp-3);
  min-width: 0;
}
.quote {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.quote__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--ochre-500);
}
.quote__text {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.8;
  margin: 0;
  flex: 1 1 auto;
}
.quote__person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}
.quote__avatar {
  width: 46px; height: 46px;
  flex: none;
  aspect-ratio: 1;
  padding: 0;
}
.quote__avatar .ph__label { font-size: 0.5rem; letter-spacing: 0.04em; }
.quote__name { display: block; font-weight: 700; font-size: 0.92rem; color: var(--brand-800); }
.quote__role { font-size: 0.78rem; color: var(--ink-muted); }

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.slider__btn {
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-700);
  background: transparent;
  color: var(--brand-700);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}
.slider__btn:hover:not(:disabled) {
  background: var(--brand-700);
  color: var(--white);
  transform: scale(1.06);
}
.slider__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.slider__btn svg { width: 18px; height: 18px; }

.slider__dots { display: flex; gap: var(--sp-2); }
.slider__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--sand-300);
  cursor: pointer;
  transition: width var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.slider__dot.is-active { width: 30px; background: var(--accent-600); }

/* ==========================================================================
   15. CTA BANNER
   ========================================================================== */
.cta-banner {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(135deg, var(--accent-700), var(--accent-600) 55%, var(--ochre-600));
  color: var(--white);
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.05) 22px 24px);
  pointer-events: none;
}
.cta-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.cta-banner h2 { color: var(--white); margin-bottom: var(--sp-2); max-width: 20ch; }
.cta-banner p { color: rgba(255, 255, 255, 0.86); max-width: 46ch; margin: 0; }
.cta-banner .btn { --btn-bg: var(--white); --btn-fg: var(--accent-700); --btn-bd: var(--white); }
.cta-banner .btn::before { background: var(--brand-900); }
.cta-banner .btn:hover { color: var(--white); border-color: var(--brand-900); }
.cta-banner .btn--light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.6); }
.cta-banner .btn--light::before { background: var(--white); }
.cta-banner .btn--light:hover { color: var(--accent-700); }

/* ==========================================================================
   16. ABOUT PAGE
   ========================================================================== */
.mvv {
  height: 100%;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.mvv:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.mvv__icon {
  display: grid;
  place-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-600);
}
.mvv__icon svg { width: 24px; height: 24px; }
.mvv p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.mvv ul { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; padding-left: 1.1rem; }
.mvv li + li { margin-top: 0.4rem; }

/* --- Timeline --- */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 13px;
  height: 2px;
  background: var(--color-border-strong);
}
.timeline__item { position: relative; padding-top: var(--sp-7); }
.timeline__item::before {
  content: "";
  position: absolute;
  top: 6px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sand-50);
  border: 3px solid var(--brand-500);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.timeline__item:hover::before { background: var(--ochre-500); transform: scale(1.2); }
.timeline__year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--accent-600);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.timeline__item h3 { font-size: 1.02rem; margin-bottom: var(--sp-2); }
.timeline__item p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

/* --- Team --- */
.team-card { text-align: center; }
.team-card .media-frame {
  width: 168px;
  margin-inline: auto;
  border-radius: 50%;
}
.team-card .ph { aspect-ratio: 1; border-radius: 50%; }
.team-card h3 { margin: var(--sp-4) 0 0.15rem; font-size: 1.08rem; }
.team-card p { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-600); font-weight: 600; margin: 0; }
.team-card__socials { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.team-card__socials a {
  display: grid;
  place-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--ink-muted);
  transition: all var(--dur) var(--ease-out);
}
.team-card__socials a:hover { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.team-card__socials svg { width: 15px; height: 15px; }

/* ==========================================================================
   17. PRODUCTS PAGE — filter grid
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-7);
}
.filter-btn {
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.filter-btn:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-2px); }
.filter-btn.is-active {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--white);
}

/* Cards hidden by the filter. Transition handled in animations.css. */
.is-filtered-out { display: none; }

.filter-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--ink-muted);
}

/* ==========================================================================
   18. PRODUCT DETAIL PAGE
   ========================================================================== */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.pd-gallery__main { margin-bottom: var(--sp-3); }
.pd-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  list-style: none;
  margin: 0; padding: 0;
}
.pd-thumb {
  display: block;
  width: 100%;          /* buttons shrink-wrap by default; fill the grid cell */
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.pd-thumb .ph { width: 100%; }
.pd-thumb:hover { transform: translateY(-3px); }
.pd-thumb.is-active { border-color: var(--accent-600); }
.pd-thumb .ph { border-radius: 6px; }
.pd-thumb .ph__icon { width: 20px; height: 20px; }
.pd-thumb .ph__label { font-size: 0.55rem; }

.pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.spec-table caption {
  text-align: left;
  font-weight: 700;
  color: var(--brand-800);
  padding-bottom: var(--sp-3);
}
.spec-table th,
.spec-table td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.spec-table th {
  width: 42%;
  font-weight: 600;
  color: var(--brand-800);
  background: var(--sand-100);
}
.spec-table tr:hover td { background: color-mix(in srgb, var(--ochre-200) 22%, transparent); }
.table-scroll { overflow-x: auto; }

.pd-highlights { list-style: none; margin: 0 0 var(--sp-5); padding: 0; font-size: var(--fs-sm); }
.pd-highlights li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 0.4rem 0;
  color: var(--color-text-soft);
}
.pd-highlights svg { width: 18px; height: 18px; color: var(--brand-500); flex: none; margin-top: 3px; }

.pd-enquiry {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-200);
  background: var(--brand-100);
}
.pd-enquiry p { font-size: var(--fs-sm); color: var(--brand-800); }

/* ==========================================================================
   19. CERTIFICATIONS PAGE
   ========================================================================== */
.cert-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--ochre-200);
}
.cert-card__badge {
  width: 110px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  border-radius: 50%;
  border: 2px dashed var(--color-border-strong);
  background: var(--sand-100);
  color: var(--ink-muted);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.cert-card:hover .cert-card__badge { border-color: var(--ochre-500); color: var(--brand-700); }
.cert-card__badge svg { width: 28px; height: 28px; }
.cert-card__badge span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.cert-card h3 { margin: 0; font-size: 1.05rem; }
.cert-card p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

.process-step {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.process-step__num {
  display: grid;
  place-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-800);
  color: var(--ochre-500);
  font-family: var(--font-display);
  font-weight: 700;
}
.process-step h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.process-step p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   20. GALLERY PAGE + LIGHTBOX
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 12rem;
  gap: var(--sp-4);
}
.gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery-item .ph { height: 100%; aspect-ratio: auto; border-radius: var(--radius-md); }
/* Masonry-ish rhythm without a library. */
.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: linear-gradient(180deg, rgba(8,32,30,.25), rgba(8,32,30,.78));
  color: var(--white);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
.gallery-item__overlay svg { width: 26px; height: 26px; }
.gallery-item__overlay span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; }

/* --- Lightbox (built by main.js, no external library) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 32, 30, 0.93);
  opacity: 0;
  visibility: hidden;
  /* Visibility flips instantly when opening and only after the fade when
     closing. Transitioning visibility directly would leave the dialog
     unfocusable at the moment it opens. */
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear 0s;
}
.lightbox__stage-wrap { width: min(980px, 100%); }
.lightbox__stage {
  width: 100%;
  transform: scale(0.96);
  transition: transform var(--dur-slow) var(--ease-out);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__stage .ph {
  --ph-bg: var(--brand-800);
  --ph-fg: var(--brand-200);
  --ph-border: var(--brand-600);
  aspect-ratio: 16 / 10;
}
.lightbox__caption {
  margin-top: var(--sp-4);
  text-align: center;
  color: var(--brand-200);
  font-size: var(--fs-sm);
}
.lightbox__caption strong { display: block; color: var(--white); font-size: 1.05rem; margin-bottom: 0.2rem; }
.lightbox__btn {
  position: absolute;
  display: grid;
  place-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lightbox__btn:hover { background: var(--accent-600); transform: scale(1.06); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }

/* ==========================================================================
   21. CONTACT PAGE
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-800);
}
.field label .req { color: var(--accent-600); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--sand-50);
  font-size: 0.94rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 22%, transparent);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--accent-600); }
.field__error {
  min-height: 1.1rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-700);
}
.form-note { font-size: 0.78rem; color: var(--ink-muted); margin-top: var(--sp-4); }

.form-status {
  display: none;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--brand-100);
  border: 1px solid var(--brand-200);
  color: var(--brand-800);
  font-size: var(--fs-sm);
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 20px; height: 20px; flex: none; color: var(--brand-600); }
.form-status.is-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.form-status.is-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.info-card {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--brand-900);
  color: var(--brand-200);
}
.info-card h2, .info-card h3 { color: var(--white); }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--brand-700); }
.info-list li:last-child { border-bottom: 0; }
.info-list__icon {
  display: grid;
  place-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--ochre-500);
}
.info-list__icon svg { width: 19px; height: 19px; }
.info-list strong {
  display: block;
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.info-list p { font-size: var(--fs-sm); margin: 0; line-height: 1.6; }
.info-list a { color: var(--brand-200); }

/* Map placeholder — deliberately NOT a live embed (no API key in a template). */
.map-ph {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--brand-200) 55%, transparent), transparent 55%),
    radial-gradient(circle at 72% 65%, color-mix(in srgb, var(--ochre-200) 60%, transparent), transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in srgb, var(--brand-400) 16%, transparent) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, color-mix(in srgb, var(--brand-400) 16%, transparent) 38px 39px),
    var(--sand-100);
  color: var(--brand-800);
  text-align: center;
  overflow: hidden;
}
.map-ph__pin {
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--accent-600);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.map-ph__pin svg { width: 20px; height: 20px; transform: rotate(45deg); }
.map-ph strong { font-size: 0.9rem; }
.map-ph span { font-size: 0.76rem; color: var(--ink-muted); }

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-4) 0;
}
.faq-item h3 { font-size: 1.02rem; margin-bottom: var(--sp-2); }
.faq-item p { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }

/* ==========================================================================
   22. FLOATING ACTIONS
   Present on every page (see the shared block at the end of each <body>).
   ========================================================================== */
.float-stack {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
}

.whatsapp-float {
  display: grid;
  place-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, 0.75);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08) translateY(-2px);
  color: #fff;
  box-shadow: 0 14px 32px -8px rgba(37, 211, 102, 0.9);
}
.whatsapp-float svg { width: 30px; height: 30px; }

.to-top {
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-800);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  box-shadow: var(--shadow-md);
  transition: opacity var(--dur) var(--ease-out),
              visibility 0s linear var(--dur),
              transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease-out),
              visibility 0s linear 0s,
              transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.to-top:hover { background: var(--accent-600); transform: translateY(-3px); }
.to-top svg { width: 19px; height: 19px; }

/* ==========================================================================
   23. RESPONSIVE BREAKPOINTS
   Desktop-first adjustments: 1100 / 960 (nav switch) / 760 / 520
   ========================================================================== */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slide { flex-basis: 50%; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; --header-h-scrolled: 62px; }

  /* --- Mobile navigation overlay --- */
  /* Toggle above the open panel so the X stays tappable to close. */
  .nav-toggle { display: block; order: 3; position: relative; z-index: calc(var(--z-nav-overlay) + 10); }
  .header-cta { display: none; }
  .nav {
    position: fixed;
    top: 0; right: 0;
    z-index: var(--z-nav-overlay);
    width: min(360px, 86vw);
    height: 100dvh;
    padding: calc(var(--header-h) + 1.5rem) var(--sp-6) var(--sp-6);
    background: var(--brand-900);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(102%);
    visibility: hidden;
    /* Same instant-open / delayed-close pattern as the lightbox, so the
       panel's links are focusable the moment it opens. */
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  body.nav-open .nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear 0s;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Direct children only — dropdown <li>s must not pick up the divider. */
  .nav__list > li { border-bottom: 1px solid var(--brand-700); }
  .nav__link,
  .site-header--over-hero .nav__link,
  .site-header--over-hero.is-scrolled .nav__link {
    display: block;
    padding: 1rem 0;
    font-size: 1.06rem;
    color: var(--brand-100);
  }
  .nav__link::after { display: none; }

  /* --- Dropdown becomes an inline accordion inside the overlay --- */
  .has-dropdown { flex-wrap: wrap; justify-content: space-between; }
  .has-dropdown > .nav__link { flex: 1 1 auto; }
  .has-dropdown::before { display: none; }   /* no hover bridge on touch */

  .nav__caret,
  .site-header--over-hero .nav__caret,
  .site-header--over-hero.is-scrolled .nav__caret {
    width: 44px; height: 44px;               /* comfortable tap target */
    flex: none;
    color: var(--brand-200);
  }
  .nav__caret svg { width: 17px; height: 17px; }
  .nav__caret[aria-expanded="true"] { color: var(--ochre-500); }

  .dropdown {
    position: static;
    display: none;                           /* accordion: closed by default */
    flex-basis: 100%;
    min-width: 0;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0 0.25rem 0.9rem;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--brand-700);
    border-radius: 0;
    box-shadow: none;
    /* Reset the desktop float-in so the panel is simply shown or hidden. */
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .has-dropdown.is-open > .dropdown { display: block; }

  .dropdown__link {
    padding: 0.65rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--brand-200);
    white-space: normal;
  }
  .dropdown__link:hover,
  .dropdown__link:focus-visible {
    background: transparent;
    color: var(--ochre-500);
    padding-left: 0.85rem;
  }
  .dropdown [role="separator"] { background: var(--brand-700); margin-inline: 0.5rem; }
  .nav__link.is-active,
  .site-header--over-hero.is-scrolled .nav__link.is-active { color: var(--ochre-500); }
  .nav__cta { margin-top: var(--sp-6); display: block; }
  .nav__cta .btn { display: flex; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__float { left: auto; right: 1rem; bottom: -1.25rem; }
  .split { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-6); }
  .stat:nth-child(odd)::before { display: none; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
  .timeline::before { display: none; }
  .timeline__item { padding-top: var(--sp-6); }
  .contact-layout { grid-template-columns: 1fr; }
  .pd-layout { grid-template-columns: 1fr; }
  .cta-banner__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  :root { --section-y: clamp(3rem, 9vw, 4.5rem); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 10rem; }
  .slide { flex-basis: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .reach-list { grid-template-columns: 1fr; }
  .pd-gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-bottom { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat::before { display: none !important; }
  .timeline { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 11rem; }
  .gallery-item--wide, .gallery-item--tall { grid-column: auto; grid-row: auto; }
  .brand__sub { display: none; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .hero__float { position: static; margin-top: var(--sp-4); width: 100%; }
  .float-stack { right: 0.85rem; bottom: 0.85rem; }
  .whatsapp-float { width: 50px; height: 50px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* Print: strip decoration, keep content readable. */
@media print {
  .site-header, .site-footer, .float-stack, .nav-scrim, .cta-banner, .slider__controls { display: none !important; }
  body { background: #fff; color: #000; }
  .ph { border: 1px solid #999; background: none; }
}

/* ==========================================================================
   PRODUCTS MEGA MENU — full-width panel of the 6 export verticals.
   Reuses the .has-dropdown open/close machinery (hover on desktop, caret
   click on touch); only the panel is restyled full-bleed.
   ========================================================================== */
.dropdown--mega {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px);
}
.has-dropdown.is-open > .dropdown--mega { transform: translateY(0); }
@media (hover: hover) and (min-width: 961px) {
  .has-dropdown:hover > .dropdown--mega,
  .has-dropdown:focus-within > .dropdown--mega { transform: translateY(0); }
  /* Taller hover bridge so the pointer can reach the full-width panel. */
  .has-dropdown:has(.dropdown--mega)::before { height: 44px; }
}

.mega__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--container-pad);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.75rem);
}
.mega__colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.mega__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-900);
  text-decoration: none;
  line-height: 1.25;
}
.mega__head svg { width: 17px; height: 17px; color: var(--accent-600); flex: none; }
.mega__head:hover { color: var(--accent-600); }
/* Per-vertical toggle — only shown inside the mobile nav overlay. */
.mega__caret { display: none; }
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}
.mega__list a:hover,
.mega__list a:focus-visible { color: var(--accent-600); padding-left: 6px; }
/* Vertical 06 gets a highlighted "service" treatment. */
.mega__col--feature {
  background: var(--brand-900);
  border-radius: var(--radius-md);
  padding: 1rem;
  color: var(--white);
}
.mega__col--feature .mega__head { color: var(--white); border-color: rgba(255,255,255,.18); }
.mega__col--feature .mega__head svg { color: var(--accent-300); }
.mega__col--feature p { margin: 0.5rem 0 0.75rem; font-size: 0.82rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.mega__col--feature .mega__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700; color: var(--accent-300); text-decoration: none;
}
.mega__col--feature .mega__cta svg { width: 14px; height: 14px; }
.mega__col--feature .mega__cta:hover { color: var(--white); }

.mega__foot {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.mega__foot-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.85rem var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}
.mega__foot-inner .btn-row { gap: 0.6rem; }

/* Mobile: fold the mega panel back into the (dark navy) nav overlay as a
   two-level accordion — each vertical opens on its own caret. Text switches to
   light so it reads on the navy background. */
@media (max-width: 960px) {
  .dropdown--mega {
    position: static;
    width: auto;
    transform: none;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .mega__inner {
    display: block;
    max-width: none;
    padding: 0.25rem 0 0.5rem;
  }
  .mega__col { margin: 0; border-bottom: 1px solid var(--brand-700); }
  .mega__colhead { border-bottom: 0; margin-bottom: 0; padding: 0.1rem 0; }
  .mega__head { color: var(--brand-100); font-size: 0.78rem; }
  .mega__head svg { color: var(--accent-300); }

  .mega__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--brand-200);
    cursor: pointer;
  }
  .mega__caret svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
  .mega__caret[aria-expanded="true"] { color: var(--ochre-500); }
  .mega__caret[aria-expanded="true"] svg { transform: rotate(180deg); }

  .mega__list { display: none; padding: 0 0 0.6rem 0.35rem; }
  .mega__col.is-open .mega__list { display: block; }
  .mega__list a { color: var(--brand-200); font-size: 0.95rem; padding: 0.55rem 0; }
  .mega__list a:hover,
  .mega__list a:focus-visible { color: var(--ochre-500); padding-left: 0; }

  .mega__col--feature {
    background: rgba(255,255,255,.06);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    margin: 0.6rem 0;
  }
  .mega__col--feature .mega__head { color: var(--white); }
  .mega__col--feature p { color: rgba(255,255,255,.82); }

  .mega__foot { background: transparent; border-color: var(--brand-700); }
  .mega__foot-inner {
    padding: 0.85rem 0 0.25rem;
    flex-direction: column;
    align-items: stretch;
    color: var(--brand-200);
  }
  /* Ghost button is dark navy by default — make it readable on the navy overlay. */
  .mega__foot-inner .btn--ghost { --btn-fg: var(--brand-100); --btn-bd: var(--brand-400); }
}

/* ==========================================================================
   PRODUCT CARDS — rendered on products.html from data/products.json
   (managed via the /admin portal). See assets/js/products.js.
   ========================================================================== */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.prod-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-200);
}
.prod-card__media { aspect-ratio: 4 / 3; background: var(--brand-100); }
.prod-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto;
}
.prod-card__title { font-size: var(--fs-h4); margin: 0; color: var(--color-heading); }
.prod-card__desc { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; }
.prod-card__specs {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.prod-card__specs li { display: flex; gap: 0.5rem; }
.prod-card__specs span { color: var(--color-text-muted); min-width: 80px; font-weight: 600; }
.prod-card__specs b { color: var(--ink); font-weight: 500; }
.prod-card .link-arrow { margin-top: auto; padding-top: var(--sp-2); }
.prod-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
}
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .prod-grid { grid-template-columns: 1fr; } }

/* --- Brand portfolio cards (About) --- */
.brand-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: var(--sp-5);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.brand-card__logo img { max-height: 76px; max-width: 82%; width: auto; height: auto; display: block; }
.brand-card__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--brand-700);
}

/* --- Team / leadership --- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.team-card { overflow: hidden; }
.team-card__photo { aspect-ratio: 1 / 1; background: var(--color-bg-alt); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.team-card__avatar {
  width: 100%; height: 100%;
  display: grid; place-content: center;
  background: linear-gradient(150deg, var(--brand-600), var(--brand-800));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800; font-size: 2.6rem; letter-spacing: 0.03em;
}
.team-card__role {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-600); margin: 0;
}
.leader-photo { max-width: 460px; }
/* Placeholder avatar for a leader whose photo isn't in yet. */
.leader-avatar {
  display: grid;
  place-content: center;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--brand-600), var(--brand-800));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4rem;
  letter-spacing: 0.04em;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   HERO SLIDESHOW — mobile & tablet: centre the copy, keep the dots/caption
   clear of the text.
   ========================================================================== */
@media (max-width: 960px) {
  .hero--slideshow { text-align: center; min-height: min(88vh, 700px); }
  .hero--slideshow .hero__content { max-width: none; margin-inline: auto; }
  .hero--slideshow .hero__inner { padding-bottom: 5.25rem; }
  .hero--slideshow .hero__rotate { min-height: 0; }
  .hero--slideshow .btn-row { justify-content: center; }
  .hero-dots { justify-content: center; margin-top: var(--sp-5); }
  .hero-slide-caption {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
  }
}