/* ===========================================================================
   OCEAN DELIGHT — Unipessoal Lda
   Critical Digital Infrastructure & Cloud Transformation
   Design tokens derived from Ocean Delight Brand Guidelines 2026
   =========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand palette (Brand Guidelines 02 — Colour Palette) */
  --navy:        #062653;  /* Primary   */
  --blue:        #0B5E8F;  /* Secondary */
  --teal:        #00C2B8;  /* Accent    */
  --light:       #EAF5F8;  /* Background*/
  --slate:       #64748B;  /* Text      */

  /* Derived tones — built from the brand five, nothing invented alongside them */
  --navy-deep:   #03152F;
  --navy-mid:    #0A3467;
  --blue-deep:   #084A72;
  --teal-deep:   #00857E;
  --light-edge:  #D6E7EE;
  --ink:         #3E4E63;  /* body copy — slate darkened to clear 7:1 on white */

  --white:       #FFFFFF;
  --surface-alt: #F6FAFC;

  /* Typography */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --step-4:  clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
  --step-5:  clamp(2.5rem, 1.35rem + 4.4vw, 4.25rem);

  /* Spacing — 8px rhythm */
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --section-y: clamp(64px, 8vw, 112px);
  --gutter:    clamp(20px, 4vw, 40px);
  --container: 1200px;
  --measure:   68ch;

  /* Radii */
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Layered, navy-tinted elevation */
  --shadow-sm: 0 1px 2px rgba(6,38,83,.06), 0 1px 3px rgba(6,38,83,.05);
  --shadow-md: 0 2px 4px rgba(6,38,83,.05), 0 10px 28px rgba(6,38,83,.09);
  --shadow-lg: 0 4px 10px rgba(6,38,83,.07), 0 20px 56px rgba(6,38,83,.14);
  --shadow-nav: 0 1px 0 rgba(255,255,255,.06), 0 10px 40px rgba(3,21,47,.45);

  /* Motion */
  --ease-out:    cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.22,1.2,.36,1);
  --t-fast: 140ms;
  --t-mid:  260ms;
  --t-slow: 520ms;

  /* Layering */
  --z-raised: 10; --z-sticky: 40; --z-overlay: 100; --z-modal: 1000;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); letter-spacing: -0.035em; line-height: 1.04; font-weight: 700; }
h2 { font-size: var(--step-4); letter-spacing: -0.03em; font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Accessible focus — never removed */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--teal); color: var(--navy); }

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--light { background: var(--light); }
.section--soft  { background: var(--surface-alt); }
.section--navy  { background: var(--navy); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy p { color: rgba(255,255,255,.78); }

.skip-link {
  position: absolute; left: var(--space-4); top: -120px;
  z-index: var(--z-modal);
  background: var(--white); color: var(--navy);
  font-family: var(--font-display); font-weight: 600;
  padding: 14px 20px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- 4. SECTION HEADS ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-4);
}
.section--navy .eyebrow, .cta-band .eyebrow { color: var(--teal); }

.rule {
  width: 56px; height: 3px;
  background: var(--teal);
  border: 0; border-radius: 2px;
  margin: 0 0 var(--space-5);
}

.section-head { max-width: 760px; margin-bottom: var(--space-8); }
.section-head p { font-size: var(--step-1); max-width: 62ch; margin-top: var(--space-5); }

/* Ocean Delight's signature headline treatment: two weights, one line */
.hl-light { font-weight: 300; }
.hl-bold  { font-weight: 700; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--font-display);
  font-size: 0.9375rem; font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-mid) var(--ease-out),
              color var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--t-mid) var(--ease-spring); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { background: var(--navy); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--teal); color: var(--navy); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(1px); }

.btn--secondary { background: transparent; color: var(--navy); border-color: rgba(6,38,83,.28); }
.btn--secondary:hover { border-color: var(--teal); background: rgba(0,194,184,.09); }
.btn--secondary:active { transform: translateY(1px); }

