/* =========================================================
   Peloric Group stylesheet
   Refactored from the live working CSS without visual redesign.
   Structure:
   01. Tokens and base
   02. Layout shell
   03. Header, navigation and waypoint rail
   04. Hero system
   05. Typography, buttons and common components
   06. Section, list and grid systems
   07. Reading and Markdown content
   08. Homepage-specific layout
   09. Detail, article and insight layouts
   10. Contact, about and CTA blocks
   11. Footer
   12. Mobile and responsive behaviour
   13. Motion and accessibility
   ========================================================= */

/* =========================================================
   01. Tokens and base
   ========================================================= */

:root {
  --bg: #04070c;
  --surface: #09111a;
  --surface-2: #0d1722;
  --line: #1a2b3e;
  --line-2: #29435c;
  --line-faint: rgba(255,255,255,.08);
  --text: #f4f7fb;
  --muted: #c7d2df;
  --soft: #9fb1c4;
  --accent: #f2c46d;
  --cyan: #7ce7ff;
  --blue: #6eb8ff;

  --max: 1240px;
  --measure: 70ch;
  --radius: 28px;

  --space-1: .5rem;
  --space-2: .875rem;
  --space-3: 1.25rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --easing: cubic-bezier(.4,0,.2,1);
  --motion-quick: 180ms var(--easing);
  --motion-standard: 280ms var(--easing);
  --hover-shift: 4px;
  --focus-ring: 2px solid var(--accent);

  --layout-site-max: var(--max);
  --layout-section-max: 1160px;
  --layout-editorial-max: 920px;
  --measure-reading: 100ch;
  --measure-reading-narrow: 42rem;
  --measure-lead: 42rem;
  --measure-heading: 44rem;
  --measure-heading-tight: 30rem;

  /* Compatibility aliases used by a few late-stage components. */
  --ot-primary: var(--bg);
  --ot-text: var(--text);
  --ot-text-muted: var(--soft);
  --ot-accent: var(--accent);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(124,231,255,.10), transparent 0 22%),
    radial-gradient(circle at 82% 14%, rgba(242,196,109,.08), transparent 0 18%),
    linear-gradient(180deg, #07111c 0%, var(--bg) 25%, var(--bg) 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--accent); }

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: .75rem 1rem;
  background: #fff;
  color: #000;
  border-radius: 12px;
}

/* =========================================================
   02. Layout shell
   ========================================================= */

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: .06;
  mask-image: radial-gradient(circle at center, black 45%, transparent 95%);
}

.container {
  width: min(var(--max), calc(100% - 2rem));
  margin-inline: auto;
}

@media (min-width: 1100px) {
  .container {
    width: min(var(--max), calc(100% - 8rem));
    margin-left: max(7.5rem, calc((100vw - var(--max))/2 + 4.5rem));
    margin-right: auto;
  }
}

/* =========================================================
   03. Header, navigation and waypoint rail
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(4,7,12,.92), rgba(4,7,12,.68));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 80px;
}

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

.brand-logo {
  width: clamp(170px, 15vw, 238px);
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 1.1rem;
}

.site-nav a {
  position: relative;
  padding-block: .4rem;
  color: var(--muted);
  font-size: .76rem;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .05rem;
  height: 1px;
  background: var(--accent);
  opacity: .9;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-standard), opacity var(--motion-standard);
}

.site-nav a.active,
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--text); }
.site-nav a.active::after,
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

.nav-toggle {
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(242,196,109,.65);
  background: transparent;
  color: var(--text);
  padding: .65rem 0 .45rem;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.mobile-nav { display: none; }

@media (min-width: 980px) {
  .nav-toggle,
  .mobile-nav { display: none !important; }
  .site-nav { display: flex; }
}

.waypoint-rail {
  position: fixed;
  left: clamp(.75rem, 2vw, 2rem);
  top: 5rem;
  bottom: 1.75rem;
  z-index: 20;
  display: none;
  width: 136px;
}

@media (min-width: 1100px) {
  .waypoint-rail { display: block; }
}

.waypoint-rail::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(242,196,109,.55), rgba(255,255,255,.12) 22%, rgba(255,255,255,.06) 100%);
}

.waypoint-rail ul {
  list-style: none;
  margin: 0;
  padding: 7rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: stretch;
}

.waypoint-rail a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  width: 100%;
  padding-left: 2.2rem;
  color: var(--soft);
  font-size: .66rem;
  letter-spacing: .18em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.waypoint-dot {
  position: absolute;
  left: 16px;
  top: .2rem;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(4,7,12,.92);
  box-shadow: 0 0 0 6px rgba(4,7,12,.45);
}

.waypoint-rail a[aria-current="page"] .waypoint-dot {
  border-color: var(--accent);
  background: radial-gradient(circle, rgba(242,196,109,.42), rgba(4,7,12,1) 70%);
}

.waypoint-rail .waypoint-main,
.waypoint-rail .waypoint-children { width: 100%; }

.waypoint-rail .waypoint-children {
  position: relative;
  display: none;
  gap: .7rem;
  list-style: none;
  margin: .7rem 0 0;
  padding: .1rem 0 0;
}

.waypoint-rail .waypoint-main.is-expanded .waypoint-children,
.waypoint-rail .waypoint-main:focus-within .waypoint-children { display: grid; }

.waypoint-rail .waypoint-children::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(242,196,109,.45), rgba(255,255,255,.1));
}

.waypoint-sub a {
  width: 100%;
  padding-left: 2.2rem;
  align-items: flex-start;
  gap: .2rem;
  color: var(--soft);
  font-size: .56rem;
  letter-spacing: .15em;
  text-align: left;
}

.waypoint-sub a span:first-child {
  color: rgba(255,255,255,.42);
  font-size: .62rem;
  letter-spacing: -.02em;
}

.waypoint-sub a:hover,
.waypoint-sub a[aria-current="location"] { color: var(--text); }
.waypoint-sub a[aria-current="location"] span:first-child { color: var(--accent); }
[data-subwaypoint] { scroll-margin-top: 7.5rem; }

/* =========================================================
   04. Hero system
   ========================================================= */

