/*
 * GO4GREEN GROUP website. One stylesheet for every page.
 *
 *  1  Font             8  Home hero          15  Industries
 *  2  Tokens           9  Stats band         16  Clients
 *  3  Base            10  Sections           17  Contact band
 *  4  Helpers         11  Offices            18  Page hero
 *  5  Buttons         12  About              19  Office pages
 *  6  Top bar, header 13  Tile grid          20  Contact form
 *  7  Footer          14  Steps, process     21  Reduced motion
 *
 * Breakpoints: 1100px (wide grids step down), 900px (menu collapses),
 * 640px (phone). Each component keeps its own media queries beside it.
 * Colours come only from the tokens in section 2.
 */

/* 1  Font ------------------------------------------------------------- */
/* Plus Jakarta Sans, variable weight, Latin subset. Self-hosted so the
   site makes no third-party requests. Licence: assets/fonts/OFL.txt */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* 2  Tokens ----------------------------------------------------------- */
/* Contrast ratios are against white unless stated; all text pairs pass WCAG AA. */
:root {
  --green: #61DC6A;        /* logo green: fills and rules, never text on light */
  --green-hover: #4FCB59;
  --green-ink: #1C7A34;    /* green for text and icons on light, 5.4:1 */
  --on-green: #10200F;     /* text on --green, 9.7:1 */
  --ink: #18201B;          /* headings */
  --text: #46524B;         /* body copy, 8.2:1 */
  --muted: #5E6962;        /* secondary copy, 5.1:1 on --surface-alt */
  --line: #E2E7E3;
  --surface: #FFFFFF;
  --surface-alt: #EFF4F0;
  --tint: #E8F6EA;         /* pale green panel */
  --tint-line: #B9E0BE;
  --dark: #0F2418;         /* hero fallback, stats, process and contact bands */
  --on-dark: rgba(255, 255, 255, .86);
  --on-dark-muted: rgba(255, 255, 255, .7);
  --dark-line: rgba(255, 255, 255, .16);
  --error: #B42318;
  --error-bg: #FEF3F2;
  --shadow: 0 1px 2px rgba(24, 32, 27, .05), 0 8px 24px rgba(24, 32, 27, .06);
  --radius: 12px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-height: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 400 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }

/* 4  Helpers ---------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: -999px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
}
.skip-link:focus { left: 8px; }

/* The icon sprite holds <symbol>s only; it is never drawn itself. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--green-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* A plain bulleted list with tick marks, in columns where there is room. */
.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li { position: relative; padding-left: 26px; color: var(--ink); font-weight: 500; }
.check-list li::before {
  content: "";
  position: absolute;
  top: .45em;
  left: 4px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid var(--green-ink);
  border-left: 2px solid var(--green-ink);
  transform: rotate(-45deg);
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
}

/* 5  Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font: 600 15px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--green); color: var(--on-green); }
.btn--primary:hover { background: var(--green-hover); }
.btn--light { border-color: #fff; background: transparent; color: #fff; }
.btn--light:hover { background: rgba(255, 255, 255, .12); }
.btn--outline { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--surface); }

/* A round icon-only button for use on dark backgrounds and photos (the banner controls).
   A pause button holds both icons; .is-paused on an ancestor swaps them. */
.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(10, 16, 12, .4);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.icon-button:hover { border-color: #fff; background: rgba(255, 255, 255, .16); }
.icon-button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.icon-button .icon { width: 18px; height: 18px; }
.icon-button .icon--play, .is-paused .icon-button .icon--pause { display: none; }
.is-paused .icon-button .icon--play { display: block; }


/* 6  Top bar, header -------------------------------------------------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--surface-alt); font-size: 13.5px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar__contacts { display: flex; gap: 22px; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.topbar a:hover { color: var(--green-ink); }
.topbar .icon { width: 15px; height: 15px; color: var(--green-ink); }

@media (max-width: 640px) {
  .topbar__tagline, .topbar__contacts a + a { display: none; }
}

/* The header is sticky, so it is also the containing block for the
   collapsed menu panel below. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
}
.site-header__logo img { width: 132px; height: 44px; }

.site-nav { display: flex; align-items: center; gap: 10px; }
.site-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav a:not(.btn) {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:not(.btn):hover { background: var(--surface-alt); color: var(--green-ink); }
.site-nav .btn { min-height: 40px; padding: 0 16px; font-size: 14.5px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle[aria-expanded="true"] .icon--menu,
.nav-toggle[aria-expanded="false"] .icon--close { display: none; }

@media (max-width: 900px) {
  /* Without JavaScript the menu wraps under the logo, so it is always reachable. */
  .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
  .site-nav, .site-nav ul { flex-wrap: wrap; }

  /* With JavaScript (site.js adds .has-menu-button) it folds behind the button. */
  .has-menu-button .site-header__inner { flex-wrap: nowrap; padding-block: 0; }
  .has-menu-button .nav-toggle { display: inline-flex; }
  .has-menu-button .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 24px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .has-menu-button .site-nav.is-open { display: flex; }
  .has-menu-button .site-nav ul { flex-direction: column; }
  .has-menu-button .site-nav a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .has-menu-button .site-nav .btn { margin-top: 14px; }
}

