/*
Theme Name: Smart Fit Boutique
Theme URI: https://smartfitboutique.com
Author: Smart Fit Boutique
Author URI: https://smartfitboutique.com
Description: Een op maat gemaakt one-page WordPress thema voor Smart Fit Boutique – de hoogwaardige fitness studio met oprechte aandacht.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smartfit
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
*/

/* ───────────────────────────────────────────
   🎨  CSS CUSTOM PROPERTIES (Design Tokens)
   ─────────────────────────────────────────── */
:root {
  --sf-primary: #024560;
  --sf-primary-rgb: 2, 69, 96;
  --sf-accent: #F28C28;
  --sf-accent-rgb: 242, 140, 40;
  --sf-white: #ffffff;
  --sf-bg: #ffffff;
  --sf-text: #024560;
  --sf-text-muted: #6b7280;
  --sf-text-light: rgba(255,255,255,0.80);
  --sf-border: #e5e7eb;
  --sf-radius: 0.5rem;
  --sf-font: 'Roboto', sans-serif;
}

/* ───────────────────────────────────────────
   🔄  RESET & BASE
   ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--sf-font);
  color: var(--sf-text);
  background-color: var(--sf-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ───────────────────────────────────────────
   📐  LAYOUT UTILITIES
   ─────────────────────────────────────────── */
.sf-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.sf-container--narrow {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* ───────────────────────────────────────────
   🔝  HEADER / NAVIGATION
   ─────────────────────────────────────────── */
.sf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background: transparent;
}

.sf-header.scrolled {
  background: var(--sf-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.sf-header__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: 0 clamp(16px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.sf-header__logo img {
  height: 180px;
  width: auto;
  margin-left: -32px;
  margin-top: 0;
}

/* ─── Fullscreen Overlay Menu ─── */
.sf-overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--sf-primary);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.sf-overlay-menu.open {
  opacity: 1;
  visibility: visible;
}

.sf-overlay-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 64px);
  height: 80px;
  flex-shrink: 0;
}

.sf-overlay-menu__header .sf-header__logo img {
  height: 180px;
  width: auto;
  margin-left: -32px;
}

.sf-overlay-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sf-white);
  transition: opacity 0.2s;
}

.sf-overlay-menu__close:hover {
  opacity: 0.7;
}

.sf-overlay-menu__close svg {
  width: 28px;
  height: 28px;
}

.sf-overlay-menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px clamp(24px, 6vw, 80px) 48px;
}

.sf-overlay-menu__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .sf-overlay-menu__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
  }
}

@media (min-width: 1024px) {
  .sf-overlay-menu__columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 80px;
  }
  .sf-overlay-menu__header {
    height: 96px;
  }
}

.sf-overlay-menu__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-overlay-menu__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sf-accent);
  margin-bottom: 4px;
}

.sf-overlay-menu__section a {
  color: var(--sf-white);
  font-size: 17px;
  font-weight: 400;
  padding: 4px 0;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
  border: none;
}

.sf-overlay-menu__section a:hover {
  color: var(--sf-accent);
  transform: translateX(4px);
}

.sf-overlay-menu__highlight {
  font-size: 22px !important;
  font-weight: 600 !important;
}

.sf-overlay-menu__cta {
  margin-top: 40px;
  text-align: center;
}

.sf-overlay-menu__cta .sf-btn {
  padding: 14px 40px;
  font-size: 16px;
}


.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  font-family: var(--sf-font);
}

.sf-btn--accent {
  background: var(--sf-accent);
  color: var(--sf-white);
}

.sf-btn--accent:hover {
  background: #d97a1e;
  transform: scale(0.98);
}

.sf-btn--outline {
  background: transparent;
  color: var(--sf-white);
  border: 1px solid rgba(255,255,255,0.3);
}

.sf-btn--outline:hover {
  background: rgba(255,255,255,0.1);
}

.sf-btn--primary {
  background: var(--sf-primary);
  color: var(--sf-white);
}

/* Hamburger toggle – always visible */
.sf-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sf-white);
}

.sf-header__toggle svg {
  width: 28px;
  height: 28px;
}

@media (min-width: 1024px) {
  .sf-header__inner {
    height: 96px;
  }
}

/* ───────────────────────────────────────────
   🦸  HERO SECTION
   ─────────────────────────────────────────── */
.sf-hero {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;
}

.sf-hero__bg {
  position: absolute;
  inset: 0;
}

.sf-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8));
}

.sf-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.sf-hero__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
}

.sf-hero__label {
  color: var(--sf-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-hero__label::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--sf-accent);
}

.sf-hero__title {
  font-size: clamp(28px, 5vw, 60px);
  font-weight: 700;
  color: var(--sf-white);
  line-height: 1.1;
  margin-bottom: 24px;
}

.sf-hero__subtitle {
  color: rgba(255,255,255,0.8);
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 32px;
  max-width: 560px;
}

.sf-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.sf-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.2);
  max-width: 640px;
}

.sf-hero__stat-value {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  color: var(--sf-accent);
}

.sf-hero__stat-label {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}

