/* ─────────────────────────────────────────────
   ANSA Parking Consultants — site styles
   Cinzel display · Public Sans body
   ───────────────────────────────────────────── */

/* ─────────────────  FONTS (self-hosted in assets/fonts)  ───────────────── */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("assets/fonts/Cinzel-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("assets/fonts/Cinzel-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("assets/fonts/Cinzel-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("assets/fonts/Cinzel-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("assets/fonts/PublicSans-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("assets/fonts/PublicSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("assets/fonts/PublicSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("assets/fonts/PublicSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("assets/fonts/PublicSans-Bold.ttf") format("truetype");
}

:root {
  --teal-900: #0a4346;
  --teal-700: #11676a;
  --teal-500: #1cabb0;
  --teal-300: #8ed4d6;
  --teal-100: #d8eeef;
  --teal-050: #ecf6f6;

  --ink: #11272a;
  --ink-2: #41595c;
  --ink-3: #6c8588;

  --paper: #ffffff;
  --cream: #faf6ee;
  --bone:  #f3ece0;
  --line:  rgba(17,103,106,.18);
  --line-soft: rgba(17,103,106,.10);

  --radius-tile: 14px;
  --radius-pill: 999px;
  --radius-btn:  6px;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1280px;

  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Theme: bone (alt cream) */
body[data-theme="bone"]   { --paper: #ffffff; --cream: #f3ece0; }
/* Theme: ivory (cleaner) */
body[data-theme="ivory"]  { --paper: #ffffff; --cream: #ffffff; }


/* ─────────────────  RESET  ───────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 500; }
p { margin: 0; }
dl, dt, dd { margin: 0; }

/* ─────────────────  PRIMITIVES  ───────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.eyebrow__dot {
  width: 7px; height: 7px;
  background: var(--teal-500);
  border-radius: 1px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 28px;
}
.section-label__rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--teal-500);
}
.section-label--light { color: var(--teal-100); }
.section-label--light .section-label__rule { background: var(--teal-300); }
.section-label__square {
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--teal-700);
  border-radius: 2px;
}
.section-label--light .section-label__square { background: var(--teal-300); }

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 22px 0 28px;
  text-wrap: balance;
}
.display__accent {
  display: block;
  color: var(--teal-700);
  font-weight: 400;
  font-family: "Cormorant Garamond", "Cinzel", serif;
  font-size: 0.92em;
  letter-spacing: -0.01em;
  margin-top: 8px;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.002em;
  color: var(--ink);
  text-wrap: balance;
}
.h2--light { color: #f4ece0; }

.lede {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 50ch;
}

.section-intro {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 17px;
  margin-top: 18px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(3px); }

.btn--solid {
  background: var(--teal-700);
  color: #fff;
  border: 1px solid var(--teal-700);
}
.btn--solid:hover { background: var(--teal-900); border-color: var(--teal-900); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--teal-700); color: var(--teal-700); }

.btn--text {
  background: transparent;
  border: 1px solid transparent;
  padding: 13px 14px;
  color: var(--teal-700);
  font-weight: 600;
}
.btn--text:hover { color: var(--teal-900); }

.btn--onDark { color: #fff; }
.btn--onDark.btn--ghost { border-color: rgba(255,255,255,.28); }
.btn--onDark.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--onDark.btn--solid { background: var(--teal-500); border-color: var(--teal-500); color: var(--teal-900); }
.btn--onDark.btn--solid:hover { background: #fff; border-color: #fff; }


/* ─────────────────  TOP BAR  ───────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 14px var(--gutter);
  background: color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  justify-self: start;
}
.brand img {
  height: 76px;
  width: auto;
}
.nav {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.nav a {
  position: relative;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18.75px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  transition: color .15s ease;
}
.nav a:hover { color: var(--teal-700); }
.nav a[aria-current="page"] { color: var(--teal-700); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 2px;
  background: var(--teal-500);
}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint below */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  justify-self: end;
}
.nav-toggle__bar {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ink-2);
  transition: top .2s ease, transform .2s ease, opacity .2s ease, background .15s ease;
}
.nav-toggle:hover .nav-toggle__bar { background: var(--teal-700); }
.nav-toggle__bar:nth-child(1) { top: 15px; }
.nav-toggle__bar:nth-child(2) { top: 21px; }
.nav-toggle__bar:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}


/* ─────────────────  HERO  ───────────────── */

.hero {
  position: relative;
  padding: clamp(40px, 7vw, 88px) var(--gutter) 0;
  overflow: hidden;
}
.hero::before { /* subtle texture grid */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(28,171,176,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(17,103,106,.06), transparent 65%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding-bottom: clamp(48px, 6vw, 96px);
}
.hero__copy { max-width: 56ch; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero__meta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  max-width: 540px;
}
.hero__meta dt {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.hero__meta dd {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--teal-700);
}

/* Tile motif */
.hero__mark {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.tilegroup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  width: min(440px, 100%);
  aspect-ratio: 1 / 1.05;
}
.tile {
  border-radius: var(--radius-tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(10,67,70,.55);
}
.tile--dark  { background: var(--teal-700); }
.tile--light { background: var(--teal-500); }
.tile::after { /* faint paper grain */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(0deg, rgba(0,0,0,.10), transparent 35%);
  pointer-events: none;
}
.tile span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(64px, 8vw, 110px);
  line-height: 1;
}
.tile em {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.tilegroup__caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Marquee */
.marquee {
  position: relative;
  margin: 0 calc(var(--gutter) * -1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: color-mix(in oklab, var(--paper) 92%, var(--teal-050));
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 18px 0;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.marquee__track i {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--teal-500);
  border-radius: 1px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ─────────────────  POSITIONING  ───────────────── */

.positioning {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.positioning__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: left;
}
.positioning__statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.002em;
  color: var(--ink);
  text-align: left;
  margin: 0;
  max-width: 48ch;
}
.positioning__signature {
  margin-top: 36px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-700);
}


/* ─────────────────  SECTION HEADS  ───────────────── */

.section-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section-head--center {
  text-align: center;
}
.section-head--center .section-label {
  justify-content: center;
}
.section-head--row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}


/* ─────────────────  SERVICES  ───────────────── */

.services {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--cream);
}
.service-grid {
  max-width: var(--maxw);
  margin: 56px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service {
  background: var(--paper);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background .25s ease;
}
.service:hover { background: color-mix(in oklab, var(--paper) 92%, var(--teal-050)); }
.service--accent { background: var(--teal-050); }
.service--accent:hover { background: color-mix(in oklab, var(--teal-050) 70%, var(--teal-100)); }
.service__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--teal-500);
}
.service__icon {
  width: 36px;
  height: 36px;
  color: var(--teal-500);
  margin-bottom: 2px;
}
.service__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.service__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.service__body {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.service__list {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 6px;
}
.service__list li {
  font-size: 13px;
  color: var(--teal-700);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.service__list li::before {
  content: "—";
  color: var(--teal-500);
  margin-right: 10px;
}


/* ─────────────────  SECTORS  ───────────────── */

.sectors {
  background: var(--teal-900);
  color: #f4ece0;
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.sectors::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(28,171,176,.15), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(28,171,176,.10), transparent 60%);
  pointer-events: none;
}
.sectors__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sectors__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.sector-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}
.sector {
  padding-top: 24px;
  border-top: 1px solid rgba(244,236,224,.18);
  transition: border-color .25s ease;
}
.sector:hover { border-top-color: var(--teal-500); }
.sector__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--teal-300);
}
.sector__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 12px;
}
.sector p {
  font-size: 15px;
  color: rgba(244,236,224,.78);
  line-height: 1.55;
  max-width: 38ch;
}


