/* ============================================================
   PRIME Q — site styles
   Brand system from the approved identity kit:
   Prime Navy #041E42 · Accent Red #E11D2E · Slate #6B7280
   Light Gray #E5E7EB · White #FFFFFF
   Type: Inter throughout, self-hosted as one variable file; hierarchy comes
   from weight, not from a second family. See fonts.css.
   The look follows the title slide: white ground, navy type, hairline rules
   with a short red lead-in, and the Q mark used as a quiet outline watermark.
   ============================================================ */

:root {
  --navy: #041e42;
  /* Lifted navy for large flat fills, where the true brand navy goes muddy */
  --navy-deep: #02142d;
  --navy-70: #3a4f6e;
  --red: #e11d2e;
  --red-dark: #b81525;
  --slate: #6b7280;
  --slate-light: #9aa2ad;
  --line: #e5e7eb;
  --line-soft: #f0f2f5;
  --tint: #f7f8fa;
  --white: #fff;

  --ink: var(--navy);
  --body: #46505f;

  --container: 1180px;
  --gutter: 24px;
  --radius: 4px;
  --radius-lg: 8px;

  /* Shadows stay almost invisible — the slide has none, and a soft navy haze
     is as far as the identity goes before it starts to look like a SaaS page. */
  --shadow: 0 1px 2px rgba(4, 30, 66, .04), 0 8px 24px rgba(4, 30, 66, .05);
  --shadow-lg: 0 2px 6px rgba(4, 30, 66, .05), 0 18px 48px rgba(4, 30, 66, .09);

  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Inter at display weights, set close but not tight. The narrowed Inter Tight
   was here first and kept the Polish diacritics cramped: its "ł" carries a
   short bar hard against the right sidebearing, so pairs like "ły" clung
   together whatever the tracking. Regular Inter has the sidebearings to
   breathe. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 4.2vw, 3.35rem); font-weight: 800; letter-spacing: -0.016em; }
h2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); letter-spacing: -0.016em; }
h3 { font-size: 1.16rem; letter-spacing: -0.008em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(225, 29, 46, .14); color: var(--navy); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px;
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  border-radius: 0 0 var(--radius) var(--radius); transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

section[id], main[id] { scroll-margin-top: 96px; }

/* ---------- Eyebrow + rule ------------------------------------------------
   The slide's signature: a hairline rule whose first 90px are red. Every
   section head repeats it, which is what ties the pages to the deck. */
.eyebrow {
  display: block;
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; display: block; width: 180px; height: 2px;
  margin-bottom: 18px;
  background: linear-gradient(to right, var(--red) 0 46px, var(--line) 46px 100%);
}
.eyebrow-light { color: rgba(255, 255, 255, .62); }
.eyebrow-light::before { background: linear-gradient(to right, var(--red) 0 46px, rgba(255, 255, 255, .22) 46px 100%); }
.eyebrow-center { text-align: center; }
.eyebrow-center::before { margin-left: auto; margin-right: auto; }

.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-tint { background: var(--tint); }
.section-line { border-top: 1px solid var(--line); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p { color: var(--slate); font-size: 1.06rem; margin-top: 18px; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }

.lead { font-size: clamp(1.06rem, 1.7vw, 1.24rem); color: var(--slate); line-height: 1.62; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  padding: 14px 28px; border: 1.5px solid transparent; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-on-navy { background: #fff; color: var(--navy); border-color: #fff; }
.btn-on-navy:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-block { width: 100%; }

/* Text link with the brand's red underline reveal */
.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--navy);
  padding-bottom: 3px; border-bottom: 2px solid var(--line);
  transition: border-color .2s var(--ease);
}
.link-more:hover { border-color: var(--red); }
.link-more svg { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.scrolled { background: rgba(255, 255, 255, .97); border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 78px; }
.logo { display: inline-flex; align-items: center; }
.logo img { width: 140px; height: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav > a:not(.btn) {
  font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--navy);
  padding: 6px 0; position: relative;
}
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav > a:not(.btn):hover::after, .nav > a.active::after { transform: scaleX(1); }
.nav .btn { padding: 11px 22px; }

/* ---------- Language switch ---------- */
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--pill, 99px); padding: 3px;
  margin-left: -10px;
}
.lang-switch .lang {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 99px;
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; color: var(--slate);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.lang-switch .lang:not(.active):hover { color: var(--navy); background: var(--tint); }
.lang-switch .lang.active { background: var(--navy); color: #fff; }
.lang-switch .flag { width: 15px; height: 15px; flex: 0 0 auto; }
.lang-switch .flag svg { width: 100%; height: 100%; border-radius: 50%; }

.nav-toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; padding: 11px 10px;
}
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 116px) 0 clamp(56px, 7vw, 96px); }

