/* LF Builders Tiktok Theme Oct 2024 with MAC OS compatibility */

@font-face {
  font-family: "Allura";
  src: url("/app/fonts/Allura/Allura-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root{
  --mfb-brand:#20a7ad;
  --mfb-ink:#080b0d;
  --mfb-bg:#fff;
  --mfb-muted:#f5f7f8;
  --mfb-ring:rgba(32,167,173,.35);

  /* Shadows */
  --mfb-shadow-sm: 0 6.7px 5.3px rgba(0,0,0,.03), 0 22.3px 17.9px rgba(0,0,0,.05);
  --mfb-shadow-card: 0 10px 15px rgba(0,0,0,.08);

  /* Fluid type scale (minor third-ish) */
  --mfb-step--2: clamp(.64rem, calc(.64rem + .1vw), .72rem);
  --mfb-step--1: clamp(.78rem, calc(.75rem + .2vw), .86rem);
  --mfb-step-0: clamp(.9rem, calc(.88rem + .3vw), 1rem);
  --mfb-step-1: clamp(1.05rem, calc(1rem + .6vw), 1.25rem);
  --mfb-step-2: clamp(1.25rem, calc(1.15rem + 1vw), 1.55rem);
  --mfb-step-3: clamp(1.55rem, calc(1.3rem + 1.8vw), 2rem);
  --mfb-step-4: clamp(1.95rem, calc(1.7rem + 2.4vw), 2.6rem);

  /* Motion + easing tokens */
  --mfb-transition-fast: .18s cubic-bezier(.4,0,.2,1);
  --mfb-transition-slow: .45s cubic-bezier(.4,0,.2,1);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body,
h1,h2,h3,h4,h5,h6,
p,a,li,button {
  font-family: "Montserrat", Sans-serif;
  font-size: 16px;
  line-height: 2em;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

strong {
  font-weight: 600;
}

/* ————— Page Background to match default.css ————— */
/* Keep the same geometric backdrop as default's .app, applied to body for service pages */
body{
  display:block;
  color: var(--mfb-ink);
  background: var(--mfb-bg);
  background-image:
    radial-gradient(1px 1px at 16px 16px, rgba(8,11,13,.08) 1px, transparent 1.5px),
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--mfb-brand) 20%, transparent) 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 40%, color-mix(in srgb, var(--mfb-brand) 16%, transparent) 0%, transparent 60%),
    linear-gradient(to bottom, transparent 80%, #fff 100%);
  background-size: 32px 32px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

/* Ensure carousels, galleries, and video sit above section overlays */
.carousel,
.modal,
.plain-video,
.youtube-video-placeholder {
  position: relative;
  z-index: 1;
}

/* Place split-showcase carousel behind main gallery/carousel */
.split-showcase-carousel {
  position: relative; /* keeps layout flow */
  z-index: 0; /* lower than .carousel (z=1) */
  pointer-events: none; /* ensure it never blocks interaction with foreground */
}

/* --- Carry the subtle angled-line theme across sections (behind content) --- */
.testimonials-section,
.plain-video,
#content,
.promo-section,
.experts-section,
.savings-section,
#social,
footer {
  position: relative;
  isolation: isolate;
}
.testimonials-section::before,
.plain-video::before,
#content::before,
.promo-section::before,
.experts-section::before,
.savings-section::before,
#social::before,
footer::before {
  content: "";
  position: absolute;
  inset: -4% 0 -2% 0;
  z-index: -1; /* always behind real content */
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(2,6,23,0.04), rgba(2,6,23,0.04)) 0 35%/100% 1px no-repeat,
    linear-gradient(to right, rgba(2,6,23,0.04), rgba(2,6,23,0.04)) 0 70%/100% 1px no-repeat,
    repeating-linear-gradient(-10deg, rgba(32,167,173,0.05) 0 2px, transparent 2px 26px);
  transform: rotate(-1.2deg);
  transform-origin: center;
  mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}


#intro .info{ position:relative; z-index:2; }

#intro .info{
  position:relative; z-index:2;
  margin-top: 25px !important;
  max-width:min(1200px, 94vw);
  margin:0 auto; padding: clamp(16px, 3vw, 28px) clamp(16px, 3.2vw, 36px);
  color: var(--mfb-ink);
  background: color-mix(in srgb, #ffffff 78%, transparent);
  border:1px solid rgba(8,11,13,.06);
  border-radius:16px;
  backdrop-filter:saturate(1.05) blur(2px);
}

#intro .info::before,
#intro .info::after{
  content:""; position:absolute; width: clamp(70px, 12vw, 140px); height: clamp(70px, 12vw, 140px);
  pointer-events:none; opacity:.85;
}
#intro .info::before{
  top:-10px; left:-10px;
  background:
    linear-gradient(var(--mfb-brand), var(--mfb-brand)) left top / 2px 100% no-repeat,
    linear-gradient(var(--mfb-brand), var(--mfb-brand)) left top / 100% 2px no-repeat;
  border-top-left-radius:8px;
}
#intro .info::after{
  bottom:-10px; right:-10px;
  background:
    linear-gradient(var(--mfb-brand), var(--mfb-brand)) right bottom / 2px 100% no-repeat,
    linear-gradient(var(--mfb-brand), var(--mfb-brand)) right bottom / 100% 2px no-repeat;
  border-bottom-right-radius:8px;
}

