/* ==========================================================================
   GenX eSolutions - site stylesheet
   Clean-room build. Layout language follows the Oitech reference
   (dark charcoal structure, single high-contrast accent, 1200px container,
   generous section rhythm) with GenX brand blue in place of the amber.
   No framework dependency - the grid below is ~40 lines of flexbox.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand. --accent is GenX blue, carried over from the current site. */
  --ink: #222429;
  --ink-soft: #2c2f36;
  --ink-line: #383c45;
  --accent: #086ad8;
  --accent-deep: #002fa6;
  --accent-bright: #2f8bf5;
  --accent-wash: #e9f1fd;

  --surface: #f4f5f8;
  --surface-warm: #f8f9fb;
  --white: #ffffff;

  --text: #6a6f7a;
  --text-light: #9aa0ab;
  --heading: var(--ink);
  --line: #e3e6ec;

  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* h1 capped at 64px rather than the reference's 90px - GenX headlines
     run longer and 90px wraps to four lines on a laptop. */
  --h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --h4: 1.375rem;
  --h5: 1.125rem;

  --container: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;
  --section-y: clamp(64px, 8vw, 118px);

  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 4px 16px rgba(34, 36, 41, 0.06);
  --shadow: 0 14px 40px rgba(34, 36, 41, 0.09);
  --shadow-lg: 0 24px 64px rgba(34, 36, 41, 0.13);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Header rows. The logo block spans both, so it derives its height from
     these rather than hard-coding one that drifts out of sync. */
  --topbar-line: 22px;
  --topbar-pad: 9px;
  --topbar-h: calc(var(--topbar-line) + var(--topbar-pad) * 2);   /* 40px */
  --navrow-pad: 25px;
  --navrow-line: 26px;
  --navrow-h: calc(var(--navrow-line) + var(--navrow-pad) * 2);   /* 76px */
  --header-h: calc(var(--topbar-h) + var(--navrow-h));            /* 116px */
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  color: var(--heading);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--h1); line-height: 1.08; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
a:hover { color: var(--accent-deep); }

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

ul, ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Inline icons from Helpers/Icons.cs. They carry no width/height attribute,
   so without this an icon in a context with no size rule stretches to its
   container's width. Deliberately one class deep: every component rule that
   sizes an icon (.btn svg, .feature-card__icon svg, .nav__caret) outranks it. */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 860px; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter) / -2);
}
.row > [class*="col-"] {
  padding-inline: calc(var(--gutter) / 2);
  margin-bottom: var(--gutter);
}
/* The mobile-first full width is set at zero specificity through :where(),
   so the plain .col-md-6 / .col-lg-4 rules below can override it. Written as
   ".row > [class*=col-]" it scores two classes against their one, and since a
   media query adds no specificity it wins at every width - which silently
   collapsed every grid on the site to a single column on desktop. */
:where(.row) > :where([class*="col-"]) { width: 100%; }

.row--tight { --gutter: 16px; }
.row--center { align-items: center; }

/* mobile-first: everything is full width until the breakpoint kicks in */
@media (min-width: 576px) {
  .col-sm-6 { width: 50%; }
}
@media (min-width: 768px) {
  .col-md-4 { width: 33.3333%; }
  .col-md-5 { width: 41.6667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333%; }
  .col-md-8 { width: 66.6667%; }
  .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-2 { width: 16.6667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
  .col-lg-5 { width: 41.6667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333%; }
  .col-lg-8 { width: 66.6667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-12 { width: 100%; }
  .order-lg-first { order: -1; }
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--surface { background: var(--surface); }
.section--warm { background: var(--surface-warm); }
.section--dark { background: var(--ink); color: #b9bec8; }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   4. Section titles
   -------------------------------------------------------------------------- */

.sec-title { margin-bottom: 52px; max-width: 720px; }
.sec-title--center { margin-inline: auto; text-align: center; }

.sec-title__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.sec-title__kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.sec-title--center .sec-title__kicker::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}

.sec-title h2 { margin-bottom: 0.45em; }
.sec-title p { color: var(--text); margin-bottom: 0; }

.section--dark .sec-title__kicker { color: var(--accent-bright); }
.section--dark .sec-title__kicker::before,
.section--dark .sec-title__kicker::after { background: var(--accent-bright); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  padding: 17px 32px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(8, 106, 216, 0.25);
}
.btn--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 47, 166, 0.3);
}

.btn--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn--dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--heading);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   6. Header

   Layout follows the Oitech "header style one" arrangement: a dark logo block
   on the far left that spans the full header height and carries an accent
   stripe on its right edge, a light-grey utility bar inset to the right of it,
   and the main nav row beneath. The header runs full-bleed rather than inside
   the 1200px container.
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  background: #fff;
  z-index: 60;
}

