/*
Theme Name: Overbruggingshypotheek
Theme URI: https://overbruggingshypotheek.nl
Author: Overbruggingshypotheek.nl
Description: Thema voor overbruggingshypotheek.nl - informatie, geldverstrekkersvergelijking en calculators rond overbruggingshypotheken.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: obh
*/

/* =========================================================
   0. Root / kleurenpalet (gebaseerd op het aangeleverde logo)
   ========================================================= */
:root {
  /* Kernkleuren gemeten uit assets/logo.png (navy -> blauw -> teal verloop) */
  --obh-navy-900: #0A2560;
  --obh-navy-700: #123B7A;
  --obh-blue-600: #0B7FB0;
  --obh-blue-500: #1C97C7;
  --obh-teal-500: #06B6A4;
  --obh-teal-400: #2DD4C4;

  /* Merkverloop zoals in het logo (voor grote, brede vlakken) */
  --obh-gradient: linear-gradient(100deg, var(--obh-navy-900) 0%, var(--obh-blue-600) 55%, var(--obh-teal-500) 100%);
  /* Zelfde verloop maar zuiver horizontaal (90deg): voorkomt een zichtbare
     kleurbreuk aan de uiterste linker-/rechterkant van pil- en cirkelvormige
     UI-elementen (knoppen, iconen), die bij een schuin verloop op een korte,
     ronde vorm ontstaat. */
  --obh-gradient-btn: linear-gradient(90deg, var(--obh-navy-900) 0%, var(--obh-blue-600) 55%, var(--obh-teal-500) 100%);

  /* Neutrale kleuren */
  --obh-ink: #12213F;
  --obh-muted: #5A6B85;
  --obh-bg: #F5F8FB;
  --obh-surface: #FFFFFF;
  --obh-border: #E2E9F1;

  /* Statuskleuren */
  --obh-warning-bg: #FFF6E5;
  --obh-warning-border: #F0A93A;
  --obh-warning-text: #7A4B08;
  --obh-danger: #D8465B;
  --obh-success: #0E9E7B;

  /* Typografie */
  --obh-font: 'Manrope', 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --obh-radius-sm: 8px;
  --obh-radius-md: 14px;
  --obh-radius-lg: 22px;
  --obh-container: 1180px;
  --obh-shadow: 0 10px 30px -12px rgba(10, 37, 96, 0.18);
}

/* =========================================================
   1. Reset & basis
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--obh-font);
  color: var(--obh-ink);
  background: var(--obh-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--obh-blue-600); text-decoration: none; }
a:hover { color: var(--obh-teal-500); }
ul { padding-left: 1.2em; }
h1, h2, h3, h4 {
  font-family: var(--obh-font);
  font-weight: 800;
  color: var(--obh-navy-900);
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
.obh-container {
  width: 100%;
  max-width: var(--obh-container);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 64px 0; }
.obh-section-tight { padding: 40px 0; }

/* Focus states voor toegankelijkheid */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--obh-teal-400);
  outline-offset: 2px;
}

/* =========================================================
   2. Knoppen
   ========================================================= */
/* Geen "border: transparant" op de basisknop: dat geeft in sommige browsers
   een randje in een net iets andere kleur op de scherpste bocht van een
   pil-vorm (links/rechts), omdat de rand en de achtergrond daar apart
   worden geanti-alias't. Varianten die echt een rand nodig hebben
   (obh-btn-outline) krijgen die met een volle kleur, niet transparant. */
.obh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  background-color: transparent;
  background-clip: border-box;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.obh-btn:hover { transform: translateY(-1px); }
.obh-btn-primary {
  background: var(--obh-gradient-btn);
  color: #fff;
  box-shadow: var(--obh-shadow);
}
.obh-btn-primary:hover { color: #fff; opacity: .92; }
.obh-btn-outline {
  background: transparent;
  border: 2px solid var(--obh-navy-900);
  padding: 12px 26px;
  color: var(--obh-navy-900);
}
.obh-btn-outline:hover { border-color: var(--obh-teal-500); color: var(--obh-navy-900); background: #fff; }
.obh-btn-outline-invert { border-color: rgba(255,255,255,.8); color: #fff; }
.obh-btn-outline-invert:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); }
.obh-btn-white {
  background: #fff;
  color: var(--obh-navy-900);
}
.obh-btn-white:hover { color: var(--obh-blue-600); }
.obh-btn-block { width: 100%; }
.obh-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* =========================================================
   3. Header / navigatie
   ========================================================= */
/* De header heeft geen eigen achtergrondbalk en neemt geen ruimte in de
   paginaflow in (position: absolute, geen background): logo en menuknop
   zweven boven op de gradient-sectie waar elke pagina mee begint
   (.obh-hero / .obh-page-hero). Die secties reserveren zelf ruimte
   bovenaan (zie verderop) zodat hun titel niet onder de header valt.
   Doordat de header geen eigen achtergrond heeft, is er ook geen naad
   tussen header en pagina, en scrolt de header - net als de rest - gewoon
   met de pagina mee weg (position: absolute, niet fixed/sticky). */
.obh-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.obh-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  position: relative;
}
/* Witte silhouetversie van het logo: groot, zonder dat de header zelf ruimte inneemt */
.obh-logo img { height: clamp(76px, 12vw, 116px); width: auto; }

