/* Vestra Marketing
   Plain CSS. No build step, no framework.
   One dark palette. Light mode was removed deliberately; see :root below. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* The site is black in every context by design, so there is one palette
   rather than a light set and a dark set. */
:root {
  color-scheme: dark;

  --bg:         #0a0b0d;
  --panel:      #121419;
  --panel-line: #232733;
  --ink:        #f2f3f6;
  --ink-soft:   #aab1c0;
  --rule:       #232733;
  --blue:       #8ba1f7;
  --yellow:     #f5b814;
  --label:      #f5b814;
  --on-yellow:  #0a0b0d;
  --focus:      #f5b814;

  /* Logo mark. Navy letters, lifted off black so they are actually visible;
     true navy on this background sits at about 1.3:1. The brackets are the
     inverse of black for the same reason. */
  --mark-bracket: #f2f3f6;
  --mark-letter:  #6f8df2;

  --shell: 70rem;
  --gutter: 1rem;
  --radius: 10px;
}

/* ---------- logo mark ---------- */

.vm { display: block; }
.vm path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.vm .bracket { stroke: var(--mark-bracket); stroke-width: 4; }
.vm .letter  { stroke: var(--mark-letter);  stroke-width: 5; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.125rem;      /* 18px floor, kept on desktop too */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ---------- type ---------- */

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 6.6vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 4.6vw, 2.375rem); }
h3 { font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.25; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--on-yellow);
  padding: 0.75rem 1rem;
  font-weight: 700;
  z-index: 99;
}
.skip:focus { left: 0; }

/* ---------- button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.7rem 1.4rem;
  background: var(--yellow);
  color: var(--on-yellow);
  font-weight: 650;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid var(--yellow);
  border-radius: 6px;
}
.btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-soft);
}
.btn-quiet:hover { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }

/* ---------- header ---------- */

.masthead { border-bottom: 1px solid var(--rule); }

.masthead-in {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.5rem;
  min-height: 68px;
  flex-wrap: wrap;
  padding-block: 0.7rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  min-height: 48px;
  margin-right: auto;
}
.mark svg { display: block; height: 26px; width: auto; }

.nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav a:hover { color: var(--ink); }

.masthead .btn { display: none; }
@media (min-width: 52em) {
  .masthead .btn { display: inline-flex; min-height: 48px; padding: 0.45rem 1.1rem; }
}

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

.hero {
  padding-block: clamp(3.5rem, 11vw, 7rem) clamp(3rem, 8vw, 5.5rem);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

.hero-mark { display: block; height: 52px; width: auto; margin: 0 auto 2rem; }

.label {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--label);
  margin: 0 0 0.9rem;
}

.hero h1 { margin: 0 auto 1.35rem; max-width: 17ch; }

.lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 2rem;
}

.hero .btn { width: 100%; }
@media (min-width: 34em) { .hero .btn { width: auto; min-width: 15rem; } }

.trust {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-inline: auto;
}

/* ---------- section scaffolding ---------- */

section { padding-block: clamp(3.5rem, 8vw, 6rem); }

.section-head { text-align: center; margin-bottom: 3rem; }
.section-head h2 { max-width: 20ch; margin-inline: auto; }
.section-head .intro {
  margin: 1.1rem auto 0;
  color: var(--ink-soft);
  max-width: 54ch;
  font-size: 1.0625rem;
}

.rule-top { border-top: 1px solid var(--rule); }

/* ---------- panels ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}

.grid { display: grid; gap: 1rem; }
@media (min-width: 40em) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40em) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- demand panels ---------- */

.demand .panel { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; }
.demand .num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--blue);
  padding-top: 0.28rem;
  font-variant-numeric: tabular-nums;
}
/* Scoped to the panels: a bare `.demand p` also caught .aside-note and its
   margin: 0 beat the auto centering. */
.demand .panel p { margin: 0; font-size: 1.0625rem; }

.aside-note {
  margin-top: 2rem;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
}

/* ---------- services ---------- */

.svc h3 { margin-bottom: 0.6rem; }
.svc p { font-size: 1.0625rem; color: var(--ink-soft); }
.svc .fit {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--panel-line);
  font-size: 1.0625rem;
}
.svc .fit b { color: var(--ink); font-weight: 650; }

.together {
  margin: 2rem auto 0;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 58ch;
  text-align: center;
}

/* ---------- process ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; max-width: 46rem; margin-inline: auto; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 2.25rem 3.5rem;
  border-left: 1px solid var(--rule);
  margin-left: 1rem;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(s);
  position: absolute;
  left: -1rem;
  top: -0.15rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 50%;
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 700;
}
.steps h3 { margin-bottom: 0.45rem; }
.steps p { font-size: 1.0625rem; color: var(--ink-soft); }

/* ---------- we are new ---------- */

.statement {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.0625rem, 2.1vw, 1.1875rem);
  color: var(--ink-soft);
}
.statement strong { color: var(--ink); font-weight: 650; }

.sub-head {
  text-align: center;
  margin: 4rem 0 1.75rem;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--label);
}

