@import url('/styles/fonts.css');

/* ============================================================
   ENCLOVE Energy Solutions — design system
   Tokens mirror the values measured off the previous Framer build.
   ============================================================ */

:root {
  /* brand */
  --navy: #1a1b60;
  --navy-deep: #05103e;
  --navy-900: #041142;
  --blue: #01a4f1;
  --blue-600: #0888d1;
  --blue-500: #1da1e9;
  --blue-400: #63c1ff;
  --blue-100: #dff2fe;
  --blue-50: #f0f9ff;
  --ice: #ecf6ff;
  --violet: #6169f0;

  /* neutrals */
  --ink: #000000;
  --ink-70: rgba(0, 0, 0, 0.7);
  --ink-50: rgba(0, 0, 0, 0.5);
  --grey: #9a9aab;
  --grey-700: #3d3d3d;
  --grey-500: #5e6266;
  --line: rgba(26, 27, 96, 0.12);
  --white: #ffffff;

  /* accents used by the product feature cards */
  --card-blue: #eff6ff;
  --card-sky: #e0f2fe;
  --card-violet: #f5f3ff;
  --card-green: #ecfdf5;
  --card-amber: #fffbeb;
  --card-rose: #fff1f2;

  /* type */
  --font: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* layout */
  --maxw: 1300px;
  --gutter: 24px;
  --radius: 12px;
  --radius-lg: 40px;   /* large panels/cards — measured off the original */
  --radius-md: 20px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --header-h: 84px;

  /* band + panel treatments, taken verbatim from the original's computed styles */
  --band-dark: radial-gradient(50% 50%, #1a1b60 0%, #05103e 100%);
  --band-light: radial-gradient(71% 25% at 50% 10.3%, #acc5f2 0%, #ecf6ff 100%);
  --band-light-low: radial-gradient(72% 57% at 50% -35.5%, #acc5f2 0%, #ecf6ff 100%);
  --panel-fill: #f7fcff;
  --panel-dark: radial-gradient(50% 50% at 83.9% 74%, #14355e 0%, #0d1e33 100%);
  --panel-dark-center: radial-gradient(50% 50%, #182a47 0%, #0f1b2e 100%);

  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(5, 16, 62, 0.16);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-70);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* Inline SVG icons carry no intrinsic size and would otherwise default to 300x150.
   This is the floor; component rules below override it where a larger icon is wanted. */
svg { width: 1em; height: 1em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--navy); font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  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; left: 8px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px;
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 6vw, 88px); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }
.section--ice { background: var(--band-light-low); }
.section--blue-grad { background: var(--band-light); }
.section--dark { background: var(--band-dark); color: rgba(255, 255, 255, .82); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark .h-section, .section--dark .h-card { color: #fff; }
.section--dark p, .section--dark li { color: rgba(255, 255, 255, .82); }
.section--dark .eyebrow { color: var(--blue-400); }
.section--dark .checklist li { color: rgba(255, 255, 255, .88); }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- type ---------- */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600); display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::after { content: ''; width: 54px; height: 2px; background: currentColor; opacity: .5; }
.eyebrow--plain::after { display: none; }

.h-display {
  font-size: clamp(30px, 4.6vw, 56px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: var(--navy);
}
.h-section {
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.15;
  letter-spacing: -.03em; color: var(--navy);
}
.h-card { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: var(--ink-70); }
.muted { color: var(--grey); }
.accent { color: var(--blue); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius); border: 1px solid transparent;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { box-shadow: var(--shadow-lg); }
.btn--navy { background: var(--navy); color: #fff; border-radius: var(--radius); }
.btn--navy:hover { background: var(--navy-deep); }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-600); }
.btn--soft { background: var(--blue-100); color: var(--blue-600); border-radius: var(--radius-pill); text-transform: none; }
/* Inline SVGs carry no intrinsic size, so constrain every icon rendered inside a button. */
.btn svg, .btn__icon { width: 18px; height: 18px; flex: none; }
.btn--lg svg { width: 20px; height: 20px; }

/* Submit buttons spin while their request is in flight. The label is left in the DOM and
   only made invisible, so the button keeps its exact width and nothing around it reflows.
   Both buttons that use this sit on a blue fill, hence the white spinner. */
button.is-busy { position: relative; color: transparent; cursor: progress; }
button.is-busy > * { visibility: hidden; }
button.is-busy:hover { transform: none; }
button.is-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: btn-spin .65s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.is-busy::after { animation-duration: 2s; } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid var(--line);
}
/* Three tracks with equal 1fr flanks so the middle one — nav links + language switcher — is
   centred on the header itself, not on whatever space the brand and the CTA happen to leave.
   A flex row cannot do this: the two sides have different widths. */
.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; justify-self: start; }
.brand img { width: auto; height: 52px; }
.header-cta--bar { justify-self: end; }
.header-cta--drawer { display: none; }

.nav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.nav__list { display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy); display: inline-flex; align-items: center; gap: 6px;
  padding-block: 8px; transition: color .15s;
}
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--blue); }
.nav__item { position: relative; }
.nav__caret { width: 12px; height: 12px; transition: transform .2s; }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: 100%; left: 50%; translate: -50% 0; min-width: 268px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  translate: -50% 8px; transition: opacity .18s, translate .18s, visibility .18s;
}
/* Desktop-only: this rule outweighs the mobile `.nav__menu` reset on specificity, so scoping it
   by breakpoint is the only way to keep `translate: -50%` from shifting the stacked mobile
   submenu half its own width off the left edge. */