.hero {
  --hero-chart: url("../img/chart3_without.svg");
  --hero-chart-opacity: .18;
  --hero-chart-position: center center;
  --hero-chart-size: cover;

  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(680px, 92vh, 940px);
  padding: 6rem 0 4rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 18%, rgba(124,231,255,.09), transparent 0 24%),
    radial-gradient(circle at 12% 72%, rgba(242,196,109,.055), transparent 0 28%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--hero-chart);
  background-repeat: no-repeat;
  background-position: var(--hero-chart-position);
  background-size: var(--hero-chart-size);
  opacity: var(--hero-chart-opacity);
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 0%, black 11%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 11%, black 88%, transparent 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 70% 34%, rgba(124,231,255,.07), transparent 60%),
    radial-gradient(700px 420px at 18% 62%, rgba(242,196,109,.045), transparent 66%),
    linear-gradient(180deg, rgba(4,7,12,0) 0%, rgba(4,7,12,.36) 100%);
}

#home { --hero-chart: url("../img/chart1.svg"); --hero-chart-opacity: .48; --hero-chart-position: center center; }
#services-hub { --hero-chart: url("../img/chart1_without.svg"); --hero-chart-opacity: .34; --hero-chart-position: center center; }
#sectors-hub { --hero-chart: url("../img/chart2_without.svg"); --hero-chart-opacity: .35; --hero-chart-position: center center; }
#service-detail { --hero-chart: url("../img/chart3_without.svg"); --hero-chart-opacity: .21; --hero-chart-position: 58% 42%; }
#sector-detail { --hero-chart: url("../img/chart3.svg"); --hero-chart-opacity: .21; --hero-chart-position: 58% 42%; }
#insights { --hero-chart: url("../img/chart2_without.svg"); --hero-chart-opacity: .14; --hero-chart-position: center center; }
#insight-article { --hero-chart: url("../img/chart3_without.svg"); --hero-chart-opacity: .09; }
#about { --hero-chart: url("../img/chart1_without.svg"); --hero-chart-opacity: .15; }
#contact,
#legal { --hero-chart: url("../img/chart3_without.svg"); --hero-chart-opacity: .055; }

.hero#sector-detail::after,
.hero#service-detail::after {
  background:
    radial-gradient(820px 520px at 42% 42%, rgba(124,231,255,.075), transparent 66%),
    radial-gradient(620px 420px at 72% 30%, rgba(242,196,109,.038), transparent 64%),
    linear-gradient(180deg, rgba(4,7,12,.02) 0%, rgba(4,7,12,.46) 100%);
}

.hero-grid {
  display: block;
  max-width: min(1500px, 100%);
}

.hero.compact {
  min-height: clamp(600px, 68vh, 780px);
  padding-top: clamp(7rem, 12vh, 9rem);
  padding-bottom: clamp(5.25rem, 8vh, 7rem);
}

.hero.minimal {
  min-height: clamp(500px, 60vh, 680px);
  align-items: center;
  padding-top: clamp(5.5rem, 8vw, 8rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

.hero.minimal .hero-grid {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}

.hero h1 {
  max-width: 18ch;
  font-size: clamp(3.6rem, 7.2vw, 8rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
}

.hero.compact h1,
.hero.minimal h1,
.hero#service-detail h1,
.hero#sector-detail h1 {
  max-width: 27ch;
  font-size: clamp(2.75rem, 4.8vw, 5.4rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
}

.hero#services-hub h1,
.hero#sectors-hub h1 { max-width: 26ch; }
.hero#insights h1 { max-width: 30ch; line-height: 1.12; }
.hero#about h1,
.hero#contact h1,
.hero#legal h1 { max-width: 24ch; }
.hero#insight-article h1 { max-width: 27ch; line-height: 1.11; }

.hero p.lead {
  max-width: var(--measure-lead);
  margin: 1.8rem 0 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.35vw, 1.34rem);
  line-height: 1.68;
}

.hero.compact p.lead,
.hero.minimal p.lead {
  max-width: var(--measure-lead);
  margin-top: 1.45rem;
}

.hero-visual { display: none !important; }

@media (min-width: 980px) {
  .hero.minimal .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr); }
}

.hero.minimal .hero-visual {
  display: grid;
  place-items: center;
  min-height: clamp(260px, 36vh, 420px) !important;
  opacity: .52;
}

.hero.minimal .hero-visual img {
  max-width: min(360px, 78%);
  opacity: .38;
  filter: saturate(.85) contrast(1.08);
}

.home-hero {
  align-items: center;
  min-height: clamp(720px, 92vh, 980px);
  padding-top: 5.5rem;
  padding-bottom: 4.5rem;
}

.home-hero::after {
  background:
    radial-gradient(980px 560px at 43% 42%, rgba(124,231,255,.115), transparent 62%),
    radial-gradient(720px 430px at 27% 62%, rgba(242,196,109,.035), transparent 64%),
    linear-gradient(180deg, rgba(4,7,12,0) 0%, rgba(4,7,12,.38) 100%);
}

.home-hero .hero-grid { max-width: min(1380px, 100%); }
.home-hero .reveal:first-child { position: relative; max-width: 1250px; padding-left: 0; }
.home-hero h1 { max-width: 20ch; font-size: clamp(4rem, 6.2vw, 7.25rem); line-height: 1.08; letter-spacing: -0.008em; }
.home-hero p.lead { max-width: var(--measure-lead); margin-top: 2.1rem; }
.home-hero .surface-rule { display: none; }

/* =========================================================
   05. Typography, buttons and common components
   ========================================================= */

