/* =========================================================================
   Beautyhouse Rotterdam — Theme Stylesheet
   Ported from static reference files. Tokens mirror theme.json exactly —
   if a value changes in theme.json, mirror it here (WP does not yet emit
   every custom property automatically for classic-style component CSS).
   ========================================================================= */

:root{
  --ink:        #171110;
  --paper:      #F7F2EA;
  --paper-soft: #FBF8F2;
  --blush:      #EFDFD1;
  --blush-2:    #F5EAE0;
  --bordeaux:   #7A2E35;
  --bordeaux-d: #5A2028;
  --brass:      #B8935F;
  --brass-line: rgba(184,147,95,0.35);
  --forest:     #3F5744;
  --text:       #453A34;
  --text-soft:  #6B5E56;
  --white:      #FFFFFF;
  --line:       rgba(23,17,16,.08);
  --shadow:         0 24px 60px rgba(23,17,16,.12);
  --shadow-strong:  0 30px 90px rgba(23,17,16,.18);
  --radius:     28px;
  --radius-lg:  36px;

  --font-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.25rem;
  --sp-5:3.5rem; --sp-6:5.5rem; --sp-7:8rem;

  --container: 1240px;
  --container-narrow: 880px;
  --container-narrower: 720px;
  --ease: cubic-bezier(.22,.9,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); background:var(--paper); color:var(--text);    line-height: 1.2;
 -webkit-font-smoothing:antialiased; font-size:16px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; font-weight:500; }
h1,h2,h3,h4,p{ overflow-wrap:break-word; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.bh-container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-4); }
.bh-container-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--sp-4); }
.bh-container-narrower{ max-width:var(--container-narrower); margin-inline:auto; padding-inline:var(--sp-4); }
.bh-center{ text-align:center; }

/* .container — reference's own width wrapper, used by the header bar, homepage sections and footer */
.container{ width:min(var(--container), calc(100% - 32px)); margin-inline:auto; }

.bh-label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--bordeaux); }
.bh-label::before{ content:''; width:26px; height:1px; background:var(--brass); display:inline-block; margin-right:10px; vertical-align:middle; }
.bar nav {
    display: flex;
    gap: 14px;
    color: white;
}
.scrolled .bar nav {
    color: #111;
}
.bh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 32px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  transition:all .25s var(--ease); min-height:46px; border:1.5px solid transparent; cursor:pointer;
}
.bh-btn:focus-visible{ outline:2px solid var(--bordeaux); outline-offset:3px; }
.bh-btn-fill-dark{ background:var(--ink); color:var(--white); }
.bh-btn-fill-dark:hover{ background:var(--bordeaux); }
.bh-btn-outline-dark{ border-color:var(--ink); color:var(--ink); }
.bh-btn-outline-dark:hover{ background:var(--ink); color:var(--white); }
.bh-btn-fill-light{ background:var(--white); color:var(--ink); }
.bh-btn-fill-light:hover{ background:var(--brass); color:var(--white); }
.bh-btn-outline-light{ border-color:rgba(255,255,255,.6); color:var(--white); }
.bh-btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ---------- .btn — reference button system (site-header, footer, homepage) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:15px 24px; border-radius:999px; font-weight:600; letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-d) 100%); color:#fff; box-shadow:0 18px 28px rgba(122,46,53,.18); }
.btn-primary:hover{ box-shadow:0 24px 38px rgba(122,46,53,.24); }
.btn-light{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(14px); }
.btn-light:hover{ background:rgba(255,255,255,.12); }
.btn-outline{ border:1px solid var(--line); background:rgba(255,255,255,.5); color:var(--ink); }
.btn-outline:hover{ border-color:rgba(122,46,53,.28); }

.bh-reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.bh-reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Icons (self-hosted inline SVG, see beautyhouse_icon() in functions.php) ---------- */
.bh-icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex-shrink:0; }
.menu-btn .bh-icon{ width:20px; height:20px; }
.drawer-close .bh-icon{ width:22px; height:22px; }
.search-btn .bh-icon{ width:18px; height:18px; }
.ic-circle .bh-icon{ width:22px; height:22px; }
.pill .bh-icon{ width:14px; height:14px; }
.contact-chip .bh-icon{ width:18px; height:18px; }
.bh-home .feature .icon .bh-icon{ width:16px; height:16px; }