.btn--on-navy { background: var(--teal); color: var(--navy); }
.btn--on-navy:hover { background: var(--white); color: var(--navy); }
.btn--on-navy:active { transform: translateY(1px); }

.btn--ghost-navy { background: transparent; color: var(--white); border-color: rgba(255,255,255,.34); }
.btn--ghost-navy:hover { border-color: var(--teal); background: rgba(0,194,184,.14); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  color: var(--blue); text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.link-arrow svg { width: 15px; height: 15px; flex: none; transition: transform var(--t-mid) var(--ease-spring); }
.link-arrow:hover { color: var(--navy); text-decoration: underline; }
.link-arrow:hover svg { transform: translateX(4px); }
.section--navy .link-arrow, .card--navy .link-arrow { color: var(--teal); }
.section--navy .link-arrow:hover, .card--navy .link-arrow:hover { color: var(--white); }

/* ---------- 6. HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(6,38,83,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: box-shadow var(--t-mid) var(--ease-out), background-color var(--t-mid) var(--ease-out);
}
.site-header.is-stuck { box-shadow: var(--shadow-nav); background: rgba(6,38,83,.985); }

.nav { display: flex; align-items: center; gap: var(--space-6); min-height: 76px; }
/* The logo is a transparent PNG, so it sits straight on the navy bar.
   42px tall keeps the lockup above the guidelines' 120px minimum width. */
.nav__brand {
  flex: none; display: flex; align-items: center; margin-right: auto;
  padding-block: 8px;
  border-radius: var(--r-sm);
  transition: opacity var(--t-fast) var(--ease-out);
}
.nav__brand:hover { opacity: .82; }
.nav__brand img { height: 42px; width: auto; }

.nav__panel { display: contents; }

.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.nav__link {
  position: relative; display: block;
  padding: 10px 13px;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500;
  color: rgba(255,255,255,.78);
  text-decoration: none; border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--white); background: rgba(255,255,255,.08); }
.nav__link[aria-current="page"] { color: var(--white); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; background: var(--teal); border-radius: 2px;
}

.nav__actions { display: flex; align-items: center; gap: var(--space-4); }

.lang {
  display: flex; align-items: center;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--r-pill); padding: 3px;
}
.lang__btn {
  min-width: 44px; min-height: 34px;
  padding: 5px 11px;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.72);
  background: transparent; border: 0; border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lang__btn:hover { color: var(--white); background: rgba(255,255,255,.12); }
.lang__btn[aria-pressed="true"] { background: var(--teal); color: var(--navy); }

.nav__toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; color: var(--white); }
.nav__toggle:hover { background: rgba(255,255,255,.1); }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 1060px) {
  .nav__toggle { display: inline-flex; }
  .nav__panel {
    display: none;
    position: fixed; left: 0; right: 0; top: 76px;
    background: var(--navy);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: var(--space-5) var(--gutter) var(--space-7);
    flex-direction: column; gap: var(--space-5);
    box-shadow: var(--shadow-nav);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .nav__panel.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 14px 16px; font-size: 1.0625rem; }
  .nav__link[aria-current="page"]::after { left: 16px; right: auto; width: 26px; bottom: 9px; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .lang { align-self: flex-start; }
}

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(540px, 74vh, 720px);
  background: var(--navy-deep);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--navy); mix-blend-mode: multiply; opacity: .40;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,21,47,.97) 0%, rgba(3,21,47,.9) 36%, rgba(3,21,47,.36) 72%, rgba(3,21,47,.6) 100%),
    linear-gradient(180deg, rgba(3,21,47,.6) 0%, rgba(3,21,47,0) 32%);
}
/* Narrow screens: the horizontal scrim would cover the whole frame, so switch
   to a vertical one that keeps the photograph visible behind the headline. */
@media (max-width: 760px) {
  .hero__media img { object-position: 62% 50%; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(3,21,47,.68) 0%,
      rgba(3,21,47,.84) 45%,
      rgba(3,21,47,.94) 100%);
  }
}

