@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --brand-ink: #0e1a17;
  --brand-ink-soft: #3c4a45;
  --brand-ink-faint: #5d6b65;
  --brand-paper: #ffffff;
  --brand-sand: #f4f1e9;
  --brand-sand-deep: #e9e3d5;
  --brand-line: #ddd6c7;
  --brand-accent: #ff5b22;
  --brand-accent-deep: #c9410f;
  --brand-accent-darker: #a5330a;
  --brand-accent-soft: #ffe7dc;
  --brand-lime: #c8f560;
  --brand-lime-ink: #1f2a12;
  --brand-deep: #0d1614;
  --brand-deep-soft: #16231f;
  --brand-deep-line: #27392f;
  --brand-on-deep: #f2f5f1;
  --brand-on-deep-soft: #b8c3bd;
  --brand-radius-sm: 12px;
  --brand-radius: 18px;
  --brand-radius-lg: 30px;
  --brand-shadow-sm: 0 6px 18px rgba(14, 26, 23, 0.08);
  --brand-shadow-md: 0 18px 42px rgba(14, 26, 23, 0.13);
  --brand-shadow-lg: 0 34px 80px rgba(14, 26, 23, 0.2);
  --brand-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --brand-gutter: clamp(1.1rem, 4vw, 2.4rem);
  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--brand-ink);
  --bs-body-bg: var(--brand-paper);
  --bs-link-color: var(--brand-accent-deep);
  --bs-link-hover-color: var(--brand-accent-darker);
  --bs-border-radius: 14px;
  --bs-border-radius-lg: 22px;
  --bs-border-color: var(--brand-line);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--brand-ink);
  background-color: var(--brand-paper);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: "Sora", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--brand-ink);
}

h1,
.display-hero {
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4.05rem);
  font-weight: 800;
  letter-spacing: -0.032em;
}

h2 {
  font-size: clamp(1.7rem, 1.25rem + 1.85vw, 2.9rem);
}

h3 {
  font-size: clamp(1.28rem, 1.08rem + 0.85vw, 1.75rem);
}

h4 {
  font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.35rem);
}

p {
  margin-bottom: 1.1rem;
}

a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.22s var(--brand-ease);
}

img {
  max-width: 100%;
  height: auto;
}

.container,
.container-fluid,
.container-lg,
.container-xl {
  padding-left: var(--brand-gutter);
  padding-right: var(--brand-gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brand-accent-deep);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-accent);
}

.eyebrow--on-deep {
  color: var(--brand-lime);
}

.eyebrow--on-deep::before {
  background: var(--brand-lime);
}

.lead-line {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.68;
  color: var(--brand-ink-soft);
  max-width: 62ch;
}

.lead-line--on-deep {
  color: var(--brand-on-deep-soft);
}

.section {
  position: relative;
  padding: clamp(3.6rem, 7vw, 6.6rem) 0;
}

.section--tight {
  padding: clamp(2.4rem, 4.5vw, 4rem) 0;
}

.section--sand {
  background-color: var(--brand-sand);
}

.section--deep {
  background-color: var(--brand-deep);
  color: var(--brand-on-deep);
}

.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4 {
  color: var(--brand-on-deep);
}

.section--deep p {
  color: var(--brand-on-deep-soft);
}

.section--photo {
  background-color: var(--brand-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--brand-on-deep);
}

.section--photo h1,
.section--photo h2,
.section--photo h3,
.section--photo h4 {
  color: var(--brand-on-deep);
}

.section--photo p,
.section--photo li {
  color: var(--brand-on-deep-soft);
}

.section-head {
  max-width: 72ch;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head--center .lead-line {
  margin-left: auto;
  margin-right: auto;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 82vh, 780px);
  padding: clamp(7rem, 13vh, 10rem) 0 clamp(4rem, 8vh, 6.5rem);
  background-color: var(--brand-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--brand-on-deep);
  overflow: hidden;
}

.hero h1,
.hero h2 {
  color: var(--brand-on-deep);
}

.hero p {
  color: var(--brand-on-deep-soft);
}

.hero__panel {
  max-width: 44rem;
  position: relative;
  z-index: 2;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.75rem;
  margin-top: 3rem;
  padding-top: 1.9rem;
  border-top: 1px solid rgba(242, 245, 241, 0.18);
}

