:root{
  --navy: #0B2A47;
  --navy-2: #163C61;
  --navy-3: #071A2C;
  --gold: #B6975A;
  --gold-light: #D8BD8C;
  --slate: #6D93B8;
  --bg: #F5F5F1;
  --panel: #FFFFFF;
  --panel-2: #EDEEE8;
  --ink: #182230;
  --muted: #5B6472;
  --line: #DCDCD3;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: 'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

a{ color: inherit; }
img{ max-width:100%; display:block; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 720px){
  .wrap{ padding: 0 26px; }
  body{ font-size: 16px; }
}

a:focus-visible, button:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

/* ---------------- NAV ---------------- */

header.site{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245,245,241,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size: 1.05rem;
  color: var(--navy);
  text-decoration: none;
}

.brand .mark{
  width: 34px; height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand small{
  display:block;
  font-family:'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight:500;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 1px;
}

nav.links{
  display:flex;
  gap: 28px;
  font-size: 0.92rem;
  font-weight: 500;
}

nav.links a{
  text-decoration:none;
  color: var(--navy);
  position: relative;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
nav.links a:hover{ color: var(--gold); }
nav.links a.active{
  border-bottom: 2px solid var(--gold);
  color: var(--navy);
  font-weight: 700;
}

.nav-cta{
  background: var(--navy);
  color: #fff;
  padding: 10px 20px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-cta:hover{ background: var(--navy-2); }

.nav-toggle{
  display:none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  width: 40px;
  height: 40px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  display:block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  position: relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width: 860px){
  nav.links{
    display:none;
    position: absolute;
    top: 100%;
    left:0; right:0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
  }
  nav.links.open{ display:flex; }
  nav.links a{
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
  }
  nav.links a.active{ border-left: 3px solid var(--gold); background: var(--panel-2); }
  .nav-toggle{ display:flex; }
  header.site{ position: sticky; }
  .nav{ position: relative; }
}

/* ---------------- PAGE HEADER (non-home pages) ---------------- */

.page-header.wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 66px 0 26px;
}

.page-header-main{ max-width: 640px; }

.page-header h1{
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  max-width: 28ch;
  position: relative;
  padding-top: 22px;
}
.page-header h1::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width: 40px; height: 4px;
  background: var(--gold);
}

.page-header p{
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 58ch;
}

.page-index{
  font-family: 'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(3.6rem, 9vw, 6.4rem);
  line-height: 1;
  color: var(--line);
  flex-shrink: 0;
  user-select: none;
}

@media (max-width: 780px){
  .page-header.wrap{ flex-direction: column; gap: 10px; }
  .page-index{ display:none; }
}

.breadcrumb{
  font-size: 0.85rem;
  color: var(--muted);
  padding-top: 26px;
}
.breadcrumb a{ text-decoration:none; color: var(--muted); }
.breadcrumb a:hover{ color: var(--gold); }

/* ---------------- HERO (home) ---------------- */

.hero{ padding: 76px 0 0; }

.hero-top{
  display:flex;
  align-items: flex-start;
  gap: 52px;
}

@media (max-width: 860px){
  .hero-top{ flex-direction: column; gap: 30px; }
}

.hero-headline{ flex: 1.35; }

.hero-badge{
  display:inline-block;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero h1{
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);
  font-weight: 800;
  max-width: 13ch;
}

@media (max-width: 600px){
  .hero h1{ max-width: 22ch; }
}

.hero-divider{
  width: 3px;
  align-self: stretch;
  background: var(--gold);
  flex-shrink: 0;
  min-height: 170px;
}

@media (max-width: 860px){
  .hero-divider{ width: 100%; height: 3px; min-height: 0; }
}

.hero-tagline{
  flex: 1;
  padding-top: 6px;
}

.hero-tagline .big{
  font-family: 'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.4rem;
  line-height: 1.32;
}

.hero-tagline .lead{
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 34ch;
}

.hero-body{
  margin-top: 30px;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-cta-row{
  margin-top: 30px;
  display:flex;
  gap: 18px;
  align-items:center;
  flex-wrap: wrap;
}

.btn-primary{
  background: var(--navy);
  color:#fff;
  padding: 15px 26px;
  border-radius: 3px;
  text-decoration:none;
  font-weight:600;
  font-size: 0.95rem;
  border: 1px solid var(--navy);
  display:inline-block;
}
.btn-primary:hover{ background: var(--navy-2); }

.btn-ghost{
  color: var(--navy);
  text-decoration:none;
  font-weight:600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* three-part promise, plain typographic row, no boxed card */

.hero-promise{
  margin-top: 54px;
  display:flex;
  border-top: 1px solid var(--line);
}

.promise-item{
  flex: 1;
  padding: 22px 30px 22px 0;
  border-right: 1px solid var(--line);
}
.promise-item:last-child{ border-right: none; padding-right: 0; }
.promise-item:not(:first-child){ padding-left: 30px; }

.promise-item .num{
  color: var(--gold);
  font-family: 'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
}
.promise-item .label{
  margin-top: 8px;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.02rem;
}

@media (max-width: 720px){
  .hero-promise{ flex-direction: column; }
  .promise-item{ border-right: none; border-bottom: 1px solid var(--line); padding: 20px 0 !important; }
  .promise-item:last-child{ border-bottom: none; }
}

/* function tags strip, grounds the hero in the real work */

.hero-tags{
  margin-top: 44px;
  padding: 30px 0 44px;
}

.hero-tags .cap{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}

.tag-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-chip{
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 7px 16px;
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 600;
  background: var(--panel);
}

.tag-chip.more{
  color: var(--gold);
  border-color: var(--gold-light);
  text-decoration: none;
}

/* ---------------- SECTION SCAFFOLD ---------------- */

section{ padding: 76px 0; }
section.tint{ background: var(--panel-2); }
section.first{ padding-top: 16px; }

.section-head{ max-width: 640px; margin-bottom: 46px; }
.section-head h2{
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 700;
  position: relative;
  padding-top: 20px;
}
.section-head h2::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width: 34px; height: 4px;
  background: var(--gold);
}
.section-head p{ margin-top: 16px; color: var(--muted); font-size: 1.03rem; max-width: 56ch; }

/* ---------------- Home teaser cards ---------------- */

.teaser-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 860px){ .teaser-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .teaser-grid{ grid-template-columns: 1fr; } }

.teaser-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 28px 26px;
  text-decoration: none;
  display:block;
  border-top: 3px solid var(--gold);
}
.teaser-card h3{
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
}
.teaser-card p{
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}
.teaser-card .go{
  margin-top: 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gold);
}