/* ---- utility bar ---- */

/* One row, always. Allowing this to wrap doubles the header height and the
   whole arrangement falls apart, so long items are hidden at narrow widths
   instead of being allowed to reflow. */

.header-top {
  display: flex;
  position: relative;
  /* Clears the logo block (254px + 8px stripe + gap) so the bar starts to its
     right rather than running underneath it. */
  margin-left: 286px;
  padding-right: 50px;
}

.header-top__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  min-width: 0;
  background: var(--surface);
  padding: 0 26px;
}

.header-top__list {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: var(--topbar-pad) 0;
  font-size: 0.8125rem;
  line-height: var(--topbar-line);
  color: var(--text);
  white-space: nowrap;
  min-width: 0;
}
.header-top__list li { display: flex; align-items: center; gap: 8px; margin: 0; }
.header-top__list svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.header-top a { color: var(--text); }
.header-top a:hover { color: var(--accent); }

/* Slash-separated utility links, as in the reference. */
.header-top__links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: var(--topbar-pad) 0;
  font-size: 0.8125rem;
  line-height: var(--topbar-line);
  white-space: nowrap;
}
.header-top__links li { margin: 0 0 0 13px; padding-left: 13px; position: relative; }
.header-top__links li:first-child { margin-left: 0; padding-left: 0; }
.header-top__links li + li::before {
  content: "/";
  position: absolute;
  left: -2px;
  color: var(--text-light);
}

.header-top__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-width: 150px;
  padding-left: 24px;
}
.header-top__social a { color: var(--heading); line-height: 0; }
.header-top__social a:hover { color: var(--accent); }
.header-top__social svg { width: 15px; height: 15px; }

/* The postal address is the first thing to go when space runs short. */
@media (max-width: 1500px) {
  .header-top__address { display: none; }
}
@media (max-width: 1299px) {
  .header-top__social { display: none; }
  .header-top { padding-right: 24px; }
}
@media (max-width: 1199px) {
  .header-top { display: none; }
}

/* ---- main row ---- */

.header-lower { position: relative; padding-right: 50px; }

.header-lower__inner {
  display: flex;
  align-items: flex-end;
  position: relative;
}

/* The dark block. The negative top margin is exactly the utility bar's height
   (22px line + 2 x 9px padding = 40px) so the block starts flush with the top
   of the page and reads as one solid column. */
.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 254px;
  min-height: var(--header-h);
  margin-top: calc(var(--topbar-h) * -1);
  margin-right: 46px;
  padding: 14px 24px;
  background: var(--ink);
  border-right: 8px solid var(--accent);
}
.logo-box .logo { display: block; line-height: 0; }
.logo-box img { width: 180px; height: auto; }

.nav-outer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.header-actions .btn { padding: 13px 24px; font-size: 0.875rem; white-space: nowrap; }

@media (max-width: 1499px) {
  .logo-box { margin-right: 28px; }
}
@media (max-width: 1199px) {
  .header-actions .btn { display: none; }
}

@media (max-width: 1199px) {
  .header-lower { padding-right: 0; }
  .header-lower__inner { align-items: center; }
  .logo-box {
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    margin-right: 20px;
    padding: 13px 20px;
    border-right-width: 6px;
  }
  .logo-box img { width: 140px; }
  .nav-outer { padding-right: 16px; }
}

@media (max-width: 575px) {
  .logo-box { padding: 11px 14px; border-right-width: 4px; }
  .logo-box img { width: 118px; }
}

/* ---- sticky ---- */