@media (min-width: 768px) {
  .sf-hero {
    height: 90vh;
  }
  .sf-hero__content {
    padding: 48px;
  }
}

@media (min-width: 1024px) {
  .sf-hero__content {
    padding: 64px;
  }
}

/* ───────────────────────────────────────────
   🎯  MISSION SECTION
   ─────────────────────────────────────────── */
.sf-mission {
  padding: 64px 0 32px;
  background: var(--sf-white);
}

.sf-mission__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

.sf-mission__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.sf-mission__label-bar {
  width: 48px;
  height: 4px;
  background: var(--sf-accent);
  border-radius: 999px;
}

.sf-mission__label-text {
  color: var(--sf-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
}

.sf-mission__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--sf-primary);
  line-height: 1.15;
  margin-bottom: 24px;
}

.sf-mission__text {
  color: var(--sf-text-muted);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.sf-mission__text--sm {
  font-size: 16px;
  margin-bottom: 40px;
}

/* Steps with left border */
.sf-mission__steps {
  border-left: 2px solid var(--sf-border);
  position: relative;
}

.sf-mission__step {
  padding: 20px 0 20px 32px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.sf-mission__step:hover,
.sf-mission__step.active {
  background: rgba(var(--sf-accent-rgb), 0.05);
}

.sf-mission__step.active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sf-accent);
}

.sf-mission__step-number {
  position: absolute;
  left: -16px;
  top: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--sf-white);
  border: 2px solid var(--sf-border);
  color: var(--sf-primary);
  transition: all 0.3s;
}

.sf-mission__step.active .sf-mission__step-number {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
  color: var(--sf-white);
}

.sf-mission__step-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--sf-primary);
  transition: color 0.3s;
}

.sf-mission__step.active .sf-mission__step-title {
  color: var(--sf-accent);
}

.sf-mission__step-desc {
  color: var(--sf-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Mission image */
.sf-mission__image-wrap {
  position: relative;
}

.sf-mission__image {
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.sf-mission__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-mission__image-deco {
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 128px;
  height: 128px;
  background: rgba(var(--sf-accent-rgb), 0.1);
  border-radius: 16px;
  z-index: -1;
}

@media (min-width: 1024px) {
  .sf-mission {
    padding: 80px 0 40px;
  }
  .sf-mission__grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .sf-mission__image-wrap {
    position: sticky;
    top: 96px;
  }
}

/* ───────────────────────────────────────────
   🏷  SECTION HEADER (reusable)
   ─────────────────────────────────────────── */
.sf-section-header {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.sf-section-label {
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sf-accent);
  margin-bottom: 12px;
}

.sf-section-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--sf-primary);
  line-height: 1.15;
}

.sf-section-title .highlight {
  position: relative;
  display: inline-block;
}

.sf-section-title .highlight span {
  position: relative;
  z-index: 1;
}

.sf-section-title .highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 12px;
  background: rgba(var(--sf-accent-rgb), 0.3);
  transform: skewX(-3deg);
  z-index: 0;
}

.sf-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.sf-section-divider__line {
  height: 2px;
  width: 48px;
  background: var(--sf-accent);
  border-radius: 999px;
}

.sf-section-divider__dot {
  height: 8px;
  width: 8px;
  background: var(--sf-accent);
  border-radius: 999px;
}

/* ───────────────────────────────────────────
   📦  AANBOD (Features) CARDS
   ─────────────────────────────────────────── */
.sf-aanbod {
  padding: 0 0 clamp(48px, 5vw, 80px);
  background: var(--sf-white);
}

.sf-aanbod__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

.sf-aanbod__card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.sf-aanbod__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.sf-aanbod__card:hover .sf-aanbod__card-img {
  transform: scale(1.1);
}

.sf-aanbod__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--sf-primary), rgba(var(--sf-primary-rgb), 0.4) 50%, transparent);
  opacity: 0.8;
  transition: opacity 500ms ease;
}

.sf-aanbod__card:hover .sf-aanbod__card-overlay {
  opacity: 0.95;
}

.sf-aanbod__card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(16px, 2vw, 24px);
}

.sf-aanbod__card-title {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--sf-white);
  margin-bottom: 8px;
}

.sf-aanbod__card-desc {
  color: var(--sf-text-light);
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-aanbod__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sf-accent);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 14px);
  transition: gap 300ms ease;
}

.sf-aanbod__card:hover .sf-aanbod__card-link {
  gap: 8px;
}

.sf-aanbod__card-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1023px) {
  .sf-aanbod__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .sf-aanbod__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sf-aanbod__grid::-webkit-scrollbar { display: none; }
  .sf-aanbod__card {
    flex-shrink: 0;
    width: 85vw;
    scroll-snap-align: center;
  }
}

/* ───────────────────────────────────────────
   📜  SMART PROMISE / SERVICES
   ─────────────────────────────────────────── */
.sf-smart {
  padding: 24px 0 24px;
  background: var(--sf-white);
}

.sf-smart__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.sf-smart__image-wrap {
  display: none;
}