/* The slide's right-hand composition: an outlined Q bled off the edge with a
   hairline diagonal and two dots crossing it. Both live in one box so they
   scale together and the line keeps hitting the Q at the same place. */
.hero-art {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: min(50vw, 620px); aspect-ratio: 600 / 720;
  pointer-events: none; z-index: 0;
}
.hero-art-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art-line line { stroke: var(--line); stroke-width: 1.4; }
.hero-art-line circle { fill: var(--line); }
.hero-art-q {
  position: absolute; left: 14%; top: 50%; transform: translateY(-50%);
  width: 76%; height: auto;
}

.hero .container { position: relative; z-index: 1; }
.hero-copy { max-width: 720px; }
.hero-stage {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 26px;
}
/* Aligned to the first line, not to the middle of the block: at phone width the
   label wraps and a centred dot ends up floating between the two lines. */
.hero-stage { align-items: flex-start; }
.hero-stage::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex: 0 0 auto; margin-top: .55em;
}
.hero h1 { margin-bottom: 26px; }
.hero .lead { max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 44px; }
.hero-badges li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: .92rem; font-weight: 500; color: var(--navy);
}
/* The red slash from the logo, reused as the bullet */
.slash { width: 10px; height: 16px; flex: 0 0 auto; }
.slash svg { width: 100%; height: 100%; }

.hero-note {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--slate-light); max-width: 520px;
}

/* ---------- Page hero (subpages) ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 92px) 0 clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero .lead { max-width: 700px; }
.page-hero h1 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); margin-bottom: 22px; }
.page-hero-watermark { position: absolute; right: -4%; bottom: -30%; width: min(34vw, 420px); opacity: .7; pointer-events: none; }

/* Where the project comes from, as provenance in the footer rather than as a
   band under the hero — a visitor should meet the fund first. */
.footer-origin {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .84rem; color: rgba(255, 255, 255, .45); max-width: 300px;
}

/* ---------- Card grids ---------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid > .cell { background: var(--white); padding: clamp(28px, 3vw, 40px); }
.section-tint .grid > .cell { background: var(--tint); }
.cell h3 { margin-bottom: 12px; }
.cell p { color: var(--slate); font-size: .97rem; margin: 0; }
.cell-num {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; color: var(--red); margin-bottom: 20px;
}
.cell .link-more { margin-top: 20px; }

/* Bordered card grid without the hairline-grid look */
.cards { display: grid; gap: 22px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 2.6vw, 34px); position: relative;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 3px; height: 0;
  background: var(--red); transition: height .3s var(--ease);
}
.card:hover { border-color: #d6dae1; box-shadow: var(--shadow); transform: translateY(-2px); }
.card:hover::before { height: 46px; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--slate); font-size: .97rem; }
.card-tag {
  display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); border: 1px solid var(--line); border-radius: 99px;
  padding: 4px 12px; margin-bottom: 18px;
}

/* ---------- Layer list (the five-layer process) ----------
   The number sits directly above its heading rather than in a column of its
   own: nothing then has to be optically aligned across columns, and the
   numbering reads the same as the red 01/02 in the card grids.
   The negative margin lets the hover tint and the hairlines run a little wider
   than the text, so a row reads as a band rather than as a boxed cell. */
