/* ==========================================================================
   INTERIOR STUDIO — V3 STYLESHEET
   Loaded AFTER site.css and v2.css.
   --------------------------------------------------------------------------
   Sections:
     1.  Global mobile overflow guard
     2.  Mobile bottom nav center CTA — proper highlight + pulse
     3.  Desktop header Get-Free-Quote button — restore original
     4.  Footer Company+Services merged column
     5.  Portfolio uniform grid + innovative hover overlay
     6.  Services landing page — categorized clean grid
     7.  Service-details — full-width banner + photo-rich layout
     8.  Training-details — full-width banner + quick info strip
     9.  Blog-details (single template)
   ========================================================================== */


/* ============================================================
   1.  GLOBAL MOBILE OVERFLOW GUARD
       Stops left-right scroll on home & all pages.
   ============================================================ */
html, body{
  overflow-x:hidden;       /* fallback for old browsers */
  overflow-x:clip;         /* modern: prevents horizontal scroll WITHOUT breaking position:sticky */
  max-width:100%;
  width:100%;
}
/* html itself must NOT establish a scroll container, or position:sticky on body children stops working. */
html{
  overflow-y:visible !important;
}
*{ max-width:100% }
img, video{ max-width:100%; height:auto }
.banner-scroll, .svc-hero-banner, .training-hero-full, .bd-hero-banner{
  overflow:hidden;
  max-width:100vw;
  width:100%;
}
.banner-scroll .bs-track,
.svc-hero-banner .bs-track,
.training-hero-full .bs-track,
.bd-hero-banner .bs-track{ max-width:none } /* track is 300% so parent must clip */

/* CTA bands on home page use 5vw side margins — strip on mobile */
@media (max-width:767.98px){
  section.cta-band{
    margin-left:16px !important;
    margin-right:16px !important;
    width:auto !important;
    max-width:calc(100vw - 32px) !important;
  }
  .container{
    padding-left:18px !important;
    padding-right:18px !important;
    max-width:100% !important;
  }
  .detail-banner{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Prevent .row negative margins from overflowing */
  .row{ margin-left:0 !important; margin-right:0 !important }
  /* Hero-slide is full viewport width — make sure its container doesn't bleed */
  .hero-slide{ overflow:hidden }
  /* zigzag side images and process tracks */
  .zigzag, .process-wrap{ overflow:hidden }
}


/* ============================================================
   2.  MOBILE BOTTOM NAV — SVG bar with convex bump + animated CTA
   ============================================================ */
/* Reset v2 styles on direct anchor children — we now use .mbn-tab/.mbn-cta */
.mobile-bottom-nav > a,
.mobile-bottom-nav .mobile-bottom-nav a{
  /* Defensive: any stray <a> direct children would inherit v2 styles, kill them */
  all:revert;
}

/* Reset old v2 mobile-bottom-nav styles since we now use SVG-based structure */
.mobile-bottom-nav{
  display:none;
  position:fixed;
  left:14px; right:14px; bottom:14px;
  margin-bottom:env(safe-area-inset-bottom);
  height:78px;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  z-index:950;
  grid-template-columns:none !important;
  gap:0 !important;
  overflow:visible !important;
  pointer-events:none;          /* SVG + tabs handle their own pointer */
}

/* The SVG bar — convex bump at top centre, drop-shadow, fills the nav */
.mobile-bottom-nav .mbn-bar{
  position:absolute;
  inset:14px 0 0;
  width:100%;
  height:calc(100% - 14px);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.18));
  pointer-events:auto;
}
.mobile-bottom-nav .mbn-bar path{
  fill:rgba(236,234,227,.96);   /* warm cream — matches your reference */
  stroke:rgba(0,0,0,.04);
  stroke-width:.5;
}

/* Tabs container — 5 columns, middle one reserved for CTA */
.mobile-bottom-nav .mbn-tabs{
  position:absolute;
  inset:14px 0 0;
  display:grid;
  grid-template-columns:1fr 1fr 96px 1fr 1fr;
  align-items:center;
  padding:0 8px;
  pointer-events:none;
}
/* Explicit grid placement: tabs 1,2 in cols 1,2; CTA absolute in centre;
   tabs 3,4 (DOM positions 4,5) jump over the centre column to cols 4,5. */