/* ---------- Site Header (glass pill, matches design reference) ---------- */
.site-header{
  position:fixed; inset:16px 0 auto; z-index:220;
  transition:inset .35s var(--ease), transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .bar{
  width:min(var(--container), calc(100% - 20px)); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 18px; border:1px solid rgba(255,255,255,.12); border-radius:999px;
  background:rgba(16,12,10,.34); backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 20px 50px rgba(0,0,0,.14);
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled .bar{ background:rgba(255,255,255,.72); border-color:var(--line); box-shadow:var(--shadow); }
.brand{ display:flex; align-items:baseline; gap:10px; font-family:var(--font-display); font-size:1.15rem; color:#fff; white-space:nowrap; text-transform:lowercase; }
.site-header.scrolled .brand{ color:var(--ink); }
.brand em{ font-style:italic; color:var(--brass); }
.brand-logo{ display:block; height:38px; width:auto; max-width:180px; object-fit:contain; }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ color:rgba(255,255,255,.88); font-size:.88rem; font-weight:600; position:relative; }
.site-header.scrolled .nav a{ color:var(--text-soft); }
.nav a::after{ content:''; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--bordeaux); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); }
.nav a:hover::after, .nav a.current::after{ transform:scaleX(1); transform-origin:left; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.phone-link{ color:rgba(255,255,255,.82); font-size:.88rem; font-weight:700; white-space:nowrap; }
.site-header.scrolled .phone-link{ color:var(--ink); }
.menu-btn{ display:none; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; align-items:center; justify-content:center; font-size:1.1rem; }
.site-header.scrolled .menu-btn{ color:var(--ink); background:rgba(23,17,16,.04); }

.mobile-drawer{
  position:fixed; inset:0 0 0 20%; z-index:300; transform:translateX(100%);
  transition:transform .5s var(--ease); background:rgba(247,242,234,.96); backdrop-filter:blur(20px);
  padding:20px; box-shadow:-20px 0 60px rgba(0,0,0,.18);
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer nav{ display:grid; gap:16px; margin-top:60px; }
.mobile-drawer a{ display:block; font-family:var(--font-display); font-size:clamp(1.8rem,6vw,3rem); color:var(--ink); }
.mobile-drawer > a{ margin-top:16px; }
.drawer-close{ width:48px; height:48px; border-radius:50%; background:rgba(23,17,16,.05); display:flex; align-items:center; justify-content:center; font-size:24px; }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(23,17,16,.45); z-index:290; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); }
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }
body.drawer-open{ overflow:hidden; touch-action:none; overscroll-behavior:none; }

/* =========================================================================
   Shared "reference" design system — used by the homepage AND the interior
   pages (behandelmenu, academy, contact, journal) that were reskinned to
   match it. Kept global since every one of these templates needs it;
   only the genuinely template-specific pieces further down stay scoped
   under .bh-home / .bh-menu to avoid leaking onto single-treatment.php
   etc. that reuse short class names (menu-card, subgroup, svc-row…) for
   unrelated, unrestyled components.
   ========================================================================= */
