/* ==========================================================================
   Blu Montez Oil & Gas Security — stylesheet
   Static site. No build step. Plain CSS, organised as:
     1. Fonts
     2. Design tokens
     3. Reset & base
     4. Layout primitives
     5. Components
     6. Sections
     7. Motion
     8. Responsive
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens -------------------------------------------------------- */

:root {
  /* Brand — sampled directly from the Blu Montez logo */
  --brand-navy: #131b5c;
  --brand-orange: #f5821f;
  --brand-orange-soft: #ff9c45;
  /* Darker orange for small text on light backgrounds (WCAG AA: 5.0:1). */
  --brand-orange-ink: #a85207;

  /* Surfaces */
  --ink-900: #060c18;
  --ink-800: #0a1322;
  --ink-700: #0f1d31;
  --ink-600: #16293f;
  --paper: #f4f7fa;
  --paper-2: #e7edf4;

  /* Text */
  --text-bright: #ffffff;
  --text: #d6e0ec;
  --text-muted: #93a5bc;
  --text-dark: #0b1424;
  --text-dark-muted: #4e6076;

  /* Lines */
  --line: rgba(147, 187, 235, 0.16);
  --line-strong: rgba(147, 187, 235, 0.3);
  --line-dark: rgba(11, 20, 36, 0.12);

  /* Accessible green for the WhatsApp button (white text, 5.4:1). */
  --whatsapp: #0f7a34;
  --whatsapp-hover: #0b6e2e;

  /* Type */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.25rem, 0.4vw + 1.15rem, 1.5rem);
  --step-3: clamp(1.75rem, 1.4vw + 1.4rem, 2.375rem);
  --step-4: clamp(2.125rem, 3vw + 1.3rem, 3.5rem);
  --step-5: clamp(2.75rem, 5.6vw + 1rem, 5.75rem);

  /* Space */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4.5rem, 8vw, 8rem);

  /* Shell */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;

  --header-h: 84px;
  /* Bottom app bar: 58px of tap target + 1px border, rounded up. Used for both
     the bar's own height and the body padding that keeps content clear of it. */
  --appbar-h: 60px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 3. Reset & base --------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0;
  color: var(--text-bright);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--brand-orange);
  color: var(--text-dark);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

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

/* 4. Layout primitives ---------------------------------------------------- */

.shell {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-2xl);
}

.section--paper {
  background: var(--paper);
  color: var(--text-dark);
}

.section--paper h2,
.section--paper h3 {
  color: var(--text-dark);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-l);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.section-head__lede {
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.7;
  max-width: 46ch;
}

.section--paper .section-head__lede {
  color: var(--text-dark-muted);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-s);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

.section--paper .eyebrow {
  color: var(--brand-orange-ink);
}

.section--paper .eyebrow::before {
  background: var(--brand-orange-ink);
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--brand-orange);
  flex: none;
}

h2 {
  font-size: var(--step-4);
}

.accent {
  color: var(--brand-orange);
}

/* 5. Components ----------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.0625rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease), background-color 0.22s var(--ease),
    border-color 0.22s var(--ease), color 0.22s var(--ease);
}

.btn svg {
  flex: none;
  transition: transform 0.22s var(--ease);
}

.btn:hover svg {
  transform: translate(3px, -3px);
}

.btn--primary {
  background: var(--brand-orange);
  color: var(--text-dark);
}

.btn--primary:hover {
  background: var(--brand-orange-soft);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text-bright);
}

.btn--ghost:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--ink-900);
  color: var(--text-bright);
}

.btn--dark:hover {
  background: var(--brand-navy);
  transform: translateY(-2px);
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    height 0.3s var(--ease);
}

.site-header.is-stuck {
  height: 68px;
  background: rgba(6, 12, 24, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 0.9);
}

/* While the mobile menu is open the bar must be solid, whatever is behind it. */
.site-header.nav-open,
.site-header.nav-open.is-stuck {
  background: var(--ink-900);
  border-bottom-color: var(--line);
  backdrop-filter: none;
}