@media (min-width: 1025px) {
  .nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; translate: -50% 0; }
}
.nav__menu a {
  display: block; padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: var(--navy); transition: background .15s, color .15s;
}
.nav__menu a:hover { background: var(--blue-50); color: var(--blue-600); }

.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
[aria-expanded='true'] .nav-toggle__bar { background: transparent; }
[aria-expanded='true'] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded='true'] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  /* The drawer is fixed, so it leaves the flow entirely — the bar is just brand and toggle. */
  .site-header__inner { display: flex; justify-content: space-between; gap: 24px; }
  .header-cta--bar { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column;
    align-items: stretch; gap: 0; background: #fff; padding: 12px var(--gutter) 28px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    display: none;
  }
  .nav[data-open='true'] { display: flex; }
  .nav__link { padding: 14px 0; border-bottom: 1px solid var(--line); justify-content: space-between; }
  .nav__menu {
    position: static; translate: none; opacity: 1; visibility: visible; box-shadow: none;
    border: 0; border-radius: 0; padding: 0 0 8px 12px; min-width: 0; display: none;
  }
  .nav__item[data-open='true'] .nav__menu { display: block; }
  .nav__item[data-open='true'] .nav__caret { transform: rotate(180deg); }
  .header-cta--drawer { display: inline-flex; margin-top: 16px; }
}

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.crumbs a { color: var(--navy); opacity: .65; transition: opacity .15s; }
.crumbs a:hover { opacity: 1; color: var(--blue); }
.crumbs__sep { color: var(--navy); opacity: .35; }
.crumbs [aria-current='page'] { color: var(--navy); border-bottom: 2px solid var(--navy); padding-bottom: 2px; }

/* ---------- hero (home) ---------- */
/* The banner is a fixed height. `min-height` alone was only a floor, so the intrinsic
   aspect ratio of each slide's product shot sized the section and the carousel jumped
   by ~250px between slides. `--hero-h` now drives both the section and the media box,
   and the image is capped to that box, so no image can change how tall the hero is.
   740px clears the tallest measured text column (579px) plus the 2 x 64px padding. */
.hero {
  --hero-h: 740px; --hero-pad: 64px;
  --hero-media-h: calc(var(--hero-h) - var(--hero-pad) * 2);
  position: relative; background: var(--navy-deep); color: #fff; overflow: hidden;
}
/* Slides are stacked in one grid cell rather than swapped with `display`, which is not
   an animatable property and keeps only one slide in flow — there is nothing to fade
   between. Stacking also sizes the section to the TALLEST slide, so the mobile layout
   (where `.hero__inner` is auto-height) stops jumping as the copy length changes. */