.eyebrow {
  color: var(--accent);
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.kicker {
  color: var(--accent);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.subtle { color: var(--soft); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.home-hero .hero-actions {
  gap: clamp(1.75rem, 3vw, 3rem);
  margin-top: 1.55rem;
}

.btn,
.text-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: auto;
  padding: 0 0 .28rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.25;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(0);
}

.btn::after,
.text-btn::after {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: var(--accent);
  opacity: .95;
  transition: width .25s var(--easing), opacity .25s var(--easing), background var(--motion-standard);
}

.btn::before,
.text-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(1.8rem + .85rem);
  bottom: 0;
  height: 1px;
  background: rgba(255,255,255,.16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--easing);
}

.btn:hover,
.btn:focus-visible,
.text-btn:hover,
.text-btn:focus-visible {
  color: var(--text);
  transform: translateX(var(--hover-shift));
}

.btn:hover::after,
.btn:focus-visible::after,
.text-btn:hover::after,
.text-btn:focus-visible::after {
  width: 3rem;
  background: var(--accent);
}

.btn:hover::before,
.btn:focus-visible::before,
.text-btn:hover::before,
.text-btn:focus-visible::before { transform: scaleX(1); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  background: transparent;
}

.meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  margin: 1rem 0 2rem;
  color: var(--soft);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.1rem;
  margin-top: .9rem;
  color: var(--soft);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.surface-rule {
  width: 100%;
  height: 1px;
  margin: 1.6rem 0 0;
  background: linear-gradient(90deg, rgba(242,196,109,.7), rgba(255,255,255,.08) 30%, transparent);
}

/* =========================================================
   06. Section, list and grid systems
   ========================================================= */

.section { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.section.compact { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }

.section-title {
  max-width: var(--measure-heading-tight);
  font-size: clamp(2rem, 2.8vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.section-intro {
  max-width: var(--measure-lead);
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.8;
}

.section-heading-row {
  display: grid;
  align-items: end;
  gap: 1.5rem;
}

.section-heading-copy { min-width: 0; }

.section-hub-link {
  justify-self: start;
  margin-top: .25rem;
  white-space: nowrap;
}

@media (min-width: 860px) {
  .section-heading-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 6rem);
  }

  .section-hub-link {
    justify-self: end;
    align-self: start;
    margin-top: 2.15rem;
  }

  .about-heading .section-hub-link { margin-top: 2.05rem; }
}

.index-list {
  margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.index-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transform: translateX(0);
}

.index-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.18) 48%, transparent 100%);
  opacity: .95;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-standard);
}