/* ─────────────────  APPROACH  ───────────────── */

.approach {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--paper);
}
.approach__steps {
  max-width: var(--maxw);
  margin: 56px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.approach__steps li {
  position: relative;
}
.approach__roman {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--teal-500);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.approach__steps h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.approach__steps p {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.6;
}


/* ─────────────────  STATS  ───────────────── */

.stats {
  padding: clamp(60px, 8vw, 110px) var(--gutter);
  background: var(--cream);
}
.stats__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  align-items: end;
}
.stat {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  color: var(--teal-700);
  letter-spacing: -0.01em;
}
.stat__num sup,
.stat__num small {
  font-size: 0.45em;
  vertical-align: baseline;
  color: var(--teal-500);
  margin-left: 2px;
  font-weight: 500;
}
.stat__cap {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  line-height: 1.45;
  text-transform: none;
}


/* ─────────────────  INSIGHTS  ───────────────── */

.insights {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--paper);
}
.insight-grid {
  max-width: var(--maxw);
  margin: 56px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.insight {
  display: flex;
  flex-direction: column;
  gap: 18px;
  cursor: pointer;
  transition: transform .25s ease;
}
.insight:hover { transform: translateY(-2px); }
.insight__art {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
}
.insight__art--a {
  background:
    linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 100%);
}
.insight__art--b {
  background:
    radial-gradient(circle at 30% 30%, var(--teal-500) 0%, var(--teal-700) 60%, var(--teal-900) 100%);
}
.insight__art--c {
  background:
    linear-gradient(180deg, var(--teal-900) 0%, var(--teal-700) 100%);
}
.insight__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px);
  pointer-events: none;
}
.insight__art-glyph {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 54px;
  color: rgba(255,255,255,.88);
  line-height: 1;
  letter-spacing: 0.02em;
}
.insight__art-icon {
  position: relative;
  width: 54px;
  height: 54px;
  color: rgba(255,255,255,.92);
}
.insight__art-icon svg { width: 100%; height: 100%; display: block; }
.insight--feature .insight__art-icon { width: 68px; height: 68px; }
.insight__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.insight__meta i {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--teal-300);
  border-radius: 1px;
}
.insight__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: 0.002em;
  max-width: 28ch;
}
.insight:hover .insight__title { color: var(--teal-700); }
.insight__by {
  font-size: 13px;
  color: var(--ink-3);
}