.eyebrow{ display:inline-flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; color:var(--bordeaux); }
.eyebrow::before{ content:''; width:32px; height:1px; background:currentColor; opacity:.55; }
.eyebrow.light{ color:#f0dcc3; }
.eyebrow.light::before{ background:#f0dcc3; }
.small{ font-size:.92rem; color:var(--text-soft); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.95); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-scale.in{ opacity:1; transform:scale(1); }

.section{ padding:72px 0; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.section-head h2{ font-size:clamp(2rem,3.8vw,3.2rem); max-width:16ch; }
.section-head p{ max-width:44ch; color:var(--text-soft); }

.tabs{ display:flex; flex-wrap:wrap; gap:10px; }
.tab{ padding:12px 16px; border-radius:999px; background:rgba(255,255,255,.66); border:1px solid var(--line); color:var(--text-soft); font-weight:500; transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tab:hover{ transform:translateY(-2px); }

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

/* ---------- Page hero (interior pages: behandelmenu, academy, contact, journal) ---------- */
.page-hero{ padding:132px 0 32px; }
.page-hero-card{
  position:relative; padding:clamp(28px,4vw,52px); border-radius:var(--radius-lg);
  background:radial-gradient(circle at top left, rgba(184,147,95,.12), transparent 30%), linear-gradient(180deg, rgba(23,17,16,.96), rgba(23,17,16,.9));
  color:#fff; box-shadow:var(--shadow-strong); overflow:hidden; isolation:isolate; text-align:center;
}
.page-hero-card::before{
  content:''; position:absolute; inset:-1px;
  background:radial-gradient(circle at 20% 20%, rgba(184,147,95,.25), transparent 23%), radial-gradient(circle at 80% 10%, rgba(255,255,255,.10), transparent 18%), radial-gradient(circle at 90% 90%, rgba(122,46,53,.18), transparent 26%);
  pointer-events:none;
}
.page-hero-card > *{ position:relative; z-index:1; }
.page-hero-card .eyebrow{ justify-content:center; }
.page-hero-card h1{ font-size:clamp(2.6rem,5vw,4.4rem); margin-top:16px; color:#fff; }
.page-hero-card h1 em{ font-style:italic; color:var(--brass); }
.page-hero-card .lead{ font-size:clamp(1.04rem,1.2vw,1.18rem); color:rgba(255,255,255,.74); max-width:48ch; margin:16px auto 0; text-align:center; }
.status-strip{ margin-top:26px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.82); font-size:.84rem; }
.pill span{ width:7px; height:7px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px rgba(184,147,95,.12); }

/* ---------- FAQ (rounded card accordion — behandelmenu page) ---------- */
.faq-list{ display:grid; gap:10px; max-width:820px; margin:0 auto; }
.faq-item{ border-radius:20px; background:rgba(255,255,255,.72); border:1px solid var(--line); overflow:hidden; }
.faq-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; text-align:left; font-family:var(--font-display); font-size:1.2rem; color:var(--ink); min-height:44px; }
.faq-trigger .chev{ font-family:var(--font-body); color:var(--bordeaux); font-size:1.4rem; transition:transform .3s var(--ease); flex-shrink:0; }
.faq-trigger[aria-expanded="true"] .chev{ transform:rotate(45deg); }
.faq-panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-panel-inner{ padding:0 22px 20px; color:var(--text-soft); font-size:.95rem; max-width:68ch; }

/* ---------- Hero ---------- */
.bh-home .hero{ min-height:100vh; padding:120px 0 44px; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; }
.bh-home .hero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; align-items:stretch; }
.bh-home .hero-copy{
  position:relative; padding:clamp(22px,3vw,42px); border-radius:var(--radius-lg);
  background:radial-gradient(circle at top left, rgba(184,147,95,.12), transparent 30%), linear-gradient(180deg, rgba(23,17,16,.96), rgba(23,17,16,.9));
  color:#fff; box-shadow:var(--shadow-strong); overflow:hidden; isolation:isolate;
}
.bh-home .hero-copy::before{
  content:''; position:absolute; inset:-1px;
  background:radial-gradient(circle at 20% 20%, rgba(184,147,95,.25), transparent 23%), radial-gradient(circle at 80% 10%, rgba(255,255,255,.10), transparent 18%), radial-gradient(circle at 90% 90%, rgba(122,46,53,.18), transparent 26%);
  pointer-events:none;
}
.bh-home .hero-copy > *{ position:relative; z-index:1; }
.bh-home .hero h1{ font-family:var(--font-display); line-height:1.05; letter-spacing:-.02em; margin:0; font-size:clamp(3rem,7vw,5.6rem); max-width:8.2ch; margin-top:18px;color:#fff; }
.bh-home .hero h1 em{ font-style:italic; color:var(--brass); }
.bh-home .hero .subcopy{ margin-top:18px; max-width:52ch; color:rgba(255,255,255,.72); font-size:1.02rem; }
.bh-home .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.bh-home .hero-bullets{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.bh-home .pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.82); font-size:.84rem; }
.bh-home .pill span{ width:7px; height:7px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px rgba(184,147,95,.12); }
.bh-home .hero-side{ display:grid; gap:16px; grid-template-rows:1.45fr .55fr; }
.bh-home .visual{ position:relative; min-height:520px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-strong); background:#241a18; }
.bh-home .visual img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.bh-home .visual::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,17,16,.10), rgba(23,17,16,.55)); }
.bh-home .floating-card{
  position:absolute; right:18px; bottom:18px; z-index:2; width:min(330px, calc(100% - 36px));
  background:rgba(255,255,255,.8); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.45);
  border-radius:24px; padding:16px; box-shadow:var(--shadow); animation:bhFloaty 6s var(--ease) infinite;
}
@keyframes bhFloaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.bh-home .status{ display:flex; align-items:center; gap:12px; }
.bh-home .status .dot{ width:14px; height:14px; border-radius:50%; background:var(--forest); box-shadow:0 0 0 6px rgba(63,87,68,.12); }
.bh-home .status .dot.closed{ background:var(--bordeaux); box-shadow:0 0 0 6px rgba(122,46,53,.12); }
.bh-home .status strong{ display:block; font-size:.98rem; font-family:var(--font-body); color:var(--ink); }
.bh-home .status small{ display:block; color:var(--text-soft); }
.bh-home .metrics{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:14px; }
.bh-home .metric{ background:rgba(255,255,255,.65); border:1px solid var(--line); border-radius:18px; padding:12px; text-align:center; }
.bh-home .metric b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--ink); }
.bh-home .metric span{ display:block; color:var(--text-soft); font-size:.75rem; margin-top:4px; letter-spacing:.06em; text-transform:uppercase; }
.bh-home .side-badge{
  background:linear-gradient(160deg, rgba(184,147,95,.14), rgba(255,255,255,.72)); border:1px solid var(--line);
  border-radius:24px; padding:18px; display:flex; align-items:center; gap:16px; overflow:hidden;
}
.bh-home .side-badge img{ width:92px; height:92px; border-radius:22px; object-fit:cover; flex:0 0 auto; box-shadow:0 12px 24px rgba(23,17,16,.12); }
.bh-home .side-badge h3{ font-size:1.28rem; }
.bh-home .side-badge p{ font-size:.92rem; color:var(--text-soft); margin-top:6px; }

/* ---------- Marquee ---------- */
.bh-home .marquee{ padding:18px 0 10px; overflow:hidden; }
.bh-home .marquee-track{ display:flex; gap:16px; width:max-content; animation:bhMarquee 28s linear infinite; }
.bh-home .marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes bhMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.bh-home .marquee-item{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.68); border:1px solid var(--line); color:var(--text-soft); font-size:.88rem; white-space:nowrap; }
.bh-home .marquee-item b{ color:var(--ink); }

/* ---------- Services grid — global (.section/.section-head are global too, see top).
   Reused by the homepage services grid AND single-treatment.php's "related
   treatments" grid, so promoted out of .bh-home; no other template uses a
   bare .card/.service/.grid-4 class. ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.card{ background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 40px rgba(23,17,16,.06); overflow:hidden; }
.service{ position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.service:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.service .img{ aspect-ratio:4/5; overflow:hidden; position:relative; }
.service .img img{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease); }
.service:hover .img img{ transform:scale(1.07); }
.service .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(23,17,16,.66) 100%); }
.service .content{ position:absolute; left:16px; right:16px; bottom:16px; color:#fff; }
.service .content h3{ font-size:1.35rem; color:#fff; }
.service .content p{ margin-top:8px; color:rgba(255,255,255,.76); font-size:.92rem; }

/* ---------- Services carousel — the 4 featured cards ARE the slider; scroll-snap
   track holds every category, showing 4 at a time (2 at 1080px, 1 at 820px,
   matching the old .grid-4 responsive column counts) and sliding to reveal
   the rest via the prev/next arrows (see initServiceSlider() in theme.js). ---------- */
