/* ==========================================================================
   ALLY MOVING LLC — website styles
   Brand colors sampled directly from the official logo assets:
     red  #991115  (logo wordmark)   gray #5d5d5d  (logo tag bar)
   ========================================================================== */

:root{
  --red:        #991115;
  --red-light:  #c23a2f;
  --red-dark:   #6d0d10;
  --ink:        #343434;
  --gray:       #5d5d5d;
  --gray-soft:  #8a8a8a;
  --bg-soft:    #f6f4f2;
  --line:       #e8e3e0;
  --white:      #ffffff;
  --gold:       #e0a541;

  --font-head: 'Bai Jamjuree', 'Segoe UI', sans-serif;
  --font-body: 'Bai Jamjuree', 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(32,29,29,.08);
  --shadow-card: 0 14px 34px rgba(153,17,21,.16);

}

/* ---------- Section decoration: right-aligned animated route graphic ----------
   Reusable partial-coverage decoration (not a full background) — a route line
   with a dot traveling along it, a slow-spinning ring, and a couple of
   floating accents. Two color variants for light/dark section backgrounds. */
.section-deco{
  position:absolute; top:0; right:0; bottom:0; width:min(50%,620px); overflow:hidden;
  pointer-events:none; z-index:0;
}
.section-deco svg{ position:absolute; }
.section-deco .sd-route{ top:0; right:-6%; width:120%; height:100%; opacity:.7; }
.section-deco .sd-ring{ top:8%; right:6%; width:190px; animation:decoSpin 50s linear infinite; }
.section-deco .sd-ring2{ bottom:4%; right:22%; width:110px; animation:decoSpin 38s linear infinite reverse; }
.section-deco .sd-dot{ animation:decoFloat 7s ease-in-out infinite; }
.section-deco .sd-dot2{ animation:decoFloat 8.5s ease-in-out infinite; animation-delay:1.2s; }
.section-deco--light .sd-route path{ stroke:#fff; }
.section-deco--light .sd-truck{ fill:#fff; }
.section-deco--light .sd-ring circle, .section-deco--light .sd-ring2 circle{ stroke:#fff; }
.section-deco--light .sd-dot, .section-deco--light .sd-dot2{ fill:#fff; }
.section-deco--dark .sd-route path{ stroke:var(--red); }
.section-deco--dark .sd-truck{ fill:var(--red); }
.section-deco--dark .sd-ring circle, .section-deco--dark .sd-ring2 circle{ stroke:var(--red); }
.section-deco--dark .sd-dot, .section-deco--dark .sd-dot2{ fill:var(--red); }
@media (max-width: 760px){ .section-deco{ opacity:.6; width:70%; } }

*, *::before, *::after{ box-sizing:border-box; }
/* No scroll-behavior:smooth here on purpose — combined with JS-driven
   scrolling it's an unreliable footgun on some mobile browsers (the
   animated scroll can silently never run at all under certain conditions).
   All in-page anchor navigation is handled explicitly in main_al.js with
   an instant jump instead. scroll-padding-top still applies to any native
   jump this misses, so the target never lands under the sticky header. */
html{ scroll-padding-top:var(--header-offset, 110px); }

/* ---------- Preloader ---------- */
body.preloader-active{ overflow:hidden; }
.preloader{
  position:fixed; inset:0; z-index:5000; overflow:hidden; display:grid; place-items:center; cursor:pointer;
  background:radial-gradient(120% 90% at 50% 28%, var(--red-light) 0%, var(--red) 45%, var(--red-dark) 100%);
  transition:opacity .6s ease, visibility .6s ease;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.preloader-scene{ position:absolute; inset:0; overflow:hidden; perspective:520px; }
.preloader-floor{
  position:absolute; left:-60%; right:-60%; bottom:-6%; height:75%;
  background-image:linear-gradient(rgba(255,255,255,.14) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.08) 2px, transparent 2px);
  background-size:64px 64px; transform:rotateX(64deg); transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(transparent, #000 55%, transparent);
          mask-image:linear-gradient(transparent, #000 55%, transparent);
}
.preloader-floor--top{ bottom:auto; top:-6%; transform:rotateX(-64deg); transform-origin:top center; }
.preloader-halo{
  position:absolute; left:50%; top:40%; width:560px; height:560px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(224,165,65,.24), rgba(153,17,21,.28) 42%, transparent 66%);
  filter:blur(34px); animation:preloaderPulseHalo 3s ease-in-out infinite;
}
.preloader-truck{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); width:280px; opacity:.08; color:#fff;
}
.preloader-route{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }

.preloader-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:1.5rem; }
.preloader-welcome{
  font-size:clamp(.8rem,2.4vw,1.05rem); letter-spacing:.42em; text-transform:uppercase; color:#f0c9be;
  margin-bottom:1.6rem; opacity:0; animation:preloaderUp .8s ease .2s forwards;
}
.preloader-mark{ position:relative; width:200px; height:200px; display:grid; place-items:center; margin-bottom:1.2rem; }
.preloader-rings{ position:absolute; inset:0; width:100%; height:100%; }
.preloader-emblem{
  width:110px; height:110px; object-fit:contain; border-radius:50%;
  filter:drop-shadow(0 0 22px rgba(224,165,65,.45)); opacity:0; animation:preloaderPop .7s cubic-bezier(.2,.9,.3,1.2) .35s forwards;
}
.preloader-brand{ max-width:min(72vw,260px); height:auto; max-height:56px; object-fit:contain; opacity:0; animation:preloaderUp .8s ease .6s forwards; }
.preloader-bar{ width:min(60vw,220px); height:3px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:1.8rem; }
.preloader-bar i{
  display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--red-light),var(--gold));
  box-shadow:0 0 16px rgba(224,165,65,.5); animation:preloaderLoad 2.4s ease forwards;
}
.preloader-skip{ font-size:.72rem; color:rgba(255,255,255,.55); margin-top:.85rem; letter-spacing:.12em; opacity:0; animation:preloaderUp .8s ease .9s forwards; }

@keyframes preloaderPulseHalo{ 0%, 100%{ opacity:1; } 50%{ opacity:.5; } }
@keyframes preloaderPop{ from{ opacity:0; transform:scale(.55); } to{ opacity:1; transform:scale(1); } }
@keyframes preloaderUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes preloaderLoad{ 0%{ width:0; } 70%{ width:88%; } 100%{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .preloader *, .preloader{ animation-duration:.01ms !important; } }
@media (max-width: 600px){ .preloader-mark{ width:160px; height:160px; } .preloader-emblem{ width:90px; height:90px; } }

/* No overflow-x:hidden here on purpose: setting it on html/body breaks
   position:sticky (body would implicitly become its own scroll container).
   Horizontal overflow is instead contained per-section (.hero, .totes,
   .services, .proof, .site-footer, .mobile-menu, .section-deco all clip
   their own content), and the two real underlying overflow bugs — missing
   .video-grid breakpoint and grid items without min-width:0 — are fixed
   at the source. */
html{ max-width:100%; }
body{
  margin:0; color:var(--gray); background:var(--white);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); margin:0 0 .5em; line-height:1.2; color:var(--gray); }
p{ margin:0 0 1em; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
section{ position:relative; }
.accent{ color:var(--red); }

/* Visually hidden but readable by screen readers & search crawlers — used for
   section headings that matter for SEO/accessibility structure but would be
   visually redundant next to an already-clear eyebrow/quote. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--red);
}
.eyebrow::before{ content:''; width:26px; height:2px; background:var(--red); display:inline-block; }
.eyebrow.on-dark{ color:#e0a541; }
.eyebrow.on-dark::before{ background:#e0a541; }

.section-head{ text-align:center; max-width:680px; margin:0 auto 46px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); font-weight:800; }
.section-head p{ color:var(--gray); margin-top:10px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:14px;
  letter-spacing:.4px; text-transform:uppercase; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--red); border-color:rgba(255,255,255,.55); color:#fff; box-shadow:var(--shadow-card); }
.btn-solid:hover{ background:var(--red-dark); border-color:rgba(255,255,255,.75); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--red); color:var(--red); }
.btn-outline:hover{ background:var(--red); color:#fff; }
.btn-ghost-dark{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost-dark:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-white{ background:#fff; border-color:#fff; color:var(--red); }
.btn-white:hover{ background:transparent; color:#fff; }
.btn-sm{ padding:9px 18px; font-size:12px; }
.btn-xs{ padding:6px 14px; font-size:10.5px; letter-spacing:.3px; }
.btn-block{ width:100%; }

/* ---------- Topbar ---------- */
.topbar{
  background:var(--ink); color:#cfcfcf; font-size:13px;
  padding:8px 0;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar a{ color:#e7e2df; }
.topbar-left{ display:flex; align-items:center; gap:22px; }
.topbar-left span{ display:inline-flex; align-items:center; gap:8px; }
.topbar-left i{ color:var(--red-light); }
.topbar-social{ display:flex; align-items:center; gap:14px; }
.topbar-social a{
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); transition:background .15s ease, color .15s ease;
}
.topbar-social a:hover{ background:var(--red); color:#fff; }

/* ---------- Navbar ---------- */
.header-sticky{ position:sticky; top:0; z-index:900; }
.navbar{
  position:relative; overflow:hidden; background:var(--red);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:box-shadow .2s ease, padding .2s ease;
}
.header-sticky.is-scrolled .navbar{ box-shadow:0 8px 24px rgba(0,0,0,.22); }
/* Diagonal red-to-gray split, echoing the original brand header */
.navbar-split{
  position:absolute; inset:0; z-index:0; background:var(--gray);
  clip-path:polygon(66% 0, 100% 0, 100% 100%, 60% 100%);
}
.navbar .container{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:10px; padding-bottom:10px; }
.brand img{ height:40px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-weight:700; font-size:13.5px; letter-spacing:.6px; text-transform:uppercase; color:#fff;
  position:relative; padding:6px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#fff;
  transition:width .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:8px; }
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.4);
  background:transparent; align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:5px;
}

/* Shared diagonal red-to-gray split for mobile, spanning BOTH the navbar row
   and the cta-bar row below it as one continuous cut (desktop keeps its own
   .navbar-split scoped to the navbar only, since cta-bar is hidden there). */
.header-split-mobile{ display:none; }

/* Secondary toolbar: keeps the 3 CTAs reachable when the main nav-cta hides */
.cta-bar{
  display:none; background:var(--gray); padding:10px 16px; gap:10px; justify-content:center; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);
}
.cta-bar .btn{ border-color:rgba(255,255,255,.55); color:#fff; }
.cta-bar .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.nav-toggle span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Mobile off-canvas menu ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:1000; overflow-y:auto; display:flex; flex-direction:column;
  padding:22px 26px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg, var(--red) 0%, var(--red-dark) 100%);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,1,.36,1); visibility:hidden;
}
.mobile-menu.is-open{ transform:none; visibility:visible; }
.mm-deco{ position:absolute; top:8%; right:-60px; width:280px; height:280px; color:rgba(255,255,255,.06); pointer-events:none; z-index:0; }
.mobile-menu__head{
  position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.16);
}
.mobile-menu__close{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s ease;
}
.mobile-menu__close:hover{ background:#fff; color:var(--red); transform:rotate(90deg); }
.mm-nav{ position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; }
.mm-nav a{
  display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff; font-family:var(--font-head); font-weight:600; font-size:17px;
  opacity:0; transform:translateX(24px); transition:opacity .45s ease, transform .45s ease, background .2s ease, color .2s ease;
}
.mobile-menu.is-open .mm-nav a{ opacity:1; transform:none; transition-delay:calc(.1s + var(--i) * .06s); }
.mm-nav a:hover, .mm-nav a.active{ color:#ffd9d2; background:rgba(255,255,255,.06); border-radius:10px; }
.mm-ic{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:15px;
}
.mm-tx{ flex:1 1 auto; }
.mm-ar{ font-size:12px; color:rgba(255,255,255,.5); transition:transform .2s ease; }
.mm-nav a:hover .mm-ar{ transform:translateX(4px); }
.mm-foot{ position:relative; z-index:1; margin-top:24px; }
.mm-social{ display:flex; gap:10px; margin:18px 0 16px; }
.mm-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s ease;
}
.mm-social a:hover{ background:#fff; color:var(--red); transform:translateY(-2px); }
.mm-contact{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:11px; }
.mm-contact a, .mm-contact span{ display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.85); font-size:13.5px; }
.mm-contact i{ width:16px; color:#ffd9d2; }
.mm-contact a:hover{ color:#fff; }

@media (max-width: 991px){
  .topbar{ display:none; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .navbar-split{ display:none; }
  .cta-bar{ display:flex; }

  /* One diagonal cut behind both rows, instead of solid red navbar +
     solid gray cta-bar underneath it. .cta-bar needs to be explicitly
     positioned/stacked above the split, or (being a plain static element)
     it paints BEHIND the absolutely-positioned split and its buttons vanish. */
  .navbar, .cta-bar{ background:transparent; border-color:transparent; }
  .cta-bar{ position:relative; z-index:1; }
  .header-split-mobile{
    display:block; position:absolute; inset:0; z-index:0; background:var(--red);
  }
  .header-split-mobile::after{
    content:''; position:absolute; inset:0; background:var(--gray);
    clip-path:polygon(46% 0, 100% 0, 100% 100%, 8% 100%);
  }

  .nav-scrim{ display:none; position:fixed; inset:0; background:rgba(20,15,15,.5); z-index:840; }
  .nav-scrim.is-open{ display:block; }
}
@media (min-width: 992px){
  .mobile-menu, .nav-scrim, .cta-bar{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(180deg, var(--red-dark) 0%, var(--red) 100%);
  padding:56px 0 64px;
}
.hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; filter:blur(3px) brightness(.9); transform:scale(1.03);
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:0; background:rgba(30,28,28,.55);
}
.hero-inner{ position:relative; z-index:2; text-align:center; max-width:800px; margin:0 auto; }
.hero h1{ font-size:clamp(34px,5.4vw,58px); font-weight:800; color:#fff; margin-bottom:14px; }
.hero h1 span{ color:#e0a541; }
.hero p.lead{ font-size:18px; color:#e9dede; max-width:620px; margin:0 auto 26px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
/* "Proceed Getting Free Moving Quote" — a touch of transparency so the
   blurred background video reads through it, instead of a flat solid fill. */
.hero-ctas .btn-solid{ background:rgba(153,17,21,.5); }
.hero-ctas .btn-solid:hover{ background:rgba(109,13,16,.65); }
.hero-trust{
  margin-top:32px; display:flex; flex-wrap:wrap; gap:28px; justify-content:center;
  font-size:13.5px; color:#ecdede; letter-spacing:.3px;
}
.hero-trust b{ color:#fff; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust i{ color:var(--gold); }

@media (max-width: 560px){
  .hero p.lead{ font-size:14.5px; margin-bottom:20px; }
  .hero-trust{ flex-direction:column; gap:10px; margin-top:22px; }
}

/* Decorative animated layer: rotating route-rings + floating truck/pin/dot icons */
.hero-deco{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-deco svg{ position:absolute; opacity:.5; }
.deco-ring{ opacity:.35; }
.deco-icon{ opacity:.45; }
.deco-spin-slow{ animation:decoSpin 46s linear infinite; }
.deco-spin-rev{ animation:decoSpin 60s linear infinite reverse; }
.deco-float{ animation:decoFloat 7s ease-in-out infinite; }
.deco-float-delay{ animation:decoFloat 8.5s ease-in-out infinite; animation-delay:1.4s; }
@keyframes decoSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes decoFloat{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(6deg); }
}
@media (max-width: 700px){ .hero-deco{ opacity:.6; } }

/* ---------- Marquee ticker ---------- */
.ticker{ background:var(--red); color:#fff; overflow:hidden; padding:13px 0; }
.ticker-track{ display:flex; width:max-content; gap:60px; animation:ticker var(--ticker-duration, 32s) linear infinite; }
.ticker-track span{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:14px; white-space:nowrap; }
.ticker-track i{ color:#e0a541; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Totes promo ---------- */
.totes{
  padding:96px 0; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #6b6b6b 0%, #4a4a4a 100%);
}
.totes-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; }
.totes-grid > *{ min-width:0; }
.totes-copy h2{ color:#fff; }
.totes-copy p{ color:#e2e0e0; }
.totes-copy .note{
  background:rgba(255,255,255,.1); border-left:4px solid var(--red-light); padding:14px 18px; border-radius:0 10px 10px 0;
  font-size:14.5px; color:#fff;
}
.totes-copy .call-line{ margin-top:22px; font-size:15px; color:#e2e0e0; }
.totes-copy .call-line a{ color:#fff; font-weight:800; }
.totes-img{ position:relative; text-align:center; perspective:1100px; }
.totes-img img{
  margin:0 auto; max-width:100%; width:420px; filter:drop-shadow(0 24px 34px rgba(0,0,0,.35));
  transform-style:preserve-3d; will-change:transform; backface-visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.totes-img .ring{
  position:absolute; inset:6% 12%; border:2px dashed rgba(255,255,255,.35);
  border-radius:50%; z-index:-1;
}
/* Cursor-follow gloss highlight, positioned via --sx/--sy set from JS */
.totes-shine{
  position:absolute; left:50%; top:50%; width:420px; max-width:100%; aspect-ratio:600/404;
  transform:translate(-50%,-50%); pointer-events:none; border-radius:14px; z-index:1;
  opacity:0; transition:opacity .35s ease; mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.8), transparent 55%);
}
.totes-img.is-hovering .totes-shine{ opacity:.9; }
/* Soft contact shadow that breathes with the pinned scroll sequence */
.totes-img::after{
  content:''; position:absolute; left:50%; bottom:2%; width:60%; height:22px; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 70%);
  transform:translateX(-50%); filter:blur(2px);
}
@media (max-width: 900px){ .totes-img{ perspective:none; } }

@media (max-width: 900px){
  .totes-grid{ grid-template-columns:1fr; }
  .totes-img{ order:-1; }
}

/* ---------- Services ---------- */
.services{
  padding:100px 0; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--red) 0%, var(--red-dark) 100%);
}
.services .section-head h2{ color:#fff; }
.services .section-head p{ color:#f2dede; }
.services .eyebrow{ color:#e0a541; justify-content:center; display:flex; }
.services-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; perspective:1400px;
}
.svc-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  padding:30px 24px; text-align:center; backdrop-filter:blur(2px); transform-origin:top center;
  backface-visibility:hidden;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.svc-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); }
.svc-icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:16px; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#e0a541;
}
.svc-card h3{ color:#fff; font-size:18px; margin-bottom:8px; }
.svc-card .cap{ font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:#f0d2d2; font-weight:700; margin-bottom:10px; }
.svc-card .desc{
  font-size:13.5px; color:#f3dede; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .25s ease, opacity .25s ease, margin .25s ease;
}
.svc-card:hover .desc{ max-height:140px; opacity:1; margin-top:6px; }

@media (max-width: 1080px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- Our Story teaser ---------- */
.story-teaser{ padding:110px 0; background-color:var(--bg-soft); position:relative; overflow:hidden; }
.story-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.story-grid > *{ min-width:0; }
.story-logo{ max-width:280px; margin-bottom:26px; }
.audio-player{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:10px 18px 10px 10px; box-shadow:var(--shadow-soft); max-width:340px;
}
.audio-play{
  width:46px; height:46px; border-radius:50%; background:var(--red); color:#fff; border:0;
  display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex:none;
  transition:background .15s ease, transform .15s ease;
}
.audio-play:hover{ background:var(--red-dark); transform:scale(1.05); }
.audio-meta{ flex:1; min-width:0; }
.audio-meta .lbl{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--gray); margin-bottom:6px; }
.audio-bar{ position:relative; height:5px; border-radius:3px; background:var(--line); overflow:hidden; cursor:pointer; }
.audio-bar-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--red); border-radius:3px; }
.audio-time{ font-size:11px; color:var(--gray-soft); margin-top:6px; }
.story-quote{ font-size:19px; color:var(--gray); font-style:italic; margin-bottom:26px; }
.story-quote b{ font-style:normal; }

@media (max-width: 900px){ .story-grid{ grid-template-columns:1fr; } }

/* ---------- Reviews ---------- */
.reviews{ padding:100px 0; background-color:#e3e3e3; position:relative; overflow:hidden; }
.reviews-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.reviews-grid > *{ min-width:0; }
.review-col{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-soft);
  overflow:hidden; /* contain the 3rd-party Trustindex widget if it ever mis-measures its width on first load */
}
.review-col .platform{ text-align:center; margin-bottom:16px; font-weight:800; font-size:12px; letter-spacing:2px; color:var(--red); text-transform:uppercase; }
.review-embed-slot{ min-height:220px; max-width:100%; overflow:hidden; }
.review-embed-slot iframe, .review-embed-slot > div{ max-width:100% !important; }
.reviews-agg{
  margin:44px auto 0; max-width:280px; text-align:center; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; background:#fff; box-shadow:var(--shadow-soft);
}
.reviews-agg .stars{ color:var(--gold); font-size:20px; }
.reviews-agg .score{ font-size:22px; font-weight:800; margin-top:6px; }
.reviews-agg .score span{ color:var(--gray); font-weight:500; font-size:14px; }

@media (max-width: 980px){ .reviews-grid{ grid-template-columns:1fr; } }

/* ---------- Video + gallery ---------- */
.proof{
  padding:100px 0; color:#fff; position:relative; overflow:hidden;
  background-color:var(--red); background-image:linear-gradient(160deg,var(--red-dark),var(--red));
}
.proof-quote{ text-align:center; font-size:22px; font-weight:600; max-width:820px; margin:0 auto 54px; }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:64px; }
.video-card video{ width:100%; max-width:100%; border-radius:12px; background:#000; aspect-ratio:4/3; object-fit:cover; }
.video-card h3{ color:#fff; margin-top:16px; font-size:15px; }
.video-card p{ color:#f2d9d9; font-size:13.5px; }
@media (max-width: 860px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .video-grid{ grid-template-columns:1fr; } }

.gallery{ position:relative; }
.gallery-viewport{
  position:relative; width:100%; max-width:360px; aspect-ratio:3/4; margin:0 auto;
  border-radius:14px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,.3); border:3px solid rgba(255,255,255,.25);
}
.gallery-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0;
  cursor:zoom-in; opacity:0; transform:scale(1.02); transition:opacity .7s ease, transform .7s ease; border:0;
}
.gallery-slide.is-active{ opacity:1; transform:scale(1); z-index:1; }
.gallery-dots{ display:flex; justify-content:center; gap:10px; margin-top:20px; }
.gallery-dots .dot{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:transparent;
  cursor:pointer; padding:0; transition:background .2s ease, transform .2s ease;
}
.gallery-dots .dot.is-active{ background:#fff; transform:scale(1.2); }
.gallery-dots .dot:hover{ background:rgba(255,255,255,.7); }

/* Lightbox */
.lightbox{
  display:none; position:fixed; inset:0; z-index:2000; background:rgba(10,8,8,.92);
  align-items:center; justify-content:center; padding:30px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:8px; }
.lightbox-close{
  position:absolute; top:20px; right:26px; background:transparent; border:0; color:#fff; font-size:30px; cursor:pointer;
}

/* ---------- License strip ---------- */
.license-strip{
  background-color:var(--gray); color:#fff; text-align:center; padding:14px 0; font-size:13px; letter-spacing:.4px;
}
.license-strip b{ color:#fff; }

/* ---------- Footer ---------- */
.site-footer{ background-color:var(--ink); color:#cfc8c8; padding-top:70px; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:50px; }
.footer-grid > *{ min-width:0; }
.footer-logo{ height:38px; margin-bottom:16px; }
.site-footer p{ color:#b9b0b0; font-size:14px; }
.footer-col h5{ color:#fff; font-size:14px; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#cfc8c8; font-size:14px; transition:color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex;
  align-items:center; justify-content:center; transition:background .15s ease;
}
.footer-social a:hover{ background:var(--red); }
.footer-share{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.footer-share a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex;
  align-items:center; justify-content:center; transition:background .15s ease;
}
.footer-share a:hover{ background:var(--red); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#cfc8c8; }
.footer-contact i{ color:#e0a541; margin-top:3px; }
.footer-map{ border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.14); }
.footer-map iframe{ width:100%; height:230px; border:0; filter:grayscale(.15); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:20px 0; font-size:12.5px; color:#a89f9f;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}
.footer-bottom a{ color:#cfc8c8; }
.footer-bottom a:hover{ color:#fff; }

@media (max-width: 992px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; left:20px; bottom:20px; z-index:500; color:#fff;
  display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:rgba(37,211,102,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.35);
  font-weight:700; font-size:13px; letter-spacing:.4px; box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:transform .2s ease, background .2s ease;
}
.wa-float:hover{ transform:translateY(-3px); background:rgba(37,211,102,.7); color:#fff; }
.wa-float .wa-ic{ position:relative; display:flex; align-items:center; justify-content:center; flex:none; }
.wa-float .wa-ic::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(255,255,255,.6);
  animation:waPulse 2.2s ease-out infinite;
}
.wa-float i{ font-size:17px; position:relative; z-index:1; }
@keyframes waPulse{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(1.6); opacity:0; } }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:500; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; border:0; cursor:pointer;
}
.to-top.is-visible{ opacity:1; pointer-events:auto; }
.to-top:hover{ background:var(--red); }

/* ---------- Reveal-on-scroll (plain CSS + IntersectionObserver) ----------
   Replaced the old GSAP/ScrollTrigger version: dozens of simultaneous
   ScrollTrigger instances recalculating on every scroll frame were visibly
   janky/delayed on mobile. This is just a CSS transition toggled by one
   shared IntersectionObserver (assets/js/animations_al.js).
   Scoped to html.js so if JS never runs at all, nothing stays hidden —
   .reveal-init is only ever added to an element right before observing it. */
.reveal{ will-change:transform, opacity; }
html.js .reveal-init{
  opacity:0; transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
  will-change:transform, opacity;
}
html.js .reveal-init.is-visible{ opacity:1; transform:none; }
html.js .review-col.reveal-init{ transform:translateX(-32px); }
html.js .review-col.reveal-init:nth-child(even){ transform:translateX(32px); }
html.js .timeline-item.reveal-init{ transform:translateX(-28px); }
html.js .timeline-item.reveal-init:nth-child(even){ transform:translateX(28px); }
html.js .review-col.reveal-init.is-visible, html.js .timeline-item.reveal-init.is-visible{ transform:none; }

.timeline-track-fill{ transition:transform 1.3s ease; }
.timeline-track-fill.is-filled{ transform:scaleY(1); }

.svc-icon{ transition:transform .3s ease; }
.svc-card:hover .svc-icon{ transform:rotate(-8deg) scale(1.08); }

/* Hero entrance — plain CSS keyframes, no JS/scroll needed at all (it's
   already in the viewport the instant the page opens). */
@keyframes heroUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
html.js .hero-inner .eyebrow{ opacity:0; animation:heroUp .7s ease .05s forwards; }
html.js .hero-inner h1{ opacity:0; animation:heroUp .8s ease .15s forwards; }
html.js .hero-inner .lead{ opacity:0; animation:heroUp .7s ease .3s forwards; }
html.js .hero-inner .hero-ctas{ opacity:0; animation:heroUp .7s ease .42s forwards; }
html.js .hero-inner .hero-trust{ opacity:0; animation:heroUp .7s ease .54s forwards; }
html.js #pageHeroInner .eyebrow{ opacity:0; animation:heroUp .6s ease .05s forwards; }
html.js #pageHeroInner h1{ opacity:0; animation:heroUp .7s ease .15s forwards; }
html.js #pageHeroInner .breadcrumb{ opacity:0; animation:heroUp .6s ease .28s forwards; }

@media (prefers-reduced-motion: reduce){
  html.js .reveal-init{ transition:none; }
  html.js .hero-inner .eyebrow, html.js .hero-inner h1, html.js .hero-inner .lead,
  html.js .hero-inner .hero-ctas, html.js .hero-inner .hero-trust,
  html.js #pageHeroInner .eyebrow, html.js #pageHeroInner h1, html.js #pageHeroInner .breadcrumb{
    animation:none; opacity:1; transform:none;
  }
}

/* ---------- Inner page hero (Our Story / Privacy Policy) ---------- */
.page-hero{
  padding:70px 0 60px; color:#fff; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(125deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
}
.page-hero::before{
  content:''; position:absolute; inset:0; background:url('../../images/BG-Q-1.png') center/cover no-repeat;
  opacity:.3; mix-blend-mode:overlay;
}
.page-hero > *{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size:clamp(30px,4.6vw,46px); }
.breadcrumb{ font-size:13px; color:#e9d7d7; margin-top:10px; }
.breadcrumb a{ color:#fff; font-weight:700; }

/* ---------- Our Story page content ---------- */
.story-page{ padding:90px 0; }
.story-page .lead-block{ max-width:820px; margin:0 auto 60px; text-align:center; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:50px 0 70px; }
.stat-box{ text-align:center; padding:26px 14px; border:1px solid var(--line); border-radius:var(--radius); }
.stat-box .num{ font-size:30px; font-weight:800; color:var(--red); }
.stat-box .lbl{ font-size:12.5px; letter-spacing:.4px; color:var(--gray); text-transform:uppercase; margin-top:6px; }
.timeline{ position:relative; max-width:820px; margin:0 auto; padding-left:22px; }
.timeline::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--line); }
.timeline-track-fill{
  position:absolute; left:0; top:6px; width:2px; height:calc(100% - 12px); background:var(--red);
  transform-origin:top; transform:scaleY(0); z-index:1;
}
.timeline-item{ position:relative; display:grid; grid-template-columns:110px 1fr; gap:26px; padding:26px 0; border-bottom:1px solid var(--line); }
.timeline-item::before{
  content:''; position:absolute; left:-27px; top:32px; width:11px; height:11px; border-radius:50%;
  background:var(--white); border:2px solid var(--line); z-index:2;
  transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.timeline-item.is-lit::before{ background:var(--red); border-color:var(--red); transform:scale(1.35); box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 20%, transparent); }
.timeline-item:last-child{ border-bottom:0; }
.timeline-item .yr{ font-weight:800; color:var(--red); font-size:20px; }
.timeline-item h3{ margin-bottom:8px; }
.timeline-item p{ color:var(--gray); margin:0; }
@media (max-width: 700px){
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .timeline{ padding-left:0; }
  .timeline::before, .timeline-track-fill, .timeline-item::before{ display:none; }
  .timeline-item{ grid-template-columns:1fr; gap:6px; }
}

/* ---------- Privacy policy page content ---------- */
.policy-page{ padding:90px 0; }
.policy-body{ max-width:840px; margin:0 auto; }
.policy-meta{ color:var(--gray); font-size:13.5px; margin-bottom:40px; }
.policy-body h2{ font-size:20px; margin-top:44px; padding-top:6px; border-top:1px solid var(--line); }
.policy-body h2#s1{ border-top:0; margin-top:0; }
.policy-body h3{ font-size:16px; margin-top:20px; }
.policy-body p{ color:var(--gray); }
.policy-body ul{ margin:0 0 1em; padding-left:20px; list-style:disc; color:var(--gray); }
.policy-toc{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin-bottom:44px; background:var(--bg-soft);
}
.policy-toc h2{ margin-top:0; padding-top:0; border-top:0; font-size:14px; text-transform:uppercase; letter-spacing:.6px; }
.policy-toc ol{ columns:2; column-gap:24px; padding-left:18px; color:var(--gray); font-size:14px; }
.policy-toc li{ margin-bottom:6px; }
@media (max-width: 600px){ .policy-toc ol{ columns:1; } }