@supports (backdrop-filter: blur(10px)) {
  .site-header.is-stuck {
    background: rgba(6, 12, 24, 0.72);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

.brand img {
  width: auto;
  height: 34px;
  transition: height 0.3s var(--ease);
}

.is-stuck .brand img {
  height: 28px;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.primary-nav a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  padding-block: 0.5rem;
  transition: color 0.2s var(--ease);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.primary-nav a:hover,
.primary-nav a[aria-current="true"] {
  color: var(--text-bright);
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.header-cta {
  padding: 0.8125rem 1.25rem;
  font-size: 0.8125rem;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-bright);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle span {
  margin: 0 auto;
  position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-700);
}

/* <picture> is only a wrapper — it must pass the box height through to the
   <img>, otherwise height:100% below resolves against an auto-height parent. */
.card__media picture,
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 12, 24, 0.85) 0%,
    rgba(6, 12, 24, 0.15) 55%,
    rgba(6, 12, 24, 0) 100%
  );
}

.card__index {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  top: 1.25rem;
  padding: 0.4rem 0.6rem;
  background: var(--brand-orange);
  color: var(--text-dark);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2px;
}

.card__body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.card__body h3 {
  font-size: var(--step-2);
}

.card__body p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Facts strip */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(
    140deg,
    rgba(19, 27, 92, 0.35),
    rgba(10, 19, 34, 0.6)
  );
}

.facts > div {
  padding: 1.75rem;
  border-left: 1px solid var(--line);
}

.facts > div:first-child {
  border-left: 0;
}

.facts dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

/* WhatsApp float */
.whatsapp {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background: var(--whatsapp);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(15, 122, 52, 0.95);
  transition: transform 0.22s var(--ease), background-color 0.22s var(--ease);
}

.whatsapp:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-3px);
}

.whatsapp svg {
  flex: none;
}

/* 6. Sections ------------------------------------------------------------- */

/* Hero */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92svh, 900px);
  padding-top: calc(var(--header-h) + var(--space-xl));
  padding-bottom: var(--space-xl);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgba(6, 12, 24, 0.96) 0%,
      rgba(6, 12, 24, 0.86) 34%,
      rgba(6, 12, 24, 0.5) 62%,
      rgba(6, 12, 24, 0.72) 100%
    ),
    linear-gradient(to top, rgba(6, 12, 24, 0.98) 2%, rgba(6, 12, 24, 0) 45%);
}

.hero__inner {
  display: grid;
  gap: var(--space-l);
}

.hero h1 {
  font-size: var(--step-5);
  max-width: 17ch;
}

.hero__lede {
  max-width: 54ch;
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
  color: var(--text);
  line-height: 1.72;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.hero__note {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 1rem;
  border-left: 2px solid var(--brand-orange);
}

.hero__note strong {
  display: block;
  color: var(--text-bright);
  font-weight: 700;
}

.hero__facts {
  margin-top: var(--space-m);
}

/* Capabilities grid: 3 up, then 2 wide */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.capability-grid > :nth-child(1),
.capability-grid > :nth-child(2),
.capability-grid > :nth-child(3) {
  grid-column: span 2;
}

.capability-grid > :nth-child(4),
.capability-grid > :nth-child(5) {
  grid-column: span 3;
}

/* Advantage (light) */
.advantage {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.advantage__intro p {
  color: var(--text-dark-muted);
  font-size: var(--step-1);
  line-height: 1.75;
  margin-top: var(--space-m);
  max-width: 42ch;
}

.advantage__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--space-l);
  padding-bottom: 0.25rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--brand-orange);
  transition: gap 0.22s var(--ease), color 0.22s var(--ease);
}

.advantage__cta:hover {
  gap: 1rem;
  color: var(--brand-orange-ink);
}

.advantage__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}