.mobile-bottom-nav .mbn-tabs > a:nth-child(1){ grid-column:1 }
.mobile-bottom-nav .mbn-tabs > a:nth-child(2){ grid-column:2 }
.mobile-bottom-nav .mbn-tabs > a:nth-child(4){ grid-column:4 }
.mobile-bottom-nav .mbn-tabs > a:nth-child(5){ grid-column:5 }

.mobile-bottom-nav .mbn-tab{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  padding:18px 4px 6px;
  color:#2C2C3A;
  font-size:.7rem;
  font-weight:500;
  text-decoration:none;
  border-radius:18px;
  pointer-events:auto;
  transition:color .2s var(--ease);
  min-width:0;
}
.mobile-bottom-nav .mbn-tab i{
  font-size:1.3rem;
  line-height:1;
  transition:transform .25s var(--ease);
}
.mobile-bottom-nav .mbn-tab span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  letter-spacing:.01em;
}
.mobile-bottom-nav .mbn-tab:hover{ color:var(--orange) }
.mobile-bottom-nav .mbn-tab:hover i{ transform:translateY(-2px) }
.mobile-bottom-nav .mbn-tab.is-active{ color:var(--orange) }

/* The animated orange CTA — sits inside the convex bump at top centre */
.mobile-bottom-nav .mbn-cta{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:62px;
  height:62px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--orange) 0%,var(--pink) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(229,155,44,.5);
  pointer-events:auto;
  cursor:pointer;
  text-decoration:none;
  z-index:3;
  animation:mbnCtaPulse 2.2s ease-in-out infinite;
}
.mobile-bottom-nav .mbn-cta i{
  font-size:1.6rem;
  color:#fff;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));
  animation:mbnIconBlink 2.2s ease-in-out infinite;
}
.mobile-bottom-nav .mbn-cta:hover{
  animation-play-state:paused;
  transform:translateX(-50%) scale(1.06);
}

/* CTA blink + scale pulse */
@keyframes mbnCtaPulse{
  0%, 100% {
    transform:translateX(-50%) scale(1);
    box-shadow:0 4px 14px rgba(229,155,44,.5);
  }
  50% {
    transform:translateX(-50%) scale(1.06);
    box-shadow:0 8px 26px rgba(229,155,44,.85);
  }
}
/* Inner icon blink — slight fade + scale at peak */
@keyframes mbnIconBlink{
  0%, 45%, 100% { opacity:1; transform:scale(1) }
  50%, 55%      { opacity:.6; transform:scale(.85) }
}

/* Show on mobile + give footer breathing room (bar = 78px + 14px bottom) */
@media (max-width:991.98px){
  .mobile-bottom-nav{ display:block }
  footer{ padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important }
  .wa-fab{ bottom:calc(110px + env(safe-area-inset-bottom)) !important }
}

/* Compact small phones — bar slightly smaller, CTA too */
@media (max-width:420px){
  .mobile-bottom-nav{
    left:10px; right:10px; bottom:10px;
    height:74px;
  }
  .mobile-bottom-nav .mbn-tabs{
    grid-template-columns:1fr 1fr 86px 1fr 1fr;
    padding:0 4px;
  }
  .mobile-bottom-nav .mbn-tab{
    font-size:.62rem;
    padding:16px 2px 4px;
  }
  .mobile-bottom-nav .mbn-tab i{ font-size:1.15rem }
  .mobile-bottom-nav .mbn-cta{
    width:54px; height:54px;
  }
  .mobile-bottom-nav .mbn-cta i{ font-size:1.4rem }
}

/* Ultra compact — hide outer labels, keep icons */
@media (max-width:340px){
  .mobile-bottom-nav .mbn-tab span{ display:none }
}


/* ============================================================
   3.  DESKTOP HEADER — RESTORE GET FREE QUOTE BUTTON
       The mobile responsive override was leaking into desktop.
       This section enforces the original premium pill button shape on
       desktop, while keeping the compact mobile pill we want < 992px.
   ============================================================ */
@media (min-width:992px){
  /* Header layout: logo, nav, then CTA pinned right with proper gap */
  .header-inner{
    gap:24px !important;
  }
  .main-nav{
    margin-left:14px !important;
    gap:22px !important;       /* tighter nav so CTA has room */
  }
  .main-nav > li > a{
    font-size:.88rem !important;
  }
  .header-cta{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-shrink:0;
  }
  .header-cta .btn-orange{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:11px 22px !important;
    font-size:.88rem !important;
    border-radius:30px !important;
    white-space:nowrap !important;
    line-height:1 !important;
  }
  .header-cta .btn-orange i{ font-size:1rem !important }
  .header-cta .btn-orange .cta-label{
    display:inline !important;
    font-weight:600 !important;
  }
  .header-cta .icon-btn{
    width:42px !important;
    height:42px !important;
    flex-shrink:0;
  }
}