@media (min-width: 880px) {
  .index-row {
    grid-template-columns: 6.5rem minmax(14rem, 18rem) minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.index-num {
  color: rgba(255,255,255,.35);
  font-size: 1.9rem;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.index-row h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.index-row p {
  max-width: var(--measure-reading-narrow);
  margin: 0;
  color: var(--muted);
  line-height: 1.82;
}

.index-row:hover,
.index-row:focus-visible { transform: translateX(var(--hover-shift)); }
.index-row:hover::after,
.index-row:focus-visible::after { transform: scaleX(1); }
.index-row:hover h3,
.index-row:focus-visible h3 { color: var(--text); }
.index-row:hover .index-num,
.index-row:focus-visible .index-num { color: var(--accent); }

.grid-2,
.grid-3 {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (min-width: 980px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

.statement-stack {
  display: grid;
  gap: 2.2rem;
  margin-top: 3rem;
}

.statement-stack article { max-width: var(--measure-reading-narrow); }
.statement-stack h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
.statement-stack p { margin: .75rem 0 0; color: var(--muted); }

.feature-panel {
  margin-top: 2.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
}

.feature-panel h3 { font-size: 1.65rem; }

.feature-grid {
  display: grid;
  gap: .85rem;
  margin-top: 1.2rem;
}

.feature-grid span {
  display: block;
  padding: .8rem .95rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  color: var(--muted);
}

@media (min-width: 700px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.centered {
  display: block;
  text-align: left;
}

.centered .reading { max-width: 52ch; }

.section.centered .reading {
  max-width: none;
  display: grid;
  gap: 1rem;
  align-items: end;
}

.section.centered .reading .eyebrow,
.section.centered .reading .section-title,
.section.centered .reading .section-intro { grid-column: 1; }

.section.centered .reading .hero-actions {
  justify-content: flex-start;
  margin-top: .5rem;
}

@media (min-width: 980px) {
  .section.centered .reading {
    grid-template-columns: minmax(0, 1.1fr) auto;
    column-gap: 2.5rem;
  }

  .section.centered .reading .hero-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-content: flex-end;
    margin-top: 0;
  }
}

/* =========================================================
   07. Reading and Markdown content
   ========================================================= */

.reading {
  width: 100%;
  max-width: 100%;
}

.reading p,
.reading li {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.82;
}

.reading p { max-width: var(--measure-reading); }

.reading h2 {
  max-width: var(--measure-heading);
  margin: clamp(4.6rem, 7vw, 6rem) 0 clamp(1rem, 1.5vw, 1.35rem);
  font-size: clamp(2rem, 3vw, 3rem);
}

.reading h2:first-of-type { margin-top: 0; }
.reading h2 + p { margin-top: 0; }

.reading h3 {
  max-width: var(--measure-heading);
  margin: 2rem 0 .8rem;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.reading .meta-bar { margin-bottom: clamp(3rem, 5vw, 4.5rem); }

.reading ul,
.reading ol {
  max-width: var(--measure-reading);
  margin: 1.15rem 0 0;
  padding: 0;
  display: grid;
  gap: .72rem;
  list-style: none;
}

.reading li { margin: 0; color: var(--text); }

.reading li a {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  width: fit-content;
  padding-bottom: .16rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  text-decoration: none;
}

.reading li a::before {
  content: "";
  width: 1.35rem;
  height: 1px;
  background: var(--accent);
  opacity: .88;
  transition: width .24s var(--easing);
}

.reading li a:hover,
.reading li a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.reading li a:hover::before,
.reading li a:focus-visible::before { width: 2rem; }

.reading > .hero-actions {
  margin-top: clamp(3rem, 5vw, 4.5rem) !important;
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.09);
}

.reading.markdown-content,
.markdown-content.reading {
  width: 100%;
  max-width: 100%;
}

.markdown-content p,
.reading.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.reading.markdown-content ul,
.reading.markdown-content ol {
  max-width: var(--measure-reading);
}

.markdown-content h2,
.reading.markdown-content h2,
.markdown-content h3,
.reading.markdown-content h3 { max-width: var(--measure-heading); }

.markdown-content ul,
.markdown-content ol {
  display: block;
  margin: 1.15rem 0 1.6rem;
  padding-left: 1.35rem;
}

.markdown-content ul { list-style: disc; }
.markdown-content ol { list-style: decimal; }

.markdown-content li {
  display: list-item;
  margin: .45rem 0;
  color: var(--muted);
  line-height: 1.82;
}

.markdown-content li::marker { color: var(--accent); }

.markdown-content li a {
  display: inline;
  width: auto;
  gap: 0;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: var(--text);
  text-decoration: none;
}

.markdown-content li a::before { content: none; }
.markdown-content li a:hover,
.markdown-content li a:focus-visible { border-bottom-color: var(--accent); }

.markdown-reveal { will-change: opacity, transform; }

/* =========================================================
   08. Homepage-specific layout
   ========================================================= */

.homepage-flow {
  --home-editorial-width: var(--layout-editorial-max);
}

.homepage-flow .section-title { max-width: var(--measure-heading-tight); }

.homepage-flow .section-heading-row,
.homepage-flow .surface-rule,
.homepage-flow .index-list {
  width: 100%;
  max-width: var(--home-editorial-width);
}

.homepage-flow .section-hub-link { justify-self: start; }

@media (min-width: 860px) {
  .homepage-flow .section-heading-row { grid-template-columns: minmax(0, 1fr) auto; }
  .homepage-flow .section-hub-link { justify-self: end; }
}

.homepage-flow .index-row { width: 100%; }
.homepage-flow .index-row::after { left: 0; right: auto; width: 100%; }

@media (min-width: 880px) {
  .homepage-flow .index-row,
  .homepage-flow .article-list .index-row {
    grid-template-columns: 5.25rem minmax(14rem, 20rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.6vw, 2rem);
  }

  .homepage-flow .index-row h3,
  .homepage-flow .article-list .index-row h3 { max-width: 24rem; }

  .homepage-flow .index-row p,
  .homepage-flow .article-list .index-row p { max-width: var(--measure-reading-narrow); }
}

.homepage-flow .article-list { max-width: none; }
.homepage-flow .article-list .index-row::after,
.article-list .index-row::after { background: linear-gradient(90deg, rgba(242,196,109,.85), rgba(255,255,255,.14) 45%, transparent 100%); }

.homepage-flow .article-list .index-row h3 {
  font-size: clamp(1.45rem, 1.65vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
}

.homepage-flow .article-list .index-row p {
  color: var(--text);
  opacity: .84;
  line-height: 1.78;
}

.homepage-flow .article-list .index-row:hover p,
.homepage-flow .article-list .index-row:focus-visible p,
.article-list .index-row:hover p,
.article-list .index-row:focus-visible p { opacity: 1; }

.homepage-flow .about-band {
  width: 100%;
  max-width: var(--layout-section-max);
}

.homepage-flow .about-band .section-title { max-width: 16rem; }

.homepage-flow .about-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
  margin-top: 2.6rem;
}

@media (min-width: 980px) {
  .homepage-flow .about-grid {
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: 5rem;
  }

  .homepage-flow .about-grid .statement-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.6rem;
  }
}

.homepage-flow .about-grid .callout { max-width: var(--measure-reading-narrow); }
.homepage-flow .about-grid .statement-stack { display: grid; gap: 2.6rem; margin-top: 0; }
.homepage-flow .about-grid .statement-stack article { max-width: var(--measure-reading-narrow); }

.homepage-flow .contact-closure {
  display: grid;
  gap: 2.4rem;
  align-items: start;
  width: 100%;
  max-width: var(--home-editorial-width);
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(1rem, 3vw, 2rem);
}

@media (min-width: 980px) {
  .homepage-flow .contact-closure {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 6rem;
  }
}

.homepage-flow .contact-closure .section-title { max-width: var(--measure-heading-tight); }
.homepage-flow .contact-copy { max-width: var(--measure-lead); color: var(--muted); font-size: 1.03rem; line-height: 1.95; }

.homepage-flow .contact-action {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  justify-self: start;
}

@media (min-width: 980px) {
  .homepage-flow .contact-action {
    justify-self: stretch;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
    max-width: 34rem;
  }
}

.homepage-flow .contact-action .btn {
  min-width: 0;
  width: fit-content;
  justify-content: center;
}

.homepage-flow .contact-kicker {
  max-width: 32ch;
  color: var(--soft);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.homepage-flow .contact-links {
  display: grid;
  gap: .55rem;
  color: var(--text);
}

.homepage-flow .contact-links a,
.homepage-flow .contact-links span {
  color: var(--text);
  text-decoration: none;
}

.homepage-flow .contact-links a:hover,
.homepage-flow .contact-links a:focus-visible { color: var(--text); }

/* =========================================================
   09. Detail, article and insight layouts
   ========================================================= */

.article-hero {
  display: flex;
  align-items: end;
  min-height: clamp(28rem, 56vh, 42rem);
  padding-block: clamp(7rem, 14vw, 11rem) clamp(4rem, 9vw, 7rem);
}

.article-hero__inner { position: relative; z-index: 1; }

.article-hero h1 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(4rem, 9.5vw, 8.5rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.article-hero .lead { max-width: 46rem; margin-top: 1.35rem; }

.article-date {
  margin-top: 1.25rem;
  color: var(--soft);
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.article-body-section { padding-top: clamp(4rem, 8vw, 6rem); }
.article-content { max-width: 54rem; }

.article-content h2 {
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.article-content h3 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.18;
}

.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.article-featured-image-section { padding: 0 0 clamp(2.5rem, 5vw, 4.5rem); }
.article-featured-image { max-width: min(100%, 72rem); margin: 0; }

.article-featured-image img {
  width: 100%;
  height: auto;
  max-height: min(62vh, 44rem);
  object-fit: cover;
  border: 1px solid var(--line);
  filter: saturate(.78) contrast(.96);
}

.article-featured-image figcaption,
.article-content figcaption,
.article-content img + em {
  display: block;
  max-width: 42rem;
  margin-top: .75rem;
  color: var(--soft);
  font-size: .8rem;
  line-height: 1.55;
}

.article-content figure { margin: clamp(2.5rem, 6vw, 4.5rem) 0; }

.article-content figure img,
.article-content > img,
.article-content p > img {
  display: block;
  width: min(100%, 42rem);
  height: auto;
  margin: 0;
  border: 1px solid var(--line);
  filter: saturate(.78) contrast(.96);
}

.article-content > img,
.article-content p > img {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: .75rem;
}

.article-content img + em { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.article-content p:has(> img) { margin: clamp(2.5rem, 6vw, 4.5rem) 0 .75rem; }

@media (min-width: 980px) {
  .article-content figure:nth-of-type(even) { margin-left: clamp(4rem, 10vw, 10rem); }
}

.insights-search-section { padding-top: clamp(2rem, 4vw, 4rem); }

.insight-tools {
  display: grid;
  gap: 1.25rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.25rem, 2vw, 1.8rem);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

@media (min-width: 900px) {
  .insight-tools { grid-template-columns: minmax(320px, .9fr) minmax(0, 1fr); }
}

.search-field { display: grid; gap: .65rem; }

.search-field label,
.insight-category {
  display: block;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.search-field input {
  width: 100%;
  min-height: 3.1rem;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color var(--motion-standard), box-shadow var(--motion-standard);
}

.search-field input::placeholder { color: rgba(225,232,242,.54); }
.search-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 2px 0 rgba(242,196,109,.38); }
.search-field input:active { border-color: rgba(242,196,109,.52); }

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.75rem);
}

.filter-button {
  position: relative;
  appearance: none;
  padding: .55rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.filter-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .15rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-standard);
}

.filter-button:hover,
.filter-button:focus-visible,
.filter-button.is-active { color: var(--text); }
.filter-button:hover::after,
.filter-button:focus-visible::after,
.filter-button.is-active::after { transform: scaleX(1); }

.insight-category { margin-bottom: .85rem; color: rgba(210,165,72,.9); }
.insight-item[hidden] { display: none !important; }
.no-results { margin-top: 2rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

/* =========================================================
   10. Contact, about and CTA blocks
   ========================================================= */

.callout {
  max-width: var(--measure-lead);
  padding-left: 1.1rem;
  border-left: 1px solid rgba(242,196,109,.7);
  color: var(--muted);
}

.contact-rail {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-rail a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}

.contact-guidance {
  align-self: start;
  padding-top: .15rem;
}

.contact-guidance h3 {
  margin: 0 0 1.35rem;
  color: var(--text);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .005em;
}

.editorial-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.editorial-list li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-faint);
}

.editorial-list span {
  color: var(--accent);
  font-size: .78rem;
  letter-spacing: .22em;
}

.editorial-list strong { color: var(--text); font-weight: 450; }

.lower-cta {
  margin-top: clamp(4.5rem, 8vw, 7rem);
  padding-top: clamp(3rem, 5vw, 4.75rem);
  border-top: 1px solid rgba(255,255,255,.08);
}

.lower-cta-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
  width: 100%;
  max-width: var(--layout-section-max);
}

@media (min-width: 980px) {
  .lower-cta-grid { grid-template-columns: minmax(0, .85fr) minmax(420px, .9fr); }
}

.lower-cta .section-title {
  max-width: var(--measure-heading-tight);
  margin-bottom: .8rem;
}

.lower-cta-copy {
  max-width: var(--measure-lead);
  color: var(--muted);
  line-height: 1.9;
}

.lower-cta-actions {
  display: grid;
  gap: 1rem;
  align-content: end;
  padding-left: clamp(1.25rem, 2.6vw, 3rem);
  border-left: 1px solid rgba(255,255,255,.1);
}

.lower-cta-actions .contact-links {
  display: grid;
  gap: .45rem;
  margin-bottom: .75rem;
}

.lower-cta-actions .contact-links a,
.lower-cta-actions .contact-links span {
  color: var(--text);
  text-decoration: none;
}

.lower-cta-actions .contact-links a:hover { color: var(--accent); }
.lower-cta-actions .hero-actions { margin-top: .25rem; }

/* Standalone About and Contact pages keep their tighter live-site sizing. */
body:has(.hero#about) .reading,
body:has(.hero#contact) .reading { max-width: 74ch; }

body:has(.hero#about) .section-intro,
body:has(.hero#contact) .section-intro { max-width: 52ch; }

body:has(.hero#about) .reading p,
body:has(.hero#about) .reading li,
body:has(.hero#contact) .reading p,
body:has(.hero#contact) .reading li { max-width: 68ch; }

body:has(.hero#about) .section-title,
body:has(.hero#contact) .section-title { max-width: 14ch; }

body:has(.hero#contact) .contact-guidance,
body:has(.hero#contact) .editorial-list,
body:has(.hero#contact) .contact-rail { max-width: 42rem; }

body:has(.hero#about) .statement-stack article { max-width: 42ch; }
body:has(.hero#about) .callout { max-width: 45ch; }

body:has(.hero#about) .section.centered .reading,
body:has(.hero#contact) .section.centered .reading {
  display: block;
  max-width: 52ch;
}

/* =========================================================
   11. Footer
   ========================================================= */

.site-footer {
  margin-top: var(--space-6);
  padding: 3rem 0 4rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-logo {
  width: clamp(160px, 13vw, 220px);
  height: auto;
  margin-bottom: 1rem;
  opacity: .96;
}

.footer-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: minmax(16rem, 1.5fr) .8fr .8fr 1fr; }
}

.footer-grid h3 {
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.footer-grid p,
.footer-grid li,
.footer-grid a,
.footer-contact li {
  color: var(--soft);
  font-size: .98rem;
}

.footer-grid ul {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
}

.footer-motto {
  max-width: 24rem;
  margin: 1.1rem 0 0;
  color: var(--soft);
  font-size: .82rem;
  line-height: 1.55;
}

.footer-motto__latin {
  display: block;
  color: var(--text);
  font-style: italic;
  letter-spacing: .045em;
}

.footer-motto__translation {
  display: block;
  margin-top: .1rem;
  opacity: .72;
}

.footer-bottom {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--soft);
  font-size: .88rem;
}

.footer-bottom > div:last-child {
  max-width: 72rem;
  line-height: 1.7;
}

@media (min-width: 900px) {
  .footer-bottom { grid-template-columns: .35fr 1.65fr; align-items: start; }
}

.footer-grid a,
.contact-links a,
.lower-cta-actions .contact-links a,
.homepage-flow .contact-links a {
  width: fit-content;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}

.footer-grid a:hover,
.footer-grid a:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible,
.lower-cta-actions .contact-links a:hover,
.lower-cta-actions .contact-links a:focus-visible,
.homepage-flow .contact-links a:hover,
.homepage-flow .contact-links a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* =========================================================
   12. Mobile and responsive behaviour
   ========================================================= */

@media (max-width: 979px) {
  :root {
    --mobile-gutter: clamp(1.15rem, 5vw, 1.65rem);
    --layout-editorial-max: 100%;
    --layout-section-max: 100%;
    --measure-lead: 34rem;
    --measure-heading: 34rem;
    --measure-heading-tight: 22rem;
  }

  body.nav-open { overflow: hidden; }
  body.nav-open main,
  body.nav-open footer { pointer-events: none; }

  .container {
    width: calc(100% - (var(--mobile-gutter) * 2));
    margin-inline: auto;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 10020;
    background: rgba(4, 7, 12, .88);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    isolation: isolate;
  }

  body.nav-open .site-header { background: transparent; border-bottom-color: transparent; }

  .header-inner {
    position: relative;
    z-index: 10030;
    min-height: 4.25rem;
    gap: .75rem;
  }

  .brand-logo {
    width: clamp(9.5rem, 42vw, 12rem);
    max-height: 2.2rem;
  }

  .site-nav { display: none; }

  .nav-toggle {
    position: relative;
    z-index: 10040;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .78rem;
    min-height: 2.75rem;
    padding: .5rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    isolation: isolate;
  }

  .nav-toggle-text {
    display: inline-block;
    min-width: 3.8rem;
    text-align: center;
    font-size: .68rem;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .nav-toggle::before,
  .nav-toggle::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1px;
    background: var(--accent);
    opacity: .95;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .28s var(--easing), width .28s var(--easing), opacity .2s ease;
  }

  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[data-state="open"]::before {
    width: 1.42rem;
    transform: rotate(90deg);
  }

  .nav-toggle[aria-expanded="true"]::after,
  .nav-toggle[data-state="open"]::after {
    width: 1.42rem;
    transform: rotate(-90deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-text,
  .nav-toggle[data-state="open"] .nav-toggle-text { letter-spacing: .22em; }

  .nav-toggle:focus-visible {
    outline: 1px solid rgba(242,196,109,.72);
    outline-offset: .35rem;
  }

  .mobile-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10010 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    padding: clamp(5rem, 15vw, 5.8rem) var(--mobile-gutter) 2rem !important;
    border: 0 !important;
    background:
      radial-gradient(720px 460px at 76% 14%, rgba(111,231,255,.09), transparent 62%),
      radial-gradient(560px 380px at 22% 88%, rgba(215,169,75,.065), transparent 62%),
      linear-gradient(180deg, rgba(7,17,28,.985) 0%, rgba(4,7,12,.992) 100%);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -1rem, 0);
    transition: opacity .24s var(--easing), transform .24s var(--easing), visibility .24s var(--easing);
  }

  .mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .mobile-nav::before {
    content: "Navigation";
    display: block;
    margin: 0 0 .85rem;
    color: var(--accent);
    font-size: .68rem;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  .mobile-nav {
    counter-reset: mobile-nav -1;
  }

  .mobile-nav a {
    position: relative;
    display: grid !important;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: baseline;
    gap: .68rem;
    min-height: 0;
    padding: .58rem 0 !important;
    border-top: 1px solid rgba(255,255,255,.09);
    color: var(--text);
    font-size: clamp(1.58rem, 7.6vw, 2.35rem);
    line-height: 1.02;
    letter-spacing: -0.012em;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    transform: none;
  }

  .mobile-nav a::before {
    content: "0" counter(mobile-nav);
    counter-increment: mobile-nav;
    color: var(--soft);
    font-size: .66rem;
    line-height: 1;
    letter-spacing: .18em;
  }

  .mobile-nav a.active,
  .mobile-nav a:hover,
  .mobile-nav a:focus-visible {
    color: var(--text);
    padding-left: 0 !important;
  }

  .mobile-nav a.active::before { color: var(--accent); }
  .mobile-nav a.is-loading { color: var(--accent); opacity: .95; }
  body.nav-loading .mobile-nav a:not(.is-loading) { opacity: .48; }

  .mobile-nav::after {
    content: "Peloric Group · Independent maritime technical advisory\A\A Ex factis certa";
    display: block;
    width: 100%;
    max-width: 30ch;
    margin-top: auto;
    margin-left: 0;
    margin-right: auto;
    padding-top: 1.8rem;
    padding-left: 0;
    color: var(--soft);
    font-size: .78rem;
    line-height: 1.6;
    letter-spacing: .04em;
    text-align: left;
    white-space: pre-line;
  }

  .hero,
  .home-hero {
    min-height: auto;
    padding-top: clamp(4rem, 16vw, 5.75rem);
    padding-bottom: clamp(4rem, 16vw, 5.5rem);
  }

  body:not(.home) .hero:not(.home-hero) {
    min-height: auto;
    align-items: end;
    padding-top: clamp(2.6rem, 9vw, 3.6rem) !important;
    padding-bottom: clamp(3.4rem, 12vw, 4.6rem) !important;
  }

  body:not(.home) .hero:not(.home-hero) .hero-inner {
    min-height: auto;
    align-items: end;
  }

  .home-hero .reveal:first-child { padding-left: 0; }

  .hero h1,
  .home-hero h1,
  .hero.compact h1,
  .hero.minimal h1,
  .hero#service-detail h1,
  .hero#sector-detail h1,
  .hero#insight-article h1 {
    max-width: 13.5ch;
    font-size: clamp(2.85rem, 13.2vw, 4.65rem);
    line-height: 1.06;
    letter-spacing: -0.012em;
  }

  .hero#services-hub h1,
  .hero#sectors-hub h1,
  .hero#about h1,
  .hero#contact h1,
  .hero#legal h1,
  .hero#insights h1 { max-width: 14.5ch; }

  .hero p.lead,
  .home-hero p.lead,
  .hero.compact p.lead,
  .hero.minimal p.lead {
    max-width: var(--measure-lead);
    margin-top: 1.25rem;
    font-size: clamp(1rem, 4.2vw, 1.12rem);
    line-height: 1.72;
  }

  .hero.minimal .hero-grid { grid-template-columns: 1fr; }
  .hero.minimal .hero-visual { display: none; }

  .hero-actions {
    gap: 1.15rem 1.65rem;
    margin-top: 1.45rem;
  }

  .btn,
  .text-btn {
    font-size: .68rem;
    letter-spacing: .15em;
  }

  .section,
  .section.compact { padding: clamp(3.6rem, 14vw, 5.25rem) 0; }

  .section-title {
    max-width: var(--measure-heading-tight);
    font-size: clamp(2rem, 10vw, 3.2rem);
    line-height: 1.06;
  }

  .section-intro {
    max-width: 34rem;
    line-height: 1.75;
  }

  .section-heading-row { gap: 1.15rem; }
  .section-hub-link { margin-top: .2rem; }

  .homepage-flow .section-heading-row,
  .homepage-flow .surface-rule,
  .homepage-flow .index-list,
  .homepage-flow .about-band,
  .homepage-flow .contact-closure,
  .lower-cta-grid,
  .reading,
  .reading.markdown-content,
  .markdown-content.reading { max-width: 100%; }

  .index-list { margin-top: 2rem; }

  .index-row,
  .homepage-flow .article-list .index-row,
  .article-list .index-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: 1.55rem 0;
  }

  .index-row:hover,
  .index-row:focus-visible,
  .homepage-flow .article-list .index-row:hover,
  .homepage-flow .article-list .index-row:focus-visible { transform: none; }

  .index-num {
    color: var(--accent);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .18em;
  }

  .index-row h3,
  .homepage-flow .article-list .index-row h3 {
    max-width: 17ch;
    font-size: clamp(1.45rem, 7vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
  }

  .index-row p,
  .homepage-flow .index-row p,
  .homepage-flow .article-list .index-row p {
    max-width: 34rem;
    font-size: .98rem;
    line-height: 1.72;
    opacity: .88;
  }

  .inline-meta {
    gap: .45rem .75rem;
    font-size: .62rem;
    letter-spacing: .14em;
  }

  .homepage-flow .about-grid {
    gap: 2rem;
    margin-top: 2rem;
  }

  .homepage-flow .about-grid .callout,
  .statement-stack article,
  .homepage-flow .about-grid .statement-stack article { max-width: 34rem; }

  .statement-stack,
  .homepage-flow .about-grid .statement-stack { gap: 1.7rem; }

  .homepage-flow .contact-closure,
  .lower-cta-grid { gap: 1.85rem; }

  .homepage-flow .contact-copy,
  .lower-cta-copy {
    max-width: 34rem;
    line-height: 1.78;
  }

  .lower-cta-actions {
    border-left: 0;
    padding-left: 0;
  }

  .reading h2 {
    max-width: var(--measure-heading-tight);
    margin-top: clamp(3.2rem, 14vw, 4.5rem);
    font-size: clamp(2rem, 9.6vw, 3rem);
  }

  .reading h3 { font-size: clamp(1.28rem, 6vw, 1.65rem); }

  .reading p,
  .reading li {
    font-size: 1rem;
    line-height: 1.78;
  }

  .markdown-content p,
  .reading.markdown-content p,
  .markdown-content ul,
  .markdown-content ol,
  .reading.markdown-content ul,
  .reading.markdown-content ol,
  .reading p,
  .reading ul,
  .reading ol { max-width: 100%; }

  .markdown-content ul,
  .markdown-content ol { padding-left: 1.15rem; }

  .markdown-content h2,
  .reading.markdown-content h2,
  .markdown-content h3,
  .reading.markdown-content h3 { max-width: var(--measure-heading-tight); }

  .article-hero {
    min-height: auto;
    padding-top: clamp(3.2rem, 11vw, 4.4rem) !important;
    padding-bottom: clamp(3.4rem, 12vw, 4.8rem) !important;
  }

  .article-hero h1 {
    max-width: 13.5ch;
    font-size: clamp(3rem, 13.2vw, 4.8rem);
    line-height: 1.06;
  }

  .article-content h2 {
    max-width: 14ch;
    font-size: clamp(2rem, 9.4vw, 3.1rem);
  }

  .article-content h3 { font-size: clamp(1.25rem, 5.5vw, 1.65rem); }
  .article-actions { gap: 1rem 1.4rem; }

  .article-featured-image-section { padding-bottom: clamp(2rem, 8vw, 3.4rem); }
  .article-featured-image img { max-height: none; }
  .article-content figure img,
  .article-content > img,
  .article-content p > img { width: 100%; }

  .insight-tools { gap: 1.65rem; }

  .filter-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem 1rem;
  }

  .filter-button {
    text-align: left;
    font-size: .68rem;
    letter-spacing: .14em;
  }

  .editorial-list li {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: .85rem;
  }

  body:has(.hero#about) .reading,
  body:has(.hero#contact) .reading,
  body:has(.hero#about) .section-intro,
  body:has(.hero#contact) .section-intro,
  body:has(.hero#about) .reading p,
  body:has(.hero#about) .reading li,
  body:has(.hero#contact) .reading p,
  body:has(.hero#contact) .reading li,
  body:has(.hero#contact) .contact-guidance,
  body:has(.hero#contact) .editorial-list,
  body:has(.hero#contact) .contact-rail,
  body:has(.hero#about) .section.centered .reading,
  body:has(.hero#contact) .section.centered .reading { max-width: 100%; }

  .site-footer {
    margin-top: 3.5rem;
    padding: 2.75rem 0 3rem;
  }

  .footer-grid { gap: 2.25rem; }
  .footer-grid h3 { font-size: .78rem; }
  .footer-grid ul { gap: .7rem; }

  .footer-grid p,
  .footer-grid li,
  .footer-grid a,
  .footer-contact li {
    font-size: .94rem;
    line-height: 1.65;
  }

  .footer-bottom {
    gap: .8rem;
    margin-top: 2.2rem;
    font-size: .78rem;
  }
}

@media (max-width: 420px) {
  .hero h1,
  .home-hero h1,
  .hero.compact h1,
  .hero.minimal h1 {
    max-width: 12.5ch;
    font-size: clamp(2.55rem, 13.5vw, 3.35rem);
  }

  body:not(.home) .hero:not(.home-hero) { padding-top: 2.4rem !important; }

  .article-hero h1 {
    max-width: 12.5ch;
    font-size: clamp(2.7rem, 12.8vw, 3.6rem);
  }

  .nav-toggle { gap: .62rem; }
  .nav-toggle-text { min-width: 3.45rem; font-size: .64rem; }
  .nav-toggle::before,
  .nav-toggle::after { width: 1.28rem; }

  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[data-state="open"]::before,
  .nav-toggle[aria-expanded="true"]::after,
  .nav-toggle[data-state="open"]::after { width: 1.22rem; }

  .mobile-nav { padding-top: clamp(4.8rem, 15vw, 5.6rem) !important; }
  .mobile-nav::before { margin-bottom: .75rem; }

  .mobile-nav a {
    grid-template-columns: 1.85rem minmax(0, 1fr);
    gap: .62rem;
    padding: .5rem 0 !important;
    font-size: clamp(1.48rem, 7.2vw, 2.15rem);
  }

  .index-row h3,
  .homepage-flow .article-list .index-row h3 { max-width: 15ch; }
}

/* =========================================================
   13. Motion and accessibility
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--easing), transform .6s var(--easing);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.site-nav a,
.mobile-nav a,
.footer-grid a,
.contact-links a,
.article-list a,
.index-row,
.btn,
.text-btn,
.filter-button {
  transition:
    color var(--motion-standard),
    opacity var(--motion-standard),
    transform var(--motion-standard),
    border-color var(--motion-standard),
    text-decoration-color var(--motion-standard),
    background-color var(--motion-standard);
}

.brand,
.brand-logo,
.footer-logo { transition: opacity var(--motion-standard), transform var(--motion-standard); }
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo { opacity: .82; }

.index-row h3,
.index-row .index-num,
.index-row p { transition: color var(--motion-standard), opacity var(--motion-standard); }

.article-list a:hover h3,
.article-list a:focus-visible h3,
.homepage-flow .article-list .index-row:hover h3,
.homepage-flow .article-list .index-row:focus-visible h3,
.index-row:hover h3,
.index-row:focus-visible h3,
.sector-map a:hover h3,
.sector-map a:focus-visible h3,
.service-grid a:hover h3,
.service-grid a:focus-visible h3 { color: var(--text); }

.site-nav a:active,
.mobile-nav a:active,
.footer-grid a:active,
.contact-links a:active,
.lower-cta-actions .contact-links a:active,
.homepage-flow .contact-links a:active,
.waypoint-rail a:active {
  opacity: .72;
  transition-duration: 0ms;
}

.brand:active {
  opacity: .78;
  transform: translateY(1px);
  transition-duration: 0ms;
}

.index-row:active,
.article-list .index-row:active,
.homepage-flow .article-list .index-row:active {
  opacity: .88;
  transform: translateX(2px) translateY(1px);
  transition-duration: 0ms;
}

.index-row:active::after,
.article-list .index-row:active::after,
.homepage-flow .article-list .index-row:active::after {
  transform: scaleX(.96);
  transition-duration: 0ms;
}

.btn:active,
.text-btn:active {
  opacity: .84;
  transform: translateX(2px) translateY(1px);
  transition-duration: 0ms;
}

.filter-button:active {
  opacity: .82;
  transform: translateY(1px);
  transition-duration: 0ms;
}

.nav-toggle:active {
  opacity: .84;
  transform: translateY(1px);
  transition-duration: 0ms;
}

.waypoint-rail a,
.waypoint-dot {
  transition: color var(--motion-standard), border-color var(--motion-standard), background var(--motion-standard), transform var(--motion-standard), opacity var(--motion-standard);
}

.waypoint-rail a:hover,
.waypoint-rail a:focus-visible { color: var(--text); }

.waypoint-rail a:hover .waypoint-dot,
.waypoint-rail a:focus-visible .waypoint-dot {
  border-color: var(--accent);
  transform: scale(1.12);
}

.waypoint-rail a:active .waypoint-dot {
  transform: scale(.95);
  transition-duration: 0ms;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 6px;
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .site-nav a::after,
  .index-row::after,
  .filter-button::after { transition: none; }

  .index-row:hover,
  .index-row:focus-visible,
  .btn:hover,
  .btn:focus-visible,
  .text-btn:hover,
  .text-btn:focus-visible,
  .waypoint-rail a:hover .waypoint-dot,
  .waypoint-rail a:focus-visible .waypoint-dot { transform: none; }
}

/* =========================================================
   19. Refactor correction: mobile Markdown gutter + homepage insights width
   ========================================================= */

/* Keep homepage Insights constrained to the same editorial width as Services and Sectors. */
.homepage-flow .article-list {
  width: 100%;
  max-width: var(--home-editorial-width);
}

.homepage-flow .article-list .index-row {
  width: 100%;
}

/* Defensive mobile gutter for Markdown/detail content when it is rendered
   directly in a section rather than inside the standard .container wrapper. */
@media (max-width: 979px) {
  main > .reading.markdown-content,
  main > .markdown-content.reading,
  .section > .reading.markdown-content,
  .section > .markdown-content.reading,
  article.reading.markdown-content,
  article.markdown-content.reading {
    width: calc(100% - (var(--mobile-gutter) * 2));
    max-width: 100%;
    margin-inline: auto;
  }

  .container .reading.markdown-content,
  .container .markdown-content.reading {
    width: 100%;
  }

  .homepage-flow .article-list {
    max-width: 100%;
  }
}