/* ============================================================
   v4.css — Premium Polish Layer
   Applied across all pages. Loaded after v3.css.
   ============================================================ */


/* ============================================================
   0. CSS variables & globals
   ============================================================ */
:root{
  --orange-bright: #E59B2C;   /* slightly brighter than the existing --orange */
  --orange-glow  : #EAAA53;
  --gradient-orange: linear-gradient(135deg, #E59B2C 0%, #EAAA53 60%, #F9E5C0 100%);
  --gradient-blue  : linear-gradient(135deg, #2E8C6A 0%, #5FA88E 100%);
  --premium-shadow : 0 24px 60px -18px rgba(20,20,40,.18);
}


/* ============================================================
   1. Header polish
   ============================================================ */
/* Top strip: phone is now plain text */
.top-strip .ts-phone{
  color:#fff;
  font-weight:500;
  letter-spacing:.02em;
  font-size:.88rem;
}

/* Menu icons */
.main-nav .nav-i{
  color: var(--orange-bright);
  font-size: .95em;
  margin-right: 6px;
  transition: transform .35s var(--ease, ease);
  vertical-align: -1px;
}
.main-nav > li > a:hover .nav-i{
  transform: scale(1.18);
}

/* Sticky colorful separator line below header */
.rainbow-bar{
  height: 3px;
  background: linear-gradient(90deg,
    var(--orange-bright) 0%,
    #EAAA53 25%,
    #F2C14E 50%,
    #2E8C6A 75%,
    #E59B2C 100%);
  background-size: 200% 100%;
  animation: rainbowSlide 8s linear infinite;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  /* Sticky placement: directly below the sticky header.
     The header sits at top:0 and is roughly 80px (54 logo + ~26 padding) tall;
     using sticky with top: 80px means once the header pins to the top,
     the rainbow-bar pins right below it. */
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  z-index: 999;
}
.site-header.scrolled + .rainbow-bar,
.site-header.scrolled ~ .rainbow-bar{
  top: 72px;     /* header shrinks when scrolled, so the bar follows */
  opacity: 0 !important;          /* hidden when scrolled so it doesn't break the curved orange bar */
  pointer-events: none !important;
}
@media (max-width: 991.98px){
  .rainbow-bar{ top: 68px }
}
@keyframes rainbowSlide{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Body-scroll context: header is sticky at top:0 */
.site-header{
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
}


/* ============================================================
   2. Floating action buttons — icon-only circles + tooltip
   ============================================================ */

/* Get Free Quote — circular icon FAB */
.quote-fab-circle{
  position: fixed;
  right: 24px;
  bottom: 90px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-orange);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 14px 34px rgba(229,155,44,.4), 0 4px 12px rgba(229,155,44,.25);
  z-index: 950;
  transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease);
  border: none;
  cursor: pointer;
}
.quote-fab-circle:hover{
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 22px 48px rgba(229,155,44,.5), 0 6px 18px rgba(229,155,44,.32);
  color:#1A1A2E;
}
.quote-fab-circle::before{
  /* Pulsing soft glow */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--gradient-orange);
  z-index: -1;
  filter: blur(14px);
  opacity: .35;
  animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%, 100% { opacity: .25; transform: scale(.95); }
  50%      { opacity: .55; transform: scale(1.08); }
}

/* Call FAB */
.call-fab{
  position: fixed;
  right: 24px;
  bottom: 156px;     /* sits above quote-fab */
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 14px 34px rgba(46,140,106,.4), 0 4px 12px rgba(46,140,106,.25);
  z-index: 950;
  transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease);
}
.call-fab:hover{
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 22px 48px rgba(46,140,106,.5), 0 6px 18px rgba(46,140,106,.32);
  color: #fff;
}
.call-fab::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #5FA88E;
  animation: ripple 1.8s ease-out infinite;
  opacity: 0;
}
@keyframes ripple{
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Hover tooltip — appears to the LEFT of either FAB */
.quote-fab-circle[data-tip],
.call-fab[data-tip]{
  /* container positioning is fine; tooltip absolutely positioned via ::after */
}
.quote-fab-circle[data-tip]::after,
.call-fab[data-tip]::after{
  /* override the .call-fab ripple ::after with the tooltip on quote-fab,
     but we also need ripple to stay on call-fab. So tooltip uses ::before on quote-fab. */
}
.quote-fab-circle[data-tip]:hover::after,
.call-fab[data-tip]:hover::before{
  /* placeholder - real tooltip via the rules below */
}
/* Tooltip on quote-fab (which has no ripple) — use ::after */
.quote-fab-circle::after{
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #1A1A2E;
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.quote-fab-circle::after{
  /* small tail */
}
.quote-fab-circle:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Call-fab uses ::after for ripple - so tooltip uses a wrapper-less approach via data-attr in ::before */
/* But ::before is taken by the call-fab ripple? No — wait, call-fab uses ::after for ripple.
   Let me re-check. The call-fab CSS above uses ::after for ripple. So we can't use ::after for tooltip on call-fab.
   Move call-fab ripple to ::before instead. */
.call-fab::after{ display: none } /* turn off the inline ripple */
.call-fab::before{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #5FA88E;
  animation: ripple 1.8s ease-out infinite;
  opacity: 0;
  pointer-events: none;
}
.call-fab[data-tip]::after{
  /* re-enable as tooltip */
  display: block;
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #1A1A2E;
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border: none;        /* override the ripple border */
  animation: none;     /* override the ripple animation */
  inset: auto;         /* clear inset:-6px */
}
.call-fab[data-tip]:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 540px){
  .quote-fab-circle{ right: 14px; width: 48px; height: 48px; font-size: 1.2rem }
  .call-fab        { right: 14px; width: 48px; height: 48px; font-size: 1.1rem }
  /* Hide tooltip on touch devices — they don't have a hover state anyway */
  .quote-fab-circle::after,
  .call-fab[data-tip]::after{ display: none }
}
@media (max-width: 991.98px){
  /* sit above the floating bottom nav */
  .quote-fab-circle{ bottom: 116px }
  .call-fab        { bottom: 176px }
}


/* ============================================================
   3. Home page — section spacing reduction + horizontal sliders
   ============================================================ */
.section{
  padding: 36px 0;     /* shorter sections for a denser home layout */
}
@media (max-width: 768px){
  .section{ padding: 18px 0 }
  /* Smaller "View All" CTAs on mobile to match the denser layout */
  .btn.btn-view-cta.btn-lg,
  .btn.btn-view-cta{
    padding: 10px 20px !important;
    font-size: .82rem !important;
    line-height: 1.2;
  }
}
.section-title{
  margin-bottom: 18px;
}
.section-title h2{
  margin-bottom: 8px !important;
}
.section-title p{
  margin-bottom: 0 !important;
}
/* Slight extra tightening between consecutive home sections */
section + section{
  margin-top: 0;
}
/* Trim hero & banded sections too */
.page-hero{
  padding-top: 80px !important;
  padding-bottom: 60px !important;
}
@media (max-width: 768px){
  .page-hero{
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }
}
.quote-band{
  padding: 36px 0 !important;
}
@media (max-width: 768px){
  .quote-band{ padding: 26px 0 !important }
}

/* Trim the dark "By the numbers" band — shorter padding + tighter header */
.metrics-band{
  padding: 44px 0 !important;
}
.metrics-header{
  margin-bottom: 22px !important;
}
.metrics-header h2{
  margin: 4px 0 8px !important;
}
@media (max-width: 768px){
  .metrics-band{ padding: 30px 0 !important }
  .metrics-header{ margin-bottom: 16px !important }
}

/* Horizontal scroller on mobile for grids that overflow */
@media (max-width: 767.98px){
  .row.g-3.h-scroll-mobile,
  .row.g-4.h-scroll-mobile,
  .svc-grid.h-scroll-mobile,
  .vsvc-grid.h-scroll-mobile{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 16px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .row.g-3.h-scroll-mobile::-webkit-scrollbar,
  .row.g-4.h-scroll-mobile::-webkit-scrollbar,
  .svc-grid.h-scroll-mobile::-webkit-scrollbar,
  .vsvc-grid.h-scroll-mobile::-webkit-scrollbar{
    display: none;
  }
  .row.g-3.h-scroll-mobile > [class*="col-"],
  .row.g-4.h-scroll-mobile > [class*="col-"]{
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
  }
  .svc-grid.h-scroll-mobile > a,
  .vsvc-grid.h-scroll-mobile > a{
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}


/* ============================================================
   4. Story cards — no stars
   ============================================================ */
.story-card{ transition: all .4s var(--ease, ease) }
.story-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(20,20,40,.16);
}


/* ============================================================
   5. Modern vector service cards (Services page)
   ============================================================ */
.vsvc-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1199.98px){
  .vsvc-grid{ grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 767.98px){
  .vsvc-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px }
}
@media (max-width: 480px){
  .vsvc-grid{ grid-template-columns: 1fr; gap: 12px }
}

.vsvc-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 32px 26px 28px;
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease, ease), box-shadow .45s var(--ease, ease), border-color .3s;
}
.vsvc-card::before{
  /* colorful soft splash in the background */
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1, #E59B2C), var(--c2, #EAAA53));
  opacity: .12;
  transition: opacity .5s ease, transform .8s ease;
  z-index: -1;
}
.vsvc-card::after{
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c2, #EAAA53), var(--c1, #E59B2C));
  opacity: .08;
  transition: opacity .5s ease, transform .8s ease;
  z-index: -1;
}
.vsvc-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 28px 56px -16px rgba(20,20,40,.18);
  border-color: transparent;
  color: var(--ink);
}
.vsvc-card:hover::before{
  opacity: .22;
  transform: scale(1.15) rotate(20deg);
}
.vsvc-card:hover::after{
  opacity: .14;
  transform: scale(1.2) rotate(-15deg);
}

.vsvc-ico{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c1, #E59B2C), var(--c2, #EAAA53));
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color:#1A1A2E;
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--c1, #E59B2C) 50%, transparent);
  transition: transform .45s var(--ease, ease);
}
.vsvc-card:hover .vsvc-ico{
  transform: scale(1.08) rotate(-6deg);
}
.vsvc-ico svg{
  width: 36px;
  height: 36px;
}
.vsvc-card h3{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.vsvc-card p{
  font-size: .9rem;
  line-height: 1.6;
  color: var(--mute);
  margin: 0 0 16px;
}
.vsvc-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c1, #E59B2C);
  letter-spacing: .01em;
}
.vsvc-link i{ transition: transform .3s }
.vsvc-card:hover .vsvc-link i{ transform: translateX(5px) }


/* ============================================================
   6. Contact form — CAPTCHA & centred buttons
   ============================================================ */
.captcha-row{
  margin: 14px 0 22px;
}
.captcha-question{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FEF7E6 0%, #FCF2DF 100%);
  border: 1.5px dashed #f5c79a;
  border-radius: 14px;
  flex-wrap: wrap;
}
.captcha-label{
  font-size: .82rem;
  font-weight: 600;
  color: var(--orange-bright);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.captcha-puzzle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}
.captcha-num{
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink);
}
.captcha-op{ color: var(--orange-bright); font-weight: 700 }
.captcha-input{
  width: 64px;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid var(--orange-bright);
  border-radius: 10px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  outline: none;
  background: #fff;
}
.captcha-input:focus{
  box-shadow: 0 0 0 3px rgba(229,155,44,.18);
}
.captcha-refresh{
  background: transparent;
  border: 1px solid var(--line-2);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--mute);
  transition: all .25s ease;
  display: grid;
  place-items: center;
}
.captcha-refresh:hover{
  color: var(--orange-bright);
  border-color: var(--orange-bright);
  transform: rotate(90deg);
}
.captcha-error{
  display: none;
  color: #d12c1d;
  font-size: .82rem;
  margin-top: 8px;
  font-weight: 500;
}
.captcha-error.show{ display: block }

/* Centered button text for .btn-center */
.btn.btn-center,
.btn-center{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
}
.btn.btn-center i{ flex: 0 0 auto }
.btn.btn-center span{ display: inline-block }


/* ============================================================
   7. Careers — modal & buttons
   ============================================================ */
.apply-modal-panel{ max-width: 720px }
.modal-backdrop[data-modal="apply"]{
  position: fixed;
  inset: 0;
  background: rgba(26,26,46,.55);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modal-backdrop[data-modal="apply"].show{ display: flex }
.modal-backdrop[data-modal="apply"] .modal-panel{
  position: relative;
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.3);
  animation: modalSlideIn .35s var(--ease, ease);
}
@keyframes modalSlideIn{
  from{ opacity: 0; transform: translateY(20px) scale(.96) }
  to  { opacity: 1; transform: translateY(0) scale(1) }
}
.modal-backdrop[data-modal="apply"] .modal-form-body{
  overflow-y: auto;
  padding: 24px 28px 28px;
}
.modal-backdrop[data-modal="apply"] .modal-pastel-head{
  padding: 32px 28px 28px;
  text-align: center;
  background: linear-gradient(135deg, #FEF7E6 0%, #FCF2DF 100%);
  flex-shrink: 0;                       /* prevent flex from shrinking & clipping the heading */
  overflow: visible;                    /* ensure no clipping on text descenders */
}
.modal-backdrop[data-modal="apply"] .modal-pastel-head h3{
  font-size: 1.6rem !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
  white-space: normal;
}
.modal-backdrop[data-modal="apply"] .modal-pastel-head p{
  margin: 0 auto;
}
.modal-backdrop[data-modal="apply"] .modal-brand-mark{
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--gradient-orange);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.6rem;
  margin: 0 auto 12px;
  box-shadow: 0 10px 24px rgba(229,155,44,.32);
}
.modal-backdrop[data-modal="apply"] .modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: all .25s;
}
.modal-backdrop[data-modal="apply"] .modal-close:hover{
  background: var(--orange-bright);
  color: #fff;
  transform: scale(1.1);
}
.modal-backdrop[data-modal="apply"] .quote-success{ display: none }
.modal-backdrop[data-modal="apply"] .quote-success.show{ display: block; text-align: center; padding: 24px 0 }


/* ============================================================
   8. Footer redesign — premium, animated, centred
   ============================================================ */
footer.site-footer{
  padding-top: 80px;     /* room for curved top */
  background: var(--ink);
  position: relative;
}

/* Curved top SVG separator */
.ft-curve{
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  display: block;
  pointer-events: none;
}
.ft-curve path{
  fill: var(--ink);
}
@media (max-width: 768px){
  footer.site-footer{ padding-top: 32px }
  .ft-curve{ height: 36px }
}

/* Brand block & socials already centred — reinforce */
footer.site-footer .ft-brand-block,
footer.site-footer .ft-tagline,
footer.site-footer .ft-socials{
  text-align: center;
}

/* Bright, visible social icons on the dark footer */
footer.site-footer .ft-socials a{
  background: var(--orange);
  border: 1.5px solid var(--orange);
  color: #1A1A2E;
  font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(229,155,44,.32);
  transition: all .35s var(--ease, ease);
}
footer.site-footer .ft-socials a:hover{
  background: #fff;
  border-color: #fff;
  color: var(--orange-d);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 14px 30px rgba(229,155,44,.55);
}

