/* --- fonts ---------------------------------------------------------------
   Self-hosted. These used to load from fonts.googleapis.com, which meant every
   visitor's IP reached Google on every page load, before anything else ran.
   Nothing third-party is contacted for type any more.

   Fraunces and Inter Tight are variable: ONE file covers the whole weight range
   below, which is why the same file is not repeated per weight. The range is
   exactly what was requested from Google, because the axis in the file is
   subset to it — claiming 100..900 would let the browser ask for a weight the
   file cannot produce.

   unicode-range is copied verbatim from Google's own CSS and is load-bearing:
   it is what stops a visitor downloading latin-ext when the page has no
   characters that need it. Portuguese accents live in the latin subset, so in
   practice only the latin files travel.

   Regenerate with: python3 website-src/fetch_fonts.py
   Fraunces, Instrument Serif and Inter Tight are all SIL Open Font License 1.1;
   see assets/fonts/OFL.txt.
   ------------------------------------------------------------------------- */

/* Fraunces — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif — latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Serif — latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter Tight — latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-tight-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter Tight — latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-tight-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Kairos Wealth Tech — kairoswealth.tech
   Converted from the Claude Design canvas document to plain static HTML/CSS:
   no React, no runtime, no client-side rendering.
   ========================================================================== */

:root {
  --ink:      #04302A;  /* page background            */
  --ink-2:    #053A32;  /* alternating section band   */
  --sand:     #EDEFE9;  /* primary text               */
  --gold:     #E8AE47;  /* accent / CTA               */
  --gold-hi:  #F3C878;  /* accent hover               */
  --green:    #5D9E7E;  /* secondary accent — borders, glows, large type   */
  /* #5D9E7E only reaches 4.02:1 on the --ink-2 band, so small green labels
     use this slightly lighter tint (4.90:1 on band, 5.56:1 on ink). */
  --green-text: #6FAE8E;

  --line:     rgba(237, 239, 233, .12);
  --line-2:   rgba(237, 239, 233, .18);
  --body:     rgba(237, 239, 233, .78);
  --muted:    rgba(237, 239, 233, .66);

  --serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --italic:   'Instrument Serif', Georgia, serif;
  --sans:     'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad:      clamp(20px, 5vw, 40px);   /* section side padding */
  --shell:    1400px;                   /* content max width    */
  --rail:     280px;                    /* label column width   */
  --gutter:   60px;
}

/* --- base ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* height:auto is required — the width/height attributes on <img> (kept to
   reserve layout space and avoid shift) are presentational hints that would
   otherwise override any CSS width we set. */
img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
a:hover { color: var(--gold-hi); }

::selection { background: var(--gold); color: var(--ink); }

/* Keyboard focus must stay visible — the design defines no focus state. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: var(--ink);
}

/* --- navigation ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--pad);
  background: rgba(4, 48, 42, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237, 239, 233, .1);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sand);
  flex: 0 0 auto;
}
.nav__brand:hover { color: var(--sand); }
.nav__brand img { width: 34px; height: 34px; object-fit: contain; }

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .16em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13.5px;
  letter-spacing: .06em;
  color: rgba(237, 239, 233, .72);
}
.nav__links > a { color: inherit; white-space: nowrap; }
.nav__links a { color: inherit; }
.nav__links a:hover { color: var(--sand); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  white-space: nowrap;
}
.nav__cta:hover { background: var(--gold); color: var(--ink); }

/* --- language switcher --------------------------------------------------- */
/* Two static documents, one per language (/ = English, /pt/ = pt-BR), so the
   switch is a plain link — no JS, no cookie, no client-side text swapping. */

.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .1em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.lang__on { color: var(--sand); font-weight: 500; }
.lang__sep { color: rgba(237, 239, 233, .3); }
.lang a { color: rgba(237, 239, 233, .6); }
.lang a:hover { color: var(--sand); }

.lang--footer {
  padding: 4px 11px;
  font-size: 11.5px;
  letter-spacing: .08em;
}

/* --- layout primitives --------------------------------------------------- */

.section {
  padding: 120px var(--pad);
  scroll-margin-top: 84px;      /* clear the sticky bar on anchor jumps */
}
.section--band {
  background: var(--ink-2);
  border-top: 1px solid rgba(237, 239, 233, .1);
  border-bottom: 1px solid rgba(237, 239, 233, .1);
  padding-block: 110px;
}
.section--band + .section--band { border-top: 0; }