.hero__inner { position: relative; z-index: 2; padding-block: var(--space-9); }
.hero__content { max-width: 730px; }
.hero h1 { color: var(--white); margin-bottom: var(--space-5); }
.hero__lede {
  font-size: var(--step-1);
  color: rgba(255,255,255,.82);
  max-width: 54ch;
  margin-bottom: var(--space-7);
}
.hero__kicker {
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: var(--space-5);
}
.hero__kicker span { display: inline-flex; align-items: center; gap: var(--space-4); }
.hero__kicker span:not(:last-child)::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(0,194,184,.6); margin-right: var(--space-4);
}

/* Sits below the hero on the page background, so it needs its own solid base */
.hero__strip {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  background: var(--navy-deep);
}
.hero__strip ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
  list-style: none; padding: 0; margin: 0;
}
.hero__strip li {
  display: flex; align-items: center; gap: 12px;
  padding: var(--space-5);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem;
  color: rgba(255,255,255,.9);
  border-right: 1px solid rgba(255,255,255,.1);
}
.hero__strip li:first-child { padding-left: 0; }
.hero__strip li:last-child { border-right: 0; padding-right: 0; }
.hero__strip svg { width: 20px; height: 20px; color: var(--teal); flex: none; }

@media (max-width: 900px) {
  .hero__strip ul { grid-template-columns: repeat(2, 1fr); }
  .hero__strip li:nth-child(even) { border-right: 0; padding-right: 0; }
  .hero__strip li:nth-child(odd) { padding-left: 0; }
  .hero__strip li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 540px) {
  .hero__strip ul { grid-template-columns: 1fr; }
  .hero__strip li { border-right: 0; padding-inline: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .hero__strip li:last-child { border-bottom: 0; }
}

/* Inner-page hero: a photograph behind a navy scrim, the same recipe as the
   home hero. The gradient on the section itself is the fallback if the image
   never loads. Each source photo keeps its subject on the right and leaves the
   left third dark, so the left-aligned headline always has quiet ground. */
.page-hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(420px, 54vh, 540px);
  padding-block: clamp(64px, 8vw, 116px);
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(0,194,184,.2), transparent 62%),
    radial-gradient(760px 420px at 4% 112%, rgba(11,94,143,.44), transparent 64%),
    var(--navy);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hero-pos, 70% 50%);
}
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--navy); mix-blend-mode: multiply; opacity: .28;
}
.page-hero::before {  /* scrim */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,21,47,.94) 0%, rgba(3,21,47,.82) 36%, rgba(3,21,47,.22) 70%, rgba(3,21,47,.4) 100%),
    linear-gradient(180deg, rgba(3,21,47,.55) 0%, rgba(3,21,47,0) 34%);
}
.page-hero .container { position: relative; z-index: 2; }

/* Where each photograph is anchored when the frame crops it */
.page-hero--solutions  { --hero-pos: 68% 46%; }
.page-hero--expertise  { --hero-pos: 68% 42%; }
.page-hero--industries { --hero-pos: 72% 50%; }
.page-hero--about      { --hero-pos: 70% 40%; }
.page-hero--contact    { --hero-pos: 70% 26%; }

/* Narrow screens: the sideways scrim would cover the whole frame, so switch to
   a vertical one that keeps some photograph visible behind the headline. */
@media (max-width: 760px) {
  .page-hero::before {
    background: linear-gradient(180deg,
      rgba(3,21,47,.7) 0%,
      rgba(3,21,47,.84) 45%,
      rgba(3,21,47,.94) 100%);
  }
}
.page-hero h1 { color: var(--white); max-width: 19ch; margin-bottom: var(--space-5); }
.page-hero p { color: rgba(255,255,255,.78); font-size: var(--step-1); max-width: 60ch; }

.crumbs { margin-bottom: var(--space-5); font-size: var(--step--1); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.58); }
.crumbs li:not(:last-child)::after { content: "/"; color: rgba(255,255,255,.3); }
.crumbs a { display: inline-block; padding-block: 6px; color: rgba(255,255,255,.75); text-decoration: none; }  /* 24px → 36px tap target */
.crumbs a:hover { color: var(--teal); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--teal); }

