/* Token names match the variables in the Figma file (Farger / Layout). */
:root {
  --vhu-brand-green: #00843f;
  --vhu-brand-green-hover: #00733a;
  --vhu-brand-green-pressed: #006332;
  --vhu-brand-green-bright: #00a04f;
  --vhu-brand-green-bright-hover: #00b058;
  --vhu-brand-navy: #0c2c5b;
  --vhu-brand-star: #f5b301;
  --vhu-text-primary: #1f2226;
  --vhu-text-secondary: #474b50;
  --vhu-text-muted: #5f646a;
  --vhu-text-placeholder: #8b9096;
  --vhu-text-on-dark: #fff;
  --vhu-text-on-dark-muted: #d7e1ee;
  --vhu-text-link: #006ea9;
  --vhu-text-link-hover: #004f7c;
  --vhu-text-error: #b42318;
  --vhu-surface-white: #fff;
  --vhu-surface-mint: #f2f6f3;
  --vhu-surface-green-tint: #eaf5ee;
  --vhu-surface-green-tint-hover: #d6ecdf;
  --vhu-surface-icon-circle: #e3f2e8;
  --vhu-surface-segment: #edf2ef;
  --vhu-surface-track: #e6ece8;
  --vhu-surface-image-empty: #dfe7e1;
  --vhu-surface-image-slot: #eef2ef;
  --vhu-surface-upload: #fafcfb;
  --vhu-surface-upload-hover: #f2f8f4;
  --vhu-surface-button-hover: #f6f8fa;
  --vhu-surface-button-pressed: #edf1f5;
  --vhu-border-header: #edf1ee;
  --vhu-border-card: #e1e8e3;
  --vhu-border-button: #cfd8d3;
  --vhu-border-input: #d5ddd8;
  --vhu-border-divider: #e3e9e5;
  --vhu-border-footer: #dde4df;
  --vhu-border-upload: #b8c8be;
  --vhu-border-radio: #aab6af;
  --vhu-border-error: #d92d20;
  --vhu-icon-quote: #cfe8d8;
  --vhu-icon-check: #00a04f;
  --vhu-radius-pill: 999px;
}

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--vhu-text-primary);
  background: var(--vhu-surface-white);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--vhu-text-link); }
a:hover { color: var(--vhu-text-link-hover); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--vhu-brand-green); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
input::placeholder, textarea::placeholder { color: var(--vhu-text-placeholder); }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

.visually-hidden, .segment input, .tile input, .option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page {
  container-type: inline-size;
  width: 100%;
  background: var(--vhu-surface-white);
  overflow: clip;
  position: relative;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--vhu-surface-white);
  border-bottom: 1px solid var(--vhu-border-header);
}
.site-header__logo { display: block; height: 38px; width: auto; }
.phone-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 14px;
  border-radius: var(--vhu-radius-pill);
  background: var(--vhu-surface-green-tint);
  color: var(--vhu-brand-navy);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.phone-pill:hover { background: var(--vhu-surface-green-tint-hover); color: var(--vhu-brand-navy); }
.phone-pill svg { color: var(--vhu-brand-green); }