.sf-smart__image-frame {
  position: relative;
  overflow: hidden;
  height: 475px;
  background: rgba(0,0,0,0.05);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.sf-smart__image-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-out;
}

.sf-smart__image-tint {
  position: absolute;
  inset: 0;
  background: rgba(var(--sf-primary-rgb), 0.1);
  pointer-events: none;
}

/* Steps cards - horizontal scroll on mobile */
.sf-smart__steps {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding-bottom: 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sf-smart__steps::-webkit-scrollbar { display: none; }

.sf-smart__step {
  flex-shrink: 0;
  width: 85vw;
  scroll-snap-align: center;
}

.sf-smart__step-mobile-img {
  position: relative;
  overflow: hidden;
  height: 220px;
  margin-bottom: 16px;
  border-radius: 12px;
}

.sf-smart__step-mobile-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-smart__step-article {
  padding: 16px 0;
  transition: opacity 0.3s;
}

.sf-smart__step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sf-smart__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border-radius: 6px;
  background: var(--sf-primary);
  color: var(--sf-white);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.sf-smart__step-title {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 800;
  color: var(--sf-primary);
}

.sf-smart__step-body {
  color: #475569;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.7;
  max-width: 65ch;
}

.sf-smart__step-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 8px 20px;
  border-radius: 6px;
  background: var(--sf-accent);
  color: var(--sf-white);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}

.sf-smart__step-cta:hover {
  background: #d97a1e;
}

@media (min-width: 1024px) {
  .sf-smart__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 32px;
  }
  .sf-smart__image-wrap {
    display: block;
    position: sticky;
    top: 128px;
    margin-top: 32px;
  }
  .sf-smart__image-frame {
    height: 590px;
  }
  .sf-smart__steps {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }
  .sf-smart__step {
    flex-shrink: unset;
    width: auto;
    border-top: 1px solid rgba(0,0,0,0.1);
  }
  .sf-smart__step:first-child {
    border-top: none;
  }
  .sf-smart__step-mobile-img {
    display: none;
  }
  .sf-smart__step-article {
    padding: 24px 0;
  }
  .sf-smart__step-num {
    width: 48px;
    height: 32px;
    font-size: 14px;
  }
  .sf-smart__step-cta {
    margin-top: 24px;
  }
}

/* ───────────────────────────────────────────
   ⭐  TESTIMONIALS
   ─────────────────────────────────────────── */
.sf-testimonials {
  padding: 8px 0 24px;
  background: var(--sf-white);
}

.sf-testimonials__title {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  color: var(--sf-primary);
  text-align: center;
  margin-bottom: 24px;
}

.sf-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1100px;
  margin-inline: auto;
}

.sf-testimonial-card {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.sf-testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.sf-testimonial-card__stars svg {
  width: 16px;
  height: 16px;
  fill: var(--sf-accent);
  color: var(--sf-accent);
}

.sf-testimonial-card__name {
  font-weight: 700;
  color: var(--sf-primary);
  margin-bottom: 8px;
}

.sf-testimonial-card__quote {
  color: var(--sf-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.sf-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.sf-testimonials__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.sf-testimonials__dot.active {
  background: var(--sf-primary);
  width: 24px;
}

@media (min-width: 768px) {
  .sf-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ───────────────────────────────────────────
   ❌✅  WHY SMART FIT
   ─────────────────────────────────────────── */
.sf-why {
  padding: 8px 0 48px;
  background: var(--sf-white);
}

.sf-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

.sf-why__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-accent);
  margin-bottom: 16px;
}

.sf-why__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--sf-primary);
  margin-bottom: 32px;
}

.sf-why__intro {
  display: flex;
  gap: 24px;
}

.sf-why__intro-bar {
  width: 6px;
  background: linear-gradient(to bottom, var(--sf-accent), var(--sf-primary), var(--sf-accent));
  border-radius: 999px;
  flex-shrink: 0;
}

.sf-why__intro-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sf-why__intro-text {
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--sf-text-muted);
  line-height: 1.7;
}

.sf-why__callout {
  background: var(--sf-primary);
  border-radius: 12px;
  padding: 20px;
}

.sf-why__callout p {
  color: var(--sf-white);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
}

.sf-why__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}

.sf-why__col {
  border-radius: 12px;
  padding: 20px;
}

.sf-why__col--problems {
  background: #fef2f2;
}

.sf-why__col--solutions {
  background: rgba(var(--sf-accent-rgb), 0.1);
}

.sf-why__col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.sf-why__col--problems .sf-why__col-title {
  color: #ef4444;
}

.sf-why__col--solutions .sf-why__col-title {
  color: var(--sf-accent);
}

.sf-why__col-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.sf-why__col--problems .sf-why__col-item {
  color: var(--sf-text-muted);
}

.sf-why__col--solutions .sf-why__col-item {
  color: var(--sf-primary);
  font-weight: 500;
}

.sf-why__col-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.sf-why__col--problems .sf-why__col-item svg {
  color: #f87171;
}

.sf-why__col--solutions .sf-why__col-item svg {
  color: var(--sf-accent);
}