.layers { border-top: 1px solid var(--line); }
.layer {
  display: grid;
  grid-template-columns: minmax(190px, .82fr) 1.6fr;
  gap: 16px 48px;
  padding: 30px 20px;
  margin: 0 -20px;
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.layer:hover { background: var(--tint); }
.layer-head { display: grid; gap: 9px; align-content: start; }
.layer-no {
  font-family: var(--display); font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; color: var(--red);
}
.layer h3 { margin: 0; }
.layer-body p { color: var(--slate); font-size: .98rem; margin: 0; }
.layer-io { margin: 20px 0 0; display: grid; gap: 10px; }
.layer-io > div { display: flex; gap: 14px; font-size: .86rem; }
.layer-io dt { font-family: var(--display); font-weight: 600; color: var(--navy); flex: 0 0 132px; }
.layer-io dd { margin: 0; color: var(--slate); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.timeline li { position: relative; padding-bottom: 38px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -34px; top: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line);
}
.timeline li.is-now::before { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 5px rgba(225, 29, 46, .12); }
.timeline-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.timeline h3 { font-size: 1.1rem; }
.timeline-status {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light);
  border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px;
}
.timeline li.is-now .timeline-status { color: var(--red); border-color: rgba(225, 29, 46, .32); }
.timeline p { color: var(--slate); font-size: .97rem; margin: 0; }

/* ---------- Navy band ---------- */
.band { background: var(--navy); color: rgba(255, 255, 255, .76); position: relative; overflow: hidden; }
.band h2, .band h3 { color: #fff; }
.band .lead { color: rgba(255, 255, 255, .72); }
.band .section-head p { color: rgba(255, 255, 255, .7); }
.band-watermark { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: min(38vw, 480px); opacity: .12; pointer-events: none; }
.band .container { position: relative; z-index: 1; }
.band .grid { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.band .grid > .cell { background: var(--navy); }
.band .cell p { color: rgba(255, 255, 255, .72); }
.band .cell-num { color: #ff5a68; }
.band-note {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem; color: rgba(255, 255, 255, .55); max-width: 700px;
}

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 16px; }
.checklist li { display: flex; gap: 16px; align-items: flex-start; font-size: 1rem; color: var(--slate); }
.checklist .slash { margin-top: 5px; }

/* ---------- Split (copy + aside) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.aside-box { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 36px); background: var(--white); }
.aside-box h3 { margin-bottom: 14px; }
.aside-box p { color: var(--slate); font-size: .97rem; }
.aside-box .btn { margin-top: 20px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-top: 7px;
  border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate);
  transform: rotate(45deg); transition: transform .25s var(--ease), border-color .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--red); }
.faq-body { padding: 0 0 26px; max-width: 760px; }
.faq-body p { color: var(--slate); font-size: 1rem; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
/* .container supplies the side gutter, so only the block axis is set here;
   the padding shorthand would zero the gutter out and push the text against
   the edge of every screen narrower than the container. */
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 44px; padding-block: clamp(52px, 6vw, 80px); position: relative; z-index: 1; }
.cta-inner h2 { color: #fff; max-width: 620px; }
.cta-inner p { color: rgba(255, 255, 255, .72); margin: 16px 0 0; max-width: 560px; }
.cta-actions { flex: 0 0 auto; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; }
.field label, .field-legend {
  font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--navy);
}
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--navy);
  padding: 13px 15px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-light); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(4, 30, 66, .07);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-error { margin: 0; font-size: .85rem; color: var(--red); }
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.field-hint { margin: 0; font-size: .87rem; color: var(--slate); }

.checkbox { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-family: var(--text); font-weight: 400; font-size: .92rem; color: var(--slate); line-height: 1.55; }
.checkbox input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--navy); flex: 0 0 auto; }
.checkbox a { color: var(--navy); border-bottom: 1px solid var(--line); }
.checkbox a:hover { border-color: var(--red); }

/* Honeypot — off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 38px); display: grid; gap: 20px; }
.form-note { margin: 0; font-size: .9rem; min-height: 1.4em; }
.form-note.is-error { color: var(--red); }

/* ---------- Survey ---------- */
.survey { max-width: 760px; margin: 0 auto; }
.survey-progress { margin-bottom: 34px; }
.survey-progress-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px;
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.survey-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.survey-bar span { display: block; height: 100%; background: var(--red); width: 20%; transition: width .35s var(--ease); }