.hero { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  /* `visibility` is stepped at the END of the fade so the outgoing slide stays painted
     while it dissolves. Hiding it also keeps its CTA out of the tab order, which a bare
     `opacity: 0` would not. */
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.hero__slide[data-active='true'] {
  /* Above the outgoing slide whichever way the carousel moves — without this the paint
     order is DOM order, so "prev" would fade the incoming slide in underneath. */
  z-index: 1;
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}
/* The incoming copy and product shot rise into place, staggered down the column. */
.hero__slide .hero__content > *,
.hero__slide .hero__media {
  translate: 0 18px; opacity: 0;
  transition: translate .55s cubic-bezier(.22,.7,.3,1), opacity .55s ease;
}
.hero__slide[data-active='true'] .hero__content > *,
.hero__slide[data-active='true'] .hero__media { translate: 0 0; opacity: 1; }
.hero__slide[data-active='true'] .hero__media { transition-delay: .08s; }
.hero__slide[data-active='true'] .hero__content > :nth-child(2) { transition-delay: .06s; }
.hero__slide[data-active='true'] .hero__content > :nth-child(3) { transition-delay: .10s; }
.hero__slide[data-active='true'] .hero__content > :nth-child(4) { transition-delay: .14s; }
.hero__slide[data-active='true'] .hero__content > :nth-child(5) { transition-delay: .18s; }
.hero__slide[data-active='true'] .hero__content > :nth-child(6) { transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  /* Back to an instant swap. The carousel's autoplay is already disabled under this
     query in site.js, so the two now agree. */
  .hero__slide, .hero__slide .hero__content > *, .hero__slide .hero__media { transition: none; }
  .hero__slide .hero__content > *, .hero__slide .hero__media { translate: none; opacity: 1; }
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: 40px; height: var(--hero-h); padding-block: var(--hero-pad);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--navy-deep) 22%, rgba(5,16,62,.72) 58%, rgba(26,27,96,.42) 100%); }
.hero__content { position: relative; z-index: 2; }
.hero__eyebrow { color: var(--blue-400); }
.hero h1, .hero h2 { color: #fff; }
.hero__title { font-size: clamp(28px, 3.9vw, 54px); font-weight: 800; line-height: 1.07; letter-spacing: -.02em; }
.hero__title span { display: block; }
.hero__title span + span { color: var(--blue-400); }
.hero__rule { width: 90px; height: 3px; background: var(--blue-400); opacity: .8; margin: 22px 0; border: 0; }
.hero__body { color: rgba(255,255,255,.86); font-size: clamp(15px, 1.3vw, 18px); max-width: 60ch; }
/* The cap is an explicit length, not `100%`: this box is a grid whose row is
   content-sized, so a percentage would resolve against a row the image itself sized
   and would never clamp. Capping height (with width auto) contains the art at its own
   aspect ratio inside a box that is the same size on every slide. */
.hero__media {
  position: relative; z-index: 2; display: grid; place-items: center;
  height: var(--hero-media-h);
}
.hero__media img { max-height: var(--hero-media-h); width: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.hero__features { display: flex; flex-wrap: nowrap; gap: 0; margin-top: 34px; }
@media (max-width: 900px) { .hero__features { flex-wrap: wrap; } }
.hero__feature {
  display: flex; align-items: center; gap: 12px; padding-right: 26px; margin-right: 26px;
  border-right: 1px solid rgba(255,255,255,.22); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.3;
}
.hero__feature:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__feature svg { width: 26px; height: 26px; flex: none; stroke: var(--blue-400); }

.hero__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--navy-deep); color: #fff; border: 1px solid rgba(255,255,255,.18);
  transition: background .15s;
}
.hero__nav:hover { background: var(--navy); }
.hero__nav--prev { left: 16px; }
.hero__nav--next { right: 16px; }
.hero__dots { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; z-index: 5; display: flex; gap: 10px; background: rgba(255,255,255,.14); padding: 8px 14px; border-radius: var(--radius-pill); backdrop-filter: blur(6px); }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); padding: 0; }
.hero__dot[aria-current='true'] { background: #fff; }

@media (max-width: 900px) {
  /* Stacked, so the copy — not the art — sets the height, and it grows on narrow
     phones; a fixed section height would clip it. Fixing the media box instead keeps
     the art the same size on every slide without that risk. */
  .hero { --hero-media-h: 320px; }
  .hero__inner { grid-template-columns: 1fr; height: auto; gap: 28px; padding-block: 48px 72px; }
  .hero__media { order: -1; }
  .hero__feature { border-right: 0; padding-right: 0; margin-right: 0; flex: 1 1 100%; margin-bottom: 12px; }
  .hero__nav { display: none; }
}

/* ---------- panels ---------- */
/* Large rounded surfaces. The original uses a 40px radius and a very pale blue fill,
   with an inverted dark radial variant for emphasis blocks. */
.panel {
  background: var(--panel-fill); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(26, 27, 96, .07);
}
.panel--dark { background: var(--panel-dark); border: 0; color: rgba(255, 255, 255, .84); }
.panel--dark h2, .panel--dark h3, .panel--dark .h-card { color: #fff; }
.panel--dark p, .panel--dark li { color: rgba(255, 255, 255, .84); }
.panel--dark .checklist li { color: rgba(255, 255, 255, .9); }
.panel--dark .checklist svg { stroke: var(--blue-400); }
.panel--dark .channel { border-bottom-color: rgba(255, 255, 255, .14); }
.panel--dark .channel__icon { background: rgba(255, 255, 255, .1); }
.panel--dark .channel__icon svg { stroke: var(--blue-400); }
.panel--dark .channel__label { color: rgba(255, 255, 255, .6); }
.panel--dark .channel__value, .panel--dark .channel__value a { color: #fff; }

/* ---------- cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex; flex-direction: column; gap: 12px; height: 100%;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(1,164,241,.4); }
.card__media { border-radius: var(--radius-md); overflow: hidden; background: var(--blue-50); aspect-ratio: 4 / 3; }
.card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.card__title { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.card__body { font-size: 14.5px; color: var(--ink-70); line-height: 1.6; }
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 5px 11px;
  border-radius: var(--radius-pill); background: var(--blue-50); color: var(--blue-600);
  border: 1px solid rgba(1,164,241,.22);
}
.card__more { font-size: 13px; font-weight: 700; color: var(--blue-600); text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 7px; margin-top: auto; }
.card__more svg { width: 16px; height: 16px; transition: transform .18s; }
a.card:hover .card__more svg { transform: translateX(4px); }

/* ---------- product page ---------- */
.product-hero { background: var(--band-light); }
.product-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 48px; align-items: center; padding-block: 40px 56px; }
.product-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.product-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--blue-600); background: #fff; border: 1px solid rgba(1,164,241,.45);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.product-badge svg { width: 13px; height: 13px; stroke: var(--blue); }
.product-hero__eyebrow { font-size: 14px; font-weight: 500; color: var(--ink-50); letter-spacing: -.01em; }
.product-hero__title { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.03em; color: var(--ink); margin-block: 6px 4px; }
.product-hero__sub { font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; letter-spacing: -.02em; color: var(--blue); margin-bottom: 18px; }
.product-hero__intro { color: var(--ink-70); max-width: 62ch; }

.quick-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 26px 0; }
.quick-spec { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-sm); }
.quick-spec__label { font-size: 13px; color: var(--grey-500); margin-bottom: 3px; }
.quick-spec__value { font-size: 17px; font-weight: 700; color: var(--ink); }
.product-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
/* The product CTAs read as sentence case in the original design, unlike nav-level buttons. */
.product-actions .btn { text-transform: none; letter-spacing: 0; font-size: 15px; }