/* Nav is altijd een uitklapmenu (op elk schermformaat) achter de hamburgerknop.
   Traditioneel hamburgericoon: 3 witte streepjes, geen eigen achtergrondvlak
   - de gradient van de header loopt er gewoon doorheen. */
.obh-menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.obh-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 3px 0;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.obh-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.obh-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.obh-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.obh-nav {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  width: min(340px, 92vw);
  background: #fff;
  border-radius: var(--obh-radius-md);
  box-shadow: var(--obh-shadow);
  border: 1px solid var(--obh-border);
  padding: 14px;
  margin-top: 8px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.obh-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.obh-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.obh-nav a {
  display: block;
  color: var(--obh-navy-900);
  font-weight: 700;
  font-size: .96rem;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.obh-nav a:hover { background: var(--obh-bg); color: var(--obh-blue-600); }
.obh-nav-cta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--obh-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.obh-nav-cta a { display: block; }

@media (max-width: 480px) {
  .obh-nav { width: calc(100vw - 32px); }
}

/* =========================================================
   4. Hero
   ========================================================= */
.obh-hero {
  background: var(--obh-gradient);
  color: #fff;
  padding: clamp(150px, 22vw, 210px) 0 96px;
  position: relative;
  overflow: hidden;
}
.obh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 85% 20%, rgba(255,255,255,.12), transparent 60%);
}
.obh-hero-inner { position: relative; max-width: 760px; }
.obh-hero h1 { color: #fff; }
.obh-hero p.lead { font-size: 1.15rem; color: rgba(255,255,255,.92); max-width: 680px; }
.obh-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.obh-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* =========================================================
   5. Cards / secties
   ========================================================= */
.obh-grid {
  display: grid;
  gap: 24px;
}
.obh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.obh-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) {
  .obh-grid-2, .obh-grid-3 { grid-template-columns: 1fr; }
}
.obh-card {
  background: var(--obh-surface);
  border: 1px solid var(--obh-border);
  border-radius: var(--obh-radius-lg);
  padding: 30px;
}
.obh-card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--obh-gradient-btn);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem; font-weight: 800;
  margin-bottom: 16px;
}
.obh-calc-teaser {
  border-radius: var(--obh-radius-lg);
  padding: 34px;
  background: var(--obh-surface);
  border: 1px solid var(--obh-border);
  box-shadow: var(--obh-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.obh-calc-teaser h3 { margin-bottom: 10px; }
.obh-calc-teaser p { color: var(--obh-muted); flex-grow: 1; }
.obh-calc-teaser .obh-badge { align-self: flex-start; }

.obh-badge {
  display: inline-block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(6,182,164,.12);
  color: var(--obh-teal-500);
  margin-bottom: 14px;
}

.obh-steps { counter-reset: obh-step; list-style: none; padding: 0; margin: 0; }
.obh-steps li {
  counter-increment: obh-step;
  position: relative;
  padding-left: 54px;
  margin-bottom: 22px;
}
.obh-steps li::before {
  content: counter(obh-step);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--obh-gradient-btn);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}

.obh-section-label {
  color: var(--obh-blue-600);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  margin-bottom: 8px;
  display: block;
}

/* =========================================================
   6. Formulieren (algemeen)
   ========================================================= */
.obh-field { margin-bottom: 20px; }
.obh-field label, .obh-field legend {
  display: block;
  font-weight: 700;
  color: var(--obh-navy-900);
  margin-bottom: 6px;
  font-size: .94rem;
}
.obh-field .obh-hint { color: var(--obh-muted); font-size: .84rem; margin-top: 4px; }
.obh-input, .obh-select, .obh-textarea {
  width: 100%;
  font-family: var(--obh-font);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: var(--obh-radius-sm);
  border: 1.5px solid var(--obh-border);
  background: #fff;
  color: var(--obh-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.obh-input:focus, .obh-select:focus, .obh-textarea:focus {
  border-color: var(--obh-blue-600);
  box-shadow: 0 0 0 4px rgba(11,127,176,.14);
  outline: none;
}
.obh-input.is-invalid, .obh-textarea.is-invalid { border-color: var(--obh-danger); }
.obh-error-text { color: var(--obh-danger); font-size: .84rem; margin-top: 4px; display: none; }
.obh-error-text.is-visible { display: block; }
.obh-textarea { min-height: 140px; resize: vertical; }
.obh-amount-wrap { position: relative; }
.obh-amount-wrap .obh-prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--obh-muted); font-weight: 700;
}
.obh-amount-wrap .obh-input { padding-left: 30px; }
.obh-amount-wrap-suffix .obh-input { padding-left: 14px; padding-right: 68px; }
.obh-amount-wrap-suffix .obh-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--obh-muted); font-weight: 600; font-size: .88rem; pointer-events: none;
}

