/* ==========================================================================
   Top Gun Investments
   Design language: navy ink on soft lavender, blue gradient panels,
   Montserrat for headings, Poppins for text, 15px soft cards.
   z-index scale: header 50, menu 40, skip-link 100.
   ========================================================================== */

:root {
  color-scheme: light;

  /* colour: forest + insignia gold, taken from the emblem */
  --page: #eef1ec;          /* soft sage paper */
  --page-2: #f7f9f6;        /* near-white band */
  --page-3: #e0e7df;        /* deeper sage band */
  --white: #fdfefc;
  --navy: #0f2a20;          /* forest: ink, buttons */
  --navy-2: #0b2018;        /* full-bleed dark band */
  --ink-2: #3f4d46;         /* body text on light (AA) */
  --ink-3: #5d6a63;
  --line: rgb(15 42 32 / 0.12);
  --line-strong: rgb(15 42 32 / 0.26);

  --blue: #c99a3a;          /* insignia gold: marks, icons, rules */
  --blue-2: #e2c27a;        /* light gold on dark */
  --blue-ink: #85601a;      /* gold as text on light (AA) */
  --pink: #85601a;          /* "read more" links */
  --emerald: #1d7a4c;       /* emblem green, small marks */
  --on-dark: #e9eee7;
  --on-dark-2: #a9b8af;
  --line-dark: rgb(233 238 231 / 0.16);
  --success: #1d7a4c;
  --danger: #a3341f;
  --focus: #c99a3a;

  --grad-hero: linear-gradient(160deg, #24563f 0%, #163829 45%, #0f2a20 100%);
  --grad-blue: linear-gradient(160deg, #1d4a36 0%, #0f2a20 100%);
  --grad-gold: linear-gradient(90deg, #b5852a 0%, #e2c27a 100%);
  --grad-card: linear-gradient(180deg, rgb(253 254 252 / 0.7) 0%, #e6ece5 100%);
  --grad-soft: linear-gradient(180deg, #fdfefc 0%, #eef2ec 100%);
  --shadow: 6px 6px 15px rgb(15 31 25 / 0.12);
  --shadow-lg: 0 30px 60px -28px rgb(15 42 32 / 0.4);

  /* type */
  --font-head: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.625rem, 1.4rem + 4.2vw, 5rem);
  --fs-h1: clamp(2.375rem, 1.5rem + 3.2vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 4rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 0.8vw, 2.25rem);
  --fs-h4: 1.1875rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* space */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --section: clamp(64px, 8vw, 128px);
  --gutter: clamp(16px, 3.5vw, 40px);
  --max: 1440px;
  --header-h: 88px;

  --radius: 15px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
body {
  background: var(--page);
  color: var(--navy);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
ul[role='list'] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: var(--navy); }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.icon { width: 1.125em; height: 1.125em; flex: none; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--navy); color: #fff;
  padding: 12px 16px; border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--band { padding-block: calc(var(--section) * 0.5); }

/* ---------- type ---------- */
.display, .h1, .h2, .h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: none;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); font-weight: 600; line-height: 1; letter-spacing: 0.005em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; }
.lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.prose { max-width: 62ch; color: var(--ink-2); text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.prose strong { color: var(--navy); font-weight: 600; }
.accent { color: var(--blue-ink); }
.caption { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }

/* three-bar underline, from the reference headings */
.dashes { display: flex; gap: 6px; align-items: center; margin-block: 14px 22px; }
.dashes span { display: block; height: 4px; border-radius: 4px; background: var(--navy); transform-origin: left; }
.dashes span:nth-child(1) { width: 56px; }
.dashes span:nth-child(2) { width: 34px; background: var(--blue); }
.dashes span:nth-child(3) { width: 12px; background: var(--blue); }
/* older pages still use .stripes markup: render it as dashes */
.stripes { display: inline-flex; gap: 5px; align-items: center; flex: none; }
.stripes span { display: block; height: 3px; width: 28px; border-radius: 3px; background: var(--navy); transform-origin: left; }
.stripes span:nth-child(2) { width: 16px; background: var(--blue); }
.stripes span:nth-child(3) { width: 6px; background: var(--blue); }

/* ---------- buttons & links ---------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-bd: var(--navy);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 34px;
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn .icon { transition: transform 0.4s var(--ease); }
@media (hover: hover) {
  .btn:hover { --btn-bg: var(--blue); --btn-bd: var(--blue); --btn-fg: var(--navy); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgb(15 42 32 / 0.55); }
  .btn:hover .icon { transform: translateX(3px); }
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: var(--fs-sm); }
.btn--primary, .btn--navy { --btn-bg: var(--navy); --btn-bd: var(--navy); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line-strong); }
@media (hover: hover) { .btn--ghost:hover { --btn-fg: #fff; } }
.btn--light { --btn-bg: rgb(255 255 255 / 0.14); --btn-fg: #fff; --btn-bd: rgb(255 255 255 / 0.55); }
@media (hover: hover) { .btn--light:hover { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; box-shadow: none; } }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* underlined text link ("Read more") */
.link-line, .link-arrow {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding-block: 6px; color: var(--pink);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.03em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat;
  transition: background-size 0.45s var(--ease), color 0.3s ease;
}
.link-arrow .icon { transition: transform 0.4s var(--ease); }
@media (hover: hover) {
  .link-line:hover, .link-arrow:hover { background-size: 40% 2px; }
  .link-arrow:hover .icon { transform: translate(2px, -2px); }
}
.link-line--light { color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* soft card surface (reference "glass" tiles) */
.frame { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--page-3); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.3s ease;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.menu-open .site-header::before { background: var(--page); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgb(15 42 32 / 0.5); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: var(--header-h); }
.brand { display: block; flex: none; }
.brand img { width: 132px; height: auto; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 14px; background: var(--white); border: 0; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500; color: var(--navy);
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle__close, .nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

.site-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-3) var(--gutter) var(--s-5);
  background: var(--page);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.site-nav__list { display: grid; gap: 10px; }
.site-nav__list a {
  display: flex; align-items: center; min-height: 60px; padding: 0 20px;
  font-family: var(--font-head); font-size: clamp(1.375rem, 6vw, 1.75rem); font-weight: 600;
  text-decoration: none; border-radius: var(--radius);
  background: var(--grad-card); box-shadow: var(--shadow);
}
.site-nav__list a[aria-current='page'] { background: var(--grad-blue); color: #fff; }
.site-nav__aside { display: grid; gap: var(--s-2); }
.site-nav__phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; text-decoration: none; }
.site-nav__aside .btn { width: 100%; }
body.menu-open { overflow: hidden; }

@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .brand img { width: 150px; }
  .site-nav {
    position: static; flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: 0; background: none; overflow: visible;
    visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .site-nav__list { display: flex; gap: 4px; margin-inline: auto; }
  .site-nav__list a {
    position: relative; min-height: 44px; padding: 0 16px; border-radius: 0;
    font-family: var(--font); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0.08em;
    background: none; box-shadow: none;
  }
  .site-nav__list a::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px;
    background: var(--blue); transform: scaleX(0); transform-origin: right;
    transition: transform 0.45s var(--ease);
  }
  .site-nav__list a:hover::after, .site-nav__list a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
  .site-nav__list a[aria-current='page'] { background: none; color: var(--navy); font-weight: 500; }
  .site-nav__aside { display: flex; align-items: center; gap: var(--s-3); }
  .site-nav__aside .btn { width: auto; }
  .site-nav__phone { font-size: var(--fs-sm); }
}
@media (min-width: 1100px) and (max-width: 1299px) { .site-nav__phone { display: none; } }

/* ---------- generic media (inner pages) ---------- */
.media { position: relative; overflow: hidden; background: var(--page-3); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 16 / 9; }
.media--cine { aspect-ratio: 21 / 9; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1; }
.media[data-parallax] img { position: absolute; left: 0; top: -8%; height: 116%; }

/* ==========================================================================
   HOME
   ========================================================================== */

/* hero: blue gradient panel, disc + round photo, facts tab cut into the corner */
.hero { padding: 8px var(--gutter) 0; max-width: calc(var(--max) + 40px); margin-inline: auto; position: relative; }
.hero__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--s-4);
  padding: clamp(40px, 6vw, 96px) clamp(22px, 5vw, 80px) 190px;
  border-radius: var(--radius);
  background: var(--grad-hero);
  color: #fff;
}
.hero__panel::after { /* soft light at the top edge */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 60% at 20% 0%, rgb(255 255 255 / 0.22), transparent 60%);
}
.hero__copy { display: grid; gap: var(--s-4); align-content: start; position: relative; z-index: 1; }
.hero__title { color: #fff; }
.hero__title .accent { color: var(--blue-2); }
.hero__title .line { display: block; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.75; letter-spacing: 0.06em; color: #dfe7e0; max-width: 44ch; }
.hero__visual { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; }
.hero__disc {
  position: absolute; inset: -6%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.32), rgb(201 154 58 / 0.28) 55%, rgb(201 154 58 / 0.1));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.hero__media {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgb(15 42 32 / 0.55), 0 0 0 8px rgb(255 255 255 / 0.22);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero .hero__facts { /* .hero prefix beats the ul[role=list] padding reset */
  position: absolute; z-index: 2; left: var(--gutter); bottom: 0;
  display: grid; gap: 4px;
  width: fit-content; max-width: calc(100% - 2 * var(--gutter));
  padding: 20px clamp(56px, 6vw, 88px) 18px clamp(20px, 2.6vw, 32px);
  background: var(--page-2);
  border-radius: 0 64px 0 var(--radius);
  border-top: 3px solid var(--blue);
}
.hero__fact { display: flex; align-items: center; gap: 14px; padding-block: 4px; }
.hero__fact-num {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(2.25rem, 1.8rem + 1.2vw, 2.75rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--blue-ink);
}
.hero__fact-icon {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 14px; background: var(--grad-blue); color: var(--blue-2);
  box-shadow: 0 10px 20px -12px rgb(15 42 32 / 0.8);
}
.hero__fact-icon .icon { width: 22px; height: 22px; }
.hero__fact-label { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); letter-spacing: 0.04em; }
.hero__fact-label strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0; color: var(--navy); }
.hero__fact:first-child .hero__fact-label { text-transform: uppercase; font-weight: 600; letter-spacing: 0.1em; font-size: 0.6875rem; color: var(--ink-2); }
@media (min-width: 600px) {
  .hero__panel { padding-bottom: 140px; }
  .hero .hero__facts { grid-template-columns: auto 1px auto; justify-content: start; align-items: center; gap: clamp(20px, 3vw, 36px); }
  .hero__facts::before { /* gold divider between the two facts */
    content: ''; grid-column: 2; grid-row: 1; align-self: stretch; width: 1px;
    background: linear-gradient(180deg, transparent, var(--blue) 30%, var(--blue) 70%, transparent);
  }
  .hero__fact:first-child { grid-column: 1; grid-row: 1; }
  .hero__fact:last-child { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1024px) {
  .hero__panel { grid-template-columns: 1.1fr 0.9fr; align-items: center; min-height: min(78vh, 680px); padding-bottom: clamp(110px, 9vw, 140px); }
  .hero__visual { width: min(100%, 500px); justify-self: end; margin-right: 2%; }
}

/* strategies: heading left, grid of chips right */
.strategies { display: grid; gap: var(--s-5); align-items: center; }
.strategies__head { display: grid; gap: var(--s-3); align-content: start; }
.strategies__lead { color: var(--ink-2); max-width: 36ch; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chip {
  display: flex; align-items: center; gap: 14px;
  min-height: 84px; padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--grad-card); box-shadow: var(--shadow);
  font-family: var(--font-head); font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: 0;
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.3s ease;
  position: relative; isolation: isolate; overflow: hidden;
}
.chip::before { /* blue state fades in */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-blue); opacity: 0; transition: opacity 0.4s var(--ease);
}
.chip__icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(145deg, #e2c27a, #c99a3a);
  color: var(--navy); box-shadow: 0 8px 16px -8px rgb(133 96 26 / 0.6);
  transition: background 0.4s var(--ease);
}
.chip__icon .icon { width: 22px; height: 22px; }
.chip--accent::before { opacity: 1; }
.chip--accent { color: #fff; }
.chip--accent .chip__icon { background: rgb(255 255 255 / 0.22); box-shadow: none; }
@media (hover: hover) {
  .chip:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 18px 30px -16px rgb(15 42 32 / 0.5); }
  .chip:hover::before { opacity: 1; }
  .chip:hover .chip__icon { background: rgb(255 255 255 / 0.22); box-shadow: none; }
}
@media (min-width: 640px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chip { font-size: 1.125rem; padding: 14px 20px; gap: 18px; } }
@media (min-width: 1024px) {
  .strategies { grid-template-columns: 4fr 8fr; gap: clamp(40px, 4vw, 72px); }
  .chips { gap: 16px; }
}

/* insight: copy left, photo in an orbit with floating badges right */
.insight { background: linear-gradient(180deg, var(--page) 0%, var(--page-2) 100%); }
.insight__grid { display: grid; gap: var(--s-6); align-items: center; }
.insight__copy { display: grid; justify-items: start; }
.insight__title { max-width: 18ch; }
.insight__copy .prose { margin-bottom: var(--s-4); }
.orbit { position: relative; width: min(100%, 520px); aspect-ratio: 1; justify-self: center; }
.orbit__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgb(15 42 32 / 0.4);
}
.orbit__media { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--page-3); }
.orbit__media img { width: 100%; height: 100%; object-fit: cover; }
.orbit__badge {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: var(--radius);
  background: rgb(253 254 252 / 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px -18px rgb(15 42 32 / 0.5);
  font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-2);
}
.orbit__badge .icon { width: 22px; height: 22px; color: var(--blue); }
.orbit__badge strong { display: block; font-family: var(--font-head); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); color: var(--blue-ink); font-weight: 700; }
.orbit__badge--a { top: 2%; left: -2%; }
.orbit__badge--b { top: 42%; right: -6%; }
.orbit__badge--c { bottom: 6%; left: 2%; }
@media (prefers-reduced-motion: no-preference) {
  .orbit__badge { animation: float 6s ease-in-out infinite; }
  .orbit__badge--b { animation-delay: -2s; }
  .orbit__badge--c { animation-delay: -4s; }
}
@keyframes float { 50% { transform: translateY(-8px); } }
@media (max-width: 479px) {
  .orbit__badge { padding: 8px 12px; gap: 8px; }
  .orbit__badge--b { right: -2%; }
}
@media (min-width: 1024px) { .insight__grid { grid-template-columns: 5fr 6fr; gap: clamp(48px, 6vw, 112px); } }