/* ─────────────────  CTA  ───────────────── */

.cta {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--teal-700);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 110% 110%, rgba(28,171,176,.40), transparent 60%),
    radial-gradient(500px 320px at -10% -10%, rgba(10,67,70,.6), transparent 60%);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.cta__head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.cta__head em {
  font-style: normal;
  font-family: "Cormorant Garamond", "Cinzel", serif;
  font-weight: 400;
  color: var(--teal-300);
  font-size: 0.92em;
}
.cta__actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta__note {
  margin-top: 28px;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  letter-spacing: 0.02em;
}
.cta__note a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4);
}
.cta__note a:hover { color: var(--teal-300); border-color: var(--teal-300); }


/* ─────────────────  FOOTER  ───────────────── */

.footer {
  background: #0a2f31;
  color: rgba(244,236,224,.78);
  padding: clamp(56px, 6vw, 96px) var(--gutter) 24px;
}
.footer__top {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(244,236,224,.12);
}
.footer__logo {
  height: 56px;
  width: auto;
  filter: brightness(1) contrast(1);
  margin-bottom: 24px;
}
.footer__brand p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244,236,224,.66);
  max-width: 38ch;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer__col h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-300);
  margin-bottom: 18px;
}
.footer__col ul { display: grid; gap: 10px; }
.footer__col a {
  font-size: 14px;
  color: rgba(244,236,224,.8);
  transition: color .15s ease;
}
.footer__col a:hover { color: #fff; }
.footer__col li {
  font-size: 14px;
  color: rgba(244,236,224,.6);
  line-height: 1.5;
}

.footer__base {
  max-width: var(--maxw);
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
}
.footer__base small,
.footer__base a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(244,236,224,.5);
}
.footer__base a:hover { color: #fff; }


/* ─────────────────  TWEAKS PANEL  ───────────────── */

#tweaks-toggle {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--teal-700);
  cursor: pointer;
  display: none; /* shown only when host activates */
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px -10px rgba(10,67,70,.35);
}
#tweaks-panel {
  position: fixed;
  bottom: 78px;
  right: 22px;
  z-index: 90;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(10,67,70,.4);
  padding: 18px;
  display: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}
#tweaks-panel.is-open { display: block; }
#tweaks-panel h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 12px;
}
#tweaks-panel .tweak-group { margin-bottom: 14px; }
#tweaks-panel .tweak-group:last-child { margin-bottom: 0; }
#tweaks-panel label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
#tweaks-panel .seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--cream);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
}
#tweaks-panel .seg button {
  background: transparent;
  border: 0;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-2);
}
#tweaks-panel .seg button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--teal-700);
  box-shadow: 0 1px 3px rgba(10,67,70,.1);
}
#tweaks-panel .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
}


