/* ==========================================================================
   INTERIOR STUDIO — V2 ENHANCEMENT STYLESHEET
   Loaded AFTER site.css. Overrides + new components for v2 redesign.
   --------------------------------------------------------------------------
   Sections:
     1.  New brand tokens (pastels, glass)
     2.  Logo (SVG inline) + brand wordmark
     3.  Mobile bottom nav — Innovative floating pill
     4.  Mobile header CTA (Quote button)
     5.  Footer redesign + mobile fixes (no address)
     6.  Portfolio bento grid (cleaned up)
     7.  Services zigzag grid
     8.  Trainings overlay-card grid
     9.  Service / Training detail page templates
     10. Banner carousel (auto-scroll)
     11. Blog cleanup + blog-details template
     12. Sitemap page
     13. Premium quote modal (pastel header + icon fields)
     14. Success popup (animated)
   ========================================================================== */


/* ============================================================
   1.  BRAND TOKENS — pastels, glass effects
   ============================================================ */
:root{
  --blush:#FAF0EB;
  --blush-deep:#F5E4DA;
  --mint:#EFF7F0;
  --sky:#EAF3FB;
  --sand:#FAF6EE;
  --glass-bg:rgba(255,255,255,.78);
  --glass-border:rgba(255,255,255,.55);
  --glass-shadow:0 8px 32px rgba(20,20,40,.12);
}


/* ============================================================
   2.  LOGO — Use as <span class="brand-logo">…</span>
   ============================================================ */
/* Replace <img src="logo.png"> — keeps backward compatibility but
   masks the (black) PNG with a CSS-painted wordmark/badge.        */
.brand img,
.ft-brand img,
.drawer-head img,
.modal-panel img[alt=""]{
  /* Hide original logo image — let the SVG-painted brand show */
  display:none !important;
}