@media (max-width: 640px) {
  :root { --header-height: 64px; }
  .site-header__logo img { width: 111px; height: 37px; }
  .has-menu-button .site-nav { padding: 8px 16px 16px; }
}

/* 7  Footer ----------------------------------------------------------- */
.site-footer {
  padding: 56px 0 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  font-size: 14.5px;
}
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr 1fr; gap: 32px; }
.site-footer__brand img { width: 150px; height: 50px; }
.site-footer__brand p { max-width: 34ch; margin-top: 12px; color: var(--muted); }
.site-footer h2 { margin-bottom: 12px; font-size: 14px; }
.site-footer ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--green-ink); text-decoration: underline; }
.site-footer__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding-top: 40px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .site-footer__base { flex-direction: column; }
}

/* 8  Home hero ------------------------------------------------------ */
/* Slides sit side by side in a scroll-snap track, so touch swipes and
   trackpads work natively. hero-slider.js adds dots, arrows, pause and
   autoplay; without it the track simply scrolls sideways. */
.hero { position: relative; background: var(--dark); color: #fff; }

.hero__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__track:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }

.hero__slide {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  min-height: min(600px, 78vh);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Darkens the left of the photo, under the copy, so the text reads on a busy image. */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 14, 10, .82) 0%, rgba(8, 14, 10, .62) 40%, rgba(8, 14, 10, .12) 68%, rgba(8, 14, 10, 0) 80%);
}
.hero__content { width: 100%; padding-block: 64px 112px; }
.hero .eyebrow { color: var(--green); }
.hero h1, .hero h2 {
  max-width: 16ch;
  color: #fff;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.hero__text { max-width: 46ch; margin-top: 16px; color: rgba(255, 255, 255, .92); font-size: clamp(16px, 1.3vw, 18px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero__controls { position: absolute; right: 0; bottom: 22px; left: 0; pointer-events: none; }
.hero__controls[hidden] { display: none; }
.hero__controls-inner { display: flex; align-items: center; gap: 14px; }
.hero__controls button { pointer-events: auto; cursor: pointer; }

.hero__dots { display: flex; gap: 4px; }
.hero__dot { display: grid; place-items: center; width: 36px; height: 44px; padding: 0; border: 0; background: none; }
.hero__dot::before { content: ""; width: 100%; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.hero__dot:hover::before { background: rgba(255, 255, 255, .8); }
.hero__dot[aria-current="true"]::before { background: var(--green); }

.hero__buttons { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 640px) {
  .hero__slide { min-height: 0; }
  .hero__slide::after { background: rgba(8, 14, 10, .62); }
  .hero__content { padding-block: 44px 92px; }
  .hero__actions .btn { flex: 1 1 140px; }
  .hero__controls { bottom: 14px; }
  .hero__dot { width: 30px; }
}

/* 9  Stats band ------------------------------------------------------- */
.stats { padding: 54px 0; background: var(--dark); color: #fff; }
.stats__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.stats__item { padding: 6px 28px; border-left: 1px solid rgba(255, 255, 255, .14); }
.stats__item:first-child { padding-left: 0; border-left: 0; }
.stats__value {
  display: block;
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.03em;
}
.stats__value span { color: var(--green); }
.stats__label { display: block; margin-top: 10px; color: rgba(255, 255, 255, .74); font-size: 15px; }

@media (max-width: 640px) {
  .stats { padding: 36px 0; }
  .stats__list { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .stats__item { padding: 0 16px; }
  .stats__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats__value { font-size: 38px; }
}

/* 10  Sections -------------------------------------------------------- */
.section { padding: 64px 0; }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark :is(h2, h3, h4) { color: #fff; }

.section__head { max-width: 720px; margin-bottom: 28px; }
.section__head h2 { font-size: clamp(28px, 2.8vw, 38px); }
.section__head p { margin-top: 12px; font-size: 17px; }
.section--dark .section__head p { color: var(--on-dark-muted); }
.section__subhead { margin: 40px 0 16px; font-size: 20px; }

/* A pale green panel with a short message and one action. */
.note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--tint-line);
  border-radius: var(--radius);
  background: var(--tint);
}
.note h3 { font-size: 17px; }
.note p { margin-top: 2px; font-size: 15px; }

@media (max-width: 640px) {
  .section { padding: 52px 0; }
}

/* 11  Offices: network, map, office cards ------------------------------ */
/* The section text and the world map sit side by side above the office cards. */
.network {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 36px;
}
.network .section__head { margin-bottom: 0; }

/* The group's flow, China to Dubai to Pakistan, as a list joined by a rule. */
.flow__title { margin-top: 26px; font-size: 17px; }
.flow { margin: 14px 0 0; padding: 0; list-style: none; }
.flow li { position: relative; padding: 0 0 14px 26px; color: var(--muted); font-size: 15px; }
.flow li:last-child { padding-bottom: 0; }
.flow li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--green-ink);
  border-radius: 50%;
  background: var(--surface);
}
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(.5em + 12px);
  bottom: 2px;
  left: 7px;
  width: 2px;
  background: var(--tint-line);
}
.flow strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }

/* The same map as the company profile: land, and a pin on each office (the head office is dark). */
.network__map { width: 100%; }

@media (max-width: 900px) {
  .network { grid-template-columns: 1fr; gap: 28px; }
}
/* The Dubai head office is the tall dark card; the other four tile beside it.
   Each card has its own photograph (office-card-*.jpg), different from the one on the office's page. */
.office-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.office-grid > li { display: flex; }
.office-grid > .office-grid__hq { grid-row: span 2; }

.office-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.office-card:hover { border-color: var(--tint-line); box-shadow: var(--shadow); }
.office-card { overflow: hidden; }
.office-card__photo { display: block; width: 100%; height: 150px; object-fit: cover; }
.office-card--hq .office-card__photo { height: auto; flex: 1 1 200px; min-height: 200px; }
.office-card:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; }
.office-card__body { display: flex; flex: 1 0 auto; flex-direction: column; gap: 4px; padding: 24px; }
/* A short green rule above each office name. */
.office-card__body::before { content: ""; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--green); }
.office-card h3 { font-size: 20px; }
.office-card p { color: var(--muted); font-size: 14px; }
.office-card .office-card__companies { margin-top: 8px; color: var(--ink); font-weight: 500; }
.office-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--green-ink);
  font-size: 14px;
  font-weight: 600;
}
.office-card__more .icon { width: 15px; height: 15px; transition: transform .2s; }
.office-card:hover .office-card__more .icon { transform: translateX(3px); }

.office-card--hq { border-color: var(--dark); background: var(--dark); color: var(--on-dark); }
.office-card--hq:hover { border-color: var(--dark); }
.office-card--hq:focus-visible { outline-color: var(--green); }
.office-card--hq .office-card__body { padding: 32px; }
.office-card--hq .office-card__body::before { display: none; }
.office-card--hq h3 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); }
.office-card--hq p { color: var(--on-dark-muted); font-size: 15px; }
.office-card--hq .office-card__companies { color: #fff; }
.office-card--hq .office-card__note { max-width: 40ch; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--dark-line); }
.office-card--hq .office-card__more { color: var(--green); }

.tag {
  align-self: flex-start;
  justify-self: start;
  margin-bottom: 14px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--green);
  color: var(--on-green);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .office-grid { grid-template-columns: 1fr 1fr; }
  .office-grid > .office-grid__hq { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .office-grid { grid-template-columns: 1fr; gap: 10px; grid-auto-rows: auto; }
  .office-card__body, .office-card--hq .office-card__body { padding: 20px; }
}

