/* ==========================================================================
   mindaugasgumauskas.com
   Mobile first. Breakpoints at 768px (tablet) and 1024px (desktop).
   All text colours verified at WCAG AA or better against their background.
   ========================================================================== */

:root {
  /* colour */
  --navy:        #1e3a5f;   /* accent, shared with Consilium Digitale */
  --navy-deep:   #162c48;
  --ink:         #111418;
  --body:        #4d525a;
  --muted:       #6b6f78;
  --rule:        #e5e7ea;
  --rule-soft:   #eef0f2;
  --bg:          #ffffff;
  --surface:     #f7f8f9;
  --dark:        #15243a;
  --darker:      #0f1c2d;
  --on-dark:     #a9b4c2;
  --on-dark-dim: #8d9bad;

  /* type */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* metrics */
  --shell:  1140px;
  --gutter: clamp(20px, 5vw, 64px);
  --sv:     clamp(64px, 9vw, 116px);   /* section vertical rhythm */
  --header: 64px;
  --radius: 3px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
h1 em, h2 em { font-style: italic; color: var(--navy); }

p { margin: 0; }

a { color: var(--navy); }

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

/* hide the icon sprite without removing it from the render tree */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------- layout helpers */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sv); }
.section-alt { background: var(--surface); }

/* offset anchor targets so the sticky header never covers a heading */
:target { scroll-margin-top: calc(var(--header) + 24px); }
section[id] { scroll-margin-top: calc(var(--header) + 24px); }

/* --------------------------------------------------------- accessibility */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.contact :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------- shared pieces */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
  opacity: 0.65;
}

/* stroke-width lives here rather than on the sprite groups, so that larger
   icon sizes can thin their stroke back down to a hairline */
.ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--navy);
  stroke-width: 1.5;
}
.ico-xl { width: 38px; height: 38px; stroke-width: 1.15; }
.ico-lg { width: 26px; height: 26px; }
.ico-sm { width: 15px; height: 15px; }
.ico-xs { width: 13px; height: 13px; }
.ico use { pointer-events: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}
.btn .ico { color: currentColor; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn-invert { background: #fff; border-color: #fff; color: var(--navy); }
.btn-invert:hover { background: #e9edf2; border-color: #e9edf2; }

.btn-outline {
  background: transparent;
  border-color: var(--rule);
  color: var(--body);
}
.btn-outline:hover { border-color: var(--muted); color: var(--ink); }

.btn-sm { padding: 10px 18px; font-size: 12.5px; }
.btn-block { display: flex; width: 100%; }

/* a button that needs to read as a link, used for Cookie settings */
.linkish {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--on-dark);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.linkish:hover { color: #fff; border-bottom-color: currentColor; }

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.link-quiet:hover { color: var(--navy); border-bottom-color: currentColor; }
.link-on-dark { color: var(--on-dark); }
.link-on-dark:hover { color: #fff; }

.prose p {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--body);
  margin-bottom: 1.15em;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 58, 95, 0.3);
  transition: border-color 0.18s ease;
}
.prose a:hover { border-bottom-color: var(--navy); }
/* 34em measures out at roughly 70 characters per line in Instrument Sans */
.prose-narrow { max-width: 34em; }

.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 { font-size: clamp(29px, 3.6vw, 45px); line-height: 1.1; }
.section-lede {
  margin-top: 24px;
  max-width: 36em;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--body);
}

/* ========================================================== HEADER / NAV */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 20px rgba(17, 20, 24, 0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  padding-right: 1px;
}
.brand-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.nav-desktop { display: none; }
.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-desktop a {
  position: relative;
  font-size: 13.5px;
  letter-spacing: 0.015em;
  color: var(--body);
  text-decoration: none;
  padding-block: 6px;
  transition: color 0.18s ease;
}
.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after { transform: scaleX(1); }
.nav-desktop a.is-active { color: var(--navy); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.bars { display: block; width: 22px; height: 14px; position: relative; }
.bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.24s ease, opacity 0.16s ease;
}
.bars i:nth-child(1) { top: 0; }
.bars i:nth-child(2) { top: 6.25px; }
.bars i:nth-child(3) { top: 12.5px; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

.nav-mobile {
  border-top: 1px solid var(--rule-soft);
  background: rgba(255, 255, 255, 0.98);
  padding: 8px var(--gutter) 24px;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.nav-mobile li + li { border-top: 1px solid var(--rule-soft); }
.nav-mobile a {
  display: block;
  padding: 15px 0;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
}

/* ================================================================== HERO */
.hero {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.hero-grid { display: grid; gap: clamp(40px, 5vw, 76px); }

h1 {
  font-size: clamp(40px, 7.2vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}

/* The page subtitle, and a real h2. It has to sit clearly above body copy in
   the hierarchy, so it is larger, heavier and navy against the grey lede.
   The two clauses each get their own line so that neither the roles nor the
   mission ever splits across a line break. */
.tagline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 24px;
  max-width: 26em;
}
.tagline-roles { white-space: nowrap; }
.tagline .sep {
  display: inline-block;
  margin-inline: 7px;
  /* solid rather than navy at 35 percent alpha, which came out at 1.96:1.
     It is decorative and aria-hidden so it is not a WCAG failure, but nothing
     in this file dims text with alpha or opacity, so it follows the same rule. */
  color: var(--muted);
}

.lede {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 300;
  line-height: 1.72;
  color: var(--body);
  max-width: 46ch;
  margin-bottom: clamp(30px, 3.5vw, 40px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.hero-portrait { position: relative; }
.portrait-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
}
/* offset accent block, a quiet piece of art direction behind the portrait */
.hero-portrait::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -14px;
  bottom: -14px;
  width: 46%;
  height: 42%;
  background: var(--navy);
  opacity: 0.08;
  border-radius: var(--radius);
}

/* ================================================== CREDIBILITY STRIP */
.proof {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(40px, 5vw, 60px);
}
.proof-grid { display: grid; gap: 32px; }
.proof-item { display: grid; gap: 14px; }
.proof-item p {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  max-width: 34ch;
}

/* ========================================================== HOW I HELP */
.help-top { display: grid; gap: clamp(36px, 5vw, 64px); }
.help-head { margin-bottom: 0; }

.help-figure { margin: 0; display: flex; justify-content: center; }
.help-visual { width: 100%; max-width: 440px; height: auto; display: block; }
.hv-fill   { fill: var(--navy); opacity: 0.05; }
.hv-lens   { fill: var(--navy); opacity: 0.14; }
.hv-stroke { fill: none; stroke: var(--navy); stroke-opacity: 0.3; stroke-width: 1.25; }
.hv-dot    { fill: var(--navy); }
.hv-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  fill: var(--muted);
  text-anchor: middle;
}

.help-grid {
  display: grid;
  gap: 0;
  margin: clamp(40px, 6vw, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.help-card {
  position: relative;
  padding: clamp(28px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
}
.help-num {
  position: absolute;
  top: clamp(26px, 3.2vw, 38px);
  right: 0;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  /* A solid colour, not navy dimmed with opacity. At 0.32 this composited to
     about 1.8:1 against the section, which fails AA and is close to invisible.
     Opacity is never used to dim text anywhere in this file for that reason. */
  color: var(--muted);
}
.help-card .ico-lg { margin-bottom: 20px; }
.help-card h3 {
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.22;
  margin-bottom: 10px;
}
.help-card p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--body);
  max-width: 40ch;
}

/* =============================================================== ABOUT */
.about-grid { display: grid; gap: clamp(32px, 4vw, 72px); }
.about-head h2 { font-size: clamp(29px, 3.6vw, 45px); line-height: 1.1; }

/* ======================================================== TRACK RECORD */
.record { display: grid; gap: clamp(26px, 3.4vw, 48px); }
.record + .record { margin-top: clamp(44px, 5.5vw, 72px); }

.record-role {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.record-text {
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--body);
  max-width: 34em;
}

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 2.6vw, 32px) clamp(20px, 2.6vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kpi { border-top: 1px solid var(--rule); padding-top: 16px; }
.kpi-n {
  display: block;
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.015em;
}
.kpi-l {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Deliberately reuses the hero lede type scale rather than inventing a size of
   its own. Both are opening/closing statements, so they share one treatment,
   and the rule above plus the spacing carry the emphasis instead. */
.record-close {
  margin-top: clamp(44px, 5.5vw, 72px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--rule);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 300;
  line-height: 1.72;
  color: var(--body);
  /* Two lines from tablet up, breaking on the full stop so each sentence gets
     its own line. It drops to three lines below about 35em, and the sentence
     break is lost above about 42em where "Different" starts fitting on line
     one, so this width is chosen rather than arbitrary. If you edit this
     sentence, re-check that it still sits on two lines. */
  max-width: 38em;
}

/* ============================================================= CONTACT */
.contact {
  background: var(--dark);
  padding-block: clamp(72px, 10vw, 132px);
  text-align: center;
}
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
}
.contact .eyebrow { color: var(--on-dark-dim); justify-content: center; }
.contact h2 {
  color: #fff;
  font-size: clamp(31px, 4.6vw, 54px);
  line-height: 1.08;
  margin-bottom: clamp(32px, 4vw, 44px);
}
.contact h2 em { color: #c8d3e0; }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}

/* ============================================================== FOOTER */
.site-footer {
  background: var(--darker);
  color: var(--on-dark-dim);
  padding-top: clamp(44px, 5vw, 64px);
}
.footer-grid {
  display: grid;
  gap: 28px;
  padding-bottom: clamp(32px, 4vw, 44px);
}
.footer-org-name {
  font-family: var(--serif);
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}
.footer-meta { font-size: 14px; line-height: 1.65; }

.footer-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links a {
  font-size: 14px;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer-links a:hover { color: #fff; border-bottom-color: currentColor; }

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-block: 22px 26px;
}
.footer-base p { font-size: 13px; color: var(--on-dark-dim); }

/* ================================================== COOKIE CONSENT BAR */
.consent {
  position: fixed;
  z-index: 200;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 30px rgba(17, 20, 24, 0.09);
}
.consent[hidden] { display: none; }
.consent-inner {
  display: grid;
  gap: 16px;
  padding-block: 18px 20px;
}
.consent-text {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--body);
  max-width: 76ch;
}
.consent-text a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* min-height keeps these comfortable tap targets on a phone */
.consent-actions .btn { flex: 1 1 auto; min-width: 120px; min-height: 44px; }

/* ========================================================= LEGAL PAGES */
.legal { padding-top: clamp(48px, 6vw, 76px); }
.legal-title {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
  margin-bottom: 12px;
}
.legal-date {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: clamp(34px, 4vw, 48px);
  padding-bottom: clamp(26px, 3vw, 34px);
  border-bottom: 1px solid var(--rule);
}
.legal .prose h2 {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.3;
  margin: clamp(34px, 4vw, 48px) 0 14px;
}
.legal .prose h2 .sn {
  /* solid, for the same reason as .help-num. Navy at 0.45 composited to about
     2.5:1 on white, which fails AA for text at this size. */
  color: var(--muted);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.legal-body { max-width: 40em; }
.legal-body p { font-size: 15.5px; line-height: 1.8; }

.legal-list {
  margin: 0 0 1.15em;
  padding-left: 1.15em;
}
.legal-list li {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--body);
  margin-bottom: 0.6em;
}
.legal-list li::marker { color: var(--navy); }
.legal-list strong { font-weight: 500; color: var(--ink); }

/* Tables can be wider than a phone, so each one scrolls inside its own
   container rather than pushing the whole page sideways. */
.legal-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.4em;
}
.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.legal-table-kv { min-width: 0; }
.legal-table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.legal-table td,
.legal-table tbody th {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-weight: 300;
  line-height: 1.65;
  color: var(--body);
  min-width: 9rem;
}
.legal-table tbody th {
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
.legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 2px;
}
.legal-table-kv td,
.legal-table-kv tbody th { min-width: 0; }
/* the two column key/value table is narrow enough to wrap and fit a phone */
.legal-table-kv tbody th { width: 38%; white-space: normal; }

/* ======================================================= TABLET  768px */
@media (min-width: 768px) {
  :root { --header: 68px; }

  .nav-desktop { display: block; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }

  /* proportional columns so the text column always stays wider than the
     portrait, including right at the 768px breakpoint */
  .hero-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(210px, 0.9fr);
    align-items: center;
  }

  .proof-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .proof-item { padding-inline: clamp(20px, 3vw, 34px); }
  .proof-item:first-child { padding-left: 0; }
  .proof-item:last-child { padding-right: 0; }
  .proof-item + .proof-item { border-left: 1px solid var(--rule); }

  .help-top {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
  .help-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4.5vw, 72px);
    margin-top: clamp(48px, 6vw, 80px);
  }
  .help-card:nth-last-child(-n+2) { border-bottom: 0; }

  .about-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .about-head { position: sticky; top: calc(var(--header) + 40px); }

  .record { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }

  .consent-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
  }
  .consent-actions .btn { flex: 0 0 auto; }

  .footer-grid {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 40px;
  }
  .footer-links ul { justify-content: flex-end; }
}

/* ====================================================== DESKTOP 1024px */
@media (min-width: 1024px) {
  .hero { padding-top: clamp(72px, 8vw, 104px); }
  .hero-grid { grid-template-columns: 1fr 380px; gap: 88px; }
  .proof-item p { font-size: 16px; }
  .help-card { padding-block: 44px; }
}

/* ======================================================== PREFERENCES */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
}

@media print {
  .site-header, .nav-mobile, .skip, .hero-portrait { display: none !important; }
  body { color: #000; font-size: 12pt; }
  .contact, .site-footer { background: #fff !important; color: #000 !important; }
  .contact h2, .footer-org-name { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}