/* CSS-painted brand block — shows wherever logo was */
.brand,
.ft-brand,
.drawer-head{
  position:relative;
}
.brand::before,
.ft-brand::before,
.drawer-head::before{
  content:'IS';
  display:inline-grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--orange) 0%,#ff8a3d 60%,var(--pink) 100%);
  color:#fff;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:-.04em;
  box-shadow:0 4px 14px rgba(229,155,44,.32);
  flex-shrink:0;
}
.brand::after,
.ft-brand::after,
.drawer-head::after{
  content:'Interior Studio';
  font-family:var(--serif);
  font-weight:600;
  font-size:1.15rem;
  color:var(--ink);
  letter-spacing:-.01em;
  margin-left:10px;
  white-space:nowrap;
}
.brand{display:inline-flex;align-items:center;gap:0}
.ft-brand{display:flex;align-items:center;gap:0;margin-bottom:18px}
.ft-brand::after{color:#fff}
.drawer-head{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.drawer-head::after{font-size:1.1rem}
.drawer-head .tag{flex-basis:100%;margin-top:8px;color:var(--mute);font-size:.85rem}

/* Quote modal — small pill logo */
.modal-panel .modal-brand-mark{
  width:54px;height:54px;border-radius:14px;
  background:linear-gradient(135deg,var(--orange),var(--pink));
  display:grid;place-items:center;
  color:#fff;font-family:var(--serif);font-weight:700;font-size:1.4rem;
  margin:0 auto 14px;
  box-shadow:0 8px 22px rgba(229,155,44,.28);
}


/* ============================================================
   3.  MOBILE BOTTOM NAV — Floating Pill (Innovative)
   ============================================================ */
/* Override previous bar styles — now a centered floating capsule.
   No horizontal scroll, glass-morphism, smooth animated indicator. */
.mobile-bottom-nav{
  display:none;
  position:fixed;
  left:14px; right:14px; bottom:14px; top:auto;
  margin-bottom:env(safe-area-inset-bottom);
  background:var(--glass-bg);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid var(--glass-border);
  border-radius:30px;
  box-shadow:var(--glass-shadow), 0 2px 6px rgba(0,0,0,.04);
  padding:7px 10px;
  z-index:950;
  grid-template-columns:1fr 1fr auto 1fr 1fr;
  gap:2px;
  align-items:center;
  overflow:hidden;          /* kills any horizontal scroll */
}

.mobile-bottom-nav a{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
  padding:7px 4px;
  min-width:0;
  color:var(--ink-2);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:18px;
  transition:all .3s var(--ease);
  position:relative;
}
.mobile-bottom-nav a span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  line-height:1.1;
}
.mobile-bottom-nav a i{
  font-size:1.2rem;
  line-height:1;
  transition:transform .3s var(--ease);
}
.mobile-bottom-nav a:hover{ color:var(--orange) }
.mobile-bottom-nav a:hover i{ transform:translateY(-1px) }

/* Animated active state — pill highlight */
.mobile-bottom-nav a.active{
  color:#fff;
  background:linear-gradient(135deg,var(--orange) 0%,#ff8042 100%);
  box-shadow:0 4px 12px rgba(229,155,44,.32);
}
.mobile-bottom-nav a.active::before{ display:none }      /* kill old indicator */

/* Centre CTA — floating raised pearl */
.mobile-bottom-nav a.center-cta{
  background:linear-gradient(135deg,var(--orange) 0%,var(--pink) 100%);
  color:#fff;
  border-radius:50%;
  width:54px; height:54px;
  margin:-22px 8px 0;
  padding:0;
  justify-content:center;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.85),
    0 8px 22px rgba(229,155,44,.45);
}
.mobile-bottom-nav a.center-cta i{ font-size:1.45rem }
.mobile-bottom-nav a.center-cta span{ display:none }
.mobile-bottom-nav a.center-cta:hover{
  transform:translateY(-2px);
  color:#fff;
}

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

/* Compact phones */
@media (max-width:420px){
  .mobile-bottom-nav{ left:10px; right:10px; bottom:10px; padding:6px 8px }
  .mobile-bottom-nav a{ font-size:.62rem; padding:6px 2px }
  .mobile-bottom-nav a.center-cta{ width:48px; height:48px; margin:-18px 5px 0 }
  .mobile-bottom-nav a.center-cta i{ font-size:1.25rem }
}
@media (max-width:340px){
  .mobile-bottom-nav a:not(.center-cta) span{ display:none }
  .mobile-bottom-nav a{ padding:8px 2px }
}


/* ============================================================
   4.  MOBILE HEADER CTA — Get Free Quote always visible
   ============================================================ */
@media (max-width:991.98px){
  /* Show the Get Free Quote button as compact icon-pill on mobile */
  .header-cta .btn-orange{
    display:inline-flex !important;
    padding:8px 14px;
    font-size:.78rem;
    border-radius:22px;
    gap:5px;
  }
  .header-cta .btn-orange i{ font-size:.95rem }
  .header-cta .btn-orange .cta-label{ display:inline }
}
@media (max-width:480px){
  .header-cta .btn-orange{
    padding:8px 10px;
  }
  .header-cta .btn-orange .cta-label{ display:none }   /* icon-only on small phones */
}


/* ============================================================
   5.  FOOTER — Redesign + mobile fix + remove address
   ============================================================ */
footer{
  padding-top:70px;
  padding-bottom:30px;
}
.ft-grid{
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:40px;
}
.ft-about{ max-width:340px }

/* Contact mini-cards instead of address block */
.ft-contact{ display:flex; flex-direction:column; gap:10px }
.ft-contact a{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  color:rgba(255,255,255,.85);
  font-size:.86rem;
  transition:all .3s;
}
.ft-contact a:hover{
  background:rgba(229,155,44,.15);
  border-color:rgba(229,155,44,.4);
  color:#1A1A2E;
  transform:translateX(2px);
}
.ft-contact a i{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--pink));
  border-radius:9px;
  color:#fff;
  font-size:.95rem;
  flex-shrink:0;
}
.ft-contact a span{ flex:1; min-width:0; word-break:break-word }

/* Mobile footer — clean 2-col then stacked */
@media (max-width:767.98px){
  .ft-grid{
    grid-template-columns:1fr 1fr;
    gap:32px 24px;
  }
  .ft-grid > :first-child{ grid-column:1/-1; text-align:center; }
  .ft-grid > :first-child .ft-brand{ justify-content:center }
  .ft-grid > :first-child .ft-about{ margin-left:auto; margin-right:auto; max-width:none }
  .ft-grid > :first-child .ft-soc{ justify-content:center }
  .ft-grid > :last-child{ grid-column:1/-1 }
  .ft-bot{ flex-direction:column; text-align:center; gap:10px }
  .ft-bot .links{ justify-content:center; flex-wrap:wrap }
}
@media (max-width:420px){
  .ft-grid{ grid-template-columns:1fr; text-align:center }
  .ft-grid .ft-col h4{ text-align:center }
  .ft-grid .ft-col a{ text-align:center }
  .ft-soc{ justify-content:center }
}