/* 12  About ----------------------------------------------------------- */
.about { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.about__text p + p { margin-top: 14px; }

.callout {
  margin-top: 20px;
  padding: 18px 22px;
  border-left: 4px solid var(--green);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.callout h3 { margin-bottom: 2px; color: var(--muted); font-size: 14px; font-weight: 600; }
.callout strong { display: block; color: var(--ink); font-size: 17px; }
.callout p { margin-top: 4px; }

.panel { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel h3 { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--green); font-size: 18px; }
.panel__list { margin: 0; padding: 0; list-style: none; }
.panel__list li { padding: 12px 0; border-top: 1px solid var(--line); }
.panel__list li:first-child { padding-top: 0; border-top: 0; }
.panel__list strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.panel__list span { color: var(--muted); font-size: 14px; }

/* The three core business areas, numbered 01 to 03. */
.areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: area;
}
.areas li { padding-top: 14px; border-top: 2px solid var(--green); counter-increment: area; }
.areas li::before {
  content: counter(area, decimal-leading-zero);
  display: block;
  color: var(--green-ink);
  font-size: 13px;
  font-weight: 700;
}
.areas h4 { margin: 4px 0 2px; color: var(--ink); font-size: 16px; }
.areas p { color: var(--muted); font-size: 14.5px; }

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .areas { grid-template-columns: 1fr; gap: 16px; }
}

/* 13  Tile grid ------------------------------------------------------- */
/* A heading and a short description per tile; works for any item count.
   --3 sets three columns, --numbered adds 01, 02, ... before each heading. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tile;
}
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tile-grid > li {
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: tile;
}
.tile-grid--numbered > li::before {
  content: counter(tile, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  color: var(--green-ink);
  font-size: 13px;
  font-weight: 700;
}
.tile-grid :is(h3, h4) { margin-bottom: 5px; font-size: 16.5px; }
/* Services: a photograph across the top of each tile, numbered over its corner. */
.tile-grid--photos > li { position: relative; overflow: hidden; padding-top: 0; }
.tile-grid__photo { display: block; width: calc(100% + 40px); max-width: none; height: auto; aspect-ratio: 4 / 3; margin: 0 -20px 16px; object-fit: cover; }
.tile-grid--numbered.tile-grid--photos > li::before {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--green-ink);
}
.tile-grid p { font-size: 14.5px; line-height: 1.55; }

@media (max-width: 900px) {
  .tile-grid, .tile-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tile-grid, .tile-grid--3 { grid-template-columns: 1fr; gap: 10px; }
  .tile-grid > li { padding: 18px; }
  .tile-grid--photos > li { padding-top: 0; }
  .tile-grid__photo { width: calc(100% + 36px); margin: 0 -18px 14px; }
}

/* 14  Steps, process ------------------------------------------------- */
/* Numbered steps down a vertical rule. */
.steps { max-width: 760px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li {
  position: relative;
  margin-left: 13px;
  padding: 0 0 16px 40px;
  border-left: 1.5px solid var(--line);
  counter-increment: step;
}
.steps > li:last-child { padding-bottom: 4px; border-left-color: transparent; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: -14px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-green);
  font-size: 11.5px;
  font-weight: 700;
}
.steps :is(h3, h4) { margin: 3px 0 2px; font-size: 16px; }
.steps p, .steps li li { color: var(--muted); font-size: 14.5px; }
.steps ul { margin: 4px 0 0; padding-left: 18px; }

.section--dark .steps > li { border-left-color: var(--dark-line); }
.section--dark .steps > li:last-child { border-left-color: transparent; }
.section--dark .steps p, .section--dark .steps li li { color: var(--on-dark-muted); }