.advantage__list li {
  background: var(--paper);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}

.advantage__list small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-orange-ink);
  margin-bottom: 1rem;
}

.advantage__list h3 {
  font-size: var(--step-2);
  margin-bottom: 0.625rem;
}

.advantage__list p {
  color: var(--text-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Purpose (vision / mission) */
.purpose {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
}

.purpose::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      70% 90% at 12% 0%,
      rgba(19, 27, 92, 0.75),
      transparent 70%
    ),
    radial-gradient(
      50% 70% at 92% 100%,
      rgba(245, 130, 31, 0.14),
      transparent 70%
    );
  pointer-events: none;
}

.purpose__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.purpose__grid > div {
  background: var(--ink-800);
  padding: clamp(2rem, 4vw, 3.25rem);
}

.purpose__grid small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 1.25rem;
}

.purpose__grid h3 {
  font-size: var(--step-3);
  margin-bottom: 1.125rem;
}

.purpose__grid p {
  color: var(--text-muted);
  line-height: 1.8;
}

/* Contact */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.contact h2 {
  font-size: var(--step-4);
  max-width: 15ch;
}

.contact__lede {
  margin-top: var(--space-m);
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.75;
  max-width: 46ch;
}

.contact__details {
  margin-top: var(--space-l);
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.contact__details > div {
  background: var(--ink-900);
  padding: 1.375rem 1.5rem;
}

.contact__details dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 0.5rem;
}