.bh-home .service-carousel{ position:relative; }
.bh-home .service-track-wrap{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.bh-home .service-track-wrap::-webkit-scrollbar{ display:none; }
.bh-home .service-track-wrap .card{ scroll-snap-align:start; flex:0 0 calc(25% - 13.5px); min-width:0; }
.bh-home .service-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.bh-home .service-arrow{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--ink); transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); flex-shrink:0; }
.bh-home .service-arrow:hover{ background:var(--ink); color:#fff; }

/* ---------- Focus (story) split ---------- */
.bh-home .focus{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:18px; align-items:stretch; }
.bh-home .focus-copy{ padding:clamp(22px,3vw,34px); background:linear-gradient(180deg, rgba(23,17,16,.97), rgba(23,17,16,.92)); color:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-strong); }
.bh-home .focus-copy h2{ font-size:clamp(2rem,4vw,3rem); margin-top:18px;color: #fff; line-height: 1.2;  }
.bh-home .focus-copy p{ color:rgba(255,255,255,.74); margin-top:16px; max-width:55ch; }
.bh-home .feature-list{ display:grid; gap:12px; margin-top:24px; }
.bh-home .feature{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(255,255,255,.08); }
.bh-home .feature:first-child{ border-top:0; padding-top:0; }
.bh-home .feature .icon{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(184,147,95,.14); color:var(--brass); flex:0 0 auto; }
.bh-home .feature strong{ display:block; font-size:.98rem; }
.bh-home .feature span{ display:block; color:rgba(255,255,255,.64); font-size:.9rem; margin-top:4px; }
.bh-home .focus-visual{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-strong); position:relative; min-height:520px; }
.bh-home .focus-visual img{ width:100%; height:100%; object-fit:cover; }
.bh-home .focus-visual::after{ content:''; position:absolute; inset:0; background:linear-gradient(45deg, rgba(23,17,16,.12), rgba(23,17,16,.34)); }

/* ---------- Price tabs / menu switcher (.tabs/.tab are global, see top) ---------- */
.bh-home .tabs{ margin-bottom:18px; }
.bh-home .menu-panel{ display:none; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.bh-home .menu-panel.active{ display:grid; animation:catFadeIn .45s var(--ease) forwards; }
.bh-home .menu-card{ padding:24px; border-radius:var(--radius-lg); background:rgba(255,255,255,.8); border:1px solid var(--line); box-shadow:var(--shadow); }
.bh-home .menu-card h3{ font-size:2rem; margin-top:12px; }
.bh-home .price-list{ display:grid; gap:14px; margin-top:20px; }
.bh-home .price-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px 0; border-top:1px dashed var(--line); transition:background .2s var(--ease); }
.bh-home .price-item:first-child{ border-top:0; padding-top:0; }
.bh-home .price-item h4{ font-family:var(--font-body); font-size:1rem; font-weight:800; color:var(--ink); transition:color .2s var(--ease); }
.bh-home .price-item p{ color:var(--text-soft); font-size:.92rem; margin-top:5px; }
.bh-home .price-item:hover{ background:rgba(184,147,95,.08); }
.bh-home .price-item:hover h4{ color:var(--bordeaux); }
.bh-home .price{ font-weight:800; color:var(--bordeaux); white-space:nowrap; }
.bh-home .menu-side{ background:linear-gradient(160deg, rgba(63,87,68,.12), rgba(184,147,95,.10)); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; min-height:100%; }
.bh-home .menu-side img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:24px; box-shadow:var(--shadow); }
.bh-home .menu-side .copy{ margin-top:18px; }
.bh-home .menu-side h3{ font-size:2rem; }
.bh-home .menu-side p{ color:var(--text-soft); margin-top:10px; }

/* ---------- Quotes slider ---------- */
.bh-home .quotes{ background:linear-gradient(180deg, var(--ink), #251a18); color:#fff; border-radius:var(--radius-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-strong); }
.bh-home .quotes::before{ content:'\201C'; position:absolute; top:-45px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-size:20rem; color:rgba(184,147,95,.08); line-height:1; }
.bh-home .quotes-inner{ padding:40px; max-width:820px; margin:0 auto; text-align:center; position:relative; }
.bh-home .quote{ font-family:var(--font-display); font-size:clamp(1.6rem,2.8vw,2.6rem); font-style:italic; line-height:1.35; min-height:5.6em; display:flex; align-items:center; justify-content:center; transition:opacity .35s var(--ease); }
.bh-home .quote-meta{ margin-top:18px; color:rgba(255,255,255,.72); }
.bh-home .dots{ display:flex; justify-content:center; gap:10px; margin-top:18px; }
.bh-home .dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); transition:transform .25s var(--ease), background .25s var(--ease); }
.bh-home .dots button.active{ background:var(--brass); transform:scale(1.45); }

