/* ============================================================
   ETouch Sites — MMW-LANGUAGE PASS (v3)
   ------------------------------------------------------------
   Adopted from makemywebsite.com.au (measured, not eyeballed):
     - icon stat tiles          (their sections 5/6 signature)
     - trusted-by logo strip    (their sections 29/35)
     - testimonial carousel     (their section 31)
     - glass surfaces           (backdrop-filter, 10 uses there)
     - clip-path scroll reveals (3 uses there)
     - scroll choreography      (ScrollTrigger there)

   NOT copied: Elementor's 295KB inline CSS, jQuery, Slick, their
   copy, their imagery, or their layout wrappers. Those are exactly
   what make a page feel copied. Their page weighs 734KB; ours stays
   under ~120KB with the same visual language.
   ============================================================ */

/* ---------- shared tokens (extend the mmw.css set) ---------- */
:root{
  --mmw-glass: rgba(255,255,255,.06);
  --mmw-glass-line: rgba(255,255,255,.12);
  --mmw-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   HERO — MMW landing-page corrections (v4)
   ------------------------------------------------------------
   Measured from makemywebsite.com.au's landing page:
     - the "black square" (about-frame.webp) sits BEHIND the
       circle, with the circle punched out of it
     - the red shape is a CIRCLE (border-radius:50%), nested
       INSIDE the white ring, both overlapping the bottom-right
       of the circle
     - a dark "Trusted by / 1000+ / Clients" circular badge
       overlaps the circle on the LEFT
     - the counter row is a bordered box of 4 divided cells
   Ours keeps our own art and content and adopts that geometry.

   The badge / ring / ball are children of .hero__disc so they
   track the disc exactly at every viewport, instead of being
   pinned to the hero with magic numbers.
   ============================================================ */

/* --- the disc is now the positioning context --- */
.hero__disc{
  position:relative;
  width:min(430px,58vw);aspect-ratio:800/892;
  filter:drop-shadow(0 30px 60px rgba(26,26,26,.22));
  animation:discIn .9s var(--ease) both, discFloat 7s ease-in-out 1s infinite;
}
.hero__disc img{
  width:100%;height:100%;object-fit:contain;display:block;
}
/* the wordmark sits below the disc, inside the black frame */
.hero__wordmark{
  position:absolute;left:50%;bottom:5.5%;
  width:52%;height:auto;object-fit:contain;
  transform:translateX(-50%);
  filter:brightness(0) invert(1);
  opacity:.92;
}

/* --- the white ring + red circle, NESTED, over the bottom-right --- */
.hero__ring{
  position:absolute;z-index:3;pointer-events:none;
  width:47%;aspect-ratio:1;
  right:-11%;bottom:-2%;
  border:2px solid rgba(255,255,255,.92);border-radius:50%;
  transform-origin:center bottom;
  animation:bounce 5s ease-out infinite;
}
.hero__ball{
  position:absolute;z-index:4;pointer-events:none;
  width:33.5%;aspect-ratio:1;
  right:-3.5%;bottom:1.5%;
  background:var(--mmw-red);
  border-radius:50%;
  transform-origin:center bottom;
  animation:banner3Shake 5s ease-out 1s infinite;
  box-shadow:0 16px 40px rgba(237,28,36,.40);
}
.hero__ball::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.32), rgba(255,255,255,0) 56%);
}

/* --- the dark circular "Trusted by" badge, overlapping the left --- */
.hero__badge{
  position:absolute;z-index:5;pointer-events:none;
  width:37%;aspect-ratio:1;
  left:-17%;top:22%;
  border-radius:50%;
  background:var(--mmw-ink);
  box-shadow:0 20px 46px rgba(0,0,0,.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6%;
}
.hero__badge__k{
  font-family:var(--font-body);font-size:clamp(8px,1vw,11px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mmw-red);
}
.hero__badge__n{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,3.4vw,34px);line-height:1.05;letter-spacing:-.02em;color:#fff;
  margin:1px 0 2px;
}
.hero__badge__l{
  font-family:var(--font-body);font-size:clamp(8px,.95vw,11.5px);line-height:1.3;
  color:#A8ADB5;letter-spacing:.04em;
}

/* --- review card: it's a link now, so kill the underline --- */
.hero__review{text-decoration:none;}
.hero__review:hover{transform:translateY(-3px);box-shadow:0 22px 52px rgba(26,26,26,.22);}