/* feature split: image card left, large heading right */
.feature-split { background: var(--page-2); }
.feature-split__grid { display: grid; gap: var(--s-5); align-items: start; }
.feature-split__media { aspect-ratio: 3 / 2; }
.feature-split__media img { object-position: 50% 25%; }
.feature-split__copy { display: grid; gap: var(--s-3); justify-items: start; }
.feature-split__copy .h2 { margin-top: -0.12em; }
.feature-split__role { font-weight: 500; color: var(--blue-ink); }
.creds { display: grid; gap: 10px; }
.creds li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.creds .icon { margin-top: 0.3em; color: var(--blue); }
@media (min-width: 1024px) { .feature-split__grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 112px); } }

/* factors: heading column + three icon columns */
.factors { background: var(--page-2); padding-top: 0; }
.factors__grid { display: grid; gap: var(--s-5); }
.factors__head { display: grid; gap: var(--s-3); justify-items: start; align-content: start; }
.factors__head p { color: var(--ink-2); max-width: 36ch; }
.factors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.factor { display: grid; gap: 14px; align-content: start; }
.factor .icon { width: 40px; height: 40px; color: var(--blue); stroke-width: 1.4; }
.factor h3 { font-family: var(--font-head); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 600; line-height: 1.4; letter-spacing: 0; max-width: 20ch; }
@media (min-width: 768px) { .factors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .factors__grid { grid-template-columns: 4fr 8fr; gap: clamp(40px, 5vw, 96px); } }