.hero__meta-item strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 700;
  color: var(--brand-lime);
  line-height: 1.1;
}

.hero__meta-item span {
  font-size: 0.9rem;
  color: var(--brand-on-deep-soft);
  letter-spacing: 0.02em;
}

.hero--compact {
  min-height: 0;
  padding: clamp(6.5rem, 11vh, 8.5rem) 0 clamp(3rem, 6vh, 4.6rem);
}

.btn-accent,
.btn-lime,
.btn-ghost,
.btn-outline-deep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.012em;
  padding: 0.92rem 1.85rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.28s var(--brand-ease), background-color 0.28s var(--brand-ease),
    color 0.28s var(--brand-ease), border-color 0.28s var(--brand-ease), box-shadow 0.28s var(--brand-ease);
}

.btn-accent {
  background-color: var(--brand-accent-deep);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(201, 65, 15, 0.28);
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background-color: var(--brand-accent-darker);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(165, 51, 10, 0.34);
}

.btn-lime {
  background-color: var(--brand-lime);
  color: var(--brand-lime-ink);
}

.btn-lime:hover,
.btn-lime:focus-visible {
  background-color: #d7ff7d;
  color: var(--brand-lime-ink);
  transform: translateY(-2px);
}

.btn-ghost {
  background-color: transparent;
  color: var(--brand-on-deep);
  border-color: rgba(242, 245, 241, 0.4);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: rgba(242, 245, 241, 0.12);
  border-color: var(--brand-on-deep);
  color: var(--brand-on-deep);
  transform: translateY(-2px);
}

.btn-outline-deep {
  background-color: transparent;
  color: var(--brand-ink);
  border-color: var(--brand-ink);
}

.btn-outline-deep:hover,
.btn-outline-deep:focus-visible {
  background-color: var(--brand-ink);
  color: var(--brand-paper);
  transform: translateY(-2px);
}

.btn-accent:focus-visible,
.btn-lime:focus-visible,
.btn-ghost:focus-visible,
.btn-outline-deep:focus-visible {
  outline: 3px solid var(--brand-lime);
  outline-offset: 3px;
}

header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s var(--brand-ease), box-shadow 0.3s var(--brand-ease),
    background-color 0.3s var(--brand-ease);
}

header.is-scrolled {
  border-bottom-color: var(--brand-line);
  box-shadow: 0 10px 30px rgba(14, 26, 23, 0.08);
  background-color: rgba(255, 255, 255, 0.99);
}

.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.9rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--brand-ink-soft);
  border-bottom: 1px solid var(--brand-sand-deep);
}

.site-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.site-bar__item i {
  color: var(--brand-accent-deep);
  font-size: 0.8rem;
}

.navbar {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.navbar-brand {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--brand-ink);
}

.navbar .nav-link {
  font-family: "Sora", sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--brand-ink);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  transition: background-color 0.24s var(--brand-ease), color 0.24s var(--brand-ease);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  background-color: var(--brand-sand);
  color: var(--brand-accent-darker);
}

.navbar .nav-link.active {
  color: var(--brand-accent-darker);
  font-weight: 600;
}

.navbar-toggler {
  border: 1.5px solid var(--brand-line);
  border-radius: 12px;
  padding: 0.4rem 0.62rem;
  color: var(--brand-ink);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.navbar-toggler i {
  font-size: 1.05rem;
}

.card-soft {
  position: relative;
  height: 100%;
  padding: clamp(1.4rem, 2.6vw, 2.15rem);
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
  transition: transform 0.36s var(--brand-ease), box-shadow 0.36s var(--brand-ease),
    border-color 0.36s var(--brand-ease);
}

.card-soft:hover {
  transform: translateY(-6px);
  box-shadow: var(--brand-shadow-md);
  border-color: var(--brand-accent);
}

.card-soft__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: var(--brand-accent-soft);
  color: var(--brand-accent-darker);
  font-size: 1.35rem;
  margin-bottom: 1.15rem;
}

.card-soft h3,
.card-soft h4 {
  margin-bottom: 0.7rem;
}

.card-soft p:last-child {
  margin-bottom: 0;
}

.card-media {
  overflow: hidden;
  border-radius: var(--brand-radius-lg);
  background-color: var(--brand-sand-deep);
  border: 1px solid var(--brand-line);
}