.contact__details dd {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.contact__details a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.contact__details a:hover {
  color: var(--brand-orange);
  border-color: var(--brand-orange);
}

/* Form */
.form {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form h3 {
  font-size: var(--step-2);
  margin-bottom: 0.5rem;
}

.form__hint {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-m);
}

.field {
  display: block;
  margin-bottom: 1.125rem;
}

.field > span {
  display: block;
  margin-bottom: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

/* Must stay inline, or the required marker wraps onto its own line. */
.field .req {
  display: inline;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8125rem 0.9375rem;
  background: var(--ink-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.2s var(--ease);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-orange);
  outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #78899e;
}

.form .btn {
  width: 100%;
}

.form__legal {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.form__status {
  padding: 0.875rem 1rem;
  margin-bottom: var(--space-m);
  border-radius: var(--radius);
  font-size: 0.875rem;
  border: 1px solid;
}

.form__status--ok {
  border-color: rgba(31, 175, 84, 0.5);
  background: rgba(31, 175, 84, 0.12);
  color: #7fe0a4;
}

.form__status--error {
  border-color: rgba(245, 130, 31, 0.5);
  background: rgba(245, 130, 31, 0.12);
  color: var(--brand-orange-soft);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer */
.site-footer {
  padding-block: var(--space-xl) var(--space-l);
  border-top: 1px solid var(--line);
  background: var(--ink-900);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
}

.site-footer img {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-s);
}

.site-footer__blurb {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 34ch;
}

.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 1rem;
}

.site-footer li {
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.site-footer li a {
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-footer li a:hover {
  color: var(--brand-orange);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* 7. Motion --------------------------------------------------------------- */

/* Reveal only runs when JS is present, so no-JS visitors see everything. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* 8. Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .capability-grid > :nth-child(n) {
    grid-column: span 3;
  }

  /* Five cards in two columns leaves an orphan — give it the full row. */
  .capability-grid > :nth-child(5) {
    grid-column: span 6;
  }

  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-m);
  }

  .advantage,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .facts > div:nth-child(3) {
    border-left: 0;
  }

  .facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

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

  .nav-toggle {
    display: block;
  }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-s) var(--gutter) var(--space-l);
    /* Fully opaque: a translucent panel lets the hero headline show through. */
    background: var(--ink-900);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 32px 60px -24px rgba(0, 0, 0, 0.85);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
      visibility 0.25s;
  }

  .primary-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .primary-nav a {
    padding: 1rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }

  .primary-nav a::after {
    display: none;
  }

  .header-cta {
    margin-top: var(--space-m);
    padding: 1rem;
    font-size: 0.9375rem;
  }

  .purpose__grid,
  .advantage__list {
    grid-template-columns: 1fr;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__top > :first-child {
    grid-column: 1 / -1;
  }
}

/* Tablet only: the full-width fifth card gets a wider, shallower image. */
@media (min-width: 641px) and (max-width: 1080px) {
  .capability-grid > :nth-child(5) .card__media {
    aspect-ratio: 24 / 9;
  }
}

@media (max-width: 640px) {
  .capability-grid > :nth-child(n) {
    grid-column: 1 / -1;
  }

  .hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + var(--space-l)) var(--space-l);
  }

  .hero__media img {
    object-position: 62% 32%;
  }

  /* On a tall narrow hero a diagonal scrim reads as a hard seam.
     A single vertical fade keeps the photograph legible instead. */
  .hero__scrim {
    background:
      /* keeps the logo and menu button legible over a bright sky */
      linear-gradient(
        to bottom,
        rgba(6, 12, 24, 0.8) 0%,
        rgba(6, 12, 24, 0) 16%
      ),
      linear-gradient(
        to bottom,
        rgba(6, 12, 24, 0.4) 0%,
        rgba(6, 12, 24, 0.78) 34%,
        rgba(6, 12, 24, 0.95) 62%,
        var(--ink-900) 100%
      );
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .facts > div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .facts > div:first-child {
    border-top: 0;
  }

  .whatsapp span {
    display: none;
  }

  .whatsapp {
    padding: 0.9375rem;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   9. Multi-page components
   Added when the site grew from one page to ten. Everything below reuses the
   tokens declared at the top of this file — no new colours are introduced.
   ========================================================================== */

/* --- Navigation with a capabilities menu ---------------------------------- */

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-item > a {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}

.nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.nav-item > a:hover,
.nav-item > a[aria-current="page"] {
  color: var(--text-bright);
}

.nav-item > a:hover::after,
.nav-item > a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-disclosure {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), transform 0.25s var(--ease);
}

.nav-disclosure:hover {
  color: var(--brand-orange);
}

.nav-disclosure[aria-expanded="true"] {
  transform: rotate(180deg);
  color: var(--brand-orange);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 1.125rem);
  left: -1rem;
  z-index: 20;
  min-width: 290px;
  padding: 0.5rem;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 28px 60px -26px rgba(0, 0, 0, 0.95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.75rem;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  background: rgba(147, 187, 235, 0.09);
  color: var(--text-bright);
}

.nav-menu__num {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--brand-orange);
}

.nav-menu__all {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
}

.nav-menu__all a {
  color: var(--brand-orange);
  font-size: 0.8125rem;
}

/* --- Breadcrumbs ----------------------------------------------------------- */

.breadcrumbs {
  padding-top: calc(var(--header-h) + 1.5rem);
  padding-bottom: 0.25rem;
  background: var(--ink-900);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgba(147, 187, 235, 0.4);
}

.breadcrumbs a {
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.breadcrumbs a:hover {
  color: var(--brand-orange);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text-bright);
  font-weight: 600;
}

/* --- Interior page hero ---------------------------------------------------- */

.page-hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
  background:
    radial-gradient(80% 120% at 8% 0%, rgba(19, 27, 92, 0.6), transparent 62%),
    var(--ink-900);
}

.page-hero--top {
  padding-top: calc(var(--header-h) + var(--space-xl));
}

.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.page-hero h1 {
  font-size: var(--step-4);
  max-width: 20ch;
}