.gallery__main {
  background: #fff; border-radius: var(--radius-lg); padding: 20px; display: grid; place-items: center;
  min-height: 340px; box-shadow: var(--shadow-sm);
}
.gallery__main img { max-height: 380px; width: auto; object-fit: contain; }
.gallery__thumbs { display: flex; gap: 14px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.gallery__thumb {
  --thumb: 96px; --thumb-pad: 8px; --thumb-border: 2px;
  width: var(--thumb); height: var(--thumb); border-radius: var(--radius);
  border: var(--thumb-border) solid transparent;
  background: #fff; padding: var(--thumb-pad); display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s;
}
/* A percentage max-height has no definite containing block to resolve against inside a <button>
   (the browser wraps button content in an auto-height anonymous box), so portrait images kept
   their intrinsic height and spilled out of the frame. Give the image the content box in absolute
   terms and let object-fit letterbox it. */
.gallery__thumb img {
  width: calc(var(--thumb) - 2 * (var(--thumb-pad) + var(--thumb-border)));
  height: calc(var(--thumb) - 2 * (var(--thumb-pad) + var(--thumb-border)));
  object-fit: contain;
}
.gallery__thumb[aria-current='true'] { border-color: var(--blue); }
.gallery__thumb:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
  .product-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .gallery { order: -1; }
}