/* ============================================================
   6.  PORTFOLIO — Bento grid (cleaned up)
   ============================================================ */
/* Hide all clutter — sft, amount, %, fav, pc-btn */
.port-card .pc-detail,
.port-card .pc-actions,
.port-card .pc-score,
.port-card .pc-badge-top,
.port-card .pc-hover,
.port-card .portfolio-ribbon{
  display:none !important;
}

.bento-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:240px;
  gap:14px;
}
.bento-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-2);
  display:block;
  box-shadow:0 4px 18px rgba(20,20,40,.06);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bento-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 38px rgba(20,20,40,.16);
}
.bento-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.bento-card:hover img{ transform:scale(1.07) }
.bento-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,15,30,.78) 0%, rgba(15,15,30,.05) 55%, transparent 100%);
  pointer-events:none;
}
.bento-card .bc-body{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 24px;
  color:#fff;
  z-index:2;
}
.bento-card .bc-cat{
  display:inline-block;
  font-size:.66rem; font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  padding:5px 11px;
  border-radius:20px;
  margin-bottom:10px;
  color:#fff;
}
.bento-card .bc-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.45rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:#fff;
  margin:0;
}
.bento-card .bc-arrow{
  position:absolute; top:18px; right:18px;
  width:42px; height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  display:grid; place-items:center;
  color:#fff;
  font-size:1.05rem;
  z-index:2;
  opacity:0;
  transform:translate(-6px,6px);
  transition:all .35s var(--ease);
}
.bento-card:hover .bc-arrow{ opacity:1; transform:translate(0,0) }

/* Bento sizes — irregular, premium feel */
.bento-card.size-lg{ grid-column:span 2; grid-row:span 2 }
.bento-card.size-md{ grid-column:span 2; grid-row:span 1 }
.bento-card.size-tall{ grid-column:span 1; grid-row:span 2 }
.bento-card.size-sm{ grid-column:span 1; grid-row:span 1 }

@media (max-width:991.98px){
  .bento-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:220px }
  .bento-card.size-lg{ grid-column:span 2; grid-row:span 2 }
  .bento-card.size-md{ grid-column:span 2; grid-row:span 1 }
  .bento-card.size-tall{ grid-column:span 1; grid-row:span 2 }
  .bento-card.size-sm{ grid-column:span 1; grid-row:span 1 }
}
@media (max-width:560px){
  .bento-grid{ grid-template-columns:1fr; grid-auto-rows:240px; gap:12px }
  .bento-card,
  .bento-card.size-lg,
  .bento-card.size-md,
  .bento-card.size-tall,
  .bento-card.size-sm{ grid-column:span 1; grid-row:span 1 }
  .bento-card .bc-title{ font-size:1.25rem }
}


/* ============================================================
   7.  SERVICES — Zigzag editorial layout
   ============================================================ */
.zigzag{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px 60px;
  align-items:center;
  margin-bottom:90px;
}
.zigzag:nth-child(even) .zz-img{ order:2 }
.zigzag:nth-child(even) .zz-body{ order:1 }
.zz-img{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:5/4;
  box-shadow:0 24px 60px rgba(20,20,40,.14);
}
.zz-img::before{
  content:''; position:absolute; z-index:-1;
  inset:-25px;
  background:radial-gradient(circle at 30% 30%, var(--blush) 0%, transparent 65%);
}
.zz-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.zz-img:hover img{ transform:scale(1.04) }
.zz-img .zz-num{
  position:absolute; top:24px; left:24px;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.4rem;
  color:#fff;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  padding:6px 18px;
  border-radius:20px;
  z-index:2;
}
.zz-body .zz-eyebrow{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--orange);
  margin-bottom:14px;
}
.zz-body h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:2.4rem;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:18px;
}
.zz-body h3 em{ color:var(--orange); font-style:italic }
.zz-body p{
  font-size:1rem;
  color:var(--mute);
  line-height:1.75;
  margin-bottom:22px;
}
.zz-body .zz-pills{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:24px;
}
.zz-body .zz-pills span{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-3);
  padding:7px 14px;
  border-radius:20px;
  font-size:.82rem;
  font-weight:500;
  color:var(--ink-2);
}
.zz-body .zz-pills span i{ color:var(--orange); font-size:.78rem }
.zz-body .arrow-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--orange);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
}
.zz-body .arrow-link i{ transition:transform .3s }
.zz-body .arrow-link:hover i{ transform:translateX(4px) }