.page-hero__lede {
  margin-top: var(--space-m);
  max-width: 56ch;
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  line-height: 1.75;
  color: var(--text-muted);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* --- Long-form text -------------------------------------------------------- */

.prose {
  max-width: 68ch;
}

.prose > * + * {
  margin-top: var(--space-m);
}

.prose h2 {
  margin-top: var(--space-xl);
  font-size: var(--step-3);
}

.prose h3 {
  margin-top: var(--space-l);
  font-size: var(--step-2);
}

.prose p,
.prose li {
  color: var(--text-muted);
  line-height: 1.8;
}

.section--paper .prose p,
.section--paper .prose li {
  color: var(--text-dark-muted);
}

.prose strong {
  color: var(--text-bright);
  font-weight: 600;
}

.section--paper .prose strong {
  color: var(--text-dark);
}

.prose a:not(.btn) {
  color: var(--brand-orange);
  text-underline-offset: 3px;
}

.section--paper .prose a:not(.btn) {
  color: var(--brand-orange-ink);
}

/* --- Checklist ------------------------------------------------------------- */

.checklist {
  display: grid;
  gap: 0.875rem;
}

.checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.875rem;
  align-items: start;
  line-height: 1.7;
  color: var(--text-muted);
}

.section--paper .checklist li {
  color: var(--text-dark-muted);
}

.checklist li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 0.3rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--brand-orange), var(--brand-orange)) no-repeat center/7px 2px,
    rgba(245, 130, 31, 0.16);
  border: 1px solid rgba(245, 130, 31, 0.45);
}

/* --- Numbered process steps ------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.section--paper .steps {
  background: var(--line-dark);
  border-color: var(--line-dark);
}

.step {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--ink-900);
}

.section--paper .step {
  background: var(--paper);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 1.125rem;
  border-radius: 50%;
  background: rgba(245, 130, 31, 0.14);
  border: 1px solid rgba(245, 130, 31, 0.5);
  color: var(--brand-orange);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.section--paper .step__num {
  color: var(--brand-orange-ink);
}

.step h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.625rem;
}

.step p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.section--paper .step p {
  color: var(--text-dark-muted);
}

/* --- Capability icons ------------------------------------------------------ */

.cap-icon {
  width: 32px;
  height: 32px;
  color: var(--brand-orange);
  flex: none;
}

.cap-icon--lg {
  width: 44px;
  height: 44px;
}

/* --- Capability cards on the hub ------------------------------------------- */

.cap-list {
  display: grid;
  gap: 1.25rem;
}

.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.cap-row:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.cap-row:nth-child(even) .cap-row__media {
  order: 2;
}

/* Declared as a class, not an inline style: an inline grid-template-columns
   outranks the media query below and would keep two columns on a phone. */
.cap-row--stage {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.cap-row__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink-700);
}

.cap-row__media picture,
.cap-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap-row__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cap-row__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-orange);
}

.cap-row h3 {
  font-size: var(--step-3);
  margin-bottom: 0.875rem;
}

.cap-row p {
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1.375rem;
}

/* --- Text link with arrow -------------------------------------------------- */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--brand-orange);
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.1875rem;
  transition: gap 0.22s var(--ease);
}

.arrow-link:hover {
  gap: 1rem;
}

.section--paper .arrow-link {
  color: var(--brand-orange-ink);
}

/* --- Figures and diagrams -------------------------------------------------- */

.figure {
  margin: 0;
}

.figure svg {
  width: 100%;
  height: auto;
}

.figure figcaption {
  margin-top: var(--space-m);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 60ch;
}

.section--paper .figure figcaption {
  color: var(--text-dark-muted);
}