/* Tighter desktop sizes 992-1199 — reduce nav-item gap further */
@media (min-width:992px) and (max-width:1199.98px){
  .main-nav{ gap:16px !important; margin-left:8px !important }
  .main-nav > li > a{ font-size:.84rem !important }
  .header-cta .btn-orange{
    padding:10px 16px !important;
    font-size:.82rem !important;
  }
  .header-cta .btn-orange .cta-label{
    /* On medium desktops, hide label, show icon — saves space */
    display:none !important;
  }
}

/* Mobile: compact pill, icon visible, label hidden < 480 */
@media (max-width:991.98px){
  .header-cta .btn-orange{
    padding:9px 16px !important;
    font-size:.78rem !important;
    border-radius:22px !important;
    gap:6px !important;
  }
  .header-cta .btn-orange i{ font-size:.95rem !important }
}
@media (max-width:480px){
  .header-cta .btn-orange{
    padding:9px 12px !important;
  }
  .header-cta .btn-orange .cta-label{ display:none !important }
}


/* ============================================================
   4.  FOOTER — Company + Services in one cell, side-by-side
   ============================================================ */
footer .ft-grid{
  grid-template-columns:1.6fr 2.2fr 1.2fr !important;
  gap:48px;
}
.ft-double{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.ft-double .ft-col{ margin:0 }

@media (max-width:767.98px){
  footer .ft-grid{
    grid-template-columns:1fr !important;
    gap:32px;
  }
  .ft-double{
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
}
@media (max-width:420px){
  .ft-double{
    grid-template-columns:1fr;
    gap:18px;
    text-align:center;
  }
}


/* ============================================================
   5.  PORTFOLIO — UNIFORM 3-COL GRID + INNOVATIVE HOVER
   ============================================================ */
/* Disable bento layout on portfolio — switch to uniform */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.pf-card{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--bg-2);
  cursor:pointer;
  isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pf-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease), filter .5s var(--ease);
  z-index:1;
}
.pf-card::before{
  /* sliding orange gradient overlay */
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,
    rgba(15,15,30,0) 0%,
    rgba(15,15,30,.15) 50%,
    rgba(15,15,30,.85) 100%);
  opacity:0;
  transition:opacity .5s var(--ease);
}
.pf-card .pf-info{
  position:absolute;
  left:22px; right:22px; bottom:22px;
  z-index:3;
  color:#fff;
  transform:translateY(20px);
  opacity:0;
  transition:transform .5s var(--ease) .1s, opacity .5s var(--ease) .1s;
}
.pf-card .pf-cat{
  display:inline-block;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--orange-l);
  margin-bottom:6px;
}
.pf-card .pf-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.45rem;
  letter-spacing:-.01em;
  line-height:1.15;
  color:#fff;
  margin:0 0 8px;
}
.pf-card .pf-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:600;
  color:#fff;
}
.pf-card .pf-arrow{
  position:absolute;
  top:18px; right:18px;
  width:44px; height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--pink));
  display:grid; place-items:center;
  color:#fff;
  font-size:1.05rem;
  z-index:3;
  opacity:0;
  transform:translate(10px,-10px) scale(.8);
  transition:all .45s var(--spring);
  box-shadow:0 8px 22px rgba(229,155,44,.45);
}

/* Default base label — small white pill at bottom */
.pf-card .pf-base-label{
  position:absolute;
  left:18px; bottom:18px;
  z-index:3;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  padding:8px 16px;
  border-radius:22px;
  font-family:var(--serif);
  font-weight:500;
  font-size:.92rem;
  color:var(--ink);
  transition:opacity .3s var(--ease);
}
.pf-card .pf-base-label small{
  display:block;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--orange);
  margin-bottom:1px;
}

/* Hover state */
.pf-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(20,20,40,.22);
}
.pf-card:hover img{
  transform:scale(1.08);
}
.pf-card:hover::before{ opacity:1 }
.pf-card:hover .pf-info{
  transform:translateY(0);
  opacity:1;
}
.pf-card:hover .pf-arrow{
  opacity:1;
  transform:translate(0,0) scale(1);
}
.pf-card:hover .pf-base-label{ opacity:0 }