/* key feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feature-grid, .feature-grid--4 { grid-template-columns: 1fr; } }
.feature-card { border-radius: var(--radius-md); padding: 26px; border: 1px solid rgba(0,0,0,.06); height: 100%; }
.feature-card svg { width: 28px; height: 28px; margin-bottom: 16px; }
.feature-card h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.feature-card p { font-size: 14.5px; color: var(--ink-70); line-height: 1.6; }
.feature-card:nth-child(6n+1) { background: var(--card-blue); }
.feature-card:nth-child(6n+2) { background: var(--card-sky); }
.feature-card:nth-child(6n+3) { background: var(--card-violet); }
.feature-card:nth-child(6n+4) { background: var(--card-green); }
.feature-card:nth-child(6n+5) { background: var(--card-amber); }
.feature-card:nth-child(6n+6) { background: var(--card-rose); }
.feature-card:nth-child(6n+1) svg { stroke: #2563eb; }
.feature-card:nth-child(6n+2) svg { stroke: #0284c7; }
.feature-card:nth-child(6n+3) svg { stroke: #7c3aed; }
.feature-card:nth-child(6n+4) svg { stroke: #059669; }
.feature-card:nth-child(6n+5) svg { stroke: #d97706; }
.feature-card:nth-child(6n+6) svg { stroke: #e11d48; }

/* tabs */
.tabs { display: inline-flex; background: #f1f3f7; border-radius: var(--radius-pill); padding: 6px; gap: 4px; margin-bottom: 34px; flex-wrap: wrap; }
.tab {
  border: 0; background: transparent; border-radius: var(--radius-pill); padding: 10px 26px;
  font-size: 14.5px; font-weight: 600; color: var(--grey-500); transition: background .15s, color .15s, box-shadow .15s;
}
.tab[aria-selected='true'] { background: #fff; color: var(--ink); font-weight: 700; box-shadow: var(--shadow-sm); }
.tab-panel[hidden] { display: none; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 52px; }
@media (max-width: 900px) { .overview-grid { grid-template-columns: 1fr; gap: 32px; } }
.overview-grid h2, .overview-grid h3 { font-size: 22px; margin-bottom: 18px; color: var(--ink); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding-block: 9px; font-size: 15px; color: var(--ink-70); }
.checklist svg { width: 19px; height: 19px; flex: none; margin-top: 2px; stroke: var(--blue); }

/* downloads */
.download-list { display: grid; gap: 16px; }
.download-item {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 18px; align-items: center;
  background: var(--panel-fill); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.download-item__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-50); display: grid; place-items: center; }
.download-item__icon svg { width: 22px; height: 22px; stroke: var(--blue-600); }
.download-item__name { font-size: 16px; font-weight: 700; color: var(--ink); }
.download-item__meta { font-size: 12.5px; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.download-item__desc { font-size: 14px; color: var(--ink-70); margin-top: 6px; }
.download-item--empty { opacity: .62; }
.download-note { font-size: 13.5px; color: var(--grey-500); margin-top: 20px; }
@media (max-width: 700px) {
  .download-item { grid-template-columns: 46px 1fr; }
  .download-item > .btn { grid-column: 1 / -1; }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero { background: var(--band-light); padding-block: 44px 60px; }

/* Variant for pages whose hero art is a wide, dark backdrop photo rather than a
   product shot — the image sits behind the text full-bleed, as on the old site. */
.page-hero--bg { position: relative; background: var(--navy-deep); overflow: hidden; padding-block: 56px 72px; }
.page-hero--bg > .wrap { position: relative; z-index: 2; }
.page-hero__backdrop { position: absolute; inset: 0; z-index: 0; }
.page-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.page-hero__backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, var(--navy-deep) 18%, rgba(5,16,62,.76) 60%, rgba(26,27,96,.5) 100%);
}
.page-hero--bg h1, .page-hero--bg .h-display { color: #fff; }
.page-hero--bg .lede, .page-hero--bg .lede p { color: rgba(255,255,255,.85); }
.page-hero--bg .eyebrow { color: var(--blue-400); }
.page-hero--bg .crumbs a, .page-hero--bg .crumbs [aria-current='page'] { color: #fff; }
.page-hero--bg .crumbs [aria-current='page'] { border-bottom-color: rgba(255,255,255,.7); }
.page-hero--bg .crumbs__sep { color: rgba(255,255,255,.5); }
/* A measure for the headline and intro, held inside the full-width wrap rather than applied
   to it — a narrowed `.wrap` keeps its auto margins and would centre the copy, leaving the
   title indented from the breadcrumbs directly above it. */
.page-hero__copy { max-width: 980px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 44px; align-items: center; }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; } }
.page-hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ---------- prose ---------- */
.prose { max-width: 76ch; }
.prose h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 40px 0 14px; }
.prose h3 { font-size: 19px; margin: 28px 0 10px; color: var(--ink); }
.prose p { color: var(--ink-70); }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.prose li { margin-bottom: 8px; color: var(--ink-70); }
.prose a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.channel { display: flex; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.channel:last-child { border-bottom: 0; }
.channel__icon { width: 42px; height: 42px; border-radius: 11px; background: var(--blue-50); display: grid; place-items: center; flex: none; }
.channel__icon svg { width: 20px; height: 20px; stroke: var(--blue-600); }
.channel__label { font-size: 13px; color: var(--grey); }
.channel__value { font-size: 16px; font-weight: 700; color: var(--navy); }

.form-card { background: var(--panel-fill); border: 1px solid rgba(26,27,96,.07); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow-md); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.field .req { color: #e11d48; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(1,164,241,.15);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: #e11d48; }
.field__error { font-size: 12.5px; color: #e11d48; min-height: 0; }

/* Phone field: country calling code + national number.
   Without JS this is a plain <select> beside the input; site.js swaps in .telgroup__toggle. */
.telgroup { position: relative; display: flex; align-items: stretch; gap: 8px; }
.telgroup > input[type='tel'] { flex: 1 1 auto; min-width: 0; }
.telgroup__select { flex: 0 0 auto; max-width: 44%; }
.telgroup--enhanced .telgroup__select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.telgroup__toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font: inherit; font-size: 15px; padding: 12px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.telgroup__toggle:hover { border-color: var(--blue-400); }
.telgroup__toggle:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(1,164,241,.15);
}
.telgroup__flag { font-size: 19px; line-height: 1; }
.telgroup__dial { font-weight: 600; font-variant-numeric: tabular-nums; }
.telgroup__toggle svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--grey-500); }
.telgroup__toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.telgroup__pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(340px, 100%);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 8px; display: none;
}
.telgroup__pop[data-open] { display: block; }
.telgroup__search { width: 100%; font: inherit; font-size: 14.5px; padding: 9px 11px;
  border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.telgroup__search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(1,164,241,.15); }