.header-logo-cursive{
  font-family:"Montserrat", Sans-serif;
  letter-spacing:2px; font-weight:600; text-align:center; font-size:4rem !important; color: var(--mfb-ink);
  position:relative;
}
.header-logo-cursive::after{
  content:""; display:block; height:3px; width: clamp(80px, 18vw, 220px);
  margin:10px auto 0; background: linear-gradient(90deg, var(--mfb-brand), rgba(32,167,173,0)); border-radius:999px;
}
@media (max-width:550px){ .header-logo-cursive{ font-size:3rem !important; } }

.info h1{ text-align:center; font-size:2rem; margin-bottom:25px; }
.info p{ font-size:1.4rem; margin-bottom:20px; }

.creative-text {
  padding: 14px;
}

.creative-text p {
    font-size: 1.4rem;
    margin-bottom: 20px;
    line-height: 2.1em;
}

/* Company copy */
.company-statement{ padding:43px; hyphens:auto; color:#1b3537; font-weight:400; text-wrap: balance; }
.company-statement a{ text-decoration:none; color:#1f3e40; font-size:1.4rem; font-weight:400; }
.company-statement a:hover{ color:#1f3e40; }
@media (max-width:1100px){ .apple-statement{ max-width:80%; } }
@media (max-width:550px){
  .company-statement{ padding:0; }
  .apple-statement{ max-width:100%; }
}

/* License bits */
.license-header{ font-size:1.2rem !important; font-weight:600; color: var(--mfb-ink); margin-bottom:.2px !important; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.license-text{ font-size:.8rem; color:#555; }
.license-subtext{ font-size: .68rem !important; color:#555; margin-top: 6px; line-height: 1.4em; }

/* ————— Split showcase / scroll ————— */
.split-showcase-carousel{ display:flex; position:relative; width:100%; height:100%; margin-top: 40px; margin-bottom: 40px; overflow:hidden; 
  /* Parallax enhancement */
  perspective:1200px; perspective-origin:50% 50%;
  contain: layout paint; /* performance containment */
  isolation:isolate;
}
/* Soft overlay layer drifting slowly for depth */
.split-showcase-carousel::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(90deg, rgba(32,167,173,.07) 0%, rgba(32,167,173,0) 22%, rgba(32,167,173,.09) 50%, rgba(32,167,173,0) 78%, rgba(32,167,173,.07) 100%);
  mix-blend-mode:overlay; opacity:.65;
  animation: showcaseParallaxBg 60s linear infinite;
}
@keyframes showcaseParallaxBg{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }
.split-showcase{
  display:flex; width: calc(250px * 12); max-height:350px;
  transform-style:preserve-3d; animation: scroll 20s linear infinite;
  will-change: transform;
}
@media (min-width:1100px){ .split-showcase-carousel{ height:60%; } }

.showcase{
  width:250px; flex-shrink:0; border-radius:20px; margin-left:15px;
  border:3px solid var(--mfb-ink); box-shadow: var(--mfb-shadow-sm);
  position:relative; z-index:1; /* above bg overlay */
  --ss-depth: 0; /* default */
  transform: translateZ(var(--ss-depth));
  transition: transform 1.2s cubic-bezier(.19,1,.22,1), filter .6s ease;
}
/* Depth staggering for faux parallax */
.split-showcase .showcase:nth-child(3n+1){ --ss-depth: -40px; filter:brightness(.97) saturate(1.05); }
.split-showcase .showcase:nth-child(3n+2){ --ss-depth: -80px; filter:brightness(.94) saturate(1.08); }
.split-showcase .showcase:nth-child(3n+3){ --ss-depth: -120px; filter:brightness(.91) saturate(1.1); }

/* Hover/active slight forward pop without breaking layer ordering */
.split-showcase .showcase:hover{ transform: translateZ(calc(var(--ss-depth) + 40px)) scale(1.04); filter:brightness(1) saturate(1.15); }
@media (hover:none){ .split-showcase .showcase:hover{ transform: translateZ(var(--ss-depth)); filter:brightness(1); } }
@keyframes scroll{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-750px);} }
.split-showcase-carousel:hover .split-showcase{ animation-play-state: paused; }

.split-beer{ display:flex; flex-direction:row; }
.beer{
  max-width:100%; width:250px; border-radius:20px; margin-left:15px;
  border:3px solid var(--mfb-ink); box-shadow: var(--mfb-shadow-sm);
}
.beer:nth-child(2){ transform: translateY(-1.5rem); }
.pro{ font-size:1.5rem; }

/* ————— Buttons ————— */
.button, .close-btn{
  display:inline-block; position:relative; width:auto; text-decoration:none;
  padding:1.2rem; font-weight:bold; border:0; outline:0; box-shadow:0 0 0 2px var(--mfb-brand);
  cursor:pointer; transition: all .5s ease; background:#000; color:#fff; margin:25px;
}
@media (max-width:550px){ .button, .close-btn{ width:70%; text-align:center; } }
.button::before, .close-btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; transition: all .5s; background: var(--mfb-ink);
}
.button::after, .close-btn::after{
  content:""; position:absolute; left:2.5px; top:2px; right:2px; bottom:2.5px; z-index:-1; border-radius:8px; transition: all .5s;
}
.button:hover, .button:focus, .close-btn:hover, .close-btn:focus{
  color:#fff; box-shadow: 0 0 10px rgba(0,0,0,.3); transition: all .3s ease;
}
.button:hover::before, .close-btn:hover::before{ background: var(--mfb-brand); }
.button:hover::after, .close-btn:hover::after{ left:100%; top:100%; right:100%; bottom:100%; }
.button:active, .close-btn:active{ color:#000; box-shadow: inset 0 0 5px rgba(0,0,0,.3); }
.close-btn{ text-transform:uppercase; }

/* ————— Content grid ————— */
#content{
  display:grid;
  /* Auto-fit responsive columns with a fluid min width that caps nicely */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(260px, 48%, 520px)), 1fr));
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(40px, 6vw, 60px) clamp(24px, 5vw, 40px);
  min-height:100dvh; overflow:hidden;
}
@media (max-width:1100px){ #content{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:800px){
  #intro{ padding:15px; }
  .info{ gap:20px; padding:30px 5px; }
  .outro{ padding:20px 40px; }
  .info h1{ font-size:2.2rem; }
  .info p{ font-size:1.4rem; }
  #content{ gap:30px; padding:60px 20px; }
  .gary-content{ width:98%; }
  footer>p{ font-size:1.1rem; }
}
@media (max-width:550px){
  #intro{ grid-template-columns:1fr; grid-template-areas: "split-beer" "info"; }
  .info{ grid-area: info; }
  .split-beer{ grid-area: split-beer; margin:20px auto; }
  .beer{ width:100px; }
  #content{ grid-template-columns:1fr; padding:40px 40px; }
  footer>p{ font-size:1rem; }
}