.obh-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Radio-toggle (Ja/Nee) */
.obh-toggle-group { display: flex; gap: 10px; }
.obh-toggle-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.obh-toggle-group label {
  flex: 1;
  text-align: center;
  padding: 12px 18px;
  border-radius: var(--obh-radius-sm);
  border: 1.5px solid var(--obh-border);
  font-weight: 700;
  cursor: pointer;
  color: var(--obh-navy-900);
  transition: all .15s ease;
  margin: 0;
}
.obh-toggle-group input[type="radio"]:checked + label {
  background: var(--obh-gradient-btn);
  border: none;
  color: #fff;
}
.obh-toggle-group input[type="radio"]:focus-visible + label { outline: 3px solid var(--obh-teal-400); outline-offset: 2px; }

/* Slider */
.obh-slider-row { display: flex; align-items: center; gap: 16px; }
.obh-slider-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--obh-border);
  outline: none;
}
.obh-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--obh-gradient-btn);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(10,37,96,.35);
  cursor: pointer;
}
.obh-slider-row input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--obh-blue-600);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(10,37,96,.35);
  cursor: pointer;
}
.obh-slider-number { width: 160px; flex-shrink: 0; }
.obh-slider-minmax { display: flex; justify-content: space-between; font-size: .78rem; color: var(--obh-muted); margin-top: 4px; }

/* =========================================================
   7. Calculators - lay-out
   ========================================================= */
.obh-calculator {
  background: var(--obh-surface);
  border: 1px solid var(--obh-border);
  border-radius: var(--obh-radius-lg);
  box-shadow: var(--obh-shadow);
  overflow: hidden;
}
.obh-calc-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 900px) {
  .obh-calc-layout { grid-template-columns: 1fr; }
}
.obh-calc-form { padding: 36px; }
.obh-calc-results {
  padding: 36px;
  background: linear-gradient(160deg, rgba(10,37,96,.04), rgba(6,182,164,.06));
  border-left: 1px solid var(--obh-border);
}
/* De berekening blijft in beeld terwijl je de (langere) vragenlijst invult:
   blijft "plakken" totdat je onderaan de calculator bent. */
@media (min-width: 901px) {
  .obh-calc-results {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}
@media (max-width: 900px) {
  .obh-calc-results { border-left: none; border-top: 1px solid var(--obh-border); }
}
.obh-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--obh-border);
}
.obh-result-row:last-child { border-bottom: none; }
.obh-result-row .label { color: var(--obh-muted); font-weight: 600; font-size: .92rem; overflow-wrap: break-word; }
.obh-result-row .value { font-weight: 800; color: var(--obh-navy-900); font-size: 1.05rem; text-align: right; overflow-wrap: break-word; }
.obh-result-hero {
  text-align: center;
  padding: 22px 16px 26px;
  border-radius: var(--obh-radius-md);
  background: var(--obh-gradient);
  color: #fff;
  margin-bottom: 20px;
}
.obh-result-hero .label { color: rgba(255,255,255,.85); font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.obh-result-hero .value { font-size: clamp(1.5rem, 6vw, 2.1rem); font-weight: 800; margin-top: 4px; overflow-wrap: break-word; }
.obh-result-hero .sub { color: rgba(255,255,255,.85); font-size: .84rem; margin-top: 6px; }

.obh-steps-box {
  background: #fff;
  border: 1px solid var(--obh-border);
  border-radius: var(--obh-radius-md);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.obh-steps-box h4 { font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; color: var(--obh-blue-600); margin-bottom: 10px; }

.obh-notice {
  border-radius: var(--obh-radius-sm);
  padding: 14px 16px;
  font-size: .92rem;
  margin: 16px 0;
  display: none;
}
.obh-notice.is-visible { display: block; }
.obh-notice-warning {
  background: var(--obh-warning-bg);
  border: 1px solid var(--obh-warning-border);
  color: var(--obh-warning-text);
}
.obh-notice-info {
  background: rgba(11,127,176,.08);
  border: 1px solid rgba(11,127,176,.3);
  color: var(--obh-navy-900);
}
.obh-disclaimer {
  font-size: .82rem;
  color: var(--obh-muted);
  background: var(--obh-bg);
  border: 1px solid var(--obh-border);
  border-radius: var(--obh-radius-sm);
  padding: 14px 16px;
  margin-top: 24px;
}

/* =========================================================
   8. Tabel (geldverstrekkers vergelijken)
   ========================================================= */
.obh-table-wrap {
  overflow-x: auto;
  border-radius: var(--obh-radius-lg);
  border: 1px solid var(--obh-border);
  box-shadow: var(--obh-shadow);
}
table.obh-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: #fff;
}
table.obh-table thead th {
  background: var(--obh-navy-900);
  color: #fff;
  text-align: left;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 16px 18px;
}
table.obh-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--obh-border);
  font-size: .96rem;
}
table.obh-table tbody tr:last-child td { border-bottom: none; }
table.obh-table tbody tr:hover { background: var(--obh-bg); }
/* =========================================================
   9. Contactformulier
   ========================================================= */