.card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--brand-ease);
}

.card-media:hover img {
  transform: scale(1.045);
}

.card-dark {
  background-color: var(--brand-deep-soft);
  border: 1px solid var(--brand-deep-line);
  border-radius: var(--brand-radius-lg);
  padding: clamp(1.5rem, 2.8vw, 2.3rem);
  color: var(--brand-on-deep);
  height: 100%;
  transition: transform 0.36s var(--brand-ease), border-color 0.36s var(--brand-ease);
}

.card-dark:hover {
  transform: translateY(-6px);
  border-color: rgba(200, 245, 96, 0.5);
}

.card-dark h3,
.card-dark h4 {
  color: var(--brand-on-deep);
}

.card-dark p {
  color: var(--brand-on-deep-soft);
}

.card-dark p:last-child {
  margin-bottom: 0;
}

.stat-block {
  padding: 1.4rem 0;
  border-top: 2px solid var(--brand-sand-deep);
}

.stat-block strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: clamp(2rem, 1.5rem + 1.7vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-accent-deep);
  margin-bottom: 0.5rem;
}

.stat-block span {
  display: block;
  font-size: 0.95rem;
  color: var(--brand-ink-soft);
}

.section--deep .stat-block {
  border-top-color: var(--brand-deep-line);
}

.section--deep .stat-block strong {
  color: var(--brand-lime);
}

.section--deep .stat-block span {
  color: var(--brand-on-deep-soft);
}

.step-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step-list li {
  position: relative;
  padding: 0 0 1.65rem 3.5rem;
  counter-increment: step;
}

.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  background-color: var(--brand-ink);
  color: var(--brand-lime);
  font-family: "Sora", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.step-list li::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.6rem;
  bottom: 0.2rem;
  width: 1px;
  background-color: var(--brand-line);
}

.step-list li:last-child {
  padding-bottom: 0;
}

.step-list li:last-child::after {
  display: none;
}

.step-list h4 {
  margin-bottom: 0.4rem;
}

.step-list p {
  margin-bottom: 0;
  color: var(--brand-ink-soft);
}

.section--deep .step-list li::before {
  background-color: var(--brand-lime);
  color: var(--brand-lime-ink);
}

.section--deep .step-list li::after {
  background-color: var(--brand-deep-line);
}

.section--deep .step-list p {
  color: var(--brand-on-deep-soft);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.85rem;
}

.check-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.18em;
  font-size: 0.85rem;
  color: var(--brand-accent-deep);
}

.section--deep .check-list li::before {
  color: var(--brand-lime);
}

.price-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border-radius: var(--brand-radius-lg);
  border: 1px solid var(--brand-line);
  background-color: var(--brand-paper);
  box-shadow: var(--brand-shadow-sm);
  transition: transform 0.36s var(--brand-ease), box-shadow 0.36s var(--brand-ease);
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--brand-shadow-md);
}

.price-card--featured {
  background-color: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--brand-on-deep);
  box-shadow: var(--brand-shadow-lg);
}

.price-card--featured h3,
.price-card--featured h4 {
  color: var(--brand-on-deep);
}

.price-card--featured p,
.price-card--featured li {
  color: var(--brand-on-deep-soft);
}

.price-card__tag {
  position: absolute;
  top: -0.75rem;
  right: 1.6rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background-color: var(--brand-lime);
  color: var(--brand-lime-ink);
  font-family: "Sora", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-card__amount {
  font-family: "Sora", sans-serif;
  font-size: clamp(2rem, 1.6rem + 1.3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-accent-deep);
  margin: 0.9rem 0 0.35rem;
}

.price-card--featured .price-card__amount {
  color: var(--brand-lime);
}

.price-card__period {
  font-size: 0.9rem;
  color: var(--brand-ink-faint);
  margin-bottom: 1.4rem;
}

.price-card--featured .price-card__period {
  color: var(--brand-on-deep-soft);
}

.price-card .check-list {
  margin-bottom: 1.7rem;
}

.price-card .btn-accent,
.price-card .btn-lime {
  margin-top: auto;
  width: 100%;
}

.testimonial {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.5rem, 2.8vw, 2.2rem);
  border-radius: var(--brand-radius-lg);
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  box-shadow: var(--brand-shadow-sm);
}