@media (max-width:767.98px){
  .zigzag{ grid-template-columns:1fr; gap:24px; margin-bottom:60px }
  .zigzag:nth-child(even) .zz-img,
  .zigzag:nth-child(even) .zz-body{ order:initial }
  .zz-body h3{ font-size:1.7rem }
}


/* ============================================================
   8.  TRAININGS — Innovative course cards
   ============================================================ */
.train-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.train-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 20px rgba(20,20,40,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column;
  min-height:560px;
}
.train-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(20,20,40,.16);
}
.train-card .tc-img{
  position:relative;
  height:280px;
  overflow:hidden;
}
.train-card .tc-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.train-card:hover .tc-img img{ transform:scale(1.06) }
.train-card .tc-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,15,30,.7) 0%, rgba(15,15,30,.0) 50%);
}
.train-card .tc-tags{
  position:absolute;
  bottom:18px; left:18px; right:18px;
  display:flex; flex-wrap:wrap; gap:8px;
  z-index:2;
}
.train-card .tc-tags span{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  padding:6px 12px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:600;
  backdrop-filter:blur(6px);
}
.train-card .tc-tags span i{ color:var(--orange); font-size:.78rem }
.train-card .tc-body{
  padding:28px 26px 26px;
  flex:1;
  display:flex; flex-direction:column;
}
.train-card .tc-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:.88rem;
  color:var(--orange);
  margin-bottom:6px;
  font-weight:500;
}
.train-card .tc-body h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.55rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:10px;
}
.train-card .tc-body p{
  color:var(--mute);
  font-size:.92rem;
  line-height:1.7;
  margin-bottom:18px;
  flex:1;
}
.train-card .tc-features{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:22px;
}
.train-card .tc-features li{
  display:flex; align-items:center; gap:10px;
  font-size:.86rem;
  color:var(--ink-2);
}
.train-card .tc-features li i{
  color:var(--orange);
  font-size:.95rem;
  flex-shrink:0;
}
.train-card .tc-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px;
  background:var(--ink);
  color:#fff;
  border-radius:30px;
  font-weight:600;
  font-size:.86rem;
  transition:all .3s;
  text-align:center;
}
.train-card .tc-cta:hover{
  background:var(--orange);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(229,155,44,.3);
}

@media (max-width:767.98px){
  .train-grid{ grid-template-columns:1fr; gap:22px }
  .train-card{ min-height:auto }
  .train-card .tc-img{ height:220px }
}


/* ============================================================
   9.  SERVICE / TRAINING DETAIL PAGES — common patterns
   ============================================================ */
.detail-banner{
  position:relative;
  height:440px;
  border-radius:28px;
  overflow:hidden;
  margin-bottom:50px;
  background:var(--ink);
}
.detail-banner img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.7;
}
.detail-banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(15,15,30,.7) 0%, rgba(15,15,30,.2) 70%);
}
.detail-banner .db-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center;
  padding:0 60px;
  z-index:2;
  color:#fff;
  max-width:640px;
}
.detail-banner .db-eyebrow{
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--orange-l);
  margin-bottom:14px;
}
.detail-banner h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:3.2rem;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;
  margin-bottom:14px;
}
.detail-banner h1 em{ color:var(--orange-l); font-style:italic }
.detail-banner p{
  font-size:1.05rem;
  color:rgba(255,255,255,.85);
  line-height:1.65;
  max-width:520px;
  margin-bottom:22px;
}
.detail-banner .db-meta{
  display:flex; gap:18px; flex-wrap:wrap;
}
.detail-banner .db-meta span{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.86rem;
  color:rgba(255,255,255,.9);
}
.detail-banner .db-meta i{ color:var(--orange-l); font-size:1rem }

/* Stats row */
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:60px;
}
.stat-box{
  background:var(--blush);
  border-radius:18px;
  padding:24px 20px;
  text-align:center;
  border:1px solid rgba(229,155,44,.1);
  transition:all .3s;
}
.stat-box:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(229,155,44,.16);
}
.stat-box .sb-num{
  font-family:var(--serif);
  font-weight:600;
  font-size:2.2rem;
  color:var(--orange);
  line-height:1;
  margin-bottom:6px;
}
.stat-box .sb-label{
  font-size:.82rem;
  color:var(--ink-2);
  font-weight:500;
}

