/* ==========================================================================
   MAREVIA — landing styles
   Sections follow the order of the page: tokens → base → layout → components.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  --ink:          #161B1F;
  --ink-strong:   #12171B;
  --ink-800:      #20262B;
  --body:         #4E585F;
  --muted:        #69737A;
  --muted-2:      #7C878E;
  --muted-3:      #A2ACB2;

  --line:         #E2E7EA;
  --line-soft:    #EAEFF1;
  --line-strong:  #C9D2D7;

  --surface:      #F4F6F7;
  --surface-accent:#E8F4F9;

  --accent:       #2E9FC9;
  --accent-dark:  #17789E;
  --accent-light: #7FD3EE;

  --deep:         #0B2430;
  --deep-900:     #07141C;
  --deep-600:     #123B4C;
  --deep-footer:  #081C26;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --maxw: 1280px;
  --pad: 40px;
  --header-h: 78px;
  --section-y: 120px;
}

/* ----------------------------------------------------------------- 2. Base */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

a { color: var(--accent-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }

button { font-family: inherit; }

h1, h2, h3, p { margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- 3. Layout */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap--section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.section--line   { border-bottom: 1px solid var(--line); }
.section--muted  { background: var(--surface); }

/* Anchor targets must clear the sticky header. The hero is exempt: it is
   deliberately pulled up underneath it. */
main section[id] { scroll-margin-top: var(--header-h); }
#top { scroll-margin-top: 0; }

/* Two-column splits. The single-column fallback lives at the end of the file
   so it overrides every modifier by source order. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
}
.split--42      { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); }
.split--44      { grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); }
.split--quality { gap: 24px; }
.split--contact { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; }
.split--footer  { grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); gap: 48px; }
.split--top     { align-items: start; }

/* ----------------------------------------------------------- 4. Typography */

.eyebrow {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 24px;
  font-family: var(--mono); font-size: 11px;
}
.eyebrow__num  { letter-spacing: .14em; color: var(--accent); }
.eyebrow__text { letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }
.eyebrow--light .eyebrow__num,
.eyebrow--light .eyebrow__text { color: var(--accent-light); }

.label {
  display: block; padding: 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.label--offset    { margin-bottom: 22px; }
.label--offset-lg { margin-bottom: 26px; }

.h2 {
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.09; letter-spacing: -.022em; font-weight: 600;
  color: var(--ink-strong); text-wrap: balance;
}
.h2--gap    { margin-bottom: 60px; }
.h2--gap-md { margin-bottom: 32px; }
.h2--gap-sm { margin-bottom: 22px; }
.h2--light  { color: #fff; }

.lead   { font-size: 17px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.lead--tight  { font-size: 16.5px; line-height: 1.62; }
.lead--offset { margin-top: 24px; }
.lead--stacked + .lead--stacked { margin-top: 18px; }

/* --------------------------------------------------------------- 5. Header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .35s, border-color .35s;
}
.site-header__inner {
  display: flex; align-items: center; gap: 32px;
  height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.logo__mark { height: 32px; width: auto; }
.logo__word { height: 15px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.nav a { font-size: 14px; font-weight: 500; color: var(--body); }
.nav a:hover { color: var(--accent-dark); }
/* The in-menu CTA duplicate only exists for the mobile drop-down. */
.nav .btn--cta { display: none; }

.lang {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; padding-left: 26px;
  border-left: 1px solid var(--line);
}
.lang a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; padding: 6px 8px; color: var(--muted);
}
.lang a:hover { color: var(--ink); }
.lang a.is-active { color: var(--ink); }
.lang__sep { color: var(--line-strong); font-size: 12px; }

/* Burger → cross. All three bars are absolutely positioned on the same
   centre, so the open state folds into a symmetric X. */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  cursor: pointer; padding: 0;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute; left: 50%; margin-left: -9px;
  width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .25s ease, background-color .2s;
}
.nav-toggle__bars { top: 50%; margin-top: -.75px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; left: 0; margin-left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.site-header.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Header floating over the hero video */
.site-header.is-hero {
  background: linear-gradient(180deg, rgba(7, 20, 28, .55) 0%, rgba(7, 20, 28, 0) 100%);
  border-bottom-color: transparent;
}
.site-header.is-hero .logo img       { filter: brightness(0) invert(1); }
.site-header.is-hero .nav a          { color: rgba(255, 255, 255, .88); }
.site-header.is-hero .nav a:hover    { color: var(--accent-light); }
.site-header.is-hero .lang           { border-left-color: rgba(255, 255, 255, .3); }
.site-header.is-hero .lang a         { color: rgba(255, 255, 255, .55); }
.site-header.is-hero .lang a.is-active { color: #fff; }
.site-header.is-hero .nav-toggle     { border-color: rgba(255, 255, 255, .35); }
.site-header.is-hero .nav-toggle__bars,
.site-header.is-hero .nav-toggle__bars::before,
.site-header.is-hero .nav-toggle__bars::after { background: #fff; }
.site-header.is-hero.is-open .nav-toggle__bars { background: transparent; }
.site-header.is-hero .btn--cta       { background: #fff; color: var(--deep); }
.site-header.is-hero .btn--cta:hover { background: var(--accent-light); color: var(--deep); }

/* --------------------------------------------------------------- 6. Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 2px;
  font-family: var(--sans); font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 16px; }
.btn--md { height: 48px; padding: 0 24px; font-size: 15px; }

.btn--dark  { background: var(--deep); color: #fff; }
.btn--dark:hover { background: var(--accent); color: #fff; }

.btn--light { background: #fff; color: var(--deep); }
.btn--light:hover { background: var(--accent-light); color: var(--deep); }

.btn--ghost {
  gap: 10px; padding: 0 26px;
  background: rgba(7, 20, 28, .35); color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(3px);
}
.btn--ghost:hover { background: rgba(7, 20, 28, .6); border-color: var(--accent-light); color: #fff; }
.btn--ghost small { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, .7); }

.btn--outline {
  background: #fff; color: var(--ink-800);
  border: 1px solid var(--line-strong);
}
.btn--outline:hover { border-color: var(--accent); color: var(--ink-800); }

/* ------------------------------------------------------------------ 7. Hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(var(--header-h) * -1);
  background: var(--deep-900);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.hero__scrim { position: absolute; inset: 0; pointer-events: none; }
.hero__scrim--v {
  background: linear-gradient(180deg, rgba(7,20,28,.58) 0%, rgba(7,20,28,.24) 32%, rgba(7,20,28,.88) 100%);
}
.hero__scrim--h {
  background: linear-gradient(100deg, rgba(7,20,28,.6) 0%, rgba(7,20,28,.12) 60%, rgba(7,20,28,0) 100%);
}
.hero__inner {
  position: relative; width: 100%;
  padding-top: 158px; padding-bottom: 60px;
  pointer-events: none;
}
.hero__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.hero__kicker span:first-child { width: 28px; height: 2px; background: var(--accent-light); display: block; }
.hero__kicker span:last-child {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-light);
}
.hero__title {
  font-size: clamp(40px, 5vw, 74px);
  line-height: 1.02; letter-spacing: -.028em; font-weight: 600;
  margin-bottom: 24px; color: #fff; max-width: 960px;
  text-shadow: 0 2px 26px rgba(7, 20, 28, .55); text-wrap: balance;
}
.hero__lead {
  font-size: 20px; line-height: 1.55; color: rgba(255, 255, 255, .88);
  margin-bottom: 38px; max-width: 660px;
  text-shadow: 0 1px 16px rgba(7, 20, 28, .65); text-wrap: pretty;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 20px; pointer-events: auto;
}
.hero__note {
  font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72);
  max-width: 520px; text-shadow: 0 1px 10px rgba(7, 20, 28, .6);
}
.hero__foot {
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: center; justify-content: space-between;
  margin-top: 52px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.hero__place { display: flex; align-items: center; gap: 9px; }
.hero__place span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); display: block; }
.hero__place span:last-child {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .8);
}
.hero__scroll {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.hero__scroll:hover { color: var(--accent-light); }
.hero__scroll span { width: 38px; height: 1px; background: rgba(255, 255, 255, .5); display: block; }

/* ----------------------------------------------------------------- 8. Facts */

.facts { background: linear-gradient(160deg, var(--deep) 0%, var(--deep-600) 100%); }
.facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.facts__item {
  padding: 56px 34px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.facts__item:first-child { padding-left: 0; }
.facts__item:last-child  { padding-right: 0; border-right: 0; }
.facts__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 18px;
}
.facts__value {
  font-size: 26px; font-weight: 600; line-height: 1.2;
  letter-spacing: -.015em; color: #fff;
}
.facts__value b { color: var(--accent-light); font-weight: 600; }
.facts__text { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .6); margin-top: 10px; }

/* ----------------------------------------------------------------- 9. About */

.about { position: relative; overflow: hidden; }
.about__watermark {
  position: absolute; left: -4%; bottom: -4%;
  width: 44%; height: auto; opacity: .045;
  pointer-events: none; user-select: none;
}
.about__inner { position: relative; }
.about__text { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.about__text p:last-child { padding-top: 22px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------- 10. Product cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(11, 36, 48, .12);
}
.card__media { position: relative; height: 260px; background: var(--surface-accent); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted-2); }
.card__badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-dark); background: var(--surface-accent); padding: 4px 8px;
}
.card__title {
  font-size: 21px; font-weight: 600; line-height: 1.2;
  letter-spacing: -.01em; color: var(--ink-strong);
}
.card__text { font-size: 14.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ------------------------------------------------------------ 11. Statement */

.statement { position: relative; height: 520px; background: var(--deep); overflow: hidden; }
.statement__media { position: absolute; inset: 0; }
.statement__media img { width: 100%; height: 100%; object-fit: cover; }
.statement__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(95deg, rgba(11,36,48,.34) 0%, rgba(11,36,48,.24) 38%, rgba(11,36,48,.62) 100%);
}
.statement__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end; text-align: right; gap: 24px;
  pointer-events: none;
}
.statement__mark { width: 104px; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.statement__slogan {
  font-size: clamp(28px, 3.4vw, 50px); font-weight: 600; line-height: 1.12;
  letter-spacing: .06em; color: #fff; text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(11, 36, 48, .6);
}
.statement__rule { width: 64px; height: 2px; background: var(--accent-light); }
.statement__text {
  font-size: 17px; line-height: 1.6; color: #fff; max-width: 430px;
  text-shadow: 0 1px 12px rgba(11, 36, 48, .75); text-wrap: pretty;
}

/* ------------------------------------------------------------- 12. Approach */

.approach__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.approach__media { position: relative; height: 420px; background: var(--surface); overflow: hidden; }
.approach__media img { width: 100%; height: 100%; object-fit: cover; }

.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 20px 24px; padding: 28px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--accent-dark); background: var(--surface-accent);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.step__title {
  font-size: 20px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; margin-bottom: 10px; color: var(--ink-strong);
}
.step__text { font-size: 15.5px; line-height: 1.62; color: var(--muted); text-wrap: pretty; }

/* -------------------------------------------------------------- 13. Quality */

.quality__card { background: #fff; border: 1px solid var(--line); padding: 38px 34px; }
.quality__intro { font-size: 16px; line-height: 1.6; color: var(--body); margin-bottom: 26px; text-wrap: pretty; }
.quality__list { display: flex; flex-direction: column; }
.quality__item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--line-soft);
}
.quality__item span:first-child {
  width: 6px; height: 6px; background: var(--accent);
  display: block; margin-top: 8px; flex: 0 0 auto;
}
.quality__item span:last-child { font-size: 16.5px; line-height: 1.5; color: var(--ink-800); font-weight: 500; }
.quality__media { position: relative; height: 240px; background: var(--surface); margin-top: 32px; overflow: hidden; }
.quality__media img { width: 100%; height: 100%; object-fit: cover; }

.quality__panel {
  background: linear-gradient(165deg, var(--deep-600) 0%, var(--deep) 65%);
  padding: 38px 34px; display: flex; flex-direction: column;
}
.quality__panel .quality__intro { color: rgba(255, 255, 255, .72); }
.checks { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: center; }
.checks > * { padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.checks > *:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.checks__num { font-family: var(--mono); font-size: 11px; color: var(--accent-light); }
.checks__text { font-size: 16px; line-height: 1.45; color: #fff; }
.quality__foot { margin-top: auto; padding-top: 34px; }
.quality__foot p {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------- 14. Offer grids (07 / 08) */

.offer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-bottom: 36px;
}
.offer-grid__item {
  background: #fff; padding: 24px 22px;
  display: flex; gap: 14px; align-items: flex-start;
}
.offer-grid__item--wide { grid-column: span 2; }
.offer-grid__num { font-family: var(--mono); font-size: 11px; color: var(--accent); padding-top: 3px; }
.offer-grid__text { font-size: 15.5px; line-height: 1.5; color: var(--ink-800); }

.cta-row { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.cta-row p { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 340px; text-wrap: pretty; }

/* ----------------------------------------------------------------- 15. Team */

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.team__card {
  border: 1px solid var(--line); padding: 38px 34px;
  display: flex; flex-direction: column; gap: 20px;
}
.team__head { display: flex; align-items: center; gap: 20px; }
.team__photo {
  width: 116px; height: 116px; border-radius: 50%; overflow: hidden;
  background: var(--surface-accent); border: 1px solid var(--line);
  flex: 0 0 auto; position: relative;
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__name {
  font-size: 22px; font-weight: 600; line-height: 1.2;
  letter-spacing: -.015em; margin-bottom: 6px; color: var(--ink-strong);
}
.team__role {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.team__bio {
  font-size: 16px; line-height: 1.62; color: var(--body);
  padding-top: 20px; border-top: 1px solid var(--line-soft); text-wrap: pretty;
}

/* ------------------------------------------------------------ 16. Geography */

.geo__head { margin-bottom: 56px; }
.geo__text { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.geo__map { background: #fff; border: 1px solid var(--line); }
.geo__map iframe { width: 100%; height: 520px; border: 0; display: block; }
.geo__legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: 1px solid var(--line);
}
.geo__cell { padding: 26px 30px; border-right: 1px solid var(--line); }
.geo__cell:last-child { border-right: 0; }
.geo__kind { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.geo__kind span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: block; }
.geo__kind span:last-child {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.geo__place { font-size: 17px; font-weight: 600; color: var(--ink-strong); line-height: 1.35; }
.geo__note { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

/* -------------------------------------------------------------- 17. Contact */

.contact {
  scroll-margin-top: var(--header-h);
  background: linear-gradient(170deg, var(--deep) 0%, #143F51 100%);
}
.contact__title {
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06;
  letter-spacing: -.025em; font-weight: 600; margin-bottom: 20px;
  color: #fff; max-width: 880px; text-wrap: balance;
}
.contact__lead {
  font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .68);
  margin-bottom: 56px; max-width: 640px; text-wrap: pretty;
}
.contact__form { background: #fff; padding: 44px 40px; }
.contact__side { background: #fff; padding: 38px 34px; }

.choice-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-bottom: 40px; }
.choice__option {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 2px;
  cursor: pointer; text-align: left; position: relative;
  font: 600 15px var(--sans); color: var(--ink-800);
  transition: border-color .2s;
}
.choice__option:hover { border-color: var(--accent); }
.choice__option input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.choice__dot {
  width: 16px; height: 16px; border: 1px solid var(--muted-3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.choice__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.choice__option input:checked ~ .choice__dot::after { background: var(--accent); }
.choice__option:focus-within { border-color: var(--accent); outline: 2px solid rgba(46, 159, 201, .3); outline-offset: 2px; }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 24px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field--wide { grid-column: span 2; }
.field__label { font-size: 13px; font-weight: 500; color: var(--muted); }
.field input, .field textarea {
  border: 1px solid var(--line-strong); border-radius: 2px;
  font: 400 15px var(--sans); color: var(--ink-strong);
  background: #fff; outline: none; transition: border-color .2s;
}
.field input { height: 50px; padding: 0 14px; }
.field textarea { padding: 14px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }

.upload {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin: 26px 0 34px; padding: 20px 22px;
  border: 1px dashed var(--line-strong); border-radius: 2px;
}
.upload__hint {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); flex: 0 0 auto;
}
.upload__btn {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: 14px; font-weight: 600; color: var(--ink-800);
  cursor: pointer; flex: 0 0 auto; transition: border-color .2s;
}
.upload__btn:hover { border-color: var(--accent); }
.upload__btn input { display: none; }
.upload__name {
  font-size: 14px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.submit-row span { font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 300px; }

.form-error {
  margin-bottom: 26px; padding: 16px 18px;
  border: 1px solid #E4B4B4; background: #FCF3F3; border-radius: 2px;
  font-size: 15px; line-height: 1.5; color: #8C3B3B;
}

.thanks { border: 1px solid var(--line-strong); padding: 56px 44px; background: var(--surface); }
.thanks__icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 26px;
  color: #fff; font-size: 20px; font-weight: 600; line-height: 1;
}
.thanks__title { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 14px; color: var(--ink-strong); }
.thanks__text { font-size: 17px; line-height: 1.6; color: var(--body); margin-bottom: 28px; max-width: 460px; text-wrap: pretty; }

.contacts-list { display: flex; flex-direction: column; }
.contacts-list__row { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.contacts-list__row:last-child { border-bottom: 1px solid var(--line-soft); }
.contacts-list__key { font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.contacts-list__val { font-size: 17px; font-weight: 600; color: var(--ink-strong); }
.contacts-list__val:hover { color: var(--accent-dark); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-800);
}
.chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.chip { gap: 8px; }
.chip__icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
.chip:hover .chip__icon { opacity: 1; }
.chips__note {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 12px;
}

.contacts-list + .label--offset-lg { margin-top: 32px; margin-bottom: 18px; }

.offices { display: flex; flex-direction: column; }
.offices__row { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.offices__name { font-size: 15.5px; font-weight: 600; color: var(--ink-strong); margin-bottom: 6px; }
.offices__addr { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* --------------------------------------------------------------- 18. Footer */

.site-footer { background: var(--deep-footer); }
.site-footer__inner { padding-top: 56px; padding-bottom: 40px; }
.site-footer__top { padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.site-footer__logo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.site-footer__logo img { filter: brightness(0) invert(1); }
.site-footer__logo img:first-child { height: 44px; width: auto; }
.site-footer__logo img:last-child  { height: 19px; width: auto; }
.site-footer__about { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .55); max-width: 320px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(127, 211, 238, .8); margin-bottom: 2px;
}
.site-footer__col a { font-size: 14px; color: rgba(255, 255, 255, .72); }
.site-footer__col a:hover { color: var(--accent-light); }
.site-footer__inline { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.site-footer__inline a { display: inline-flex; align-items: center; gap: 7px; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center; padding-top: 26px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
}
.site-footer__copy   { letter-spacing: .16em; color: rgba(255, 255, 255, .42); }
.site-footer__slogan { letter-spacing: .22em; color: var(--accent-light); }

/* ------------------------------------------------------------ 19. Animation */

@keyframes mv-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  .reveal {
    animation: mv-reveal .9s cubic-bezier(.22, .61, .36, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

/* ---------------------------------------------------------- 20. Responsive */

@media (max-width: 1180px) {
  .nav { gap: 15px; }
  .nav a { font-size: 13px; }
}

@media (max-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .approach__aside { position: static; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .lang { margin-left: auto; order: 2; }
  .site-header__inner { gap: 16px; }
  .site-header .btn--cta { display: none; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
    box-shadow: 0 24px 40px rgba(11, 36, 48, .12);
  }
  .site-header.is-open .nav { display: flex; }
  /* :not(.btn) — the CTA at the bottom of the panel is a button, not a link
     in the list, and must keep its own padding and colours. */
  .nav a:not(.btn) {
    padding: 14px 0; font-size: 16px; color: var(--body);
    border-top: 1px solid var(--line-soft);
  }
  .site-header.is-hero.is-open .nav a:not(.btn) { color: var(--body); }
  .nav .btn--cta {
    display: inline-flex; align-self: stretch; justify-content: center;
    height: 52px; margin-top: 18px; font-size: 15px;
  }
  .site-header.is-hero.is-open .nav .btn--cta { background: var(--deep); color: #fff; }
  .site-header.is-hero.is-open .nav .btn--cta:hover { background: var(--accent); color: #fff; }
}

@media (max-width: 860px) {
  .offer-grid__item--wide { grid-column: span 1; }
  .facts__item { padding-left: 0; padding-right: 0; border-right: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .facts__item:first-child { border-top: 0; }
  .geo__cell { border-right: 0; border-top: 1px solid var(--line); }
  .geo__cell:first-child { border-top: 0; }
}

@media (max-width: 560px) {
  /* The wordmark is ~11.6:1, so the header only fits on a 360 px phone once
     the logo, the switcher and the menu button are all scaled down. */
  .site-header__inner { gap: 10px; padding-left: 18px; padding-right: 18px; }
  .nav { padding-left: 18px; padding-right: 18px; }
  .logo { gap: 8px; min-width: 0; overflow: hidden; }
  .logo__mark { height: 24px; }
  .logo__word { height: 12px; }
  .lang { padding-left: 0; border-left: 0; }
  .lang a { padding: 6px 4px; font-size: 11px; }
  .nav-toggle { width: 40px; height: 40px; }
}

@media (max-width: 720px) {
  :root { --pad: 22px; --section-y: 80px; }
  .field--wide { grid-column: span 1; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .contact__form { padding: 32px 22px; }
  .contact__side { padding: 30px 22px; }
  .quality__card, .quality__panel, .team__card { padding: 30px 22px; }
  .thanks { padding: 40px 24px; }
  .hero__inner { padding-top: 130px; }
  .statement { height: 440px; }
  .statement__inner { align-items: flex-start; text-align: left; }
  .statement__text { max-width: none; }
  .geo__map iframe { height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none !important; }
  * { transition-duration: .01ms !important; }
}