/* A connected process, shown as a chain of labels. */
.process-title { margin-top: 32px; font-size: 16px; }
.process {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface-alt);
  list-style: none;
}
.process li { display: flex; align-items: center; gap: 8px; }
/* The second content line hides the arrow from screen readers; older browsers ignore it and use the first. */
.process li + li::before { content: "\2192"; content: "\2192" / ""; color: var(--green-ink); }
.process span {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.process li:first-child span, .process li:last-child span {
  border-color: var(--green);
  background: var(--green);
  color: var(--on-green);
}

.section--alt .process { background: var(--surface); }
.section--dark .process { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); }
.section--dark .process li + li::before { color: var(--green); }
.section--dark .process span { border-color: var(--dark-line); background: rgba(255, 255, 255, .07); color: #fff; }
.section--dark .process li:first-child span,
.section--dark .process li:last-child span { border-color: var(--green); background: var(--green); color: var(--on-green); }

/* How it works: steps on the left, a photograph on the right. */
.how { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.how__photo {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  object-fit: cover;
}

@media (max-width: 900px) {
  .how { grid-template-columns: 1fr; gap: 28px; }
  .how__photo { position: static; aspect-ratio: 16 / 9; }
}

/* 15  Industries ------------------------------------------------------ */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.industry-grid li {
  padding: 15px 16px 17px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--surface);
}
.industry-grid h3 { margin-bottom: 3px; font-size: 15px; }
.industry-grid p { color: var(--muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 900px) {
  .industry-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .industry-grid { gap: 8px; }
  .industry-grid li { padding: 12px 14px; }
}

/* Two photographs side by side under the industries. */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.photo-pair__photo { width: 100%; aspect-ratio: 16 / 7; border-radius: var(--radius); object-fit: cover; }

@media (max-width: 640px) {
  .photo-pair { grid-template-columns: 1fr; gap: 8px; }
}

/* 16  Clients --------------------------------------------------------- */
/* The heading beside a three-by-two panel of logos, split by hairlines.
   The logos are single-colour versions (tools/build-client-logos.py), so they read as one set. */
.clients { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; align-items: center; }
.clients .section__head { margin-bottom: 0; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
  list-style: none;
}
.logo-grid li { display: grid; place-items: center; height: 148px; padding: 24px; background: var(--surface); transition: background-color .25s; }
/* Wide logos stop at the width, tall ones at the height, so each carries about the same weight. */
.logo-grid img { grid-area: 1 / 1; width: auto; max-width: min(100%, 160px); max-height: 80px; transition: opacity .25s; }
/* Each cell stacks the single-colour logo and the brand-colour one; hovering a cell lights it up in colour. */
.logo-grid__colour { opacity: 0; }
.logo-grid li:hover { background: var(--tint); }
.logo-grid li:hover img { opacity: 0; }
.logo-grid li:hover .logo-grid__colour { opacity: 1; }

@media (max-width: 900px) {
  .clients { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .logo-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid li { height: 112px; padding: 18px; }
  .logo-grid img { max-width: min(100%, 124px); max-height: 60px; }
}

/* 17  Contact band ---------------------------------------------------- */
/* No photograph here: the band is on every page, and a repeated picture would follow the visitor around. */
.contact-band {
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(97, 220, 106, .14), rgba(97, 220, 106, 0) 70%),
    var(--dark);
  color: #fff;
}
.contact-band__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  padding-block: 72px;
}
.contact-band h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); }
.contact-band p { max-width: 56ch; margin-top: 12px; color: var(--on-dark); }
.contact-band__lead { color: #fff; font-size: 18px; font-weight: 600; }
.contact-band__actions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-band__actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.contact-band__actions a:hover { background: rgba(255, 255, 255, .16); }
.contact-band__actions a > span { display: flex; align-items: center; gap: 12px; }
.contact-band__actions .is-primary { border-color: var(--green); background: var(--green); color: var(--on-green); }
.contact-band__actions .is-primary:hover { background: var(--green-hover); }

@media (max-width: 900px) {
  .contact-band__inner { grid-template-columns: 1fr; gap: 24px; padding-block: 52px; }
}

/* 18  Page hero ------------------------------------------------------- */
/* Top of every inner page. --plain drops the photo for text-only pages. */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(460px, 64vh);
  overflow: hidden;
  background: var(--dark);
  color: #fff;
}
.page-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(8, 14, 10, .86) 0%, rgba(8, 14, 10, .45) 45%, rgba(8, 14, 10, .1) 100%);
}
.page-hero__content { width: 100%; padding-block: 96px 44px; }
.page-hero h1 { color: #fff; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -.025em; }
.page-hero__text { max-width: 60ch; margin-top: 12px; color: rgba(255, 255, 255, .9); font-size: clamp(16px, 1.3vw, 18px); }
.page-hero .tag { display: inline-block; margin-bottom: 14px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.page-hero--plain { min-height: 0; border-bottom: 1px solid var(--line); background: var(--surface-alt); color: var(--text); }
.page-hero--plain::after { content: none; }
.page-hero--plain .page-hero__content { padding-block: 44px 36px; }
.page-hero--plain h1 { color: var(--ink); font-size: clamp(32px, 4vw, 48px); }
.page-hero--plain .page-hero__text { color: var(--text); }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; }
.breadcrumb li + li::before { content: "/"; content: "/" / ""; margin-right: 8px; opacity: .6; }
.breadcrumb a { text-decoration-color: rgba(127, 127, 127, .6); text-underline-offset: 3px; }
.breadcrumb a:hover { text-decoration-color: currentColor; }

@media (max-width: 640px) {
  .page-hero { min-height: 0; }
  .page-hero__content { padding-block: 64px 32px; }
}

/* 19  Office pages --------------------------------------------------- */
/* The office's address and phones, in a band under the banner. */
.office-address { border-bottom: 1px solid var(--line); background: var(--surface); }
.office-address__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px 40px; padding-block: 32px; }
.office-address__item h3 { margin-bottom: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.office-address__name { color: var(--ink); font-size: 17px; font-weight: 600; }
.office-address__item .contact-list a { padding: 4px 0; border-top: 0; }
address { margin-top: 4px; color: var(--text); font-style: normal; line-height: 1.6; }
.address-local { margin-top: 6px; color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .office-address__grid { grid-template-columns: 1fr 1fr; }
  .office-address__item--wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .office-address__grid { grid-template-columns: 1fr; gap: 18px; padding-block: 26px; }
}

.company + .company { border-top: 1px solid var(--line); }
.company__head { max-width: 760px; margin-bottom: 20px; }
.company__head h2 { font-size: clamp(28px, 2.8vw, 38px); }
.company__head p { margin-top: 8px; color: var(--green-ink); font-size: 18px; font-weight: 600; }
.company__intro { max-width: 72ch; }
.company__intro p + p { margin-top: 12px; }

/* Short sections of prose side by side, e.g. "International trading".
   One block runs full width; two or three share the row. */
.prose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 32px; margin-top: 32px; }
.prose-grid h3 { margin-bottom: 6px; font-size: 17px; }
.prose-grid p { max-width: 72ch; }
.prose-grid p + p { margin-top: 8px; }
.prose-grid .check-list { margin-top: 14px; }