/* Buttons */
.btn {
  border: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 600;
}
.btn--xl { height: 56px; font-size: 17px; gap: 10px; }
.btn--lg { height: 54px; font-size: 16.5px; gap: 8px; }
.btn--md { height: 52px; font-size: 16.5px; gap: 8px; }
.btn--shadow { box-shadow: 0 10px 22px -10px rgba(0, 132, 63, .6); }
.btn--primary { background: var(--vhu-brand-green); color: var(--vhu-text-on-dark); }
.btn--primary:hover { background: var(--vhu-brand-green-hover); }
.btn--primary:active { background: var(--vhu-brand-green-pressed); }
.btn--primary:disabled { background: var(--vhu-brand-green); opacity: .45; cursor: not-allowed; }
.btn--secondary {
  height: 52px;
  border: 1.5px solid var(--vhu-border-button);
  background: var(--vhu-surface-white);
  color: var(--vhu-brand-navy);
  font-size: 16px;
}
.btn--secondary:hover { border-color: var(--vhu-brand-navy); background: var(--vhu-surface-button-hover); }
.btn--secondary:active { background: var(--vhu-surface-button-pressed); }
.btn--primary-dark { background: var(--vhu-brand-green-bright); color: var(--vhu-text-on-dark); }
.btn--primary-dark:hover { background: var(--vhu-brand-green-bright-hover); }
.btn--primary-dark:active { background: var(--vhu-brand-green); }
.btn--secondary-dark {
  height: 52px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  background: transparent;
  color: var(--vhu-text-on-dark);
  font-size: 16px;
}
.btn--secondary-dark:hover { border-color: var(--vhu-text-on-dark); background: rgba(255, 255, 255, .08); }
.btn--secondary-dark:active { background: rgba(255, 255, 255, .14); }
.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin-top: 4px;
  border-radius: 14px;
  border: 1.5px solid var(--vhu-border-button);
  color: var(--vhu-brand-navy);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
}
.btn-outline:hover { border-color: var(--vhu-brand-navy); color: var(--vhu-brand-navy); }
.btn-outline svg { color: var(--vhu-brand-green); }
.cta-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cta-stack--dark { margin-top: 6px; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; background: var(--vhu-surface-white); }
.hero__body { display: contents; }
.hero__media {
  flex: 1 1 480px;
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 230px;
  background: var(--vhu-surface-image-empty);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__copy {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 20px 26px;
}
.hero__inner { max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.hero__title {
  margin: 0;
  font-size: clamp(28px, 7.6cqi, 44px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--vhu-brand-navy);
  text-wrap: balance;
}
.hero__title span { color: var(--vhu-brand-green); }
.hero__intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--vhu-text-secondary);
  text-wrap: pretty;
}
.eyebrow {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vhu-brand-green);
}
.eyebrow--section { margin: 0 0 6px; }
.stars { display: flex; gap: 1px; color: var(--vhu-brand-star); }
.rating-pill {
  position: absolute;
  left: 12px;
  bottom: 12px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border-radius: var(--vhu-radius-pill);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 18px rgba(12, 44, 91, .18);
  font-size: 13px;
  font-weight: 600;
  color: var(--vhu-text-primary);
}
.trust {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vhu-text-primary);
}
.trust li { display: flex; align-items: center; gap: 6px; }
.trust svg { color: var(--vhu-icon-check); }

/* Form */
.form-section { background: var(--vhu-surface-mint); padding: 24px 14px 32px; }
.form-section__inner { max-width: 560px; margin: 0 auto; }
.card {
  background: var(--vhu-surface-white);
  border-radius: 20px;
  border: 1px solid var(--vhu-border-card);
  box-shadow: 0 22px 44px -24px rgba(12, 44, 91, .30);
  overflow: hidden;
}
.form-top { padding: 16px 16px 0; }
.segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--vhu-surface-segment);
}
.segment { position: relative; display: block; cursor: pointer; }
.segment__face {
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--vhu-text-muted);
  transition: background .15s, color .15s;
}
.segment input:checked + .segment__face {
  background: var(--vhu-surface-white);
  color: var(--vhu-brand-navy);
  box-shadow: 0 1px 2px rgba(12, 44, 91, .14), 0 4px 10px rgba(12, 44, 91, .08);
}
.segment input:focus-visible + .segment__face,
.tile input:focus-visible + .tile__face,
.option input:focus-visible + .option__face { outline: 2px solid var(--vhu-brand-green); outline-offset: 2px; }
.form-intro { margin: 12px 2px 0; font-size: 14px; line-height: 1.5; color: var(--vhu-text-secondary); }
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  font-size: 13px;
  color: var(--vhu-text-muted);
}
.progress-meta__step { font-weight: 600; color: var(--vhu-brand-navy); }
.progress {
  height: 6px;
  border-radius: 99px;
  background: var(--vhu-surface-track);
  margin-top: 8px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 33%;
  border-radius: 99px;
  background: var(--vhu-brand-green);
  transition: width .35s ease;
}
.step { padding: 18px 16px 14px; }
.step--1 { padding-bottom: 18px; }
.step--3 { display: flex; flex-direction: column; gap: 14px; }
.step__title {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--vhu-text-primary);
}
.step__hint { margin: 4px 0 14px; font-size: 14px; color: var(--vhu-text-muted); }
.step__next { margin-top: 16px; }
.step__submit { margin-top: 2px; }
.step__back { margin-top: 10px; }
.step__back-end { align-self: flex-start; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.tile { position: relative; display: flex; cursor: pointer; }
.tile__face {
  position: relative;
  flex: 1;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1.5px solid var(--vhu-border-input);
  background: var(--vhu-surface-white);
  color: var(--vhu-text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  transition: border-color .15s, background .15s;
}
.tile__icon { color: var(--vhu-brand-green); }
.tile__check {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vhu-brand-green);
  color: var(--vhu-text-on-dark);
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--vhu-surface-white);
}
.tile input:checked + .tile__face { border-color: var(--vhu-brand-green); background: var(--vhu-surface-green-tint); }
.tile input:checked + .tile__face .tile__check { display: flex; }

