/* @font-face: critical families used by main pages. */
 @font-face{font-family:"Sansation:Bold";font-style:normal;src:url("/_woff/v2/Sansation-Bold_1/Sansation-Bold_1-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}@font-face{font-family:"Sansation:Bold";font-style:normal;src:url("/_woff/v2/Sansation-Bold_1/Sansation-Bold_1-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}@font-face{font-family:"Sansation:Bold";font-style:normal;src:url("/_woff/v2/Sansation-Bold_1/Sansation-Bold_1-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}@font-face{font-family:"Sansation:Bold";font-style:normal;src:url("/_woff/v2/Sansation-Bold_1/Sansation-Bold_1-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}@font-face{font-family:"Sansation:Bold";font-style:normal;src:url("/_woff/v2/Sansation-Bold_1/Sansation-Bold_1-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}@font-face{font-family:"Sansation:Bold";font-style:normal;src:url("/_woff/v2/Sansation-Bold_1/Sansation-Bold_1-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}@font-face{font-family:"Montserrat:Regular";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-english.woff2");font-display:swap;unicode-range:U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD}@font-face{font-family:"Montserrat:Regular";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-rest-latin.woff2");font-display:swap;unicode-range:U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF}@font-face{font-family:"Montserrat:Regular";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-a.woff2");font-display:swap;unicode-range:U+0100-0130,U+0132-0151,U+0154-017F}@font-face{font-family:"Montserrat:Regular";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-b.woff2");font-display:swap;unicode-range:U+0180-024F}@font-face{font-family:"Montserrat:Regular";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-latin-extended-additional.woff2");font-display:swap;unicode-range:U+1E00-1EFF}@font-face{font-family:"Montserrat:Regular";font-style:normal;src:url("/_woff/v2/Montserrat_wght__2/Montserrat_wght__2-rest.woff2");font-display:swap;unicode-range:U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF}

/* ============================================================
   42px — main hub landing, clean rebuild. Dark theme, one layout.
   Tokens lifted from the Figma export's computed styles.
   ============================================================ */
:root {
  --bg:     #0a0a0a;   /* page */
  --panel:  #1a1a1a;   /* cards / bands */
  --line:   #2a2a2a;   /* borders, dividers */
  --ink:    #ffffff;
  --muted:  #a1a1aa;   /* zinc-400 */
  /* per-section accents */
  --c-purple: #a855f7;
  --c-cyan:   #06b6d4;
  --c-green:  #10b981;
  --c-orange: #f59e0b;

  /* type — per-named-weight families from the export (pair with weight 400) */
  --ff-head: "Sansation:Bold", system-ui, sans-serif;
  --ff-body: "Montserrat:Regular", system-ui, sans-serif;

  --maxw: 1280px;
  --gutter: 120px;
  --header-h: 112px;   /* logo 56 + 28px padding top/bottom */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
ol { margin: 0; padding: 0; list-style: none; }

.skip-link { position: absolute; left: -9999px; background: var(--c-purple); color: #000; padding: 8px 16px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 50; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-family: var(--ff-body); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-purple); }
.h2 { margin: 12px 0 0; font-family: var(--ff-head); font-weight: 400; font-size: 56px; line-height: 1.05; color: var(--ink); }
.section { padding-block: 100px; }
.section__head { margin-bottom: 48px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-purple); color: #000;
  padding: 16px 32px;
  font-family: var(--ff-head); font-size: 18px; letter-spacing: 0.72px;
  transition: background-color .15s, transform .15s;
}
.btn:hover { background: #b96bff; }
.btn img { width: 18px; height: 18px; }

/* ---------- header (its own block above the hero, no borders) ---------- */
.site-header { position: relative; z-index: 20; }
.site-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding-block: 28px; }
.logo img { width: 100px; height: 56px; }
.expertise-nav { justify-self: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; font-family: var(--ff-body); font-size: 13px; letter-spacing: 3px; color: var(--ink); }
.expertise-nav__link { padding: 8px 10px; transition: background-color .15s, color .15s, box-shadow .15s, transform .15s; }
.expertise-nav__link:hover,
.expertise-nav__link:focus-visible { background: var(--c-purple); color: #000; box-shadow: inset 0 -2px 0 #fff; outline: 0; }
.expertise-nav__link:active { transform: translateY(1px); }
.lang { display: inline-flex; border: 1px solid var(--line); }
.lang__opt { padding: 6px 14px; font-size: 14px; letter-spacing: 1px; color: var(--muted); }
.lang__opt.is-active { background: var(--c-purple); color: #000; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; }
.hero__frame {
  position: relative; flex: 1;
  width: min(100% - 40px, var(--maxw) * 1.2);   /* ~120% of the content blocks, capped + centred */
  margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  border-inline: 1px solid var(--line);          /* left + right borders only */
  padding: 96px 24px;
}
.hero__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #71717a; }
.hero__tag--tl { position: absolute; top: 44px; left: 20px; writing-mode: vertical-rl; }
.hero__tag--tr { position: absolute; right: 20px; bottom: 100px; writing-mode: vertical-rl; }
.hero__node { position: absolute; width: 7px; height: 7px; background: var(--c-purple); border-radius: 50%; opacity: .4; }
.hero__node--bl { left: 10px; bottom: 10px; }
.hero__node--br { right: 10px; bottom: 10px; }
.hero__content { max-width: 820px; text-align: center; }
/* SCROLL / version sit below the frame, aligned to the default content column. */
.hero__meta { display: flex; justify-content: space-between; margin-top: 40px; padding-bottom: 28px; }
.hero__title { margin: 0; font-family: var(--ff-head); font-weight: 400; font-size: 56px; line-height: 1.25; color: var(--ink); }
.hl { background: var(--c-purple); color: #000; padding: 4px 14px 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero__sub { max-width: 600px; margin: 32px auto 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.hero__kicker { margin: 28px 0 0; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6b6b73; }
.hero__cta { margin-top: 40px; }

/* ---------- expertise cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  --accent: var(--c-purple);
  position: relative; display: flex; flex-direction: column;
  min-height: 340px; padding: 32px; overflow: hidden;
  background: var(--panel); border-top: 3px solid var(--accent);
}
.card--1 { --accent: var(--c-purple); }
.card--2 { --accent: var(--c-cyan); }
.card--3 { --accent: var(--c-green); }
.card--4 { --accent: var(--c-orange); }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.card__num { font-family: var(--ff-head); font-size: 56px; line-height: 1; color: var(--accent); }
.card__icon { width: 28px; height: 28px; margin-top: 14px; }
.card__title { margin: 22px 0 0; font-family: var(--ff-head); font-size: 26px; line-height: 1.2; letter-spacing: 0.52px; color: var(--ink); max-width: 14ch; }
.card__desc { margin: 16px 0 0; font-size: 15px; line-height: 24px; letter-spacing: 0.15px; color: var(--muted); }
.card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 28px; font-family: var(--ff-head); font-size: 18px; letter-spacing: 0.72px; color: var(--accent); }
.card__more img { width: 16px; height: 16px; }
.card__deco { position: absolute; right: 0; bottom: 100px; width: 138px; height: 144px; z-index: 0; pointer-events: none; }
.card__deco--rhombus { right: -2px; bottom: 88px; opacity: .32; }
.card > :not(.card__deco) { position: relative; z-index: 1; }   /* keep text above the deco */

/* ---------- team ---------- */
.team { background: var(--panel); }
.team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.team__lead { margin: 0; font-family: var(--ff-head); font-size: 26px; line-height: 1.35; color: var(--ink); }
.team__text { margin: 24px 0 0; font-size: 18px; line-height: 1.65; color: var(--muted); }
.skills { display: flex; flex-direction: column; }
.skill { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; letter-spacing: 2px; color: var(--ink); }
.skill:first-child { border-top: 1px solid var(--line); }
.skill::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--c-purple); }

/* ---------- contacts ---------- */
.contact__text { max-width: 80ch; margin-top: 24px; font-size: 18px; line-height: 1.65; color: var(--muted); }
.contact__cta { margin-top: 36px; }
.contact-card { margin-top: 64px; border: 1px solid var(--line); background: var(--panel); padding: 40px; }
.contact-card__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.contact-card__logo { width: 64px; height: 36px; }
.contact-card__brand { font-size: 12px; letter-spacing: 3px; color: #6b6b73; }
.contact-card__rows { display: flex; flex-wrap: wrap; gap: 48px; padding-top: 28px; }
.crow { display: flex; align-items: flex-start; gap: 12px; }
.crow img { width: 16px; height: 16px; margin-top: 4px; }
.crow > span { display: flex; flex-direction: column; gap: 5px; }
.crow__k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #6b6b73; }
.crow__v { font-size: 15px; color: var(--ink); }
a.crow__v { transition: color .15s; }
a.crow__v:hover { color: var(--c-purple); }

/* ---------- prototype expertise page ---------- */
.expertise-nav__link.is-active {
  background: var(--c-purple);
  color: #000;
  box-shadow: inset 0 -2px 0 #fff;
}

.proto-hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

.proto-hero__frame {
  position: relative;
  flex: 1;
  width: min(100% - 40px, var(--maxw) * 1.2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline: 1px solid var(--line);
  padding: 96px 24px;
}

.proto-hero__content {
  max-width: 900px;
  text-align: center;
}

.proto-hero__title {
  margin: 0;
  font-family: var(--ff-head);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.05;
  color: var(--ink);
}

.proto-hero__sub {
  max-width: 700px;
  margin: 32px auto 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
}

.proto-hero__cta { margin-top: 40px; }

.proto-nowrap { white-space: nowrap; }

.proto-split {
  border-block: 1px solid var(--line);
}

.proto-split__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.proto-copy {
  padding-block: 80px;
}

.proto-copy + .proto-copy {
  border-left: 1px solid var(--line);
  padding-left: 64px;
}

.proto-copy p:not(.eyebrow),
.proto-lead {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
}

.proto-copy p:not(.eyebrow) {
  width: 100%;
  max-width: 420px;
}

.proto-copy__icon {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}

.proto-band {
  background: var(--panel);
}

.proto-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: 64px;
  align-items: end;
}

.proto-section__head .proto-lead {
  margin-top: 0;
}

.proto-grid,
.proto-steps,
.proto-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.proto-card,
.proto-steps li,
.proto-stat {
  border-top: 3px solid var(--c-purple);
  background: #121212;
  padding: 28px;
}

.proto-card span,
.proto-steps span {
  display: block;
  font-family: var(--ff-head);
  font-size: 36px;
  color: var(--c-purple);
}

.proto-card h3,
.proto-steps h3 {
  margin: 26px 0 0;
  font-family: var(--ff-head);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}

.proto-card p,
.proto-steps p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.proto-card__icon {
  width: 22px;
  height: 22px;
}

.proto-why__grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 96px;
  align-items: start;
}

.proto-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.proto-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.proto-list img {
  flex: none;
  width: 20px;
  height: 20px;
}


.proto-stat {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top-color: var(--c-orange);
}

.proto-stat strong {
  font-family: var(--ff-head);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-orange);
}

.proto-stat span {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.proto-final {
  text-align: center;
}

.proto-final__inner {
  max-width: 900px;
}

.proto-final .proto-lead {
  max-width: 720px;
  margin-inline: auto;
}

.proto-final .btn {
  margin-top: 36px;
}

/* Reference-aligned prototype page tuning. */
.expertise-nav__link.is-active {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.expertise-nav__link { text-transform: lowercase; }

.proto-hero {
  min-height: calc(100svh - var(--header-h));
  border-bottom: 1px solid var(--line);
}

.proto-hero__frame {
  flex: 1;
  min-height: 0;
  width: min(100% - 40px, var(--maxw) * 1.2);
  padding: 84px 24px 72px;
}

.proto-hero__content { max-width: 760px; }

.proto-hero__title {
  font-size: 54px;
  line-height: 1.18;
}

.proto-hero__sub {
  max-width: 560px;
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.6;
}

.proto-hero__actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 34px;
}

.proto-hero__cta { margin-top: 0; }


.proto-split__grid {
  gap: 0;
}

.proto-copy {
  position: relative;
  padding-block: 72px;
}

.proto-copy p:not(.eyebrow),
.proto-lead,
.proto-after,
.proto-free__copy {
  font-size: 15px;
  line-height: 1.72;
  color: #8f8f98;
}

.section {
  padding-block: 86px;
}

.proto-band {
  background: #1a1a1a;
}

.proto-section__head {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 80px;
}

.proto-grid,
.proto-steps {
  gap: 18px;
}

.proto-card,
.proto-steps li,
.proto-stat {
  border: 1px solid var(--line);
  border-top: 0;
  background: #101010;
  padding: 24px;
}


.proto-card {
  border-top: 1px solid var(--line);
  background: transparent;
}

.proto-card h3,
.proto-steps h3 {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.35;
}

.proto-card p,
.proto-steps p {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: #8f8f98;
}

.proto-after {
  max-width: 980px;
  margin-top: 34px;
}

.proto-why__grid {
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr);
  gap: 88px;
  margin-top: 24px;
}

.proto-why .proto-lead + .proto-lead {
  margin-top: 18px;
}

.proto-why__copy .proto-lead:first-child {
  margin-top: 0;
}

.proto-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.proto-list li {
  padding: 16px 0;
  font-size: 14px;
  color: #d4d4d8;
}


.proto-steps {
  align-items: stretch;
}

.proto-steps > li {
  min-height: 260px;
  border-top: 1px solid var(--line);
}

.proto-steps span {
  font-size: 26px;
}

.proto-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.proto-step__top img {
  flex: none;
  width: 22px;
  height: 22px;
}

.proto-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.proto-stat {
  min-height: 96px;
  justify-content: start;
  border-top: 1px solid var(--line);
}

.proto-stat strong {
  font-size: 26px;
  color: var(--c-purple);
}

.proto-stat span {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.proto-free__copy {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 78px;
  margin-top: 44px;
}

.proto-final {
  border-top: 1px solid var(--line);
  padding-top: 96px;
}

.proto-final__inner {
  max-width: calc(700px + 2 * var(--gutter));
}

.proto-final .proto-lead {
  max-width: 700px;
}

.proto-final .btn {
  min-width: 240px;
  justify-content: center;
}

/* ---------- footer ---------- */
.footer { padding-bottom: 100px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 32px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6b6b73; }

/* ============================================================
   Survey — self-contained project questionnaire wired to /new-msg.
   Same content/behaviour as the construction survey; inherits the
   hub's dark palette + Sansation/Montserrat, sharp corners.
   ============================================================ */
.survey {
  --s-ink:#fff; --s-muted:#a1a1aa; --s-accent:#a855f7; --s-accent-d:#b96bff;
  --s-chip:#262626; --s-field:#121212; --s-line:#2a2a2a; --s-opt:#d4d4d8;
  min-height: 100vh; padding: 60px 20px;
  background: radial-gradient(1100px 560px at 50% -10%, rgba(168,85,247,.10), transparent 60%), var(--bg);
}
.survey__card { position: relative; max-width: 1200px; margin-inline: auto; background: var(--panel); border: 1px solid var(--s-line); padding: 40px; color: var(--s-ink); }
.survey__close { position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-chip); color: var(--s-muted); font-size: 18px; line-height: 1; }
.survey__close:hover { background: #333; color: var(--s-ink); }
.survey__title { margin: 0; max-width: 90%; font-weight: 400; font-family: var(--ff-head); font-size: 28px; line-height: 1.2; color: var(--s-ink); }
.survey__sub { margin: 12px 0 0; font-weight: 400; font-family: var(--ff-body); font-size: 16px; line-height: 1.5; color: var(--s-muted); }
.survey__form { display: flex; flex-direction: column; gap: 36px; margin-top: 36px; }

.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.q__num { flex: none; min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-accent); color: #000; font-family: var(--ff-head); font-size: 15px; }
.q__title { padding: 0; font-weight: 400; font-family: var(--ff-head); font-size: 18px; line-height: 1.3; letter-spacing: .2px; color: var(--s-ink); }
.q__sub { margin: 0 0 14px; font-family: var(--ff-body); font-size: 15px; line-height: 1.45; color: var(--s-muted); }
.q__body { padding-left: 40px; }

/* chips (multi-select) */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; padding: 10px 22px; background: var(--s-chip); color: var(--s-ink); font-family: var(--ff-body); font-size: 15px; cursor: pointer; user-select: none; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: #3a3a3a; }
.chip:has(:checked) { background: var(--s-accent); color: #000; border-color: var(--s-accent); }
.chip:focus-within { outline: 2px solid var(--s-accent); outline-offset: 2px; }

/* radios (single-select) */
.radios { display: flex; flex-direction: column; gap: 14px; }
.radio { display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--ff-body); font-size: 15px; color: var(--s-opt); }
.radio input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid #444; border-radius: 50%; flex: none; display: grid; place-content: center; cursor: pointer; }
.radio input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); background: var(--s-accent); transition: transform .12s; }
.radio input:checked { border-color: var(--s-accent); }
.radio input:checked::before { transform: scale(1); }

/* text fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
.field__label { font-family: var(--ff-body); font-size: 14px; color: var(--s-muted); }
.field__req { color: #f87171; }
.input, .textarea { width: 100%; background: var(--s-field); border: 1px solid var(--s-line); padding: 11px 14px; font-family: var(--ff-body); font-size: 15px; color: var(--s-ink); }
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #6b6b73; }
.input:focus, .textarea:focus { outline: none; border-color: var(--s-accent); }

/* submit + status */
.survey__submit { width: 100%; margin-top: 8px; height: 54px; border: 0; background: var(--s-accent); color: #000; font-family: var(--ff-head); font-size: 16px; letter-spacing: .5px; cursor: pointer; transition: background-color .15s; }
.survey__submit:hover { background: var(--s-accent-d); }
.survey__submit:disabled { opacity: .6; cursor: default; }
.survey__status { margin-top: 14px; font-family: var(--ff-body); font-size: 14px; min-height: 1em; }
.survey__status.is-error { color: #f87171; }
.survey__status.is-ok { color: #34d399; }

/* ============================================================
   Responsive — single layout, a couple of breakpoints
   ============================================================ */
@media (max-width: 1100px) { :root { --gutter: 48px; } }
@media (max-width: 900px) {
  .expertise-nav { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cards { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__title, .h2 { font-size: 40px; }
  .hero__sub { font-size: 16px; }
  .section { padding-block: 72px; }
  .proto-split__grid,
  .proto-section__head,
  .proto-why__grid,
  .proto-grid,
  .proto-steps,
  .proto-stats { grid-template-columns: 1fr; }
  .proto-copy { padding-block: 48px; }
  .proto-copy + .proto-copy { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .proto-hero__title { font-size: 48px; }
  .proto-hero__sub { font-size: 18px; }
  .proto-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .site-header__inner { grid-template-columns: auto 1fr; align-items: start; gap: 18px 12px; }
  .lang { grid-column: 2; grid-row: 1; justify-self: end; }
  .expertise-nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .hero__title, .h2 { font-size: 32px; }
  .hero__frame { padding: 80px 16px; }
  .proto-hero__frame { padding: 76px 16px; }
  .proto-hero__title { font-size: 36px; }
  .proto-hero__sub,
  .proto-copy p:not(.eyebrow),
  .proto-lead { font-size: 16px; }
  .btn { width: 100%; justify-content: center; }
  .contact-card { padding: 24px; }
  .contact-card__rows { gap: 24px; }
  .survey { padding: 0; }
  .survey__card { border: 0; padding: 24px 20px 32px; min-height: 100vh; }
  .q__body { padding-left: 0; }
}

/* ---------- contact request form replacement ---------- */
.survey--dark {
  --contact-bg: #090909;
  --contact-card: #1a1a1a;
  --contact-line: rgba(168, 85, 247, .45);
  --contact-accent: #a855f7;
  --contact-accent-hover: #b96bff;
  --contact-ink: #fff;
  --contact-muted: #a1a1aa;
  --contact-field: #070707;
  --contact-field-line: #303030;
  --contact-button-fg: #000;
  --contact-card-w: 540px;
  --contact-logo-w: 60px;
  --contact-top-line: #b96bff;
}
.survey--light {
  --contact-bg: linear-gradient(155deg, #8291a6 0%, #9ba1aa 56%, #a39f9c 100%);
  --contact-card: #fff;
  --contact-line: #d8e2ee;
  --contact-accent: #2563eb;
  --contact-accent-hover: #1d4fd0;
  --contact-ink: #323c49;
  --contact-muted: #71849d;
  --contact-field: #f8fafc;
  --contact-field-line: #d8e2ee;
  --contact-button-fg: #fff;
  --contact-card-w: 390px;
  --contact-logo-w: 42px;
}
.survey--amber {
  --contact-bg: radial-gradient(circle at 78% 8%, rgba(245, 158, 11, .16), transparent 28%), #fdfaf3;
  --contact-card: #fff;
  --contact-line: #fde0a8;
  --contact-accent: #f59e0b;
  --contact-accent-hover: #d97706;
  --contact-ink: #1c1917;
  --contact-muted: #78716c;
  --contact-field: #fffdf8;
  --contact-field-line: #eadfce;
  --contact-button-fg: #000;
  --contact-card-w: 390px;
  --contact-logo-w: 42px;
}
.survey--contact {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: var(--contact-bg);
  color: var(--contact-ink);
  cursor: pointer;
}
.survey__deco {
  display: none;
}
.survey--dark .survey__deco {
  display: block;
  position: fixed;
  inset-block: clamp(48px, 9.5vh, 86px);
  inset-inline: 0;
  width: calc(100% - 40px);
  max-width: 1100px;
  margin-inline: auto;
  border-inline: 1px solid rgba(255, 255, 255, .12);
  background:
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) left top / 20px 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) right top / 20px 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) left bottom / 20px 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) right bottom / 20px 1px no-repeat;
  pointer-events: none;
}
.survey__deco-label {
  position: absolute;
  top: 12px;
  font-family: var(--ff-body);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #3f3f46;
}
.survey__deco-label--start { left: 24px; }
.survey__deco-label--end { right: 24px; }
.survey__deco-node {
  position: absolute;
  bottom: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--contact-accent);
  opacity: .55;
}
.survey__deco-node--start { left: 20px; }
.survey__deco-node--end { right: 20px; }
.survey--contact .survey__card {
  position: relative;
  width: min(100%, var(--contact-card-w));
  min-height: 0;
  padding: 44px;
  border: 1px solid var(--contact-line);
  border-top: 4px solid var(--contact-top-line, var(--contact-accent));
  border-radius: 10px;
  background: var(--contact-card);
  color: var(--contact-ink);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
  cursor: default;
}
.survey--contact .survey__card[hidden] { display: none; }
.survey--contact .survey__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.survey--contact .survey__logo {
  width: var(--contact-logo-w);
  height: 24px;
  flex: none;
}
.survey--dark .survey__logo { width: 60px; height: 34px; }
.survey--contact .survey__eyebrow {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--contact-accent);
}
.survey--contact .survey__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}
.survey--contact .survey__label {
  font-family: var(--ff-head);
  font-size: 16px;
  line-height: 1.35;
  color: var(--contact-ink);
}
.survey--contact .input {
  width: 100%;
  margin-top: 22px;
  border: 1px solid var(--contact-field-line);
  border-radius: 7px;
  background: var(--contact-field);
  padding: 15px 18px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--contact-ink);
}
.survey--contact .input:focus {
  outline: none;
  border-color: var(--contact-accent);
}
.survey--contact .survey__hint {
  margin: 24px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: var(--contact-muted);
}
.survey--contact .survey__submit {
  width: 100%;
  height: 52px;
  margin-top: 26px;
  border: 0;
  border-radius: 7px;
  background: var(--contact-accent);
  color: var(--contact-button-fg);
  font-family: var(--ff-head);
  font-size: 16px;
  cursor: pointer;
}
.survey--contact .survey__submit:hover,
.survey--contact .survey__submit:focus-visible {
  background: var(--contact-accent-hover);
}
.survey--contact .survey__submit:disabled {
  opacity: .62;
  cursor: default;
}
.survey--contact .survey__status {
  min-height: 20px;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
}
.survey--contact .survey__status.is-error { color: #f87171; }
.survey--contact .survey__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 20px;
}
.survey--contact .survey__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-head);
  font-size: 14px;
  color: var(--contact-ink);
}
.survey--contact .survey__link:hover,
.survey--contact .survey__link:focus-visible {
  color: var(--contact-accent);
}
.survey--contact .survey__link-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
}
.survey--contact .survey__link-icon--tg {
  background: #29a8e8;
  color: #fff;
}
.survey--contact .survey__link-icon--mail {
  color: var(--contact-accent);
  border-radius: 0;
  font-size: 18px;
}
.survey--contact .survey__card--thanks {
  text-align: center;
}
.survey--contact .survey__check {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 28px auto 18px;
  border: 2px solid var(--contact-accent);
  border-radius: 50%;
  background: transparent;
  color: var(--contact-accent);
  font-size: 30px;
  cursor: pointer;
}
.survey--contact .survey__thanks-title {
  margin: 0;
  font-family: var(--ff-head);
  font-size: 18px;
  color: var(--contact-ink);
}
.survey--contact .survey__thanks-text {
  max-width: 340px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--contact-muted);
}
@media (max-width: 560px) {
  .survey--contact {
    padding: 38px 8px;
  }
  .survey--dark .survey__deco {
    display: none;
  }
  .survey--contact .survey__card {
    width: min(100%, 344px);
    padding: 34px 24px;
    border-radius: 8px;
  }
  .survey--contact .survey__links {
    flex-direction: column;
    justify-content: center;
    gap: 18px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 208px;
  }

  .proto-hero {
    min-height: max(600px, calc(100svh - var(--header-h)));
  }


  .hero__tag--tr {
    bottom: 20px;
  }

  .proto-hero__frame {
    min-height: 500px;
    padding: 62px 16px 48px;
  }

  .proto-hero__title {
    font-size: 40px;
    line-height: 1.2;
  }

  .proto-section__head,
  .proto-why__grid,
  .proto-grid,
  .proto-steps,
  .proto-stats,
  .proto-free__copy {
    grid-template-columns: 1fr;
  }

  .proto-copy {
    padding-block: 46px;
  }

  .proto-why__grid {
    gap: 34px;
  }

  .proto-steps li {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  :root {
    --header-h: 166px;
  }


  .hero__meta .hero__tag {
    font-size: 11px;
  }

  .hero__tag--tl,
  .hero__tag--tr,
  .hero__node {
    display: none;
  }
  .site-header__inner {
    padding-block: 16px;
  }

  .logo img {
    width: 64px;
    height: 36px;
  }

  .expertise-nav {
    gap: 4px;
    font-size: 10px;
    letter-spacing: 2px;
  }

  .expertise-nav__link {
    padding: 2px 0;
  }

  .proto-hero {
    min-height: max(500px, calc(100svh - var(--header-h)));
  }

  .proto-hero__frame {
    width: calc(100% - 32px);
    min-height: 390px;
    padding: 42px 12px 36px;
  }

  .proto-hero__frame {
    border-inline: 0;
  }

  .proto-hero__title {
    font-size: 25px;
    line-height: 1.22;
  }

  .hl {
    padding: 2px 9px 5px;
  }

  .proto-hero__sub {
    margin-top: 18px;
    font-size: 11px;
  }

  .proto-hero__actions {
    margin-top: 26px;
    gap: 14px;
  }

  .proto-hero__cta {
    width: auto;
    padding: 12px 22px;
    font-size: 12px;
  }

  .hero__meta {
    padding-bottom: 22px;
  }

  .section {
    padding-block: 58px;
  }

  .h2 {
    font-size: 28px;
  }

  .proto-card,
  .proto-steps li,
  .proto-stat {
    padding: 22px;
  }

  .proto-final {
    padding-top: 72px;
  }
}