/* ---------- Contact grid ---------- */
.bh-home .contact-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:18px; }
.bh-home .hours{ padding:26px; }
.bh-home .hours h3{ font-size:2rem; margin-top:12px; }
.bh-home .hours table{ width:100%; border-collapse:collapse; margin-top:18px; }
.bh-home .hours td{ padding:12px 0; border-bottom:1px solid var(--line); font-size:.96rem; }
.bh-home .hours tr.today td{ color:var(--bordeaux); font-weight:600; }
.bh-home .map{ min-height:500px; overflow:hidden; }
.bh-home .map iframe{ width:100%; height:100%; border:0; min-height:500px; }
.bh-home .contact-row{ display:grid; gap:12px; margin-top:20px; }
.bh-home .contact-chip{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:18px; padding:14px 16px; }

/* ---------- Treatments grid ---------- */
.treatments{ padding-block:var(--sp-7) var(--sp-6); text-align:center; }
.treatments h2{ font-size:clamp(1.9rem,3vw,2.5rem); }
.t-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-5); text-align:left; }
.t-item{ position:relative; }
.t-media{ aspect-ratio:3/3.6; overflow:hidden; background:var(--blush-2); position:relative; }
.t-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.t-item:hover .t-media img{ transform:scale(1.06); }
.t-badge{ position:absolute; top:14px; left:14px; background:var(--bordeaux); color:#fff; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; font-weight:600; }
.t-info{ padding-top:var(--sp-2); text-align:center; }
.t-info h3{ font-size:1rem; font-family:var(--font-body); font-weight:600; }
.t-price{ font-size:.85rem; color:var(--text-soft); margin-top:4px; }
.treatments-cta{ margin-top:var(--sp-5); }

/* ---------- Behandelmenu-style price list — scoped under .bh-menu.
   Used by page-behandelingen.php AND single-treatment.php's grouped price
   card (both wrap their price markup in .bh-menu), so .subgroup/.svc-row
   etc. only ever mean one thing site-wide. ---------- */
.bh-menu .menu-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; align-items:start; }
.bh-menu .cat-rail{ position:sticky; top:100px; display:grid; gap:10px; min-width:0; }
.bh-menu .cat-rail button{
  display:flex; align-items:center; gap:12px; text-align:left; padding:14px 16px; border-radius:18px;
  background:rgba(255,255,255,.66); border:1px solid var(--line); width:100%; min-width:0; box-sizing:border-box;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bh-menu .cat-rail button:hover{ transform:translateX(4px); }
.bh-menu .cat-rail button.active{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--shadow); }
.bh-menu .rail-ic{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(184,147,95,.16); color:var(--brass); font-family:var(--font-display); font-style:italic; }
.bh-menu .cat-rail button.active .rail-ic{ background:rgba(255,255,255,.14); color:#f0dcc3; }
.bh-menu .rail-copy{ min-width:0; }
.bh-menu .rail-copy strong{ display:block; font-size:.92rem; color:inherit; overflow-wrap:break-word; word-break:break-word; }
.bh-menu .rail-copy span{ display:block; font-size:.74rem; color:var(--text-soft); margin-top:2px; overflow-wrap:break-word; word-break:break-word; }
.bh-menu .cat-rail button.active .rail-copy span{ color:rgba(255,255,255,.6); }

.bh-menu .mobile-tabs-wrap{ display:none; position:sticky; top:100px; z-index:90; padding-block:10px; }
.bh-menu .mobile-tabs-wrap .tabs{ background:rgba(247,242,234,.9); backdrop-filter:blur(10px); padding:10px; border-radius:20px; border:1px solid var(--line); }

.bh-menu .cat-panel{ display:none; }
.bh-menu .cat-panel.active{ display:block; animation:catFadeIn .45s var(--ease) forwards; }
.bh-menu .cat-panel-card{ padding:28px; border-radius:var(--radius-lg); background:rgba(255,255,255,.82); border:1px solid var(--line); box-shadow:var(--shadow); }
.bh-menu .cat-panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.bh-menu .cat-panel-head h3{ font-size:2.1rem; }
.bh-menu .cat-panel-head .small{ max-width:44ch; }

.bh-menu .subgroup{ margin-top:22px; }
.bh-menu .subgroup:first-child{ margin-top:8px; }
.bh-menu .subgroup-title{ font-family:var(--font-body); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--ink); padding-bottom:10px; margin-bottom:6px; border-bottom:1px dashed var(--line); }
.bh-menu .svc-rows{ display:grid; grid-template-columns:1fr 1fr; gap:4px 28px; }
.bh-menu .svc-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:13px 0; border-top:1px dashed var(--line); transition:background .2s var(--ease); }
.bh-menu .svc-row:nth-child(-n+2){ border-top:0; padding-top:6px; }
.bh-menu .svc-row h4{ font-family:var(--font-body); font-size:.96rem; color:var(--ink); transition:color .2s var(--ease); }
.bh-menu .svc-row p{ color:var(--text-soft); font-size:.86rem; margin-top:4px; }
.bh-menu .svc-row:not(.is-current):hover{ background:rgba(184,147,95,.08); }
.bh-menu .svc-row:not(.is-current):hover h4{ color:var(--bordeaux); }
.bh-menu .svc-price{ font-weight:600; color:var(--bordeaux); white-space:nowrap; }
.bh-menu .svc-row.is-current{ background:var(--blush-2); margin-inline:-14px; padding-inline:14px; border-radius:12px; border-top-color:transparent; }
.bh-menu .cat-cta{ margin-top:26px; display:flex; justify-content:center; }