/* position:relative so an option's offsetTop is measured against the list, which is what
   the keyboard scroll-into-view maths in site.js assumes. */
.telgroup__list { position: relative; list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.telgroup__opt {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink); cursor: pointer;
}
.telgroup__opt[hidden] { display: none; }
.telgroup__opt:hover, .telgroup__opt[data-active] { background: var(--ice); }
.telgroup__opt[aria-selected='true'] { font-weight: 700; }
.telgroup__opt .telgroup__flag { font-size: 18px; }
.telgroup__opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telgroup__opt-dial { color: var(--grey-500); font-variant-numeric: tabular-nums; }
.telgroup__empty { padding: 10px; font-size: 14px; color: var(--grey-500); }
.form-consent { font-size: 12.5px; color: var(--grey-500); margin-top: 14px; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 14.5px; display: none; }
.form-status[data-state='ok'] { display: block; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.form-status[data-state='err'] { display: block; background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.office { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.office__map { aspect-ratio: 16 / 10; background: var(--blue-50); }
.office__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.office__body { padding: 20px 22px; }
.office__country { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--blue-600); }
.office__city { font-size: 20px; font-weight: 700; color: var(--navy); margin-block: 2px 4px; }
.office__role { font-size: 13px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; }
.office__address { font-size: 14.5px; color: var(--ink-70); margin-top: 8px; }

/* ---------- stat cards (About: "Numbers That SPEAK for US") ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card { border-radius: var(--radius-md); padding: 26px; border: 1px solid rgba(0, 0, 0, .06); height: 100%; }
.stat-card svg { width: 26px; height: 26px; margin-bottom: 14px; }
.stat-card__value { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; }
.stat-card__label { font-size: 16px; font-weight: 700; color: var(--ink); margin: 6px 0 8px; }
.stat-card__body { font-size: 14px; color: var(--ink-70); line-height: 1.6; }
.stat-card:nth-child(6n+1) { background: var(--card-blue); }
.stat-card:nth-child(6n+2) { background: var(--card-sky); }
.stat-card:nth-child(6n+3) { background: var(--card-violet); }
.stat-card:nth-child(6n+4) { background: var(--card-green); }
.stat-card:nth-child(6n+5) { background: var(--card-amber); }
.stat-card:nth-child(6n+6) { background: var(--card-rose); }
.stat-card:nth-child(6n+1) svg { stroke: #2563eb; }
.stat-card:nth-child(6n+2) svg { stroke: #0284c7; }
.stat-card:nth-child(6n+3) svg { stroke: #7c3aed; }
.stat-card:nth-child(6n+4) svg { stroke: #059669; }
.stat-card:nth-child(6n+5) svg { stroke: #d97706; }
.stat-card:nth-child(6n+6) svg { stroke: #e11d48; }

/* ---------- world map (About: "Countries We WORK WITH") ---------- */
.map-panel {
  background: #e6f4fd; border-radius: var(--radius-md); margin-top: 34px;
  padding: clamp(16px, 2.4vw, 34px); overflow: hidden;
}
.map-panel { position: relative; }
.map-panel img, .map-panel .world-map { width: 100%; height: auto; margin-inline: auto; display: block; }

/* Each country is a live element so it can be hovered for its name. */
.world-map path { transition: fill .12s ease, filter .12s ease; }
@media (hover: hover) {
  .world-map path:hover { filter: brightness(1.18) saturate(1.1); cursor: default; }
}
.world-map path:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

.map-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -140%);
  background: var(--navy-deep); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.map-tip[hidden] { display: none; }
.map-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; translate: -50% 0;
  border: 5px solid transparent; border-top-color: var(--navy-deep);
}
.map-tip__badge {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16); font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.map-panel__pending {
  display: grid; place-items: center; min-height: clamp(240px, 34vw, 520px);
  color: var(--grey-500); font-size: 14.5px; text-align: center; gap: 6px;
}
.map-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.map-legend__item { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-70); }
.map-legend__swatch { width: 15px; height: 15px; border-radius: 3px; flex: none; }
.map-legend__swatch--active { background: #1b4079; }
.map-legend__swatch--other { background: #7d9dc4; }

/* ---------- timeline (About: "Our MILESTONES") ---------- */
.timeline { position: relative; margin-top: 44px; }
.timeline__track { position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--blue-400); opacity: .55; }
.timeline__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
@media (max-width: 980px) { .timeline__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .timeline__track { display: none; } }
@media (max-width: 600px) { .timeline__items { grid-template-columns: 1fr; } }
.timeline__item { display: flex; flex-direction: column; align-items: flex-start; }
.timeline__year {
  display: inline-block; background: var(--blue-500); color: #fff; font-size: 13px; font-weight: 800;
  letter-spacing: .04em; padding: 6px 14px; border-radius: var(--radius-sm); margin-bottom: 26px;
}
.timeline__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 20px; box-shadow: var(--shadow-sm); width: 100%; height: 100%;
}
.timeline__tag {
  display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--grey-500); background: var(--blue-50); border-radius: var(--radius-sm);
  padding: 5px 10px; margin-bottom: 14px;
}
.timeline__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.timeline__icon { width: 30px; height: 30px; border-radius: 8px; background: var(--blue-500); display: grid; place-items: center; flex: none; }
.timeline__icon svg { width: 16px; height: 16px; stroke: #fff; }
.timeline__title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.timeline__body { font-size: 13.5px; color: var(--ink-70); line-height: 1.6; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--band-dark); color: #fff; }
.cta-band__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: 40px; padding-block: 64px;
}
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band__rule { width: 64px; height: 3px; background: var(--blue-400); border: 0; margin: 0 0 16px; }
.cta-band__eyebrow { color: var(--blue-400); }
.cta-band h2 {
  color: #fff; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.02em; margin: 12px 0 14px;
}
.cta-band h2 span { display: block; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 56ch; }
.cta-band__media img { border-radius: var(--radius-md); margin-inline: auto; }