.obh-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .obh-contact-layout { grid-template-columns: 1fr; }
}
.obh-contact-info {
  background: var(--obh-gradient);
  color: #fff;
  border-radius: var(--obh-radius-lg);
  padding: 34px;
}
.obh-contact-info h3 { color: #fff; }
.obh-contact-info ul { list-style: none; padding: 0; margin: 20px 0 0; }
.obh-contact-info li { margin-bottom: 14px; font-weight: 600; }
.obh-form-success, .obh-form-error {
  border-radius: var(--obh-radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
  font-weight: 600;
}
.obh-form-success { background: rgba(6,182,164,.12); color: var(--obh-success); border: 1px solid rgba(6,182,164,.4); }
.obh-form-error { background: rgba(216,70,91,.1); color: var(--obh-danger); border: 1px solid rgba(216,70,91,.4); }

/* =========================================================
   10. Footer
   ========================================================= */
.obh-footer {
  background: var(--obh-surface);
  border-top: 1px solid var(--obh-border);
  padding: 56px 0 28px;
  margin-top: 40px;
}
.obh-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 800px) {
  .obh-footer-grid { grid-template-columns: 1fr; }
}
.obh-footer-logo img { width: 60%; min-width: 220px; max-width: 320px; height: auto; margin-bottom: 14px; }
.obh-footer p { color: var(--obh-muted); font-size: .92rem; }
.obh-footer h4 { font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; color: var(--obh-navy-900); margin-bottom: 14px; }
.obh-footer ul { list-style: none; padding: 0; margin: 0; }
.obh-footer li { margin-bottom: 10px; }
.obh-footer a { color: var(--obh-muted); font-size: .92rem; }
.obh-footer a:hover { color: var(--obh-blue-600); }
.obh-footer-bottom {
  border-top: 1px solid var(--obh-border);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .82rem;
  color: var(--obh-muted);
}
.obh-footer-disclaimer {
  font-size: .8rem;
  color: var(--obh-muted);
  max-width: 900px;
  margin: 0 0 24px;
}

/* =========================================================
   11. Overige pagina's / algemeen
   ========================================================= */
.obh-page-hero {
  background: var(--obh-gradient);
  color: #fff;
  padding: clamp(150px, 22vw, 210px) 0 58px;
}
.obh-page-hero h1 { color: #fff; margin: 0; }
.obh-page-hero p { color: rgba(255,255,255,.9); margin-top: 10px; max-width: 700px; }
.obh-content { max-width: 820px; }
.obh-content h2 { margin-top: 1.4em; }
.obh-content ul { color: var(--obh-ink); }
.obh-faq { border-top: 1px solid var(--obh-border); }
.obh-faq-item { border-bottom: 1px solid var(--obh-border); padding: 20px 0; }
.obh-faq-item h3 { margin-bottom: 8px; }
.obh-faq-item p { color: var(--obh-muted); margin: 0; }

.obh-cta-band {
  background: var(--obh-navy-900);
  color: #fff;
  border-radius: var(--obh-radius-lg);
  padding: 48px;
  text-align: center;
}
.obh-cta-band h2 { color: #fff; }
.obh-cta-band p { color: rgba(255,255,255,.85); max-width: 560px; margin-left: auto; margin-right: auto; }
.obh-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }

.obh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--obh-navy-900);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.obh-skip-link:focus { left: 0; }

@media (max-width: 600px) {
  section { padding: 48px 0; }
  .obh-hero { padding-bottom: 64px; }
  .obh-hero-actions .obh-btn, .obh-cta-actions .obh-btn { width: 100%; }
  .obh-calc-form, .obh-calc-results { padding: 24px; }
  .obh-cta-band { padding: 32px 22px; }
  .obh-contact-info { padding: 26px; }
  .obh-slider-row { flex-wrap: wrap; }
  .obh-slider-row input[type="range"] { flex-basis: 100%; }
  .obh-slider-number { width: 100%; }
}