.testimonial__stars {
  color: var(--brand-accent);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
}

.testimonial__quote {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--brand-ink-soft);
  margin: 0;
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--brand-sand-deep);
}

.testimonial__person img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--brand-sand-deep);
  flex: 0 0 auto;
}

.testimonial__person strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
}

.testimonial__person span {
  display: block;
  font-size: 0.84rem;
  color: var(--brand-ink-faint);
}

.member-card {
  text-align: left;
}

.member-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--brand-radius);
  background-color: var(--brand-sand-deep);
  margin-bottom: 1.05rem;
}

.member-card h4 {
  margin-bottom: 0.15rem;
}

.member-card span {
  font-size: 0.88rem;
  color: var(--brand-accent-darker);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.timeline {
  position: relative;
  padding-left: 2.2rem;
  border-left: 2px solid var(--brand-line);
}

.timeline__item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -2.83rem;
  top: 0.45rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--brand-accent);
  border: 3px solid var(--brand-paper);
  box-shadow: 0 0 0 2px var(--brand-accent);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__year {
  font-family: "Sora", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent-darker);
  margin-bottom: 0.25rem;
}

.timeline__item h4 {
  margin-bottom: 0.35rem;
}

.timeline__item p {
  margin-bottom: 0;
  color: var(--brand-ink-soft);
}

.accordion-brand .accordion-item {
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  margin-bottom: 0.85rem;
  overflow: hidden;
  background-color: var(--brand-paper);
}

.accordion-brand .accordion-button {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-ink);
  background-color: var(--brand-paper);
  padding: 1.15rem 1.35rem;
  box-shadow: none;
}

.accordion-brand .accordion-button:not(.collapsed) {
  color: var(--brand-accent-darker);
  background-color: var(--brand-accent-soft);
}

.accordion-brand .accordion-button:focus {
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.accordion-brand .accordion-body {
  padding: 0.4rem 1.35rem 1.35rem;
  color: var(--brand-ink-soft);
  font-size: 0.97rem;
}

.form-panel {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--brand-radius-lg);
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  box-shadow: var(--brand-shadow-md);
}

.form-label {
  font-family: "Sora", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand-ink);
  margin-bottom: 0.4rem;
}

.form-control,
.form-select {
  border: 1.5px solid var(--brand-line);
  border-radius: var(--brand-radius-sm);
  padding: 0.78rem 1rem;
  font-size: 0.97rem;
  color: var(--brand-ink);
  background-color: var(--brand-paper);
  transition: border-color 0.22s var(--brand-ease), box-shadow 0.22s var(--brand-ease);
}

.form-control::placeholder {
  color: #8a938f;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-accent-deep);
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
  color: var(--brand-ink);
}

.form-check-input {
  border: 1.5px solid var(--brand-line);
}

.form-check-input:checked {
  background-color: var(--brand-accent-deep);
  border-color: var(--brand-accent-deep);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
  border-color: var(--brand-accent-deep);
}

.form-check-label {
  font-size: 0.92rem;
  color: var(--brand-ink-soft);
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: #2f7d4f;
}

.form-note {
  font-size: 0.84rem;
  color: var(--brand-ink-faint);
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.newsletter-band {
  border-radius: var(--brand-radius-lg);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  background-color: var(--brand-deep);
  color: var(--brand-on-deep);
  border: 1px solid var(--brand-deep-line);
}

.newsletter-band h2,
.newsletter-band h3 {
  color: var(--brand-on-deep);
}

.newsletter-band p {
  color: var(--brand-on-deep-soft);
  margin-bottom: 0;
}

.newsletter-band .form-control {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(242, 245, 241, 0.25);
  color: var(--brand-on-deep);
}

.newsletter-band .form-control::placeholder {
  color: #9aa8a1;
}

.newsletter-band .form-control:focus {
  border-color: var(--brand-lime);
  box-shadow: 0 0 0 3px rgba(200, 245, 96, 0.22);
  color: var(--brand-on-deep);
}

.map-frame {
  border-radius: var(--brand-radius-lg);
  overflow: hidden;
  border: 1px solid var(--brand-line);
  box-shadow: var(--brand-shadow-sm);
  line-height: 0;
}

.map-frame iframe {
  width: 100%;
  min-height: 380px;
  border: 0;
  display: block;
}

.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--brand-sand-deep);
}