@media (max-width:991.98px){
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); gap:16px }
}
@media (max-width:560px){
  .portfolio-grid{ grid-template-columns:1fr; gap:14px }
}


/* ============================================================
   6.  SERVICES LANDING — Categorized clean grid
   ============================================================ */
.svc-section-head{
  display:flex; align-items:center; gap:18px;
  margin-bottom:32px;
}
.svc-section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.85rem;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
}
.svc-section-head h2 em{ color:var(--orange); font-style:italic }
.svc-section-head .line{
  flex:1;
  height:1px;
  background:linear-gradient(to right, var(--orange), transparent);
}
.svc-section-head .count{
  font-size:.78rem;
  color:var(--mute);
  font-weight:600;
  letter-spacing:.1em;
}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:64px;
}
.svc-card{
  position:relative;
  display:block;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line-2);
  transition:all .4s var(--ease);
}
.svc-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(20,20,40,.12);
  border-color:transparent;
}
.svc-card .svc-img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-2);
}
.svc-card .svc-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.svc-card:hover .svc-img img{ transform:scale(1.07) }
.svc-card .svc-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,15,30,.45) 0%, rgba(15,15,30,0) 50%);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.svc-card:hover .svc-img::after{ opacity:1 }
.svc-card .svc-body{
  padding:20px 22px 22px;
}
.svc-card .svc-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 6px;
}
.svc-card .svc-desc{
  font-size:.85rem;
  color:var(--mute);
  line-height:1.6;
  margin:0 0 12px;
  min-height:44px;
}
.svc-card .svc-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem;
  font-weight:600;
  color:var(--orange);
  letter-spacing:.01em;
}
.svc-card .svc-link i{ transition:transform .3s }
.svc-card:hover .svc-link i{ transform:translateX(4px) }

@media (max-width:991.98px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); gap:18px }
}
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; gap:14px }
  .svc-section-head{ flex-direction:column; align-items:flex-start; gap:8px }
  .svc-section-head h2{ font-size:1.5rem }
}


/* ============================================================
   7.  SERVICE-DETAILS — Full-width banner, photo-rich
   ============================================================ */
/* Full-width hero banner (edge-to-edge, breaks out of container) */
.svc-hero-banner{
  position:relative;
  width:100%;
  height:520px;
  overflow:hidden;
  background:var(--ink);
  margin-bottom:0;
}
.svc-hero-banner .bs-track{
  display:flex;
  height:100%;
  width:300%;
  animation:bannerScroll 18s linear infinite;
}
.svc-hero-banner .bs-slide{
  position:relative;
  flex:1 0 calc(100%/3);
  height:100%;
}
.svc-hero-banner .bs-slide img{
  width:100%; height:100%;
  object-fit:cover;
}
.svc-hero-banner .bs-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(15,15,30,.65) 0%, rgba(15,15,30,.25) 100%);
}
.svc-hero-banner .bs-slide .bs-text{
  position:absolute;
  left:8vw; right:8vw;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  color:#fff;
  max-width:680px;
}
.svc-hero-banner .bs-slide .bs-text .eyebrow{
  display:inline-block;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange-l);
  margin-bottom:14px;
  font-weight:700;
}
.svc-hero-banner .bs-slide .bs-text h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:3.4rem;
  line-height:1.05;
  color:#fff;
  letter-spacing:-.025em;
  margin-bottom:18px;
}
.svc-hero-banner .bs-slide .bs-text h1 em{ color:var(--orange-l); font-style:italic }
.svc-hero-banner .bs-slide .bs-text p{
  font-size:1.05rem;
  color:rgba(255,255,255,.88);
  line-height:1.65;
  max-width:520px;
}
.svc-hero-banner:hover .bs-track{ animation-play-state:paused }

/* Service intro band with key facts row */
.svc-intro{
  padding:60px 0 30px;
}
.svc-key-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  background:linear-gradient(135deg,var(--blush) 0%, var(--sand) 100%);
  border-radius:20px;
  padding:26px;
  margin-top:30px;
  border:1px solid rgba(229,155,44,.12);
}
.svc-key-facts .fact{
  text-align:center;
  padding:0 8px;
  border-right:1px solid rgba(229,155,44,.18);
}
.svc-key-facts .fact:last-child{ border-right:none }
.svc-key-facts .fact i{
  display:block;
  font-size:1.6rem;
  color:var(--orange);
  margin-bottom:8px;
}
.svc-key-facts .fact .fv{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:2px;
}
.svc-key-facts .fact .fl{
  font-size:.74rem;
  color:var(--ink-2);
  letter-spacing:.04em;
}

