/* ============================================================
   COMPREHENSIVE RESPONSIVE FIXES — Tablet (1024px) & Mobile (768px/480px)
   Add this block at the END of your existing <style> tag
   ============================================================ */

/* ---------------- TABLET: 1024px and below ---------------- */
@media (max-width: 1024px) {

  /* Container breathing room */
  .container { padding: 0 18px; }
  section { padding: 45px 0; }

  /* Header nav collapses to burger (nav.css already hides nav ul) */
  .brand img { width: 56px; height: 56px; }
  .brand { font-size: 1.3rem; }

  /* About intro grid */
  .intro-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .image-grid-2x2 { max-width: 480px; margin: 0 auto; }
  .about-badge { width: 100px; height: 100px; }
  .about-badge strong { font-size: 1.7rem; }

  /* Why Preferred */
  .wp-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .wp-visual { max-width: 440px; margin: 0 auto; }
  .wp-quote { position: static; margin-top: 20px; max-width: 100%; }
  .wp-commit-panel { padding: 36px 24px; margin-top: 50px; }
  .wp-commit-grid { grid-template-columns: 1fr !important; }

  /* Why Choose bento grid */
  .wcb-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; gap: 18px; }
  .wcb-span-2x2, .wcb-span-2x1 { grid-column: span 2 !important; min-height: 280px; }
  .wcb-card { padding: 26px; }
  .wcb-banner { flex-direction: column; text-align: center; padding: 32px 24px; gap: 18px; }

  /* About Bold n Beauty modern split */
  .abn2-grid { grid-template-columns: 1fr !important; gap: 50px !important; }
  .abn2-stack { max-width: 420px; margin: 0 auto; height: 520px; min-height: 0; }

  /* Services intro collage */
  .csvc-grid { grid-template-columns: 1fr !important; gap: 45px !important; }
  .csvc-scroll-collage { max-width: 460px; margin: 0 auto; height: 440px; }
  .csvc-badge { right: 0; max-width: 190px; }

  /* Services tabs */
  .svc-tabbar { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-pane { grid-template-columns: 1fr !important; gap: 30px !important; }
  .svc-pane-media { height: 300px !important; order: -1; }
  .svc-pane-reverse .svc-pane-media .badge { left: 20px !important; right: auto !important; }

  /* Trusted partner floating/pendulum */
  .tbp-float, .tbp-pendulum { display: none !important; }
  .tbp-copy-box { padding: 40px 28px !important; margin: 0 16px !important; }
  .tbp-copy-box h2 { font-size: 1.9rem; }
  .tbp-layout { min-height: auto; }
  .tbp-sec { padding: 60px 0; }

  /* Process & care split */
  .pcw-split { grid-template-columns: 1fr !important; gap: 24px !important; }
  .pcw-connector { width: auto !important; height: 50px !important; transform: rotate(90deg) !important; margin: -6px auto !important; }
  .pcw-connector::before { top: 50% !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; height: 2px !important; transform: translateY(-50%) !important; }
  .pcw-panel { padding: 32px 26px; }

  /* Branches (brv) */
  .brv-frame { grid-template-columns: 1fr !important; }
  .brv-map-photo iframe { min-height: 280px; }
  .brv-content-col { padding: 32px 24px !important; }
  .brv-count { position: static !important; margin-bottom: 10px; }
  .brv-compass, .brv-scale { display: none !important; }
  .brv-tabbar { gap: 8px; }
  .brv-tab { padding: 10px 16px 10px 14px; font-size: 0.82rem; }

  /* Consistency section */
  .cons-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .cons-right { gap: 14px; align-content: start; }

  /* Client trust hero */
  .ctf-hero { min-height: auto; padding: 80px 0; }
  .ctf-hero-content { margin: 0 20px; padding: 32px 22px; }
  .ctf-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Journey steps */
  .jny-grid { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }
  .jny-grid::before { display: none !important; }

  /* What clients say layout */
  .wcs-layout { grid-template-columns: 1fr !important; gap: 30px !important; }
  .wcs-check-grid { grid-template-columns: 1fr 1fr !important; }

  /* Google reviews card */
  .bnbr-card__head { padding: 30px 24px 20px; }
  .bnbr-head-top { flex-direction: column !important; align-items: flex-start !important; gap: 16px; }
  .bnbr-card__rating { align-items: flex-start !important; align-self: stretch; flex-direction: row !important; justify-content: space-between; }
  .bnbr-gbadge { width: 70px; height: 70px; }
  .bnbr-gbadge svg { width: 32px; height: 32px; }

  /* FAQ masonry to single column earlier for readability */
  .faq-list { column-count: 1; max-width: 700px; }
}