.crew .panel { text-align: center; padding-block: 1.4rem; }
.crew .who { display: block; font-weight: 650; font-size: 1.125rem; letter-spacing: -0.02em; }
.crew .role { display: block; margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- disclosure list, shared by the terms and the FAQ ---------- */

.disclosure { max-width: 46rem; margin-inline: auto; }
.disclosure details { border-bottom: 1px solid var(--rule); }
.disclosure details:first-of-type { border-top: 1px solid var(--rule); }
.disclosure summary {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0.95rem 2.5rem 0.95rem 0;
  cursor: pointer;
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  position: relative;
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}
.disclosure details[open] summary::after { transform: rotate(225deg); }
.disclosure .answer { padding: 0 0 1.4rem; color: var(--ink-soft); font-size: 1.0625rem; }

/* ---------- closing ---------- */

.closing { border-top: 1px solid var(--rule); text-align: center; }
.closing h2 { margin-bottom: 1.1rem; max-width: 18ch; margin-inline: auto; }
/* :where() adds no specificity, so this still loses to .closing .or as before,
   but stops beating .label on the "Next step" eyebrow. */
.closing p:not(:where(.label)) { color: var(--ink-soft); max-width: 50ch; margin-inline: auto; font-size: 1.0625rem; }
.closing .btn { margin-top: 1.75rem; width: 100%; }
@media (min-width: 34em) { .closing .btn { width: auto; min-width: 15rem; } }
.closing .or { margin-top: 1.25rem; font-size: 0.9375rem; }
.closing .or a {
  color: var(--ink);
  text-underline-offset: 3px;
  /* Padding rather than min-height so the link stays on the baseline of the
     sentence while still offering a 48px tap target. */
  display: inline-block;
  padding: 0.8rem 0.35rem;
  margin: -0.8rem -0.35rem;
}

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

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
/* Clearance for the pinned dock, only on the page that has one and only at
   the widths where it can appear. */
@media (max-width: 51.999em) {
  body:has(.dock) .foot { padding-bottom: 6rem; }
}
.foot-in { display: grid; gap: 1.25rem; }
@media (min-width: 46em) {
  .foot-in { grid-template-columns: 1fr auto; align-items: end; }
}
.foot .name { color: var(--ink); font-weight: 650; }
.foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; }
.foot a { display: inline-flex; align-items: center; min-height: 48px; text-underline-offset: 3px; }

/* ---------- pinned mobile cta ---------- */

.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: 0.7rem var(--gutter);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  /* Hidden by default so the button stays out of the tab order and out of
     the accessibility tree until the script decides to show it. */
  visibility: hidden;
  transform: translateY(130%);
  transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
}
.dock[data-shown="true"] {
  visibility: visible;
  transform: none;
  transition: transform 0.18s ease-out, visibility 0s linear 0s;
}
.dock .btn { width: 100%; }
@media (min-width: 52em) { .dock { display: none; } }

/* ---------- legal and error pages ---------- */

.doc { padding-block: clamp(2.5rem, 7vw, 4rem) clamp(3rem, 8vw, 5rem); max-width: 46rem; margin-inline: auto; }
.doc h1 { margin-bottom: 0.75rem; }
.doc h2 { font-size: 1.3125rem; margin: 2.5rem 0 0.8rem; }
.doc p, .doc li { color: var(--ink-soft); font-size: 1.0625rem; }
.doc ul { padding-left: 1.15rem; }
.doc li { margin-bottom: 0.5rem; }
.doc .updated { font-size: 0.9375rem; }
.doc a { color: var(--ink); text-underline-offset: 3px; }
/* The standalone contact link is an action, not an inline link, so it needs
   a real tap target. Negative margins keep the surrounding layout unchanged. */
.doc .contact a {
  display: inline-block;
  padding: 0.8rem 0.35rem;
  margin: -0.8rem -0.35rem;
}

.oops { padding-block: clamp(4rem, 14vw, 8rem); text-align: center; }
.oops h1 { margin-bottom: 1.1rem; }
.oops p { font-size: 1.0625rem; color: var(--ink-soft); max-width: 46ch; margin-inline: auto; }
.oops .links { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- mobile type floor ----------
   The brief sets an 18px minimum for body text on a phone. The tighter sizes
   above are desktop refinements, so they are raised back to 18px below the
   desktop breakpoint rather than being applied at every width. Buttons and
   nav links are controls rather than body copy, so they only go to 16px. */

@media (max-width: 51.999em) {
  .lede,
  .trust,
  .section-head .intro,
  .aside-note,
  .together,
  .statement,
  .demand .panel p,
  .svc p,
  .svc .fit,
  .steps p,
  .crew .role,
  .disclosure summary,
  .disclosure .answer,
  .closing p:not(:where(.label)),
  .closing .or,
  .foot,
  .doc p,
  .doc li,
  .doc .updated,
  .oops p {
    font-size: 1.125rem;
  }

  .label,
  .sub-head,
  .btn,
  .nav a {
    font-size: 1rem;
  }
}