/* Benefit cards — 4 image-led cards instead of icon tiles */
.svc-benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.svc-benefit{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--bg-2);
  transition:transform .4s var(--ease);
}
.svc-benefit:hover{ transform:translateY(-5px) }
.svc-benefit img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.svc-benefit:hover img{ transform:scale(1.06) }
.svc-benefit::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,15,30,.85) 0%, rgba(15,15,30,.05) 60%);
}
.svc-benefit .sb-text{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:22px;
  color:#fff;
  z-index:2;
}
.svc-benefit .sb-text h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.15rem;
  margin-bottom:5px;
  color:#fff;
}
.svc-benefit .sb-text p{
  font-size:.78rem;
  color:rgba(255,255,255,.85);
  line-height:1.5;
  margin:0;
}

/* Style/variant gallery — 4 photos with style labels */
.svc-styles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.svc-style{
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:var(--bg-2);
}
.svc-style img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.svc-style:hover img{ transform:scale(1.07) }
.svc-style::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent 50%);
}
.svc-style span{
  position:absolute; bottom:14px; left:14px;
  z-index:2; color:#fff;
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05rem;
}

/* Included list — 2-col checklist */
.svc-included{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 32px;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:18px;
  padding:30px 36px;
}
.svc-included li{
  display:flex; align-items:flex-start; gap:12px;
  padding:8px 0;
  font-size:.92rem;
  color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
}
.svc-included li:nth-last-child(-n+2){ border-bottom:none }
.svc-included li i{
  color:var(--orange);
  font-size:1.05rem;
  flex-shrink:0;
  margin-top:2px;
}

/* FAQ accordion */
.svc-faq{
  max-width:780px;
  margin:0 auto;
}
.svc-faq details{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:14px;
  margin-bottom:12px;
  overflow:hidden;
  transition:all .3s;
}
.svc-faq details[open]{
  border-color:var(--orange);
  box-shadow:0 12px 28px rgba(229,155,44,.1);
}
.svc-faq summary{
  padding:18px 24px;
  cursor:pointer;
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.svc-faq summary::-webkit-details-marker{ display:none }
.svc-faq summary::after{
  content:'\F285'; /* bi-plus */
  font-family:'bootstrap-icons';
  color:var(--orange);
  font-size:1.1rem;
  flex-shrink:0;
  transition:transform .3s;
}
.svc-faq details[open] summary::after{ transform:rotate(45deg) }
.svc-faq details > p{
  padding:0 24px 22px;
  margin:0;
  color:var(--mute);
  font-size:.95rem;
  line-height:1.7;
}

@media (max-width:991.98px){
  .svc-hero-banner{ height:420px }
  .svc-hero-banner .bs-slide .bs-text h1{ font-size:2.4rem }
  .svc-key-facts{ grid-template-columns:repeat(2,1fr); gap:18px 14px }
  .svc-key-facts .fact:nth-child(2n){ border-right:none }
  .svc-benefits{ grid-template-columns:repeat(2,1fr); gap:14px }
  .svc-styles{ grid-template-columns:repeat(2,1fr) }
  .svc-included{ grid-template-columns:1fr; padding:24px 22px }
  .svc-included li:nth-last-child(-n+2){ border-bottom:1px solid var(--line-2) }
  .svc-included li:last-child{ border-bottom:none }
}
@media (max-width:560px){
  .svc-hero-banner{ height:360px }
  .svc-hero-banner .bs-slide .bs-text h1{ font-size:1.85rem }
  .svc-hero-banner .bs-slide .bs-text p{ font-size:.92rem }
  .svc-key-facts{ grid-template-columns:1fr; padding:20px }
  .svc-key-facts .fact{ border-right:none; border-bottom:1px solid rgba(229,155,44,.18); padding:12px 0 }
  .svc-key-facts .fact:last-child{ border-bottom:none }
  .svc-benefits{ grid-template-columns:1fr }
  .svc-styles{ grid-template-columns:repeat(2,1fr); gap:10px }
}


/* ============================================================
   8.  TRAINING-DETAILS — Full-width banner + quick info strip
   ============================================================ */
/* Make existing banner-scroll full-width when in training-detail context */
.training-hero-full{
  position:relative;
  width:100%;
  height:480px;
  overflow:hidden;
  background:var(--ink);
}
.training-hero-full .bs-track{
  display:flex; height:100%; width:300%;
  animation:bannerScroll 18s linear infinite;
}
.training-hero-full .bs-slide{
  position:relative;
  flex:1 0 calc(100%/3);
  height:100%;
}
.training-hero-full .bs-slide img{
  width:100%; height:100%;
  object-fit:cover;
}
.training-hero-full .bs-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(15,15,30,.7), rgba(15,15,30,.2));
}
.training-hero-full .bs-slide .bs-text{
  position:absolute;
  left:8vw; right:8vw;
  top:50%; transform:translateY(-50%);
  z-index:2; color:#fff;
  max-width:680px;
}
.training-hero-full .bs-slide .bs-text .eyebrow{
  display:inline-block;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange-l);
  margin-bottom:14px;
  font-weight:700;
}
.training-hero-full .bs-slide .bs-text h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:3.2rem;
  line-height:1.05;
  letter-spacing:-.025em;
  color:#fff;
  margin-bottom:14px;
}
.training-hero-full .bs-slide .bs-text h1 em{ color:var(--orange-l); font-style:italic }
.training-hero-full .bs-slide .bs-text p{
  font-size:1.02rem;
  color:rgba(255,255,255,.85);
  line-height:1.6;
  max-width:520px;
}
.training-hero-full:hover .bs-track{ animation-play-state:paused }