.map-label,
.ring-label,
.ring-core {
  font-family: var(--font-mono);
  fill: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.map-label--strong {
  fill: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.map-label--region {
  fill: var(--brand-orange);
  font-size: 15px;
  font-weight: 700;
}

.map-label--sub {
  font-size: 11px;
  fill: #8fa4bd;
}

.ring-label {
  font-size: 12px;
  fill: #a9bcd2;
}

.ring-core {
  fill: #0b1424;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* --- Two-column split with a diagram --------------------------------------- */

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

.split--narrow-first {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

/* --- Missing-photo placeholder --------------------------------------------- */

.media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(147, 187, 235, 0.05) 0 12px, transparent 12px 24px),
    var(--ink-700);
  border: 1px dashed var(--line-strong);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- FAQ accordion --------------------------------------------------------- */

.faq {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq details {
  background: var(--ink-900);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem clamp(1.25rem, 2.5vw, 1.75rem);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-bright);
  list-style: none;
  transition: background-color 0.2s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  background: rgba(147, 187, 235, 0.05);
}

.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) no-repeat center/14px 2px,
    linear-gradient(currentColor, currentColor) no-repeat center/2px 14px;
  color: var(--brand-orange);
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq .faq__body {
  padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) 1.5rem;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 68ch;
}

/* --- Related capability links ---------------------------------------------- */

.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.related a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.related a:hover {
  border-color: var(--brand-orange);
  transform: translateY(-4px);
}

.related strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--text-bright);
}

.related span {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- Spec / detail table ---------------------------------------------------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.spec th,
.spec td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.spec th {
  width: 34%;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-orange);
  font-weight: 700;
}

.spec td {
  color: var(--text-muted);
  line-height: 1.7;
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-bottom: 0;
}

/* --- Closing CTA band ------------------------------------------------------- */

.cta-band {
  padding-block: var(--space-2xl);
  background:
    linear-gradient(120deg, rgba(19, 27, 92, 0.85), rgba(6, 12, 24, 0.2)),
    var(--ink-800);
  border-top: 1px solid var(--line);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cta-band h2 {
  font-size: var(--step-4);
  max-width: 16ch;
}

.cta-band__lede {
  margin-top: var(--space-m);
  max-width: 52ch;
  color: var(--text-muted);
  line-height: 1.75;
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cta-band__actions .btn {
  width: 100%;
}

/* --- Footer heading level fix ---------------------------------------------- */

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: 1rem;
}

.site-footer__top {
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
}

/* --- Form validation ------------------------------------------------------- */

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: #ff8a5c;
}

.field__error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffab7d;
}

.field__error:empty {
  display: none;
}

.field span .req {
  color: var(--brand-orange);
  margin-left: 0.15rem;
}

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .page-hero__inner,
  .split,
  .split--narrow-first,
  .cta-band__inner {
    grid-template-columns: 1fr;
  }

  .cap-row,
  .cap-row--stage {
    grid-template-columns: 1fr;
  }

  .cap-row:nth-child(even) .cap-row__media {
    order: 0;
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__top > :first-child {
    grid-column: 1 / -1;
  }

  .cta-band__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cta-band__actions .btn {
    width: auto;
    flex: 1 1 220px;
  }
}

@media (max-width: 860px) {
  .primary-nav {
    overflow-y: auto;
    max-height: calc(100svh - var(--header-h));
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav-item {
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }

  .nav-item > a {
    flex: 1;
    padding: 1rem 0;
    font-size: 1.0625rem;
  }

  .nav-item > a::after {
    display: none;
  }

  .nav-disclosure {
    width: 44px;
    height: 44px;
  }

  .nav-menu {
    position: static;
    order: 3;
    width: 100%;
    min-width: 0;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0 0.25rem 0.75rem;
    background: none;
    border: 0;
    border-left: 2px solid var(--line-strong);
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-menu.is-open {
    display: block;
  }

  .breadcrumbs {
    padding-top: calc(var(--header-h) + 1rem);
  }
}

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

  .page-hero__actions .btn {
    width: 100%;
  }

  .spec th,
  .spec td {
    display: block;
    width: 100%;
    padding-inline: 0;
  }

  .spec th {
    border-bottom: 0;
    padding-bottom: 0.375rem;
  }
}

/* --- WhatsApp submit button -------------------------------------------------
   The primary action on the contact form is "open WhatsApp", so the button is
   coloured for that action rather than for the brand. Same accessible green as
   the floating button (white text, 5.4:1). */

.btn--whatsapp {
  background: var(--whatsapp);
  color: #ffffff;
}

.btn--whatsapp:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-2px);
}