/* Process steps numbered */
.proc-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.proc-step{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:18px;
  padding:28px 22px;
  position:relative;
  transition:all .3s;
}
.proc-step:hover{
  border-color:var(--orange);
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(20,20,40,.08);
}
.proc-step .ps-num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:2.6rem;
  color:var(--orange);
  line-height:1;
  margin-bottom:12px;
  opacity:.6;
}
.proc-step h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.2rem;
  margin-bottom:8px;
  color:var(--ink);
}
.proc-step p{
  font-size:.86rem;
  color:var(--mute);
  line-height:1.65;
}

/* Feature icon grid */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.feat-item{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:24px;
  display:flex; gap:16px;
  align-items:flex-start;
  transition:all .3s;
}
.feat-item:hover{
  border-color:var(--orange);
  background:linear-gradient(135deg,#fff 0%,var(--blush) 100%);
}
.feat-item .fi-icon{
  width:44px; height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--pink) 100%);
  display:grid; place-items:center;
  color:#fff; font-size:1.15rem;
  flex-shrink:0;
}
.feat-item h5{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:5px;
}
.feat-item p{
  font-size:.84rem;
  color:var(--mute);
  line-height:1.55;
}

/* Detail banner mobile */
@media (max-width:767.98px){
  .detail-banner{ height:auto; min-height:380px; border-radius:20px; margin-bottom:36px }
  .detail-banner .db-content{ padding:30px 26px }
  .detail-banner h1{ font-size:1.95rem }
  .detail-banner p{ font-size:.95rem }
  .stats-row{ grid-template-columns:repeat(2,1fr); gap:12px }
  .stat-box{ padding:18px 14px }
  .stat-box .sb-num{ font-size:1.7rem }
  .proc-steps{ grid-template-columns:1fr; gap:16px }
  .feat-grid{ grid-template-columns:1fr; gap:14px }
}


/* ============================================================
   10. AUTO-SCROLL BANNER (for blog details, service details)
   ============================================================ */
.banner-scroll{
  position:relative;
  height:340px;
  border-radius:24px;
  overflow:hidden;
  margin-bottom:46px;
  background:var(--ink);
}
.banner-scroll .bs-track{
  display:flex;
  height:100%;
  width:300%;
  animation:bannerScroll 18s linear infinite;
}
.banner-scroll .bs-slide{
  position:relative;
  flex:1 0 calc(100% / 3);
  height:100%;
}
.banner-scroll .bs-slide img{
  width:100%; height:100%;
  object-fit:cover;
}
.banner-scroll .bs-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(15,15,30,.55), rgba(15,15,30,.15));
}
.banner-scroll .bs-slide .bs-text{
  position:absolute; left:50px; top:50%;
  transform:translateY(-50%);
  z-index:2;
  color:#fff;
  max-width:520px;
}
.banner-scroll .bs-slide .bs-text .eyebrow{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange-l);
  margin-bottom:10px;
  display:block;
  font-weight:700;
}
.banner-scroll .bs-slide .bs-text h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:2.2rem;
  line-height:1.15;
  color:#fff;
  letter-spacing:-.02em;
}
@keyframes bannerScroll{
  0%   { transform:translateX(0%) }
  30%  { transform:translateX(0%) }
  35%  { transform:translateX(-33.333%) }
  65%  { transform:translateX(-33.333%) }
  70%  { transform:translateX(-66.666%) }
  98%  { transform:translateX(-66.666%) }
  100% { transform:translateX(0%) }
}
.banner-scroll:hover .bs-track{ animation-play-state:paused }

@media (max-width:767.98px){
  .banner-scroll{ height:240px; border-radius:18px }
  .banner-scroll .bs-slide .bs-text{ left:24px; right:24px; max-width:none }
  .banner-scroll .bs-slide .bs-text h2{ font-size:1.4rem }
}


/* ============================================================
   11. BLOG — Cleanup + blog-details
   ============================================================ */
/* Hide date overlay + author from blog cards */
.blog-card .bc-date,
.blog-card .blog-date,
.blog-card .bc-author,
.blog-card .bc-author-line,
.blog-meta .author,
.blog-meta .date,
.blog-meta span:has(.bi-person),
.blog-meta-row{
  display:none !important;
}
.blog-card{ position:relative }
.blog-card .bc-img{ position:relative }
.blog-card .bc-img::before,
.blog-card .bc-img::after{ display:none }    /* kill any date overlay */