/* ---------- 8. WAVE DIVIDER (drawn from the logo's arc) ---------- */
.wave { display: block; width: 100%; line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(38px, 4.6vw, 74px); }
.wave--white-to-navy { background: var(--white); }
.wave--light-to-navy { background: var(--light); }
.wave--navy-to-white { background: var(--navy); }
.wave--navy-to-light { background: var(--navy); }

/* ---------- 9. CARDS ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1060px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light-edge);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out);
}
.card h3 { margin-bottom: var(--space-3); }
.card .link-arrow { margin-top: var(--space-5); align-self: flex-start; }

a.card { text-decoration: none; color: var(--ink); }
a.card:hover, .card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,194,184,.55);
}

.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: rgba(0,194,184,.12);
  border: 1px solid rgba(0,194,184,.26);
  margin-bottom: var(--space-5);
  flex: none;
}
.card__icon svg { width: 25px; height: 25px; color: var(--blue); }

/* Card with a photograph on top. The icon tile straddles the photo's lower edge. */
.card--photo { padding: 0; overflow: hidden; }
.card__media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--navy-deep);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.card__media::after {   /* seats the photo into the navy palette */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,38,83,.45) 0%, rgba(6,38,83,0) 55%);
}
.card__body { display: flex; flex-direction: column; flex: 1; padding: 0 var(--space-6) var(--space-6); }
.card--photo .card__icon {
  position: relative; z-index: 1;
  margin-top: -26px;                        /* half the 52px tile overlaps the photo */
  background: var(--white); border-color: var(--light-edge);
  box-shadow: var(--shadow-md);
}
@media (hover: hover) {
  a.card--photo:hover .card__media img { transform: scale(1.05); }
}

.card--navy {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  color: rgba(255,255,255,.78);
}
.card--navy h3, .card--navy h4 { color: var(--white); }
.card--navy p { color: rgba(255,255,255,.76); }
.card--navy .card__icon { background: rgba(0,194,184,.18); border-color: rgba(0,194,184,.36); }
.card--navy .card__icon svg { color: var(--teal); }
a.card--navy:hover, .card--navy.card--interactive:hover {
  border-color: rgba(0,194,184,.6); background: rgba(255,255,255,.09);
}

.card--accent {
  background: linear-gradient(135deg, var(--blue) 0%, var(--teal-deep) 100%);
  border-color: rgba(255,255,255,.22);
  justify-content: center;
}
.card--accent h3, .card--accent p { color: var(--white); }

/* Checklists */
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: var(--space-5); }
.ticks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start; font-size: var(--step-0); line-height: 1.6;
}
.ticks svg { width: 20px; height: 20px; color: var(--teal); margin-top: 3px; }
.card--navy .ticks li, .section--navy .ticks li { color: rgba(255,255,255,.82); }

/* ---------- 10. FEATURE ROWS ---------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.feature + .feature { margin-top: clamp(56px, 7vw, 104px); }
.feature--flip .feature__media { order: 2; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: var(--space-7); }
  .feature--flip .feature__media { order: 0; }
}

.feature__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--blue); mix-blend-mode: multiply; opacity: .18;
}
.feature__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(6,38,83,.6) 0%, rgba(6,38,83,0) 55%);
}
.feature h2 { margin-bottom: var(--space-5); }
.feature p { max-width: 56ch; }
/* A section heading placed in a feature row: no extra bottom gap or width cap */
.feature .section-head--flush { margin-bottom: 0; max-width: none; }
.feature .section-head--flush h2 { margin-bottom: 0; }
/* Two people on the right of a wide photo: keep them in frame when cropped to 4:3 */
.feature__media--people img { object-position: 84% 50%; }
.section--navy .feature__media { box-shadow: 0 24px 64px rgba(0,0,0,.45); }