/* ---------- Service/post detail image (single-treatment.php + single.php) ---------- */
.service-hero-image{ width:min(560px, 88vw); aspect-ratio:1/1; margin:0 auto; overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-strong); position:relative; }
.service-hero-image img{ width:100%; height:100%; object-fit:cover; }
.caption-chip{ position:absolute; bottom:20px; left:20px; background:rgba(16,13,11,.82); color:#fff; padding:10px 18px; border-radius:999px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; backdrop-filter:blur(6px); }

.accordion-group{ display:none; }
.accordion-item{ border-bottom:1px solid var(--brass-line); }
.accordion-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:var(--sp-3) 0; text-align:left; font-size:1rem; font-weight:600; color:var(--ink); min-height:44px; }
.accordion-trigger .chev{ transition:transform .25s var(--ease); color:var(--bordeaux); flex-shrink:0; margin-left:var(--sp-2); }
.accordion-trigger[aria-expanded="true"] .chev{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.accordion-panel-inner{ padding-bottom:var(--sp-3); }
.accordion-row{ display:flex; justify-content:space-between; gap:var(--sp-2); padding:10px 0; }
.accordion-row h4{ font-size:.92rem; font-weight:600; color:var(--ink); font-family:var(--font-body); }
.accordion-row p{ font-size:.8rem; color:var(--text-soft); margin-top:3px; }
.accordion-row .price{ font-size:.9rem; font-weight:600; color:var(--bordeaux); white-space:nowrap; }

/* ---------- Policy accordion (contact page) — same rounded-card language as .faq-* ---------- */
.policy-list{ display:grid; gap:10px; max-width:var(--container-narrower); margin-inline:auto; }
.policy-item{ border-radius:20px; background:rgba(255,255,255,.72); border:1px solid var(--line); overflow:hidden; }
.policy-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); padding:18px 22px; text-align:left; font-family:var(--font-body); font-size:.95rem; font-weight:600; color:var(--ink); min-height:44px; }
.policy-trigger .chev{ transition:transform .3s var(--ease); color:var(--bordeaux); flex-shrink:0; font-size:1.3rem; font-family:var(--font-body); }
.policy-trigger[aria-expanded="true"] .chev{ transform:rotate(45deg); }
.policy-panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.policy-panel-inner{ padding:0 22px 20px; font-size:.92rem; color:var(--text-soft); max-width:64ch; }

/* ---------- Contact page (.contact-hero/.hero-accent retired — uses .page-hero-card now) ---------- */
.info-strip{ padding-block:0 var(--sp-5); text-align:center; }
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); max-width:900px; margin-inline:auto; }
.info-item{ background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px; }
.ic-circle{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; border:1px solid var(--brass-line); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--bordeaux); }
.info-item h3{ font-size:1.1rem; }
.info-item p{ font-size:.9rem; color:var(--text-soft); margin-top:10px; line-height:1.6; }
.info-cta{ margin-top:var(--sp-5); }

.split-media{ display:grid; grid-template-columns:1fr 1fr; gap:18px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.split-media > div{ aspect-ratio:1/1; overflow:hidden; position:relative; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.map-embed iframe{ width:100%; height:100%; border:0; filter:sepia(.15) saturate(.85); display:block; }

.contact-form-section{ text-align:center; }
.form-grid{ margin-top:var(--sp-5); text-align:left; display:flex; flex-direction:column; gap:var(--sp-3); }
.form-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-3); }
.bh-field input, .bh-field textarea{ width:100%; padding:15px 18px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.6); font-family:inherit; font-size:.92rem; color:var(--ink); transition:border-color .2s var(--ease); }
.bh-field textarea{ resize:vertical; min-height:150px; border-radius:20px; }
.bh-field input:focus, .bh-field textarea:focus{ outline:none; border-color:var(--bordeaux); }
.form-submit{ display:flex; justify-content:flex-end; margin-top:var(--sp-1); align-items:center; gap:var(--sp-2); }
.form-status{ font-size:.85rem; }
.form-status.success{ color:#4E7A4E; }
.form-status.error{ color:var(--bordeaux); }
.bh-honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }

.callout-band{ background:var(--blush); }
.callout-grid{ display:grid; grid-template-columns:1fr 1px 1fr; gap:var(--sp-5); align-items:start; max-width:1000px; margin-inline:auto; }
.callout-divider{ background:var(--brass-line); height:100%; }
.callout-item{ text-align:center; }
.callout-item h3{ font-size:1.2rem; }
.callout-item p{ font-size:.9rem; color:var(--text-soft); margin-top:10px; max-width:36ch; margin-inline:auto; line-height:1.6; }
.callout-item .btn{ margin-top:var(--sp-3); }