/* When stuck, the header collapses to a single compact bar: the tall dark
   block and the utility row would waste too much vertical space. */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--shadow-sm);
  animation: slideDown 0.35s var(--ease);
}
.site-header.is-stuck .header-top { display: none; }
.site-header.is-stuck .header-lower { padding-right: 0; }
.site-header.is-stuck .header-lower__inner { align-items: center; }
.site-header.is-stuck .logo-box {
  min-height: 0;
  min-width: 0;
  margin-top: 0;
  margin-right: 36px;
  padding: 12px 22px;
  border-right-width: 6px;
}
.site-header.is-stuck .logo-box img { width: 140px; }
.site-header.is-stuck .nav__list > li > a { padding-block: 20px; }
.site-header.is-stuck .nav__list > li > a::after { bottom: 15px; }

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header.is-stuck { animation: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.nav { display: none; }
@media (min-width: 1200px) {
  .nav { display: block; }
}

.nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list > li { position: relative; margin: 0 22px 0 0; }
.nav__list > li:last-child { margin-right: 0; }

.nav__list > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--navrow-pad) 0;
  line-height: var(--navrow-line);
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6f737b;
  position: relative;
}

/* Underline grows out from the centre on hover, and sits full-width on the
   current page - the reference's signature nav behaviour. */
.nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 19px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease), left 0.3s var(--ease);
}
.nav__list > li:hover > a::after,
.nav__list > li.is-active > a::after { left: 0; width: 100%; }
.nav__list > li:hover > a,
.nav__list > li.is-active > a { color: var(--accent); }

.nav__caret { width: 10px; height: 10px; opacity: 0.6; }

/* dropdowns */
.nav__list ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 262px;
  background: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  border-top: 3px solid var(--accent);
  z-index: 70;
}
.nav__list li:hover > ul,
.nav__list li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__list ul li { margin: 0; position: relative; border-bottom: 1px solid #ebf1f5; }
.nav__list ul li:last-child { border-bottom: 0; }
.nav__list ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 26px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--heading);
}
.nav__list ul a:hover { color: var(--accent); padding-left: 31px; }
.nav__list ul ul { top: -8px; left: 100%; border-radius: var(--radius); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: var(--accent-wash);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-toggle span:nth-child(2) { width: 70%; }
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
}

/* off-canvas mobile menu */
.offcanvas {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px, 88vw);
  background: var(--ink);
  color: #c3c8d2;
  z-index: 200;
  transform: translateX(-102%);
  transition: transform 0.38s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.offcanvas.is-open { transform: translateX(0); }

.offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--ink-line);
}
.offcanvas__head img { width: 150px; height: auto; }
.offcanvas__close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
  font-size: 1.25rem; line-height: 1;
  flex: none;
}
.offcanvas__close:hover { background: var(--accent); }

.offcanvas__nav { padding: 12px 0 24px; }
.offcanvas__nav ul { list-style: none; margin: 0; padding: 0; }
.offcanvas__nav li { margin: 0; border-bottom: 1px solid var(--ink-line); position: relative; }
.offcanvas__nav ul ul li:last-child { border-bottom: 0; }
.offcanvas__nav a {
  display: block;
  padding: 13px 24px;
  color: #d2d7df;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9375rem;
}
.offcanvas__nav a:hover { color: var(--accent-bright); }

.offcanvas__nav ul ul {
  display: none;
  background: rgba(0, 0, 0, 0.22);
}
.offcanvas__nav li.is-open > ul { display: block; }
.offcanvas__nav ul ul a {
  padding-left: 40px;
  font-weight: 500;
  font-size: 0.875rem;
  color: #aab0bb;
}
.offcanvas__nav ul ul ul a { padding-left: 56px; }

.submenu-toggle {
  position: absolute;
  right: 12px;
  top: 4px;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  color: #9aa0ab;
  cursor: pointer;
  display: grid; place-items: center;
}
.submenu-toggle svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.offcanvas__nav li.is-open > .submenu-toggle svg { transform: rotate(180deg); }

.offcanvas__foot {
  margin-top: auto;
  padding: 24px;
  border-top: 1px solid var(--ink-line);
  font-size: 0.875rem;
}
.offcanvas__foot a { color: #d2d7df; }
.offcanvas__foot p { margin-bottom: 0.6rem; }

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
  z-index: 190;
}
.backdrop.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   8. Hero

   Full-bleed photograph with a left-weighted dark scrim. The gradient does the
   work of keeping the headline legible, so the image itself needs no blur and
   the right-hand side stays open enough to actually read as a picture.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: #c6ccd6;
  overflow: hidden;
  padding-block: clamp(76px, 9vw, 150px);
  isolation: isolate;
}