/* ---------- 11. FACTS ---------- */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--light-edge);
  border: 1px solid var(--light-edge); border-radius: var(--r-lg); overflow: hidden;
}
.facts > div { background: var(--white); padding: var(--space-6); }
.facts dt {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 10px;
}
.facts dd {
  margin: 0; font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 700; color: var(--navy); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* ---------- 12. PILLARS (numbered: a real sequence) ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } }
.pillar { padding-top: var(--space-5); border-top: 2px solid rgba(255,255,255,.2); }
.pillar__n {
  display: block; margin-bottom: var(--space-4);
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  color: rgba(0,194,184,.6); letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pillar h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.pillar p { font-size: var(--step--1); color: rgba(255,255,255,.72); }
.pillar--accent { border-top-color: var(--teal); }
.pillar--accent .pillar__n { color: var(--teal); }

/* Same structure on a light surface: the accent has to darken to stay legible */
.pillars--light { list-style: none; padding: 0; }
.pillars--light .pillar { border-top-color: var(--light-edge); }
.pillars--light .pillar__n { color: var(--teal-deep); }
.pillars--light .pillar p { color: var(--ink); }
.pillars--light .pillar--accent { border-top-color: var(--teal); }

/* ---------- 13. PARTNERS ---------- */
/* Platform and standard tiles. Plain text names, not vendor logos: a name is
   accurate and needs no licence, and the tile carries the design. */
.partners {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 681px) and (max-width: 1060px) {
  /* Three across, then the last two stretch to fill the row */
  .partners { grid-template-columns: repeat(6, 1fr); }
  .partner { grid-column: span 2; }
  .partner:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 680px) {
  .partners { grid-template-columns: repeat(2, 1fr); }
  .partner:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* no orphan tile */
}

.partner {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--light-edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out),
              background-color var(--t-mid) var(--ease-out);
}
.partner__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--space-3);
  border-radius: var(--r-sm);
  background: rgba(0,194,184,.12); border: 1px solid rgba(0,194,184,.26);
  transition: background-color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.partner__icon svg { width: 22px; height: 22px; color: var(--blue); transition: color var(--t-mid) var(--ease-out); }
.partner__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  color: var(--navy); letter-spacing: -0.01em; line-height: 1.3;
}
.partner__kind {
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
}

/* On navy */
.section--navy .partner {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.section--navy .partner__name { color: var(--white); }
.section--navy .partner__kind { color: rgba(255,255,255,.7); }
.section--navy .partner__icon { background: rgba(0,194,184,.18); border-color: rgba(0,194,184,.36); }
.section--navy .partner__icon svg { color: var(--teal); }

/* Hover: the tile lifts and grows a little, the icon fills. Only on devices that
   can hover, so a tap on a phone does not leave a tile stuck enlarged. */
@media (hover: hover) {
  .partner:hover {
    transform: translateY(-5px) scale(1.04);
    border-color: var(--teal);
    box-shadow: var(--shadow-lg);
  }
  .partner:hover .partner__icon { background: var(--teal); border-color: var(--teal); }
  .partner:hover .partner__icon svg { color: var(--navy); }

  .section--navy .partner:hover {
    background: rgba(255,255,255,.1);
    box-shadow: 0 16px 44px rgba(0,194,184,.22), 0 4px 12px rgba(0,0,0,.3);
  }
}

/* ---------- 14. FORMS ---------- */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 680px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--navy); }
.field .req { color: var(--blue); }
.field .hint { font-size: 0.8125rem; color: var(--slate); }

.field input, .field textarea, .field select {
  width: 100%; min-height: 50px;
  padding: 13px 15px;
  font-family: var(--font-body); font-size: 1rem; color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--light-edge);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
.field input::placeholder, .field textarea::placeholder { color: #8F9FB0; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #B3C8D4; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,194,184,.22);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B32D25; }
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(179,45,37,.18);
}

.field__error {
  display: none; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 500; color: #9E2820;
}
.field__error svg { width: 15px; height: 15px; flex: none; }
.field__error.is-visible { display: flex; }