/* showcase: three cards, inset photo on top, text below, equal heights */
.showcase__grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.show-card {
  display: flex; flex-direction: column;
  padding: 14px;
  border-radius: calc(var(--radius) + 4px);
  background: var(--white); box-shadow: 0 24px 50px -30px rgb(15 42 32 / 0.4);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.show-card__media { aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; background: var(--page-3); }
.show-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.show-card__body { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: start; padding: 22px 12px 10px; position: relative; }
.show-card__icon {
  position: absolute; right: 12px; top: -30px;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(145deg, #e2c27a, #c99a3a); color: var(--navy);
  box-shadow: 0 0 0 6px var(--white), 0 12px 20px -10px rgb(133 96 26 / 0.7);
}
.show-card__icon .icon { width: 22px; height: 22px; }
.show-card h3 { font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 700; line-height: 1.25; padding-right: 56px; }
.show-card p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.65; }
.show-card__link {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--navy); text-decoration: none;
  padding-bottom: 4px; border-bottom: 2px solid var(--blue);
}
.show-card__link .icon { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
@media (hover: hover) {
  .show-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgb(15 42 32 / 0.55); }
  .show-card:hover .show-card__media img { transform: scale(1.05); }
  .show-card:hover .show-card__link .icon { transform: translate(2px, -2px); }
}
@media (min-width: 768px) { .showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* navy band (rounded, inside container) with 20/80 */
.band {
  display: grid; gap: var(--s-5);
  padding: clamp(36px, 5vw, 80px) clamp(22px, 5vw, 96px);
  border-radius: var(--radius);
  background: var(--navy); color: var(--on-dark);
  box-shadow: 0 40px 70px -40px rgb(11 32 24 / 0.8);
}
.band .h2 { font-family: var(--font); font-weight: 500; letter-spacing: 0.04em; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.3; }
.band .accent, .on-dark .accent { color: var(--blue-2); }
.band .lead { color: var(--on-dark-2); }
.band__head { display: grid; gap: var(--s-3); justify-items: start; align-content: start; }
@media (min-width: 1024px) { .band { grid-template-columns: 4fr 6fr; align-items: center; gap: clamp(40px, 5vw, 96px); } }

.ratio__bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.ratio__seg { position: relative; padding-top: var(--s-3); }
.ratio__rule { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 6px; background: var(--on-dark-2); transform-origin: left; }
.ratio__seg--80 .ratio__rule { background: var(--grad-gold); }
.ratio__num { font-family: var(--font-head); font-size: clamp(3.5rem, 2rem + 5vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ratio__num small { font-size: 0.45em; vertical-align: top; margin-left: 2px; }
.ratio__seg--80 .ratio__num { color: var(--blue-2); }
.ratio__title { margin-top: var(--s-2); font-family: var(--font-head); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.ratio__text { margin-top: 6px; color: var(--on-dark-2); font-size: var(--fs-sm); max-width: 36ch; }
@media (min-width: 640px) { .ratio__bar { grid-template-columns: 4fr 6fr; gap: 10px; } .ratio__seg { padding-right: var(--s-3); } }

/* gradient CTA panel with image */
.cta__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--s-4);
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius);
  background: linear-gradient(120deg, #24563f 0%, #163829 50%, #0f2a20 100%);
  color: #fff;
}
.cta__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 30px 50px -30px rgb(15 42 32 / 0.7); }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__copy { display: grid; gap: var(--s-3); align-content: center; }
.cta__copy .h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.cta__copy p { color: #dfe7e0; max-width: 48ch; letter-spacing: 0.04em; }
.cta__copy .actions { margin-top: var(--s-1); }
@media (min-width: 1024px) {
  .cta__panel { grid-template-columns: 5fr 6fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
  .cta__media { aspect-ratio: auto; min-height: 320px; }
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
/* inner page header: rounded photo banner with a curved notch holding the breadcrumb */
.page-head { padding-top: 8px; }
.page-banner {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(240px, 40vw, 540px);
  border-radius: var(--radius) var(--radius) var(--radius) 0; /* notch covers bottom-left */
  background: var(--page-3);
}
.page-banner--short { height: clamp(200px, 26vw, 360px); }
.page-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner::after { /* faint forest wash so every photo sits in the palette */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(15 42 32 / 0) 55%, rgb(15 42 32 / 0.18) 100%);
}
.page-banner__notch {
  position: absolute; left: -1px; bottom: -1px; z-index: 1;
  width: clamp(260px, 46%, 660px); height: clamp(64px, 8vw, 118px);
  fill: var(--page);
}
.crumbs {
  position: absolute; left: clamp(18px, 2.4vw, 32px); bottom: clamp(14px, 2.4vw, 34px); z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem); letter-spacing: 0.08em; color: var(--navy);
}
.crumbs a { text-decoration: none; color: var(--ink-3); transition: color 0.3s ease; }
.crumbs a:hover { color: var(--blue-ink); }
.crumbs [aria-hidden] { color: var(--blue); }
.crumbs [aria-current] { font-weight: 500; }

.page-intro { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(32px, 4vw, 56px); display: grid; gap: var(--s-5); align-items: center; }
.page-intro__copy { display: grid; justify-items: start; }
/* reference scale: compact, extra-bold title in the left half */
.page-intro .h1 { font-size: clamp(2.125rem, 1.5rem + 2vw, 3.25rem); font-weight: 800; line-height: 1.15; max-width: 18ch; }
.page-intro .dashes { margin-block: 18px 26px; }
.page-intro__text { max-width: 56ch; }
.page-intro__text.prose, .page-intro .lead { color: var(--ink-2); font-size: var(--fs-lead); }
.page-intro__sub { font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 600; color: var(--blue-ink); margin-bottom: 10px; }
.page-intro .jump { margin-top: var(--s-4); }
.page-intro__aside { position: relative; }
.page-intro__media { aspect-ratio: 3 / 2; }
.float-badge {
  position: absolute; left: clamp(-24px, -2vw, -8px); bottom: clamp(-28px, -2.5vw, -16px);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: var(--radius);
  background: var(--white); box-shadow: 0 20px 40px -20px rgb(15 42 32 / 0.45);
  font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-2);
}
.float-badge .icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: linear-gradient(145deg, #e2c27a, #c99a3a); color: var(--navy); }
.float-badge strong { display: block; font-family: var(--font-head); font-size: 1.25rem; color: var(--navy); }
.quick { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--grad-blue); color: var(--on-dark); box-shadow: var(--shadow-lg); }
.quick__title { font-family: var(--font-head); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; color: #fff; line-height: 1.25; }
.quick__text { margin-top: 10px; margin-bottom: var(--s-4); color: var(--on-dark-2); }
.quick .btn--primary { --btn-bg: var(--blue); --btn-bd: var(--blue); --btn-fg: var(--navy); }
.quick .btn--ghost { --btn-fg: #fff; --btn-bd: var(--line-dark); }
@media (hover: hover) { .quick .btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; } }
@media (min-width: 1024px) {
  .page-intro--split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 112px); }
}
@media (max-width: 1023px) { .float-badge { left: 12px; } }