/* Blog-details body content */
.blog-detail-body{
  max-width:760px;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.85;
  color:var(--ink-2);
}
.blog-detail-body h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.85rem;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:46px 0 18px;
}
.blog-detail-body h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.35rem;
  color:var(--ink);
  margin:30px 0 14px;
}
.blog-detail-body p{ margin-bottom:18px }
.blog-detail-body ul,
.blog-detail-body ol{
  margin:0 0 22px 22px;
  padding-left:8px;
}
.blog-detail-body ul li,
.blog-detail-body ol li{
  margin-bottom:10px;
  list-style:disc;
}
.blog-detail-body ol li{ list-style:decimal }
.blog-detail-body blockquote{
  margin:30px 0;
  padding:24px 28px;
  background:var(--blush);
  border-left:4px solid var(--orange);
  border-radius:0 14px 14px 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink);
  line-height:1.5;
}
.blog-detail-body img{
  width:100%;
  border-radius:18px;
  margin:30px 0;
}
.bd-takeaways{
  background:linear-gradient(135deg,var(--blush),var(--sand));
  border-radius:18px;
  padding:28px 32px;
  margin:36px 0;
  border:1px solid rgba(229,155,44,.15);
}
.bd-takeaways h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.bd-takeaways h4 i{ color:var(--orange) }
.bd-takeaways ul li{ list-style:none; padding-left:24px; position:relative; margin-bottom:8px; font-size:.96rem }
.bd-takeaways ul li::before{
  content:'\F26B';
  font-family:'bootstrap-icons';
  position:absolute; left:0; top:0;
  color:var(--orange);
  font-size:.95rem;
}


/* ============================================================
   12. SITEMAP page
   ============================================================ */
.sitemap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}
.sitemap-col h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.2rem;
  color:var(--ink);
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:2px solid var(--orange);
  display:inline-flex; align-items:center; gap:10px;
}
.sitemap-col h4 i{
  color:var(--orange);
  font-size:1.05rem;
}
.sitemap-col ul li{
  margin-bottom:10px;
}
.sitemap-col ul li a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--mute);
  font-size:.92rem;
  transition:all .25s;
  padding:3px 0;
}
.sitemap-col ul li a::before{
  content:'\F285';
  font-family:'bootstrap-icons';
  font-size:.78rem;
  color:var(--orange);
  opacity:0;
  transform:translateX(-4px);
  transition:all .25s;
}
.sitemap-col ul li a:hover{
  color:var(--orange);
  transform:translateX(4px);
}
.sitemap-col ul li a:hover::before{ opacity:1; transform:translateX(0) }

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


/* ============================================================
   13. PREMIUM QUOTE MODAL — pastel header + icon fields
   ============================================================ */
.modal-panel{
  max-width:640px;
  border-radius:28px !important;
}
.modal-pastel-head{
  background:linear-gradient(135deg, var(--blush) 0%, var(--sand) 60%, var(--mint) 100%);
  padding:38px 36px 30px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.modal-pastel-head::before{
  content:'';
  position:absolute; top:-30px; right:-30px;
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(229,155,44,.15) 0%, transparent 65%);
}
.modal-pastel-head::after{
  content:'';
  position:absolute; bottom:-40px; left:-40px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(230,74,156,.12) 0%, transparent 65%);
}
.modal-pastel-head > *{ position:relative; z-index:1 }
.modal-pastel-head h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.85rem;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.15;
}
.modal-pastel-head h3 em{ color:var(--orange); font-style:italic }
.modal-pastel-head p{
  font-size:.9rem;
  color:var(--ink-2);
  margin:0 auto;
  max-width:380px;
}
.modal-pastel-head .perks{
  display:flex; gap:18px; justify-content:center;
  margin-top:14px; flex-wrap:wrap;
}
.modal-pastel-head .perks span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem;
  color:var(--ink-2);
  font-weight:500;
}
.modal-pastel-head .perks span i{ color:var(--orange) }

.modal-form-body{
  padding:34px 36px 32px;
  background:#fff;
}
.form-section-title{
  display:flex; align-items:center; gap:14px;
  margin:18px 0 18px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
}
.form-section-title::before,
.form-section-title::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, transparent, var(--line), transparent);
}
.form-section-title:first-child{ margin-top:0 }