/* Without JavaScript every step stays on the page and the form works as one
   long questionnaire. The wizard only starts hiding steps once script.js has
   marked the form, so a failed script never blanks the survey. */
.is-wizard .survey-step { display: none; }
.is-wizard .survey-step.is-active { display: block; animation: stepIn .32s var(--ease); }
.survey-step:focus { outline: none; }
.btn[hidden] { display: none; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-wizard .survey-step.is-active { animation: none; } }

/* Fieldsets group the questions for screen readers; the browser's default
   border and inset legend are not wanted. */
.survey-step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.survey-step > legend, .survey-legend {
  font-family: var(--display); font-weight: 700; font-size: 1.55rem; color: var(--navy);
  letter-spacing: -0.02em; margin-bottom: 30px; padding: 0;
}
.q { padding: 28px 0; border-top: 1px solid var(--line); }
.q:first-of-type { border-top: 0; padding-top: 0; }
.q-title { font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--navy); margin: 0 0 6px; }
.q-hint { margin: 0 0 16px; font-size: .87rem; color: var(--slate-light); }
.q-options { display: grid; gap: 10px; }
.q-options.cols-2 { grid-template-columns: 1fr 1fr; }

/* Option rows: the whole row is the target, not just the dot */
.opt {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .97rem; color: var(--navy);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.opt:hover { border-color: var(--navy-70); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-mark {
  flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--slate-light);
  border-radius: 50%; position: relative; transition: border-color .18s var(--ease);
}
.opt-check .opt-mark { border-radius: 3px; }
.opt-mark::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--red); transform: scale(0); transition: transform .18s var(--ease);
}
.opt-check .opt-mark::after { border-radius: 1px; inset: 2px; }
.opt input:checked ~ .opt-mark { border-color: var(--red); }
.opt input:checked ~ .opt-mark::after { transform: scale(1); }
.opt:has(input:checked) { border-color: var(--red); background: rgba(225, 29, 46, .03); }
.opt input:focus-visible ~ .opt-mark { outline: 2px solid var(--red); outline-offset: 3px; }
/* An unanswered required group when the visitor tries to move on */
.q-options.has-error .opt { border-color: rgba(225, 29, 46, .5); }

.survey-actions { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.survey-actions .btn-back { margin-right: auto; }
.survey-error { margin: 0; font-size: .88rem; color: var(--red); min-height: 1.3em; }

/* ---------- Thanks / narrow pages ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.45rem; margin: 46px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--slate); font-size: 1rem; }
.prose ul { display: grid; gap: 10px; margin: 0 0 1.1em; }
/* Not flex: a flex container blockifies its inline children, so a <strong>
   inside the item would become a flex item of its own, taking the gap as a
   space before the colon and wrapping in its own column. */
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; background: var(--red);
}
.prose a { color: var(--navy); border-bottom: 1px solid var(--line); }
.prose a:hover { border-color: var(--red); }
.prose-meta { font-size: .85rem; color: var(--slate-light); padding-top: 22px; border-top: 1px solid var(--line); margin-top: 46px; }

.centered { text-align: center; max-width: 620px; margin: 0 auto; padding-block: clamp(80px, 12vw, 160px); }
.centered .lead { margin: 20px auto 34px; }
.centered .hero-actions { justify-content: center; }