/* ---------- knowledge hub (homepage tabbed explainer) ---------- */
.tabs--cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px;
  background: none; padding: 0; border-radius: 0; width: 100%;
}
@media (max-width: 900px) { .tabs--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tabs--cards { grid-template-columns: 1fr; } }
.tabs--cards .tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 72px; padding: 14px 12px; border-radius: 10px; background: #fff;
  border: 1px solid var(--blue-600); color: var(--navy); font-size: 13.5px; font-weight: 600;
  text-align: center; line-height: 1.3; box-shadow: none;
}
.tabs--cards .tab svg { width: 22px; height: 22px; stroke: var(--blue-600); }
.tabs--cards .tab[aria-selected='true'] {
  background: var(--blue-600); color: #fff; border-color: var(--blue-600); font-weight: 700;
}
.tabs--cards .tab[aria-selected='true'] svg { stroke: #fff; }
.khub-panel {
  background: var(--blue-50); border: 1px solid var(--blue-600); border-radius: 15px;
  padding: clamp(20px, 2.4vw, 26px); margin-top: 22px;
}

/* ---------- service cards (homepage "WHAT WE DO") ---------- */
.service-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 260px));
  justify-content: center; gap: 24px;
}
@media (max-width: 1120px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 260px)); } }
@media (max-width: 620px)  { .service-grid { grid-template-columns: minmax(0, 260px); } }
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s;
}
a.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-card__media { position: relative; aspect-ratio: 260 / 173; background: var(--blue-50); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__badge {
  position: absolute; left: 16px; bottom: -20px; width: 42px; height: 42px; border-radius: 10px;
  background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md);
}
.service-card__badge svg { width: 20px; height: 20px; stroke: var(--blue-600); }
.service-card__body { padding: 30px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.service-card__title { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--navy); text-transform: uppercase; }
.service-card__text { font-size: 13.5px; color: var(--ink-70); line-height: 1.55; }