/* the photograph */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/content/hero-ai.svg");
  background-size: cover;
  background-position: 68% center;
  background-repeat: no-repeat;
}

/* the scrim: opaque behind the copy on the left, clearing toward the right */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(16, 18, 24, 0.88) 0%,
    rgba(16, 18, 24, 0.66) 30%,
    rgba(16, 20, 30, 0.22) 52%,
    rgba(16, 20, 30, 0) 68%
  );
}

@media (max-width: 991px) {
  /* Portrait crop, and a much heavier scrim - on a phone the copy sits over
     the middle of the picture rather than beside it. */
  /* Pan to the globe and darken harder - on a phone the copy sits over the
     artwork rather than beside it. */
  .hero::before { background-position: 76% center; background-size: 200% auto; }
  .hero::after {
    background: linear-gradient(
      172deg,
      rgba(16, 18, 24, 0.92) 0%,
      rgba(16, 18, 24, 0.84) 52%,
      rgba(13, 27, 51, 0.8) 100%
    );
  }
}

.hero > .container { position: relative; z-index: 1; }

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 106, 216, 0.28);
  border: 1px solid rgba(90, 165, 250, 0.5);
  backdrop-filter: blur(4px);
  color: #bcd9fd;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 26px;
}

.hero h1 {
  color: #fff;
  margin-bottom: 0.5em;
  max-width: 15ch;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}