/* about */
.intro__statement { font-family: var(--font-head); font-size: clamp(1.375rem, 1.05rem + 1.2vw, 2.125rem); line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; text-align: center; margin-inline: auto; max-width: 54ch; }
.intro__statement em { font-style: normal; color: var(--blue-ink); }
.founder__role { font-weight: 500; color: var(--blue-ink); }
.founder__copy { display: grid; gap: var(--s-3); }
.profile { display: grid; gap: var(--s-5); }
.profile__media { display: grid; gap: var(--s-3); }
@media (min-width: 1024px) {
  .profile { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 112px); }
  .profile__media { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}
.event { margin-top: var(--s-4); display: grid; gap: 12px; }

.vm { display: grid; gap: var(--s-3); }
.vm__item { padding: clamp(28px, 4vw, 48px); display: grid; gap: var(--s-2); align-content: start; border-radius: var(--radius); background: var(--grad-card); box-shadow: var(--shadow); }
.vm__item .h3 { font-size: 1.1875rem; font-weight: 700; color: var(--blue-ink); }
.vm__item p { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.7; font-weight: 400; color: var(--ink-2); max-width: 42ch; text-wrap: pretty; }
@media (min-width: 768px) { .vm { grid-template-columns: 1fr 1fr; } }

/* full-bleed navy band */
.on-forest, .on-dark { background: var(--navy-2); color: var(--on-dark); }
.on-forest .lead, .on-forest .prose { color: var(--on-dark-2); }
.on-forest .accent { color: var(--blue-2); }
.on-forest .h2 { color: #fff; }
.ratio__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.on-forest .ratio__head .h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 800; }
@media (min-width: 1024px) { .ratio__head { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 112px); align-items: end; } .ratio__head .lead { justify-self: end; } }