.options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.option { position: relative; display: block; cursor: pointer; }
.option__face {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--vhu-border-input);
  background: var(--vhu-surface-white);
  color: var(--vhu-text-primary);
  font-size: 15.5px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.option__ring {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--vhu-border-radio);
  display: flex;
  align-items: center;
  justify-content: center;
}
.option__dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.option input:checked + .option__face { border-color: var(--vhu-brand-green); background: var(--vhu-surface-green-tint); }
.option input:checked + .option__face .option__ring { border-color: var(--vhu-brand-green); }
.option input:checked + .option__face .option__dot { background: var(--vhu-brand-green); }

.back {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--vhu-text-muted);
  font-size: 14.5px;
  font-weight: 500;
}
.back:hover { color: var(--vhu-brand-navy); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { display: flex; gap: 6px; font-size: 14px; font-weight: 500; color: var(--vhu-text-primary); }
.field__optional { font-weight: 400; color: var(--vhu-text-muted); }
.field__error { margin: 0; font-size: 13px; font-weight: 500; color: var(--vhu-text-error); }
.input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--vhu-border-input);
  background: var(--vhu-surface-white);
  font-size: 16px;
  color: var(--vhu-text-primary);
  outline: none;
}
.input:focus { border-color: var(--vhu-brand-green); box-shadow: 0 0 0 4px rgba(0, 132, 63, .15); }
.input--area { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; display: block; }
.field.has-error .input { border-color: var(--vhu-border-error); }
.field.has-error .input:focus { box-shadow: 0 0 0 4px rgba(217, 45, 32, .15); }

.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px dashed var(--vhu-border-upload);
  background: var(--vhu-surface-upload);
  cursor: pointer;
  color: var(--vhu-brand-navy);
  font-size: 14.5px;
  font-weight: 500;
}
.upload:hover { border-color: var(--vhu-brand-green); background: var(--vhu-surface-upload-hover); }
.upload:focus-within { outline: 2px solid var(--vhu-brand-green); outline-offset: 2px; }
.upload svg { color: var(--vhu-brand-green); }
.upload__text { display: flex; flex-direction: column; gap: 1px; }
.upload__sub { font-size: 12.5px; font-weight: 400; color: var(--vhu-text-muted); }
.upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.form-error { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--vhu-text-error); }
.privacy {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vhu-text-muted);
}
.privacy svg { margin-top: 2px; }

.done { padding: 26px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.done__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vhu-surface-icon-circle);
  color: var(--vhu-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.done__title { margin: 0; font-size: 23px; line-height: 1.25; font-weight: 700; color: var(--vhu-brand-navy); }
.done__body { display: flex; flex-direction: column; gap: 14px; }
.done__text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--vhu-text-secondary); }
.done__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.done__steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vhu-text-primary);
}
.done__num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--vhu-brand-navy);
  color: var(--vhu-text-on-dark);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.done__reset {
  align-self: flex-start;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vhu-text-link);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.done__reset:hover { color: var(--vhu-text-link-hover); }

/* Sections */
.section { padding: 40px 20px 36px; background: var(--vhu-surface-white); }
.section--mint { background: var(--vhu-surface-mint); }
.section--quotes { padding: 40px 0 30px; }
.wrap { max-width: 1040px; margin: 0 auto; }
.wrap--narrow { max-width: 720px; }
.section-title {
  margin: 0;
  font-size: clamp(24px, 6.4cqi, 34px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--vhu-brand-navy);
  text-wrap: balance;
}
.card-text { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--vhu-text-secondary); }

.process {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.process__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: var(--vhu-surface-mint);
}
.process__num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vhu-brand-navy);
  color: var(--vhu-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}
.process__title { margin: 2px 0 0; font-size: 16.5px; font-weight: 600; color: var(--vhu-brand-navy); }