.hero h1 em { font-style: normal; color: #5aa5fa; }

.hero__lead {
  font-size: 1.125rem;
  max-width: 52ch;
  margin-bottom: 36px;
  color: #ccd3de;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero__actions { margin-bottom: 44px; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 640px;
}
.hero__stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2.25rem;
  line-height: 1.1;
  color: #fff;
}
.hero__stat span { font-size: 0.875rem; color: #aab2bf; }

@media (max-width: 991px) {
  .hero h1 { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   9. Page title (inner page hero)
   -------------------------------------------------------------------------- */

.page-title {
  position: relative;
  background: var(--ink);
  color: #b3b9c3;
  padding-block: clamp(56px, 7vw, 104px);
  overflow: hidden;
}
.page-title::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -6%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(8, 106, 216, 0.3) 0%, rgba(8, 106, 216, 0) 70%);
}
.page-title > .container { position: relative; z-index: 2; }
.page-title h1 { color: #fff; margin-bottom: 0.35em; }
.page-title p { max-width: 62ch; margin-bottom: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 0.875rem;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: "/"; color: #5d636e; }
.breadcrumb a { color: #c2c8d2; }
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb [aria-current] { color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.feature-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.feature-card__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-wash);
  color: var(--accent);
  margin-bottom: 24px;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.feature-card__icon svg { width: 28px; height: 28px; }
.feature-card:hover .feature-card__icon { background: var(--accent); color: #fff; }
.feature-card__title { font-size: 1.1875rem; margin-bottom: 0.55em; }
.feature-card__text { font-size: 0.9375rem; margin-bottom: 0; }

/* the overlapping strip of three cards that sits over the hero */
.pull-up { margin-top: calc(var(--section-y) * -0.5); position: relative; z-index: 5; }
.pull-up .feature-card { box-shadow: var(--shadow); border-color: transparent; }

/* service / solution tile with numbered corner */
.service-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 32px 32px;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__num {
  position: absolute;
  top: 20px;
  right: 26px;
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--surface);
  line-height: 1;
}
.service-card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--accent-wash);
  color: var(--accent);
  margin-bottom: 22px;
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.125rem; margin-bottom: 0.5em; }
.service-card p { font-size: 0.9375rem; margin-bottom: 1.1rem; }
.service-card__more {
  font-size: 0.875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-card__more svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.service-card:hover .service-card__more svg { transform: translateX(4px); }

/* flagship product card - the three headline products on the homepage.
   Taller than .service-card and flex-column so the three sit at an even
   height with "Discover now" pinned to the same baseline. One card carries
   .flagship-card--lead: accent border, gradient cap and a flag pill. */
.flagship-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px 32px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.flagship-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.flagship-card--lead { border-color: var(--accent); box-shadow: var(--shadow-sm); }
/* the cap is drawn inside the radius rather than with overflow:hidden,
   which would clip the flag pill hanging off the top edge */
.flagship-card--lead::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
}
.flagship-card__flag {
  position: absolute;
  top: -13px;
  left: 32px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
}
.flagship-card__icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--accent-wash);
  color: var(--accent);
  margin-bottom: 24px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.flagship-card__icon svg { width: 28px; height: 28px; }
.flagship-card:hover .flagship-card__icon { background: var(--accent); color: #fff; }
.flagship-card__title { font-size: 1.3125rem; margin-bottom: 0.55em; }
.flagship-card__text { font-size: 0.9375rem; margin-bottom: 1.35rem; }
.flagship-card__points { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.flagship-card__points li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 0.6rem;
  font-size: 0.875rem;
  color: var(--text);
}
.flagship-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23086ad8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.flagship-card__more {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.flagship-card__more svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.flagship-card:hover .flagship-card__more svg { transform: translateX(4px); }

@media (max-width: 575px) {
  .flagship-card { padding: 34px 24px 28px; }
}

/* vertical / audience card (Tour Operators, DMCs, ...) */
.vertical-card {
  height: 100%;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.vertical-card:hover { background: var(--accent-deep); transform: translateY(-6px); }
.vertical-card h3 { font-size: 1.0625rem; color: #fff; margin-bottom: 0.55em; }
.vertical-card p { font-size: 0.9375rem; color: #a8aeb9; margin-bottom: 0; }
.vertical-card:hover p { color: #d8e4f6; }
.vertical-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(8, 106, 216, 0.2);
  color: var(--accent-bright);
  margin-bottom: 20px;
}
.vertical-card:hover .vertical-card__icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vertical-card__icon svg { width: 24px; height: 24px; }

/* related links at the foot of a solution page */
.related-card {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.related-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.related-card__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-wash);
  color: var(--accent);
  margin-bottom: 18px;
}
.related-card__icon svg { width: 22px; height: 22px; }
.related-card h3 { font-size: 1.0625rem; margin-bottom: 0.5em; }
.related-card p { font-size: 0.875rem; margin-bottom: 1rem; }
.related-card__more { font-size: 0.8125rem; font-weight: 700; color: var(--accent); }
.related-card__more svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.related-card:hover .related-card__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   11. Content blocks
   -------------------------------------------------------------------------- */

.media-block img { border-radius: var(--radius-lg); }
.media-block--stack { position: relative; }
.media-block--stack .media-block__accent {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 52%;
  border: 8px solid #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (max-width: 767px) {
  .media-block--stack .media-block__accent { display: none; }
}

.check-list { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 0.7rem;
  color: var(--text);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23086ad8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.section--dark .check-list li { color: #b9bec8; }

/* numbered process steps */
.step {
  position: relative;
  height: 100%;
  padding: 36px 28px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.step__num {
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.0625rem; margin-bottom: 0.55em; }
.step p { font-size: 0.9375rem; margin-bottom: 0; }
.step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--gutter) / -2 - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--line);
  display: none;
}
@media (min-width: 992px) {
  .steps .col-lg-3:not(:last-child) .step::after { display: block; }
}

/* stat counters */
.stat { text-align: center; }
.stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: 1.05;
  color: #fff;
}
.stat span { font-size: 0.9375rem; color: #a3a9b4; }
.section--surface .stat strong { color: var(--heading); }
.section--surface .stat span { color: var(--text); }

/* supplier logo wall */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.logo-wall__item {
  background: #fff;
  display: grid;
  place-items: center;
  padding: 22px 14px;
  min-height: 108px;
}
.logo-wall__item img {
  max-height: 52px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.logo-wall__item:hover img { filter: grayscale(0); opacity: 1; }

/* testimonials */
.quote-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  position: relative;
}
.quote-card__mark {
  font-family: var(--font-head);
  font-size: 3.5rem;
  line-height: 0.8;
  color: var(--accent-wash);
  display: block;
  margin-bottom: 10px;
}
.quote-card p { font-size: 0.9375rem; margin-bottom: 1.5rem; }
.quote-card__who { display: flex; align-items: center; gap: 14px; }
.quote-card__who strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  color: var(--heading);
}
.quote-card__who span { font-size: 0.8125rem; color: var(--text-light); }
.quote-card__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  flex: none;
}

/* accordion / FAQ */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--heading);
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  display: grid; place-items: center;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.accordion__icon svg { width: 13px; height: 13px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
  background: var(--accent);
  color: #fff;
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p { padding: 0 4px 24px; font-size: 0.9375rem; margin: 0; }

/* pricing */
.price-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
}
.price-card--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  position: relative;
}
.price-card__flag {
  position: absolute;
  top: -13px;
  left: 32px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
}
.price-card h3 { font-size: 1.1875rem; margin-bottom: 0.4em; }
.price-card__price {
  font-family: var(--font-head);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.1;
  margin-bottom: 4px;
}
.price-card__note { font-size: 0.875rem; color: var(--text-light); margin-bottom: 26px; }
.price-card .check-list { flex: 1; margin-bottom: 26px; }
.price-card .check-list li { font-size: 0.9375rem; }

/* blog cards */
.post-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.post-card h3 { font-size: 1.0625rem; line-height: 1.4; margin-bottom: 0.6em; }
.post-card h3 a { color: var(--heading); }
.post-card h3 a:hover { color: var(--accent); }
.post-card p { font-size: 0.9375rem; margin-bottom: 1.15rem; }
.post-card__more { margin-top: auto; font-size: 0.875rem; font-weight: 700; }
.post-card__more svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.post-card:hover .post-card__more svg { transform: translateX(4px); }

/* long-form article body */
.prose { max-width: 74ch; }
.prose h2 { font-size: 1.625rem; margin-top: 2em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.prose img { border-radius: var(--radius); margin-block: 2rem; }
.prose blockquote {
  margin: 2rem 0;
  padding: 24px 28px;
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.0625rem;
  color: var(--heading);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  background: var(--accent-deep);
  overflow: hidden;
  padding-block: clamp(52px, 6vw, 80px);
}
.cta::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -8%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(47, 139, 245, 0.55) 0%, rgba(47, 139, 245, 0) 70%);
}
.cta > .container { position: relative; z-index: 2; }
.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta h2 { color: #fff; margin-bottom: 0.3em; max-width: 20ch; }
.cta p { color: #cfe0f8; margin-bottom: 0; max-width: 52ch; }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
}
.form-card--dark {
  background: var(--ink-soft);
  border-color: var(--ink-line);
}
.form-card--dark label { color: #cdd2da; }
.form-card--dark .form-control {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ink-line);
  color: #fff;
}
.form-card--dark .form-control::placeholder { color: #7d838e; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 8px;
}
.field .req { color: #d4353b; }

.form-control {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--heading);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.form-control::placeholder { color: var(--text-light); }
.form-control:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(8, 106, 216, 0.13);
}
textarea.form-control { min-height: 140px; resize: vertical; }

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236a6f7a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 42px;
}