.values__list { display: grid; gap: 14px; margin-top: var(--s-5); }
.value { padding: var(--s-4) var(--s-3); display: grid; gap: var(--s-1); align-content: start; border-radius: var(--radius); background: rgb(255 255 255 / 0.05); border: 1px solid var(--line-dark); transition: background 0.4s var(--ease), border-color 0.4s var(--ease); }
.value__word { font-family: var(--font-head); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; line-height: 1.2; }
.value p { color: var(--on-dark-2); font-size: var(--fs-sm); max-width: 30ch; }
@media (hover: hover) { .value:hover { background: rgb(201 154 58 / 0.18); border-color: rgb(201 154 58 / 0.5); } }
@media (min-width: 640px) { .values__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .values__list { grid-template-columns: repeat(5, 1fr); } }

/* light CTA card */
.cta-band__inner {
  display: grid; gap: var(--s-4);
  padding: clamp(32px, 5vw, 72px);
  border-radius: var(--radius); background: var(--grad-soft); box-shadow: 0 30px 60px -36px rgb(15 42 32 / 0.45);
}
@media (min-width: 1024px) { .cta-band__inner { grid-template-columns: 1fr auto; align-items: end; gap: var(--s-6); } }

/* services page */
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-4); }
.jump a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em; text-decoration: none; color: var(--navy);
  background: var(--white);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.jump a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.svc-group { padding-block: calc(var(--section) * 0.8) 0; }