.shell { max-width: var(--shell); margin-inline: auto; }

/* label rail on the left, content on the right */
.row {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--gutter);
}
.row--end { align-items: end; }

.eyebrow {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-text);
  margin: 0;
}

.h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(46px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.14;
  letter-spacing: -.01em;
}
.h2--sm { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.16; }
.h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
}

.accent {
  font-family: var(--italic);
  font-style: italic;
  color: var(--gold);
}

.lead {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--body);
  text-wrap: pretty;
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--gutter);
  align-items: center;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 130px var(--pad) 110px;
  scroll-margin-top: 84px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid rgba(232, 174, 71, .4);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 34px;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
}

.hero__copy {
  max-width: 560px;
  margin: 32px 0 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  border: 1px solid transparent;
}
.btn--solid {
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: .02em;
}
.btn--solid:hover { background: var(--gold-hi); color: var(--ink); }
.btn--ghost {
  border-color: rgba(237, 239, 233, .3);
  color: var(--sand);
}
.btn--ghost:hover { border-color: var(--green); color: var(--green); }

.hero__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__mark::before {
  content: '';
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 158, 126, .28), transparent 68%);
}
.hero__mark img {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
}

/* --- mission ------------------------------------------------------------- */

.mission__body { max-width: 840px; }
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  margin-top: 48px;
}
.pair p { margin: 0; }

.pull {
  margin: 48px 0 0;
  font-family: var(--italic);
  font-style: italic;
  font-size: 28px;
  line-height: 1.4;
  color: var(--gold);
  max-width: 640px;
}

/* --- problem grid -------------------------------------------------------- */

.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 70px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cell {
  padding: 36px 32px;
  background: var(--ink-2);
}
.cell__num {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: .12em;
}
.cell .h3 { margin: 16px 0 12px; font-size: 22px; }
.cell p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* --- approach ------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 64px;
}
.card {
  padding: 34px 30px;
  border-radius: 18px;
  border: 1px solid rgba(93, 158, 126, .35);
  background: linear-gradient(180deg, rgba(93, 158, 126, .12), transparent);
}
.card .h3 { margin: 0 0 14px; }
.card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--body);
}

.panel {
  margin-top: 64px;
  padding: 36px 40px;
  border-radius: 18px;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.panel__label {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-text);
  margin: 0 0 26px;
}
.panel ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}

/* --- vision -------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 30px 0 0;
  font-family: var(--italic);
  font-style: italic;
  font-size: 24px;
  color: rgba(237, 239, 233, .62);
}
.chips .is-gold { color: var(--gold); }

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 66px;
}
.columns h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(237, 239, 233, .6);
  margin: 0 0 22px;
}
.stack {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
}
.stack li {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.stack li:last-child { padding-bottom: 0; border-bottom: 0; }

/* --- values -------------------------------------------------------------- */

.values__note {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.values__list {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0 34px;
  align-items: baseline;
  margin: 0;
}
.values__letter {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  color: var(--gold);
  margin: 0;
}
.values__item {
  padding: 26px 0;
  border-bottom: 1px solid rgba(237, 239, 233, .14);
  margin: 0;
}
.values__list > .values__item:last-child { border-bottom: 0; }
.values__item .h3 { margin: 0 0 8px; }
.values__item p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--body);
  max-width: 640px;
}

/* --- manifesto ----------------------------------------------------------- */

.manifesto__body { max-width: 900px; }
.manifesto__lede {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.28;
  letter-spacing: -.01em;
}
.tenets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16.5px;
  line-height: 1.6;
}
.tenets li {
  padding: 20px 0;
  border-top: 1px solid rgba(237, 239, 233, .14);
  color: var(--body);
}
.tenets strong {
  font-weight: 500;
  color: var(--gold);
}
.closer {
  margin: 48px 0 0;
  font-family: var(--italic);
  font-style: italic;
  font-size: 30px;
  color: var(--green);
}

/* --- team ---------------------------------------------------------------- */

.team {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1000px;
}
.team__photo {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  background: var(--ink);
}
.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.team__name { margin: 0; font-size: 32px; }
.team__role {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.team p {
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  max-width: 620px;
  text-wrap: pretty;
}
.team p + p { margin-top: 20px; color: var(--muted); }
.team__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 15px;
}

/* --- contact ------------------------------------------------------------- */