.form__summary {
  display: none;
  padding: var(--space-5);
  background: #FDF3F2;
  border: 1.5px solid #E3B3AE;
  border-left: 4px solid #9E2820;
  border-radius: var(--r-sm);
}
.form__summary.is-visible { display: block; }
.form__summary h2 { font-size: var(--step-1); color: #8A231C; margin-bottom: 10px; }
.form__summary ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.form__summary a { color: #8A231C; font-weight: 500; }

.form__status {
  display: none;
  padding: var(--space-5);
  background: rgba(0,194,184,.1);
  border: 1.5px solid rgba(0,133,126,.45);
  border-left: 4px solid var(--teal-deep);
  border-radius: var(--r-sm);
  color: #04524C;
}
.form__status.is-visible { display: flex; gap: 12px; align-items: flex-start; }
.form__status svg { width: 20px; height: 20px; color: var(--teal-deep); flex: none; margin-top: 3px; }

/* ---------- 15. COMPETENCY CARDS ---------- */
/* Every competency is shown in full: there are only eight, each a short
   paragraph, so hiding them behind clicks made the page look empty and hid the
   substance. Numbered cards with scope tags make them scannable. The cards are
   not links, so hover gives feedback (accent bar, icon fill) but no lift. */
.comps {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
  list-style: none; padding: 0; margin: 0;
}
@media (max-width: 860px) { .comps { grid-template-columns: 1fr; } }

.comp {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--light-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.comp::before {   /* accent bar that draws in on hover */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.comp__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); }
.comp__icon { margin-bottom: 0; transition: background-color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out); }
.comp__icon svg { transition: color var(--t-mid) var(--ease-out); }
.comp__n {
  font-family: var(--font-display); font-size: 2.75rem; font-weight: 700;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: var(--light-edge);
  transition: color var(--t-mid) var(--ease-out);
}
.comp h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.comp p { max-width: 54ch; margin-bottom: var(--space-5); }

.comp__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: var(--space-5) 0 0; margin: auto 0 0;
  border-top: 1px solid var(--light-edge);
}
.comp__tags li {
  font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--navy);
  background: var(--light); border: 1px solid var(--light-edge);
  padding: 5px 12px; border-radius: var(--r-pill);
}

@media (hover: hover) {
  .comp:hover { border-color: rgba(0,194,184,.55); box-shadow: var(--shadow-md); }
  .comp:hover::before { transform: scaleX(1); }
  .comp:hover .comp__icon { background: var(--teal); border-color: var(--teal); }
  .comp:hover .comp__icon svg { color: var(--navy); }
  .comp:hover .comp__n { color: var(--teal); }
}

/* ---------- 16. CTA BAND ---------- */
/* The particle-wave artwork keeps its left third empty for the text. The
   gradient on the section itself is the fallback if the image never loads. */
.cta-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 380px at 84% 0%, rgba(0,194,184,.24), transparent 60%),
    radial-gradient(620px 380px at 8% 100%, rgba(11,94,143,.48), transparent 62%),
    var(--navy);
}
.cta-band__media { position: absolute; inset: 0; z-index: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.cta-band::before {  /* scrim */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(3,21,47,.9) 0%, rgba(3,21,47,.62) 40%, rgba(3,21,47,.08) 78%);
}
@media (max-width: 760px) {
  .cta-band::before { background: linear-gradient(180deg, rgba(3,21,47,.82) 0%, rgba(3,21,47,.72) 100%); }
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(32px, 5vw, 72px); flex-wrap: wrap;
}
.cta-band h2 { color: var(--white); max-width: 17ch; }
.cta-band p { color: rgba(255,255,255,.76); max-width: 48ch; margin-top: var(--space-4); }

/* ---------- 17. FOOTER ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.66); padding-block: var(--space-9) var(--space-6); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand a {
  display: inline-flex;
  border-radius: var(--r-sm);
  margin-bottom: var(--space-5);
}
.footer__brand img { height: 48px; width: auto; }
/* The navy lockup exists for paper: the white one disappears on a white page.
   It is lazy-loaded and hidden on screen, so it costs nothing until printed. */