/* ---------- Contact channels ---------- */
.channels { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 34px; }
.channel { background: var(--white); padding: 24px 28px; display: grid; gap: 4px; }
.channel dt { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.channel dd { margin: 0; font-size: 1.05rem; color: var(--navy); font-family: var(--display); font-weight: 500; }
.channel dd a { border-bottom: 1px solid var(--line); }
.channel dd a:hover { border-color: var(--red); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .62); padding: clamp(56px, 6vw, 80px) 0 32px; font-size: .92rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 46px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-brand img { width: 150px; margin-bottom: 20px; }
.footer-brand p { color: rgba(255, 255, 255, .62); max-width: 300px; font-size: .92rem; }
.footer-col h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.footer-col li + li { margin-top: 11px; }
.footer-col a { color: rgba(255, 255, 255, .62); transition: color .18s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-legal { padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-legal p { font-size: .81rem; line-height: 1.6; color: rgba(255, 255, 255, .45); margin: 0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: .84rem; color: rgba(255, 255, 255, .45); }

/* ---------- To top ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--navy); border: 0; border-radius: var(--radius); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 19px; height: 19px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  /* Tablet: three across is too narrow, one across leaves a 700px line of
     text over three lines of copy. Two is the honest middle. The odd third
     cell spans the row, because .grid paints its gaps and an empty cell would
     show up as a grey tile. */
  .grid-3, .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > .cell:last-child, .cards-3 > :last-child { grid-column: 1 / -1; }
  /* Single column: heading block, then its paragraph, with no column rhythm
     left to hold and therefore no gap sitting between the two. */
  /* No room to let the band overhang here, so the rules line up with the text
     like every other rule on the page. */
  .layer { grid-template-columns: 1fr; gap: 13px; padding: 26px 0; margin: 0; }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  /* The switch moves next to the burger so the two controls that are always
     reachable sit together, and the nav panel can take the full width. */
  .lang-switch { margin-left: auto; margin-right: 4px; }
  .lang-switch .lang { padding: 5px 9px; }
  /* A full-height sheet, not a dropdown. A panel that stops mid-page leaves the
     copy showing through underneath, and on the home page the hero's call to
     action landed just below the panel's own: two red buttons a thumb apart. */
  .nav {
    /* The panel lives inside .site-header, and the header's backdrop-filter
       makes it the containing block for fixed children: "bottom: 0" would
       resolve against the 78px header, not the screen. Hence an explicit
       height. dvh so the sheet still ends at the bottom once mobile browser
       chrome slides away; vh first for anything that lacks it. */
    position: fixed; inset: 78px 0 auto; z-index: 99;
    height: calc(100vh - 78px); height: calc(100dvh - 78px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    padding: 8px 24px 32px;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  /* Without this the page simply shows through below the panel and the menu
     reads as a half-drawn box floating over the copy. The backdrop sits under
     the panel and the header, and the page underneath stops scrolling. */
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: 98;
    background: rgba(4, 30, 66, .42);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  body.nav-open { overflow: hidden; }
  .nav > a:not(.btn) { padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.02rem; }
  .nav > a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: auto; width: 100%; }

  /* A 132px label column leaves the value about 160px on a phone, which breaks
     both halves into ragged stacks. The label goes above its value instead. */
  .layer-io > div { display: block; }
  .layer-io dt { margin-bottom: 2px; }
  .hero-art { right: -22%; width: 78vw; opacity: .55; }
  .page-hero-watermark { display: none; }
  .hero-badges { gap: 12px 22px; }
  .trust-inner { align-items: flex-start; gap: 16px; }
  .to-top { right: 16px; bottom: 16px; }
  /* The button floats over the last footer line at this width, so the line
     gets room of its own rather than being half-covered. */
  .footer-bottom { padding-bottom: 46px; }
  .survey-actions { flex-wrap: wrap; }
  .survey-actions .btn { flex: 1 1 auto; }
}

/* Below this the card grids stop being grids: two columns of roughly 280px is
   about as narrow as a paragraph reads, and the survey's paired fields stop
   fitting side by side. */
@media (max-width: 620px) {
  .grid-3, .grid-4, .cards-2, .cards-3 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .field-row { grid-template-columns: 1fr; }
  .q-options.cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Headings carry a <br> placed for the desktop measure. At phone width it
     forces a break the line already had to make, leaving a one-word last line,
     so the browser wraps them instead and text-wrap:balance evens the rag. */
  h1 br, h2 br { display: none; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
  .logo img { width: 118px; }
  .to-top { width: 40px; height: 40px; }
  .to-top svg { width: 17px; height: 17px; }
}