/* Icon-prefixed fields */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.form-grid .field{
  position:relative;
}
.form-grid .field.full{ grid-column:1/-1 }
.form-grid .field input,
.form-grid .field select,
.form-grid .field textarea{
  width:100%;
  padding:14px 14px 14px 44px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--ink);
  transition:all .3s;
}
.form-grid .field textarea{
  min-height:88px;
  resize:vertical;
  padding-top:14px;
}
.form-grid .field input:focus,
.form-grid .field select:focus,
.form-grid .field textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(229,155,44,.12);
}
.form-grid .field label{
  position:absolute;
  left:44px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  padding:0 5px;
  pointer-events:none;
  color:var(--mute);
  font-size:.92rem;
  transition:all .25s var(--ease);
}
.form-grid .field textarea ~ label{
  top:18px;
  transform:translateY(0);
}
.form-grid .field input:focus + label,
.form-grid .field input:not(:placeholder-shown) + label,
.form-grid .field select:focus + label,
.form-grid .field select:valid + label,
.form-grid .field textarea:focus + label,
.form-grid .field textarea:not(:placeholder-shown) + label{
  top:0;
  transform:translateY(-50%) scale(.85);
  color:var(--orange);
  background:#fff;
  font-weight:600;
}
.form-grid .field-icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--mute);
  font-size:1.05rem;
  pointer-events:none;
  transition:color .3s;
  z-index:2;
}
.form-grid .field textarea ~ .field-icon{
  top:18px;
  transform:translateY(0);
}
.form-grid .field input:focus ~ .field-icon,
.form-grid .field select:focus ~ .field-icon,
.form-grid .field textarea:focus ~ .field-icon{
  color:var(--orange);
}
.form-grid .field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%236B6B7B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:36px;
}
.form-grid .field select:invalid{ color:var(--mute) }

.consent{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 18px;
  font-size:.85rem;
  color:var(--mute);
}
.consent input{ width:18px; height:18px; accent-color:var(--orange) }

@media (max-width:580px){
  .modal-panel{ border-radius:20px !important }
  .modal-pastel-head{ padding:28px 22px 22px }
  .modal-pastel-head h3{ font-size:1.45rem }
  .modal-form-body{ padding:24px 22px 24px }
  .form-grid{ grid-template-columns:1fr; gap:12px }
}


/* ============================================================
   14. SUCCESS POPUP — Animated check + branded
   ============================================================ */
.quote-success{
  background:linear-gradient(180deg,#fff 0%,var(--mint) 100%) !important;
  padding:60px 40px 50px !important;
  min-height:auto !important;
}
.quote-success .circle{
  background:linear-gradient(135deg,#4caf50,#2e8b57) !important;
  position:relative;
  width:96px !important; height:96px !important;
}
.quote-success .circle i{ font-size:2.6rem !important; }
/* Confetti dots */
.quote-success .confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
}
.quote-success .confetti span{
  position:absolute;
  width:8px; height:8px;
  border-radius:2px;
  opacity:0;
  animation:confettiPop 1.4s ease-out forwards;
}
.quote-success .confetti span:nth-child(1){ top:20%; left:15%; background:var(--orange); animation-delay:.2s }
.quote-success .confetti span:nth-child(2){ top:30%; right:20%; background:var(--pink); animation-delay:.3s }
.quote-success .confetti span:nth-child(3){ top:50%; left:8%;  background:var(--yellow); animation-delay:.4s }
.quote-success .confetti span:nth-child(4){ top:60%; right:12%; background:var(--blue); animation-delay:.5s }
.quote-success .confetti span:nth-child(5){ top:75%; left:25%; background:var(--green); animation-delay:.6s }
.quote-success .confetti span:nth-child(6){ top:25%; right:35%; background:var(--purple); animation-delay:.45s }
@keyframes confettiPop{
  0%   { opacity:0; transform:translate(0,0) scale(0) rotate(0) }
  25%  { opacity:1 }
  100% { opacity:0; transform:translate(var(--tx,40px),var(--ty,80px)) scale(1) rotate(360deg) }
}
.quote-success .success-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:22px;
}
.quote-success .success-actions .btn-wa{
  background:#25D366;
  color:#fff;
  padding:13px 26px;
  border-radius:30px;
  font-weight:600;
  font-size:.9rem;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .3s;
}
.quote-success .success-actions .btn-wa:hover{
  background:#1ebe5b; color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(37,211,102,.4);
}


/* ============================================================
   END — V2 stylesheet
   ============================================================ */