/* Copyright 2026 JSolutions. Prepared for Brit International Ltd. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #010d61;
  --navy-deep: #010a4a;
  --ink: #0e1538;
  --ink-2: #3d4668;
  --paper: #ffffff;
  --mist: #f1f3fa;
  --line: #d4d9ec;
  --green: #6fcf4a;
  --green-press: #5cbb39;
  --on-navy: #ffffff;
  --on-navy-2: #c8cdea;
  --line-navy: rgba(255, 255, 255, 0.22);

  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --max: 76rem;
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --space-section: clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--navy); color: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--navy);
  color: var(--paper);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { top: 0.75rem; }

h1, h2, h3 {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 750;
}

/* Header: navy, logo on a white plate like a chart cartouche */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--navy);
  border-bottom: 1px solid var(--line-navy);
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding: 0 var(--edge);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--on-navy);
  text-decoration: none;
}
.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
}
.brand-mark .mark-dot { fill: var(--green); stroke: var(--navy); stroke-width: 1.2; }
.brand-word { display: flex; flex-direction: column; }
.brand-main {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}
.brand-sub {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav a:not(.btn) {
  color: var(--on-navy-2);
  text-decoration: none;
  padding: 0.5rem 0;
}
.nav a:not(.btn):hover { color: var(--on-navy); text-decoration: underline; text-underline-offset: 0.35em; }
.top :focus-visible, .hero :focus-visible, .book :focus-visible { outline-color: var(--green); }

/* Buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: var(--navy-deep);
  font-weight: 750;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 1.05rem 1.75rem;
  border-radius: 0;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--green-press); }
.btn:active { transform: translateY(1px); }
.btn-small { font-size: 0.9375rem; padding: 0.7rem 1.1rem; }

.link {
  font-weight: 650;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.link:hover { text-decoration-thickness: 2px; }
.link-light { color: var(--on-navy); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

/* Hero: the chart */
.hero {
  background: var(--navy);
  color: var(--on-navy);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.hero h1 { color: var(--on-navy); }
.hero-top {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding: 0 var(--edge);
}
.hero-sub {
  max-width: 31rem;
  margin-bottom: 1.75rem;
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.5;
  color: #e6e9f7;
}

.chart { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.chart-scroll { padding: 0 var(--edge); }
.chart-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 327.8;
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.land {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.24);
  -webkit-mask: url("images/world-land.svg") center / 100% 100% no-repeat;
  mask: url("images/world-land.svg") center / 100% 100% no-repeat;
}
.routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.graticule path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.8px;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.route-lit {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease);
}
.route-lit.is-active { stroke-dashoffset: 0; }

/* Chart lettering */
.coords { position: absolute; inset: 0; pointer-events: none; }
.lat, .lon {
  position: absolute;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}
.lat { left: 0.6rem; transform: translateY(-1.3em); }
.lat-a { top: 11.87%; }
.lat-b { top: 37.28%; }
.lat-c { top: 62.72%; }
.lat-d { top: 88.13%; }
.lon { bottom: 0.5rem; transform: translateX(0.4rem); }
.lon-a { left: 16.67%; }
.lon-b { left: 33.33%; }
.lon-c { left: 50%; }
.lon-d { left: 66.67%; }
.lon-e { left: 83.33%; }

.node {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.node-uk { left: 49.96%; top: 19.06%; cursor: default; }
.node-us { left: 29.44%; top: 28.21%; }
.node-ae { left: 65.35%; top: 41.36%; }
.node-sg { left: 78.84%; top: 61.57%; }
.node-au { left: 92%;    top: 91.4%; }

.pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--navy);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.node.is-open .pin { background: var(--green); }
.node.is-active .pin { transform: scale(1.5); }
.node-uk .pin {
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  background: var(--green);
  box-shadow: 0 0 0 5px var(--navy), 0 0 0 7px var(--green);
}

.tag {
  position: absolute;
  top: calc(50% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25;
  pointer-events: none;
}
.tag b { color: var(--on-navy); font-weight: 750; font-size: 1rem; }
.tag .clock-time { color: var(--on-navy-2); font-variant-numeric: tabular-nums; }
.node-uk .tag { top: auto; bottom: calc(50% + 1.8rem); }
.node-au .tag {
  top: 50%;
  left: calc(50% + 1.1rem);
  transform: translateY(-50%);
  align-items: flex-start;
}

/* Market strip under the chart */
.strip { padding: 1.25rem var(--edge) clamp(2rem, 4vw, 3.5rem); }
.market-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 1.5rem;
}
.market {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0.25rem 1rem 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--line-navy);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.market:hover { border-top-color: var(--on-navy-2); }
.market[aria-pressed="true"] { border-top-color: #fff; background: rgba(255, 255, 255, 0.07); }
.m-name {
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.m-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.clock-time { font-weight: 600; }
.m-city { font-size: 0.875rem; color: var(--on-navy-2); }
.market.is-open .clock-time::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--green);
  vertical-align: 0.08em;
}
.market-note {
  display: block;
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--on-navy-2);
}
.swipe-hint { display: none; }
.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--green);
  vertical-align: 0.08em;
}

/* Sections */
.section { padding: var(--space-section) var(--edge); }
.section-mist {
  background-color: var(--mist);
  background-image:
    linear-gradient(to right, rgba(1, 13, 97, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1, 13, 97, 0.07) 1px, transparent 1px);
  background-size: 8.3333% 100%, 100% 8.3333vw;
}
.inner { max-width: calc(var(--max) - 2 * var(--gutter)); }
.lead {
  max-width: 40rem;
  margin-top: 1.5rem;
  font-size: 1.25rem;
  color: var(--ink-2);
}