/* ---------------- MOBILE: 768px and below ---------------- */
@media (max-width: 768px) {

  section { padding: 40px 0; }
  .container { padding: 0 16px; }

  h1 { font-size: clamp(1.9rem, 7vw, 2.6rem) !important; }
  h2 { font-size: clamp(1.6rem, 6vw, 2.1rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }
  p { font-size: 0.95rem; }

  .eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; margin-bottom: 14px; }

  /* Hero */
  .hero { padding-top: 130px !important; padding-bottom: 50px !important; background-attachment: scroll !important; }
  .hero-grid { gap: 30px !important; }
  .hero-tagline { font-size: 0.92rem; }
  .hero-actions { flex-direction: column !important; gap: 12px !important; margin-bottom: 30px !important; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { justify-content: space-between; gap: 12px !important; }
  .hero-stats div strong { font-size: 1.7rem; }
  .scroll-gallery { max-width: 100%; height: 340px !important; }

  /* About */
  .image-grid-2x2 { gap: 12px; }
  .about-badge { width: 84px; height: 84px; bottom: -14px; left: -14px; }
  .about-badge strong { font-size: 1.4rem; }
  .about-badge span { font-size: 0.62rem; }
  .right-col p { font-size: 0.9rem; }

  /* Why choose bento — stack fully */
  .wcb-grid { grid-template-columns: 1fr !important; }
  .wcb-span-2x2, .wcb-span-2x1 { grid-column: span 1 !important; min-height: 240px; }

  /* Services intro */
  .csvc-scroll-collage { height: 340px; }
  .csvc-tags { gap: 8px; }
  .csvc-branch-row { gap: 10px; }
  .csvc-branch-pill { font-size: 0.8rem; padding: 10px 16px; }

  /* Services tabs single column */
  .svc-tabbar { grid-template-columns: 1fr !important; gap: 8px !important; }
  .svc-tab { padding: 14px 14px 10px; }
  .svc-pane-media { height: 220px !important; }
  .svc-chip { font-size: 0.78rem; padding: 8px 14px; }

  /* Family salon feature strip */
  .feature-strip { flex-direction: column !important; text-align: center; padding: 32px 22px !important; gap: 24px !important; }
  .feature-strip img { width: 100%; max-width: 280px; }

  /* Process & care */
  .pcw-panel { padding: 26px 20px; }
  .pcw-list li { font-size: 0.9rem; }

  /* Built on trust */
  .bot-corner { width: 90px; height: 90px; }
  .bot-tagline { padding: 24px 20px; font-size: 1rem; }

  /* Branches */
  .brv-tabbar { flex-wrap: wrap; }
  .brv-tab { flex: 1 1 auto; justify-content: center; }
  .brv-serv { gap: 6px; }
  .brv-actions { flex-direction: column !important; }
  .brv-actions .btn-primary, .brv-gmb { width: 100%; min-width: 0 !important; }
  .brv-consistency { gap: 8px; }
  .brv-consistency-item { font-size: 0.78rem; padding: 10px 16px; }

  /* Consistency */
  .cons-header-content h2 { font-size: 1.9rem !important; }
  .cons-right { grid-template-columns: 1fr !important; }
  .cons-footer-box { padding: 18px; flex-direction: column; }

  /* Client trust */
  .ctf-hero-content h1 { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; }
  .ctf-hero-lede { font-size: 0.92rem; }
  .ctf-hero-actions { flex-direction: column; width: 100%; }
  .ctf-hero-actions .btn { width: 100%; }
  .ctf-grid { grid-template-columns: 1fr !important; }
  .ctf-row-track img { width: 160px; height: 100px; }

  /* Journey */
  .jny-grid { grid-template-columns: 1fr !important; }
  .jny-step { padding: 28px 20px 24px; }

  /* What clients say */
  .wcs-check-grid { grid-template-columns: 1fr !important; }
  .wcs-list-panel, .wcs-review-card { padding: 26px 20px !important; }

  /* Google reviews */
  .bnbr-rating-strip { flex-direction: column; border-radius: 20px; padding: 18px; gap: 10px; }
  .bnbr-rating-div { display: none; }
  .bnbr-tabbar { gap: 8px; }
  .bnbr-tab { padding: 9px 16px; font-size: 0.8rem; }
  .bnbr-card__score { font-size: 2.2rem; }
  .bnbr-review { flex: 0 0 260px; }

  /* FAQ */
  .faq-list { column-count: 1 !important; }
  .faq-item summary { padding: 18px 20px; font-size: 0.92rem; }
  .faq-item .faq-a { padding: 0 20px 20px; font-size: 0.88rem; }

  /* RSVP form */
  #rsvp form { padding: 26px 20px !important; }
  #rsvp form > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .cta-band { padding: 32px 20px !important; }
  .cta-band h2 { font-size: 2rem !important; }

  /* Footer */
  .ftm-grid { grid-template-columns: 1fr !important; padding: 34px 0 24px !important; gap: 28px !important; }
  .ftm-top-inner { flex-direction: column; align-items: flex-start !important; gap: 10px; }
  .ftm-bottom-inner { flex-direction: column; text-align: center; gap: 6px; }
}

/* ---------------- SMALL MOBILE: 480px and below ---------------- */
@media (max-width: 480px) {
  .hero-stats { flex-direction: column; gap: 14px !important; align-items: flex-start; }
  .hero-stats div { display: flex; align-items: baseline; gap: 8px; }

  .wcb-content h4 { font-size: 1.05rem; }
  .wcb-content p { font-size: 0.82rem; }

  .csvc-badge { max-width: 150px; padding: 10px 12px; }
  .csvc-badge strong { font-size: 0.82rem; }

  .abn2-badge-branches { font-size: 0.68rem; padding: 8px 12px 8px 10px; }
  .abn2-badge-years { width: 68px; height: 68px; }
  .abn2-badge-num { font-size: 1.2rem; }

  .brv-panel h3 { font-size: 1.35rem !important; }
  .brv-desc { font-size: 0.88rem; }

  .ctf-trustline { flex-direction: column; gap: 4px; text-align: center; padding: 14px 18px; }

  .bnbr-review { flex: 0 0 220px; padding: 16px; }
  .bnbr-review__text { font-size: 0.82rem; }

  .btn { font-size: 0.82rem; padding: 12px 20px; }
}

/* ---------------- Fix background-attachment:fixed on iOS/mobile
   (fixed backgrounds cause jank/scroll bugs on phones) ---------------- */
@media (max-width: 1024px) {
  .hero,
  .bpg-hero,
  .ct-hero,
  .pf-hero {
    background-attachment: scroll !important;
  }
}

/* ============================================================
   BOLD N BEAUTY — ABOUT PAGE RESPONSIVE FIXES
   Paste this block right before the closing </style> tag in
   about-boldnbeauty (after all your existing rules), so it overrides
   them at the right breakpoints. Works for tablet, mobile and
   small-mobile, and makes the mobile view feel like a native app.
   ============================================================ */

/* ---------- Global app-feel base for small screens ---------- */
@media (max-width: 768px){
  html{ -webkit-text-size-adjust: 100%; }
  body{ overflow-x: hidden; }
  .container{ padding-left: 20px; padding-right: 20px; }
  section{ padding: 56px 0; }
  h1{ font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.15; }
  h2{ font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.2; }
  h3{ font-size: clamp(1.25rem, 5vw, 1.5rem); }
  .btn{ padding: 14px 22px; font-size: 0.95rem; }
}

/* ============================================================
   1. HERO
   ============================================================ */
@media (max-width: 1024px){
  .about-hero{ padding-top: 130px; padding-bottom: 70px; }
  .about-hero-grid{ grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .about-hero-actions{ justify-content: center; }
  .about-hero-stats{ justify-content: center; }
  .about-hero-tagline{ margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px){
  /* background-attachment:fixed is buggy/heavy on mobile browsers */
  .about-hero{ background-attachment: scroll; padding-top: 110px; }
  .about-hero-stats{ gap: 22px; width: 100%; }
  .about-hero-stats div{ flex: 1 1 28%; text-align: center; }
  .about-hero-stats div strong{ font-size: 1.9rem; }
  .about-hero-actions{ flex-direction: column; width: 100%; }
  .about-hero-actions .btn{ width: 100%; text-align: center; justify-content: center; }
}
@media (max-width: 600px){
  .scroll-gallery{ max-width: 300px; height: 420px; padding: 10px; gap: 10px; }
  .scroll-track{ gap: 10px; }
}
@media (max-width: 420px){
  .about-hero-visual{ display: none; } /* keeps mobile hero short & app-like, focused on text + CTA */
  .about-hero{ padding-bottom: 50px; }
}

/* ============================================================
   2. WHO WE ARE (portrait spotlight)
   ============================================================ */
@media (max-width: 1024px){
  .wwa-grid{ grid-template-columns: 1fr; gap: 60px; }
  .wwa-visual{ max-width: 380px; margin: 0 auto; }
  .wwa-copy{ text-align: left; }
}
@media (max-width: 600px){
  .wwa-visual{ max-width: 280px; margin: 0 auto 30px; }
  .wwa-exp-badge{ width: 88px; height: 88px; top: -14px; left: -14px; }
  .wwa-exp-badge strong{ font-size: 1.5rem; }
  .wwa-rating-pill{ top: 12px; right: -10px; padding: 8px 14px 8px 10px; }
  .wwa-rating-pill strong{ font-size: 0.95rem; }
  .wwa-accent-img{ width: 52%; right: -14px; bottom: -20px; }
  .wwa-feature-list{ margin: 24px 0 30px; gap: 16px; }
  .wwa-stat-strip{ justify-content: center; gap: 10px; }
  .wwa-stat-pill{ padding: 10px 16px; }
}

/* ============================================================
   3. ABOUT / WHO WE ARE — 3D floating gallery
   On mobile the true 3D/absolute layout breaks (overlaps, huge
   empty height). Convert to a clean 2-col app-style grid.
   ============================================================ */
@media (max-width: 1024px){
  .about-us-grid{ grid-template-columns: 1fr; gap: 50px; }
  .about-3d-wrapper{ min-height: 560px; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 768px){
  .about-3d-wrapper{
    perspective: none;
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 100%;
  }
  .scene-3d-card{
    position: static !important;
    width: auto !important; height: auto !important;
    transform: none !important;
    aspect-ratio: 1/1;
  }
  .scene-3d-card.img-pos-2{ grid-column: 1 / -1; aspect-ratio: 16/10; } /* main image spans full width */
  .scene-3d-img-box{ animation: none !important; height: 100%; }
  .about-3d-wrapper:hover .scene-3d-card{ transform: none; }
  .about-text-content{ margin-top: 36px; }
}
@media (max-width: 420px){
  .about-3d-wrapper{ grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   4. OUR STORY — tilted image stack
   Same problem as above: rotated/absolute stack collapses badly
   on narrow screens. Simplify to a straight 2-col grid.
   ============================================================ */
@media (max-width: 1024px){
  .abn2-grid{ grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 768px){
  .abn2-stack{
    height: auto; min-height: 0; max-width: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .abn2-img{
    position: static !important;
    width: auto !important; height: auto !important;
    aspect-ratio: 1/1; transform: none !important;
  }
  .abn2-img-1{ grid-column: 1 / -1; aspect-ratio: 16/9; }
  .abn2-stack:hover .abn2-img{ transform: none; }
  .abn2-badge-years, .abn2-badge-branches{ position: static; margin-top: 12px; }
  .abn2-badge-years{ width: 84px; height: 84px; margin-right: auto; margin-left: 0; }
  .abn2-badge-branches{ display: inline-flex; }
  .abn2-signature{ padding: 20px 22px; margin-top: 24px; }
}

/* ============================================================
   5. MISSION & VISION
   ============================================================ */
@media (max-width: 1024px){
  .pcw-split{ grid-template-columns: 1fr; gap: 26px; }
  .pcw-connector{ width: auto; height: 50px; transform: rotate(90deg); margin: -6px auto; }
  .pcw-connector::before{ top: 50%; left: 0; right: 0; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
}
@media (max-width: 600px){
  .pcw-panel{ padding: 34px 26px; }
  .pcw-panel-icon{ width: 50px; height: 50px; margin-bottom: 18px; }
}

/* ============================================================
   6. WHAT WE DO — arch/service rows
   ============================================================ */
@media (max-width: 980px){
  .service-row-modern,
  .service-row-modern:nth-child(even){
    flex-direction: column;
    gap: 26px;
    margin-bottom: 50px;
    text-align: center;
  }
  .arch-wrapper{ width: 100%; max-width: 320px; margin: 0 auto; }
  .float-badge{ top: -14px !important; right: 50% !important; left: auto !important; bottom: auto !important; transform: translateX(50%); width: 56px; height: 56px; font-size: 1.4rem; }
  .service-text-modern{ padding: 0 4px; }
  .wwd-header-modern{ margin: 0 auto 50px; }
}
@media (max-width: 600px){
  .what-we-do-modern{ padding: 45px 0; }
  .arch-img-container{ max-width: 260px; }
}

/* ============================================================
   7. WHY TRUST US
   ============================================================ */
@media (max-width: 1024px){
  .wp-grid{ grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .wp-visual{ max-width: 340px; margin: 0 auto; }
  .wp-quote{ left: 50%; transform: translateX(-50%); bottom: -30px; }
}
@media (max-width: 600px){
  .wp-visual{ max-width: 260px; }
  .wp-quote{
    position: static; transform: none; max-width: 100%;
    margin: 18px auto 0; text-align: left;
  }
  .wp-commit-panel{ margin-top: 50px; padding: 34px 20px; }
  .wp-commit-grid{ grid-template-columns: 1fr; }
  .wp-commit-item:last-child{ max-width: 100%; }
}

/* ============================================================
   8. BRANCHES — map locator
   Tabs become a horizontally-scrollable app-style pill bar,
   map + content stack, decorative compass/scale hidden.
   ============================================================ */
@media (max-width: 1024px){
  .brv-frame{ grid-template-columns: 1fr; min-height: 0; }
  .brv-map-photo iframe{ min-height: 260px; }
  .brv-content-col{ padding: 36px 26px; }
  .brv-count{ position: static; display: block; margin-bottom: 12px; text-align: right; }
}
@media (max-width: 768px){
  .brv-tabbar{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    margin: 30px -20px 30px;
    padding: 0 20px 6px;
  }
  .brv-tabbar::-webkit-scrollbar{ display: none; }
  .brv-tab{ flex: 0 0 auto; padding: 12px 20px 12px 16px; font-size: 0.85rem; white-space: nowrap; }
  .brv-compass, .brv-scale{ display: none; }
  .brv-map-col{ padding: 12px; }
  .brv-actions{ flex-direction: column; }
  .brv-actions .btn-primary, .brv-gmb{ width: 100%; }
}
@media (max-width: 480px){
  .brv-panel h3{ font-size: 1.4rem; }
  .brv-serv li{ font-size: 0.72rem; padding: 6px 12px; }
}

/* ============================================================
   9. CTA BAND
   ============================================================ */
@media (max-width: 600px){
  .cta-band{ padding: 44px 22px; border-radius: 22px; }
  .cta-band h2{ font-size: 1.9rem; }
  .cta-actions{ flex-direction: column; width: 100%; }
  .cta-actions .btn{ width: 100%; text-align: center; justify-content: center; }
}

/* ============================================================
   10. Small phones (≤375px) — extra tightening for an app feel
   ============================================================ */
@media (max-width: 375px){
  .container{ padding-left: 16px; padding-right: 16px; }
  section{ padding: 44px 0; }
  .about-hero-stats{ gap: 14px; }
  .about-hero-stats div strong{ font-size: 1.6rem; }
  .wwa-exp-badge{ width: 76px; height: 76px; }
  .abn2-badge-years{ width: 72px; height: 72px; }
  .float-badge{ width: 48px; height: 48px; font-size: 1.2rem; }
}