/* Section headers */
.content-header h1{ text-align:center; font-size:2rem; }
.content-header h2{ background:transparent; color:#000; text-align:center; font-size:1.2rem; font-weight:200; }

/* Scroller */
.scroll-section{
  padding:20px 0; text-align:center; background:#fff;
  background-image:
    radial-gradient(at 9.2% 73.7%, var(--mfb-brand) 0, transparent 50%),
    radial-gradient(at 92.3% 7.6%, var(--mfb-brand) 0, transparent 50%);
}

/* ————— Banner ————— */
.banner-section{ position:relative; padding:60px 20px; text-align:center; color: var(--mfb-ink); }
.banner-overlay{ position:absolute; inset:0; z-index:1; }
.container-banner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 20px; }
.banner-content{
  max-width:800px; margin:0 auto; padding:30px; background:#f9f9f9; border-radius:20px; box-shadow: var(--mfb-shadow-sm);
}
.banner-title{ text-align:center; font-size:2.8rem; font-weight:600; margin-bottom:20px; }
.banner-subtitle{ font-size:1.5rem; font-weight:400; margin-bottom:20px; color:#555; }
.promo-button{
  padding:10px 20px; background: var(--mfb-ink); color:#fff; border:0; border-radius:10px; cursor:pointer; transition: background-color .3s ease;
}
.promo-button:hover{ background: var(--mfb-brand); color:#fff; }

@media (max-width:768px){
  .banner-title{ font-size:2rem; }
  .banner-subtitle{ font-size:1.2rem; }
  .promo-form{ flex-direction:column; gap:15px; }
  .promo-input{ max-width:100%; }
}

/* ————— Testimonials ————— */
.testimonials-section{ text-align:center; }
.testimonials-content{ max-width:350px; position:relative; }
@media (max-width:550px){ .fix-small-review-1{ margin-top:75px; } .fix-small-review-2{ margin-top:140px; } }
.testimonial{ padding:30px; background:transparent; border-radius:20px; }
@media (max-width:768px){ .testimonial{ padding:20px; border-radius:15px; } }
@media (max-width:480px){ .testimonial{ padding:15px; border-radius:10px; } }
.testimonial-rating{ font-size:1.5em; color:#ffd700; margin-bottom:10px; }
.testimonial-text{ text-align:-webkit-match-parent; font-size:1.1rem; color:#555; margin-bottom:15px; }
.testimonial-cite{ font-size:1rem; color: var(--mfb-brand); font-weight:600; }
.testimonial-image img{ width:60px; height:60px; border-radius:50%; margin-top:10px; }
.swiper{ padding:0; }
.swiper-pagination{ position:static; margin-top:20px; }
.swiper-button-prev, .swiper-button-next{ color: var(--mfb-brand) !important; }
.google-source{ color:#4285f4; } .homestars-source{ color:#ff6a00; }
@media (min-width:1100px){ .testimonials-content{ max-width:600px; } }
@media (max-width:768px){
  .testimonial{ padding:50px; }
  .testimonial-image img{ width:50px; height:50px; }
}

/* ————— Promo grid ————— */
.promo-section{ padding:60px 20px; max-width:800px; text-align:center; }
@media (min-width:768px){ .promo-section{ max-width:700px; } }
.promo-title{ font-size:2.5rem; font-weight:600; color: var(--mfb-ink); margin-bottom:40px; }
.promotion-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:40px; }
.promotion{
  padding:20px; border-radius:10px; background:#f9f9f9; border:2px solid #000; box-shadow: var(--mfb-shadow-sm);
  transition: transform .3s ease-in-out;
}
.promotion:hover{ transform: translateY(-10px); }
.promo-icon{ width:100px; margin-bottom:20px; }
.promo-heading{ font-size:1.5rem; font-weight:600; color:#000; margin-bottom:10px; }
.promo-text{ font-size:1rem; color:#555; line-height:1.6em; }
@media (max-width:800px){ .promotion-grid{ grid-template-columns:1fr; } .promo-title{ font-size:2rem; } }

/* ————— Savings ————— */
.savings-section{ text-align:center; padding:60px 20px; }
.container{ display:flex; flex-direction:column; align-items:center; max-width:1200px; margin:0 auto; padding:0 20px; }
@media (max-width:550px){ .container{ padding:0 10px; } }
.savings-content{ max-width:800px; margin:0 auto; padding:30px; background:#f9f9f9; border-radius:20px; box-shadow: var(--mfb-shadow-sm); }

/* Divider parity */
.divider{
  width: min(90px, 22vw);
  height: 2px;
  margin: 22px auto 20px auto;
  background: linear-gradient(90deg, transparent, var(--mfb-brand), transparent);
  border-radius: 999px;
}

/* ————— Product cards ————— */
.card{
  position:relative; display:grid; grid-template-columns:1fr; grid-template-rows:50% 50%;
  border:2px solid #000; width:400px; aspect-ratio:1/1; color:#fff; border-radius:20px; box-shadow: var(--mfb-shadow-sm); overflow:hidden; cursor:pointer;
  will-change: transform, box-shadow;
  transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .6s ease;
}
@media (max-width:550px){ .card{ width:100%; } }
@media (max-width:768px){ .card{ width:auto; } }
@media (min-width:768px) and (max-width:1100px){ .card{ width:auto; } }

.card:hover{
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.3), 0 4px 12px -2px rgba(0,0,0,.12);
}

.card:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px var(--mfb-ring), 0 0 0 1px #000, 0 12px 32px -8px rgba(0,0,0,.3);
  transform: translateY(-4px);
}

.img-ribbon{
  width:100%; background:#000; position:absolute; top:10px; text-align:center; color:#fff; font-weight:600; font-size:19px; text-transform:uppercase; white-space:nowrap; z-index:10; opacity:1; transition: opacity .5s ease-in-out;
}
.card:hover .img-ribbon, .card:active .img-ribbon{ opacity:0; }

.best-seller-ribbon{
  width:200px; text-align:center; position:absolute; bottom:25px; right:-45px; background:red; color:#fff; padding:5px 10px; font-weight:600; font-size:16px; text-transform:uppercase; z-index:10; transform: rotate(-40deg); opacity:1; transition: opacity .5s ease-in-out;
}
.card:hover .best-seller-ribbon, .card:active .best-seller-ribbon{ opacity:0; }

.learn-more-ribbon{
  width:200px; text-align:center; position:absolute; bottom:25px; left:-45px; background:#000; color:#fff; padding:5px 10px; font-weight:600; font-size:16px; text-transform:uppercase; z-index:10; transform: rotate(44deg); opacity:0; transition: opacity .5s ease-in-out;
}
.card:hover > .learn-more-ribbon{ opacity:1; }

.card-img{ position:absolute; inset:0; width:100%; height:100%; border-radius:5px; object-fit:cover; object-position:50% 50%; z-index:2; transition: all 450ms ease-in 200ms; }
.title, h2{
  display:flex; justify-content:center; align-items:center; color:#fff; background:#000; border-radius:20px 20px 0 0;
  font-size:x-large; text-align:center; font-weight:600; text-transform:uppercase; line-height:1.2em;
}
.more{ display:grid; grid-template-columns:1fr 1fr; place-items:center; background:#fff; border-radius:0 0 20px 20px; }
.open-icon{ font-size:1.25rem; color: var(--mfb-ink); transform: translateY(3px); margin-left:3px; z-index:1; }
.gary-open{
  text-transform:uppercase; color: var(--mfb-ink); font-size:1.2rem; font-weight:600;
  text-shadow:0 0 10px rgba(0,0,0,.17); background:transparent; outline:0; border:0; cursor:pointer; grid-area: 1 / 2 / span 1 / span 1;
}

body.prevent-background-scroll{ min-height:100vh; overflow:hidden; }

.modal{
  display:none; position:fixed; inset:0; background: rgba(0,0,0,.5); z-index:9999;
  animation: openModal .3s ease-in-out 1 normal;
}
@keyframes openModal{ from{ opacity:0;} to{ opacity:1;} }

.gary-page{ width:100%; display:block; position:relative; }
@media (min-width:1100px){ .gary-page{ width:65%; } }
.gary-page .gary-carousel{ width:50%; margin:0 auto; }
@media (max-width:550px){ .gary-page .gary-carousel{ width:100%; } }
.gary-page h1{ font-size:2.5rem; text-align:center; font-weight:600; }

.gary-content{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  background:#fff; height:95%; z-index:30; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none;
  box-shadow: 0 0 0 2px var(--mfb-brand); /* ring to match default */
}
.gary-bar{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:15px; height:55px; border-bottom:2px solid var(--mfb-brand);
  position:sticky; top:0; background:#fff; z-index:9999;
}
.gary-close-corner{ position:absolute; top:15px; right:15px; width:24px; height:24px; background:transparent; border:0; font-size:24px; color:#000; cursor:pointer; z-index:9999; }
.gary-close-corner::before{ content:"✕"; display:block; text-align:center; line-height:24px; }
.gary-header{ font-weight:600; padding:20px; font-size:1.2rem; }
.gary-body{ padding:20px; }
@media (min-width:1100px){ .gary-content{ width:40%; } }
@media (max-width:768px){ .gary-content{ width:100%; } }
@media (max-width:550px){ .gary-body{ padding:15px; } }

/* Scrollbar aesthetic */
.gary-body, .gary-content::-webkit-scrollbar{ width:.7rem; }
.gary-body, .gary-content::-webkit-scrollbar-track{ box-shadow: inset 0 0 .3rem var(--mfb-ink); background-color: rgba(50,50,50,.1); }
.gary-body, .gary-content::-webkit-scrollbar-thumb{ box-shadow: inset 0 0 .5rem var(--mfb-ink); outline:0; }

/* Modal text */
.gary-body p{ font-size:1.1rem; line-height:1.8em; margin-bottom:20px; }
.gary-body h1{ font-size:x-large; font-weight:600; line-height:4em; text-align:center; }
.gary-body h2{ color:#000; background:#fff; margin-bottom:20px; }
.gary-body ul{ list-style:none; }
.gary-body li{
  font-weight:600; text-transform:uppercase; line-height:1.5em; margin:10px 0; padding:5px 10px; border-radius:5px; color:#333;
  transition: background-color .3s ease, color .3s ease;
}

.gary-footer {
  /* center everything grid */
  display: grid;
  place-items: center;
}

@media (max-width:550px){
  .gary-body li{ font-size:.9rem; padding:8px; margin:8px 0; }
  .gary-footer a, .gary-footer button{ text-align:center; padding:15px 0; }
}

/* Modal CTA footer (ported from default.css) */
.gary-footer.gary-footer-locker{
  display:block !important;
  position:sticky; bottom:0; background: var(--mfb-bg);
  border-top:2px solid var(--mfb-brand); box-shadow: 0 -10px 24px rgba(0,0,0,.08); z-index:9998;
}
.gary-footer-locker__handle{
  width:100%; border:0; background: linear-gradient(180deg,#ffffff 0%, #f7fbfb 100%);
  color: var(--mfb-ink); font-weight:800; font-size:1rem; letter-spacing:.2px; padding:12px 14px; cursor:pointer;
  display:grid; grid-template-columns:1fr auto 20px; align-items:center; gap:8px; border-bottom:.3px solid var(--mfb-brand);
}
.gary-footer-locker__title{ text-align:left; }
.gary-footer-locker__icons{ white-space:nowrap; }
.gary-footer-locker__chev-anim{ animation: pulse 1.5s infinite; }
.gary-footer-locker__chev{ display:inline-block; transition: transform .2s ease; }
.gary-footer-locker__handle[aria-expanded="true"] .gary-footer-locker__chev{ transform: rotate(-180deg); }

.gary-footer-locker__body{
  overflow:clip; transition: grid-template-rows .28s ease, padding .2s ease, max-height .28s ease;
  padding:12px 14px 16px;
}
.gary-footer-locker[data-state="peek"] .gary-footer-locker__body{ padding:0; max-height:0; }
.gary-footer-locker[data-state="open"] .gary-footer-locker__body{ max-height:800px; }

.gary-footer-locker[data-state="peek"] .gary-footer-locker__chev{ transform: rotate(185deg); }
.gary-footer-locker[data-state="open"] .gary-footer-locker__chev{ transform: rotate(0deg); }

.gary-footer-row{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:6px auto;
}


/* Footer CTA buttons (enhanced for responsiveness + subtle motion) */
.gary-footer-btn{
  --gary-btn-bg: var(--mfb-ink);
  --gary-btn-fg: #fff;
  --gary-btn-border: var(--mfb-ink);
  --gary-btn-radius: 14px;
  --gary-btn-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 10px -2px rgba(0,0,0,.18);
  --gary-btn-shadow-hover: 0 4px 8px -2px rgba(0,0,0,.25), 0 10px 22px -6px rgba(0,0,0,.22);
  appearance:none; position:relative; overflow:hidden;
  border:2px solid var(--gary-btn-border); background: var(--gary-btn-bg); color:var(--gary-btn-fg) !important;
  font-weight:800; font-size:clamp(.78rem,.74rem + .5vw,.98rem); line-height:1; letter-spacing:.25px;
  padding:clamp(11px, .9rem + .3vw, 15px) clamp(13px, 1rem + .5vw, 20px);
  border-radius:var(--gary-btn-radius); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  -webkit-font-smoothing: antialiased; backface-visibility:hidden;
  transition: transform .16s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, background .35s ease, border-color .35s ease, color .35s ease, filter .35s ease;
  box-shadow: var(--gary-btn-shadow);
}
/* Shine / pulse accent */
.gary-footer-btn::before, .gary-footer-btn::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; transition:opacity .4s ease;
}
.gary-footer-btn::before{
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 62%);
  mix-blend-mode:soft-light; opacity:.55;
}
.gary-footer-btn::after{
  background:linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.25) 45%, transparent 60%);
  transform:translateX(-140%);
  animation: garyBtnSheen 4.5s ease-in-out infinite;
  opacity:.6;
}
@keyframes garyBtnSheen{ 0%{ transform:translateX(-140%);} 55%{ transform:translateX(160%);} 100%{ transform:translateX(160%);} }

.gary-footer-btn:hover{
  transform: translateY(-3px) scale(1.015);
  box-shadow: var(--gary-btn-shadow-hover);
}
.gary-footer-btn:active{
  transform: translateY(-1px) scale(.985);
  transition: transform .08s ease;
  filter: brightness(.95);
  box-shadow: 0 2px 5px rgba(0,0,0,.25) inset;
}
.gary-footer-btn:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--mfb-ring), 0 0 0 1px var(--gary-btn-border); }
.gary-footer-btn:focus:not(:focus-visible){ outline:none; }
.gary-footer-btn:is(:hover,:focus-visible) .gary-footer-badge{ transform: translateY(-2px); }

/* Disabled state */
.gary-footer-btn:disabled,
.gary-footer-btn[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none; filter:none;
}

/* Primary variant */
.gary-footer-btn--primary{
  --gary-btn-bg: linear-gradient(135deg,#0c1213 0%, #121f21 40%, #1a2f30 100%);
  --gary-btn-border: var(--mfb-brand);
  position:relative;
}
.gary-footer-btn--primary:hover{ background: linear-gradient(135deg,#121d1f 0%, #143033 40%, #1f4e50 100%); }

/* Secondary: outline invert */
.gary-footer-btn--secondary{
  --gary-btn-bg: linear-gradient(135deg,#fff 0%, #f5f7f8 100%);
  --gary-btn-fg: var(--mfb-ink);
  --gary-btn-border: var(--mfb-ink);
}
.gary-footer-btn--secondary:hover{ background: linear-gradient(135deg,#fdfefe 0%, #eef2f3 100%); }

/* Ghost (low emphasis) */
.gary-footer-btn--ghost{
  --gary-btn-bg: rgba(255,255,255,.65);
  --gary-btn-fg: var(--mfb-ink);
  --gary-btn-border: #d7e2e3;
  backdrop-filter: blur(3px) saturate(1.1);
}
.gary-footer-btn--ghost:hover{ --gary-btn-bg: rgba(255,255,255,.85); }

/* Light (muted) */
.gary-footer-btn--light{
  --gary-btn-bg: var(--mfb-muted);
  --gary-btn-fg: var(--mfb-ink);
  --gary-btn-border:#cfd9da;
}
.gary-footer-btn--light:hover{ filter: brightness(1.04); }

/* Destructive / Alert (optional utility) */
.gary-footer-btn--danger{ --gary-btn-bg: linear-gradient(135deg,#9d1510,#d7261d); --gary-btn-border:#c81e15; }
.gary-footer-btn--danger:hover{ --gary-btn-bg: linear-gradient(135deg,#b01812,#f63127); }

/* Loading state */
.gary-footer-btn[aria-busy="true"], .gary-footer-btn.is-loading{
  position:relative; pointer-events:none; opacity:.75;
}
.gary-footer-btn[aria-busy="true"]::after, .gary-footer-btn.is-loading::after{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 20%, transparent 22% 100%),
    conic-gradient(var(--mfb-brand) 0 25%, transparent 25% 50%, var(--mfb-brand) 50% 75%, transparent 75% 100%);
  animation: garyBtnSpin .85s linear infinite;
  inset:0; mix-blend-mode: normal; transform:none;
  opacity:1;
}
@keyframes garyBtnSpin{ to{ transform: rotate(1turn);} }


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .gary-footer-btn, .gary-footer-btn:hover, .gary-footer-btn:active{ transition:none; animation:none; transform:none; }
  .gary-footer-btn::after{ display:none; }
  .split-showcase{ animation:none !important; }
  .split-showcase-carousel::before{ animation:none; }
  .split-showcase .showcase{ transform:none !important; filter: none !important; }
  .card, .card:hover{ transform:none !important; box-shadow: var(--mfb-shadow-sm) !important; }
}

/* High contrast tweak (if OS forces) */
@media (forced-colors: active){
  .gary-footer-btn{ border:1px solid CanvasText; background: CanvasText; color:Canvas !important; box-shadow:none; }
  .gary-footer-btn--secondary, .gary-footer-btn--ghost, .gary-footer-btn--light{ background: Canvas; color: CanvasText !important; }
}

.gary-footer-badge{ display:inline-block; font-size:.78rem; font-weight:900; background:#ff3b30; color:#fff; padding:4px 8px; border-radius:999px; margin-left:8px; }
.gary-footer-more[hidden]{ display:none !important; }
.gary-footer-trust{
  margin:-30px 4px 30px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; color:#4b5a5b;
}
.gary-footer-trust p{ margin:0; font-weight:600; text-transform:uppercase; letter-spacing:.2px; font-size:10px !important; }
@media (max-width:550px){
  .gary-footer-row{ grid-template-columns:1fr 1fr; }
  .gary-footer-btn{ padding:13px 10px; font-size:.95rem; }
  .gary-footer-locker__handle{ grid-template-columns: 1fr 1fr 20px; }
  .gary-footer-locker__icons{ text-align:right; }
}

/* ————— Carousels ————— */
.gary-carousel{ width:100%; height:40%; overflow:hidden; margin:15px 0; }
.carousel{ position:relative; width:100%; height:400px; overflow:hidden; }
.carousel-service{ background:#000; border:5px solid #115356; }
.carousel-images{ display:flex; transition: transform .5s ease-in-out; width:100%; height:100%; }
.carousel-images img{ background:#000; width:100%; flex-shrink:0; object-fit:contain; }
.carousel-btn{
  position:absolute; top:50%; transform: translateY(-50%); background: rgba(0,0,0,.5); color:#fff; border:0; padding:10px; cursor:pointer; z-index:999;
}
.prev-btn{ left:10px; } .next-btn{ right:10px; }
.carousel-btn:hover{ background: rgba(0,0,0,.7); }

/* ————— Misc  ————— */
.close-icon{ font-size:1.6rem; color: var(--mfb-ink); transform: scale(1); transition: all .3s; }
.close-icon:hover{ transform: scale(1.3); }
.free-quote{ margin:25px; }
.footer-social{ margin-bottom:85px; }

.experts-section{ padding:40px 20px; text-align:center; }
.experts-section h1{ font-size:2.5rem; }
.expert-logos{ display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; }
.expert-logo{ flex:1 1 200px; padding:10px; }
.expert-logo img{ max-width:100%; height:auto; transition: filter .3s ease, transform .3s ease; }
.expert-logo img:hover{ transform: scale(1.05); }
@media (max-width:768px){
  .expert-logos{ flex-direction:column; }
  .expert-logo{ margin-bottom:20px; }
  .expert-logo img{ max-width:200px; }
}

#social{ margin:0; padding:0; margin-bottom:15px; box-sizing:border-box; font-family:"Poppins",sans-serif; width:100%; display:grid; place-items:center; }
.button-social{ display:inline-block; text-decoration:none; color:inherit; background-color: inherit; }
#social a{ margin:2.5px; }
.button-social:hover{ background-color:inherit; color:inherit; }
.button-social .icon i{ font-size:25px; line-height:55px; transition: all .3s ease-in-out; }
.button-social:hover i{ color:#fff; }
a.button-social{ text-decoration:none; color:inherit; background-color:#fff !important; }
.button-social{
  float:left; width:60px; height:60px; cursor:pointer; background:#fff; overflow:hidden; border-radius:50px; transition: all .3s ease-in-out; box-shadow:0 10px 10px rgba(0,0,0,.1);
}
.button-social span{ font-size:20px; font-weight:500; line-height:60px; margin-left:10px; }
.button-social:hover{ width:200px; }
.button-social:nth-child(1):hover .icon{ background:#e1306c; }
.button-social:nth-child(2):hover .icon{ background:#4267b2; }
.button-social:nth-child(3):hover .icon{ background:#f30000; }
.button-social:nth-child(4):hover .icon{ background:#a7f21d; }
.button-social:nth-child(1) span{ color:#e1306c; }
.button-social:nth-child(2) span{ color:#4267b2; }
.button-social:nth-child(3) span{ color:#f30000; }
.button-social:nth-child(4) span{ color:#a7f21d; }
.button-social .icon{
  width:60px; height:60px; border:3px solid #000; text-align:center; border-radius:50px; display:inline-block; transition: all .3s ease-in-out;
}

footer{ color:#333; text-align:center; }
.footer-highlight{ font-size:1.4rem; font-weight:bold; color: var(--mfb-brand); margin-top:10px; }
.footer-text{ text-decoration:none; font-size:.9rem; font-weight:500; margin-bottom:10px; line-height:1.5; }
.footer-text a{ color:#000; text-decoration:none; }
.footer-text a:hover{ color:#115356; }
.footer-bottom{ font-size:x-small; }

/* FAQ width handling */
.faq-items{ margin-left:20%; margin-right:20%; }
.faq-items a{ font-size:1.2rem; font-weight:600; }
.faq-items h3 { font-weight: 600;}
@media (max-width:550px){ .faq-items{ margin:20px; } }

/* Final words block */
.final-words{
  display:grid; grid-template-columns: repeat(2, 1fr); place-items:center; padding:40px; min-height:100dvh; overflow:hidden;
}
@media (min-width:1100px){ .outro{ padding:20px 420px; } }

/* Videos */
#video a{ text-decoration:none; color: var(--mfb-ink); font-weight:700; }
#video a:hover{ color: var(--mfb-brand); }
.video-box{ display:flex; justify-content:center; align-items:center; }
.plain-video{ height:100%; border-radius:20px; }
@media (max-width:550px){ .plain-video{ width:90%; } }
.youtube-video-placeholder{ cursor:pointer; height:360px; width:100%; position:relative; background-size:100% 100%; }
.play-button{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); height:50px; }

/* Exit intent */
.exit-intent-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9999; color:#fff; text-align:center; padding-top:200px; }
.exit-intent-overlay p{ padding:25px; font-size:2.5rem; margin-bottom:20px; }
.exit-intent-overlay a{ background: var(--mfb-brand); color:#fff; padding:15px 30px; border-radius:5px; font-size:1.2rem; text-decoration:none; }
.exit-overlay-close-btn{ position:absolute; top:20px; right:20px; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; z-index:10000; }
.exit-overlay-close-btn:hover{ color: var(--mfb-brand); }

/* ————— Motion prefs ————— */
@media (prefers-reduced-motion: reduce){
  #intro::after{ transform:none; }
  .testimonials-section::before,
  .plain-video::before,
  #content::before,
  .promo-section::before,
  .experts-section::before,
  .savings-section::before,
  #social::before,
  footer::before { transform: none; }
}

/* ————— Animations ————— */
@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}