/* Video */
.sf-why__video-wrap {
  position: relative;
}

.sf-why__video {
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.sf-why__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-why__video-deco {
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 128px;
  height: 128px;
  background: rgba(var(--sf-accent-rgb), 0.1);
  border-radius: 16px;
  z-index: -1;
}

@media (min-width: 640px) {
  .sf-why__columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .sf-why {
    padding: 16px 0 80px;
  }
  .sf-why__grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .sf-why__video-wrap {
    position: sticky;
    top: 96px;
  }
}

/* ───────────────────────────────────────────
   🏠  EXPERIENCE SECTION (split layout)
   ─────────────────────────────────────────── */
.sf-experience {
  width: 100%;
  position: relative;
}

.sf-experience__grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 600px;
  overflow: hidden;
}

.sf-experience__image-side {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.sf-experience__image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-experience__diagonal {
  display: none;
}

.sf-experience__content-side {
  background: var(--sf-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
}

.sf-experience__label {
  color: var(--sf-accent);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: clamp(13px, 1vw, 16px);
  margin-bottom: 16px;
}

.sf-experience__title {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  color: var(--sf-white);
  line-height: 1.15;
  margin-bottom: 8px;
}

.sf-experience__title--accent {
  color: var(--sf-accent);
  margin-bottom: 24px;
}

.sf-experience__desc {
  color: rgba(255,255,255,0.8);
  font-size: clamp(15px, 1.5vw, 20px);
  max-width: 520px;
  margin-bottom: 40px;
  line-height: 1.6;
}

.sf-experience__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
  width: 100%;
}

.sf-experience__feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.sf-experience__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(var(--sf-accent-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sf-experience__feature-icon svg {
  width: 20px;
  height: 20px;
  color: var(--sf-accent);
}

.sf-experience__feature-title {
  color: var(--sf-white);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 18px);
  margin-bottom: 4px;
}

.sf-experience__feature-desc {
  color: rgba(255,255,255,0.6);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.6;
}

.sf-experience__check {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-experience__check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sf-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-experience__check-icon svg {
  width: 16px;
  height: 16px;
  color: var(--sf-white);
}

.sf-experience__check-text {
  color: var(--sf-white);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 16px);
}

@media (min-width: 640px) {
  .sf-experience__features {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .sf-experience__grid {
    grid-template-columns: 60% 40%;
  }
  .sf-experience__image-side {
    height: auto;
    min-height: 600px;
  }
  .sf-experience__diagonal {
    display: block;
    position: absolute;
    top: 0;
    right: -1px;
    height: 100%;
    width: 82px;
    background: var(--sf-primary);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
  }
  .sf-experience__content-side {
    padding: 48px 48px 48px 64px;
  }
}

/* ───────────────────────────────────────────
   🦶  FOOTER
   ─────────────────────────────────────────── */
.sf-footer {
  background: var(--sf-primary);
  color: var(--sf-white);
  padding: 32px clamp(16px, 4vw, 64px) 24px;
}

.sf-footer__grid {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.sf-footer__logo-col {
  text-align: center;
}

.sf-footer__logo img {
  height: 140px;
  width: auto;
  margin-inline: auto;
}

.sf-footer__links-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sf-footer__contact-col {
  text-align: center;
}

.sf-footer__contact-col .sf-footer__contact-item {
  justify-content: center;
}

.sf-footer__desc {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.sf-footer__social {
  display: flex;
  gap: 12px;
}

.sf-footer__social a {
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}

.sf-footer__social a:hover {
  color: var(--sf-accent);
}

.sf-footer__social svg {
  width: 20px;
  height: 20px;
}

.sf-footer__col-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.sf-footer__links li {
  margin-bottom: 8px;
}

.sf-footer__links a {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  transition: color 0.2s;
}

.sf-footer__links a:hover {
  color: var(--sf-accent);
}

.sf-footer__contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  margin-bottom: 12px;
}

.sf-footer__contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--sf-accent);
  flex-shrink: 0;
}

.sf-footer__contact-item a {
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}

.sf-footer__contact-item a:hover {
  color: var(--sf-white);
}

.sf-footer__bottom {
  max-width: 1200px;
  margin-inline: auto;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sf-footer__bottom a {
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}

.sf-footer__bottom a:hover {
  color: var(--sf-accent);
}

@media (min-width: 768px) {
  .sf-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sf-footer__logo-col {
    text-align: left;
  }

  .sf-footer__logo img {
    margin-inline: 0;
    margin-left: -32px;
    height: 160px;
  }

  .sf-footer__links-row {
    grid-template-columns: 1fr 1fr;
  }

  .sf-footer__contact-col {
    text-align: left;
  }

  .sf-footer__contact-col .sf-footer__contact-item {
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .sf-footer {
    padding: 40px clamp(16px, 4vw, 64px) 32px;
  }
  .sf-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 48px;
  }

  .sf-footer__links-row {
    display: contents;
  }

  .sf-footer__logo-col {
    text-align: left;
  }

  .sf-footer__logo img {
    margin-inline: 0;
    margin-left: -32px;
    height: 180px;
  }

  .sf-footer__contact-col {
    text-align: left;
  }

  .sf-footer__contact-col .sf-footer__contact-item {
    justify-content: flex-start;
  }
}

/* ───────────────────────────────────────────
   🎬  ANIMATIONS
   ─────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* ───────────────────────────────────────────
   🔧  UTILITY
   ─────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ───────────────────────────────────────────
   📄  PAGE TEMPLATES
   ─────────────────────────────────────────── */
.sf-page {
  padding: 64px 0 48px;
}

.sf-page__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--sf-primary);
  line-height: 1.15;
  margin-bottom: 16px;
}

.sf-page__intro {
  font-size: 18px;
  color: var(--sf-text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.sf-page__content {
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sf-text);
}

.sf-page__content p { margin-bottom: 16px; }
.sf-page__content h2 { font-size: 24px; font-weight: 700; color: var(--sf-primary); margin: 32px 0 12px; }
.sf-page__content h3 { font-size: 20px; font-weight: 600; color: var(--sf-primary); margin: 24px 0 8px; }
.sf-page__content ul, .sf-page__content ol { margin: 16px 0; padding-left: 24px; }
.sf-page__content ul { list-style: disc; }
.sf-page__content ol { list-style: decimal; }
.sf-page__content li { margin-bottom: 8px; }
.sf-page__content a { color: var(--sf-accent); text-decoration: underline; }

/* Two-column layout (form + sidebar) */
.sf-page-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 1024px) {
  .sf-page-two-col {
    grid-template-columns: 70% 1fr;
    gap: 48px;
  }
  .sf-page-two-col__side {
    position: sticky;
    top: 120px;
  }
}

/* ───────────────────────────────────────────
   🃏  CARDS
   ─────────────────────────────────────────── */
.sf-card {
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  padding: 24px;
}

.sf-card--compact { padding: 16px; }

.sf-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sf-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-card__title--sm { font-size: 16px; }

.sf-card__subtitle {
  color: var(--sf-text-muted);
  font-size: 15px;
  margin-bottom: 24px;
}

/* Sidebar cards */
.sf-sidebar-card {
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.sf-sidebar-card--warm {
  background: #fff7ed;
  padding: 24px;
}

.sf-sidebar-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--sf-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sf-sidebar-card__icon {
  color: var(--sf-primary);
  font-size: 20px;
}

.sf-sidebar-card__list {
  list-style: none;
}

.sf-sidebar-card__list li {
  padding: 8px 0;
}

.sf-sidebar-card__list li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--sf-primary);
  border-radius: 50%;
  margin-right: 12px;
}