/* --- reduced motion: hold the pose --- */
@media (prefers-reduced-motion:reduce){
  .hero__ring,.hero__ball{animation:none !important;}
  .hero__disc{animation:none !important;}
}

/* ============================================================
   1. ICON STAT TILES
   MMW runs a 4-tile row with an icon above an animated counter.
   Their tiles: Satisfied Clients / 5-star rated / Customer Service /
   Years Of Expertise. Ours use our real numbers.
   ============================================================ */
.tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--mmw-line-soft);
  border:1px solid var(--mmw-line-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.tile{
  position:relative;
  background:var(--mmw-ink);
  padding:38px 26px 34px;
  text-align:center;
  overflow:hidden;
  transition:background .35s var(--ease);
}
.tile::after{
  content:'';position:absolute;inset:auto 0 0;height:3px;
  background:var(--mmw-red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.tile:hover{background:#0C0E12;}
.tile:hover::after{transform:scaleX(1);}

.tile__icon{
  width:64px;height:64px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(237,28,36,.20), rgba(237,28,36,.05) 70%);
  border:1px solid rgba(237,28,36,.30);
  color:var(--mmw-red);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tile:hover .tile__icon{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 14px 30px rgba(237,28,36,.22);
}
.tile__icon svg{width:28px;height:28px;display:block;}

.tile__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--mmw-white);
  margin-bottom:10px;
}
.tile__num b{font-size:.52em;font-weight:600;color:var(--mmw-red);}
.tile__label{
  font-family:var(--font-body);
  font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:#8A9099;
}

/* ============================================================
   2. TRUSTED-BY LOGO STRIP
   MMW runs this twice (partner logos + client logos). One band
   here, with the real logos we already ship.
   ============================================================ */
.trust{
  background:var(--mmw-white);
  padding:74px 0;
  border-top:1px solid rgba(0,0,0,.06);
}
.trust__head{text-align:center;margin-bottom:42px;}
.trust__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:-.015em;
  color:var(--mmw-heading);margin:0 0 8px;
}
.trust__sub{
  font-family:var(--font-body);font-size:16px;color:var(--mmw-body);margin:0;
}

.trust__marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.trust__track{
  display:flex;align-items:center;gap:74px;
  width:max-content;
  animation:trustScroll 42s linear infinite;
}
.trust__marquee:hover .trust__track{animation-play-state:paused;}
@keyframes trustScroll{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}
}
.trust__item{
  display:flex;align-items:center;justify-content:center;
  height:66px;flex:0 0 auto;
  opacity:.62;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.trust__item:hover{opacity:1;transform:translateY(-3px);}
.trust__logo{
  max-height:56px;width:auto;display:block;
  /* keep the brand colours - full greyscale made them look washed out */
  filter:grayscale(.35) contrast(.95) opacity(.78);
  transition:filter .35s var(--ease),opacity .35s var(--ease);
}
.trust__item:hover .trust__logo{filter:none;opacity:1;}

/* ============================================================
   3. TESTIMONIAL CAROUSEL
   Swiper, lazy-loaded only when this band is near the viewport.
   ============================================================ */
.testi{
  position:relative;
  padding:96px 0 104px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(237,28,36,.09), transparent 62%),
    var(--mmw-ink);
  overflow:hidden;
}
.testi__head{text-align:center;max-width:720px;margin:0 auto 54px;}
.testi__head .eyebrow{justify-content:center;}
.testi__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.6vw,44px);line-height:1.14;letter-spacing:-.02em;
  color:var(--mmw-white);margin:0 0 16px;
}
.testi__sub{
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  color:#A8ADB5;margin:0;
}
.testi__sub a{color:var(--mmw-white);text-decoration:underline;text-underline-offset:3px;}

/* Baseline = a working horizontal scroller (no JS, no CDN needed).
   Swiper's CSS takes over when the library loads; `.swiper-initialized`
   resets the CSS gap so it doesn't double up with Swiper's spaceBetween. */
.tswiper{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
}
.tswiper::-webkit-scrollbar{display:none;}
.tswiper .swiper-wrapper{display:flex;gap:22px;}
.tswiper .swiper-slide{
  height:auto;display:flex;
  padding:0 14px;box-sizing:border-box;
  scroll-snap-align:start;
}
.tswiper.swiper-initialized{overflow:hidden;scroll-snap-type:none;}
.tswiper.swiper-initialized .swiper-wrapper{gap:0;}