/* ---------- product / category cards ---------- */
.section--pastel { background: var(--band-light-low); }
.pcard-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 344px));
  justify-content: center; gap: 40px;
}
@media (max-width: 1120px) { .pcard-grid { grid-template-columns: repeat(2, minmax(0, 344px)); } }
@media (max-width: 760px)  { .pcard-grid { grid-template-columns: minmax(0, 344px); } }
.pcard {
  background: #fff; border: 0; border-radius: var(--radius-lg); padding: 28px 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  box-shadow: 0 .8px .8px -.94px rgba(0,0,0,.16), 0 2.4px 2.4px -1.9px rgba(0,0,0,.14), 0 6.4px 6.4px -2.8px rgba(0,0,0,.1);
  transition: transform .18s, box-shadow .18s; height: 100%;
}
a.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* The media box must keep its ratio whatever the photo's is — source images run from 0.74
   to 1.28 aspect, and an image sized by `max-height: 100%` overflowed the box (the flex
   item's automatic min-height let it grow), so the text below started at a different
   height on every card. Filling the box and letting object-fit letterbox is unambiguous:
   the image can never be larger than the frame, so every card's text lines up. */
.pcard__media { width: 100%; aspect-ratio: 1 / 1; min-height: 0; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__specs { display: flex; flex-direction: column; gap: 4px; }
.pcard__spec {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #7f8390; line-height: 1.4;
}
.pcard__title {
  font-size: 17px; font-weight: 700; color: var(--navy); text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.3;
}
.pcard__body { font-size: 14px; color: var(--ink-70); line-height: 1.55; }
.pcard .btn { margin-top: auto; width: 100%; }

/* ---------- sector cards ---------- */
.sector-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 344px));
  justify-content: center; column-gap: 32px; row-gap: 40px;
}
@media (max-width: 1120px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 344px)); } }
@media (max-width: 760px)  { .sector-grid { grid-template-columns: minmax(0, 344px); } }
.sector-card {
  background: #fff; border-radius: var(--radius-sm); overflow: hidden; display: flex;
  flex-direction: column; text-align: center; box-shadow: var(--shadow-md); height: 100%;
  transition: transform .18s, box-shadow .18s;
}
a.sector-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sector-card__media { width: 100%; aspect-ratio: 344 / 260; background: var(--blue-50); }
.sector-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sector-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sector-card__cap {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: #4b4f8e; line-height: 1.5;
}
.sector-card__title { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.sector-card .btn { margin-top: auto; width: 100%; text-transform: none; letter-spacing: 0; font-size: 15px; }

/* ---------- legal pages ---------- */
.legal-prose { max-width: 950px; margin-inline: auto; }
.legal-prose h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 36px 0 12px; }
.legal-prose p, .legal-prose li { color: var(--ink-70); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.72); padding-block: 56px 0; }
.site-footer a { color: rgba(255,255,255,.72); transition: color .15s; }
.site-footer a:hover { color: #fff; }
/* The brand track must be allowed to shrink below 240px or narrow phones overflow. */
.footer-grid { display: grid; grid-template-columns: minmax(min(240px, 100%), 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 36px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-brand img { height: 44px; width: auto; margin-bottom: 18px; }
.footer-tagline { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 18px; }
.footer-col__heading { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #fff; text-transform: uppercase; margin-bottom: 14px; }
.footer-col li { margin-bottom: 9px; font-size: 14.5px; }
.newsletter { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 420px; margin-top: 12px; }
.newsletter input {
  width: 100%; min-width: 0; font: inherit; font-size: 14.5px; padding: 11px 14px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
}
.newsletter input::placeholder { color: rgba(255,255,255,.45); }
.newsletter input:focus { outline: none; border-color: var(--blue-400); }
.newsletter button { border: 0; border-radius: 9px; padding: 11px 22px; background: var(--blue-500); color: #fff; font-size: 14.5px; font-weight: 700; }
.newsletter button:hover { background: var(--blue-600); }
.footer-bottom {
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; font-size: 13px;
}
.footer-bottom__brand { font-weight: 800; color: #fff; letter-spacing: .02em; }
.footer-bottom__legal { display: flex; gap: 20px; }
.footer-bottom__copy { margin-left: auto; }
@media (max-width: 700px) { .footer-bottom__copy { margin-left: 0; width: 100%; } }

/* ---------- utilities ---------- */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- language switcher ---------- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  margin-inline: 6px;
}
.lang-switch a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--navy); opacity: .55; padding: 4px 2px; transition: opacity .15s, color .15s;
}
.lang-switch a:hover, .lang-switch a:focus-visible { opacity: 1; color: var(--blue); }
.lang-switch a[aria-current='true'] { opacity: 1; border-bottom: 2px solid var(--navy); }
/* Direct child only: the flags are <svg class="flag"> inside the anchors, not separators. */
.lang-switch > span { color: var(--navy); opacity: .35; }
/* A hairline ring keeps the white of the Union Jack from bleeding into the white header. */
.lang-switch .flag {
  flex: none; display: block; width: 18px; height: 12px; border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(11, 31, 59, .18);
}
@media (max-width: 1024px) {
  .lang-switch { margin: 16px 0 0; gap: 10px; font-size: 15px; }
  .lang-switch .flag { width: 21px; height: 14px; }
}

/* ---------- language suggestion banner (EN pages, injected by site.js) ---------- */
.lang-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 48px 10px 16px; position: relative;
  background: var(--navy); color: #fff; font-size: 14px;
}
.lang-banner a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lang-banner button {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: inherit; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 6px 10px;
}