/* Quick info strip — 6 cols */
.tr-quick-info{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:0;
  padding:24px;
  margin:0;
  position:relative;
  z-index:5;
  box-shadow:0 -10px 30px rgba(20,20,40,.06);
}
.tr-quick-info-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  max-width:1200px;
  margin:0 auto;
}
.tr-quick-info .qi{
  text-align:center;
  padding:6px;
  border-right:1px solid var(--line-2);
}
.tr-quick-info .qi:last-child{ border-right:none }
.tr-quick-info .qi i{
  display:block;
  font-size:1.4rem;
  color:var(--orange);
  margin-bottom:6px;
}
.tr-quick-info .qi .qv{
  font-family:var(--serif);
  font-weight:600;
  font-size:1rem;
  color:var(--ink);
  line-height:1.2;
  margin-bottom:2px;
}
.tr-quick-info .qi .ql{
  font-size:.7rem;
  color:var(--mute);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:600;
}

/* About course block */
.tr-about{
  padding:60px 0 30px;
}
.tr-about-grid{
  display:grid;
  grid-template-columns:.6fr 1fr;
  gap:60px;
  align-items:start;
}
.tr-about-grid .label{
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
}
.tr-about-grid h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:2.2rem;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-top:8px;
}
.tr-about-grid h2 em{ color:var(--orange); font-style:italic }
.tr-about-grid p{
  font-size:1rem;
  line-height:1.8;
  color:var(--ink-2);
  margin-bottom:18px;
}

@media (max-width:991.98px){
  .training-hero-full{ height:380px }
  .training-hero-full .bs-slide .bs-text h1{ font-size:2.2rem }
  .tr-quick-info-grid{ grid-template-columns:repeat(3,1fr); gap:12px }
  .tr-quick-info .qi{ border-right:none; padding:10px 4px }
  .tr-quick-info .qi:nth-child(3n){ border-right:none }
  .tr-about-grid{ grid-template-columns:1fr; gap:18px }
  .tr-about-grid h2{ font-size:1.7rem }
}
@media (max-width:560px){
  .training-hero-full{ height:320px }
  .training-hero-full .bs-slide .bs-text h1{ font-size:1.7rem }
  .tr-quick-info-grid{ grid-template-columns:repeat(2,1fr) }
}


/* ============================================================
   9.  BLOG-DETAILS — Single template
   ============================================================ */