.link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-grid a {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .2s;
}
.link-grid a:hover { border-color: var(--green-ink); }
.link-grid strong { color: var(--ink); }
.link-grid span { color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .link-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .link-grid { grid-template-columns: 1fr; }
}

/* 20  Contact form --------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.contact-layout aside > * + * { margin-top: 16px; }

.form { padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.form h2 { margin-bottom: 20px; font-size: 24px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form__grid .is-wide { grid-column: 1 / -1; }

.field { display: grid; gap: 6px; }
.field label { color: var(--ink); font-size: 14px; font-weight: 600; }
.field .optional { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid #B7C2BB;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.4 var(--font);
}
.field textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green-ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(97, 220, 106, .35);
}
.field__error { display: none; color: var(--error); font-size: 14px; font-weight: 500; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }
.field.is-invalid .field__error { display: block; }

.error-summary {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1.5px solid var(--error);
  border-radius: 10px;
  background: var(--error-bg);
  color: #7A271A;
  font-size: 15px;
}
.error-summary[hidden] { display: none; }
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary a { color: inherit; font-weight: 600; }

/* Spam trap: hidden from people and assistive technology, filled only by bots. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.form__submit .btn { min-height: 52px; padding: 0 28px; font-size: 16px; }
.form__submit .btn[disabled] { opacity: .6; cursor: progress; }
.form__submit small { color: var(--muted); font-size: 13.5px; }

.contact-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.contact-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.contact-list li:first-child a { border-top: 0; }
.contact-list a:hover { color: var(--green-ink); }
.contact-list .icon { width: 18px; height: 18px; color: var(--green-ink); }

/* Every office's address on the contact page. */
/* Five cards: three across, then two wider ones, so no cell is left empty. */
.address-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.address-card { grid-column: span 2; }
.address-card:nth-child(n + 4) { grid-column: span 3; }
.address-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); scroll-margin-top: calc(var(--header-height) + 16px); }
.address-card h3 { font-size: 20px; }
.address-card__name { margin-top: 4px; color: var(--green-ink); font-weight: 600; }
.address-card address { margin-top: 10px; }
.address-card .contact-list { margin-top: 12px; }
.address-card .contact-list a { padding: 6px 0; border-top: 0; }
.address-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--green-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.address-card__more:hover { text-decoration: underline; }
.address-card__more .icon { width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .address-grid { grid-template-columns: 1fr 1fr; }
  .address-card, .address-card:nth-child(n + 4) { grid-column: auto; }
  .address-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .address-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form { padding: 20px 16px; }
  .form__grid { grid-template-columns: 1fr; gap: 14px; }
  .form__submit .btn { width: 100%; }
}

/* 21  Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}