.contact-line:last-of-type {
  border-bottom: 0;
}

.contact-line i {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--brand-accent-soft);
  color: var(--brand-accent-darker);
  font-size: 1rem;
}

.contact-line strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-ink-faint);
  margin-bottom: 0.15rem;
}

.contact-line span,
.contact-line a {
  display: block;
  font-size: 0.98rem;
  color: var(--brand-ink);
}

.cta-band {
  position: relative;
  padding: clamp(2.4rem, 5vw, 4.2rem);
  border-radius: var(--brand-radius-lg);
  background-color: var(--brand-deep);
  background-size: cover;
  background-position: center;
  color: var(--brand-on-deep);
  overflow: hidden;
}

.cta-band h2,
.cta-band h3 {
  color: var(--brand-on-deep);
}

.cta-band p {
  color: var(--brand-on-deep-soft);
}

footer {
  background-color: var(--brand-deep);
  color: var(--brand-on-deep-soft);
  padding-top: clamp(3rem, 5.5vw, 4.6rem);
  font-size: 0.94rem;
}

footer h4,
footer h5 {
  font-family: "Sora", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-on-deep);
  margin-bottom: 1.15rem;
}

footer a {
  color: var(--brand-on-deep-soft);
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  color: var(--brand-lime);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 0.6rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--brand-on-deep);
  margin-bottom: 1.1rem;
}

.footer-brand:hover,
.footer-brand:focus {
  color: var(--brand-on-deep);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.footer-contact li {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

.footer-contact i {
  flex: 0 0 auto;
  margin-top: 0.32rem;
  color: var(--brand-lime);
  font-size: 0.85rem;
}

.footer-legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.5rem 0;
  border-top: 1px solid var(--brand-deep-line);
  font-size: 0.84rem;
  color: #94a29b;
}

.footer-legal p {
  margin-bottom: 0.4rem;
  color: #94a29b;
}

.footer-legal a {
  color: #b8c3bd;
}

.social-dock {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.social-dock a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--brand-deep-line);
  color: var(--brand-on-deep-soft);
  font-size: 0.9rem;
  transition: background-color 0.25s var(--brand-ease), color 0.25s var(--brand-ease),
    border-color 0.25s var(--brand-ease), transform 0.25s var(--brand-ease);
}

.social-dock a:hover,
.social-dock a:focus-visible {
  background-color: var(--brand-lime);
  border-color: var(--brand-lime);
  color: var(--brand-lime-ink);
  transform: translateY(-3px);
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background-color: var(--brand-sand);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-soft--on-deep {
  background-color: rgba(200, 245, 96, 0.12);
  border-color: rgba(200, 245, 96, 0.4);
  color: var(--brand-lime);
}

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-ink);
  color: var(--brand-lime);
  font-size: 1rem;
  cursor: pointer;
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s var(--brand-ease), transform 0.3s var(--brand-ease),
    visibility 0.3s var(--brand-ease), background-color 0.25s var(--brand-ease);
}

.to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover,
.to-top:focus-visible {
  background-color: var(--brand-accent-deep);
  color: #ffffff;
  outline: none;
}

.cookie-keuze {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1090;
  display: flex;
  justify-content: center;
  padding: clamp(0.8rem, 2.2vw, 1.6rem);
  pointer-events: none;
}

.cookie-keuze[hidden] {
  display: none !important;
}

.cookie-keuze__card {
  pointer-events: auto;
  width: min(700px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.15rem;
  padding: clamp(1.15rem, 2.4vw, 1.7rem);
  border-radius: 22px;
  background-color: rgba(13, 22, 20, 0.97);
  color: var(--brand-on-deep);
  border: 1px solid rgba(200, 245, 96, 0.34);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.5s var(--brand-ease), transform 0.5s var(--brand-ease);
}

.cookie-keuze--in .cookie-keuze__card {
  opacity: 1;
  transform: none;
}

.cookie-keuze__mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-lime);
  color: var(--brand-lime-ink);
  font-size: 1.15rem;
  grid-row: span 2;
}

.cookie-keuze__body {
  min-width: 0;
}