/* Centred section title with line-icon-text-icon-line divider */
footer.site-footer .ft-divider-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 600;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 36px 0 24px;
  padding: 0 12px;
}
footer.site-footer .ft-divider-title i{
  color: var(--orange-bright);
  font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(229,155,44,.55);
  margin: 0 !important;          /* override base .ft-section-title i {margin-right:10px} */
}
footer.site-footer .ft-divider-title .ft-div-line{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(229,155,44,.45) 50%, rgba(255,255,255,.18) 100%);
  max-width: 200px;
}
footer.site-footer .ft-divider-title .ft-div-line:last-child{
  background: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(229,155,44,.45) 50%, transparent 100%);
}
footer.site-footer .ft-divider-title::after,
footer.site-footer .ft-divider-title::before{
  display: none !important;
  content: none !important;
}
footer.site-footer .ft-section-title.ft-divider-title{
  /* Cancel margins from base class so our flex divider stays nicely centred */
  padding: 0 12px;
}
@media (max-width: 540px){
  footer.site-footer .ft-divider-title{
    font-size: .85rem;
    gap: 8px;
  }
  footer.site-footer .ft-divider-title .ft-div-line{ max-width: 60px }
}

/* Centred link grid - balanced spacing */
footer.site-footer .ft-link-grid{
  margin: 0 auto 12px;
  max-width: 1140px;
  padding: 0 16px;
  column-gap: 32px;
  /* strictly equal quarter columns so all 3 grids line up */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-items: start;
}
footer.site-footer .ft-link-grid li{ align-items: flex-start }
footer.site-footer .ft-link-grid li::before{ margin-top: 7px }
footer.site-footer .ft-link-grid li{
  justify-content: flex-start;
}
footer.site-footer .ft-link-grid a{
  font-weight: 400;
  transition: color .3s, text-shadow .3s;
}
footer.site-footer .ft-link-grid a:hover{
  color: var(--orange-bright);
  text-shadow: 0 0 10px rgba(229,155,44,.4);
}
@media (max-width: 767px){
  footer.site-footer .ft-link-grid{
    justify-items: start !important;
    max-width: 360px;
    grid-template-columns: 1fr !important;
    column-gap: 0;
    row-gap: 11px;
    padding: 0 24px;
  }
  footer.site-footer .ft-link-grid li{ justify-content: flex-start; align-self:center }
}

/* Bottom orange strip — credit on 2 lines, slim & clean */
footer.site-footer .ft-bottom-strip{
  background: var(--gradient-orange);
  padding: 8px 16px;             /* slimmer than before (was 14px) */
  margin-top: 32px;
}
footer.site-footer .ft-bottom-content{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.35;
}
footer.site-footer .ft-credit-line{
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(26,26,46,.92);
  font-weight: 500;
}
footer.site-footer .ft-credit-brand{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.005em;
  line-height: 1.3;
}
footer.site-footer .ft-credit-brand a{
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  transition: text-shadow .25s ease;
  display: inline-block;
  position: relative;
}
footer.site-footer .ft-credit-brand a::after{
  /* Underline appears on hover */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s ease;
}
footer.site-footer .ft-credit-brand a:hover{
  color: var(--ink);
  background: transparent;
  text-shadow: 0 0 10px rgba(15,92,68,.35);
}
footer.site-footer .ft-credit-brand a:hover::after{
  transform: scaleX(1);
}
@media (max-width: 540px){
  footer.site-footer .ft-bottom-strip{ padding: 7px 14px }
  footer.site-footer .ft-credit-line{ font-size: .72rem }
  footer.site-footer .ft-credit-brand{ font-size: .9rem }
}

/* Subtle animated background motion - faster */
.ft-deco .float-a{ animation: floatA 4s ease-in-out infinite }
.ft-deco .float-b{ animation: floatB 5s ease-in-out infinite }
.ft-deco .float-c{ animation: floatC 6s ease-in-out infinite }
@keyframes floatA{
  0%, 100% { transform: translateY(0) rotate(0deg) }
  50%      { transform: translateY(-14px) rotate(4deg) }
}
@keyframes floatB{
  0%, 100% { transform: translateY(0) rotate(0deg) }
  50%      { transform: translateY(-16px) rotate(-5deg) }
}
@keyframes floatC{
  0%, 100% { transform: translateY(0) rotate(0deg) }
  50%      { transform: translateY(-12px) rotate(3deg) }
}

/* Brighter deco color and more opacity */
.ft-deco svg:not(.deco-blueprint){
  color: var(--orange-bright);
  opacity: .42;
  filter: drop-shadow(0 0 14px rgba(229,155,44,.55));
}
.ft-deco .deco-blueprint{ opacity: .085 }


/* ============================================================
   9. Premium hover & reveal animations across the site
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease, ease), transform .8s var(--ease, ease);
}
.reveal.on{
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1{ transition-delay: .12s }
.reveal.delay-2{ transition-delay: .24s }
.reveal.delay-3{ transition-delay: .36s }

/* Button glow hover for primary CTAs */
.btn-orange{
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease);
}
.btn-orange::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s ease;
}
.btn-orange:hover::before{ transform: translateX(100%) }
.btn-orange:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(229,155,44,.36);
}

/* Home page "View All ..." section CTAs — marigold filled normally, blue on hover */
.btn.btn-view-cta{
  background: var(--orange);
  color: var(--ink);
  border: 1.5px solid var(--orange);
  transition: background-color .3s var(--ease, ease), border-color .3s var(--ease, ease), transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease), color .3s var(--ease, ease);
}
.btn.btn-view-cta:hover,
.btn.btn-view-cta:focus-visible{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(46,140,106,.4);
}
.btn.btn-view-cta i{ color: inherit }


/* ============================================================
   10. Mobile bottom nav stays clear of FABs
   ============================================================ */
@media (max-width: 991.98px){
  body{ padding-bottom: 0 }
}


/* ============================================================
   11. Hide legacy decorative diamond/blockprint strips
   ============================================================ */
.block-print-top,
.block-print-bot{
  display: none !important;
}


/* ============================================================
   12. Image-based service cards (Services page redesign)
   Per latest reference: top image with floating ribbon banner,
   orange title, brief description, round Read More button.
   ============================================================ */

.isvc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 24px;
}
@media (max-width: 1199.98px){
  .isvc-grid{ grid-template-columns: repeat(2, 1fr); gap: 22px }
}
@media (max-width: 600px){
  .isvc-grid{ grid-template-columns: 1fr; gap: 18px }
}

.isvc-card{
  position: relative;
  display: block;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 6px 22px -8px rgba(20,20,40,.12);
  transition: transform .45s var(--ease, ease), box-shadow .45s var(--ease, ease);
}
.isvc-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 50px -14px rgba(20,20,40,.22);
  color: var(--ink);
}

.isvc-img{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, #fdf5ec 0%, #ffe9d6 100%);
}
.isvc-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease, ease);
}
.isvc-card:hover .isvc-img img{
  transform: scale(1.06);
}
/* Floating banner ribbon at the top */
.isvc-banner{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(229,155,44,.25);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  z-index: 2;
  max-width: calc(100% - 28px);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.isvc-banner small{
  display: block;
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 600;
  color: var(--orange-bright);
  letter-spacing: .04em;
  margin-top: 4px;
  text-transform: uppercase;
}

.isvc-body{
  padding: 24px 22px 26px;
  text-align: center;
}
.isvc-title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: var(--orange-bright);
  margin: 0 0 10px;
}
.isvc-desc{
  font-size: .9rem;
  line-height: 1.7;
  color: var(--mute);
  margin: 0 0 20px;
  min-height: 70px;
}
.isvc-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--gradient-orange);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(229,155,44,.32);
  transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.isvc-btn i{ transition: transform .3s }
.isvc-card:hover .isvc-btn{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(229,155,44,.42);
}
.isvc-card:hover .isvc-btn i{
  transform: translateX(3px);
}

/* Hide the legacy vsvc-grid in case any page still has it */
/* (not strictly needed but keeps things clean) */

@media (max-width: 600px){
  .isvc-banner{ font-size: .85rem; padding: 8px 14px }
  .isvc-title{ font-size: 1.2rem }
  .isvc-desc{ min-height: auto; font-size: .88rem }
}


/* ============================================================
   13. Footer brand block — logo only (no text)
   ============================================================ */