.btn--whatsapp svg {
  flex: none;
}

.btn--whatsapp:hover svg {
  transform: none;
}

/* ==========================================================================
   10. Mobile usability
   Findings from testing at 320 / 360 / 390 / 414 / 768 px.
   ========================================================================== */

/* iOS zooms the whole page when a focused input is under 16px. Never go below
   1rem on a form control. */
.field input,
.field select,
.field textarea {
  font-size: 1rem;
}

/* WCAG 2.2 "Target Size (Minimum)" wants 24x24 CSS px. Links sitting in a run
   of prose are exempt; standalone navigation links are not. On touch widths we
   go to 44px, which is the comfortable thumb target rather than the legal floor. */
@media (max-width: 860px) {
  .site-footer li a,
  .contact__details a,
  .breadcrumbs a,
  .breadcrumbs [aria-current="page"],
  .nav-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .site-footer li {
    margin-bottom: 0.25rem;
  }

  .breadcrumbs ol {
    row-gap: 0;
  }
}

/* Make the whole capability card tappable rather than just the title text.
   The card has no other interactive content, so a stretched link is safe. */
.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.card:hover .card__link,
.card__link:hover {
  color: var(--brand-orange);
}

.card__link:focus-visible {
  outline: none;
}

.card:has(.card__link:focus-visible) {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

/* Give the arrow links a real target height. */
.arrow-link,
.advantage__cta {
  padding-block: 0.3125rem;
  min-height: 24px;
}

/* ==========================================================================
   11. Wide media band + supporting image
   ========================================================================== */

.media-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(74vh, 660px);
  padding-block: var(--space-2xl) var(--space-l);
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--line);
}

.media-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.media-band__media picture,
.media-band__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* Weighted to the bottom, where the words are, so the photograph stays
   readable in the upper half instead of being flattened to black. */
.media-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(6, 12, 24, 0.97) 0%,
      rgba(6, 12, 24, 0.92) 26%,
      rgba(6, 12, 24, 0.55) 48%,
      rgba(6, 12, 24, 0.18) 70%,
      rgba(6, 12, 24, 0.45) 100%
    ),
    linear-gradient(100deg, rgba(6, 12, 24, 0.55) 0%, rgba(6, 12, 24, 0.1) 55%,
                    rgba(6, 12, 24, 0) 100%);
}

.media-band__body {
  max-width: 62ch;
}

.media-band__body h2 {
  font-size: var(--step-3);
  margin-bottom: 1.125rem;
}

.media-band__body p:last-child {
  color: var(--text);
  line-height: 1.8;
}

/* Supporting image beside a block of text */
.aside-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-700);
}

.aside-media picture,
.aside-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* On a phone an overlay band just reads as a dark rectangle — the photograph
   never gets seen. Stack it instead: picture on top, words underneath. */
@media (max-width: 860px) {
  .media-band {
    display: block;
    min-height: 0;
    padding-block: 0;
    background: var(--ink-800);
  }

  .media-band__media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 2.4 / 1;
  }

  .media-band__media img {
    object-position: 50% 30%;
  }

  .media-band__scrim {
    display: none;
  }

  .media-band__body {
    padding-block: var(--space-xl);
  }
}

/* ==========================================================================
   12. App-style bottom bar (mobile only)
   ========================================================================== */

.appbar {
  display: none;
}