.quotes-head { padding: 0 20px; }
.quotes-head__intro {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vhu-text-secondary);
  text-wrap: pretty;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vhu-text-primary);
}
.quotes {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  padding: 18px 20px 10px;
  scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes:focus-visible { outline-offset: -2px; }
.quotes__end { flex: 0 0 8px; }
.quote {
  margin: 0;
  flex: 0 0 min(84%, 360px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  background: var(--vhu-surface-white);
  border: 1px solid var(--vhu-border-card);
}
.quote__mark { color: var(--vhu-icon-quote); }
.quote__text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--vhu-text-primary); text-wrap: pretty; }
.quote__by { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.quote__name { font-size: 14.5px; font-weight: 600; color: var(--vhu-brand-navy); }
.quote__role { font-size: 13px; color: var(--vhu-text-muted); }

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.projects--single { grid-template-columns: minmax(0, 720px); }
.project {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--vhu-surface-image-empty);
}
.project img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project__caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  pointer-events: none;
  padding: 6px 12px;
  border-radius: var(--vhu-radius-pill);
  background: rgba(255, 255, 255, .95);
  font-size: 13px;
  font-weight: 600;
  color: var(--vhu-brand-navy);
}
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.before-after__item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--vhu-surface-image-slot);
}
.before-after__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: none;
  padding: 4px 10px;
  border-radius: var(--vhu-radius-pill);
  color: var(--vhu-text-on-dark);
  font-size: 12px;
  font-weight: 600;
}
.tag--before { background: var(--vhu-brand-navy); }
.tag--after { background: var(--vhu-brand-green); }

.about { display: flex; flex-direction: column; gap: 16px; }
.owners {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  background: var(--vhu-surface-white);
  border: 1px solid var(--vhu-border-card);
}
.owners__photo { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.owners__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--vhu-text-primary); text-wrap: pretty; }
.owners__text strong { font-weight: 600; color: var(--vhu-brand-navy); }
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.reason {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: var(--vhu-surface-white);
}
.reason__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--vhu-surface-icon-circle);
  color: var(--vhu-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason__title { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--vhu-brand-navy); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--vhu-radius-pill);
  background: var(--vhu-surface-white);
  border: 1px solid var(--vhu-border-card);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vhu-brand-navy);
}
.badge svg { color: var(--vhu-brand-green); }
.badge--image { padding-left: 8px; }
.badge--image img { display: block; height: 24px; width: auto; }

.faq { margin-top: 14px; border-top: 1px solid var(--vhu-border-divider); }
.faq__item { border-bottom: 1px solid var(--vhu-border-divider); }
.faq__question {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--vhu-text-primary);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--vhu-brand-navy); }
.faq__chevron { color: var(--vhu-brand-green); transition: transform .2s; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--vhu-text-secondary); }

.final-cta { padding: 40px 20px 44px; background: var(--vhu-brand-navy); color: var(--vhu-text-on-dark); }
.final-cta__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.final-cta__title {
  margin: 0;
  font-size: clamp(26px, 7cqi, 38px);
  line-height: 1.16;
  font-weight: 700;
  color: var(--vhu-text-on-dark);
  text-wrap: balance;
}
.final-cta__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--vhu-text-on-dark-muted); text-wrap: pretty; }

.site-footer { padding: 28px 20px 24px; background: var(--vhu-surface-mint); font-size: 14px; color: var(--vhu-text-secondary); }
.site-footer__inner { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.site-footer__logo { display: block; align-self: flex-start; height: 34px; width: auto; }
.contact { display: flex; flex-direction: column; gap: 4px; }
.contact__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--vhu-brand-navy);
  text-decoration: none;
  font-weight: 600;
}
.contact__row:hover { color: var(--vhu-brand-green); }
.contact__row svg { color: var(--vhu-brand-green); }
.contact__row--plain, .contact__row--plain:hover { color: var(--vhu-text-secondary); font-weight: 400; }
.legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--vhu-border-footer);
  font-size: 13px;
  color: var(--vhu-text-muted);
}

.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--vhu-border-divider);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .2s ease;
}
.sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky-cta__main { flex: 1; width: auto; }
.sticky-cta__call {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1.5px solid var(--vhu-border-button);
  background: var(--vhu-surface-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vhu-brand-green);
}
.sticky-cta__call:hover { border-color: var(--vhu-brand-navy); color: var(--vhu-brand-green); }

.legal__links { display: flex; gap: 16px; }
.legal__button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--vhu-text-link);
  font-size: inherit;
  text-decoration: underline;
}
.legal__button:hover { color: var(--vhu-text-link-hover); }

/* The banner may be small, but the choices must stay alike. Datatilsynet requires a refusal to have
   comparable size, colour and placement, so a more prominent "yes" would normally make the consent invalid. */