.bd-hero-banner{
  position:relative;
  width:100%;
  height:420px;
  overflow:hidden;
}
.bd-hero-banner .bs-track{
  display:flex; height:100%; width:300%;
  animation:bannerScroll 18s linear infinite;
}
.bd-hero-banner .bs-slide{
  position:relative; flex:1 0 calc(100%/3); height:100%;
}
.bd-hero-banner .bs-slide img{
  width:100%; height:100%; object-fit:cover;
}
.bd-hero-banner .bs-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(15,15,30,.55), rgba(15,15,30,.15));
}
.bd-hero-banner .bs-slide .bs-text{
  position:absolute; left:8vw; right:8vw; top:50%;
  transform:translateY(-50%); z-index:2; color:#fff; max-width:640px;
}
.bd-hero-banner .bs-slide .bs-text .eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange-l); margin-bottom:10px;
  display:inline-block; font-weight:700;
}
.bd-hero-banner .bs-slide .bs-text h2{
  font-family:var(--serif); font-weight:500; font-size:2.2rem;
  line-height:1.15; color:#fff; letter-spacing:-.015em;
}
.bd-hero-banner:hover .bs-track{ animation-play-state:paused }

@media (max-width:767.98px){
  .bd-hero-banner{ height:280px }
  .bd-hero-banner .bs-slide .bs-text h2{ font-size:1.45rem }
}


/* ============================================================
   END — V3 stylesheet
   ============================================================ */


/* ============================================================
   V4 — Redesigned footer + sticky-header reinforcement
   ============================================================ */

/* --- Sticky desktop header (bulletproof) --- */
.site-header,
header.site-header{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  z-index:1000;
  background:#fff;
}
/* Defensive: an ancestor with overflow:hidden/auto/scroll silently breaks
   position:sticky. The html/body fix above keeps the viewport as the scroll
   container so sticky resolves against it. */

/* --- Redesigned footer --- */
footer.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  padding:64px 0 0;
  position:relative;
  margin-top:0;
  border-top:1px solid rgba(255,255,255,.04);
}

footer.site-footer .ft-brand-block{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:18px;
}
footer.site-footer .ft-logo img{
  height:64px;
  background:transparent;
  padding:0;
  border-radius:0;
  display:block;
}
footer.site-footer .ft-brand-name{
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:600;
  color:#fff;
  line-height:1.1;
  letter-spacing:-.01em;
}
footer.site-footer .ft-brand-name small{
  display:block;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--orange);
  font-weight:600;
  margin-top:5px;
}
footer.site-footer .ft-tagline{
  text-align:center;
  max-width:760px;
  margin:0 auto 24px;
  font-size:.95rem;
  line-height:1.75;
  color:rgba(255,255,255,.72);
  padding:0 16px;
}
footer.site-footer .ft-socials{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:38px;
}
footer.site-footer .ft-socials a{
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.05rem;
  transition:all .3s var(--ease);
}
footer.site-footer .ft-socials a:hover{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(229,155,44,.35);
}
footer.site-footer .ft-divider{
  border:none;
  border-top:1px solid rgba(255,255,255,.1);
  margin:0 0 40px;
}
footer.site-footer .ft-section-title{
  text-align:center;
  font-family:var(--serif);
  font-weight:600;
  color:#fff;
  font-size:1.25rem;
  letter-spacing:.06em;
  margin:0 0 6px;
  text-transform:uppercase;
}
footer.site-footer .ft-section-title i{
  color:var(--orange);
  margin-right:10px;
  font-size:1.15rem;
  vertical-align:-2px;
}
footer.site-footer .ft-section-title::after{
  content:'';
  display:block;
  width:80px;
  height:2px;
  background:var(--orange);
  margin:12px auto 28px;
  border-radius:2px;
}
footer.site-footer .ft-link-grid{
  list-style:none;
  padding:0;
  margin:0 0 36px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px 24px;
}
footer.site-footer .ft-link-grid li{
  display:flex;
  align-items:center;
  gap:10px;
}
footer.site-footer .ft-link-grid li::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(229,155,44,.18);
}
footer.site-footer .ft-link-grid a{
  color:rgba(255,255,255,.78);
  font-size:.95rem;
  transition:color .25s;
}
footer.site-footer .ft-link-grid a:hover{
  color:var(--orange);
}

footer.site-footer .ft-bottom-strip{
  background:var(--orange);
  color:#fff;
  padding:18px 16px;
  margin-top:30px;
  text-align:center;
  font-size:.88rem;
  font-weight:500;
  line-height:1.5;
}
footer.site-footer .ft-bottom-strip a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:600;
}
footer.site-footer .ft-bottom-strip a:hover{
  color:rgba(255,255,255,.85);
}