.split {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 2rem clamp(2rem, 6vw, 5rem);
}
.entries { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.entry {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0.75rem 2.5rem;
  align-items: center;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}
.entry h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.entry p { color: var(--ink-2); }

.diagram { width: 100%; height: auto; overflow: visible; }
.diagram .d-line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.diagram .d-dash { stroke-dasharray: 2 6; }
.diagram .d-dot { fill: var(--navy); stroke: none; }
.diagram .d-faint { opacity: 0.4; }
.diagram .d-go { fill: var(--green); stroke: var(--navy); stroke-width: 2.5; }
.diagram .d-hollow { fill: var(--paper); stroke: var(--navy); stroke-width: 2; stroke-dasharray: 2 4; }
.diagram .d-tick { fill: none; stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.diagram .d-arrow { fill: var(--navy); }

/* Statement band */
.statement {
  background-color: var(--navy);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 8.3333% 100%, 100% 8.3333vw;
  color: var(--on-navy);
  padding: clamp(3rem, 7vw, 6rem) var(--edge) clamp(4rem, 8vw, 6.5rem);
}
.statement-text {
  color: var(--on-navy);
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  max-width: none;
}
.statement-sub {
  margin-top: 1.75rem;
  max-width: 30rem;
  font-size: 1.25rem;
  color: var(--on-navy-2);
}
.route-rule {
  position: relative;
  height: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 3px dotted rgba(255, 255, 255, 0.7);
}
.stop {
  position: absolute;
  top: -0.8rem;
  width: 1.3rem;
  height: 1.3rem;
  transform: translateX(-50%);
}
.stop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px var(--navy);
}
.stop i {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--on-navy-2);
}
.stop-uk::before { background: var(--green); box-shadow: 0 0 0 4px var(--navy), 0 0 0 6px var(--green); }
.stop-uk { left: 0; }
.stop-us { left: 20%; }
.stop-ca { left: 40%; }
.stop-ae { left: 60%; }
.stop-sg { left: 80%; }
.stop-au { left: 100%; }
.stop-uk i { left: 0.65rem; transform: none; }
.stop-au i { left: auto; right: 0.65rem; transform: none; }

.areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem clamp(2rem, 6vw, 5rem);
  margin-top: 3.5rem;
}
.area { position: relative; border-top: 3px dotted var(--navy); padding-top: 1.75rem; }
.area::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--mist);
}
.area p { margin-top: 0.75rem; color: var(--ink-2); max-width: 30rem; }
.note { margin-top: 3rem; max-width: 40rem; color: var(--ink-2); }

/* How it works: three waypoints on a dotted route */
.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 5vw, 4rem);
  border-top: 3px dotted var(--navy);
}
.step { position: relative; padding-top: 2rem; }
.step::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--paper);
}
.step:last-child::before { background: var(--green); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--navy); }
.step h3 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.step p { margin-top: 1.25rem; color: var(--ink-2); max-width: 20rem; }

/* Book */
.book {
  background-color: var(--navy);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 8.3333% 100%, 100% 8.3333vw;
  color: var(--on-navy);
  padding: var(--space-section) var(--edge);
}
.book-inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 2.5rem clamp(2rem, 6vw, 5rem);
  align-items: end;
}
.book h2 {
  color: var(--on-navy);
  font-size: clamp(2.5rem, 6vw, 5rem);
  max-width: 12ch;
}
.book-side p {
  margin-bottom: 2rem;
  font-size: 1.25rem;
  color: var(--on-navy-2);
  max-width: 28rem;
}

/* Footer */
.foot { background: var(--navy-deep); color: var(--on-navy-2); padding: 2.5rem var(--edge); font-size: 0.9375rem; }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.foot p + p { margin-top: 0.25rem; }
.foot-name { color: var(--on-navy); font-weight: 750; }
.foot a { color: var(--on-navy); }
.foot :focus-visible { outline-color: var(--green); }

/* Tablet */
@media (max-width: 62rem) {
  .hero-top { grid-template-columns: 1fr; align-items: start; }
  .market-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 8rem minmax(0, 1fr); align-items: start; }
  .entry .diagram { grid-row: span 2; }
  .book-inner { grid-template-columns: 1fr; align-items: start; }
  .steps { grid-template-columns: 1fr; border-top: 0; border-left: 3px dotted var(--navy); gap: 2.5rem; padding-left: 2rem; }
  .step { padding-top: 0; }
  .step::before { top: 0.4rem; left: calc(-2rem - 0.6rem - 1.5px); }
}

