/* ============================================================
   Penta Tech — home.css  (Figma frame 0:3 HOMEAPPROVED, 1920px)
   All rem values = Figma px / 16
   ============================================================ */

/* ============================================================
   BANNER  (0:4)  — page y 120..1336
   ============================================================ */
.home-banner {
  position: relative;
  height: 76rem;                 /* 1336-120 = 1216 */
}
.banner-panel {
  position: absolute;
  left: 2.5rem;                  /* 40 */
  top: 0.375rem;                 /* 126-120 */
  width: 115rem;                 /* 1840 */
  height: 68.75rem;              /* 1100 */
  border-radius: 6.25rem;        /* 100 */
  background: var(--green-panel) url("../assets/images/hero-panel-pattern.png") center / cover no-repeat;
  overflow: hidden;              /* clip the person media to the rounded panel */
}
/* Hero visual — rebuilt to the exact Figma composition (Group 10730). Three layers,
   each pinned by a percentage of .banner-panel (the reference box): a teal pentagon
   BEHIND, the pentagon-masked person carousel (cross-fades the CMS "Home Banner
   Images"), and a mint pentagon accent IN FRONT (screen blend). The wrapper spans the
   whole panel so every % maps 1:1 to the Figma panel; layers bleed ~2% past the panel
   and are clipped by .banner-panel { overflow:hidden } — exactly like Figma. */