/* ─────────────────  RESPONSIVE  ───────────────── */

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 16px var(--gutter);
    background: var(--cream);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 8px 24px rgba(17, 39, 42, .06);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px; text-align: center; }
  .nav a[aria-current="page"]::after { left: 50%; right: 50%; }
  .topbar { grid-template-columns: auto 1fr auto; }

  .hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .hero__mark { order: 2; }
  .tilegroup { width: min(380px, 100%); margin: 0 auto; }

  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-list  { grid-template-columns: repeat(2, 1fr); }
  .sectors__head { grid-template-columns: 1fr; }
  .approach__steps { grid-template-columns: 1fr; gap: 32px; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .insight-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hero__meta { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .sector-list { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}


/* ─────────────────  PAGE HERO (interior pages)  ───────────────── */

.page-hero {
  position: relative;
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(56px, 7vw, 96px);
  overflow: hidden;
  background: var(--cream);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1150px 560px at 95% -12%, rgba(28,171,176,.28), transparent 58%),
    radial-gradient(800px 420px at 0% 110%, rgba(17,103,106,.08), transparent 65%);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.page-hero__copy { max-width: 60ch; }
.page-hero__lede {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}
.page-hero__aside {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-700);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.page-hero__aside strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.002em;
  color: var(--ink);
  text-transform: none;
  margin-top: 8px;
}

@media (max-width: 1000px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: 32px; }
}


/* ─────────────────  SERVICES GROUPS (services page)  ───────────────── */

.services--alt   { background: var(--paper); }
.services--cream { background: var(--cream); }

.service-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-grid--1 {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.services__cta {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
}

@media (max-width: 1000px) {
  .service-grid--2 { grid-template-columns: 1fr; }
}


/* ─────────────────  ABOUT PAGE — PARTNERS  ───────────────── */

.partners {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--paper);
}
.partners__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.partners__label {
  margin: 0 0 40px;
}

.partner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr);
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.partner:last-child {
  padding-bottom: 0;
}

.partner--alt {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
}
.partner--alt .partner__portrait { order: 2; }
.partner--alt .partner__details  { order: 1; }

.partner__portrait {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 100%);
}
.partner__portrait--b {
  background: radial-gradient(circle at 30% 30%, var(--teal-500) 0%, var(--teal-700) 60%, var(--teal-900) 100%);
}
.partner__portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px);
  pointer-events: none;
}
.partner__initials {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 54px;
  color: rgba(255,255,255,.88);
  line-height: 1;
  letter-spacing: 0.04em;
  position: relative;
}

.partner__portrait--photo {
  background: none;
  padding: 0;
}
.partner__portrait--photo::before { display: none; }
.partner__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.partner__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
}
.partner__role {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 28px;
}
.partner__bio {
  max-width: 64ch;
  display: grid;
  gap: 16px;
}
.partner__bio p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
}

@media (max-width: 1000px) {
  .partner,
  .partner--alt {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .partner--alt .partner__portrait { order: 1; }
  .partner--alt .partner__details  { order: 2; }
  .partner__portrait { max-width: 360px; }
}


/* ─────────────────  ABOUT PAGE — VALUES BAND  ───────────────── */

.values-band {
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  background: var(--cream);
  border-top: 1px solid var(--line-soft);
}
.values-band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.values-band .section-label {
  margin: 0 0 32px;
}
.values-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 48px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ink);
  letter-spacing: 0.01em;
}
.values-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.values-list__letter {
  font-size: 1.4em;
  line-height: 1;
  color: var(--teal-500);
}


/* ─────────────────  ARTICLE (insight detail page)  ───────────────── */

.article-hero {
  position: relative;
  padding: clamp(44px, 6vw, 84px) var(--gutter) clamp(28px, 4vw, 44px);
  background: var(--cream);
  overflow: hidden;
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1150px 560px at 95% -12%, rgba(28,171,176,.28), transparent 58%),
    radial-gradient(800px 420px at 0% 110%, rgba(17,103,106,.08), transparent 65%);
  pointer-events: none;
}
.article-hero__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.article-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 22px 0 26px;
  text-wrap: balance;
}
.article-hero__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.article-hero__byline strong {
  color: var(--ink-2);
  font-weight: 600;
}
.article-hero__byline i {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--teal-300);
  border-radius: 1px;
}