/* Phone */
@media (max-width: 48rem) {
  .nav a:not(.btn) { display: none; }
  .brand-mark { width: 2.1rem; height: 2.1rem; }
  .brand-main { font-size: 1.4rem; }
  .route-lit { stroke-width: 4.5; }
  .node { width: 2.25rem; height: 2.25rem; }
  .market-list { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 1fr; gap: 0.75rem; }
  .entry .diagram { grid-row: auto; max-width: 9rem; }
  .areas { grid-template-columns: 1fr; gap: 2.25rem; }
  .btn { width: 100%; }
  .btn-small { width: auto; min-height: 2.75rem; }
  .stop i { font-size: 0.8125rem; }
  .coords { display: none; }
  .chart-scroll { padding-top: 2.25rem; }
  .tag .clock-time { display: none; }
  .tag b { font-size: 0.6875rem; }
  .node-au .tag { left: auto; right: calc(50% + 0.7rem); align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Client logo (supplied by the client) on a white plate, because the artwork has a white background */
.brand-plate { display: block; overflow: hidden; background: #fff; border-radius: 0.375rem; padding: 0.3rem 0.5rem; }
.brand-logo { display: block; height: 3.1rem; width: auto; margin-right: 0; }
@media (max-width: 48rem) { .brand-logo { height: 2.1rem; } }

/* ===== Landing screen in the client's layout (nav, hero, features, presence panel) ===== */
.accent { color: var(--green); }
.hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-main { padding: 0 var(--edge); }
.hero-main > * { max-width: 42rem; }
.hero h1 { font-size: clamp(2.75rem, 6.2vw, 5rem); line-height: 1.02; }
.hero h1 .accent { display: block; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-navy-2);
}
.eyebrow-rule { width: 2.5rem; height: 2px; background: var(--green); flex-shrink: 0; }
.hero-sub { max-width: 36rem; margin: 1.75rem 0 2rem; }
.hero-sub strong { color: #fff; font-weight: 700; }
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  gap: 0.6rem;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.play { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.play circle { fill: none; stroke: #fff; stroke-width: 1.5; }
.play path { fill: #fff; }

.features {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  text-align: center;
  font-weight: 650;
  line-height: 1.25;
  border-left: 1px solid var(--line-navy);
}
.features li:first-child { border-left: 0; }
.features svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.presence {
  margin: clamp(2.5rem, 5vw, 4rem) var(--edge) 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03);
}
.presence-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: 1.75rem;
}
.presence-head .eyebrow { margin-bottom: 1rem; }
.presence h2 { color: #fff; max-width: none; font-size: clamp(2rem, 4vw, 3.25rem); }
.presence-side p { max-width: 32rem; margin-bottom: 1.25rem; color: #e6e9f7; }
.presence .chart { margin-top: 0; }
.presence .chart-scroll { padding: 0; }
.presence .strip { padding: 1.5rem 0 0; }
.presence .market-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1rem; }
.presence .market { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.presence .m-time { flex-direction: row; align-items: baseline; gap: 0.5rem; }
.m-name { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.flag {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.strip-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 2rem;
  margin-top: 1rem;
}
.strip-foot .market-note { margin-top: 0; }
.tagline {
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

.node-ca { left: 18.33%; top: 19.43%; }
.tag {
  flex-direction: row;
  gap: 0.45rem;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  background: rgba(1, 10, 74, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}
.tag b { font-size: 0.875rem; }
.tag .clock-time { display: none; }
.node-au .tag { left: auto; right: calc(50% + 1.1rem); align-items: center; }

@media (max-width: 62rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; }
  .features li:nth-child(3) { border-left: 0; }
  .presence-head { grid-template-columns: 1fr; align-items: start; }
  .presence .market-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .presence .market-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presence .chart-scroll { padding: 2.25rem 0 0; }
  .tag { padding: 0.15rem; gap: 0.3rem; }
  .tag b { display: none; }
  .node-uk .tag { padding: 0.15rem 0.5rem 0.15rem 0.2rem; }
  .node-uk .tag b { display: block; font-size: 0.6875rem; }
  .node-au .tag { right: calc(50% + 0.7rem); }
  .btn-ghost { width: 100%; }
}

.btn span[aria-hidden="true"] { margin-left: 0.5rem; }

/* Simplified: flags are official-style circle flags (MIT), strip shows flag, name and time only */
.strip-foot { justify-content: flex-end; }
.flag { border: 0; }

/* Size the label to its content so the pill border always wraps it (iPhone Safari) */
.tag { width: max-content; }

/* Phone: Singapore label above its pin so it no longer covers Australia's flag */
@media (max-width: 48rem) {
  .node-sg .tag { top: auto; bottom: calc(50% + 0.9rem); }
}

.strip-foot { justify-content: space-between; }

/* ===== Services: "More Than Leads" in the client's layout; our own diagrams replace the handshake photo ===== */
.svc {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding: var(--space-section) var(--edge);
}
.svc :focus-visible { outline-color: var(--green); }
.svc-head {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 3rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.svc h2 { color: #fff; max-width: none; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.04; }
.svc h2 .accent { display: block; }
.svc-lead { max-width: 36rem; margin-top: 1.75rem; font-size: 1.1875rem; line-height: 1.55; color: #e6e9f7; }

.trio {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  max-width: 36rem;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 1rem 2.5rem;
  border-top: 1px solid var(--line-navy);
}
.trio li { display: flex; align-items: center; gap: 0.85rem; font-weight: 650; line-height: 1.25; }
.trio svg, .card > svg {
  flex-shrink: 0;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trio svg { width: 2.5rem; height: 2.5rem; }

.ways .eyebrow { margin-bottom: 0.5rem; }
.ways ul { list-style: none; margin: 0; padding: 0; }
.ways li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-navy);
}
.ways h3 { color: #fff; font-size: 1.25rem; }
.ways .diagram .d-line { stroke: #fff; }
.ways .diagram .d-dot { fill: #fff; }
.ways .diagram .d-go { stroke: var(--navy-deep); }
.ways .diagram .d-hollow { fill: none; stroke: #fff; }
.ways .diagram .d-tick { stroke: #fff; }
.ways .diagram .d-arrow { fill: #fff; }

.cards {
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.card:hover { border-color: var(--green); background: rgba(255, 255, 255, 0.06); }
.card > svg { width: 3rem; height: 3rem; }
.card h3 { color: #fff; font-size: 1.1875rem; }
.card p { margin-top: 0.5rem; font-size: 1rem; line-height: 1.5; color: var(--on-navy-2); }
.go {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-size: 1.1rem;
}

@media (max-width: 62rem) {
  .svc-head { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 48rem) {
  .trio { grid-template-columns: 1fr; }
  .ways li { grid-template-columns: 5rem minmax(0, 1fr); }
  .card { grid-template-columns: auto minmax(0, 1fr); padding: 1.25rem; gap: 1rem; }
  .card .go { display: none; }
  .card > svg { width: 2.5rem; height: 2.5rem; }
}

/* ===== Process: Discover, Strategise, Execute (client's wording, numbered line, no icons) ===== */
.process {
  --proc-gap: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  padding: var(--space-section) var(--edge);
  background: var(--paper);
}
.process::before {
  content: "";
  position: absolute;
  inset: 0 0 0 42%;
  background: var(--navy);
  opacity: 0.06;
  -webkit-mask: url("images/world-land.svg") center / contain no-repeat;
  mask: url("images/world-land.svg") center / contain no-repeat;
  pointer-events: none;
}
.proc { position: relative; list-style: none; margin: 0; padding: 0; max-width: 48rem; display: grid; gap: var(--proc-gap); }
.proc li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 2rem; }
.proc li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 3rem;
  bottom: calc(-1 * var(--proc-gap));
  width: 2px;
  background: var(--navy);
}
.num {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.proc h3 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.proc-lead { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--navy); }
.proc li p:last-child { margin-top: 0.75rem; max-width: 36rem; color: var(--ink-2); }
@media (max-width: 48rem) {
  .proc li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem; }
  .num { width: 2.5rem; height: 2.5rem; font-size: 0.8125rem; }
  .proc li:not(:last-child)::after { left: calc(1.25rem - 1px); top: 2.5rem; }
  .process::before { inset: 0; opacity: 0.045; }
}

/* Market text under the map (client's wording) */
.presence-copy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-navy);
}
.presence-copy p { font-size: 1.1875rem; line-height: 1.55; color: #e6e9f7; }
@media (max-width: 62rem) { .presence-copy { grid-template-columns: 1fr; } }

/* Soft glint in the corner, like the light catch on the logo's blue square */
.hero {
  background-color: var(--navy);
  background-image: radial-gradient(70% 55% at 0% 0%, rgba(60, 100, 240, 0.34), rgba(60, 100, 240, 0) 70%);
}
.svc {
  background-color: var(--navy-deep);
  background-image: radial-gradient(60% 40% at 100% 0%, rgba(50, 90, 220, 0.22), rgba(50, 90, 220, 0) 70%);
}
.book {
  background-image:
    radial-gradient(70% 70% at 0% 0%, rgba(60, 100, 240, 0.3), rgba(60, 100, 240, 0) 70%),
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: auto, 8.3333% 100%, 100% 8.3333vw;
}

/* Simplified: heading left, short intro right; one clear column of cards below */
.svc-head { grid-template-columns: 1fr 1fr; align-items: end; }
.svc-lead { margin-top: 0; }
@media (max-width: 62rem) { .svc-head { grid-template-columns: 1fr; align-items: start; } .svc-lead { margin-top: 1.5rem; } }
.svc-head { display: block; }
.svc-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
@media (max-width: 62rem) { .svc-intro { grid-template-columns: 1fr; align-items: start; } }

/* ===== About Us (client's wording) ===== */
.about { background: var(--mist); padding: var(--space-section) var(--edge); }
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.about h2 { max-width: none; font-size: clamp(2.25rem, 5vw, 4rem); }
.about-name { margin-top: 1rem; font-size: 1.125rem; font-weight: 650; color: var(--ink-2); }
.about-copy p { max-width: 40rem; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); }
.about-copy p + p { margin-top: 1.25rem; }
.about-copy .about-close {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--green);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--navy);
}
@media (max-width: 62rem) { .about-grid { grid-template-columns: 1fr; } }

/* ===== Enquire Now form ===== */
.book-alt { margin-top: 1.25rem; color: var(--on-navy-2); }
.enquire { background: var(--paper); padding: var(--space-section) var(--edge); }
.enquire-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.enquire h2 { max-width: none; font-size: clamp(2.25rem, 5vw, 4rem); }
.enquire-intro p { margin-top: 1.25rem; max-width: 24rem; font-size: 1.1875rem; color: var(--ink-2); }
.enquire-form { display: grid; gap: 1.5rem; max-width: 40rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; min-width: 0; }
.field label, .services legend { font-size: 0.9375rem; font-weight: 700; color: var(--navy); }
.opt { font-weight: 500; color: var(--ink-2); }
.enquire input[type="text"], .enquire input[type="email"], .enquire textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #7580ab;
  border-radius: 0.375rem;
}
.enquire textarea { resize: vertical; min-height: 8rem; }
.enquire input:focus-visible, .enquire textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-color: var(--navy); }
.services { margin: 0; padding: 0; border: 0; min-width: 0; }
.services legend { padding: 0; margin-bottom: 0.75rem; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1.5rem; }
.check { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; font-size: 1rem; color: var(--ink); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; accent-color: var(--navy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine-print { font-size: 0.9375rem; color: var(--ink-2); }
.enquire-form .btn { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.enquire-form .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.form-msg { min-height: 1.5rem; font-size: 1rem; font-weight: 600; color: #a1260f; }
.enquire-box[data-done] .enquire-form { display: none; }
.enquire-done h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.enquire-done p { margin-top: 0.75rem; font-size: 1.1875rem; color: var(--ink-2); }
@media (max-width: 62rem) { .enquire-grid { grid-template-columns: 1fr; } }
@media (max-width: 48rem) {
  .field-row, .checks { grid-template-columns: 1fr; }
  .enquire-form .btn { justify-self: stretch; width: 100%; }
}

/* Our International Reach (client's wording) */
.presence-reach { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line-navy); }
.presence-reach h3 { color: #fff; font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.presence-reach p { margin-top: 0.75rem; max-width: 48rem; font-size: 1.1875rem; line-height: 1.55; color: #e6e9f7; }
.presence-reach + .presence-copy { margin-top: 1.5rem; padding-top: 0; border-top: 0; }

/* Two supporting paragraphs remain under "Our International Reach" */
.presence-copy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 62rem) { .presence-copy { grid-template-columns: 1fr; } }

/* ===== Industries We Serve (client's wording) ===== */
.industries { background: var(--mist); padding: var(--space-section) var(--edge); }
.industries h2 { max-width: none; font-size: clamp(2.25rem, 5vw, 4rem); }
.industry-list {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  border-top: 2px solid var(--navy);
}
.industry-list li {
  position: relative;
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--navy);
}
.industry-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.75rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--green);
}
@media (max-width: 62rem) { .industry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .industry-list { grid-template-columns: 1fr; } }

/* ===== Privacy notice page ===== */
.legal { max-width: 46rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.legal h2 { max-width: none; margin-top: 2.5rem; font-size: clamp(1.375rem, 2.6vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.2; }
.legal p, .legal ul { margin-top: 0.9rem; font-size: 1.0625rem; color: var(--ink); }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.5rem; }
.legal-updated { color: var(--ink-2); font-size: 0.9375rem; }

/* ===== Business-hours markets: clearly green on the map and in the list ===== */
.node:not(.node-uk).is-open .pin {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(111, 207, 74, 0.4), 0 0 0 7px rgba(111, 207, 74, 0.18);
}
.node.is-open .tag { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.market.is-open { border-top-color: var(--green); }
.market.is-open .clock-time { color: var(--green); }
.market.is-open .clock-time::before {
  width: 0.7rem;
  height: 0.7rem;
  box-shadow: 0 0 0 3px rgba(111, 207, 74, 0.3);
}
/* Keep the two-part line beside the markets heading balanced (no single word on its own line) */
.presence-side p { text-wrap: balance; }

/* The services intro is now just the heading, so it uses the full width */
.svc-intro { grid-template-columns: 1fr; }

/* One paragraph remains under "Our International Reach": single column, same width as the lead */
.presence-copy { grid-template-columns: 1fr; }
.presence-copy p { max-width: 48rem; }

.market.is-open .clock-time::after {
  content: " (business hours)";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Dark theme (Zain's mock-up): near-black blue with the same green =====
   Only the dark sections change; text and dots on white sections keep the logo navy. */
.top, .hero, .book, .foot, .svc {
  --navy: #020b1e;
  --navy-deep: #01060f;
}
.tag { background: rgba(1, 6, 15, 0.9); }

/* Earth from space with stars behind the right side of the first screen.
   The image fades into the page colour on its left and bottom, so it has no visible edge. */
.hero-main { position: relative; }
.hero-main > * { position: relative; z-index: 1; }
.hero-main::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(-1 * clamp(2.5rem, 5vw, 4.5rem));
  right: 0;
  bottom: 0;
  left: 0;
  background: url("images/hero-earth.jpg") right bottom / cover no-repeat;
  pointer-events: none;
}
/* The dark theme has no corner glow: the picture carries the light */
.hero { background-image: none; }
/* ===== Business performance card (Zain's mock-up) ===== */
.dash {
  padding: clamp(0.85rem, 1.6vw, 1.25rem);
  border: 1px solid rgba(150, 180, 255, 0.24);
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(16, 30, 66, 0.62), rgba(5, 12, 32, 0.68));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--on-navy);
}
.dash p { margin: 0; }
.dash svg { display: block; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; margin-bottom: 0.9rem; }
.dash-ico {
  width: 2.1rem; height: 2.1rem; flex-shrink: 0;
  fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.dash-titles { flex: 1; min-width: 0; }
.dash-title { font-size: 1.0625rem; font-weight: 650; line-height: 1.2; }
.dash-sub { font-size: 0.8125rem; line-height: 1.3; color: var(--on-navy-2); }
.dash-range { display: inline-flex; }
.dash-range select {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0.5rem 2.3rem 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 0.7rem 0.5rem;
  color: inherit; font: inherit; font-size: 0.8125rem; font-weight: 550;
  cursor: pointer;
}
.dash-range select:disabled { cursor: default; opacity: 0.8; }
.dash-range option { background: #0b1530; color: #fff; }
/* Brief fade while the card switches period */
.stat-num, .spark, .ring-fg, .ring-text { transition: opacity 0.16s ease; }
.dash.is-switching .stat-num, .dash.is-switching .spark, .dash.is-switching .ring-fg, .dash.is-switching .ring-text { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .stat-num, .spark, .ring-fg, .ring-text { transition: none; }
}
.dash-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.stat {
  --c: var(--green);
  position: relative; overflow: hidden;
  padding: 0.75rem 0.7rem 0;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.035);
}
.stat-blue { --c: #4aa3ff; }
.stat-purple { --c: #a26bff; }
.stat-ico { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stat-num { display: block; margin-top: 0.45rem; font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.stat-label { display: block; margin-top: 0.1rem; font-size: 0.72rem; line-height: 1.25; color: #dfe5fb; }
.spark { width: calc(100% + 1.4rem); height: 2.6rem; margin: 0.4rem -0.7rem 0; color: var(--c); }
.spark-fill { fill: var(--c); }
.spark-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dash-lower { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 0.6rem; margin-top: 0.6rem; }
.dash-map, .dash-ring {
  position: relative; display: grid; place-items: center;
  min-height: 9.5rem; padding: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
}
.map-plot { position: relative; width: 100%; aspect-ratio: 1000 / 327.8; }
.map-plot::before {
  content: ""; position: absolute; inset: 0;
  background: #3a4766;
  -webkit-mask: url("images/world-land.svg") center / 100% 100% no-repeat;
  mask: url("images/world-land.svg") center / 100% 100% no-repeat;
}
.map-dot {
  position: absolute; width: 0.42rem; height: 0.42rem; margin: -0.21rem 0 0 -0.21rem; border-radius: 50%;
  background: #8bf06a;
  box-shadow: 0 0 0 0.2rem rgba(111, 207, 74, 0.25), 0 0 0.9rem 0.25rem rgba(111, 207, 74, 0.55);
}
.map-uk { left: 49.7%; top: 18.6%; }
.map-us { left: 29.4%; top: 28.2%; }
.map-ca { left: 27.6%; top: 25%; }
.map-ae { left: 65.4%; top: 41.3%; }
.map-sg { left: 78.8%; top: 61.6%; }
.map-au { left: 91.9%; top: 91.4%; }
.map-key {
  position: absolute; left: 0.6rem; bottom: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.7rem; border-radius: 0.6rem;
  background: rgba(2, 8, 22, 0.82); font-size: 0.72rem;
}
.map-key i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green); }
.dash-ring svg { width: min(100%, 7.75rem); aspect-ratio: 1; height: auto; }
.ring-bg, .ring-fg { fill: none; stroke-width: 9; }
.ring-bg { stroke: rgba(111, 207, 74, 0.22); }
.ring-fg { stroke: #7fe05a; stroke-linecap: round; }
.ring-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.ring-text b { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 600; }
.ring-text span { margin-top: 0.15rem; font-size: 0.66rem; color: #dfe5fb; }

/* Wide screens: text on the left, the card on the right, the Earth below the card */
@media (min-width: 62.0625rem) {
  .hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.2vw, 3.25rem);
    align-content: start;
    padding-bottom: clamp(10rem, 22vw, 21rem);
  }
   .hero-main > .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-main > .dash { grid-column: 2; grid-row: 1; align-self: start; max-width: none; }
}

/* Tablet and phone: card under the buttons, Earth under the card */
@media (max-width: 62rem) {
  .dash { margin-top: 2.25rem; max-width: 40rem; }
}
@media (max-width: 36rem) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-lower { grid-template-columns: 1fr; }
  .dash-range { margin-left: 0; }
}

@media (max-width: 62rem) {
  .hero-main { padding-bottom: 20rem; }
  .hero-main::after {
    top: auto;
    left: 0;
    height: 20rem;
    background-size: cover;
    background-position: 85% bottom;
  }
}

/* ===== Motion in the hero (kept light: transforms and opacity only, so the browser does it on the graphics chip) =====
   - the Earth drifts very slowly, like a camera pushing in
   - two sparse layers of stars twinkle, and an occasional shooting star crosses the sky
   - everything pauses when the hero is off screen, and stops for people who prefer reduced motion */
.hero { position: relative; overflow: hidden; }

.hero-main::after {
  transform-origin: 70% 60%;
  will-change: transform;
  animation: earth-drift 13s ease-in-out infinite alternate;
}
@keyframes earth-drift {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to { transform: translate3d(-5.5%, -3.5%, 0) scale(1.24) rotate(-1.5deg); }
}

.hero::before, .hero-main::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  pointer-events: none;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}
.hero::before {
  height: 26rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20420'%20width='1600'%20height='420'%3E%3Ccircle%20cx='724.6'%20cy='234.1'%20r='1.3'%20fill='%23a9c8ff'%20opacity='0.78'/%3E%3Ccircle%20cx='938.4'%20cy='82.6'%20r='1.3'%20fill='%23c6d9ff'%20opacity='0.63'/%3E%3Ccircle%20cx='488.6'%20cy='44.6'%20r='0.7'%20fill='%23a9c8ff'%20opacity='0.94'/%3E%3Ccircle%20cx='1043.8'%20cy='256.7'%20r='0.9'%20fill='%23ffffff'%20opacity='0.89'/%3E%3Ccircle%20cx='108.1'%20cy='22.4'%20r='0.9'%20fill='%23ffffff'%20opacity='0.87'/%3E%3Ccircle%20cx='524.8'%20cy='246.7'%20r='0.9'%20fill='%23c6d9ff'%20opacity='0.82'/%3E%3Ccircle%20cx='799.6'%20cy='275.6'%20r='1.3'%20fill='%23fff0d6'%20opacity='0.74'/%3E%3Ccircle%20cx='881.2'%20cy='384.4'%20r='0.7'%20fill='%23fff0d6'%20opacity='0.71'/%3E%3Ccircle%20cx='371.8'%20cy='124.8'%20r='0.7'%20fill='%23ffffff'%20opacity='0.74'/%3E%3Ccircle%20cx='1349.0'%20cy='164.2'%20r='0.7'%20fill='%23ffffff'%20opacity='0.67'/%3E%3Ccircle%20cx='1476.4'%20cy='29.1'%20r='1.3'%20fill='%23a9c8ff'%20opacity='0.75'/%3E%3Ccircle%20cx='904.9'%20cy='88.2'%20r='1.1'%20fill='%23fff0d6'%20opacity='0.63'/%3E%3Ccircle%20cx='534.8'%20cy='397.5'%20r='0.7'%20fill='%23c6d9ff'%20opacity='0.69'/%3E%3C/svg%3E");
  background-size: 1600px 420px;
  animation: star-twinkle 5.2s ease-in-out infinite;
}
.hero-main::before {
  top: calc(-1 * clamp(2.5rem, 5vw, 4.5rem));
  height: 34%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201100%20300'%20width='1100'%20height='300'%3E%3Ccircle%20cx='602.2'%20cy='106.2'%20r='1.1'%20fill='%23ffffff'%20opacity='0.78'/%3E%3Ccircle%20cx='380.7'%20cy='126.0'%20r='0.7'%20fill='%23ffffff'%20opacity='0.9'/%3E%3Ccircle%20cx='715.0'%20cy='236.1'%20r='0.7'%20fill='%23a9c8ff'%20opacity='0.72'/%3E%3Ccircle%20cx='666.8'%20cy='127.2'%20r='0.9'%20fill='%23a9c8ff'%20opacity='0.94'/%3E%3Ccircle%20cx='245.9'%20cy='230.7'%20r='0.9'%20fill='%23a9c8ff'%20opacity='0.7'/%3E%3Ccircle%20cx='562.9'%20cy='70.4'%20r='1.3'%20fill='%23a9c8ff'%20opacity='0.78'/%3E%3Ccircle%20cx='823.5'%20cy='222.9'%20r='1.3'%20fill='%23a9c8ff'%20opacity='0.89'/%3E%3Ccircle%20cx='927.7'%20cy='262.3'%20r='1.1'%20fill='%23c6d9ff'%20opacity='0.69'/%3E%3Ccircle%20cx='754.4'%20cy='235.8'%20r='1.3'%20fill='%23c6d9ff'%20opacity='0.75'/%3E%3C/svg%3E");
  background-size: 1100px 300px;
  background-position: 260px 30px;
  animation: star-twinkle 7.4s ease-in-out -2.6s infinite;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 1; }
}

.hero-main > .shoot {
  position: absolute;
  z-index: 1;
  top: 5rem;
  left: 8%;
  width: 11rem;
  max-width: none;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  opacity: 0;
  pointer-events: none;
  animation: shooting-star 9s linear 2s infinite;
}
@keyframes shooting-star {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(24deg); }
  2% { opacity: 1; }
  14% { opacity: 0; transform: translate3d(620px, 280px, 0) rotate(24deg); }
  100% { opacity: 0; transform: translate3d(620px, 280px, 0) rotate(24deg); }
}

.hero.is-away::before, .hero.is-away .shoot,
.hero.is-away .hero-main::before, .hero.is-away .hero-main::after { animation-play-state: paused; }

/* The card's first appearance: the curves draw in (the numbers and ring count up in site.js) */
.dash.is-intro .spark { animation: spark-reveal 1.2s ease-out both; }
@keyframes spark-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-main::after, .hero::before, .hero-main::before, .dash.is-intro .spark { animation: none; }
  .hero-main > .shoot { display: none; }
}

/* Phones and tablets: the Earth block is small, so the drift is larger and quicker, and the shooting star
   crosses the sky just above the Earth (where people are looking after the card) more often */
@keyframes earth-drift-sm {
  from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  to { transform: translate3d(-6%, -4%, 0) scale(1.25) rotate(-1.6deg); }
}
@keyframes shooting-star-sm {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(22deg); }
  4% { opacity: 1; }
  16% { opacity: 0; transform: translate3d(300px, 120px, 0) rotate(22deg); }
  100% { opacity: 0; transform: translate3d(300px, 120px, 0) rotate(22deg); }
}
@media (max-width: 62rem) {
  .hero-main::after { animation-name: earth-drift-sm; animation-duration: 14s; }
  .hero-main > .shoot {
    top: auto;
    bottom: 14rem;
    left: 6%;
    width: 8rem;
    animation-name: shooting-star-sm;
    animation-duration: 8s;
    animation-delay: 1.5s;
  }
}
@media (max-width: 62rem) and (prefers-reduced-motion: reduce) {
  .hero-main::after { animation: none; }
}

/* ===== Polish: gentle touches that cost nothing while idle (movement and fading only) ===== */

/* Phones and tablets: the twinkling stars sit in the sky just above the Earth, where people are looking */
@media (max-width: 62rem) {
  .hero-main::before {
    top: auto;
    bottom: 12rem;
    height: 8.5rem;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20420%20150'%20width='420'%20height='150'%3E%3Ccircle%20cx='139.5'%20cy='29.6'%20r='5.8'%20fill='%23ffffff'%20opacity='0.2'/%3E%3Ccircle%20cx='139.5'%20cy='29.6'%20r='1.7'%20fill='%23ffffff'%20opacity='0.81'/%3E%3Ccircle%20cx='224.4'%20cy='57.5'%20r='3.7'%20fill='%23c6d9ff'%20opacity='0.2'/%3E%3Ccircle%20cx='224.4'%20cy='57.5'%20r='1.1'%20fill='%23c6d9ff'%20opacity='0.81'/%3E%3Ccircle%20cx='183.5'%20cy='19.1'%20r='3.7'%20fill='%23a9c8ff'%20opacity='0.2'/%3E%3Ccircle%20cx='183.5'%20cy='19.1'%20r='1.1'%20fill='%23a9c8ff'%20opacity='0.81'/%3E%3Ccircle%20cx='236.2'%20cy='133.2'%20r='5.8'%20fill='%23ffffff'%20opacity='0.2'/%3E%3Ccircle%20cx='236.2'%20cy='133.2'%20r='1.7'%20fill='%23ffffff'%20opacity='0.92'/%3E%3Ccircle%20cx='168.7'%20cy='136.9'%20r='3.7'%20fill='%23c6d9ff'%20opacity='0.2'/%3E%3Ccircle%20cx='168.7'%20cy='136.9'%20r='1.1'%20fill='%23c6d9ff'%20opacity='0.86'/%3E%3Ccircle%20cx='67.7'%20cy='25.3'%20r='1.4'%20fill='%23c6d9ff'%20opacity='0.82'/%3E%3Ccircle%20cx='238.5'%20cy='34.4'%20r='1.1'%20fill='%23ffffff'%20opacity='0.91'/%3E%3Ccircle%20cx='257.6'%20cy='74.5'%20r='1.7'%20fill='%23a9c8ff'%20opacity='0.96'/%3E%3Ccircle%20cx='196.2'%20cy='130.0'%20r='1.4'%20fill='%23fff0d6'%20opacity='0.85'/%3E%3Ccircle%20cx='81.9'%20cy='111.4'%20r='1.1'%20fill='%23fff0d6'%20opacity='0.91'/%3E%3Ccircle%20cx='360.1'%20cy='104.8'%20r='1.4'%20fill='%23ffffff'%20opacity='0.82'/%3E%3C/svg%3E");
    background-size: 420px 150px;
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 75%, transparent 100%);
    animation: star-twinkle-sm 3.6s ease-in-out infinite;
  }
}
@keyframes star-twinkle-sm {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 1; }
}

/* Content fades up as it scrolls into view (site.js adds .rv only to blocks that start below the screen) */
.rv { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.rv.rv-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }

/* Cards and buttons answer the pointer */
.card { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.card:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 14px 34px rgba(1, 10, 74, 0.18); }
.card .go { transition: transform 0.25s var(--ease); }
.card:hover .go { transform: translate3d(0.3rem, 0, 0); }
.btn { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease); }
.btn:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 10px 26px rgba(111, 207, 74, 0.28); }
.btn:active { transform: translate3d(0, 0, 0); box-shadow: none; }
.stat { transition: transform 0.25s var(--ease), border-color 0.25s ease; }
.stat:hover { transform: translate3d(0, -3px, 0); border-color: rgba(255, 255, 255, 0.28); }

/* Open markets on the map send out a soft ring, and the dots on the dashboard map do the same, slowly */
@keyframes ping {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
.node.is-open .pin::after, .map-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--green);
  pointer-events: none;
  animation: ping 3.2s ease-out infinite;
}
.map-dot::after { inset: 0; border-width: 1.5px; animation-duration: 3.6s; }
.map-dot:nth-child(2)::after { animation-delay: -0.7s; }
.map-dot:nth-child(3)::after { animation-delay: -1.4s; }
.map-dot:nth-child(4)::after { animation-delay: -2.1s; }
.map-dot:nth-child(5)::after { animation-delay: -2.8s; }
.map-dot:nth-child(6)::after { animation-delay: -3.2s; }
.hero.is-away .pin::after, .hero.is-away .map-dot::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .card, .card .go, .btn, .stat { transition: none; }
  .card:hover, .btn:hover, .stat:hover, .card:hover .go { transform: none; }
  .node.is-open .pin::after, .map-dot::after, .hero-main::before { animation: none; }
}

/* ===== Process timeline and enquiry form touches ===== */

/* The timeline line draws down and the step numbers pop in as each step scrolls into view
   (only steps that started below the screen get .rv from site.js, so nothing is ever left hidden) */
.proc li.rv:not(:last-child)::after { transform-origin: top center; transition: transform 0.9s var(--ease) 0.35s; }
.proc li.rv:not(.rv-in):not(:last-child)::after { transform: scaleY(0); }
.proc li.rv .num { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s; }
.proc li.rv:not(.rv-in) .num { transform: scale(0.55); }

/* Form fields: a soft halo while focused (the existing outline stays for keyboard users) */
.enquire input[type="text"], .enquire input[type="email"], .enquire textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.enquire input:focus-visible, .enquire textarea:focus-visible { box-shadow: 0 0 0 6px rgba(1, 13, 97, 0.1); }

/* "Thank you": a ring and tick draw themselves once when the enquiry has been sent */
.done-tick { display: block; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.done-tick .tick-ring { stroke: var(--navy); stroke-width: 3; }
.done-tick .tick-mark { stroke: var(--green-press); stroke-width: 4.5; }
.done-tick .tick-ring, .done-tick .tick-mark { stroke-dasharray: 1; stroke-dashoffset: 1; }
.enquire-done:not([hidden]) .tick-ring { animation: tick-draw 0.7s ease-out 0.1s forwards; }
.enquire-done:not([hidden]) .tick-mark { animation: tick-draw 0.45s ease-out 0.7s forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .proc li.rv:not(.rv-in):not(:last-child)::after { transform: none; }
  .proc li.rv:not(.rv-in) .num { transform: none; }
  .proc li.rv:not(:last-child)::after, .proc li.rv .num { transition: none; }
  .done-tick .tick-ring, .done-tick .tick-mark { stroke-dashoffset: 0; animation: none !important; }
  .enquire input[type="text"], .enquire input[type="email"], .enquire textarea { transition: none; }
}

/* ===== Header polish: the menu shows where you are, and the header gets a soft shadow once you have scrolled ===== */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.nav a:not(.btn)[aria-current="true"] { color: var(--on-navy); }
.nav a:not(.btn)[aria-current="true"]::after { transform: scaleX(1); }
.nav a:not(.btn)[aria-current="true"]:hover { text-decoration: none; }
.top { transition: box-shadow 0.25s ease; }
.top.is-scrolled { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38); }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nav a:not(.btn)::after, .top { transition: none; }
}

/* ===== Phone menu: a button opens a panel with the same five links (wide screens keep the links in the header) ===== */
.nav-links { display: contents; }
.menu-btn { display: none; }
@media (max-width: 48rem) {
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0 0 0.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-navy);
    border-radius: 0.5rem;
    color: var(--on-navy);
    cursor: pointer;
  }
  .menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 1px; }
  .menu-bars { position: relative; transition: background-color 0.15s ease; }
  .menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; transition: transform 0.22s var(--ease); }
  .menu-bars::before { top: -6px; }
  .menu-bars::after { top: 6px; }
  .top.menu-open .menu-bars { background-color: transparent; }
  .top.menu-open .menu-bars::before { transform: translate3d(0, 6px, 0) rotate(45deg); }
  .top.menu-open .menu-bars::after { transform: translate3d(0, -6px, 0) rotate(-45deg); }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    padding: 0.35rem var(--edge) 0.9rem;
    background: var(--navy-deep);
    border-bottom: 1px solid var(--line-navy);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.42);
  }
  .top.menu-open .nav-links { display: flex; animation: menu-in 0.22s var(--ease) both; }
  .top.menu-open .nav-links a:not(.btn) {
    display: block;
    padding: 0.95rem 0;
    font-size: 1.125rem;
    color: var(--on-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .top.menu-open .nav-links a:not(.btn):last-child { border-bottom: 0; }
  .top.menu-open .nav-links a:not(.btn)::after { display: none; }
  .top.menu-open .nav-links a[aria-current="true"] { color: var(--green); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .top.menu-open .nav-links { animation: none; }
  .menu-bars, .menu-bars::before, .menu-bars::after { transition: none; }
}

/* ===== More shooting stars: three in different places and directions, on different timings ===== */
@keyframes shooting-star-short {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(24deg); }
  3% { opacity: 1; }
  16% { opacity: 0; transform: translate3d(380px, 170px, 0) rotate(24deg); }
  100% { opacity: 0; transform: translate3d(380px, 170px, 0) rotate(24deg); }
}
@keyframes shooting-star-left {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(156deg); }
  2.5% { opacity: 1; }
  14% { opacity: 0; transform: translate3d(-540px, 240px, 0) rotate(156deg); }
  100% { opacity: 0; transform: translate3d(-540px, 240px, 0) rotate(156deg); }
}
@keyframes shooting-star-sm-left {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(158deg); }
  4% { opacity: 1; }
  17% { opacity: 0; transform: translate3d(-290px, 115px, 0) rotate(158deg); }
  100% { opacity: 0; transform: translate3d(-290px, 115px, 0) rotate(158deg); }
}
@media (min-width: 62.0625rem) {
  /* laptop: one in the sky under the buttons heading towards the horizon, one along the top beside the card heading left */
  .hero-main > .shoot-b { top: 50%; left: 3%; width: 8rem; animation: shooting-star-short 12s linear 6s infinite; }
  .hero-main > .shoot-c { top: -2.6rem; left: 74%; width: 9rem; animation: shooting-star-left 15s linear 10s infinite; }
}
@media (max-width: 62rem) {
  /* phone and tablet: spread across the sky above the Earth */
  .hero-main > .shoot-b { top: auto; bottom: 17.5rem; left: 80%; width: 7rem; animation: shooting-star-sm-left 11s linear 5s infinite; }
  .hero-main > .shoot-c { top: auto; bottom: 11.5rem; left: 10%; width: 7rem; animation: shooting-star-sm 13s linear 8.5s infinite; }
}