.banner-hero-media {
  pointer-events: none;
  position: absolute;
  inset: 0;                      /* = the panel box (Figma 1840×1100) */
  z-index: 2;
}
.banner-hero-media__shape-back {
  /* Figma Vector 3 (0:12) — teal pentagon behind the person. */
  position: absolute;
  left: 58.86%;
  top: -12%;                     /* bleeds above panel top; clipped */
  width: 43.32%;
  height: auto;                  /* native 797:888 → measured 80.7% of panel */
  z-index: 0;
}
.banner-hero-media__frame {
  /* Figma "Mask group" (0:13) — the pentagon person window; holds the cross-fading
     CMS photos, clipped to the exact frame shape. */
  position: absolute;
  left: 62.39%;
  top: 2.33%;
  width: 39.78%;
  aspect-ratio: 732 / 712.437;   /* = 64.82% of panel height */
  overflow: hidden;
  z-index: 1;
  -webkit-mask: url("../assets/images/hero-person-mask.png?v=4") center / 100% 100% no-repeat;
          mask: url("../assets/images/hero-person-mask.png?v=4") center / 100% 100% no-repeat;
}
.banner-hero-media__img {
  /* Person photo fills the pentagon. The box is a bit larger than the frame so
     object-fit:cover never distorts a swapped CMS photo; left:0 keeps the subject
     centred in the frame (the earlier −20.49% shifted her too far left). */
  position: absolute;
  top: 0;
  left: 0;
  width: 143.96%;                /* 1053.769 / 732 */
  height: 133.33%;               /* 949.912 / 712.437 */
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.banner-hero-media__img.is-active { opacity: 1; }
.banner-hero-media__shape-front {
  /* Figma Vector 3 (0:16) — mint pentagon accent, fill #2E8471 over a screen blend so
     it tints the panel/person beneath just as in Figma. */
  position: absolute;
  left: 85.14%;
  top: 23.49%;
  width: 17.07%;
  height: auto;                  /* native 314:596 → measured 54.2% of panel */
  z-index: 3;
  mix-blend-mode: screen;
}
.banner-content {
  z-index: 3;
  position: absolute;
  left: 8.8125rem;               /* 141 */
  top: 15.75rem;                 /* 372-120 */
}
.banner-title {
  font-size: 5rem;               /* 80 */
  line-height: 6.25rem;          /* 100 */
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.banner-title strong { font-weight: 800; }
/* Hero headline slider: stack every slide in one grid cell so the block keeps the
   height of the tallest headline and the buttons below never jump; JS cross-fades
   between them (see script.js). */
.banner-title-slider { display: grid; }
.banner-title-slider .banner-slide {
  pointer-events: none;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.banner-title-slider .banner-slide.is-active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.banner-btns {
  display: flex;
  gap: 0.9375rem;                /* 398-343 = 55? contact ends 343, next starts 398 → 55 */
  margin-top: 3.75rem;           /* 732-372-300 = 60 */
}
.banner-btns .btn--white { width: 12.5625rem; }   /* 201 */
.banner-btns .btn--wide { width: 17.625rem; margin-left: 2.5rem; }  /* 282; gap 55 total */

/* dark services bar (shared pieces in common.css) */
.banner-services {
  position: absolute;
  left: 8.8125rem;               /* 141 */
  top: 57.25rem;                 /* 1036-120 */
  width: 102.4375rem;            /* 1639 */
  height: 18.75rem;              /* 300 */
  border-radius: 3.125rem;       /* 50 */
  background: url("../assets/images/servicesbar-texture.png") center / cover no-repeat, #0a1821;
  background-blend-mode: difference, normal;
}
/* item positions (generic .bs-item rules live in common.css, shared with Service Details bar) */
.bs-item--web { left: 4.75rem; }        /* 76  (card col, as Figma) */
.bs-item--graphic { left: 32.96875rem; } /* label centers on 788.5 = cell 2 midpoint */
.bs-item--digital { left: 59.46875rem; } /* label centers on 1212.5 = cell 3 midpoint */
.bs-item--qb { left: 85.78125rem; }      /* label centers on 1633.5 (Figma) */

.bs-divider--1 { left: 27.1875rem; }  /* 576-141 = 435 */
.bs-divider--2 { left: 53.6875rem; }  /* 1000-141 = 859 */
.bs-divider--3 { left: 80.1875rem; }  /* 1424-141 = 1283 */

/* ============================================================
   ABOUT  (0:123) — page y 1486..2396 (section top gap 150)
   ============================================================ */
.home-about {
  position: relative;
  height: 56.875rem;             /* 910 */
  margin-top: 9.375rem;          /* 1486-1336 = 150 */
}
.ha-photo1 {
  position: absolute;
  left: 2.5rem;                  /* 40 */
  top: 0;
  width: 23.3125rem;             /* 373 */
  height: 27.625rem;             /* 442 */
  isolation: isolate;            /* contain the overlay's multiply blend to this
                                    image only, matching Figma's grouped layer */
}
.ha-photo1__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ha-photo1__overlay {
  position: absolute; inset: 0;
  background: rgba(7, 114, 91, 0.5);
  mix-blend-mode: multiply;
  border-radius: 1.875rem;       /* 30 */
}
.ha-photo1__logo {
  position: absolute;
  left: 2.4375rem;               /* 79-40 */
  top: 3.125rem;                 /* 1536-1486 */
  width: 18.376rem;              /* 294 */
  height: 21.2716rem;            /* 340.35 */
}
/* Figma: the logo MARK is a white watermark with soft-light blend (photo shows
   through), while the "Pentacodes" wordmark + tagline are solid white. Split
   into two overlaid SVGs so the blend applies to the mark only. */
.ha-photo1__logo--mark { mix-blend-mode: soft-light; }
.ha-photo1__logo--text { mix-blend-mode: normal; }
.ha-photo2 {
  position: absolute;
  left: 2.5rem;
  top: 28.875rem;                /* 1948-1486 */
  width: 23.25rem;               /* 372 */
  height: 28rem;                 /* 448 */
}
.ha-visual-column { display: contents; }
.ha-photo-tall {
  position: absolute;
  left: 27rem;                   /* 432 */
  top: 0;
  width: 25rem;                  /* 400 */
  height: 45.3125rem;            /* 725 */
}
.ha-trusted {
  position: absolute;
  left: 27rem;                   /* 432 */
  top: 46.5625rem;               /* 2231-1486 */
  width: 25rem;                  /* 400 */
  height: 10.3125rem;            /* 165 */
  /* solid green fill so the card is always fully green: the bg SVG is a fixed
     400×165 (2.42:1) and letterboxes when the card is wider than that (tablet/
     Surface Duo). #07725B matches the SVG's own fill so it's seamless. */
  background: var(--green-panel);
  /* clip the decorative circle blob to the badge so it can never spill outside
     the rounded box; radius matches the rounded-rect bg (r30 @400 in the SVG) */
  border-radius: 1.875rem;       /* 30 */
  overflow: hidden;
}
.ha-trusted__pattern {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  transform: scaleX(-1);
  /* the texture PNG is solid white; at plain opacity it washed the card lighter
     than the #07725B base. multiply makes white a no-op so the card stays exactly
     #07725B (matching Figma) while any darker grain still reads subtly. */
  mix-blend-mode: multiply;
  opacity: 0.15;
}
.ha-trusted__circle {
  position: absolute;
  /* Match the reference composition at every card size: the original desktop
     values were 227/400 from the left, 24/165 from the top, and 100/400 wide. */
  left: 56.75%;
  right: auto;
  top: 14.545%;
  width: 25%;
  height: auto;
  aspect-ratio: 1;
  transform: none;
  border-radius: 50%;
  background: var(--green-light);
  /* Figma renders this blob as a SOLID --green-light disc (sampled #4aad97 at full
     opacity), not the translucent 0.55 it had before — keep it solid on desktop/
     tablet to match the design. (Phone keeps its softer 0.55 in the ≤767 rule.) */
  opacity: 1;
}
.ha-trusted__label {
  position: absolute;
  left: 7.375rem;                /* 550-432 */
  top: 2rem;                     /* glyph center matches Figma y2283 */
  font-size: 1.875rem;           /* 30 */
  line-height: 2.5rem;
  font-weight: 500;
  color: #fff;
}
.ha-trusted__count {
  position: absolute;
  left: 6.5625rem;               /* 537-432 */
  top: 4.75rem;                  /* tightened up under the "Trusted By" label */
  font-size: 4.375rem;           /* 70 */
  line-height: 3.75rem;
  font-weight: 500;
  letter-spacing: 0.4375rem;     /* 7 */
  color: #fff;
}
.ha-trusted__plus {
  font-size: 2.8219rem;          /* 45.15 */
  vertical-align: text-top;      /* Figma superscripts the "+" to the digits' top, not the baseline */
}

.ha-content {
  position: absolute;
  left: 60.625rem;               /* 970 */
  top: 0;
  width: 50.5rem;                /* 808 */
}
.ha-intro {
  margin-top: 3.125rem;          /* 1606: kicker 20 + 20 + title 40 + 40 */
  font-size: 1.5rem;             /* 24 */
  line-height: 2.5rem;           /* 40 */
  font-weight: 500;
  color: var(--green-panel);
}
.ha-feature {
  position: absolute;
  top: 17.5rem;                  /* 1766-1486 */
  width: 21.25rem;               /* 340 */
  height: 9.5625rem;             /* 153 */
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 1.875rem;       /* 30 */
  box-shadow: 0 2.5rem 2.5rem 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ha-feature:hover {
  transform: translateY(-0.5rem);
  border-color: var(--green-light);
  box-shadow: 0 2.5rem 2.5rem 0 rgba(0, 0, 0, 0.12);
}
.ha-feature--1 { left: 0; }
.ha-feature--2 { left: 29.25rem; }   /* 1438-970 = 468 */
.ha-feature-dots { display: none; }
.ha-feature__circle {
  position: absolute;
  left: 1.875rem;                /* +30 */
  top: 0.875rem;                 /* 1780-1766 */
  width: 6.25rem; height: 6.25rem;
  border-radius: 50%;
  background: #c0ded7;
}
.ha-feature p {
  position: absolute;
  left: 4.375rem;                /* 1040-970 = 70 */
  top: 2.5rem;                   /* 1806-1766 */
  width: 14.875rem;              /* 238 */
  font-size: 1.5rem;             /* 24 */
  line-height: 2.5rem;
  font-weight: 500;
  color: #000;
}
.ha-body {
  margin-top: 13.6875rem;        /* 1977: intro ends 1726; body at 491 from top; intro top 170+120 → gap */
  font-size: 1.25rem;            /* 20 */
  line-height: 2.5rem;           /* 40 */
  font-weight: 500;
  color: #999;
  width: 50.5rem;                /* 808 */
}
.ha-btn {
  margin-top: 4.5625rem;         /* 2326-2253 = btn 840 from top */
  width: 12.4375rem;             /* 199 */
}

/* ============================================================
   COMPANY STATS  (0:2234) — page y 2546..3046 (+cards to 3146)
   card styles shared in common.css (.hc-card)
   ============================================================ */
.home-company {
  position: relative;
  height: 31.25rem;              /* 500 */
  margin-top: 9.375rem;          /* 2546-2396 = 150 */
  background: url("../assets/images/company-bg.png?v=2") center / cover no-repeat;
}
/* Figma positions each card's number+label block at a slightly different offset
   from the card's left edge (card 1 = 186, then 232 / 208 / 208). The base
   .hc-card__text is 186 (card 1); nudge the rest to match Figma exactly. */
.home-company .hc-card:nth-child(2) .hc-card__text { left: 14.5rem; }   /* 232 */
.home-company .hc-card:nth-child(3) .hc-card__text { left: 13rem; }     /* 208 */
.home-company .hc-card:nth-child(4) .hc-card__text { left: 13rem; }     /* 208 */

/* ============================================================
   OUR SERVICES  (0:2197) — page y 3046..4040, bg #f9f9f9
   ============================================================ */
.home-services {
  position: relative;
  height: 62.125rem;             /* 994 */
  background: #f9f9f9;
}
.hs-left {
  position: absolute;
  left: 8.8125rem;               /* 141 */
  top: 15.625rem;                /* 3296-3046 = 250 */
  width: 50.5rem;                /* 808 */
}
.hs-intro {
  margin-top: 2.5rem;            /* 40: title 3336..3376 → intro 3416 */
  font-size: 1.5rem;             /* 24 */
  line-height: 2.5rem;
  font-weight: 500;
  color: var(--green-panel);
}
.hs-body {
  margin-top: 3.75rem;           /* 60: intro 3 lines(3416..3536) → body 3596 */
  font-size: 1.25rem;            /* 20 */
  line-height: 2.5rem;
  font-weight: 500;
  color: #999;
  width: 50rem;                  /* 800 */
}
.hs-btn {
  margin-top: 3.75rem;           /* 3820: body ends 3760 → +60 */
  width: 12.5rem;                /* 200 */
}
.hs-cards {
  position: absolute;
  left: 61.8125rem;              /* 989 */
  top: 15.625rem;                /* 3296-3046 */
  width: 41.5rem;                /* 989..1779 → 790 */
  height: 32.5rem;               /* 2x2 grid: 230+290+230 = 520 */
}
/* two duplicate slides of the same 4-card grid, cross-faded via .is-active */
.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  pointer-events: none;
}
.hs-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}
.hs-card {
  position: absolute;
  width: 23.75rem;               /* 380 */
  height: 14.375rem;             /* 230 */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 1.875rem;
  box-shadow: 0 2.5rem 2.5rem 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hs-card:hover {
  transform: translateY(-0.5rem);
  border-color: var(--green-light);
  box-shadow: 0 2.5rem 2.5rem 0 rgba(0, 0, 0, 0.12);
}
.hs-card--1 { left: 0; top: 0; }
.hs-card--2 { left: 25.625rem; top: 0; }         /* 1399-989 = 410 */
.hs-card--3 { left: 0; top: 18.125rem; }         /* 3586-3296 = 290 */
.hs-card--4 { left: 25.625rem; top: 18.125rem; }
.hs-card img {
  position: absolute;
  left: 8.8125rem;               /* 1130-989 = 141 */
  top: 2.1875rem;                /* 35 */
  width: 6.25rem; height: 6.25rem;
}
.hs-card p {
  position: absolute;
  left: 4.8125rem;               /* 1066-989 = 77 */
  top: 9.6875rem;                /* 155 = 3451-3296 (20px below the 100px icon) */
  width: 100%;
  font-size: 1.5rem;             /* 24 */
  line-height: 2.5rem;
  font-weight: 500;
  color: var(--text-dark);
}
.hs-card--2 img { left: 9.0625rem; }  /* 1544-1399 = 145 */
.hs-card--2 p { left: 5.4375rem; }    /* 1486-1399 = 87 */
.hs-card--3 img { left: 8.75rem; }    /* 1129-989 = 140 */
.hs-card--3 p { left: 4.6875rem; }    /* 1064-989 = 75 */
.hs-card--4 img { left: 8.8125rem; }  /* 141 (matches Figma) */
.hs-card--4 p { left: 5.25rem; }      /* 1483-1399 = 84 */

.hs-dots {
  position: absolute;
  left: 0.0625rem;               /* 990-989 */
  top: 36.375rem;                /* 3878-3296 = 582 */
  display: flex;
  align-items: center;
  gap: 0.9375rem;                /* 15 */
}

/* ============================================================
   TESTIMONIALS — matches the Figma source exactly: 2 plain (no card
   box) testimonials per slide, decorative bar on the left one only,
   dots page through pairs. Slides swap via display:none/flex (no
   fade) so two slides are never simultaneously visible/overlapping.
   ============================================================ */
.home-news {
  position: relative;
}
.tst-panel {
  position: relative;
  padding: 9.375rem 0 27.6875rem;  /* room for the heading above; bottom pad = 133px breathing room below the dots + 310px the footer card overlaps into, matching Figma */
  overflow: hidden;              /* clip the off-canvas deco */
}
.news-green {
  position: absolute;
  inset: 0;
  background: var(--green-panel);
  z-index: -1;
}
.news-deco {
  position: absolute;
  right: -13.5rem;               /* pulled further off so the enlarged shape bleeds like Figma */
  top: -0.875rem;
  width: 59.7875rem;             /* 956.6 — full native size (Figma renders it 1:1, not 2/3) */
  height: 50.346rem;             /* 805.5 */
  transform: scaleX(-1) rotate(-11.27deg);
  pointer-events: none;
  z-index: -1;
}
/* faint white logo motif bleeding off the bottom-left corner. Geometry taken
   verbatim from the Figma panel mask (168:4329): the mark is 271x274, its left
   edge sits at panel x -73.5 (bleeds off, clipped by overflow) and its bottom
   56.5px above the green panel's bottom. Rotation is baked into the SVG paths. */
.news-deco--left {
  right: auto;
  left: -4.59375rem;             /* -73.5 — left edge off-panel; overflow clips it so only the right part shows */
  top: auto;
  bottom: 3.53125rem;            /* 56.5 — above the green panel's bottom */
  width: 16.9375rem;             /* 271 */
  height: 17.1rem;               /* 273.6 */
  transform: none;               /* tilt is already baked into the path coords */
  opacity: 0.07;                 /* faint white logo motif — matches Figma's ~6% white over the green */
}
.tst-heading {
  position: relative;
  text-align: center;
  margin-bottom: 3rem;
}
.tst-slider { position: relative; }
.tst-slide { display: none; }
.tst-slide.is-active {
  display: flex;
  justify-content: center;
  gap: 9.375rem;                 /* 150 */
  padding: 0 4rem;
}
.tst-card {
  position: relative;
  width: 38.125rem;               /* 610 */
}
.tst-card__top {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;                    /* 40 */
}
.tst-card__avatar {
  position: relative;
  flex-shrink: 0;
  margin-top: 0.9375rem;          /* 15 — Figma avatar sits 15px below the name top */
  width: 4.75rem; height: 4.75rem;    /* 76 */
  border-radius: 50%;
  background: var(--green-light);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tst-card__avatar-icon {
  width: 1.875rem;                /* 30 */
  height: 2.5rem;                 /* 40 — Figma person icon (viewBox 30×40) centered */
}
.tst-card__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Figma "Name & Company" group (0:2377): 429×150, children absolutely placed */
.tst-card__meta {
  position: relative;
  width: 26.8125rem;              /* 429 */
  height: 9.375rem;               /* 150 */
}
.tst-card__name {
  position: absolute;
  top: 0; left: 0;
  font-size: 1.875rem;            /* 30 */
  line-height: 3.75rem;           /* 60 */
  font-weight: 400;
  color: #fff;
}
.tst-card__role {
  position: absolute;
  top: 4.375rem; left: 0;         /* 70 */
  font-size: 1.125rem;            /* 18 */
  line-height: normal;
  letter-spacing: 0.3375rem;      /* 5.4 */
  color: var(--green-light);
  white-space: nowrap;
}
.tst-card__google {
  position: absolute;
  top: 7rem; left: 0;             /* 112 */
  width: 1.5625rem; height: 1.5625rem;  /* 25 */
}
.tst-card__stars {
  position: absolute;
  top: 7.25rem; left: 4.3125rem;  /* 116 / 69 */
  width: 6.875rem;                /* 110 */
  height: 1.125rem;               /* 18 */
}
.tst-card__quote-text {
  position: relative;
  margin-top: 1.25rem;
  padding-right: 2rem;             /* room for the decorative scroll bar */
  height: 11.25rem;                /* 180 — fixed box; long reviews from the CMS scroll inside it */
  font-size: 1.25rem;              /* 20 */
  line-height: 2.5rem;             /* 40 */
  color: #f1f1f1;
  font-weight: 400;
  overflow-y: auto;
  scrollbar-width: none;           /* Firefox: hide native bar, .tst-card__bar is the visual thumb */
  -ms-overflow-style: none;
}
.tst-card__quote-text::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Edge */
.tst-card__bar {
  position: absolute;
  right: 0;
  top: 11.5rem;                    /* 184 — Figma places the bar beside the quote (quote top 170 + 14), not at the card top */
  width: 0.4375rem;                /* 7 */
  height: 8.0625rem;               /* 129 */
  border-radius: 0.3125rem;
  background: #fff;
}
.tst-card__bar span {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 5rem;                    /* 80 */
  border-radius: 0.3125rem;
  background: var(--green-light);
}
.tst-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9375rem;
  margin-top: 2.5rem;
}
/* footer overlap on home: cta card overlaps up into the green testimonials panel (top ~58%) and down into the black footer (bottom, via .footer-cta's own margin) — matches Figma */
.site-footer--overlap { margin-top: -19.375rem; }

/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */
@media (max-width: 1024px) {
  /* banner */
  .home-banner { height: auto; padding-bottom: 0; }
  .banner-panel {
    position: relative;
    left: 0; top: 0;
    /* full-bleed on tablet too: edge to edge, no side white space, no outer radius */
    width: 100%;
    margin: 0;
    height: 520px;
    border-radius: 0;
    /* anchor the crop to the top so the person's head isn't cut off — the wide
       image is scaled to cover this short/wide panel, and a centred crop ate the
       top of her head on tablet */
    background-position: 72% top;
  }
  /* Hero visual on tablet: keep the whole Figma composition as one unit by giving the
     wrapper the panel's 1840:1100 aspect, then place it on the right of the (short,
     wide) panel. All three layers stay %-positioned inside it, so they scale together. */
  .banner-hero-media {
    inset: auto;
    top: 50%;
    right: -3%;
    transform: translateY(-50%);
    width: 92%;
    height: auto;
    aspect-ratio: 1840 / 1100;
  }
  .banner-content { left: 40px; top: 120px; }
  .banner-title { font-size: 38px; line-height: 52px; white-space: normal; }
  .banner-btns { margin-top: 32px; flex-wrap: wrap; }
  .banner-btns .btn--white { width: 160px; height: 54px; font-size: 16px; border-radius: 14px; }
  .banner-btns .btn--wide { width: 220px; height: 54px; font-size: 16px; border-radius: 14px; margin-left: 12px; }
  .banner-services {
    position: relative;
    left: 0; top: 0;
    /* full-bleed on tablet too: edge to edge, no side white space, no outer radius.
       Pull up so ~half the bar overlaps the hero's empty green bottom (like desktop);
       the negative margin ≈ half the bar height. */
    width: 100%;
    margin: -122px 0 0;
    height: auto;
    border-radius: 0;
    padding: 20px 16px 24px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
  }
  .banner-services::-webkit-scrollbar { display: none; }
  /* once JS upgrades the strip to an infinite Slick carousel, hand layout to
     Slick (variableWidth keeps each card's width) inside the rounded panel */
  .banner-services.slick-initialized { display: block; overflow: hidden; gap: 0; }
  .banner-services.slick-initialized .slick-list { overflow: hidden; }
  .banner-services.slick-initialized .slick-slide { margin: 0 7px; }
  /* The bar itself is a dark panel (#0a1821), so the white icons + labels read
     against it directly — keep the cards transparent (no green fill) and the icon
     circles dark, matching the desktop bar. */
  .banner-services .bs-item,
  .banner-services .bs-item.is-highlight { background: transparent; }
  .banner-services .bs-item .bs-icon__circle { background: var(--navy-card); }
  /* about — compact 2-column photo collage, mirroring the desktop arrangement:
     col1 = two stacked photos, col2 = tall photo spanning both rows, badge below */
  .home-about {
    height: auto;
    margin-top: 24px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }
  .ha-photo1 {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%; height: auto;
    aspect-ratio: 373/442;
    overflow: hidden;
    border-radius: 20px;
  }
  .ha-photo1__overlay { border-radius: 20px; }
  .ha-photo1__logo {
    left: 50%;
    top: 50%;
    width: 58%;
    height: auto;
    transform: translate(-50%, -50%);
  }
  .ha-photo2 {
    position: static;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 2;
    width: 100%; height: auto;
    aspect-ratio: 372/448;
    object-fit: cover;
    border-radius: 20px;
  }
  .ha-photo-tall {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    object-fit: cover;
    border-radius: 20px;
  }
  /* Keep the tall photo and badge in one column so the photo absorbs fluid
     height changes instead of relying on two overlapping grid items. */
  .ha-visual-column {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    gap: 14px;
  }
  .ha-trusted {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 165px;
    width: 100%;
    max-width: none;
    height: 165px;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
  }
  /* the card now fills the full column width, so centre the label/count/blob
     (the base uses fixed left px meant for the 400px desktop card) */
  .ha-trusted__label { left: 0; right: 0; width: 100%; text-align: center; }
  .ha-trusted__count { left: 0; right: 0; width: 100%; text-align: center; }
  .ha-content { position: static; width: 100%; grid-column: 1 / -1; margin-top: 12px; }
  .ha-feature {
    position: relative;
    display: flex;
    align-items: center;
    left: auto;
    top: auto;
    /* tablet: two cards side by side. vw (not %) because Slick variableWidth measures
       against its huge track, so a % width would blow up. */
    flex: 0 0 auto;
    width: 44vw;
    height: auto;
    min-height: 76px;
    /* text begins at the circle's centre (circle: left 16px + ½·42px = 37px), so the
       bullet sits like a highlight behind the start of the text — matching desktop. */
    padding: 16px 16px 16px 37px;
    margin: 0 6px;
    scroll-snap-align: start;
    border-radius: 16px;
    /* card box on the slider items (bg + border, no drop-shadow — the shadow read as
       a dark smudge below the card on the white About section) */
    background: #f9f9f9;
    border: 1px solid #eee;
    box-shadow: none;
  }
  .ha-feature-slider {
    position: relative;
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
  }
  /* Slick forces its slides to display:block, dropping the flex centering — restore
     it so the circle bullet + text sit on one centred row */
  .ha-feature-slider .slick-slide { display: flex; align-items: center; }
  .ha-feature-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ha-feature-track::after {
    content: "";
    flex: 0 0 24%;
  }
  .ha-feature-track::-webkit-scrollbar { display: none; }
  .ha-feature-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }
  .ha-feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #c0ded7;
    cursor: pointer;
  }
  .ha-feature-dot.is-active {
    width: 22px;
    background: var(--green-panel);
  }
  .ha-feature__circle { width: 42px; height: 42px; top: 50%; left: 16px; transform: translateY(-50%); }
  .ha-feature p {
    position: static;
    z-index: 1;
    width: auto;
    padding-top: 1px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
  }
  .ha-intro { font-size: 17px; line-height: 28px; margin-top: 18px; font-weight: 400; }
  .ha-body { margin-top: 22px; width: 100%; font-size: 14px; line-height: 25px; font-weight: 400; }
  .ha-btn { margin-top: 26px; width: 160px; height: 48px; font-size: 14px; border-radius: 12px; }

  /* company */
  .home-company {
    /* the photo is a top BAND (not the full section). The stat cards straddle its
       bottom edge — top half over the photo, bottom half on the white space below,
       exactly like desktop. overflow:visible lets the cards hang below the band;
       margin-bottom reserves room for the hanging half before the next section. */
    height: 300px;
    margin: 60px 0 128px;
    padding: 0;
    overflow: visible;
    background-position: 38% center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* full-bleed slider: no side padding, so the first card sits flush against the
     screen's left edge and the next card runs to the right edge (no gaps at the
     borders); the gaps between cards come from the slide's right margin below.
     translateY(50%) drops the bottom-aligned strip so it is centred on the photo's
     bottom edge — half over the photo, half below. */
  .home-company .hc-cards {
    padding-left: 0;
    padding-right: 0;
    transform: translateY(62%);
  }
  /* soften the card drop-shadow — the desktop 0 40px 40px shadow reads as a heavy
     black pool below the cards on the white space under the photo */
  .home-company .hc-card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
  /* The desktop nth-child text nudges (232/208px, needed for the wide 391px cards)
     have high specificity and leak into mobile, shoving cards 2-4's number+label
     off the 230px card so they get clipped (invisible). Reset them to the shared
     mobile text position so every card's counter + label shows. */
  .home-company .hc-card:nth-child(2) .hc-card__text,
  .home-company .hc-card:nth-child(3) .hc-card__text,
  .home-company .hc-card:nth-child(4) .hc-card__text { left: 104px; }

  /* services */
  /* white background to match the section above (the desktop #f9f9f9 tint reads as a
     visible colour seam once the sections stack on tablet/phone) */
  .home-services { height: auto; padding: 90px 24px 60px; background: #fff; }
  .hs-left { position: static; width: 100%; }
  .hs-intro { font-size: 20px; line-height: 32px; margin-top: 20px; }
  .hs-body { width: 100%; font-size: 16px; line-height: 30px; margin-top: 24px; }
  .hs-btn { margin-top: 28px; width: 180px; height: 54px; font-size: 16px; border-radius: 14px; }
  .hs-cards { position: static; width: 100%; height: auto; margin-top: 40px; }
  /* mobile/tablet: the active slide becomes a swipeable row of cards */
  .hs-slide { position: static; inset: auto; opacity: 1; visibility: visible; transition: none; display: none; }
  .hs-slide.is-active {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 4px 4px 32px;         /* room for the card shadow */
  }
  .hs-slide.is-active::-webkit-scrollbar { display: none; }
  .hs-card {
    position: static;
    flex: 0 0 220px;
    width: 220px;
    height: auto;
    padding: 24px 16px 22px;
    margin-top: 0;
    text-align: center;
    scroll-snap-align: center;
    /* drop the white card box (border + soft shadow) on mobile — on the white
       page it just reads as a faint grey shade behind the icon/label */
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .hs-card img,
  .hs-card--2 img, .hs-card--3 img, .hs-card--4 img {
    position: static;
    display: block;
    margin: 0 auto;
    width: 76px; height: 76px;
  }
  .hs-card p,
  .hs-card--2 p, .hs-card--3 p, .hs-card--4 p {
    position: static;
    width: auto;
    margin-top: 14px;
    font-size: 18px;
    line-height: 26px;
  }
  .hs-dots { position: static; margin-top: 8px; justify-content: center; }

  /* testimonials */
  .home-news { padding-bottom: 60px; }
  .tst-panel { padding: 60px 24px 40px; }
  .tst-heading { text-align: center; }
  .tst-heading .section-kicker { margin-left: 0; }
  .tst-slide.is-active { flex-direction: column; gap: 40px; padding: 0 24px; }
  .tst-card { width: 100%; }
  .tst-card__bar { display: none; }        /* stacked full-width cards just flow naturally instead of scrolling internally */
  .tst-card__quote-text { padding-right: 0; height: auto; overflow: visible; }
  /* undo the desktop absolute Figma layout so the meta flows on narrow cards */
  .tst-card__avatar { margin-top: 0; }
  .tst-card__meta { position: static; width: auto; height: auto; }
  .tst-card__name, .tst-card__role, .tst-card__google, .tst-card__stars { position: static; top: auto; left: auto; }
  .tst-card__role { margin-top: 2px; }
  .tst-card__google { display: inline-block; vertical-align: middle; margin-top: 8px; }
  .tst-card__stars { display: inline-block; vertical-align: middle; margin-left: 8px; }
  .news-deco { display: none; }

  .site-footer--overlap { margin-top: 24px; }
}

@media (max-width: 767px) {
  /* Mobile hero = one green box, stacked top→bottom: IMAGE, then headline, then the
     two buttons on a single row (per the approved reference). The box is split across
     two flow siblings — .banner-panel (image, rounded top) sits directly above
     .banner-content (text + buttons, rounded bottom) with no gap, so together they
     read as one rounded panel. Solid green on both keeps the seam invisible. */
  .banner-panel {
    /* full-bleed on phones: edge to edge, no side white space, no outer radius.
       Height scales with the (now full-width) panel via the original 398:360 ratio,
       so the width-based photo + green shapes fit exactly as before instead of being
       clipped at the bottom when the panel got wider. */
    width: 100%;
    height: auto;
    aspect-ratio: 398 / 360;
    margin: 0;
    border-radius: 0;
    background: var(--green-panel);
    box-shadow: 0 0 0 1px var(--green-panel);
  }
  /* Mobile image (matches the reference): the three layers are positioned
     INDEPENDENTLY (not locked into the wide desktop composition) so each fits the
     narrow panel — a teal pentagon filling the background, a smaller SQUARE photo
     right-aligned (teal shows on its left), and a white accent bleeding off the
     right. This keeps the photo compact and to the right instead of blown up. */
  .banner-hero-media {
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }
  /* teal pentagon backing behind the photo (position tuned to match the reference). */
  .banner-hero-media__shape-back {
    left: 15%;
    top: -6%;
    right: auto;
    width: 85%;
    height: auto;
  }
  /* photo: compact square, right-aligned (teal stays visible on the left) */
  .banner-hero-media__frame {
    left: auto;
    right: 0;
    top: 6%;
    width: 82%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .banner-hero-media__img {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 18%;
  }
  /* mint accent on the right — kept transparent like the reference: the #2E8471 SVG
     over mix-blend-mode:screen (inherited) just subtly tints the panel/person beneath,
     instead of the solid white block the earlier brightness(0) invert(1) produced. */
  .banner-hero-media__shape-front {
    left: auto;
    right: -3%;
    top: 22%;
    width: 34%;
    height: auto;
  }
  .banner-content {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    /* full-bleed on phones: edge to edge, no side white space, no outer radius. The
       -1px top overlaps .banner-panel so the seam shows no white hairline. */
    width: 100%;
    margin: -1px 0 0;
    /* extra bottom padding = green space below the buttons for the services bar to
       overlap into (like the desktop hero), so the overlap sits on green, not buttons */
    padding: 20px 24px 96px;
    background: var(--green-panel);
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--green-panel);
  }
  .banner-title {
    max-width: none;
    font-size: 20px;
    line-height: 28px;
  }
  /* Both buttons on the same line. */
  .banner-btns {
    gap: 10px;
    margin-top: 18px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .banner-btns .btn--white,
  .banner-btns .btn--wide {
    width: auto;
    min-width: 0;
    height: 38px;
    padding: 0 16px;
    margin-left: 0;
    border-radius: 8px;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
  }
  .banner-services {
    /* full-bleed + overlap the hero like desktop: pull the bar up so ~half sits over
       the green hero (into the padding added above) and half below on white. */
    width: 100%;
    margin: -80px 0 0;
    padding: 12px 10px 14px;
    border-radius: 0;
    gap: 10px;
  }
  /* two items at a time, with a small peek of the next (Slick variableWidth reads this) */
  .banner-services .bs-item {
    flex-basis: auto;
    width: 46vw;
    max-width: 230px;
    padding: 12px 8px;
    border-radius: 12px;
  }
  .banner-services .bs-icon { width: 74px; height: 66px; }
  .banner-services .bs-icon__circle { left: 26px; width: 56px; height: 56px; }
  .banner-services .bs-icon img,
  .banner-services .bs-icon__qb {
    top: 6px;
    width: 56px;
    height: 56px;
    background-size: 56px 56px;
  }
  .banner-services .bs-item p,
  .banner-services .bs-item.is-highlight p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 17px;
  }
  .home-banner { padding-bottom: 0; }
  .home-about {
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px;
    justify-items: stretch;
    gap: 12px;
    align-items: start;
  }
  .ha-photo1 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
  }
  .ha-photo1__logo { width: 52%; }
  .ha-photo2,
  .ha-photo-tall {
    width: 100%;
    max-width: none;
  }
  .ha-photo2 {
    grid-column: 1;
    grid-row: 2;
    /* taller than square so the whole collage row grows — this lets the keyboard
       photo extend further down and the Trusted card sit lower, all aligned */
    aspect-ratio: 1 / 1.78;
  }
  .ha-photo-tall {
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }
  .ha-visual-column { gap: 12px; }
  .ha-trusted {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    height: 92px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
  }
  .ha-trusted__label {
    left: 0;
    top: 21px;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
  }
  .ha-trusted__count {
    left: 0;
    top: 45px;
    width: 100%;
    font-size: 30px;
    line-height: 34px;
    letter-spacing: 1px;
    text-align: center;
  }
  .ha-trusted__plus { font-size: 20px; }
  .ha-content .section-kicker { font-size: 14px; line-height: 18px; }
  .ha-content .section-title { font-size: 22px; line-height: 28px; margin-top: 10px; }
  .ha-intro {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-top: 10px;
  }
  .ha-feature-slider { margin-top: 18px; }
  /* Slick forces its slides to display:block, which drops the flex centering the
     base rule sets — restore it (more specific than slick) so the circle bullet
     and text sit on one centred row. */
  .ha-feature-slider .slick-slide { display: flex; align-items: center; }
  .ha-feature {
    /* phone: one card at a time with a peek of the next (vw for variableWidth) */
    flex: 0 0 auto;
    width: 82vw;
    margin: 0 6px;
    min-height: 70px;
    /* text begins at the circle's centre (circle: left 14px + ½·38px = 33px), so the
       bullet sits like a highlight behind the start of the text — matching desktop. */
    padding: 13px 14px 13px 33px;
    border-radius: 14px;
  }
  .ha-feature__circle {
    width: 38px;
    height: 38px;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
  .ha-feature p {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    padding-top: 0;
  }
  .ha-feature-dots { margin-top: 8px; }
  .ha-feature-dot {
    width: 6px;
    height: 6px;
  }
  .ha-feature-dot.is-active { width: 16px; }
  .ha-body {
    margin-top: 18px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
  }
  .ha-btn {
    width: 112px;
    height: 34px;
    margin-top: 18px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 14px;
  }
  .ha-content, .ha-feature { justify-self: stretch; }
  .home-services { padding: 56px 16px 16px; }
  .hs-intro { font-size: 14px; line-height: 21px; font-weight: 400; }
  .hs-body { font-size: 12px; line-height: 20px; font-weight: 400; }
  .hs-btn { width: 112px; height: 34px; font-size: 10px; border-radius: 8px; }
  .hs-cards { margin-top: 28px; }
  .hs-card {
    flex-basis: 170px;
    width: 170px;
    padding: 18px 12px 16px;
    border-radius: 14px;
  }
  .hs-card img,
  .hs-card--2 img, .hs-card--3 img, .hs-card--4 img {
    width: 54px;
    height: 54px;
  }
  .hs-card p,
  .hs-card--2 p, .hs-card--3 p, .hs-card--4 p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
  }
  .home-news { padding: 18px 16px 16px; }
  .tst-card__role {
    white-space: normal;
    letter-spacing: 2px;
    line-height: 24px;
  }
}

/* Responsive type and spacing polish */
@media (max-width: 1024px) {
  .banner-title {
    font-size: 32px;
    line-height: 42px;
    font-weight: 400;
  }
  .banner-btns .btn--white,
  .banner-btns .btn--wide {
    height: 46px;
    font-size: 13px;
    line-height: 18px;
    border-radius: 12px;
  }
  .ha-content .section-title,
  .hs-left .section-title,
  .tst-heading .section-title {
    font-size: 26px;
    line-height: 34px;
  }
  .ha-trusted__label {
    font-size: 22px;
    line-height: 28px;
  }
  .ha-trusted__count {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: 2px;
  }
  .ha-trusted__plus {
    font-size: 30px;
  }
  .ha-intro,
  .hs-intro {
    font-size: 15px;
    line-height: 23px;
    font-weight: 400;
  }
  .ha-body,
  .hs-body {
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
  }
  .ha-btn,
  .hs-btn {
    width: 148px;
    height: 42px;
    font-size: 12px;
    border-radius: 10px;
  }
  .hs-card p,
  .hs-card--2 p,
  .hs-card--3 p,
  .hs-card--4 p {
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
  }
  .tst-card__quote-text {
    font-size: 14px;
    line-height: 24px;
  }
  .tst-card__name {
    font-size: 22px;
    line-height: 30px;
  }
  .tst-card__role {
    margin-top: 2px;
    font-size: 13px;
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .banner-title {
    font-size: 18px;
    line-height: 24px;
  }
  .ha-content .section-title,
  .hs-left .section-title,
  .tst-heading .section-title {
    font-size: 21px;
    line-height: 27px;
  }
  .ha-trusted__label {
    font-size: 16px;
    line-height: 20px;
  }
  .ha-trusted__count {
    font-size: 28px;
    line-height: 32px;
  }
  .ha-trusted__plus {
    font-size: 18px;
  }
  .ha-intro,
  .hs-intro {
    font-size: 13px;
    line-height: 19px;
  }
  .ha-body,
  .hs-body {
    font-size: 12px;
    line-height: 19px;
  }
  .ha-btn,
  .hs-btn {
    width: 130px;
    height: 38px;
    font-size: 12px;
    line-height: 16px;
    border-radius: 9px;
  }
  .hs-card p,
  .hs-card--2 p,
  .hs-card--3 p,
  .hs-card--4 p {
    font-size: 13px;
    line-height: 19px;
  }
  .tst-card__quote-text {
    font-size: 12px;
    line-height: 20px;
  }
  .tst-card__top { gap: 16px; }     /* desktop's 40px gap leaves too little room for google+stars on one line */
  .tst-card__name {
    font-size: 18px;
    line-height: 24px;
  }
  .tst-card__role {
    margin-top: 2px;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 1px;
  }
}

/* ============================================================
   SLICK SLIDER — MOBILE / TABLET ONLY (≤1024px)
   Desktop keeps the original custom sliders untouched; Slick is
   initialised only below this breakpoint (see script.js). Every
   rule here is scoped inside the media query so it can never
   affect the desktop UI.
   ============================================================ */
@media (max-width: 1024px) {
  /* Slick's generated dots, restyled to match the site's .dot pills */
  .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }
  .slick-dots li { position: static; width: auto; height: auto; margin: 0; }
  .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--green-light);
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
  }
  .slick-dots li button:before { display: none; }
  .slick-dots li.slick-active button { width: 22px; background: var(--green-panel); }

  /* Testimonials: each slide is the original stacked pair of cards */
  .tst-dots { display: none; }
  .tst-slider.slick-initialized .slick-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 24px;
    height: auto;
  }
  .tst-slider .slick-dots li button { background: rgba(255, 255, 255, 0.5); }
  .tst-slider .slick-dots li.slick-active button { background: #fff; }

  /* Our Services: card carousel (cards keep their existing mobile styling) */
  .hs-dots { display: none; }
  .hs-cards .slick-list { padding: 4px 0 12px; }

  /* About: feature carousel */
  .ha-feature-dots { display: none; }
  .ha-feature-track.slick-initialized { display: block; overflow: visible; }
  .ha-feature-track.slick-initialized::after { display: none; }
  .ha-feature-slider .slick-list { padding: 4px 0; }
}