/* ---------------- WAAROM (4-pt list + quote) ---------------- */

.why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
@media (max-width: 780px){ .why-grid{ grid-template-columns: 1fr; } }

.why-item{ display:flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.why-item .n{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; color: var(--gold); font-size: 0.95rem; min-width: 26px; }
.why-item h3{ font-size: 1.08rem; font-weight: 700; }
.why-item p{ margin-top: 6px; color: var(--muted); font-size: 0.96rem; }

.quote-bar{
  margin-top: 48px;
  padding-left: 26px;
  border-left: 4px solid var(--gold);
  font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--navy);
  line-height: 1.4;
  max-width: 52ch;
}

/* ---------------- SAMENWERKING (flow) ---------------- */

.flow{
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 20px 0 8px;
}

.flow-node{ text-align:center; width: 190px; }
.flow-node .dot{
  width: 90px; height: 90px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.flow-node.coa .dot{ background: var(--gold); }
.flow-node.tw .dot{ background: var(--navy); }
.flow-node.werk .dot{ background: var(--slate); }
.flow-node .dot span{ color:#fff; font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight:800; font-size: 0.78rem; letter-spacing: 0.02em; }
.flow-node h4{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight:700; color: var(--navy); font-size: 1rem; }
.flow-node p{ margin-top: 4px; color: var(--muted); font-size: 0.88rem; }

.flow-arrow{ color: var(--gold); font-size: 1.6rem; padding-bottom: 40px; }

@media (max-width: 720px){
  .flow{ flex-direction:column; }
  .flow-arrow{ transform: rotate(90deg); padding-bottom: 0; }
}

.disclaimer{ text-align:center; margin-top: 22px; color: var(--muted); font-size: 0.88rem; }
.disclaimer a{ color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }
.disclaimer a:hover{ color: var(--gold); }

.pos-grid{ margin-top: 56px; display:grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
@media (max-width: 780px){ .pos-grid{ grid-template-columns: 1fr; } }
.pos-item h4{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; color: var(--navy); font-size: 1.02rem; border-top: 3px solid var(--gold); padding-top: 14px; }
.pos-item p{ margin-top: 8px; color: var(--muted); font-size: 0.95rem; }

/* ---------------- FUNCTIES (pill grid) ---------------- */

.func-note{ background: var(--panel); border-left: 3px solid var(--gold); padding: 20px 24px; border-radius: 2px; max-width: 640px; margin-bottom: 48px; }
.func-note h4{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight:700; color: var(--navy); font-size: 0.98rem; }
.func-note p{ margin-top: 8px; color: var(--muted); font-size: 0.92rem; }

.func-categories{ display:flex; flex-direction: column; gap: 40px; }

.func-category h3{
  font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
  position: relative;
  padding-left: 18px;
  margin-bottom: 16px;
}
.func-category h3::before{
  content:"";
  position:absolute;
  left:0; top: 3px;
  width: 4px; height: 16px;
  background: var(--gold);
}

.func-category .tag-chip{
  padding: 12px 20px;
  font-size: 0.95rem;
}

/* ---------------- PROCES (timeline) ---------------- */

.timeline{ position: relative; display:grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 20px; }
.timeline::before{ content:""; position:absolute; top: 14px; left: 0; right:0; height: 2px; background: var(--line); }
@media (max-width: 920px){ .timeline{ grid-template-columns: repeat(3, 1fr); } .timeline::before{ display:none; } }
@media (max-width: 560px){ .timeline{ grid-template-columns: 1fr 1fr; } }

.t-step{ position:relative; }
.t-step .dot{
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color:#fff;
  font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight:700; font-size: 0.72rem;
  display:flex; align-items:center; justify-content:center; position: relative; z-index: 1;
}
.t-step:last-child .dot{ background: var(--gold); }
.t-step h4{ margin-top: 16px; font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight:700; color: var(--navy); font-size: 0.98rem; }
.t-step p{ margin-top: 4px; color: var(--muted); font-size: 0.86rem; }

/* four-step variant: fuller sentences need more room, so 2x2 with no connector line */
.timeline.timeline-4{
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 52px;
}
.timeline.timeline-4::before{ display:none; }
.timeline-4 .dot{ width: 34px; height: 34px; font-size: 0.8rem; }
.timeline-4 h4{ font-size: 1.05rem; max-width: 32ch; }
.timeline-4 p{ font-size: 0.92rem; max-width: 34ch; }
@media (max-width: 700px){ .timeline.timeline-4{ grid-template-columns: 1fr; } }

.proces-foot{
  margin-top: 48px; background: var(--navy); color:#fff; text-align:center; padding: 26px;
  border-radius: 4px; font-weight: 600; font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-size: 1.05rem;
}

/* ---------------- ZEKERHEID (wage + legal) ---------------- */

.zek-grid{ display:grid; grid-template-columns: 340px 1fr; gap: 56px; }
@media (max-width: 860px){ .zek-grid{ grid-template-columns: 1fr; } }

.wage-card{ background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 32px 30px; }
.wage-card .figure{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 800; font-size: 2.6rem; color: var(--navy); }
.wage-card .sub{ margin-top: 4px; color: var(--muted); font-size: 0.92rem; }
.wage-card .note{ margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 600; font-size: 0.92rem; color: var(--navy); }

.legal-list{ display:flex; flex-direction: column; }
.legal-item{ display:grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.legal-item:last-child{ border-bottom: 1px solid var(--line); }
.legal-item .tag{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; color: var(--gold); font-size: 0.85rem; }
.legal-item h4{ font-size: 1.02rem; font-weight: 700; color: var(--navy); }
.legal-item p{ margin-top: 6px; color: var(--muted); font-size: 0.92rem; }

.source-note{ margin-top: 20px; color: var(--muted); font-size: 0.8rem; }

/* ---------------- POLICY BAND (bemiddelaar disclaimer) ---------------- */

.policy-band{ background: var(--navy); color:#fff; padding: 64px 0; }
.policy-content{ max-width: 720px; }
.policy-tag{ color: var(--gold-light); font-weight: 700; font-size: 0.82rem; }
.policy-content h2{ color:#fff; margin-top: 12px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.policy-content p{ margin-top: 16px; color: #C3D0DD; font-size: 1rem; line-height: 1.65; }

/* ---------------- WERKGEVERSWAARDE (label) ---------------- */

.value-grid{ display:grid; grid-template-columns: 1fr 400px; gap: 56px; align-items:center; }
@media (max-width: 880px){ .value-grid{ grid-template-columns: 1fr; } }

.value-list{ margin-top: 30px; }
.value-row{ display:grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.value-row:last-child{ border-bottom: 1px solid var(--line); }
.value-row .label{ font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.value-row .desc{ color: var(--muted); font-size: 0.93rem; }

.label-card{
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--navy);
  color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  margin: 0 auto;
  padding: 24px;
  position: relative;
}
.label-card::before{
  content:"";
  position:absolute; inset: 14px;
  border: 1px dashed rgba(255,255,255,0.28);
  border-radius: 50%;
}
.label-card .brandname{ color: var(--gold-light); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.05em; }
.label-card h3{ margin-top: 10px; color:#fff; font-size: 1.18rem; font-weight: 800; line-height: 1.22; max-width: 15ch; }
.label-card hr{ margin: 14px auto; width: 34px; border: none; border-top: 2px solid var(--gold); }
.label-card p{ color: #C3D0DD; font-size: 0.78rem; max-width: 20ch; margin: 0 auto; line-height: 1.4; }
.label-card .caveat{ margin-top: 14px; font-weight: 700; font-size: 0.64rem; letter-spacing: 0.02em; color: var(--gold-light); }

/* ---------------- BEMIDDELING (pricing) ---------------- */

.price-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items:center; }
@media (max-width: 880px){ .price-grid{ grid-template-columns: 1fr; } }

.market-line{ margin-top: 6px; }
.stat-outline{
  display:block;
  font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 3.6rem;
  color: var(--line);
  line-height: 1;
}
.market-line p{ margin-top: 18px; color: var(--muted); font-size: 0.94rem; max-width: 38ch; }

.ledger{ background: var(--panel); border: 1px solid var(--line); }
.ledger-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 26px 30px;
  border-bottom: 3px solid var(--gold);
  flex-wrap: wrap;
  gap: 6px 16px;
}
.ledger-head .name{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.ledger-head .range{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 800; color: var(--navy); font-size: 1.9rem; }

.ledger-row{ display:flex; justify-content: space-between; padding: 16px 30px; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink); }
.ledger-row .amt{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; color: var(--gold); }

.ledger-foot{ padding: 18px 30px; background: var(--panel-2); font-size: 0.85rem; color: var(--muted); }

.price-foot{
  margin-top: 42px;
  text-align:center;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.98rem;
}

/* ---------------- DIENSTVERBAND (construction) ---------------- */

.constr-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 860px){ .constr-grid{ grid-template-columns: 1fr; } }

.startend{ margin-top: 26px; background: var(--panel); border-left: 3px solid var(--gold); padding: 24px 26px; border-radius: 2px; }
.startend .tag{ font-weight: 700; color: var(--gold); font-size: 0.8rem; }
.startend p{ margin-top: 10px; font-weight: 700; color: var(--navy); font-size: 1.08rem; line-height: 1.4; }

.uwv-note{ margin-top: 18px; color: var(--muted); font-size: 0.88rem; }

.constr-list{ display:flex; flex-direction: column; }
.constr-item{ display:grid; grid-template-columns: 32px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.constr-item:last-child{ border-bottom: 1px solid var(--line); }
.constr-item .num{ font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; color: var(--gold); font-size: 0.9rem; }
.constr-item h4{ font-size: 1rem; font-weight: 700; color: var(--navy); }
.constr-item p{ margin-top: 4px; color: var(--muted); font-size: 0.9rem; }

/* ---------------- FINAL CTA / contact ---------------- */

.final{ background: var(--navy-3); color: #fff; padding: 90px 0; }
.final-grid{ display:flex; gap: 56px; align-items: flex-start; flex-wrap: wrap; }
.final-grid > *{ flex: 1 1 320px; }
.final-grid > *:first-child{ flex: 2 1 420px; }
@media (max-width: 860px){ .final-grid > *{ flex-basis: 100%; } }

.final h2{ color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; max-width: 13ch; }
@media (max-width: 600px){ .final h2{ max-width: 30ch; } }
.final .lead{ margin-top: 18px; color: #AEBECE; max-width: 44ch; font-size: 1.02rem; }

.final-points{ margin-top: 32px; display:flex; flex-direction: column; gap: 0; }
.final-point{ display:flex; gap:16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.final-point:last-child{ border-bottom: 1px solid rgba(255,255,255,0.15); }
.final-point .num{ color: var(--gold-light); font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif; font-weight:700; font-size: 0.85rem; }
.final-point strong{ display:block; font-size: 0.98rem; }
.final-point span{ color: #9FB0C1; font-size: 0.88rem; }

.final-card{
  background: transparent;
  border: 2px solid var(--gold);
  border-radius: 0;
  padding: 44px 40px;
}
.final-card .eyebrow{ color: var(--gold-light); font-weight: 700; font-size: 0.8rem; }
.final-card h3{ margin-top: 14px; color:#fff; font-size: 1.7rem; font-weight: 800; line-height: 1.25; }
.final-card hr{ margin: 24px 0; border: none; border-top: 1px solid rgba(255,255,255,0.18); }
.final-card p{ color: #B9C7D6; font-size: 0.94rem; }
.final-card .btn-primary{ margin-top: 26px; background: var(--gold); border-color: var(--gold); color: var(--navy-3); }
.final-card .btn-primary:hover{ background: var(--gold-light); }

/* ---------------- CONTACT PAGE EXTRAS ---------------- */

.contact-grid{
  display:flex;
  gap: 56px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.contact-grid > .contact-form{ flex: 2 1 420px; margin-top: 0; }
.contact-grid > .contact-aside{ flex: 1 1 260px; }

.contact-aside-block{
  padding: 22px 0;
  border-top: 1px solid var(--line);
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.contact-aside-block:first-child{ padding-top: 0; border-top: none; }

.contact-aside-block h4{
  font-family:'Archivo', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
}
.contact-aside-block a{
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.contact-aside-block a:hover{ color: var(--gold); }
.contact-aside-block p{ color: var(--muted); font-size: 0.9rem; }

.aside-points{ list-style: none; display:flex; flex-direction: column; gap: 12px; }
.aside-points li{ color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.aside-points li strong{ color: var(--navy); }

.contact-form{
  max-width: none;
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 22px;
}

.form-grid-2{
  display:flex;
  gap: 22px;
  flex-wrap: wrap;
}
.form-grid-2 .form-row{ flex: 1; min-width: 220px; }

.form-row{ display:flex; flex-direction: column; gap: 8px; }

.form-row label{
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
}

.form-row input,
.form-row textarea{
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--panel);
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(182,151,90,0.18);
}

.form-row-submit{
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 4px;
}

.contact-form button{ border: 1px solid var(--navy); cursor: pointer; }

.form-note{
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 32ch;
}

.hp-field{
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-success{
  max-width: 680px;
  margin-top: 8px;
  background: var(--panel);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 20px 24px;
  color: var(--navy);
  font-weight: 600;
}

.form-error{
  max-width: 680px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}
.form-error a{ color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }
.form-error a:hover{ color: var(--gold); }

/* ---------------- FOOTER ---------------- */

footer{
  background: var(--navy-3);
  color: #7E90A2;
  padding: 40px 0;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

footer .foot-grid{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

footer .foot-links{
  display:flex;
  gap: 22px;
  flex-wrap: wrap;
}
footer .foot-links a{ text-decoration:none; color: #9FB0C1; }
footer .foot-links a:hover{ color: var(--gold-light); }

footer .foot-contact{ display:flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
footer .foot-contact a{ color: #C3D0DD; font-weight: 600; text-decoration:none; }
footer .foot-contact a:hover{ color: var(--gold-light); }

footer .foot-bottom{
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

footer .foot-credit{
  margin-top: 14px;
  color: #5C6C7C;
  font-size: 0.78rem;
}