/* ---------- Journal (.blog-hero retired — uses .page-hero-card now) ---------- */
.featured-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center; border-radius:var(--radius-lg); overflow:hidden; background:rgba(255,255,255,.7); border:1px solid var(--line); box-shadow:var(--shadow); }
.featured-media{ aspect-ratio:4/3.6; overflow:hidden; align-self:stretch; }
.featured-media img{ width:100%; height:100%; object-fit:cover; }
.featured-copy{ padding:28px 32px 28px 0; }
.featured-copy .meta{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
.featured-copy .meta span.cat{ color:var(--bordeaux); font-weight:600; }
.featured-copy h1{ font-size:clamp(2rem,3.6vw,2.8rem); margin-top:var(--sp-2); line-height:1.2; }
.featured-copy p{ margin-top:var(--sp-3); color:var(--text); font-size:.98rem; max-width:48ch; }

.filter-row{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-5) var(--sp-4); flex-wrap:wrap; gap:var(--sp-3); }
.search-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--brass-line); display:flex; align-items:center; justify-content:center; font-size:.95rem; color:var(--text); flex-shrink:0; }

.article-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-block:var(--sp-2) var(--sp-5); }
.article-card{ display:block; border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.78); border:1px solid var(--line); box-shadow:0 18px 40px rgba(23,17,16,.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.article-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.article-media{ aspect-ratio:4/3.4; overflow:hidden; background:var(--blush-2); }
.article-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.article-card:hover .article-media img{ transform:scale(1.06); }
.article-body{ padding:16px; }
.article-body .meta{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
.article-body .meta span.cat{ color:var(--bordeaux); font-weight:600; }
.article-body h3{ font-size:1rem; font-family:var(--font-body); font-weight:700; color:var(--ink); margin-top:8px; line-height:1.4; }
.load-more-wrap{ display:flex; justify-content:center; padding-bottom:var(--sp-6); }

.sub-form{ display:flex; gap:10px; }
.sub-form input{ flex:1; padding:15px 18px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.7); font-size:.92rem; font-family:inherit; color:var(--ink); }
.sub-form input::placeholder{ color:var(--text-soft); }
.sub-form button{ padding:15px 22px; border-radius:16px; background:var(--ink); color:#fff; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; white-space:nowrap; transition:background .2s var(--ease); }
.sub-form button:hover{ background:var(--bordeaux); }

/* ---------- Academy / Courses ---------- */
.course-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; text-align:left; }
.course-card{ border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.78); border:1px solid var(--line); box-shadow:0 18px 40px rgba(23,17,16,.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease); display:block; }
.course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.course-media{ aspect-ratio:4/4.2; overflow:hidden; position:relative; background:var(--blush-2); }
.course-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.course-card:hover .course-media img{ transform:scale(1.06); }
.spots-badge{ position:absolute; top:12px; left:12px; background:var(--bordeaux); color:#fff; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:5px 10px; border-radius:999px; }
.course-body{ padding:16px; }
.course-date{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); font-weight:600; }
.course-body h3{ font-size:1.05rem; font-family:var(--font-body); font-weight:700; color:var(--ink); margin-top:8px; }
.course-price{ font-size:.92rem; color:var(--bordeaux); font-weight:600; margin-top:6px; }
.why-academy{ padding-block:var(--sp-6); background:var(--blush-2); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); max-width:1000px; margin-inline:auto; text-align:center; }
.why-item{ background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px; }
.need-help{ padding-block:var(--sp-6); text-align:center; }

/* ---------- Footer (matches design reference) ---------- */
.footer{ padding:32px 0 48px; color:var(--text-soft); }
.footer-inner{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:18px; padding:24px; border-radius:var(--radius-lg); background:rgba(255,255,255,.7); border:1px solid var(--line); }
.footer h4{ font-family:var(--font-body); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bordeaux); margin-bottom:12px; }
.footer-links{ display:grid; gap:10px; }
.footer-links a:hover{ color:var(--bordeaux); }
.footer-bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:16px; font-size:.84rem; }

/* ---------- Sticky mobile CTA (matches design reference: CSS-only, no JS visibility toggle) ---------- */
.sticky-cta{ position:fixed; inset:auto 16px 16px; z-index:180; display:none; gap:10px; }
.sticky-cta .inner{
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:10px;
  background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); backdrop-filter:blur(16px);
}
.sticky-cta .btn{ width:100%; }