.consent {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
  padding: 12px;
  background: var(--vhu-surface-white);
  border: 1px solid var(--vhu-border-divider);
  border-radius: 14px;
  box-shadow: 0 10px 28px -12px rgba(12, 44, 91, .35);
}
.consent__text { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--vhu-text-secondary); }
.consent__text::before { content: ''; float: right; width: 24px; height: 18px; } /* Room for the close button on line one. */
.consent__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.consent .btn { height: 40px; padding-inline: 4px; font-size: 13.5px; }
.consent__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--vhu-text-secondary);
}

/* Thank-you fallback and 404 */
.message { padding: 48px 20px 56px; background: var(--vhu-surface-white); }
.message__inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.message__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--vhu-text-secondary); }
.message__link { font-size: 14px; font-weight: 500; text-underline-offset: 2px; }

/* Desktop: the copy and the form share the first screen, and sections use the full width. */
@media (min-width: 1024px) {
  :root { --vhu-gutter: max(32px, calc((100vw - 1200px) / 2)); }

  .site-header { padding-inline: var(--vhu-gutter); }

  .top { display: grid; grid-template-columns: 1fr 1fr; }
  .hero { display: block; padding: 56px 48px 56px var(--vhu-gutter); }
  .hero__body { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 24px; }
  .hero__copy { order: 1; flex: none; padding: 0; }
  .hero__inner { max-width: none; }
  .hero__media { order: 2; flex: none; width: 100%; min-height: 0; border-radius: 20px; overflow: hidden; }
  .hero__intro { font-size: 17px; }
  .hero .cta-stack { display: none; }
  .form-section { padding: 56px var(--vhu-gutter) 56px 48px; }
  .form-section__inner { margin: 0; }
  .form-intro { text-wrap: pretty; }

  .section { padding: 72px var(--vhu-gutter); }
  .section--quotes { padding: 72px var(--vhu-gutter) 64px; }
  .wrap { max-width: none; }
  .section-title { font-size: 34px; }

  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  .process__item { padding: 20px; }

  .quotes-head { display: grid; grid-template-columns: 1fr auto; column-gap: 32px; padding: 0; }
  .quotes-head__intro { grid-column: 1; }
  .rating-row { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
  .quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 28px 0 0;
  }
  .quotes__end { display: none; }
  .quote { padding: 24px; }

  .projects { gap: 16px; margin-top: 28px; }
  .section--single-project .wrap {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: 48px;
    align-items: center;
  }
  .section--single-project .projects { margin-top: 0; }
  .projects--single { grid-template-columns: minmax(0, 1fr); }
  .projects--single .project { aspect-ratio: 3 / 2; }

  .about {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    gap: 20px 48px;
    align-items: start;
  }
  .reasons { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .reason { height: 100%; padding: 20px; }

  .wrap--narrow {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 48px;
    align-items: start;
  }
  .faq { margin-top: 0; }

  .final-cta { padding: 72px var(--vhu-gutter); }
  .final-cta__inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 64px;
    align-items: center;
  }
  .final-cta__title { font-size: 38px; align-self: end; }
  .final-cta__text { align-self: start; }
  .cta-stack--dark { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

  .site-footer { padding: 40px var(--vhu-gutter) 28px; }
  .site-footer__inner { max-width: none; display: grid; grid-template-columns: auto 1fr; gap: 20px 48px; align-items: center; }
  .contact { flex-direction: row; justify-content: flex-end; gap: 32px; }
  .legal { grid-column: 1 / -1; }

  /* A floating button instead of a full-width bar. It hides by the final CTA and the footer (see app.js). */
  .sticky-cta,
  .sticky-cta.is-visible {
    justify-content: flex-end;
    margin-top: -76px;
    padding: 0 24px 24px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    pointer-events: none;
  }
  .sticky-cta.is-visible .sticky-cta__main { pointer-events: auto; }
  .sticky-cta__main { flex: none; width: 300px; box-shadow: 0 10px 28px -8px rgba(12, 44, 91, .45); }
  .sticky-cta__call { display: none; }

  /* A small card in the corner opposite the floating button. */
  .consent { left: 24px; right: auto; bottom: 24px; width: 380px; }

  .message__inner { max-width: 640px; }
}

/* Wide enough for three tiles per row. The last one fills the row, so no gap is left over. */
@media (min-width: 1180px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile:last-child { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}