.logo--print { display: none; }
.footer__brand p { font-size: 0.9375rem; max-width: 34ch; }
.footer__loc {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-5); font-size: 0.9375rem; color: rgba(255,255,255,.74);
}
.footer__loc svg { width: 17px; height: 17px; color: var(--teal); flex: none; }

.footer__col h3 {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal); margin-bottom: var(--space-5);
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 8px; }
/* Scoped to the link lists so it cannot override buttons or social icons */
.footer__col ul:not(.socials) a {
  display: inline-block;
  padding-block: 4px;               /* keeps the target at 24px+ (WCAG 2.2) */
  color: rgba(255,255,255,.72); text-decoration: none; font-size: 0.9375rem;
  transition: color var(--t-fast) var(--ease-out);
}
.footer__col ul:not(.socials) a:hover { color: var(--teal); text-decoration: underline; }

.footer__cta h3 {
  color: var(--white); font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em;
  text-transform: none; line-height: 1.3; margin-bottom: var(--space-5);
}

.socials { display: flex; gap: 10px; margin-top: var(--space-6); }
.socials a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-sm);
  color: rgba(255,255,255,.78);
  transition: border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.socials a:hover { border-color: var(--teal); background: rgba(0,194,184,.14); color: var(--teal); }
.socials svg { width: 19px; height: 19px; }

.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-top: var(--space-6);
  font-size: 0.8125rem; color: rgba(255,255,255,.55);
}
.footer__base ul { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; padding: 0; }
.footer__base a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer__base a:hover { color: var(--teal); text-decoration: underline; }

/* ---------- 18. PROSE ---------- */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose ul { padding-left: 22px; display: grid; gap: 10px; margin-top: var(--space-4); }
.prose li::marker { color: var(--teal); }

/* ---------- 18b. CONTACT DETAILS ---------- */
.contact-details { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.contact-details li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.contact-details > li > svg { width: 22px; height: 22px; color: var(--blue); margin-top: 3px; }
.contact-details .label {
  display: block;
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 2px;
}
.contact-details a { display: inline-block; padding-block: 3px; }

/* ---------- 19. UTILITY ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.text-lead { font-size: var(--step-1); }

/* ---------- 20. MOTION: one orchestrated page-load moment ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.js .hero__reveal > * { animation: rise var(--t-slow) var(--ease-out) both; }
.js .hero__reveal > *:nth-child(1) { animation-delay:  80ms; }
.js .hero__reveal > *:nth-child(2) { animation-delay: 170ms; }
.js .hero__reveal > *:nth-child(3) { animation-delay: 260ms; }
.js .hero__reveal > *:nth-child(4) { animation-delay: 350ms; }

/* Failsafe: content must never depend on an animation having run. */
.hero__reveal.is-done > * { opacity: 1 !important; transform: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .hero__reveal > * { opacity: 1; animation: none; }
  .btn:hover svg, .link-arrow:hover svg { transform: none; }
  a.card:hover, .card--interactive:hover, .partner:hover { transform: none; }
  .comp::before { transform: scaleX(1); opacity: 0; }
  .comp:hover::before { opacity: 1; }
}

/* ---------- 21. PRINT ---------- */
@media print {
  .site-header, .cta-band, .socials, .nav__toggle, .wave { display: none; }
  body { color: #000; background: #fff; }
  .section { padding-block: 24px; }
  .section--navy, .page-hero { background: #fff !important; color: #000; }
  .section--navy h2, .section--navy h3, .page-hero h1 { color: #000; }

  /* Paper: no hero photo or scrim, dark text, and the navy logo in the footer */
  .page-hero { min-height: 0; }
  .page-hero__media, .page-hero::before { display: none; }
  .page-hero p, .crumbs li, .crumbs a { color: #000; }
  .site-footer { background: #fff; }
  .site-footer, .site-footer a, .site-footer h3, .site-footer p, .site-footer svg { color: #000 !important; }
  .logo--screen { display: none; }
  .logo--print { display: block; }
}