.article {
  padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(72px, 9vw, 120px);
  background: var(--paper);
}
.article__inner {
  max-width: 760px;
  margin: 0 auto;
}
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 40px;
}
.article__back svg { transition: transform .25s ease; }
.article__back:hover { color: var(--teal-900); }
.article__back:hover svg { transform: translateX(-3px); }

.article__body > * + * { margin-top: 22px; }
.article__body p {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.article__body strong { color: var(--ink); font-weight: 600; }

.article__quote {
  margin: 32px 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--teal-500);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--ink);
}
.article__quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
}

.article__list {
  display: grid;
  gap: 12px;
  margin: 8px 0;
}
.article__list li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}
.article__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px; height: 7px;
  background: var(--teal-500);
  border-radius: 1px;
}


/* ─────────────────  CONTENT TIERS (insights vs in-depth)  ───────────────── */

/* Type pill — sits in the card meta row and the article kicker */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.tag--insight { background: var(--teal-100); color: var(--teal-700); }
.tag--depth   { background: var(--teal-700); color: #fff; }
.tag--listen  { background: var(--teal-500); color: var(--teal-900); }

/* Listen card — holds an embedded player, so no link/hover behaviour */
.insight--listen { cursor: default; }
.insight--listen:hover { transform: none; }
/* Fill the column rather than sizing by aspect-ratio (card is tall with the player) */
.insight--listen .insight__art { aspect-ratio: auto; width: 100%; height: 100%; min-height: 240px; }
.insight__player { margin-top: 4px; max-width: 540px; }
.insight__player iframe { display: block; width: 100%; border: 0; border-radius: 12px; }
.insight__by a { color: var(--teal-700); font-weight: 600; }
.insight__by a:hover { color: var(--teal-900); }

/* Let the meta row wrap gracefully once a pill + read-time are added */
.insight__meta { flex-wrap: wrap; row-gap: 8px; }

/* Two labelled bands on the insights page */
.insight-band + .insight-band { margin-top: clamp(64px, 8vw, 110px); }
.insight-band__head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.insight-band__head .section-label { margin: 0 0 10px; }
.insight-band__intro {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}

/* Featured in-depth card — horizontal, full width, heavier */
.insight-grid--feature {
  grid-template-columns: 1fr;
  margin-top: 36px;
}
.insight--feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.insight--feature .insight__art {
  aspect-ratio: 16 / 10;
  height: 100%;
}
.insight--feature .insight__art-glyph { font-size: 72px; }
.insight__feature-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.insight--feature .insight__title {
  font-size: clamp(26px, 3vw, 38px);
  max-width: 20ch;
}
.insight__excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 54ch;
}

@media (max-width: 1000px) {
  .insight--feature { grid-template-columns: 1fr; gap: 24px; }
  .insight--feature .insight__art { aspect-ratio: 4 / 3; }
}


/* ─────────────────  CONTACT PAGE  ───────────────── */

.contact {
  padding: clamp(72px, 9vw, 130px) 0;
  background: var(--paper);
}
.contact__grid {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.contact-card {
  background: var(--paper);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-card__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-card__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
}
.contact-card__value a { color: var(--teal-700); }
.contact-card__value a:hover { color: var(--teal-900); }
.contact-card__note {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-top: auto;
}
.contact-card__tbc {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
  background: var(--teal-050);
  border: 1px solid var(--line-soft);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}
.contact__legal {
  max-width: var(--maxw);
  margin: 28px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

@media (max-width: 760px) {
  .contact__grid { grid-template-columns: 1fr; }
}


/* ─────────────────  CONTACT FORM  ───────────────── */

.contact-form {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.form {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 0 var(--gutter);
}
.form__fields {
  max-width: 640px;
  display: grid;
  gap: 20px;
}
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field__opt { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-050);
}
.field textarea { resize: vertical; min-height: 140px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.form__status { font-size: 14px; line-height: 1.4; margin: 0; }
.form__status.is-ok { color: var(--teal-700); }
.form__status.is-error { color: #b23b3b; }
.form__status.is-pending { color: var(--ink-3); }
.form__status a { color: inherit; text-decoration: underline; }
.form__note { font-size: 13px; color: var(--ink-3); margin: 0; }
.form__note a { color: var(--teal-700); border-bottom: 1px solid var(--line); }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}