.sf-sidebar-card__list a {
  color: var(--sf-text);
  transition: color 0.2s;
}

.sf-sidebar-card__list a:hover {
  color: var(--sf-primary);
}

.sf-sidebar-card__img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.sf-sidebar-card__body {
  padding: 20px;
}

.sf-sidebar-card__body p {
  color: var(--sf-text);
  margin-bottom: 16px;
}

/* ───────────────────────────────────────────
   📝  FORMS
   ─────────────────────────────────────────── */
.sf-form { display: flex; flex-direction: column; gap: 24px; }

.sf-form__group {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-form__legend {
  font-size: 18px;
  font-weight: 600;
  color: var(--sf-primary);
  margin-bottom: 8px;
}

.sf-form__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--sf-text);
  margin-bottom: 4px;
  display: block;
}

.sf-required { color: var(--sf-primary); }

.sf-form__field { display: flex; flex-direction: column; }

.sf-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .sf-form__row { grid-template-columns: 1fr 1fr; }
}

.sf-form__divider {
  border-top: 1px solid var(--sf-border);
  padding-top: 24px;
}

/* Form notices (success / error) */
.sf-form__notice {
  padding: 16px 20px;
  border-radius: var(--sf-radius);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.sf-form__notice--success {
  background: #edfbf3;
  border: 1px solid #6edda6;
  color: #1a6b40;
}
.sf-form__notice--error {
  background: #fff2f0;
  border: 1px solid #f5a49a;
  color: #c0392b;
}

.sf-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  font-size: 15px;
  font-family: var(--sf-font);
  color: var(--sf-text);
  background: var(--sf-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sf-input:focus {
  outline: none;
  border-color: var(--sf-primary);
  box-shadow: 0 0 0 3px rgba(var(--sf-primary-rgb), 0.15);
}

.sf-textarea {
  resize: vertical;
  min-height: 100px;
}

.sf-radio, .sf-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  color: var(--sf-text);
}

.sf-radio input, .sf-checkbox input {
  accent-color: var(--sf-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.sf-btn--full { width: 100%; }

/* ───────────────────────────────────────────
   📍  CONTACT PAGE
   ─────────────────────────────────────────── */
.sf-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .sf-contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

.sf-contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 12px;
}

.sf-contact-details__name {
  font-weight: 600;
  color: var(--sf-primary);
}

.sf-contact-details__muted {
  color: var(--sf-text-muted);
  font-size: 13px;
}

.sf-contact-details__link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sf-primary);
  font-size: 14px;
  transition: color 0.2s;
}