.svc-group:last-of-type { padding-bottom: var(--section); }
.svc-group__title {
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-ink); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-strong);
}
.svc-row { display: grid; gap: var(--s-4); padding-block: clamp(40px, 5vw, 72px); align-items: start; }
.svc-row + .svc-row { border-top: 1px solid var(--line); }
.svc-row__media { aspect-ratio: 3 / 2; }
.svc-row__copy { display: grid; justify-items: start; }
.svc-row__copy .h2 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 3rem); margin-top: -0.12em; }
.svc__hook { font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 600; color: var(--blue-ink); line-height: 1.45; margin-bottom: var(--s-2); }
.svc__body { color: var(--ink-2); max-width: 60ch; }
.svc__body > * + * { margin-top: 1em; }
@media (min-width: 1024px) {
  .svc-row { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 112px); }
  .svc-row--flip .svc-row__media { order: 2; }
}

/* why page */
.approach { display: grid; gap: var(--s-5); }
.approach__col { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--grad-card); box-shadow: var(--shadow); }
.approach__col h2 { margin-bottom: var(--s-3); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.approach__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.approach__item .icon { width: 32px; height: 32px; padding: 6px; border-radius: 50%; color: #fff; }
.approach__item--do .icon { background: var(--grad-blue); }
.approach__item--avoid .icon { background: var(--navy); }
.approach__item h3 { font-family: var(--font-head); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.approach__item p { color: var(--ink-2); font-size: var(--fs-sm); }
@media (min-width: 1024px) { .approach { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); } }

.stand__words { display: grid; margin-top: var(--s-4); overflow-x: clip; }
.stand__word {
  display: block; padding-block: 8px;
  font-family: var(--font-head); font-size: clamp(2.75rem, 1.2rem + 7vw, 7.5rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.02em; border-bottom: 1px solid var(--line);
}
.stand__word:nth-child(even) { text-align: right; color: var(--blue-ink); }
.stand__foot { margin-top: var(--s-5); }

/* contact */
.contact { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .contact { grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 96px); align-items: start; } }
.details { display: grid; gap: 12px; }
.detail { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 24px; align-items: start; border-radius: var(--radius); background: var(--grad-card); box-shadow: var(--shadow); }
.detail .icon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--grad-blue); color: #fff; }
.detail dt { padding-top: 2px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.detail dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.contact > *, .detail > div { min-width: 0; }
.detail a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; }
.detail a:hover { color: var(--blue-ink); }

.form { background: var(--page-2); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; box-shadow: 0 30px 60px -36px rgb(15 42 32 / 0.45); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
.form__note { margin-top: 6px; }
.field input::placeholder { color: var(--ink-3); opacity: 0.8; }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; line-height: 1.4; letter-spacing: 0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgb(201 154 58 / 0.3); }
.field [aria-invalid='true'] { border-color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.field__error:empty { display: none; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--fs-sm); color: var(--ink-2); }
.check input { width: 20px; height: 20px; min-height: 0; padding: 0; margin-top: 2px; accent-color: var(--blue); }
.form__status { padding: var(--s-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); display: flex; gap: 12px; align-items: flex-start; }
.form__status[hidden] { display: none; }
.form__status--ok { background: rgb(31 138 91 / 0.1); border: 1px solid rgb(31 138 91 / 0.4); }
.form__status--error { background: rgb(192 57 43 / 0.08); border: 1px solid rgb(192 57 43 / 0.4); }
.form__status .icon { margin-top: 2px; }
.form .btn { justify-self: start; }

/* legal */
.legal { max-width: none; }
.legal h2 { font-family: var(--font-head); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p { margin-top: 1em; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; }

/* ---------- footer ---------- */
.site-footer { margin-top: clamp(16px, 2vw, 32px); font-size: var(--fs-sm); }
.site-footer a { text-decoration: none; }
.site-footer__cta {
  display: grid; gap: var(--s-4); align-items: center;
  padding: var(--s-4) clamp(16px, 3vw, 40px);
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgb(253 254 252 / 0.55);
}
.site-footer__logo img { width: 170px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.tile {
  display: grid; justify-items: center; gap: 10px;
  padding: 16px 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.tile__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(180deg, #f6f8f4, #dfe6dd); color: var(--blue);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgb(15 42 32 / 0.5);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.tile__icon .icon { width: 24px; height: 24px; }
@media (hover: hover) {
  .tile:hover { transform: translateY(-3px); background: var(--white); border-color: transparent; }
  .tile:hover .tile__icon { background: var(--grad-blue); color: #fff; }
}
@media (min-width: 1024px) { .site-footer__cta { grid-template-columns: auto 1fr; gap: var(--s-6); } .tiles { justify-self: end; grid-template-columns: repeat(5, 120px); } }

.site-footer__main { background: var(--page-3); padding-top: clamp(48px, 6vw, 88px); }
.site-footer__top { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); }
.site-footer__title { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-2); }
.site-footer__brand p { color: var(--ink-2); max-width: 40ch; }
.site-footer__tag { color: var(--navy) !important; font-weight: 600; margin-bottom: 8px; }
.site-footer__col ul { display: grid; gap: 2px; }
.site-footer__col li > * { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; overflow-wrap: anywhere; letter-spacing: 0.04em; }
.site-footer__col a:hover { color: var(--blue-ink); }
.site-footer__col .icon { color: var(--navy); width: 16px; height: 16px; }
.site-footer__disclaimer { border-top: 1px solid var(--line-strong); padding-block: var(--s-4); display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.7; }
.site-footer__disclaimer p { max-width: none; }
.site-footer__disclaimer strong { color: var(--navy); font-weight: 600; }
.site-footer__bottom { background: var(--navy); color: var(--on-dark); font-size: var(--fs-xs); }
.site-footer__bottom .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px var(--s-3); padding-block: 14px; text-align: center; }
.site-footer__bottom ul { display: flex; gap: var(--s-3); }
.site-footer__bottom a { display: inline-flex; min-height: 32px; align-items: center; color: var(--on-dark-2); }
.site-footer__bottom a:hover { color: #fff; }
@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom .container { justify-content: space-between; text-align: left; }
}
/* wide: brand column flexes, link columns hug their content, last column ends on the container edge */
@media (min-width: 1100px) { .site-footer__top { grid-template-columns: minmax(0, 42ch) auto auto auto; justify-content: space-between; gap: var(--s-5) clamp(32px, 4vw, 72px); } }

/* 404 */
.notfound { min-height: 60vh; display: grid; align-content: center; gap: var(--s-4); }

/* ---------- motion helpers (JS adds states; content is visible without JS) ---------- */
.js .split-line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

@media (max-width: 639px) { .chips li:last-child { grid-column: 1 / -1; } }

/* contact: details heading sits on the same line as the form heading inside its card */
.contact__title { margin-bottom: var(--s-3); }
/* desktop: headings share a line; detail cards grow a little so both columns end together */
@media (min-width: 1024px) {
  .contact { align-items: stretch; }
  .contact > :first-child { padding-top: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; }
  .contact .details { flex: 1; display: flex; flex-direction: column; gap: 12px; }
  .contact .detail { flex: 1 0 auto; align-items: start; }
}