/* chrome only appears once Swiper is live */
.testi .swiper-pagination,
.testi .swiper-button-next,
.testi .swiper-button-prev{display:none;}
.testi .swiper-initialized + .swiper-pagination{display:flex;}
.testi .swiper-initialized ~ .swiper-button-next,
.testi .swiper-initialized ~ .swiper-button-prev{display:block;}
.tslide{
  position:relative;
  width:100%;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid var(--mmw-glass-line);
  border-radius:var(--radius-lg);
  padding:38px 36px 32px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  display:flex;flex-direction:column;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.tslide:hover{border-color:rgba(237,28,36,.42);transform:translateY(-4px);}
.tslide__stars{
  color:#FBBC05;font-size:17px;letter-spacing:2px;line-height:1;
  margin-bottom:20px;
}
.tslide__quote{
  font-family:var(--font-body);
  font-size:17.5px;line-height:1.72;color:#E4E7EB;
  margin:0 0 26px;flex:1;
}
.tslide__quote::before{content:'“';color:var(--mmw-red);font-size:1.4em;line-height:0;margin-right:2px;}
.tslide__quote::after{content:'”';color:var(--mmw-red);font-size:1.4em;line-height:0;margin-left:2px;}
.tslide__foot{
  display:flex;align-items:center;gap:13px;
  padding-top:20px;border-top:1px solid var(--mmw-glass-line);
}
.tslide__avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  color:#fff;
  background:conic-gradient(#EA4335 0 25%,#4285F4 0 50%,#FBBC05 0 75%,#34A853 0);
}
.tslide__who{font-family:var(--font-display);font-weight:600;font-size:15px;color:#fff;}
.tslide__where{font-family:var(--font-body);font-size:12.5px;color:#8A9099;letter-spacing:.04em;}

/* swiper chrome */
.testi .swiper-pagination{
  position:static;margin-top:40px;
  display:flex;gap:9px;justify-content:center;
}
.testi .swiper-pagination-bullet{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.22);opacity:1;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.testi .swiper-pagination-bullet-active{background:var(--mmw-red);transform:scale(1.25);}
.testi .swiper-button-next,
.testi .swiper-button-prev{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--mmw-glass-line);
  color:#fff;
  transition:background .3s var(--ease),border-color .3s var(--ease);
  top:calc(50% - 40px);margin-top:0;
}
.testi .swiper-button-next:hover,
.testi .swiper-button-prev:hover{background:var(--mmw-red);border-color:var(--mmw-red);}
.testi .swiper-button-next::after,
.testi .swiper-button-prev::after{font-size:17px;font-weight:700;}

.testi__note{
  text-align:center;margin-top:30px;
  font-family:var(--font-body);font-size:13px;color:#767C85;
}
.testi__note a{color:#A8ADB5;}

/* ============================================================
   4. GLASS + CLIP-PATH POLISH (their techniques, our surfaces)
   ============================================================ */
.glass{
  background:var(--mmw-glass);
  border:1px solid var(--mmw-glass-line);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}

/* clip-path reveal variant for wide blocks */
.reveal-clip{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--ease-out);
  will-change:clip-path;
}
.reveal-clip.in{clip-path:inset(0 0 0 0);}

/* ============================================================
   5. SCROLL CHOREOGRAPHY
   Parallax driven by a CSS custom property, updated in one rAF
   pass. Cheaper and smoother than a 43KB ScrollTrigger for the
   same visual result.
   ============================================================ */
[data-parallax]{
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .tiles{grid-template-columns:repeat(2,1fr);}
  .trust__track{gap:48px;}
}
@media (max-width:640px){
  .tiles{grid-template-columns:1fr;}
  .tile{padding:30px 20px 28px;}
  .tile__icon{width:56px;height:56px;margin-bottom:16px;}
  .testi{padding:72px 0 80px;}
  .tslide{padding:28px 24px 26px;}
  .tslide__quote{font-size:16px;}
  .trust{padding:56px 0;}
  .trust__track{gap:38px;}
  .testi .swiper-button-next,.testi .swiper-button-prev{display:none;}
}

/* ============================================================
   7. REDUCED MOTION
   Every loop stops. MMW does not do this — we do.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .trust__track{animation:none;transform:none;}
  [data-parallax]{transform:none;}
  .reveal-clip{clip-path:none;transition:none;}
  .tile:hover .tile__icon{transform:none;}
  .tslide:hover{transform:none;}
  .hero__ball,.hero__ring{animation:none !important;}
}