.skip{ position:absolute; left:-999px; top:0; background:#000; color:#fff; padding:10px 14px; z-index:500; }
.skip:focus{ left:12px; top:12px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1100px){
  .t-grid{ grid-template-columns:repeat(2,1fr); }
  .article-grid{ grid-template-columns:repeat(3,1fr); }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1080px){
  .bh-home .hero-grid{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .bh-home .hero-copy h1{ font-size:clamp(2.4rem,6vw,4rem); max-width:11ch; }
  .bh-home .hero-side{ grid-template-rows:auto auto; }
  .bh-home .visual{ min-height:380px; }
  .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bh-home .service-track-wrap .card{ flex-basis:calc(50% - 9px); }
  .bh-home .focus, .bh-home .menu-panel, .bh-home .contact-grid{ grid-template-columns:minmax(0,1fr); }
  .bh-home .section-head{ flex-direction:column; align-items:flex-start; }
  .footer-inner{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1080px){
  .bh-menu .menu-layout{ grid-template-columns:1fr; }
  .bh-menu .cat-rail{ display:none; }
  .bh-menu .mobile-tabs-wrap{ display:block; }
}
@media (max-width:1024px){
  .callout-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .callout-divider{ display:none; }
}
@media (max-width:900px){
  .info-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .split-media{ grid-template-columns:1fr; }
  .split-media > div{ aspect-ratio:4/3; }
  .featured-grid{ grid-template-columns:1fr; }
  .featured-media{ aspect-ratio:16/10; }
  .why-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
}
/* Header: the .bar is a single non-wrapping flex row (brand + full nav +
   phone + CTA button) that needs roughly 1200px to fit without overlap —
   collapse to the hamburger/drawer well before the 820px "true mobile"
   breakpoint below, so tablet and small-laptop widths don't get a
   half-squeezed desktop nav. */
@media (max-width:1220px){
  #siteHeader .nav, .phone-link{ display:none; }
  .menu-btn{ display:flex; }
  .header-actions{ margin-left:auto; gap:8px; }
}
@media (max-width:820px){
  .bh-home .btn{ min-height:48px; padding:12px 18px; font-size:.92rem; }
  .bh-home .hero{ padding:120px 0 24px; }
  .bh-home .hero-copy{ padding:18px; border-radius:24px; }
  .bh-home .hero-copy h1{ font-size:clamp(1.9rem,8.4vw,2.9rem); line-height:1.08; max-width:none; }
  .bh-home .hero .subcopy{ font-size:.95rem; max-width:100%; }
  .bh-home .hero-cta .btn{ width:100%; }
  .bh-home .hero-bullets .pill{ width:100%; justify-content:flex-start; }
  .bh-home .visual{ min-height:260px; border-radius:20px; }
  .bh-home .floating-card{ position:relative; right:auto; bottom:auto; width:100%; margin-top:12px; animation:none; }
  .bh-home .side-badge{ display:none; }
  .grid-4{ grid-template-columns:minmax(0,1fr); }
  .bh-home .service-track-wrap .card{ flex-basis:85%; }
  .service .img{ aspect-ratio:16/10; }
  .bh-home .menu-side img{ border-radius:18px; }
  .bh-home .quote{ font-size:clamp(1.35rem,5.4vw,2rem); min-height:4.8em; }
  .bh-home .contact-chip{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:768px){
  .bh-menu .svc-rows{ grid-template-columns:1fr; }
  .bh-menu .cat-panel-card{ padding:18px; }
  .t-grid, .article-grid{ grid-template-columns:repeat(2,1fr); }
  .course-grid{ grid-template-columns:1fr 1fr; }
  .featured-copy{ padding:24px; }
  .form-row{ grid-template-columns:1fr; }
  .form-submit{ justify-content:stretch; flex-direction:column; align-items:stretch; }
  .sticky-cta{ display:block; }
  .sticky-cta .inner{ grid-template-columns:minmax(0,1fr); }
  .footer{ padding-bottom:96px; } /* reserve room so .sticky-cta doesn't cover footer content */
  .header-actions .btn{ display:none; } /* .sticky-cta below already repeats this CTA; keeping both crowds the hamburger off narrow screens */
}
@media (max-width:620px){
	.section {
    padding: 45px 0;
}
  .bh-home .hero-copy{ padding:16px; border-radius:20px; }
  .bh-home .hero-copy h1{ font-size:clamp(1.7rem,9vw,2.4rem); max-width:100%; }
  .bh-home .metrics{ grid-template-columns:minmax(0,1fr); }
  .bh-home .visual{ min-height:220px; border-radius:18px; }
  .bh-home .section-head h2{ font-size:clamp(1.4rem,7vw,2rem); }
  .bh-home .focus-copy, .bh-home .focus-visual, .bh-home .quotes, .card{ border-radius:18px; }
  .service .img{ aspect-ratio:4/3; }
  .tabs{ overflow-x:auto; flex-wrap:nowrap; gap:8px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .tab{ flex:0 0 auto; padding:10px 14px; font-size:.9rem; }
  .bh-home .price-item{ grid-template-columns:minmax(0,1fr); }
  .bh-home .price{ margin-top:4px; }
  .bh-home .map iframe{ min-height:300px; }
  .footer-bottom{ flex-direction:column; }
  .sticky-cta{ left:8px; right:8px; bottom:8px; }
  .sticky-cta .inner{ padding:8px; border-radius:18px; }
}
@media (max-width:480px){
  .course-grid{ grid-template-columns:1fr; }
  .bh-home .hero{ padding-top:86px; }
  .bh-home .hero-copy{ padding:14px; border-radius:18px; }
  .bh-home .hero-copy h1{ font-size:clamp(1.55rem,8.8vw,2.1rem); max-width:100%; }
  .bh-home .hero-cta .btn, .sticky-cta .btn{ width:100%; min-height:44px; padding:11px 14px; }
  .bh-home .visual, .bh-home .side-badge, .bh-home .focus-copy, .bh-home .focus-visual, .bh-home .quotes, .card{ border-radius:18px; }
  .bh-home .visual{ min-height:190px; }
  .bh-home .metrics{ grid-template-columns:minmax(0,1fr); }
  .service .img{ aspect-ratio:1/.88; }
  .service .content{ left:14px; right:14px; bottom:14px; }
  .mobile-drawer{ inset:0; padding-top:68px; border-radius:0; }
  .mobile-drawer nav a{ font-size:clamp(1.4rem,7.5vw,2rem); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .bh-reveal, .reveal, .reveal-scale{ opacity:1; transform:none; }
}