.sf-contact-details__link:hover {
  text-decoration: underline;
}

.sf-contact-meta {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--sf-border);
  font-size: 12px;
  color: var(--sf-text-muted);
  flex-wrap: wrap;
}

/* Hours */
.sf-hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 14px;
}

.sf-hours__label {
  font-weight: 600;
  color: var(--sf-primary);
  font-size: 14px;
  margin-bottom: 6px;
}

.sf-hours__label--accent { color: var(--sf-accent); }

.sf-hours__table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 13px;
}

.sf-hours__table span:nth-child(odd) { color: var(--sf-text-muted); }
.sf-hours__table span:nth-child(even) { color: var(--sf-text); }

.sf-hours__highlight {
  font-weight: 700;
  color: var(--sf-text);
}

/* Map card */
.sf-map-card {
  margin-top: 32px;
  padding: 0;
  overflow: hidden;
}

.sf-map-card iframe {
  display: block;
}

.sf-map-card__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--sf-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sf-map-card__footer h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--sf-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ───────────────────────────────────────────
   📄  PAGE HERO
   ─────────────────────────────────────────── */
.sf-page-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-color: var(--sf-primary);
}

.sf-page-hero--compact { min-height: 280px; }

.sf-page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,69,96,0.75) 0%, rgba(2,69,96,0.9) 100%);
}

.sf-page-hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 80px 24px 60px;
}

.sf-page-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--sf-white);
  margin-bottom: 16px;
}

.sf-page-hero__subtitle {
  font-size: 1.125rem;
  color: var(--sf-text-light);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ───────────────────────────────────────────
   📄  DEFAULT PAGE FEATURED IMAGE
   ─────────────────────────────────────────── */
.sf-page__featured {
  margin-bottom: 32px;
  border-radius: var(--sf-radius);
  overflow: hidden;
}

.sf-page__featured-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sf-radius);
}

/* ───────────────────────────────────────────
   📄  REQUIRED MARKER
   ─────────────────────────────────────────── */
.sf-required {
  color: #ef4444;
}

/* ───────────────────────────────────────────
   ✅  CHECKLIST
   ─────────────────────────────────────────── */
.sf-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-checklist__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sf-text);
  padding: 8px 0;
}

.sf-checklist__icon {
  color: var(--sf-accent, #F28C28);
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

/* ───────────────────────────────────────────
   🖼  ROUNDED IMAGE
   ─────────────────────────────────────────── */
.sf-rounded-img {
  border-radius: 12px;
  display: block;
}

/* ───────────────────────────────────────────
   📢  CTA SECTION
   ─────────────────────────────────────────── */
.sf-cta-section {
  background: var(--sf-primary);
  color: var(--sf-white);
}

/* ───────────────────────────────────────────
   🔘  BUTTON VARIANTS
   ─────────────────────────────────────────── */
.sf-btn--outline-light {
  background: transparent;
  color: var(--sf-white);
  border: 2px solid #fff;
}

.sf-btn--outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--sf-white);
}

/* ───────────────────────────────────────────
   📑  SECTION HEADER TITLE (reusable)
   ─────────────────────────────────────────── */
.sf-section-header__title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: var(--sf-primary);
  margin-bottom: 12px;
}

.sf-section-header__subtitle {
  font-size: 16px;
  color: var(--sf-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* ───────────────────────────────────────────
   🏷  ACCENT BADGE / PILL
   ─────────────────────────────────────────── */
.sf-badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sf-badge--accent {
  background: var(--sf-accent);
  color: var(--sf-white);
}

.sf-badge--outline {
  background: transparent;
  border: 1px solid var(--sf-accent);
  color: var(--sf-accent);
}

/* ───────────────────────────────────────────
   📐  ACCENT BORDER CARD
   ─────────────────────────────────────────── */
.sf-accent-card {
  border-left: 4px solid var(--sf-accent);
  padding: 1.25rem 1.5rem;
  background: rgba(var(--sf-accent-rgb), 0.05);
  border-radius: 0 8px 8px 0;
  margin-bottom: 1rem;
}

.sf-accent-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sf-primary);
  margin-bottom: 0.5rem;
}

.sf-accent-card__text {
  color: var(--sf-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ───────────────────────────────────────────
   📊  FEATURE GRID (2-col on desktop)
   ─────────────────────────────────────────── */
.sf-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .sf-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sf-feature-card {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--sf-border);
}

.sf-feature-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sf-primary);
  margin-bottom: 8px;
}

.sf-feature-card__text {
  color: var(--sf-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ───────────────────────────────────────────
   🔢  NUMBERED STEPS
   ─────────────────────────────────────────── */
.sf-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sf-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sf-step__number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--sf-primary);
  color: var(--sf-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.sf-step__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sf-primary);
  margin-bottom: 4px;
}