.contact {
  padding: 130px var(--pad);
  text-align: center;
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
}
.contact__inner { max-width: 820px; margin-inline: auto; }
.contact .h2 {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.08;
}
.contact p {
  margin: 24px auto 0;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}
.contact .actions { justify-content: center; }
.contact .btn { padding: 16px 32px; font-size: 15.5px; }

/* --- footer -------------------------------------------------------------- */

.footer {
  padding: 44px var(--pad);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(237, 239, 233, .62);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__brand img { width: 26px; height: 26px; object-fit: contain; }
.footer__brand .wordmark {
  font-size: 13px;
  color: rgba(237, 239, 233, .85);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.footer__links a { color: inherit; }
.footer__links a:hover { color: var(--sand); }

/* --- entrance animation -------------------------------------------------- */

@keyframes kfRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
[data-rise] { animation: kfRise .9s cubic-bezier(.2, .7, .2, 1) both; }
[data-rise="2"] { animation-delay: .08s; }
[data-rise="3"] { animation-delay: .16s; }

/* ==========================================================================
   Responsive — the source design was fixed-width desktop only.
   ========================================================================== */

@media (max-width: 1080px) {
  .grid-6,
  .cards,
  .panel ul { grid-template-columns: repeat(2, 1fr); }

  .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 96px; }
  .hero__mark { order: -1; }
  .hero__mark img { width: min(280px, 62%); }
  .hero__mark::before { width: 62%; }
}

/* The bar now carries the switcher too, and the Portuguese labels are longer
   than the English ones ("O Problema" vs "The Problem"), so the section links
   need a tighter gap before the 880px collapse to avoid wrapping the bar. */
@media (max-width: 1040px) {
  .nav__links { gap: 20px; }
}

@media (max-width: 940px) {
  :root { --gutter: 34px; }

  .row { grid-template-columns: 1fr; gap: 22px; }
  .team { grid-template-columns: 1fr; gap: 32px; max-width: 520px; }
  .team__photo { max-width: 300px; }
}

@media (max-width: 880px) {
  /* The inline section links do not fit a phone bar; the footer keeps them.
     Child selector, not descendant: the .lang links are nested and must stay. */
  .nav__links > a:not(.nav__cta) { display: none; }
  .nav__links { gap: 14px; }
}

@media (max-width: 720px) {
  .section { padding-block: 80px; }
  .section--band { padding-block: 76px; }
  .contact { padding-block: 92px; }

  .grid-6,
  .cards,
  .panel ul,
  .pair,
  .columns,
  .tenets { grid-template-columns: 1fr; }

  .pair { gap: 22px; margin-top: 32px; }
  .columns { gap: 40px; margin-top: 44px; }
  .cards { gap: 18px; margin-top: 40px; }
  .grid-6 { margin-top: 44px; }
  .panel { padding: 28px 24px; margin-top: 44px; }
  .panel ul { gap: 16px; }
  .tenets { margin-top: 40px; }
  .tenets li { padding: 16px 0; }

  .cell { padding: 28px 24px; }
  .pull { font-size: 24px; margin-top: 36px; }
  .closer { font-size: 25px; }
  .chips { gap: 18px; font-size: 21px; }

  .values__list { grid-template-columns: 54px 1fr; gap: 0 18px; }
  .values__letter { font-size: 38px; }
  .values__item { padding: 20px 0; }

  /* Keep the headline above the fold on a phone: the mark leads, but small. */
  .hero { padding-top: 60px; padding-bottom: 76px; gap: 30px; }
  .hero__mark img { width: min(190px, 52%); }
  .hero__mark::before { width: 52%; }
  .pill { margin-bottom: 26px; letter-spacing: .14em; }

  .hero__copy { font-size: 18px; margin-top: 26px; }
  .actions { margin-top: 34px; }
  .btn { padding: 14px 26px; }

  .footer { gap: 18px; }
  .footer__links { gap: 18px; }
}

@media (max-width: 560px) {
  /* Three items now share the bar (brand · language · CTA) and 375px cannot
     hold all of them. Drop the wordmark: the mark alone carries the brand up
     top, and the footer still shows the full lockup. */
  .nav { gap: 12px; }
  .nav__brand .wordmark { display: none; }
  .lang { gap: 5px; padding: 5px 10px; }
}

@media (max-width: 420px) {
  .actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .pill { letter-spacing: .12em; }
}

/* --- motion / print ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .nav { position: static; }
  body { background: #fff; color: #000; }
}