/* phone field: country code + number */
.field--phone .phone-group { display: flex; gap: 10px; }
.field--phone .phone-group .form-control:first-child { width: 96px; flex: none; }

.field--invalid .form-control { border-color: #d4353b; background: #fdf3f3; }
.field__error {
  display: none;
  font-size: 0.8125rem;
  color: #d4353b;
  margin-top: 6px;
}
.field--invalid .field__error { display: block; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
}
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
}
.checkbox input { margin-top: 5px; accent-color: var(--accent); width: 17px; height: 17px; flex: none; }

.form-status {
  display: none;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 0.9375rem;
  margin-bottom: 18px;
}
.form-status.is-error { display: block; background: #fdf3f3; color: #a8272d; border: 1px solid #f1c9cb; }
.form-status.is-success { display: block; background: #eef8f1; color: #1f6b3a; border: 1px solid #c6e6d2; }

.form-note { font-size: 0.8125rem; color: var(--text-light); margin-top: 14px; }

/* compact enquiry form used in the hero / sidebar */
.quick-form .field { margin-bottom: 14px; }
.quick-form .form-control { padding: 12px 14px; }

/* newsletter */
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form .form-control { flex: 1; min-width: 190px; }

/* --------------------------------------------------------------------------
   14. Contact detail tiles
   -------------------------------------------------------------------------- */

.contact-tile {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
}
.contact-tile__icon {
  width: 58px; height: 58px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
}
.contact-tile__icon svg { width: 25px; height: 25px; }
.contact-tile h3 { font-size: 1.0625rem; margin-bottom: 0.5em; }
.contact-tile p, .contact-tile a { font-size: 0.9375rem; margin-bottom: 0; }
.contact-tile a { display: block; }

.map-embed {
  border: 0;
  width: 100%;
  height: 460px;
  display: block;
  filter: grayscale(0.35);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #9aa1ad;
  font-size: 0.9375rem;
}
.site-footer a { color: #c2c8d2; }
.site-footer a:hover { color: var(--accent-bright); }

.footer-top { padding-block: clamp(52px, 6vw, 86px); }
.footer-brand img { height: 42px; margin-bottom: 22px; }
.footer-brand p { margin-bottom: 22px; max-width: 34ch; }
/* the brand column is not a .footer-col, so its heading needs the same
   treatment or it renders near-black on the near-black footer */
.footer-brand h4 {
  font-size: 1.0625rem;
  color: #fff;
  margin-bottom: 18px;
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-social a:hover { background: var(--accent); transform: translateY(-3px); }
.footer-social svg { width: 16px; height: 16px; color: #fff; }

.footer-col h4 {
  font-size: 1.0625rem;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 14px;
}
.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 2px;
  background: var(--accent);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.65rem; }

.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.footer-contact svg { width: 17px; height: 17px; color: var(--accent-bright); flex: none; margin-top: 5px; }

.footer-bottom {
  border-top: 1px solid var(--ink-line);
  padding-block: 24px;
  font-size: 0.875rem;
}
.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-bottom li { margin: 0; }

/* The offices / numbers / partners band. Its own row under the link columns
   rather than squeezed beside them - the old footer ran these as a second
   full-width strip and there is more address copy here than a link column
   can hold. */
.footer-mid {
  border-top: 1px solid var(--ink-line);
  padding-block: clamp(40px, 4.5vw, 62px);
}
.footer-mid .footer-col h4 { margin-bottom: 22px; }

.footer-office { margin-bottom: 20px; }
.footer-office:last-child { margin-bottom: 0; }
.footer-office strong {
  display: block;
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  margin-bottom: 8px;
}
.footer-office p {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 0;
  font-size: 0.9375rem;
}
.footer-office svg { width: 17px; height: 17px; color: var(--accent-bright); flex: none; margin-top: 5px; }

/* The region tag reads as a label, not an abbreviation to be italicised. */
.footer-contact__region {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-left: 8px;
}

/* Partner marks are dark-on-light source files, so they sit on a light tile
   rather than being inverted - inverting a multi-colour logo wrecks it. */
.footer-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.footer-partners__item {
  width: calc(50% - 5px);
  max-width: 132px;
  aspect-ratio: 3 / 1;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.93);
}
.footer-partners__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.footer-col__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.footer-col__more svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.footer-col__more:hover svg { transform: translateX(4px); }

.footer-mid .footer-social { flex-wrap: wrap; gap: 8px; }
.footer-mid .footer-social a { width: 34px; height: 34px; }
.footer-mid .footer-social svg { width: 15px; height: 15px; }

@media (max-width: 991px) {
  .footer-brand p { max-width: none; }
  .footer-top .footer-col { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   16. Floating actions
   -------------------------------------------------------------------------- */

.float-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.float-actions a,
.float-actions button {
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.25s var(--ease);
}
.float-actions a:hover,
.float-actions button:hover { transform: translateY(-3px); }
.float-actions svg { width: 22px; height: 22px; }
.float-whatsapp { background: #25d366; color: #fff; }
.float-top {
  background: var(--ink);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s, transform 0.25s var(--ease);
}
.float-top.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   17. Scroll reveal (progressive enhancement)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* If JS never runs, nothing should stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2.5rem; }
.lead { font-size: 1.0625rem; }

@media print {
  .header-top, .site-header, .site-footer, .float-actions, .cta { display: none !important; }
  body { color: #000; }
}