/* ===== Hero text: smaller, higher and always readable (a soft dark halo behind the words only, no stars behind them) ===== */
.hero { padding-top: clamp(1.75rem, 3.2vw, 3rem); }
.hero h1 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.04; text-shadow: 0 2px 18px rgba(2, 11, 30, 0.85); }
.hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin: 1.4rem 0 1.75rem; text-shadow: 0 1px 12px rgba(2, 11, 30, 0.9); }
.hero-copy { position: relative; }
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3.5rem -5rem -3.5rem calc(-1 * var(--edge));
  background: rgba(2, 11, 30, 0.8);
  pointer-events: none;
  /* feathered on every side, so the dark patch has no visible edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 76%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 48rem) {
  .hero h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); }
}
@media (min-width: 62.0625rem) {
  /* laptop: the twinkling stars keep to the right half of the sky, away from the words */
  .hero::before, .hero-main::before {
    -webkit-mask-image: linear-gradient(to right, transparent 42%, #000 62%), linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 42%, #000 62%), linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ===== Dashboard tiles: a darker backing and brighter labels so the small text stays clear over the Earth's glow ===== */
.stat { background: rgba(5, 12, 32, 0.62); }
.stat-label { color: #f3f5ff; }
.dash-sub { color: #dbe1f7; }

/* Form hints (placeholders): an explicit colour so every browser shows them at a readable contrast (about 4.8:1 on white) */
.enquire input::placeholder, .enquire textarea::placeholder { color: #6b7394; opacity: 1; }

/* ===== Accessibility touch-ups (found by the audit): clearer control edges and larger tick boxes ===== */
.check input { width: 1.5rem; height: 1.5rem; }
.dash-range select { border-color: rgba(255, 255, 255, 0.42); }

/* The dashboard period is a fixed label: the 12 months Zain supplied (no switchable periods) */
.dash-range-static {
  align-items: center;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
}