.cookie-keuze__title {
  font-family: "Sora", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-on-deep);
  margin-bottom: 0.45rem;
}

.cookie-keuze__text {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--brand-on-deep-soft);
  margin-bottom: 1.05rem;
}

.cookie-keuze__link {
  color: var(--brand-lime);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.cookie-keuze__link:hover,
.cookie-keuze__link:focus-visible {
  color: #d9ff86;
}

.cookie-keuze__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cookie-keuze__btn {
  font-family: "Sora", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.68rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--brand-ease), color 0.25s var(--brand-ease),
    border-color 0.25s var(--brand-ease), transform 0.25s var(--brand-ease);
}

.cookie-keuze__btn--ghost {
  background-color: transparent;
  border-color: rgba(242, 245, 241, 0.38);
  color: var(--brand-on-deep);
}

.cookie-keuze__btn--ghost:hover,
.cookie-keuze__btn--ghost:focus-visible {
  background-color: rgba(242, 245, 241, 0.12);
  border-color: var(--brand-on-deep);
  transform: translateY(-1px);
}

.cookie-keuze__btn--solid {
  background-color: var(--brand-lime);
  color: var(--brand-lime-ink);
}

.cookie-keuze__btn--solid:hover,
.cookie-keuze__btn--solid:focus-visible {
  background-color: #d9ff86;
  transform: translateY(-1px);
}

.cookie-keuze__btn:focus-visible {
  outline: 3px solid rgba(200, 245, 96, 0.65);
  outline-offset: 2px;
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--brand-radius);
  background-color: var(--brand-sand-deep);
  border: 1px solid var(--brand-line);
}

.gallery-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--brand-ease);
}

.gallery-tile:hover img {
  transform: scale(1.06);
}

.gallery-tile__caption {
  padding: 0.85rem 1rem;
  font-size: 0.87rem;
  color: var(--brand-ink-soft);
  background-color: var(--brand-paper);
  border-top: 1px solid var(--brand-line);
}

.divider-thin {
  height: 1px;
  background-color: var(--brand-line);
  border: 0;
  opacity: 1;
  margin: 2.2rem 0;
}

.section--deep .divider-thin {
  background-color: var(--brand-deep-line);
}

.ratio-cover {
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .site-bar {
    display: none;
  }

  .navbar-collapse {
    margin-top: 0.8rem;
    padding: 0.9rem;
    border-radius: var(--brand-radius);
    background-color: var(--brand-sand);
    border: 1px solid var(--brand-line);
  }

  .navbar .nav-link {
    padding: 0.6rem 0.85rem;
  }

  .hero {
    min-height: 0;
  }

  .timeline {
    padding-left: 1.6rem;
  }

  .timeline__item::before {
    left: -2.24rem;
  }
}