@media (max-width: 860px) {
  .appbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 95;
    display: block;
    background: rgba(6, 12, 24, 0.97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 34px -20px rgba(0, 0, 0, 0.95);
    /* Clear the iPhone home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  @supports (backdrop-filter: blur(10px)) {
    .appbar {
      background: rgba(6, 12, 24, 0.86);
      backdrop-filter: blur(16px) saturate(1.4);
    }
  }

  .appbar ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .appbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: calc(var(--appbar-h) - 1px);
    padding: 0.4375rem 0.25rem 0.5rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.2s var(--ease);
  }

  .appbar svg {
    width: 22px;
    height: 22px;
    flex: none;
  }

  .appbar a[aria-current="page"] {
    color: var(--brand-orange);
  }

  /* A short rule above the active tab, the way a native tab bar marks state. */
  .appbar a[aria-current="page"]::before {
    content: "";
    position: absolute;
    margin-top: -0.9375rem;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-orange);
  }

  .appbar a:active {
    color: var(--text-bright);
  }

  .appbar__wa {
    color: #6ee7a0;
  }

  .appbar__wa:active {
    color: #ffffff;
  }

  /* Content must clear the bar, with a little air so the last line of the
     footer is not flush against it. */
  body {
    padding-bottom: calc(var(--appbar-h) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }

  /* One WhatsApp affordance on a phone, not two. */
  .whatsapp {
    display: none;
  }
}

/* ==========================================================================
   13. Social links
   ========================================================================== */

.social {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--space-m);
  flex-wrap: wrap;
}

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease),
    background-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.social a svg {
  width: 19px;
  height: 19px;
}

.social a:hover {
  color: var(--brand-orange);
  border-color: var(--brand-orange);
  background: rgba(245, 130, 31, 0.08);
  transform: translateY(-2px);
}

.social__handle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ==========================================================================
   14. Layered protection diagram
   Nested bands rather than concentric circles: a square SVG shrinks its own
   labels to nothing on a phone, whereas these stay real text at a real size.
   ========================================================================== */

.figure--layers {
  container-type: inline-size;
}

.layers {
  --pad: clamp(0.75rem, 2.6vw, 1.375rem);
  max-width: 560px;
  margin-inline: auto;
}

.layer {
  padding: var(--pad);
  border: 1px solid rgba(147, 187, 235, 0.22);
  border-radius: 10px;
  background: rgba(105, 200, 255, 0.045);
}

/* Each step inward reads as deeper cover. */
.layer--2 { background: rgba(105, 200, 255, 0.06); }
.layer--3 { background: rgba(105, 200, 255, 0.075); }
.layer--4 { background: rgba(105, 200, 255, 0.095); }

.layer .layer {
  margin-top: clamp(0.625rem, 1.8vw, 0.875rem);
}

.layer__label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 2.1vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #a9bcd2;
}

.layer__num {
  flex: none;
  font-weight: 700;
  color: var(--brand-orange);
}

/* The protected thing at the centre. */
.layer__core {
  display: grid;
  place-items: center;
  /* Kept narrow so it reads as a core, not a banner across the whole box. */
  width: min(100%, 300px);
  margin: clamp(0.75rem, 2.2vw, 1.125rem) auto 0;
  padding: clamp(1.125rem, 3.6vw, 1.75rem) 1rem;
  border-radius: 8px;
  background:
    radial-gradient(120% 140% at 50% 50%, #ff9c45 0%, var(--brand-orange) 62%);
  box-shadow: 0 0 0 1px rgba(255, 156, 69, 0.5),
    0 18px 44px -22px rgba(245, 130, 31, 0.85);
}

.layer__core span {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 3.4vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0b1424;
}

/* On a light section the tints need to invert. */
.section--paper .layer {
  border-color: rgba(11, 20, 36, 0.14);
  background: rgba(11, 20, 36, 0.03);
}

.section--paper .layer--2 { background: rgba(11, 20, 36, 0.045); }
.section--paper .layer--3 { background: rgba(11, 20, 36, 0.06); }
.section--paper .layer--4 { background: rgba(11, 20, 36, 0.075); }

.section--paper .layer__label {
  color: var(--text-dark-muted);
}

.section--paper .layer__num {
  color: var(--brand-orange-ink);
}