.sf-step__text {
  color: var(--sf-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ───────────────────────────────────────────
   📊  STATS BAR
   ─────────────────────────────────────────── */
.sf-stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem 0;
}

@media (min-width: 768px) {
  .sf-stats-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sf-stat {
  text-align: center;
}

.sf-stat__value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--sf-accent);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.sf-stat__label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

.sf-stat--dark .sf-stat__label {
  color: var(--sf-text-muted);
}

/* ───────────────────────────────────────────
   🏷  SECTION LABEL WITH BAR
   ─────────────────────────────────────────── */
.sf-section-label-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sf-section-label-bar__line {
  width: 3rem;
  height: 0.25rem;
  background: var(--sf-accent);
  border-radius: 999px;
}

.sf-section-label-bar__text {
  color: var(--sf-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
}

/* ───────────────────────────────────────────
   🖼  DECORATIVE IMAGE FRAME
   ─────────────────────────────────────────── */
.sf-deco-frame {
  position: relative;
}

.sf-deco-frame__bg {
  position: absolute;
  inset: -1rem;
  background: rgba(var(--sf-accent-rgb), 0.2);
  border-radius: 1.5rem;
  transform: rotate(-3deg);
}

.sf-deco-frame__bg--right {
  transform: rotate(3deg);
}

.sf-deco-frame img {
  position: relative;
  border: 4px solid var(--sf-accent);
}

/* ───────────────────────────────────────────
   💡  HIGHLIGHT SECTION (full-width dark bg)
   ─────────────────────────────────────────── */
.sf-highlight-section {
  background: var(--sf-primary);
  color: var(--sf-white);
  padding: 80px 0;
}

.sf-highlight-section--gradient {
  background: linear-gradient(135deg, #024560, #013347);
}

/* ───────────────────────────────────────────
   📋  INFO GRID (2-col cards on dark bg)
   ─────────────────────────────────────────── */
.sf-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .sf-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sf-info-card {
  background: rgba(255,255,255,0.08);
  border-radius: var(--sf-radius);
  padding: 1.5rem;
  transition: background 0.2s;
}

.sf-info-card:hover {
  background: rgba(255,255,255,0.12);
}

.sf-info-card__title {
  font-weight: 700;
  color: var(--sf-accent);
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

.sf-info-card__text {
  color: rgba(255,255,255,0.75);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ───────────────────────────────────────────
   💬  BLOCKQUOTE ACCENT
   ─────────────────────────────────────────── */
.sf-blockquote {
  border-left: 4px solid var(--sf-accent);
  padding: 1.5rem 0 1.5rem 1.5rem;
  margin: 2rem 0;
}

.sf-blockquote__text {
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--sf-primary);
}

.sf-blockquote--light .sf-blockquote__text {
  color: rgba(255,255,255,0.9);
}

.sf-blockquote__author {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--sf-text-muted);
  font-style: normal;
}

.sf-blockquote--light .sf-blockquote__author {
  color: rgba(255,255,255,0.6);
}

/* ───────────────────────────────────────────
   🎨  FEATURE CARD VARIANTS
   ─────────────────────────────────────────── */
.sf-feature-card--accent-top {
  border-top: 3px solid var(--sf-accent);
  border-left: none;
}

.sf-feature-card--numbered {
  position: relative;
  padding-top: 3rem;
}

.sf-feature-card--numbered::before {
  content: attr(data-number);
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--sf-accent);
  color: var(--sf-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.125rem;
}

/* ───────────────────────────────────────────
   📐  GRADIENT SECTION BG
   ─────────────────────────────────────────── */
.sf-section--gradient-light {
  background: linear-gradient(135deg, #f9fafb, #ffffff);
}

.sf-section--warm-light {
  background: #fffbf5;
}

/* ───────────────────────────────────────────
   📍  LOCATIES PAGE GRIDS
   ─────────────────────────────────────────── */
.sf-locaties-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.sf-locaties-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

@media (max-width: 767px) {
  .sf-locaties-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sf-locaties-hero-img {
    display: none;
  }

  .sf-locaties-card-grid {
    grid-template-columns: 1fr;
  }

  .sf-locaties-card-img {
    display: none;
  }
}

/* ───────────────────────────────────────────
   📱  GLOBAL MOBILE: STACK GRIDS & HIDE IMAGES
   (Applies only to pages with .sf-mobile-optimize body class)
   ─────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Stack all inline 2-column grids */
  .sf-mobile-optimize [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Stack the two-col page layout */
  .sf-mobile-optimize .sf-page-two-col {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Hide hero image columns (deco-frames & right-side image containers) */
  .sf-mobile-optimize .sf-page-hero .sf-deco-frame {
    display: none !important;
  }

  /* Hide the rotated/decorative hero image container (locatie-echt style) */
  .sf-mobile-optimize .sf-page-hero [style*="grid-template-columns"] > div[style*="position: relative"] {
    display: none !important;
  }

  /* Hide standalone content images (sf-rounded-img in grid columns) */
  .sf-mobile-optimize .sf-page [style*="grid-template-columns"] > div > img.sf-rounded-img {
    display: none !important;
  }

  /* Hide images inside no-padding cards (image + text sidebar cards) */
  .sf-mobile-optimize .sf-card[style*="padding: 0"] > img {
    display: none !important;
  }

  /* Hide sidebar images in two-col layouts */
  .sf-mobile-optimize .sf-page-two-col__side img {
    display: none !important;
  }

  /* Hide standalone sidebar images */
  .sf-mobile-optimize .sf-page-two-col__side .sf-card img {
    display: none !important;
  }

  /* Ensure info grids (2x2 stats) stack nicely */
  .sf-mobile-optimize .sf-info-grid {
    grid-template-columns: 1fr !important;
  }

  /* Feature grids: single column on mobile */
  .sf-mobile-optimize .sf-feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  .sf-egym-hero .sf-egym-hero__img {
    display: none !important;
  }
  .sf-egym-hero__grid {
    grid-template-columns: 1fr !important;
  }

  /* Benefits section: stack to single column */
  .sf-egym-benefits__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Stats: keep 2x2 grid but ensure it fits */
  .sf-egym-stats__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   GALLERY GRID  (sfeerimpressie + future reuse)
   ══════════════════════════════════════════════════════════════════ */
.sf-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES  –  Laptop / Tablet / Mobile
   ══════════════════════════════════════════════════════════════════ */

/* ── Laptop  (1024 – 1279 px) ─────────────────────────────────── */
@media (max-width: 1279px) {
  .sf-page-hero h1[style*="font-size: 2.5rem"] {
    font-size: 2.25rem !important;
  }
}

/* ── Tablet  (≤ 1023 px) ──────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Stack all hero split-layout grids */
  .sf-page-hero [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Hide deco-frame image column in hero sections */
  .sf-page-hero .sf-deco-frame,
  .sf-page-hero > .sf-container--narrow > div > div[style*="position: relative"]:last-child {
    display: none !important;
  }

  /* Tighter hero padding & heading on tablet */
  .sf-page-hero[style*="padding: 4rem 0 3rem"] { padding: 2.75rem 0 2.25rem !important; }
  .sf-page-hero h1[style*="font-size: 2.5rem"]  { font-size: 2rem !important; }

  /* Content 2-col grids: reduce gap, keep 2 columns */
  .sf-page [style*="grid-template-columns: 1fr 1fr"] { gap: 2rem !important; }

  /* Cap tall content images on tablet */
  .sf-page img[style*="height: 500px"] { height: 340px !important; }
  .sf-page img[style*="height: 350px"] { height: 260px !important; }
  .sf-page img[style*="height: 400px"] { height: 280px !important; }

  /* Gallery: 4 cols → 3 cols */
  .sf-gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* Locaties card: show image panel at tablet */
  .sf-locaties-card-grid { grid-template-columns: 1fr !important; }
  .sf-locaties-card-img  { display: block !important; height: 280px; overflow: hidden; }
  .sf-locaties-card-img img { width: 100%; height: 100%; object-fit: cover; }

  /* EGYM hero: stack on tablet too */
  .sf-egym-hero .sf-egym-hero__img { display: none !important; }
  .sf-egym-hero__grid { grid-template-columns: 1fr !important; }
}

/* ── Mobile  (≤ 767 px) — supplements .sf-mobile-optimize rules ── */
@media (max-width: 767px) {

  /* Gallery: 4 cols → 2 cols */
  .sf-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

  /* Catch-all: stack any remaining 2-col inline grids */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Hero mini-stats rows: wrap so items never overflow */
  [style*="border-top: 1px solid rgba(255,255,255,0.15)"] {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  /* Portrait images → landscape crop on narrow screens */
  [style*="aspect-ratio: 3/4"] {
    aspect-ratio: 16/9 !important;
    max-height: 220px !important;
  }

  /* Cap tall fixed-height images */
  img[style*="height: 350px"],
  img[style*="height: 400px"],
  img[style*="height: 450px"] { height: 200px !important; }
  img[style*="height: 500px"] { height: 220px !important; }

  /* Scale page section headings on mobile */
  h2[style*="font-size: 2rem"]   { font-size: 1.5rem  !important; }
  h1[style*="font-size: 2.5rem"] { font-size: 1.75rem !important; }

  /* Wrap CTA flex rows in dark sections */
  .sf-page [style*="display: flex; gap: 1rem; margin-top: 2.5rem"] {
    flex-wrap: wrap !important;
  }
  .sf-page[style*="background: var(--sf-primary)"] [style*="display: flex; gap: 1rem"] {
    flex-wrap: wrap !important;
  }

  /* Hours tables: reduce font on very narrow screens */
  [style*="grid-template-columns: auto 1fr"] { font-size: 0.8125rem !important; }

  /* Stack the locatie-echt 1fr 1fr hours cards */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 1rem"][style*="margin-bottom"] {
    grid-template-columns: 1fr !important;
  }

  /* Sfeerimpressie header image: reduce height */
  .sf-container--narrow div[style*="border-radius: 1rem"] img[style*="height: 400px"] {
    height: 200px !important;
  }
}