/* Surface Duo through the upper phone/tablet breakpoint: preserve the badge's
   original 400:165 proportion and keep every foreground layer centred. */
@media (min-width: 507px) and (max-width: 767px) {
  .ha-trusted {
    height: auto;
    min-height: 92px;
    aspect-ratio: 400 / 165;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .ha-trusted__circle {
    left: 52.75%;
    top: 9%;
  }
  .ha-trusted__label,
  .ha-trusted__count {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    z-index: 1;
  }
  .ha-trusted__label {
    font-size: clamp(16px, 2.8vw, 22px);
    line-height: 1.2;
  }
  .ha-trusted__count {
    margin-top: 2px;
    font-size: clamp(28px, 5.5vw, 42px);
    line-height: 1.05;
    letter-spacing: clamp(1px, 0.3vw, 2px);
  }
  .ha-trusted__plus { font-size: clamp(18px, 3.5vw, 27px); }
}

/* The badge type scales from the badge itself, not the viewport. This keeps the
   same hierarchy when the two-column collage changes width at any breakpoint. */
.ha-trusted {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ha-trusted__label,
.ha-trusted__count {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: auto;
  z-index: 1;
  text-align: center;
}
.ha-trusted__label {
  font-size: clamp(16px, 7.5cqw, 36px);
  line-height: 1.15;
}
.ha-trusted__count {
  margin-top: 2px;
  font-size: clamp(30px, 17.5cqw, 80px);
  line-height: 0.95;
  letter-spacing: 0.08em;
}
.ha-trusted__number { font: inherit; }
.ha-trusted__plus {
  display: inline-block;
  margin-left: 0.03em;
  font-size: clamp(20px, 11.25cqw, 50px);
  line-height: 1;
  vertical-align: top;
  transform: translateY(-0.05em);
}

/* Compact desktop: the whole About collage is proportionally reduced, so scale
   the badge type from the badge itself instead of forcing full-desktop sizes. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .ha-trusted__circle {
    left: 51.75%;
    top: 8.545%;
  }
  .ha-trusted__label {
    font-size: clamp(16px, 8cqw, 20px);
  }
  .ha-trusted__count {
    font-size: clamp(34px, 18cqw, 48px);
  }
  .ha-trusted__plus {
    font-size: clamp(21px, 11.5cqw, 30px);
  }
}

/* Full desktop keeps a strong, legible type scale while growing smoothly to
   the approved large-screen typography. */
@media (min-width: 1280px) {
  .ha-trusted__circle {
    left: 51.75%;
    top: 8.545%;
  }
  .ha-trusted__label {
    font-size: clamp(20px, 1.65vw, 32px);
  }
  .ha-trusted__count {
    font-size: clamp(48px, 3.75vw, 72px);
  }
  .ha-trusted__plus {
    font-size: clamp(30px, 2.4vw, 46px);
  }
}

/* iPad Mini: approved DevTools composition. */
@media (min-width: 768px) and (max-width: 799px) {
  .ha-trusted__circle {
    left: 52%;
    top: 12%;
    width: 25%;
  }
}

/* iPad Air: approved DevTools composition. */
@media (min-width: 800px) and (max-width: 900px) {
  .ha-trusted__circle {
    left: 52%;
    top: 11%;
    width: 25%;
  }
}

/* Surface Pro 7: approved DevTools composition. */
@media (min-width: 901px) and (max-width: 959px) {
  .ha-trusted__circle {
    left: 55.75%;
    top: 13.545%;
    width: 22%;
  }
}

/* iPad Pro and wider tablets: approved DevTools composition. */
@media (min-width: 960px) and (max-width: 1024px) {
  .ha-trusted__circle {
    left: 52.75%;
    top: 8.545%;
    width: 22%;
  }
}

/* iPhone 12 Pro and similarly sized phones. */
@media (max-width: 414px) {
  .ha-trusted__circle {
    left: 52%;
    top: 19%;
  }
}

/* iPhone 14 Pro Max and wider phones below the Surface Duo range. */
@media (min-width: 415px) and (max-width: 506px) {
  .ha-trusted__circle {
    left: 52%;
    top: 14%;
  }
}