footer.site-footer .ft-brand-block{
  justify-content: center;
  margin-bottom: 22px;
}
footer.site-footer .ft-logo{
  display: inline-block;
}
footer.site-footer .ft-logo img{
  height: 80px;
  width: auto;
  max-width: 260px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform .35s var(--ease, ease);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
footer.site-footer .ft-logo:hover img{
  transform: translateY(-3px) scale(1.02);
}
@media (max-width: 540px){
  footer.site-footer .ft-logo img{
    height: 64px;
    max-width: 220px;
    padding: 0;
  }
}


/* ============================================================
   14. Active nav link — visibly highlighted
   ============================================================ */
.main-nav > li.active > a{
  color: var(--orange-bright) !important;
  font-weight: 600;
}
.main-nav > li.active > a .nav-i{
  color: var(--orange-bright);
  transform: scale(1.12);
}
.main-nav > li.active > a::after{
  background: var(--orange-bright) !important;
  transform: scaleX(1) !important;
  height: 3px !important;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(229,155,44,.5);
}


/* ============================================================
   15. Header — icon-above-label nav + phone button + larger logo
   ============================================================ */

/* Larger header logo */
.site-header .brand img{
  height: 64px !important;
  max-width: 220px !important;
}
/* Logo keeps the SAME size when scrolled — resizing it made the nav
   items shift left on scroll. Keep it constant so nothing moves. */
.site-header.scrolled .brand img{
  height: 64px !important;
}
@media (max-width: 767.98px){
  .site-header.scrolled .brand img{ height: 48px !important; }
}
@media (max-width: 767.98px){
  .site-header .brand img{
    height: 48px !important;
    max-width: 170px !important;
  }
}

/* Header inner spacing */
.site-header .header-inner{
  height: auto;
  min-height: 86px;
  padding: 10px 0;
  gap: 8px;
}
.site-header.scrolled .header-inner{
  min-height: 70px;
}

/* Stack each nav link's icon ABOVE the label — larger size for readability */
.main-nav{
  gap: 4px !important;
}
.main-nav > li > a{
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 12px !important;
  line-height: 1;
  font-weight: 500;
}
.main-nav > li > a .nav-i{
  font-size: 1.45rem !important;   /* was 1.15 */
  margin-right: 0 !important;
  display: block;
  line-height: 1;
}
.main-nav > li > a .nav-label{
  font-size: .88rem;                /* was .78 */
  font-weight: 600;
  letter-spacing: .02em;
  display: block;
  margin-top: 4px;
}

/* Underline indicator sits under the label */
.main-nav > li > a::after{
  bottom: 2px !important;
}

/* Phone button — solid blue with white text */
.header-cta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-phone{
  border: 1.5px solid #0F5C44;
  color: #fff;
  background: linear-gradient(135deg, #0F5C44 0%, #2E8C6A 100%);
  font-weight: 600;
  font-size: .82rem;
  padding: 8px 16px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  transition: all .3s ease;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15,92,68,.28);
}
.btn-phone:hover{
  background: linear-gradient(135deg, #0C4A37 0%, #0F5C44 100%);
  color: #fff;
  border-color: #0C4A37;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15,92,68,.45);
}
.btn-phone i{ font-size: .95rem; color: #fff }

/* Tighten Get Free Quote button so it doesn't overflow */
.header-cta .btn-orange{
  font-size: .85rem;
  padding: 9px 16px;
  white-space: nowrap;
}

/* Drop the phone button text at narrower laptop widths to ensure quote button stays visible */
@media (max-width: 1399.98px){
  .btn-phone{
    padding: 7px 12px;
    font-size: .76rem;
  }
  /* Keep the number visible — just make it more compact */
  .btn-phone .cta-label{ display: inline; font-size: .78rem }
  .btn-phone i{ font-size: .9rem }
}
@media (max-width: 1239.98px){
  /* On smaller laptop widths, the menu icon+label layout already takes a lot of room.
     Drop the phone button entirely; the number is in the top strip & drawer anyway. */
  .btn-phone{ display: none !important }
}
@media (max-width: 1199.98px){
  .main-nav > li > a{ padding: 6px 8px !important }
  .main-nav > li > a .nav-i{ font-size: 1.25rem !important }
  .main-nav > li > a .nav-label{ font-size: .8rem }
}
@media (max-width: 991.98px){
  /* Hide phone button on mobile (drawer + top strip already cover it) */
  .btn-phone{ display: none !important }
}

/* Top strip — new "Interior Studio + We Design Your Dreams" content */
.top-strip{
  background: var(--ink);
  color: rgba(255,255,255,.92);
  font-size: .85rem;
  padding: 9px 0;
  letter-spacing: .02em;
}
.top-strip .container.wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.top-strip .ts-brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: .98rem;
  color: #fff;
  letter-spacing: .01em;
}
.top-strip .ts-brand i{
  color: var(--orange-bright);
  font-size: 1.05rem;
}
.top-strip .ts-tagline{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: .98rem;
  color: var(--orange-bright);
  letter-spacing: .015em;
}


/* ============================================================
   16. Training program cards — beautified (no tick lists)
   Cleaner card with hero visual + title + description + CTA.
   ============================================================ */

.prog-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: stretch;
}
@media (max-width: 767.98px){
  .prog-grid{ grid-template-columns: 1fr; gap: 22px }
}

.prog-card{
  position: relative;
  display: flex !important;     /* override transform/offset from old styles */
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 36px -12px rgba(20,20,40,.15);
  transition: transform .45s var(--ease, ease), box-shadow .45s var(--ease, ease);
  text-decoration: none;
  color: var(--ink);
  transform: none !important;
  isolation: isolate;
}
.prog-card.offset-up,
.prog-card.offset-down{
  transform: none !important;
  margin: 0 !important;
}
.prog-card:hover{
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 60px -18px rgba(20,20,40,.25);
  color: var(--ink);
}

/* Visual hero block of the card */
.prog-card .pc-visual{
  position: relative;
  padding: 30px 28px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
  isolation: isolate;
}
.prog-card.blue-theme .pc-visual{
  background: linear-gradient(135deg, #2E8C6A 0%, #5FA88E 100%);
  color: #fff;
}
.prog-card.yellow-theme .pc-visual{
  background: linear-gradient(135deg, #F2C14E 0%, #FFD876 100%);
  color: #1A1A2E;
}

.prog-card .pc-visual .pc-tag{
  position: absolute;
  top: 18px;
  left: 22px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  z-index: 2;
}
.prog-card.yellow-theme .pc-visual .pc-tag{
  background: rgba(26,26,46,.92);
  color: #fff;
}

.prog-card .pc-visual .pc-duration{
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(0,0,0,.18);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prog-card.yellow-theme .pc-visual .pc-duration{
  background: rgba(255,255,255,.95);
  color: #1A1A2E;
}

.prog-card .pc-visual .pc-icon{
  font-size: 4.6rem;
  line-height: 1;
  opacity: .92;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.18));
  transition: transform .55s var(--ease, ease);
}
.prog-card:hover .pc-visual .pc-icon{
  transform: scale(1.12) rotate(-6deg);
}

/* Decorative corner shape (already in HTML) */
.prog-card .pc-corner{
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  opacity: .14;
  pointer-events: none;
  z-index: 1;
}
.prog-card .pc-corner svg{ width: 100%; height: 100% }

/* Body section */
.prog-card .pc-body{
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  background: #fff;
}
.prog-card .pc-body h4{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.prog-card .pc-body p{
  font-size: .95rem;
  line-height: 1.7;
  color: var(--mute);
  margin: 0;
}

/* CTA bar */
.prog-card .pc-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.prog-card .pc-cta-text{
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s ease, color .3s ease;
}
.prog-card.blue-theme .pc-cta-text{ color: #2E8C6A }
.prog-card.yellow-theme .pc-cta-text{ color: #B88500 }
.prog-card:hover .pc-cta-text{ gap: 14px }
.prog-card .pc-arrow{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  transition: transform .35s ease, background .3s ease;
}
.prog-card.blue-theme .pc-arrow{ background: #2E8C6A }
.prog-card.yellow-theme .pc-arrow{ background: #B88500; color: #fff }
.prog-card:hover .pc-arrow{
  transform: rotate(-45deg) scale(1.08);
}

@media (max-width: 540px){
  .prog-card .pc-visual{ padding: 26px 22px 28px; min-height: 170px }
  .prog-card .pc-visual .pc-icon{ font-size: 3.6rem }
  .prog-card .pc-body{ padding: 22px 22px 24px }
  .prog-card .pc-body h4{ font-size: 1.3rem }
}


/* ============================================================
   17. Portfolio cards — slimmer View Tour button
   ============================================================ */

/* Portfolio cards: button no longer stretches full width, sits centered & compact */
.pc-actions{
  padding: 14px 18px 18px !important;
  display: flex !important;
  justify-content: center !important;
}
.pc-actions .pc-btn.primary{
  flex: 0 0 auto !important;        /* don't stretch */
  width: auto !important;
  min-width: 140px;
  max-width: 180px;
  padding: 9px 22px !important;
  font-size: .82rem !important;
  border-radius: 999px !important;  /* rounded pill, more refined */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.pc-actions .pc-btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(229,155,44,.32);
}


/* ============================================================
   18. Mobile bottom nav cleanup
   Per user reference (Image 2): the two FABs (call + quote) were overlapping
   the bottom navigation bar. Hide both on mobile — bottom nav already provides
   Get Quote (centre CTA) and Contact (tab); the top strip & drawer show the
   phone number on mobile.
   ============================================================ */

@media (max-width: 991.98px){
  /* Keep both FABs visible on mobile (positioned above the bottom nav) */
  .call-fab,
  .quote-fab-circle{
    display: grid !important;
  }
}

/* Polish the mobile bottom nav — cleaner SVG bar fill + clearer tabs */
@media (max-width: 991.98px){
  .mobile-bottom-nav{
    height: 80px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
  /* Make the SVG bar pure white with a strong soft shadow */
  .mobile-bottom-nav .mbn-bar path{
    fill: #ffffff !important;
    filter: drop-shadow(0 -2px 12px rgba(0,0,0,.06)) drop-shadow(0 8px 28px rgba(0,0,0,.14)) !important;
  }
  /* Tab labels + icons in dark colour for contrast — vertically centered in the white pill */
  .mobile-bottom-nav .mbn-tab{
    color: rgba(20,20,40,.7) !important;
    padding: 18px 4px 12px !important;   /* visually centered inside the pill (top has convex-bump space) */
    justify-content: center !important;
    text-align: center;
    line-height: 1;
  }
  .mobile-bottom-nav .mbn-tab i{
    font-size: 1.2rem !important;
  }
  .mobile-bottom-nav .mbn-tab span{
    font-size: .7rem !important;
    font-weight: 500;
    margin-top: 3px;
    display: block;
    line-height: 1.1;
  }
  .mobile-bottom-nav .mbn-tab.is-active{
    color: var(--orange-bright) !important;
    font-weight: 600;
  }
  .mobile-bottom-nav .mbn-tab.is-active i{
    color: var(--orange-bright);
  }
  /* Centre Get-Quote CTA: solid orange instead of orange→pink gradient (which read as red on the screenshot) */
  .mobile-bottom-nav .mbn-cta{
    background: var(--gradient-orange) !important;
    box-shadow: 0 8px 22px rgba(229,155,44,.5) !important;
  }
  /* Tight padding below ft-bottom-strip: clears the 80px floating bottom nav with minimal buffer */
  footer{ padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important }
  footer.site-footer .ft-bottom-strip{ margin-top: 8px !important }
}

/* Even narrower phones */
@media (max-width: 420px){
  .mobile-bottom-nav{
    height: 72px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
  .mobile-bottom-nav .mbn-tab span{ font-size: .68rem !important }
  .mobile-bottom-nav .mbn-tab i{ font-size: 1.15rem !important }
  .mobile-bottom-nav .mbn-cta{
    width: 56px !important;
    height: 56px !important;
  }
  .mobile-bottom-nav .mbn-cta i{ font-size: 1.4rem !important }
}


/* ============================================================
   19. Services page — vector illustration images
   Vector SVG fills the card-image area; remove the gradient
   background since the SVG carries its own.
   ============================================================ */

.isvc-img.isvc-img-vector{
  background: transparent;
  padding: 0;
  display: block;
  aspect-ratio: 4/3;
}
.isvc-img.isvc-img-vector svg{
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .6s var(--ease, ease);
}
.isvc-card:hover .isvc-img.isvc-img-vector svg{
  transform: scale(1.04);
}
/* Hide the auto-scale on img inside vector containers (no img tag inside) */
.isvc-img.isvc-img-vector img{ display: none }

/* "Other Services" 2-card layout — wider, centered */
.isvc-grid.isvc-grid-2{
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px){
  .isvc-grid.isvc-grid-2{ grid-template-columns: 1fr }
}


/* ============================================================
   20. Page hero — reduce top/bottom padding (was 120px / 80px)
   Per Image 3 reference: tighter banner.
   ============================================================ */

.page-hero{
  padding: 60px 0 50px !important;
}
@media (max-width: 768px){
  .page-hero{ padding: 50px 0 40px !important }
}
.page-hero h1{
  font-size: clamp(1.95rem, 4.2vw, 3.2rem) !important;
  margin-bottom: 6px;
}
.page-hero .script{
  font-size: 1.15rem !important;
  margin-bottom: 4px;
}
.page-hero p{
  margin: 8px auto 0;
  font-size: .98rem;
}
.page-hero .breadcrumb{
  margin-top: 14px !important;
}


/* ============================================================
   21. Gallery lightbox — bigger, branded caption
   ============================================================ */

.lb .lb-caption{
  position: absolute !important;
  bottom: -56px !important;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff !important;
  font-family: var(--serif);
  font-size: 1.05rem !important;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 0 30px;
}
.lb .lb-counter{
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .12em;
  font-size: .72rem;
  color: rgba(255,255,255,.65);
}

/* Gallery 2-level tabs are fully styled inline in gallery.html (Level 1 segmented
   control + Level 2 underline tab bar). The old chip styles were removed to stop
   !important conflicts. Do not re-add .gal-subtab rules here. */


/* ============================================================
   22. Portfolio filter chips — with icons
   ============================================================ */

.filter-chip{
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}
.filter-chip i{
  font-size: .95rem;
}


/* ============================================================
   23. Page-hero — photo background per page
   Each page sets its own background-image inline; the diamond
   pattern stays as a faint texture on top of the photo.
   ============================================================ */

.page-hero{
  position: relative;
  overflow: hidden;
}
.page-hero::before{
  /* Stronger diamond pattern visible on photo backgrounds */
  opacity: .35 !important;
  z-index: 1;
}
.page-hero > *{
  position: relative;
  z-index: 2;
}
/* Slow drift animation on the pattern */
.page-hero::before{
  animation: heroDrift 30s linear infinite;
}
@keyframes heroDrift{
  0%   { background-position: 0 0 }
  100% { background-position: 120px 0 }
}
/* Improve text readability with a subtle radial vignette */
.page-hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
  z-index: 1;
}


/* ============================================================
   24. Training cards — fresh restyle with big number + side icon
   ============================================================ */

.prog-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px !important;
  align-items: stretch;
}
@media (max-width: 767.98px){
  .prog-grid{ grid-template-columns: 1fr; gap: 22px !important }
}

.prog-card{
  position: relative;
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 36px -12px rgba(20,20,40,.14);
  transition: transform .45s var(--ease, ease), box-shadow .45s var(--ease, ease);
  text-decoration: none;
  color: var(--ink);
  transform: none !important;
  margin: 0 !important;
  isolation: isolate;
}
.prog-card:hover{
  transform: translateY(-10px) !important;
  box-shadow: 0 32px 60px -20px rgba(20,20,40,.28);
  color: var(--ink);
}

/* Top hero region */
.prog-card .pc-visual{
  position: relative;
  padding: 26px 26px 22px;
  overflow: hidden;
  isolation: isolate;
  height: auto !important;     /* override the inline 240px height */
  display: block !important;
}
.prog-card.blue-theme .pc-visual{
  background: linear-gradient(135deg, #2E8C6A 0%, #5FA88E 100%) !important;
  color: #fff;
}
.prog-card.yellow-theme .pc-visual{
  background: linear-gradient(135deg, #F2C14E 0%, #FFD876 100%) !important;
  color: #1A1A2E;
}
.prog-card .pc-visual::before,
.prog-card .pc-visual::after{
  display: none !important;     /* override the old gradient sparkles + clip-path */
}

/* Big 01 / 02 number */
.prog-card .pc-number{
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: var(--serif);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.prog-card.blue-theme .pc-number{ color: rgba(255,255,255,.18) }
.prog-card.yellow-theme .pc-number{ color: rgba(26,26,46,.16) }

/* Top-left tag pill */
.prog-card .pc-tag{
  position: relative !important;
  display: inline-block;
  top: auto !important;
  left: auto !important;
  background: rgba(255,255,255,.96);
  color: #1A1A2E;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 8px;
}
.prog-card.yellow-theme .pc-tag{
  background: rgba(26,26,46,.92);
  color: #fff;
}
.prog-card .pc-duration{
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  top: auto !important;
  right: auto !important;
  background: rgba(0,0,0,.18);
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.prog-card.yellow-theme .pc-duration{
  background: rgba(255,255,255,.95);
  color: #1A1A2E;
}

/* Title row with side-by-side icon */
.prog-card .pc-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.prog-card .pc-icon-wrap{
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  font-size: 2rem;
  transition: transform .55s var(--ease, ease);
  border: 1.5px solid rgba(255,255,255,.3);
}
.prog-card.yellow-theme .pc-icon-wrap{
  background: rgba(26,26,46,.12);
  border-color: rgba(26,26,46,.22);
  color: #1A1A2E;
}
.prog-card.blue-theme .pc-icon-wrap{ color: #fff }
.prog-card:hover .pc-icon-wrap{
  transform: scale(1.08) rotate(-6deg);
}
.prog-card .pc-title-wrap h4{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: -.01em;
  margin: 0 !important;
  line-height: 1.15;
}
.prog-card.blue-theme h4{ color: #fff }
.prog-card.yellow-theme h4{ color: #1A1A2E }
.prog-card .pc-sub{
  display: block;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: .01em;
}
.prog-card.blue-theme .pc-sub{ color: rgba(255,255,255,.88) }
.prog-card.yellow-theme .pc-sub{ color: rgba(26,26,46,.72) }

/* Body */
.prog-card .pc-body{
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  background: #fff;
}
.prog-card .pc-body p{
  font-size: .92rem;
  line-height: 1.7;
  color: var(--mute);
  margin: 0;
}

/* Enroll Now pill */
.prog-card .pc-enroll{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .87rem;
  letter-spacing: .01em;
  color: #fff;
  transition: transform .3s ease, gap .3s ease, box-shadow .3s ease;
}
.prog-card.blue-theme .pc-enroll{
  background: linear-gradient(135deg, #2E8C6A 0%, #5FA88E 100%);
  box-shadow: 0 10px 24px -6px rgba(46,140,106,.42);
}
.prog-card.yellow-theme .pc-enroll{
  background: linear-gradient(135deg, #B88500 0%, #DCA728 100%);
  box-shadow: 0 10px 24px -6px rgba(184,133,0,.4);
}
.prog-card:hover .pc-enroll{
  transform: translateY(-2px);
  gap: 14px;
}
.prog-card .pc-enroll i{ transition: transform .3s }
.prog-card:hover .pc-enroll i{ transform: translateX(3px) }

@media (max-width: 540px){
  .prog-card .pc-visual{ padding: 22px 22px 20px }
  .prog-card .pc-number{ font-size: 4rem; right: 14px }
  .prog-card .pc-icon-wrap{ width: 54px; height: 54px; font-size: 1.6rem }
  .prog-card .pc-title-wrap h4{ font-size: 1.25rem }
  .prog-card .pc-body{ padding: 20px 22px 22px }
}


/* ============================================================
   25. Beautiful success popup — checkmark draw, confetti burst,
       timeline of next steps, branded action buttons
   ============================================================ */

/* Hide old check circle if any pages still reference it */
.quote-success .circle{ display: none !important }

.quote-success{
  display: none;
  text-align: center;
  padding: 36px 24px 28px;
  position: relative;
}
.quote-success.show{
  display: block;
  animation: qsEnter .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes qsEnter{
  0%   { opacity: 0; transform: scale(.85) translateY(20px) }
  100% { opacity: 1; transform: scale(1) translateY(0) }
}

/* Confetti burst dots floating above the checkmark */
.qs-confetti-burst{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 50px;
  pointer-events: none;
}
.qs-confetti-burst span{
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0;
  animation: qsConfettiPop 1.4s ease-out forwards;
}
.qs-confetti-burst span:nth-child(1)  { left: 10%; top: 30%; width: 8px; height: 8px; background: #F2C14E; animation-delay: .1s }
.qs-confetti-burst span:nth-child(2)  { left: 20%; top: 10%; width: 6px; height: 6px; background: #E59B2C; animation-delay: .15s }
.qs-confetti-burst span:nth-child(3)  { left: 28%; top: 50%; width: 7px; height: 7px; background: #E59B2C; animation-delay: .2s }
.qs-confetti-burst span:nth-child(4)  { left: 36%; top: 20%; width: 5px; height: 5px; background: #5FA88E; animation-delay: .25s }
.qs-confetti-burst span:nth-child(5)  { left: 44%; top: 40%; width: 8px; height: 8px; background: #06A77D; animation-delay: .3s }
.qs-confetti-burst span:nth-child(6)  { left: 52%; top: 10%; width: 6px; height: 6px; background: #F2C14E; animation-delay: .12s }
.qs-confetti-burst span:nth-child(7)  { left: 60%; top: 35%; width: 7px; height: 7px; background: #E59B2C; animation-delay: .22s }
.qs-confetti-burst span:nth-child(8)  { left: 68%; top: 15%; width: 5px; height: 5px; background: #E59B2C; animation-delay: .18s }
.qs-confetti-burst span:nth-child(9)  { left: 76%; top: 45%; width: 8px; height: 8px; background: #5FA88E; animation-delay: .28s }
.qs-confetti-burst span:nth-child(10) { left: 84%; top: 25%; width: 6px; height: 6px; background: #06A77D; animation-delay: .14s }
.qs-confetti-burst span:nth-child(11) { left: 92%; top: 40%; width: 7px; height: 7px; background: #F2C14E; animation-delay: .26s }
.qs-confetti-burst span:nth-child(12) { left: 6%; top: 50%; width: 5px; height: 5px; background: #E59B2C; animation-delay: .35s }
.qs-confetti-burst span:nth-child(13) { left: 16%; top: 60%; width: 6px; height: 6px; background: #E59B2C; animation-delay: .38s }
.qs-confetti-burst span:nth-child(14) { left: 80%; top: 60%; width: 7px; height: 7px; background: #5FA88E; animation-delay: .32s }
.qs-confetti-burst span:nth-child(15) { left: 90%; top: 55%; width: 8px; height: 8px; background: #06A77D; animation-delay: .4s }
@keyframes qsConfettiPop{
  0%   { opacity: 0; transform: translate(0,0) scale(0) }
  20%  { opacity: 1; transform: translate(0,-10px) scale(1.2) }
  60%  { opacity: 1; transform: translate(var(--dx, 0),-30px) scale(1) }
  100% { opacity: 0; transform: translate(var(--dx, 0),40px) scale(.8) }
}

/* Animated checkmark with growing ring + drawn tick */
.qs-checkmark{
  width: 92px;
  height: 92px;
  margin: 8px auto 22px;
  background: linear-gradient(135deg, #06A77D 0%, #3DD4A0 100%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 36px -8px rgba(6,167,125,.55), 0 0 0 8px rgba(6,167,125,.12);
  animation: qsCircle .6s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes qsCircle{
  0%   { transform: scale(.4); opacity: 0 }
  60%  { transform: scale(1.12); opacity: 1 }
  100% { transform: scale(1) }
}
.qs-checkmark svg{
  width: 60px;
  height: 60px;
}
.qs-checkmark .qs-ring{
  stroke-dasharray: 164;
  stroke-dashoffset: 164;
  animation: qsRingDraw .8s ease-out .3s forwards;
  opacity: .6;
}
.qs-checkmark .qs-tick{
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: qsTickDraw .55s ease-out .55s forwards;
}
@keyframes qsRingDraw{
  to { stroke-dashoffset: 0 }
}
@keyframes qsTickDraw{
  to { stroke-dashoffset: 0 }
}

/* Heading + sub */
.quote-success h3{
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--ink);
  animation: qsFade .5s ease-out .7s both;
}
.quote-success h3 em{
  color: var(--orange-bright);
  font-style: italic;
}
.quote-success p{
  font-size: .92rem;
  line-height: 1.7;
  color: var(--mute);
  margin: 0 0 22px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  animation: qsFade .5s ease-out .85s both;
}
@keyframes qsFade{
  0%   { opacity: 0; transform: translateY(8px) }
  100% { opacity: 1; transform: translateY(0) }
}

/* Timeline */
.qs-timeline{
  background: linear-gradient(135deg, #FEF7E6 0%, #FCF2DF 100%);
  padding: 16px 20px;
  border-radius: 14px;
  text-align: left;
  margin: 0 auto 22px;
  max-width: 340px;
  animation: qsFade .5s ease-out 1s both;
}
.qs-tl-label{
  font-size: .72rem;
  color: var(--orange-bright);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.qs-tl-row{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .85rem;
  color: #444;
  margin-bottom: 8px;
}
.qs-tl-row:last-child{ margin-bottom: 0 }
.qs-tl-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #06A77D;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(6,167,125,.18);
}

/* Action buttons */
.quote-success .success-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0;
  animation: qsFade .5s ease-out 1.15s both;
}
.quote-success .btn-wa{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: #25D366;
  color: #fff !important;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s ease;
}
.quote-success .btn-wa:hover{
  background: #1FB855;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(37,211,102,.35);
}
.quote-success .btn-wa i{ font-size: 1.05rem }
.quote-success .btn-outline-orange{
  padding: 10px 22px;
  font-size: .85rem;
  border-radius: 999px;
  font-weight: 600;
}


/* ============================================================
   26. Beautify form fields — icon prefix, focus ring, gradient submit
   ============================================================ */

/* Field with icon prefix already exists. Strengthen its appearance. */
.modal-panel .field,
.quote-card .field{
  margin-bottom: 12px;
}
.modal-panel .field input,
.modal-panel .field select,
.modal-panel .field textarea,
.quote-card .field input,
.quote-card .field select,
.quote-card .field textarea{
  padding: 14px 14px 14px 44px !important;
  border: 1.5px solid #E5E2DD !important;
  border-radius: 14px !important;
  background: #fff !important;
  font-size: .92rem !important;
  transition: all .25s ease;
  outline: none;
}
.modal-panel .field input:focus,
.modal-panel .field select:focus,
.modal-panel .field textarea:focus,
.quote-card .field input:focus,
.quote-card .field select:focus,
.quote-card .field textarea:focus{
  border-color: var(--orange-bright) !important;
  box-shadow: 0 0 0 4px rgba(229,155,44,.12) !important;
  background: #fffbf6 !important;
}
.modal-panel .field-icon,
.quote-card .field-icon{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange-bright) !important;
  font-size: 1rem;
  pointer-events: none;
  z-index: 2;
}
/* Quote-card fields don't have field-icon in markup. Don't add one — just bump padding back if no icon */
.quote-card .field:not(:has(.field-icon)) input,
.quote-card .field:not(:has(.field-icon)) select,
.quote-card .field:not(:has(.field-icon)) textarea{
  padding-left: 16px !important;
}

/* Submit button — gradient with shimmer, text centered */
form[data-quote-form] .btn-orange.btn-lg,
.modal-panel .btn-orange.btn-lg,
.quote-card .btn-orange.btn-lg{
  background: var(--gradient-orange) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 26px !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  letter-spacing: .01em;
  box-shadow: 0 12px 28px -6px rgba(229,155,44,.5) !important;
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  /* Force icon + text to sit perfectly centered */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}
form[data-quote-form] .btn-orange.btn-lg i,
.modal-panel .btn-orange.btn-lg i,
.quote-card .btn-orange.btn-lg i{
  flex: 0 0 auto;
  margin: 0 !important;
}
form[data-quote-form] .btn-orange.btn-lg span,
.modal-panel .btn-orange.btn-lg span,
.quote-card .btn-orange.btn-lg span{
  display: inline-block;
}
form[data-quote-form] .btn-orange.btn-lg:hover,
.modal-panel .btn-orange.btn-lg:hover,
.quote-card .btn-orange.btn-lg:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -6px rgba(229,155,44,.6) !important;
}

/* Form-section title — small all-caps eyebrow */
.modal-panel .form-section-title,
.quote-card .form-section-title{
  font-size: .72rem !important;
  color: var(--orange-bright) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  margin: 14px 0 12px !important;
}
.modal-panel .form-section-title:first-child,
.quote-card .form-section-title:first-child{
  margin-top: 0 !important;
}


/* ============================================================
   27. Careers — slimmer Apply Now button per job card
   ============================================================ */

.job-card a[data-open-apply],
a.btn[href*="apply"],
a.btn[data-open-apply]{
  /* Override the inline style="width:100%" from older markup */
}
/* Target the exact role-card apply buttons — solid orange normally, blue on hover */
[data-open-apply].btn.btn-outline-orange{
  width: auto !important;
  min-width: 140px;
  max-width: 180px;
  padding: 9px 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  /* Darker marigold fill + white text */
  background: linear-gradient(135deg, #C2811F 0%, #E59B2C 100%) !important;
  border: 1.5px solid #C2811F !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 14px -4px rgba(229,155,44,.35);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
[data-open-apply].btn.btn-outline-orange i,
[data-open-apply].btn.btn-outline-orange span{
  color: #fff !important;
}
[data-open-apply].btn.btn-outline-orange:hover,
[data-open-apply].btn.btn-outline-orange:focus-visible{
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -4px rgba(46,140,106,.45);
  transform: translateY(-1px);
}
[data-open-apply].btn.btn-outline-orange:hover i,
[data-open-apply].btn.btn-outline-orange:hover span,
[data-open-apply].btn.btn-outline-orange:focus-visible i,
[data-open-apply].btn.btn-outline-orange:focus-visible span{
  color: #fff !important;
}
/* Wrap container so the button sits centred */
.job-card{
  text-align: center;
}
.job-card > *{
  text-align: left;
}
.job-card > a[data-open-apply]{
  display: inline-flex !important;
  text-align: center;
}


/* ============================================================
   28. Home-page horizontal sliders (Services + Featured Projects)
   ============================================================ */

.home-slider{
  position: relative;
  padding: 0 16px;
}
.home-slider .hs-track{
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 24px;
  scroll-behavior: smooth;
}
.home-slider .hs-track::-webkit-scrollbar{ display: none }

.home-slider .hs-card{
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 6px 22px -8px rgba(20,20,40,.12);
  transition: transform .4s var(--ease, ease), box-shadow .4s var(--ease, ease);
  display: flex;
  flex-direction: column;
}
.home-slider .hs-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 44px -14px rgba(20,20,40,.22);
  color: var(--ink);
}

.home-slider .hs-img{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f4f1ed;
}
.home-slider .hs-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease, ease);
}
.home-slider .hs-card:hover .hs-img img{
  transform: scale(1.06);
}

/* "All Services" first card — colorful gradient with grid icon */
.home-slider .hs-img-all{
  background: var(--gradient-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.home-slider .hs-img-all i{
  font-size: 4rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
  transition: transform .55s ease;
}
.home-slider .hs-card:hover .hs-img-all i{
  transform: rotate(-10deg) scale(1.1);
}

/* Card body */
.home-slider .hs-body{
  padding: 18px 20px 22px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-slider .hs-title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--orange-bright);
  letter-spacing: -.01em;
  margin: 0;
}
.home-slider .hs-desc{
  font-size: .85rem;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
  flex: 1;
}
.home-slider .hs-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--gradient-orange);
  color: var(--ink);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  margin: 6px auto 0;
  box-shadow: 0 8px 18px -4px rgba(229,155,44,.4);
  transition: transform .3s ease, gap .3s ease;
}
.home-slider .hs-card:hover .hs-btn{
  transform: translateY(-2px);
  gap: 10px;
}

/* Portfolio variant — meta line + slimmer button */
.home-slider .hs-body-pf{
  text-align: left;
  padding: 14px 18px 18px;
  gap: 4px;
}
.home-slider .hs-pf-title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.home-slider .hs-pf-meta{
  font-size: .78rem;
  color: var(--mute);
  margin: 0 0 12px;
}
.home-slider .hs-pf-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--gradient-orange);
  color: var(--ink);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  align-self: flex-start;
  box-shadow: 0 6px 14px -3px rgba(229,155,44,.4);
  transition: transform .3s ease;
}
.home-slider .hs-pf-card:hover .hs-pf-btn{
  transform: translateY(-2px);
}

/* Arrows */
.home-slider .hs-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.18);
  transition: all .25s ease;
}
.home-slider .hs-arrow:hover{
  background: var(--gradient-orange);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px -6px rgba(229,155,44,.45);
}
.home-slider .hs-prev{ left: -8px }
.home-slider .hs-next{ right: -8px }
.home-slider .hs-arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 767.98px){
  .home-slider{ padding: 0 6px }
  .home-slider .hs-card{ flex-basis: 240px }
  .home-slider .hs-arrow{
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .home-slider .hs-prev{ left: -4px }
  .home-slider .hs-next{ right: -4px }
}
@media (max-width: 540px){
  .home-slider .hs-card{ flex-basis: 80% }
}


/* ============================================================
   29. Sticky bottom "Book Live Demo Class" tab
   Pinned to the bottom-right of the viewport (like a bottom CTA
   bar), always visible while scrolling.
   Only appears on training pages.
   ============================================================ */

.book-demo-tab{
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 24px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #C2811F 0%, #E59B2C 100%);
  color: #fff;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  z-index: 940;
  box-shadow: 0 12px 32px rgba(229,155,44,.45), 0 4px 12px rgba(0,0,0,.08);
  transition: all .35s var(--ease, ease);
  white-space: nowrap;
}
.book-demo-tab i{
  font-size: 1.15rem;
}
.book-demo-tab:hover{
  background: var(--blue);
  color: #fff;
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 18px 40px rgba(46,140,106,.55), 0 6px 16px rgba(0,0,0,.1);
}
/* Glowing pulse to draw attention */
.book-demo-tab::before{
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: var(--orange);
  filter: blur(14px);
  opacity: .35;
  z-index: -1;
  animation: bdPulse 3s ease-in-out infinite;
}
.book-demo-tab:hover::before{
  background: var(--blue);
}
@keyframes bdPulse{
  0%, 100% { opacity: .25; transform: scale(.96) }
  50%      { opacity: .55; transform: scale(1.04) }
}

/* Tablet/mobile — center horizontally and sit ABOVE the mobile bottom nav so the CTA is always visible */
@media (max-width: 767.98px){
  .book-demo-tab{
    left: 50%;
    right: auto;
    bottom: 150px;                /* pulled up so it clears the footer credit + mobile bottom-nav */
    transform: translateX(-50%);
    padding: 11px 22px;
    font-size: .8rem;
    letter-spacing: .04em;
    z-index: 950;                 /* above the bottom-nav pill */
  }
  .book-demo-tab:hover{
    transform: translateX(-50%) translateY(-3px);
  }
  .book-demo-tab i{ font-size: 1rem }
}
@media (max-width: 420px){
  /* Keep label visible — just trim a bit so it still fits at narrow widths */
  .book-demo-tab{
    bottom: 140px;                /* pulled up so it clears the footer credit + phone nav */
    padding: 10px 18px;
    font-size: .74rem;
    gap: 8px;
  }
}

/* B2B "Send Enquiry" pill — desktop only; on mobile the orange circle FAB is used instead */
@media (max-width: 991.98px){
  .book-demo-tab.b2b-enq{ display: none !important }
}


/* ============================================================
   30. Book Demo modal styling
   ============================================================ */

.modal-backdrop[data-modal="demo"]{
  position: fixed;
  inset: 0;
  background: rgba(26,26,46,.55);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modal-backdrop[data-modal="demo"].show{ display: flex }
.modal-backdrop[data-modal="demo"] .modal-panel.demo-modal-panel{
  position: relative;
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.3);
  animation: modalSlideIn .35s var(--ease, ease);
}
.modal-backdrop[data-modal="demo"] .modal-form-body{
  overflow-y: auto;
  padding: 24px 28px 28px;
}
.modal-backdrop[data-modal="demo"] .modal-pastel-head.demo-head{
  padding: 28px;
  text-align: center;
  background: linear-gradient(135deg, #E59B2C 0%, #F0BF7B 100%);
  color: #fff;
}
.modal-backdrop[data-modal="demo"] .modal-pastel-head.demo-head h3{
  color: #fff;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  margin: 4px 0 6px;
}
.modal-backdrop[data-modal="demo"] .modal-pastel-head.demo-head h3 em{
  color: #FFD876;
  font-style: italic;
}
.modal-backdrop[data-modal="demo"] .modal-pastel-head.demo-head p{
  color: rgba(255,255,255,.92);
  font-size: .9rem;
  margin: 0;
}
.modal-backdrop[data-modal="demo"] .modal-brand-mark.demo-mark{
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.3);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.6rem;
  margin: 0 auto 12px;
}
.modal-backdrop[data-modal="demo"] .modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: #1A1A2E;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: all .25s;
}
.modal-backdrop[data-modal="demo"] .modal-close:hover{
  background: #fff;
  transform: scale(1.1);
}
.modal-backdrop[data-modal="demo"] .quote-success{ display: none }
.modal-backdrop[data-modal="demo"] .quote-success.show{ display: block }

/* Demo modal: submit button uses the purple theme to match */
.modal-backdrop[data-modal="demo"] .btn-orange.btn-lg{
  background: linear-gradient(135deg, #E59B2C 0%, #F0BF7B 100%) !important;
  box-shadow: 0 12px 28px -6px rgba(229,155,44,.5) !important;
}
.modal-backdrop[data-modal="demo"] .btn-orange.btn-lg:hover{
  background: linear-gradient(135deg, #C2811F 0%, #E59B2C 100%) !important;
  box-shadow: 0 16px 32px -6px rgba(229,155,44,.6) !important;
}
/* Demo modal: field focus ring matches purple */
.modal-backdrop[data-modal="demo"] .field input:focus,
.modal-backdrop[data-modal="demo"] .field select:focus,
.modal-backdrop[data-modal="demo"] .field textarea:focus{
  border-color: #E59B2C !important;
  box-shadow: 0 0 0 4px rgba(229,155,44,.15) !important;
  background: #fbf7ff !important;
}
.modal-backdrop[data-modal="demo"] .field-icon{
  color: #E59B2C !important;
}
.modal-backdrop[data-modal="demo"] .form-section-title{
  color: #E59B2C !important;
}


/* ============================================================
   31. Quote modal — chip selectors for project details
   ============================================================ */

.chip-group-wrap{
  margin: 14px 0 6px;
}
.chip-group-label{
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -.005em;
}
.chip-group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-pill{
  padding: 8px 18px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  font-weight: 500;
  font-size: .85rem;
  cursor: pointer;
  transition: all .22s ease;
  font-family: inherit;
}
.chip-pill:hover{
  border-color: var(--orange-bright);
  color: var(--orange-bright);
}
.chip-pill.is-active{
  background: var(--gradient-orange);
  border-color: var(--orange-bright);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(229,155,44,.42);
}

/* Animated reveal for conditional sections */
.chip-group-wrap[data-when-property]{
  transition: opacity .3s ease;
}

/* ============================================================
   Modal pastel-head — keep its full height under flex layout
   (prevents heading text from being clipped by the form body)
   ============================================================ */
.modal-pastel-head{
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.modal-pastel-head h3{
  white-space: normal;
  word-break: normal;
}

/* ============================================================
   Contact-page info cards — compact on mobile (2 per row)
   ============================================================ */
@media (max-width: 575.98px){
  .why-card{
    padding: 16px 8px !important;
    border-radius: 16px;
    overflow: hidden;            /* belt-and-braces against any rare overflow */
  }
  .why-card .ic{
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    margin: 0 auto 8px !important;
  }
  .why-card h5{
    font-size: .95rem !important;
    margin-bottom: 4px !important;
  }
  .why-card p{
    font-size: .7rem !important;
    line-height: 1.4 !important;
    word-break: break-word;       /* let long emails wrap mid-word */
    overflow-wrap: anywhere;      /* allow break inside long tokens like emails */
    margin-bottom: 6px !important;
  }
  .why-card .arrow-link{
    font-size: .72rem !important;
    word-break: normal;           /* short labels — no need to break */
    white-space: nowrap;
  }
}

/* ============================================================
   Header nav dropdown — "Services" → Services / B2B Services
   ============================================================ */
.main-nav li.has-dropdown{
  position: relative;
}
/* Keep the dropdown-trigger anchor identical in shape to the other nav items —
   the caret floats in the top-right corner instead of stacking under the label. */
.main-nav li.has-dropdown > a{
  position: relative;
}
.main-nav li.has-dropdown .nav-caret{
  position: absolute;
  top: 6px;
  right: 2px;
  font-size: .58rem !important;
  transition: transform .25s ease;
  opacity: .55;
  pointer-events: none;
}
.main-nav li.has-dropdown:hover .nav-caret,
.main-nav li.has-dropdown:focus-within .nav-caret{
  transform: rotate(180deg);
  opacity: 1;
  color: var(--orange);
}
.main-nav .nav-dropdown{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line-2, #e5e5ea);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(26,26,46,.14), 0 4px 12px rgba(26,26,46,.06);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .25s ease, visibility .2s;
  z-index: 1200;
}
/* Reveal on hover or keyboard focus */
.main-nav li.has-dropdown:hover > .nav-dropdown,
.main-nav li.has-dropdown:focus-within > .nav-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(2px);
}
/* Invisible bridge so the dropdown stays open while the cursor moves down */
.main-nav li.has-dropdown::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.main-nav .nav-dropdown li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav .nav-dropdown a{
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 14px !important;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  border-left: 0 !important;
}
.main-nav .nav-dropdown a i{
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(46,140,106,.10);
  color: var(--blue);
  font-size: .9rem;
  flex-shrink: 0;
}
.main-nav .nav-dropdown a:hover{
  background: linear-gradient(90deg, rgba(229,155,44,.12) 0%, rgba(230,74,156,.06) 100%);
  color: var(--orange) !important;
  transform: translateX(2px);
}
.main-nav .nav-dropdown a:hover i{
  background: var(--orange);
  color: #fff;
}

/* Hide dropdown on tablet/mobile where the desktop main-nav is replaced by the drawer */
@media (max-width: 991.98px){
  .main-nav li.has-dropdown .nav-caret{ display: none }
  .main-nav .nav-dropdown{ display: none !important }
}

/* ============================================================
   Map card on contact page — rainbow top border (matches .quote-card)
   ============================================================ */
.map-card{
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.map-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(to right,
    var(--orange),
    var(--pink),
    var(--yellow),
    var(--green),
    var(--blue));
}

/* ============================================================
   Mobile drawer — polished highlights, headings, credit footer
   ============================================================ */
/* Override stale v2.css rule that made the tag text muted/invisible against the orange→pink gradient */
.drawer-head .tag{
  color: #fff !important;
  opacity: .95;
  font-size: .92rem !important;
  font-weight: 500;
  margin-top: 2px;
}

/* ============================================================
   Compact mobile drawer — fit every option on one screen,
   per-item accent colours, smaller header
   ============================================================ */
.drawer-head{
  padding: 14px 18px 14px !important;  /* trimmed from ~26px */
}
.drawer-head img{
  height: 38px !important;
  margin-bottom: 4px !important;
}
.drawer-close{
  top: 8px !important;
  right: 10px !important;
}

/* Compress nav list */
.drawer-nav{
  padding: 6px 0 8px !important;
}
.drawer-nav a:not(.btn){
  margin: 1px 8px !important;
  padding: 7px 10px !important;
  font-size: .88rem !important;
  border-left-width: 3px;
  border-radius: 8px;
}
.drawer-nav a:not(.btn) i{
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px;
  font-size: .88rem !important;
  margin-right: 2px;
}

/* Tighter section headings */
.drawer-nav .section{
  margin: 6px 8px 2px !important;
  padding: 4px 10px !important;
  font-size: .62rem !important;
  letter-spacing: .15em !important;
}

/* Smaller "Get Free Quote" button inside drawer */
.drawer-nav a.btn-orange{
  padding: 9px 14px !important;
  font-size: .85rem !important;
  margin-top: 6px;
}
.drawer-nav > div[style*="padding:20px 22px"]{
  padding: 8px 14px !important;
}

/* Compact credit footer */
.drawer-credit{
  padding: 10px 14px 12px !important;
}
.drawer-credit .dc-label{
  font-size: .68rem !important;
  margin-bottom: 1px !important;
}
.drawer-credit .dc-link{
  font-size: .85rem !important;
}

/* Visible divider between every option (skip after section headings & before the CTA) */
.drawer-nav a:not(.btn) + a:not(.btn){
  position: relative;
}
.drawer-nav a:not(.btn) + a:not(.btn)::before{
  content: '';
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 2px;                   /* thicker stroke */
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(229,155,44,0) 0%,
    rgba(229,155,44,.45) 15%,    /* soft orange tint, much more visible */
    rgba(229,155,44,.55) 50%,
    rgba(229,155,44,.45) 85%,
    rgba(229,155,44,0) 100%);
  pointer-events: none;
}
.mobile-drawer{
  display: flex;
  flex-direction: column;
}
.drawer-nav{
  flex: 1 1 auto;
  padding: 14px 0 18px !important;
}

/* Drawer links — highlighted pill style (exclude .btn so CTA keeps its fill) */
.drawer-nav a:not(.btn){
  position: relative;
  margin: 2px 12px;
  padding: 11px 14px !important;
  border-radius: 10px;
  border-left: 3px solid transparent;
  font-weight: 500;
  color: var(--ink) !important;
  background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.drawer-nav a:not(.btn):hover,
.drawer-nav a:not(.btn):focus-visible{
  background: linear-gradient(90deg, rgba(229,155,44,.10) 0%, rgba(230,74,156,.06) 100%);
  color: var(--orange) !important;
  border-left-color: var(--orange);
  transform: translateX(2px);
}
.drawer-nav a:not(.btn).active,
.drawer-nav a:not(.btn)[aria-current="page"]{
  background: linear-gradient(90deg, rgba(229,155,44,.16) 0%, rgba(230,74,156,.08) 100%);
  color: var(--orange) !important;
  border-left-color: var(--orange);
  font-weight: 600;
}

/* Drawer icons — colorful & circular accent (exclude .btn) */
.drawer-nav a:not(.btn) i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px;
  border-radius: 8px;
  background: rgba(46,140,106,.10);
  color: var(--blue) !important;
  font-size: 1rem !important;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease;
}
.drawer-nav a:not(.btn):hover i,
.drawer-nav a:not(.btn).active i,
.drawer-nav a:not(.btn)[aria-current="page"] i{
  background: var(--orange);
  color: #fff !important;
}

/* Drawer section headings — highlighted band */
.drawer-nav .section{
  margin: 14px 12px 6px !important;
  padding: 8px 14px !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--orange) !important;
  background: linear-gradient(90deg, rgba(229,155,44,.10) 0%, rgba(229,155,44,0) 100%);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
}

/* "Get Free Quote" button inside the drawer — solid orange with white text/icon */
.drawer-nav a.btn-orange,
.drawer-nav a.btn-orange:hover,
.drawer-nav a.btn-orange:focus,
.drawer-nav a.btn-orange:active{
  background: linear-gradient(135deg, #C2811F 0%, #E59B2C 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(229,155,44,.32);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.drawer-nav a.btn-orange:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.drawer-nav a.btn-orange i,
.drawer-nav a.btn-orange .cta-label{
  color: #fff !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  font-size: 1rem !important;
}

/* Drawer credit footer — marigold band with site credit */
.drawer-credit{
  margin-top: auto;
  background: linear-gradient(135deg, #C2811F 0%, #E59B2C 100%);
  color: #fff;
  text-align: center;
  padding: 18px 18px 20px;
  border-top: 0;
  font-family: var(--sans, 'Poppins', sans-serif);
  letter-spacing: .01em;
}
.drawer-credit .dc-label{
  display: block;
  font-size: .78rem;
  font-weight: 400;
  opacity: .95;
  margin-bottom: 4px;
}
.drawer-credit .dc-link{
  display: block;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
}
.drawer-credit .dc-link:hover{
  text-decoration: underline;
}

/* ============================================================
   Quote form — icon-prefixed headings & chip labels,
   Google reCAPTCHA, slimmer submit button
   ============================================================ */

/* Section-title icons */
.modal-panel .form-section-title,
.quote-card .form-section-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, rgba(229,155,44,.12) 0%, rgba(229,155,44,0) 100%);
  border-left: 3px solid var(--orange-bright, var(--orange));
  border-radius: 8px;
  width: auto;
}
.modal-panel .form-section-title i,
.quote-card .form-section-title i{
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--orange-bright, var(--orange));
  color: #fff;
  font-size: .82rem;
}
.modal-panel .form-section-title span,
.quote-card .form-section-title span{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Chip-group label icons */
.chip-group-label{
  display: flex;
  align-items: center;
  gap: 8px;
}
.chip-group-label i{
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(46,140,106,.10);
  color: var(--blue);
  font-size: .9rem;
  flex-shrink: 0;
}

/* Looking-For select option icons — render via prefix per option */
/* (option element can't host real icons; the existing field-icon on the select is enough) */

/* Google reCAPTCHA wrap */
.g-recaptcha-wrap{
  margin: 18px 0 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FEF7E6 0%, #FCF2DF 100%);
  border: 1.5px dashed #f5c79a;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;          /* center compact widget horizontally */
  gap: 12px;
  overflow: hidden;             /* clip the test-key warning banner edges */
}
.g-recap-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--orange-bright, var(--orange));
  letter-spacing: .04em;
  text-transform: uppercase;
  align-self: flex-start;        /* keep label left-aligned */
}
.g-recap-label i{
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--orange-bright, var(--orange));
  color: #fff;
  font-size: .85rem;
}
.g-recaptcha-wrap .g-recaptcha{
  /* compact widget is 164x144 — fits any phone width with room to spare */
  display: inline-block;
  max-width: 100%;
}
/* Make the iframe responsive on ultra-narrow widths */
@media (max-width: 340px){
  .g-recaptcha-wrap .g-recaptcha{ transform: scale(.92); transform-origin: center top; }
}
.g-recaptcha-wrap .captcha-error{
  display: none;
  color: #d33;
  font-size: .8rem;
  font-weight: 600;
  align-self: flex-start;
}
.g-recaptcha-wrap .captcha-error.show{ display: block }

/* File upload field — visually matches the icon-prefixed text fields */
.field.file-field{
  position: relative;
}
.field.file-field input[type="file"]{
  width: 100%;
  padding: 22px 14px 12px 44px !important;
  font-size: .85rem;
  border: 1.5px solid var(--line-2, #e5e5ea);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field.file-field input[type="file"]::file-selector-button{
  background: linear-gradient(135deg, #C2811F 0%, #E59B2C 100%);
  color: #fff;
  border: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .78rem;
  font-family: inherit;
  margin-right: 12px;
  cursor: pointer;
  transition: filter .2s ease;
}
.field.file-field input[type="file"]::file-selector-button:hover{
  filter: brightness(1.05);
}
.field.file-field input[type="file"]:focus{
  outline: none;
  border-color: var(--orange-bright, var(--orange));
  box-shadow: 0 0 0 3px rgba(229,155,44,.15);
}
/* Selected-files badge — counter shown when one or more files are picked */
.field.file-field.has-files::after{
  content: attr(data-count) " file(s) selected";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--orange);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  pointer-events: none;
}
.field.file-field label{
  position: absolute;
  top: 6px;
  left: 44px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--orange-bright, var(--orange));
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}
.field.file-field .file-hint{
  font-size: .62rem;
  font-weight: 500;
  color: var(--mute);
  letter-spacing: 0;
  text-transform: none;
}
.field.file-field .field-icon{
  z-index: 2;
}

/* Chip-pill icons (e.g. Old / New under Construction Type) */
.chip-pill{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.chip-pill i{
  font-size: .95rem;
  color: var(--blue);
  transition: color .22s ease;
}
.chip-pill:hover i,
.chip-pill.is-selected i,
.chip-pill[aria-pressed="true"] i{
  color: var(--orange-bright, var(--orange));
}

/* Slimmer submit button (was btn-lg w-100) */
.quote-submit-row{
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.btn-quote-submit{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  padding: 10px 28px !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(229,155,44,.32);
}
.btn-quote-submit i{ font-size: 1rem }


/* ============================================================
   32. QUOTE MODAL — Modern Glass-Card Redesign (v16)
   Scoped to [data-modal="quote"] so other modals are unaffected.
   ============================================================ */

/* Panel: rounded glass card with subtle border + layered shadow */
.modal-backdrop[data-modal="quote"] .modal-panel{
  background: #fff;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 50px 100px -30px rgba(40,20,60,.35),
    0 18px 40px -12px rgba(229,155,44,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
  max-width: 640px !important;
  overflow: hidden;
}

/* Close button — floating glass disc */
.modal-backdrop[data-modal="quote"] .modal-close{
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
  width: 38px !important; height: 38px !important;
  top: 14px !important; right: 14px !important;
  z-index: 10;
}

/* ---- Header: solid orange band (animated orbs disabled) ---- */
.modal-backdrop[data-modal="quote"] .modal-pastel-head{
  position: relative;
  padding: 16px 60px 14px !important;
  background: linear-gradient(135deg, var(--orange) 0%, #EAAA53 100%) !important;
  text-align: center;
  overflow: hidden;
}
.modal-backdrop[data-modal="quote"] .modal-pastel-head::before,
.modal-backdrop[data-modal="quote"] .modal-pastel-head::after{
  display: none !important;
}
@keyframes qFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(8px,-6px) scale(1.05); }
}

/* Brand mark — squircle with gradient + soft glow */
.modal-backdrop[data-modal="quote"] .modal-brand-mark{
  position: relative; z-index: 2;
  width: 64px !important; height: 64px !important;
  margin: 0 auto 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #E59B2C 0%, #ff4d8d 100%) !important;
  color:#1A1A2E !important;
  display: grid; place-items: center;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  letter-spacing: .02em;
  box-shadow:
    0 18px 36px -8px rgba(255,77,141,.5),
    0 8px 16px -4px rgba(229,155,44,.4),
    inset 0 1px 0 rgba(255,255,255,.4);
  transform: rotate(-3deg);
  transition: transform .4s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.modal-backdrop[data-modal="quote"] .modal-panel:hover .modal-brand-mark{
  transform: rotate(0deg) scale(1.05);
}

.modal-backdrop[data-modal="quote"] .modal-pastel-head h3{
  position: relative; z-index: 2;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.modal-backdrop[data-modal="quote"] .modal-pastel-head h3 em{
  font-style: italic;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #FFE3D1 !important;          /* peach highlight on the orange band */
}
.modal-backdrop[data-modal="quote"] .modal-pastel-head p{
  position: relative; z-index: 2;
  font-size: .88rem !important;
  color: #5a5570 !important;
  margin: 0 0 14px !important;
  line-height: 1.5;
}

/* Perks row — glass chips */
.modal-backdrop[data-modal="quote"] .modal-pastel-head .perks{
  position: relative; z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.modal-backdrop[data-modal="quote"] .modal-pastel-head .perks span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  color: #2d2840;
  box-shadow: 0 4px 12px -2px rgba(229,155,44,.15);
}
.modal-backdrop[data-modal="quote"] .modal-pastel-head .perks i{
  color: #E59B2C;
  font-size: .85rem;
}

/* ---- Form body ---- */
.modal-backdrop[data-modal="quote"] .modal-form-body{
  padding: 28px 28px 26px !important;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,235,220,.4) 0%, transparent 60%),
    #ffffff;
}

/* Section titles — pill-shaped badge with gradient icon */
.modal-backdrop[data-modal="quote"] .form-section-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 8px 16px 8px 8px !important;
  background: linear-gradient(135deg, rgba(229,155,44,.08) 0%, rgba(255,77,141,.06) 100%) !important;
  border: 1px solid rgba(229,155,44,.18);
  border-left: none !important;
  border-radius: 999px !important;
  margin: 22px 0 14px !important;
  width: auto;
}
.modal-backdrop[data-modal="quote"] .form-section-title:first-child{ margin-top: 0 !important; }
.modal-backdrop[data-modal="quote"] .form-section-title i{
  width: 26px !important; height: 26px !important;
  background: linear-gradient(135deg, #E59B2C 0%, #ff4d8d 100%) !important;
  color:#1A1A2E !important;
  border-radius: 50% !important;
  font-size: .8rem !important;
  box-shadow: 0 4px 10px -2px rgba(255,77,141,.4);
}
.modal-backdrop[data-modal="quote"] .form-section-title span{
  font-size: .72rem !important;
  letter-spacing: .12em !important;
  font-weight: 700 !important;
  color: #ff5e3d !important;
}

/* Fields — floating-label glass inputs */
.modal-backdrop[data-modal="quote"] .field{
  position: relative;
  margin-bottom: 14px !important;
}
.modal-backdrop[data-modal="quote"] .field input,
.modal-backdrop[data-modal="quote"] .field select,
.modal-backdrop[data-modal="quote"] .field textarea{
  width: 100%;
  padding: 16px 16px 16px 46px !important;
  border: 1.5px solid #ece8e0 !important;
  border-radius: 14px !important;
  background: #fdfcfa !important;
  font-size: .92rem !important;
  color: #1A1A2E;
  transition: all .25s ease;
  outline: none;
  font-family: inherit;
}
.modal-backdrop[data-modal="quote"] .field textarea{
  resize: vertical;
  min-height: 80px;
}
.modal-backdrop[data-modal="quote"] .field input:hover,
.modal-backdrop[data-modal="quote"] .field select:hover,
.modal-backdrop[data-modal="quote"] .field textarea:hover{
  border-color: #ffc5a8 !important;
  background: #fff !important;
}
.modal-backdrop[data-modal="quote"] .field input:focus,
.modal-backdrop[data-modal="quote"] .field select:focus,
.modal-backdrop[data-modal="quote"] .field textarea:focus{
  border-color: #E59B2C !important;
  background: #fff !important;
  box-shadow:
    0 0 0 4px rgba(229,155,44,.12),
    0 8px 22px -8px rgba(229,155,44,.25) !important;
}

/* Field icons — gradient circle accents */
.modal-backdrop[data-modal="quote"] .field-icon{
  position: absolute;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff1e6 0%, #ffe4ec 100%);
  color: #ff5e3d !important;
  border-radius: 8px;
  font-size: .85rem !important;
  z-index: 2;
  transition: all .25s ease;
}
.modal-backdrop[data-modal="quote"] .field:focus-within .field-icon{
  background: linear-gradient(135deg, #E59B2C 0%, #ff4d8d 100%);
  color:#1A1A2E !important;
  transform: translateY(-50%) scale(1.08);
}
/* Icon for textarea — anchor to top */
.modal-backdrop[data-modal="quote"] .field:has(textarea) .field-icon{
  top: 18px !important;
  transform: none;
}
.modal-backdrop[data-modal="quote"] .field:has(textarea):focus-within .field-icon{
  transform: scale(1.08);
}

/* Floating labels */
.modal-backdrop[data-modal="quote"] .field label{
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a8499;
  font-size: .92rem;
  font-weight: 400;
  pointer-events: none;
  transition: all .2s ease;
  background: transparent;
  padding: 0 4px;
}
.modal-backdrop[data-modal="quote"] .field:has(textarea) label{
  top: 18px;
  transform: none;
}
.modal-backdrop[data-modal="quote"] .field input:focus + label,
.modal-backdrop[data-modal="quote"] .field input:not(:placeholder-shown) + label,
.modal-backdrop[data-modal="quote"] .field select:focus + label,
.modal-backdrop[data-modal="quote"] .field select:valid + label,
.modal-backdrop[data-modal="quote"] .field textarea:focus + label,
.modal-backdrop[data-modal="quote"] .field textarea:not(:placeholder-shown) + label{
  top: 0 !important;
  left: 38px;
  transform: translateY(-50%) scale(.82);
  background: #fff;
  color: #ff5e3d;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ---- Chip pills — modern with gradient + glow ---- */
.modal-backdrop[data-modal="quote"] .chip-group-wrap{
  margin: 14px 0 6px !important;       /* keep groups visually separated */
}
.modal-backdrop[data-modal="quote"] .chip-group-wrap + .chip-group-wrap{
  margin-top: 14px !important;          /* uniform gap between consecutive groups */
}
.modal-backdrop[data-modal="quote"] .chip-group-label{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px !important;        /* a bit of breathing room under the label */
  font-size: .76rem !important;
  font-weight: 600;
  color: #1A1A2E;
}
.modal-backdrop[data-modal="quote"] .chip-group-label i{
  width: 22px !important; height: 22px !important;
  background: linear-gradient(135deg, #fff1e6 0%, #ffe4ec 100%) !important;
  color: #ff5e3d !important;
  border-radius: 6px;
  font-size: .76rem !important;
  display: grid;
  place-items: center;
}
.modal-backdrop[data-modal="quote"] .chip-group{
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
}
.modal-backdrop[data-modal="quote"] .chip-pill{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 11px !important;
  background: #fdfcfa !important;
  border: 1.5px solid #ece8e0 !important;
  border-radius: 8px !important;
  color: #2d2840 !important;
  font-weight: 500 !important;
  font-size: .78rem !important;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: all .25s var(--spring, cubic-bezier(.34,1.56,.64,1));
  position: relative;
}
.modal-backdrop[data-modal="quote"] .chip-pill i{
  font-size: .82rem !important;
  color: #E59B2C !important;
  transition: all .25s ease;
}
.modal-backdrop[data-modal="quote"] .chip-pill:hover{
  border-color: #ffb78a !important;
  background: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(229,155,44,.25);
}
.modal-backdrop[data-modal="quote"] .chip-pill.is-active{
  background: linear-gradient(135deg, #E59B2C 0%, #ff4d8d 100%) !important;
  border-color: transparent !important;
  color:#1A1A2E !important;
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px -6px rgba(255,77,141,.5),
    0 4px 10px -2px rgba(229,155,44,.4);
}
.modal-backdrop[data-modal="quote"] .chip-pill.is-active i{ color: #fff !important; }

/* ---- Google reCAPTCHA wrap — clean card ---- */
.modal-backdrop[data-modal="quote"] .g-recaptcha-wrap{
  margin: 22px 0 18px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #fdfcfa 0%, #FEF7E6 100%) !important;
  border: 1.5px solid #f0eae0 !important;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.modal-backdrop[data-modal="quote"] .g-recap-label{
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: .72rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  font-weight: 700;
  color: #ff5e3d !important;
}
.modal-backdrop[data-modal="quote"] .g-recap-label i{
  width: 24px !important; height: 24px !important;
  background: linear-gradient(135deg, #E59B2C 0%, #ff4d8d 100%) !important;
  color:#1A1A2E !important;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  font-size: .78rem !important;
  box-shadow: 0 4px 10px -2px rgba(255,77,141,.4);
}
.modal-backdrop[data-modal="quote"] .g-recaptcha-wrap .g-recaptcha{
  display: inline-block;
  max-width: 100%;
}
.modal-backdrop[data-modal="quote"] .g-recaptcha-wrap .captcha-error{
  color: #e63946;
  font-size: .78rem;
  font-weight: 600;
  align-self: flex-start;
}

/* ---- Submit button — premium gradient with shimmer ---- */
.modal-backdrop[data-modal="quote"] .quote-submit-row{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.modal-backdrop[data-modal="quote"] .btn-quote-submit{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 36px !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #E59B2C 0%, #ff4d8d 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color:#1A1A2E !important;
  box-shadow:
    0 14px 32px -8px rgba(255,77,141,.55),
    0 6px 14px -4px rgba(229,155,44,.4),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  position: relative;
  overflow: hidden;
  transition: all .3s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.modal-backdrop[data-modal="quote"] .btn-quote-submit::before{
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .6s ease;
}
.modal-backdrop[data-modal="quote"] .btn-quote-submit:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 38px -8px rgba(255,77,141,.65),
    0 8px 18px -4px rgba(229,155,44,.5),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.modal-backdrop[data-modal="quote"] .btn-quote-submit:hover::before{ left: 100%; }
.modal-backdrop[data-modal="quote"] .btn-quote-submit i{ font-size: 1.05rem; }

/* Mobile polish */
@media (max-width: 540px){
  .modal-backdrop[data-modal="quote"] .modal-panel{ border-radius: 22px !important; }
  .modal-backdrop[data-modal="quote"] .modal-pastel-head{ padding: 28px 20px 22px !important; }
  .modal-backdrop[data-modal="quote"] .modal-pastel-head h3{ font-size: 1.25rem !important; }
  .modal-backdrop[data-modal="quote"] .modal-form-body{ padding: 22px 18px 22px !important; }
  .modal-backdrop[data-modal="quote"] .chip-pill{ padding: 3px 10px !important; font-size: .74rem !important; }
  .modal-backdrop[data-modal="quote"] .btn-quote-submit{ padding: 13px 30px !important; }
}

/* ============================================================
   COMPACT FORMS — global tightening for the 4 long forms
   (quote, demo, apply/careers, contact). Reduces every padding
   and inter-section gap so they don't feel endless on mobile.
   ============================================================ */

/* Form body padding — modal forms */
.modal-panel .modal-form-body{
  padding: 18px 22px 22px !important;
}
.modal-backdrop[data-modal="quote"] .modal-form-body,
.modal-backdrop[data-modal="apply"] .modal-form-body,
.modal-backdrop[data-modal="demo"] .modal-form-body{
  padding: 16px 20px 20px !important;
}

/* Form fields — tighter vertical rhythm */
.modal-panel .field,
.quote-card .field{
  margin-bottom: 8px !important;
}
.modal-panel .field input,
.modal-panel .field select,
.modal-panel .field textarea,
.quote-card .field input,
.quote-card .field select,
.quote-card .field textarea{
  padding: 10px 12px 10px 40px !important;
  font-size: .88rem !important;
  border-radius: 10px !important;
}
.quote-card .field:not(:has(.field-icon)) input,
.quote-card .field:not(:has(.field-icon)) select,
.quote-card .field:not(:has(.field-icon)) textarea{
  padding: 10px 12px !important;
}
/* Field icons — keep aligned with the new smaller height */
.modal-panel .field-icon,
.quote-card .field-icon{
  left: 13px !important;
  font-size: .92rem !important;
}

/* Section headings — tighter band */
.modal-panel .form-section-title,
.quote-card .form-section-title{
  padding: 5px 11px !important;
  margin: 10px 0 8px !important;
  gap: 6px !important;
}
.modal-panel .form-section-title:first-child,
.quote-card .form-section-title:first-child{
  margin-top: 0 !important;
}
.modal-panel .form-section-title i,
.quote-card .form-section-title i{
  width: 18px !important;
  height: 18px !important;
  font-size: .72rem !important;
}
.modal-panel .form-section-title span,
.quote-card .form-section-title span{
  font-size: .7rem !important;
}

/* Chip groups */
.chip-group-wrap{
  margin: 6px 0 4px !important;
}
.chip-group-label{
  margin-bottom: 4px !important;
  font-size: .76rem !important;
  gap: 6px;
}
.chip-group-label i{
  width: 22px !important;
  height: 22px !important;
  font-size: .76rem !important;
}
.chip-group{ gap: 6px !important }
.chip-pill{
  padding: 6px 13px !important;
  font-size: .8rem !important;
  border-radius: 8px !important;
}

/* File-upload field — slightly smaller */
.field.file-field input[type="file"]{
  padding: 16px 12px 8px 40px !important;
  font-size: .8rem !important;
}
.field.file-field input[type="file"]::file-selector-button{
  padding: 4px 11px !important;
  font-size: .72rem !important;
  margin-right: 10px;
}
.field.file-field label{
  top: 4px !important;
  left: 40px !important;
  font-size: .62rem !important;
}

/* Google reCAPTCHA wrap */
.g-recaptcha-wrap{
  margin: 10px 0 10px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}
.g-recap-label{
  font-size: .72rem !important;
  gap: 6px !important;
}
.g-recap-label i{
  width: 20px !important;
  height: 20px !important;
  font-size: .76rem !important;
}

/* Submit row */
.quote-submit-row{
  margin-top: 8px !important;
}
.btn-quote-submit{
  padding: 8px 24px !important;
  font-size: .86rem !important;
}

/* Pastel head — shorter on the 4 forms */
.modal-backdrop[data-modal="quote"] .modal-pastel-head,
.modal-backdrop[data-modal="apply"] .modal-pastel-head,
.modal-backdrop[data-modal="demo"] .modal-pastel-head{
  padding: 20px 22px 16px !important;
}
.modal-backdrop[data-modal="quote"] .modal-pastel-head .modal-brand-mark,
.modal-backdrop[data-modal="apply"] .modal-pastel-head .modal-brand-mark,
.modal-backdrop[data-modal="demo"] .modal-pastel-head .modal-brand-mark{
  width: 48px !important;
  height: 48px !important;
  font-size: 1.2rem !important;
  margin: 0 auto 8px !important;
}
.modal-backdrop[data-modal="apply"] .modal-pastel-head h3,
.modal-backdrop[data-modal="demo"] .modal-pastel-head h3{
  font-size: 1.3rem !important;
  margin: 0 0 4px !important;
}
.modal-backdrop[data-modal="quote"] .modal-pastel-head h3{
  font-size: 1.3rem !important;
  margin: 0 0 4px !important;
}
.modal-pastel-head p{
  font-size: .82rem !important;
  margin: 0 auto !important;
}
.modal-pastel-head .perks{
  margin-top: 6px !important;
  gap: 10px !important;
}

/* Contact form (.quote-card) — also tighten */
.quote-card{
  padding: 22px 22px 22px !important;
}
.quote-card h3{ margin: 0 0 14px !important; font-size: 1.55rem !important; }
.quote-card .sub{ display: none !important; }

/* ============================================================
   Minimal form headers — keep only the title.
   Hides subtitle, perk pills, and the brand-mark icon across
   quote / demo / apply forms. Coloured gradient header band.
   ============================================================ */
.modal-pastel-head p,
.modal-pastel-head .perks,
.modal-pastel-head .modal-brand-mark{
  display: none !important;
}
.modal-pastel-head{
  padding: 16px 60px 14px !important;
  text-align: center;
  /* Solid orange header (subtle warm gradient kept in the orange family) */
  background: linear-gradient(135deg, var(--orange) 0%, #EAAA53 100%) !important;
}
.modal-pastel-head::before,
.modal-pastel-head::after{
  display: none !important;
}
.modal-pastel-head h3{
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.25);
}
.modal-pastel-head h3 em{
  color: #0F5C44 !important;       /* bottle-green accent on the marigold */
  font-style: italic;
}
/* Close X — white-on-translucent so it stays readable on the colored band */
.modal-backdrop .modal-close{
  background: rgba(255,255,255,.85) !important;
}

/* Slightly tighter form-grid gaps in modal forms */
.modal-panel .form-grid,
.quote-card .form-grid{
  gap: 8px !important;
  row-gap: 8px !important;
}
.modal-panel .form-grid + .form-grid,
.quote-card .form-grid + .form-grid{
  margin-top: 4px !important;
}

@media (max-width: 540px){
  .modal-pastel-head{ padding: 12px 52px 10px !important; }
  .modal-pastel-head h3{ font-size: 1.05rem !important; line-height: 1.25 !important; }
}

/* Even tighter on phones */
@media (max-width: 540px){
  .modal-backdrop[data-modal="quote"] .modal-form-body,
  .modal-backdrop[data-modal="apply"] .modal-form-body,
  .modal-backdrop[data-modal="demo"] .modal-form-body{
    padding: 14px 16px 18px !important;
  }
  .modal-backdrop[data-modal="quote"] .modal-pastel-head,
  .modal-backdrop[data-modal="apply"] .modal-pastel-head,
  .modal-backdrop[data-modal="demo"] .modal-pastel-head{
    padding: 16px 18px 14px !important;
  }
  .modal-pastel-head .modal-brand-mark{
    width: 42px !important;
    height: 42px !important;
  }
  .modal-pastel-head h3{ font-size: 1.15rem !important; }
  .modal-pastel-head p{ font-size: .78rem !important; }
  .quote-card{ padding: 18px 16px !important; }
  .quote-card h3{ font-size: 1.35rem !important; }
  .chip-pill{ padding: 5px 11px !important; font-size: .76rem !important; }
}

/* ============================================================
   V6 — Rich menu items, sticky drawer, floating bottom nav
   ============================================================ */
/* ===== Rich icon + title + description menu items ===== */
.svc-menu-item{ display:flex; align-items:center }
.svc-menu-item .smi-txt{ display:flex; flex-direction:column; line-height:1.3; gap:1px }
.svc-menu-item .smi-title{ font-weight:600; font-size:.9rem; color:var(--ink) }
.svc-menu-item .smi-desc{ font-size:.72rem; color:var(--mute); font-weight:400 }

/* gradient icon colour variants */
.svc-menu-item.smi-orange i,.svc-menu-item.smi-orange:hover i{ background:linear-gradient(135deg,#E59B2C,#E64A9C) !important; color:#1A1A2E !important }
.svc-menu-item.smi-blue   i,.svc-menu-item.smi-blue:hover   i{ background:linear-gradient(135deg,#2E8C6A,#5FA88E) !important; color:#fff !important }
.svc-menu-item.smi-purple i,.svc-menu-item.smi-purple:hover i{ background:linear-gradient(135deg,#E59B2C,#F0BF7B) !important; color:#fff !important }
.svc-menu-item.smi-green  i,.svc-menu-item.smi-green:hover  i{ background:linear-gradient(135deg,#06A77D,#27C499) !important; color:#fff !important }
.svc-menu-item.smi-pink   i,.svc-menu-item.smi-pink:hover   i{ background:linear-gradient(135deg,#E64A9C,#FF8FB3) !important; color:#fff !important }
.svc-menu-item.smi-amber  i,.svc-menu-item.smi-amber:hover  i{ background:linear-gradient(135deg,#F0A500,#F7C948) !important; color:#fff !important }

/* Desktop dropdown */
.main-nav .nav-dropdown{ min-width:268px !important }
.main-nav .nav-dropdown a.svc-menu-item{ align-items:center !important; gap:11px !important; padding:10px 14px !important }
.main-nav .nav-dropdown a.svc-menu-item .smi-desc{ white-space:normal }
.main-nav .nav-dropdown a.svc-menu-item i{
  width:40px !important; height:40px !important; border-radius:11px !important;
  font-size:1.18rem !important; color:#fff !important;
}
.main-nav .nav-dropdown a.svc-menu-item:hover .smi-title{ color:var(--orange) }

/* Mobile drawer */
.drawer-nav a.svc-menu-item:not(.btn){
  align-items:center;
  padding:7px 12px !important;
  margin:1px 12px !important;
}
.drawer-nav a.svc-menu-item:not(.btn) i{
  width:38px !important; height:38px !important; border-radius:11px !important;
  font-size:1.05rem !important; color:#fff !important;
}
.drawer-nav a.svc-menu-item:not(.btn):hover .smi-title{ color:var(--orange) }
.drawer-nav .section{
  font-size:.82rem !important;
  margin:9px 12px 5px !important;
}

/* ===== Sticky drawer: fixed header + footer, scrolling menu ===== */
.mobile-drawer{ overflow:hidden !important }
.drawer-head{
  flex-shrink:0;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center;
  text-align:center;
  padding:13px 18px 11px !important;
  position:relative;
}
.drawer-head::before,.drawer-head::after{ content:none !important }
.drawer-head .dh-logo{
  background:#fff; border-radius:11px; padding:5px 11px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.35);
  display:inline-block; margin:0 auto;
}
.drawer-head .dh-logo img{
  height:34px !important; margin:0 !important;
  background:transparent !important; padding:0 !important; box-shadow:none !important;
  display:block;
}
.drawer-head .tag{
  flex-basis:auto !important; width:100%;
  margin:6px 0 0 !important; text-align:center;
  font-family:var(--script,'Caveat',cursive) !important;
  font-size:1.15rem !important; color:#fff !important; opacity:1 !important;
  line-height:1.1;
}
.drawer-head .dh-dots{
  display:flex; gap:5px; justify-content:center; margin-top:5px;
}
.drawer-head .dh-dots span{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.55);
}
.drawer-head .dh-dots span:nth-child(2){ background:#fff; width:18px; border-radius:3px }

.drawer-nav{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  flex:1 1 auto; min-height:0;
}
.drawer-credit{
  flex-shrink:0 !important;
  margin-top:0 !important;
}

/* ===================== INNOVATIVE FLOATING BOTTOM NAV ===================== */
.mobile-bottom-nav .mbn-bar{ display:none !important }
.mobile-bottom-nav{
  height:auto !important;
  left:12px !important; right:12px !important; bottom:12px !important;
  pointer-events:none;
}
.mobile-bottom-nav .mbn-tabs{
  position:static !important; inset:auto !important;
  display:flex !important; align-items:flex-end; justify-content:space-between;
  gap:2px;
  background:#fff;
  border-radius:24px;
  padding:8px 12px 10px !important;
  box-shadow:0 14px 32px -10px rgba(26,26,46,.32), 0 3px 10px rgba(26,26,46,.08);
  border:1px solid rgba(0,0,0,.05);
  pointer-events:auto;
}
.mobile-bottom-nav .mbn-tab{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:4px !important;
  padding:4px 2px !important;
  color:var(--mute) !important;
  text-decoration:none;
  transition:color .2s;
}
.mobile-bottom-nav .mbn-tab i{
  width:42px; height:32px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem !important;
  border-radius:11px;
  transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.mobile-bottom-nav .mbn-tab span{
  font-size:.64rem !important; font-weight:600; letter-spacing:.01em;
  white-space:nowrap;
}
.mobile-bottom-nav .mbn-tab.is-active{ color:var(--orange) !important }
.mobile-bottom-nav .mbn-tab.is-active i{
  background:linear-gradient(135deg,#FFEDE3,#FFE0CC);
  color:var(--orange);
}
.mobile-bottom-nav .mbn-tab:active i{ transform:scale(.88) }

.mobile-bottom-nav .mbn-cta{
  position:relative !important;
  left:auto !important; top:auto !important;
  flex:0 0 auto;
  width:auto !important; height:auto !important;
  margin:0 4px;
  padding:4px 4px !important;
  display:flex !important; flex-direction:column;
  align-items:center; justify-content:flex-end;
  gap:4px;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  animation:none !important;
  text-decoration:none;
}
.mobile-bottom-nav .mbn-cta i{
  width:66px; height:66px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--pink));
  border:5px solid #fff;
  color:#fff; font-size:1.75rem !important;
  margin-top:-46px;
  box-shadow:0 12px 26px -6px rgba(229,155,44,.62);
  animation:mbnCtaGlow 2.6s ease-in-out infinite !important;
  transition:transform .2s var(--ease);
}
.mobile-bottom-nav .mbn-cta span{
  font-size:.64rem !important; font-weight:700; letter-spacing:.01em;
  color:var(--orange); white-space:nowrap;
}
.mobile-bottom-nav .mbn-cta:hover i,
.mobile-bottom-nav .mbn-cta:active i{
  transform:scale(1.07);
  animation-play-state:paused !important;
}
@keyframes mbnCtaGlow{
  0%,100%{ box-shadow:0 10px 22px -6px rgba(229,155,44,.55) }
  50%{ box-shadow:0 15px 32px -4px rgba(229,155,44,.9) }
}
/* Bottom-nav Services sub-menu popup */
.mobile-bottom-nav .mbn-subnav{
  position:absolute;
  left:6px; right:6px;
  bottom:calc(100% + 26px);
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 22px 50px -12px rgba(26,26,46,.45);
  padding:10px;
  display:flex; flex-direction:column; gap:5px;
  opacity:0; visibility:hidden;
  transform:translateY(14px) scale(.96); transform-origin:26% bottom;
  transition:opacity .24s var(--ease), transform .28s cubic-bezier(.34,1.4,.5,1), visibility .24s;
  pointer-events:none;
  z-index:6;
}
.mobile-bottom-nav .mbn-subnav.is-open{
  opacity:1; visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.mobile-bottom-nav .mbn-subnav::after{
  content:"";
  position:absolute; bottom:-14px; left:26%;
  width:28px; height:28px; margin-left:-14px;
  background:#fff;
  border-right:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  transform:rotate(45deg);
  border-bottom-right-radius:5px;
}
.mobile-bottom-nav .mbn-subnav-head{
  display:flex; align-items:center; gap:6px;
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute);
  padding:4px 8px 8px;
  border-bottom:1px dashed var(--line);
  margin-bottom:3px;
}
.mobile-bottom-nav .mbn-subnav-head i{ color:var(--orange); font-size:.78rem }
.mobile-bottom-nav .mbn-sub-item{
  position:relative;
  display:flex !important; flex-direction:row !important;
  align-items:center !important; gap:12px !important;
  padding:10px 12px !important; border-radius:14px;
  text-decoration:none; text-align:left;
  background:var(--bg-2);
  opacity:0; transform:translateY(10px);
  transition:background .2s, transform .2s;
}
.mobile-bottom-nav .mbn-subnav.is-open .mbn-sub-item{
  opacity:1; transform:translateY(0);
  transition:opacity .32s var(--ease), transform .32s cubic-bezier(.34,1.3,.5,1), background .2s;
}
.mobile-bottom-nav .mbn-subnav.is-open .mbn-sub-item:nth-of-type(1){ transition-delay:.05s }
.mobile-bottom-nav .mbn-subnav.is-open .mbn-sub-item:nth-of-type(2){ transition-delay:.12s }
.mobile-bottom-nav .mbn-sub-item:active{ background:#FFF1E8 }
.mobile-bottom-nav .mbn-sub-item > i:first-child{
  width:46px !important; height:46px !important; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff !important; font-size:1.2rem !important;
  margin:0 !important;
  transition:transform .2s var(--ease);
}
.mobile-bottom-nav .mbn-sub-item:active > i:first-child{ transform:scale(.92) }
.mobile-bottom-nav .mbn-sub-item.sub-orange > i:first-child{
  background:linear-gradient(135deg,#E59B2C,#E64A9C);
  box-shadow:0 6px 14px -5px rgba(229,155,44,.6);
}
.mobile-bottom-nav .mbn-sub-item.sub-blue > i:first-child{
  background:linear-gradient(135deg,#2E8C6A,#5FA88E);
  box-shadow:0 6px 14px -5px rgba(46,140,106,.55);
}
.mobile-bottom-nav .mbn-sub-item > span{
  display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;
}
.mobile-bottom-nav .mbn-sub-item strong{
  display:block; font-size:.92rem; color:var(--ink); font-weight:600; line-height:1.25;
}
.mobile-bottom-nav .mbn-sub-item small{
  display:block; font-size:.72rem; color:var(--mute); line-height:1.3;
}
.mobile-bottom-nav .mbn-sub-arrow{
  width:auto !important; height:auto !important;
  background:none !important; box-shadow:none !important;
  color:var(--mute) !important; font-size:.85rem !important;
  flex-shrink:0; margin:0 !important;
  transition:transform .2s var(--ease), color .2s;
}
.mobile-bottom-nav .mbn-sub-item:active .mbn-sub-arrow{
  transform:translateX(3px); color:var(--orange) !important;
}
@media (max-width:991.98px){
  footer.site-footer{ padding-bottom:126px !important }
}
/* Training pages — extra footer clearance so the sticky "Send Training Enquiry" CTA never overlaps footer links/credit */
@media (max-width:991.98px){
  body:has(.book-demo-tab:not(.b2b-enq)) footer.site-footer{ padding-bottom:220px !important }
}
@media (max-width:767px){
  footer.site-footer .ft-link-grid:last-of-type{
    grid-template-columns:repeat(2,1fr) !important;
    max-width:420px;
    column-gap:18px;
  }
}

/* ============================================================
   V7 — Footer wave + floating interior icons
   ============================================================ */
footer.site-footer{ border-top:0 !important }
footer.site-footer .ft-deco .deco-blueprint{ display:none !important }
footer.site-footer .ft-deco svg{ display:block !important; opacity:.34 }
footer.site-footer .ft-deco .ft-ico{
  position:absolute; color:var(--orange-l,#F0BF7B);
  opacity:.34; pointer-events:none; line-height:1;
  animation:ftIcoFloat 2.6s ease-in-out infinite;
}
footer.site-footer .ft-deco .ft-ico:nth-of-type(2n){ animation-duration:2.1s; animation-delay:-.7s }
footer.site-footer .ft-deco .ft-ico:nth-of-type(3n){ animation-duration:3.1s; animation-delay:-1.4s }
@keyframes ftIcoFloat{
  0%,100%{ transform:translate(-50%,-50%) translateY(0) rotate(0deg) }
  50%    { transform:translate(-50%,-50%) translateY(-18px) rotate(6deg) }
}
footer.site-footer .ft-deco .float-a{ animation-duration:2.3s !important }
footer.site-footer .ft-deco .float-b{ animation-duration:2.8s !important }
footer.site-footer .ft-deco .float-c{ animation-duration:3.3s !important }
footer.site-footer .ft-deco .deco-lamp-floor { top:138px !important; left:7%  !important; right:auto !important }
footer.site-footer .ft-deco .deco-pendant-l  { top:135px !important; left:40% !important; right:auto !important }
footer.site-footer .ft-deco .deco-frame      { top:145px !important; left:auto !important; right:9% !important }
footer.site-footer .ft-deco .deco-plant      { top:300px !important; left:13% !important; right:auto !important }
footer.site-footer .ft-deco .deco-armchair   { top:288px !important; left:45% !important; right:auto !important }
footer.site-footer .ft-deco .deco-pendant-r  { top:305px !important; left:auto !important; right:14% !important }
footer.site-footer .ft-deco .deco-sofa       { top:auto !important; bottom:96px  !important; left:26% !important; right:auto !important }
footer.site-footer .ft-deco .deco-lamp-table { top:auto !important; bottom:120px !important; left:auto !important; right:22% !important }

/* Desktop — spread the footer floating icons across the FULL width (same count, same size, only repositioned) */
@media (min-width:992px){
  footer.site-footer .ft-deco .bi-lamp.ft-ico        { left:8%  !important }
  footer.site-footer .ft-deco .bi-palette.ft-ico     { left:92% !important }
  footer.site-footer .ft-deco .bi-easel2.ft-ico      { left:30% !important }
  footer.site-footer .ft-deco .bi-flower1.ft-ico     { left:70% !important }
  footer.site-footer .ft-deco .bi-rulers.ft-ico      { left:4%  !important }
  footer.site-footer .ft-deco .bi-house-heart.ft-ico { left:50% !important }
  footer.site-footer .ft-deco .bi-image.ft-ico       { left:90% !important }
  footer.site-footer .ft-deco .bi-brush.ft-ico       { left:22% !important }
  footer.site-footer .ft-deco .bi-columns-gap.ft-ico { left:60% !important }
  footer.site-footer .ft-deco .bi-vinyl.ft-ico       { left:6%  !important }
}

/* ============================================================
   Sticky header — once scrolled it stays white (white menu) and
   gains a curved bottom with an orange border.
   ============================================================ */
.site-header.scrolled{
  background:#FFF3E9 !important;
  box-shadow:0 8px 22px rgba(229,155,44,.16) !important;
  border-bottom:3px solid var(--orange) !important;
  border-bottom-left-radius:42px !important;
  border-bottom-right-radius:42px !important;
}

/* ===== V8 — Residential: compact "Spaces We Design" grid ===== */
.rspace-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.rspace-tile{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  background:#fff;
  border:1px solid rgba(26,26,46,.09);
  border-radius:16px;
  box-shadow:0 6px 22px rgba(26,26,46,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rspace-tile::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:4px;
  background:var(--rsp);
  transform:scaleX(0);
  transition:transform .3s ease;
}
.rspace-tile:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(26,26,46,.12); border-color:var(--rsp); }
.rspace-tile:hover::before{ transform:scaleX(1); }
.rspace-ic{
  flex:0 0 auto;
  width:54px; height:54px;
  border-radius:14px;
  display:grid; place-items:center;
  font-size:1.5rem;
  box-shadow:0 4px 10px rgba(26,26,46,.2);
  transition:transform .25s ease;
}
.rspace-tile:hover .rspace-ic{ transform:scale(1.07); }
.rspace-ic i{ color:#fff !important; }
.rspace-tx{ min-width:0 }
.rspace-tx h4{ font-size:1.02rem; margin:0 0 3px; font-family:var(--serif); font-weight:600; line-height:1.25; color:var(--rsp); }
.rspace-tx p{ font-size:.84rem; line-height:1.45; margin:0; color:var(--mute); }
.rsp-orange{ --rsp:#E85D1E; }
.rsp-orange .rspace-ic{ background:linear-gradient(135deg,#E59B2C,#F0BF7B); }
.rsp-blue{ --rsp:#2E8C6A; }
.rsp-blue .rspace-ic{ background:linear-gradient(135deg,#2E8C6A,#4AA3E8); }
.rsp-green{ --rsp:#06A77D; }
.rsp-green .rspace-ic{ background:linear-gradient(135deg,#06A77D,#2BD0A6); }
.rsp-purple{ --rsp:#8A4FD0; }
.rsp-purple .rspace-ic{ background:linear-gradient(135deg,#E59B2C,#F0BF7B); }
.rsp-amber{ --rsp:#C9920F; }
.rsp-amber .rspace-ic{ background:linear-gradient(135deg,#E0941A,#F2C14E); }
.rsp-pink{ --rsp:#E1568E; }
.rsp-pink .rspace-ic{ background:linear-gradient(135deg,#FF7AA8,#FFA8C4); }
@media(max-width:991.98px){
  .rspace-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767.98px){
  .rspace-grid{ grid-template-columns:1fr; gap:12px; }
}

/* ===== V9 — Residential: Process stepper + Why feature grid ===== */
/* Our Process — connected stepper */
.rproc{ display:flex; }
.rproc-step{
  flex:1; position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:0 12px;
}
.rproc-step::before{
  content:"";
  position:absolute; top:25px; left:50%;
  width:100%; height:3px;
  background:rgba(26,26,46,.12);
  z-index:0;
}
.rproc-step:last-child::before{ display:none; }
.rproc-node{
  position:relative; z-index:1;
  width:52px; height:52px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  color:#fff; background:var(--rstep);
  box-shadow:0 6px 16px rgba(26,26,46,.22);
  transition:transform .25s ease;
}
.rproc-card{
  flex:1; width:100%;
  background:#fff;
  border:1px solid rgba(26,26,46,.08);
  border-radius:14px;
  padding:16px 14px;
  box-shadow:0 6px 20px rgba(26,26,46,.05);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.rproc-card h4{ font-size:1rem; margin:0 0 5px; font-family:var(--serif); font-weight:600; color:var(--rstep); }
.rproc-card p{ font-size:.84rem; line-height:1.5; margin:0; color:var(--mute); }
.rproc-step:hover .rproc-node{ transform:scale(1.09); }
.rproc-step:hover .rproc-card{ border-color:var(--rstep); box-shadow:0 12px 26px rgba(26,26,46,.1); }
.rstep-orange{ --rstep:#E59B2C; }
.rstep-blue  { --rstep:#2E8C6A; }
.rstep-green { --rstep:#06A77D; }
.rstep-purple{ --rstep:#E59B2C; }
@media(max-width:767.98px){
  .rproc{ flex-direction:column; }
  .rproc-step{
    flex-direction:row; align-items:flex-start;
    gap:16px; text-align:left;
    padding:0 0 20px;
  }
  .rproc-step:last-child{ padding-bottom:0; }
  .rproc-step::before{ top:0; left:25px; width:3px; height:100%; }
  .rproc-node{ margin:0; }
}

/* Why Families Choose Us — interior photo + reasons */
.rwhy2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.rwhy2-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:360px;
  box-shadow:0 16px 36px rgba(26,26,46,.14);
}
.rwhy2-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rwhy2-badge{
  position:absolute; left:18px; bottom:18px;
  background:rgba(255,255,255,.95);
  border-radius:14px;
  padding:11px 18px;
  box-shadow:0 8px 20px rgba(26,26,46,.22);
}
.rwhy2-badge strong{ display:block; font-family:var(--serif); font-weight:600; font-size:1.55rem; color:#E59B2C; line-height:1; }
.rwhy2-badge span{ font-size:.76rem; color:var(--mute); }
.rwhy2-list{ display:flex; flex-direction:column; gap:12px; }
.rwhy2-item{
  flex:1;
  display:flex; gap:14px; align-items:center;
  background:#fff;
  border:1px solid rgba(26,26,46,.08);
  border-left:4px solid var(--rwhy);
  border-radius:12px;
  padding:15px 16px;
  box-shadow:0 5px 16px rgba(26,26,46,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.rwhy2-item:hover{ transform:translateX(5px); box-shadow:0 11px 24px rgba(26,26,46,.11); }
.rwhy2-ic{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:12px;
  display:grid; place-items:center;
  font-size:1.3rem;
  background:var(--rwhy);
  box-shadow:0 5px 12px var(--rwhy-sh);
}
.rwhy2-ic i{ color:#fff !important; }
.rwhy2-tx{ min-width:0 }
.rwhy2-tx h4{ font-size:1.02rem; margin:0 0 3px; font-family:var(--serif); font-weight:600; color:var(--rwhy); }
.rwhy2-tx p{ font-size:.85rem; line-height:1.45; margin:0; color:var(--mute); }
.rwhy-orange{ --rwhy:#E59B2C; --rwhy-sh:rgba(229,155,44,.32); }
.rwhy-blue  { --rwhy:#2E8C6A; --rwhy-sh:rgba(46,140,106,.32); }
.rwhy-green { --rwhy:#06A77D; --rwhy-sh:rgba(6,167,125,.32); }
.rwhy-purple{ --rwhy:#E59B2C; --rwhy-sh:rgba(229,155,44,.32); }
@media(max-width:767.98px){
  .rwhy2{ grid-template-columns:1fr; gap:16px; }
  .rwhy2-media{ min-height:210px; }
}

/* ===== V10 — Footer floating icons spread down the tall mobile footer ===== */
@media(max-width:767.98px){
  footer.site-footer .ft-deco .bi-lamp.ft-ico        { top:235px  !important; }
  footer.site-footer .ft-deco .bi-palette.ft-ico     { top:360px  !important; }
  footer.site-footer .ft-deco .bi-easel2.ft-ico      { top:470px  !important; }
  footer.site-footer .ft-deco .bi-flower1.ft-ico     { top:585px  !important; }
  footer.site-footer .ft-deco .bi-rulers.ft-ico      { top:695px  !important; }
  footer.site-footer .ft-deco .bi-house-heart.ft-ico { top:805px  !important; }
  footer.site-footer .ft-deco .bi-image.ft-ico       { top:915px  !important; }
  footer.site-footer .ft-deco .bi-brush.ft-ico       { top:1025px !important; }
  footer.site-footer .ft-deco .bi-columns-gap.ft-ico { top:1135px !important; }
  footer.site-footer .ft-deco .bi-vinyl.ft-ico       { top:1245px !important; }
  footer.site-footer .ft-deco .deco-pendant-r        { top:540px  !important; }
  footer.site-footer .ft-deco .deco-plant            { top:780px  !important; }
  footer.site-footer .ft-deco .deco-armchair         { top:1010px !important; }
}

/* ===== V11 — Common Questions: tighten gap before the first (open) FAQ ===== */
.faq-tight{ margin-top:-12px; counter-reset:faqnum; }
@media(max-width:767.98px){
  .faq-tight{ margin-top:-16px; }
}
/* tighter padding above/below the question text inside each card */
.faq-tight .faq-cat{ padding:3px; margin-bottom:10px; }
/* FAQ question row: roomy on desktop, tight on mobile */
@media(max-width:767.98px){
  .faq-cat details{ padding:1px 18px; }
}
/* numbered questions (1, 2, 3 …) */
.faq-tight .faq-cat summary span{ flex:1; display:flex; align-items:center; gap:11px; }
.faq-tight .faq-cat summary span::before{
  counter-increment:faqnum;
  content:counter(faqnum);
  flex:0 0 auto;
  width:27px; height:27px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-weight:600; font-size:.82rem;
  display:grid; place-items:center;
}

/* ===== V12 — Hide header orange CTA button on mobile / compact header ===== */
@media(max-width:991.98px){
  .header-cta .btn-orange{ display:none !important; }
}

/* ===== V13 — Why-section media: clickable auto-advancing image slider ===== */
.rwhy2-slider{
  position:absolute;
  top:0; left:0; bottom:0;
  display:flex;
  width:400%;
  max-width:none !important;
  transition:transform .6s ease;
}
.rwhy2-slider img{
  width:25%;
  height:100%;
  flex:0 0 25%;
  object-fit:cover;
  display:block;
}
/* clickable slide indicator bars */
.rwhy2-dots{
  position:absolute; z-index:2;
  left:0; right:0; bottom:14px;
  display:flex; justify-content:center; align-items:center; gap:7px;
}
.rwhy2-dot{
  width:26px; height:5px;
  border-radius:3px;
  background:rgba(255,255,255,.5);
  box-shadow:0 1px 5px rgba(0,0,0,.4);
  cursor:pointer;
  transition:background .25s ease, width .25s ease;
}
.rwhy2-dot:hover{ background:rgba(255,255,255,.85); }
.rwhy2-dot.active{ background:#E59B2C; width:34px; }