@media (max-width: 991px){
  footer.site-footer{padding-top:0;margin-top:0}
  footer.site-footer .ft-link-grid{grid-template-columns:repeat(2,1fr);max-width:520px;margin-left:auto;margin-right:auto}
  footer.site-footer .ft-brand-name{font-size:1.45rem}
  footer.site-footer .ft-logo img{height:56px}
}
@media (max-width: 540px){
  footer.site-footer .ft-brand-block{flex-direction:column;gap:12px}
  footer.site-footer .ft-brand-name{text-align:center}
  footer.site-footer .ft-link-grid{grid-template-columns:1fr;justify-items:start;max-width:280px;gap:12px}
  footer.site-footer .ft-section-title{font-size:1.1rem}
  footer.site-footer .ft-bottom-strip{font-size:.8rem}
}


/* ============================================================
   V5 — Footer floating interior-themed vectors
   ============================================================ */

footer.site-footer{ overflow:hidden }

/* Decoration layer fills the footer behind real content */
.ft-deco{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.ft-deco svg{
  position:absolute;
  color:var(--orange);
  opacity:.18;
  filter:drop-shadow(0 0 12px rgba(229,155,44,.35));
  transition:opacity .4s ease;
}

/* Background floor-plan blueprint — very large + very faint */
.ft-deco .deco-blueprint{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:720px;
  height:720px;
  opacity:.045;
  filter:none;
  color:#FFB585;
}

/* Floating items */
.ft-deco .deco-lamp-floor   { top:38px;    left:5%;   width:62px;  opacity:.20 }
.ft-deco .deco-pendant-l    { top:0;       left:28%;  width:48px;  opacity:.22 }
.ft-deco .deco-pendant-r    { top:0;       right:28%; width:48px;  opacity:.22 }
.ft-deco .deco-plant        { top:280px;   left:3%;   width:74px;  opacity:.22 }
.ft-deco .deco-armchair     { top:340px;   right:4%;  width:96px;  opacity:.20 }
.ft-deco .deco-frame        { top:120px;   right:8%;  width:54px;  opacity:.22 }
.ft-deco .deco-lamp-table   { bottom:140px;left:8%;   width:46px;  opacity:.22 }
.ft-deco .deco-sofa         { bottom:120px;right:14%; width:140px; opacity:.16 }

/* Make sure real content sits above decorations */
footer.site-footer > .container,
footer.site-footer > .ft-bottom-strip{
  position:relative;
  z-index:2;
}

@media (max-width: 991px){
  .ft-deco .deco-pendant-l,
  .ft-deco .deco-pendant-r,
  .ft-deco .deco-frame,
  .ft-deco .deco-armchair,
  .ft-deco .deco-sofa{ display:none }
  .ft-deco .deco-lamp-floor{ width:48px; opacity:.15 }
  .ft-deco .deco-plant     { width:54px; opacity:.15 }
  .ft-deco .deco-lamp-table{ width:38px; opacity:.15 }
  .ft-deco .deco-blueprint{ width:480px; height:480px; opacity:.04 }
}
@media (max-width: 540px){
  .ft-deco .deco-lamp-floor,
  .ft-deco .deco-plant,
  .ft-deco .deco-lamp-table{ display:none }
  .ft-deco .deco-blueprint{ width:340px; height:340px }
}


/* ============================================================
   V6 — Real logo image in header / drawer / footer
   Overrides the v2.css CSS-painted wordmark, so the actual
   logo PNG is shown wherever it was placed.
   ============================================================ */

/* Re-enable the logo image */
.brand img,
.ft-brand img,
.ft-logo img,
.drawer-head img{
  display:inline-block !important;
}

/* Remove the CSS-painted "IS" badge and "Interior Studio" wordmark */
.brand::before,
.brand::after,
.ft-brand::before,
.ft-brand::after,
.drawer-head::before,
.drawer-head::after{
  display:none !important;
  content:none !important;
}

/* Header logo sizing — responsive */
.brand{
  display:inline-flex;
  align-items:center;
}
.brand img{
  height:54px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  transition:height .3s ease;
}
.site-header.scrolled .brand img{
  height:44px;
}

/* Footer logo — keep white background plate */
.ft-logo img{
  height:64px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  background:transparent;
  padding:0;
  border-radius:0;
}

/* Drawer logo */
.drawer-head img{
  height:48px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  background:#fff;
  padding:6px 10px;
  border-radius:10px;
}

/* Mobile responsive sizing */
@media (max-width: 767.98px){
  .brand img{ height:44px; max-width:160px }
  .ft-logo img{ height:56px; max-width:200px }
}
@media (max-width: 420px){
  .brand img{ height:38px; max-width:140px }
}