@media (max-width: 575.98px) {
  .cookie-keuze__card {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .cookie-keuze__mark {
    grid-row: auto;
  }

  .cookie-keuze__actions {
    flex-direction: column;
  }

  .cookie-keuze__btn {
    width: 100%;
  }

  .hero__meta {
    gap: 1.4rem;
  }

  .map-frame iframe {
    min-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* About page team grid: two readable columns on desktop, horizontal member cards */
.team-grid > [class*="col"] {
  display: flex;
}

.team-grid .member-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
}

.team-grid .member-card__body {
  min-width: 0;
}

.team-grid .member-card img {
  margin-bottom: 0.85rem;
}

@media (min-width: 992px) {
  .team-grid .member-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .team-grid .member-card img {
    flex: 0 0 180px;
    width: 180px;
    max-width: 45%;
    aspect-ratio: 3 / 4;
    margin-bottom: 0;
  }
}

/* Contacts page: the 4 "Bereikbaarheid" cards were squeezed into narrow
   tall columns on desktop. Show them in two readable columns on large
   screens while keeping the single-column stacking on mobile. */
@media (min-width: 992px) {
  main .row.g-4 > .col-md-6.col-lg-3 {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }
}

/* Cookie consent banner: use a fully opaque dark surface so the banner text
   always has a real dark backdrop behind it (the previous rgba(...,0.97)
   background was flattened against the white page background, which made the
   light text fail contrast checks). Also drop the opacity-based reveal so the
   banner is legible the moment it is rendered. */
.cookie-keuze .cookie-keuze__card,
.cookie-keuze__card {
  background-color: #0d1614;
  border-color: rgba(200, 245, 96, 0.5);
  opacity: 1;
  transform: none;
}

.cookie-keuze .cookie-keuze__title,
.cookie-keuze__title {
  color: #ffffff;
}

.cookie-keuze .cookie-keuze__text,
.cookie-keuze__text {
  color: #d9e2dd;
}

.cookie-keuze .cookie-keuze__link,
.cookie-keuze__link {
  color: #d7ff7d;
}

.cookie-keuze .cookie-keuze__btn--ghost,
.cookie-keuze__btn--ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

/* Link contrast fix: Bootstrap 5.3 paints anchors with --bs-link-color-rgb,
   which the theme never overrode, so inline text links fell back to the
   default blue (#0d6efd) and only reached ~4.0:1 on the sand background.
   Give inline links on light sections the darker brand accent instead, and
   a light lime tone on dark/deep sections where the dark accent would vanish. */
main section:not(.section--deep):not(.section--photo):not(.hero) p a,
main section:not(.section--deep):not(.section--photo):not(.hero) li a,
main section:not(.section--deep):not(.section--photo):not(.hero) .accordion-body a,
main .form-note a {
  color: #a5330a;
  text-decoration-color: #a5330a;
}

main section:not(.section--deep):not(.section--photo):not(.hero) p a:hover,
main section:not(.section--deep):not(.section--photo):not(.hero) p a:focus-visible,
main section:not(.section--deep):not(.section--photo):not(.hero) li a:hover,
main section:not(.section--deep):not(.section--photo):not(.hero) li a:focus-visible,
main section:not(.section--deep):not(.section--photo):not(.hero) .accordion-body a:hover,
main .form-note a:hover,
main .form-note a:focus-visible {
  color: #7d2604;
  text-decoration-color: #7d2604;
}

main .section--deep p a,
main .section--deep li a,
main .section--photo p a,
main .section--photo li a {
  color: #d7ff7d;
  text-decoration-color: rgba(215, 255, 125, 0.6);
}

main .section--deep p a:hover,
main .section--deep p a:focus-visible,
main .section--deep li a:hover,
main .section--deep li a:focus-visible,
main .section--photo p a:hover,
main .section--photo p a:focus-visible,
main .section--photo li a:hover,
main .section--photo li a:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

/* Map embed in the service/blog "aanvraag" section: the Google Maps iframe
   renders only a narrow tile inside a very wide rounded frame, leaving a big
   blank strip that reads as an empty card. Fill the frame edge to edge and
   keep the map area proportionate at every breakpoint. */
main .map-frame {
  position: relative;
  background-color: var(--brand-sand-deep);
}

main .map-frame iframe {
  width: 100%;
  height: clamp(260px, 42vw, 420px);
  min-height: 0;
  border: 0;
  display: block;
}

/* Footer map: the Google Maps embed only paints a small tile inside the very
   wide frame, so the remaining area showed up as a huge empty sand-coloured
   box between the link columns and the copyright row. Make the footer map a
   compact, proportionate band that stays readable on every breakpoint, and
   give the (partially rendered) iframe the same dark surface as the footer so
   no light "blank card" remains. */
footer .map-frame {
  background-color: var(--brand-deep-soft);
  border-color: var(--brand-deep-line);
  box-shadow: none;
}

footer .map-frame iframe {
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  min-height: 0;
  border: 0;
  display: block;
  background-color: var(--brand-deep-soft);
}

@media (max-width: 767.98px) {
  footer .map-frame iframe {
    height: 200px;
  }
}

/* Mobile: in the "aanvraag" section the iframe below the form did not paint
   anything, so the rounded map frame collapsed into a tall blank sand-coloured
   card under the submit button (the global `main .map-frame` height clamp still
   resolved to a large box at narrow widths). Give the map iframe a guaranteed
   height on small screens and hide the frame chrome while the embed has no
   content, so only a proportionate map band remains. */
@media (max-width: 767.98px) {
  main .map-frame iframe {
    height: 300px;
    min-height: 300px;
    background-color: var(--brand-sand-deep);
  }

  main .map-frame {
    max-height: 300px;
  }
}

/* Mobile follow-up: on the service pages the "aanvraag" map sits in a
   `.row.mt-5 > .col-12 > .map-frame` wrapper. The frame kept its own box (sand
   background + radius) while the embedded map did not fill it, so a tall empty
   rounded card remained under the submit button. Size the wrapper to the map
   band itself, and remove the sand fill so no blank card is painted. Blog
   pages without a map are unaffected, and desktop widths keep the existing
   clamp-based height. */
@media (max-width: 767.98px) {
  main section .row.mt-5 > .col-12 > .map-frame {
    background-color: transparent;
    height: 230px;
    max-height: 230px;
    overflow: hidden;
  }

  main section .row.mt-5 > .col-12 > .map-frame iframe {
    width: 100%;
    height: 230px;
    min-height: 0;
    display: block;
    background-color: var(--brand-sand-deep);
  }
}

/* Mobile anchor: the "aanvraag" map band was still rendering as a tall empty
   sand-coloured rounded card between the form and the next section. Both
   service page structures (`.row.mt-5 > .col-12 > .map-frame`) and the
   blog-side sidebars (`.card-soft .map-frame`) are addressed, and no sand
   surface is painted when the embed has nothing to show. Uses !important only
   on the height/background of the map surface itself so the earlier global
   `main .map-frame` clamp cannot re-inflate the box on small screens. */
@media (max-width: 767.98px) {
  main .map-frame {
    background-color: var(--brand-deep-soft) !important;
    border-color: var(--brand-line);
    height: auto !important;
    max-height: none !important;
    line-height: 0;
  }

  main .map-frame iframe {
    width: 100%;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    display: block;
    border: 0;
    background-color: var(--brand-deep-soft) !important;
  }
}

/* Blog/article reading layout: `.card-soft` and `.card-dark` are sized with
   `height: 100%` for the equal-height card grids used on the service pages.
   In the two-column article layout (article card in the `.col-lg-8` column,
   author/links cards stacked in the `.col-lg-4` sidebar) that 100% resolves
   against the tall text column, so the shorter standalone panels stretched
   into very large empty blocks and pushed the following CTA section far down
   the page. Cards that end a column are their own block, never a grid cell,
   so they should hug their content. Scoped to those direct column children,
   which leaves the pricing/sidebar cards inside `.row` grids and the
   `card-dark mt-4` comparison block on the service pages untouched. */
main section > .container > .row > [class*="col-"] > .card-soft,
main section > .container > .row > [class*="col-"] > .card-dark {
  height: auto;
}

/* Blog/article reading layout, mobile follow-up: the two-column article row
   (`.row.g-5` with the article in `.col-lg-8` and the author/links cards in
   `.col-lg-4`) still produced very tall empty card surfaces below the text on
   narrow screens. Bootstrap's `.row` stretches every column to the tallest
   sibling, and the cards inside those columns are sized with `height: 100%`
   (needed for the equal-height card grids on the service pages), so each
   panel inherited the stretched column height instead of hugging its own
   content. Stop the stretch and let the stacked panels size to their text.
   This only targets the article layout's outer container/columns; the service
   page card grids use `.row.g-4` / `.row.g-5` on inner rows whose cards keep
   their equal-height behaviour, and desktop side-by-side layout is unchanged
   because the columns still resolve to the same widths. */
main section > .container > .row > .col-lg-8 > .card-soft,
main section > .container > .row > .col-lg-4 > .card-soft,
main section > .container > .row > .col-lg-4 > .card-dark {
  height: auto;
  align-self: start;
}

main section > .container > .row > .col-lg-8,
main section > .container > .row > .col-lg-4 {
  align-self: start;
}

/* Footer on mobile: the last columns of the sitemap grid were being painted
   over / clipped by the rounded map card underneath them (the "Over ons" and
   "Krachttraining in kleine groepen" links were partly hidden). The markup is
   unchanged; the footer grid is simply laid out as a single, normal-flow
   column stack on narrow screens so every link gets its own line and nothing
   can overlap. Desktop keeps the existing four-column footer. */
@media (max-width: 991.98px) {
  footer .container > .row.g-5 > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: auto;
  }

  footer .map-frame,
  footer .footer-legal {
    position: relative;
    z-index: 0;
    clear: both;
  }

  footer .footer-list a {
    display: inline-block;
    max-width: 100%;
  }
}