/* =====================================================================
   Thikedaar.com — home page styles
   ---------------------------------------------------------------------
   Desktop scaling: the design is drawn at 1440px wide. Between 992px and
   1440px the root font size follows the viewport (1.1111vw), and every
   size below is in rem, so the whole desktop layout shrinks with it.
   Below 992px and above 1440px, 1rem = 16px. Sizes that must not scale
   are in px.

   Breakpoints (desktop-first, matching the old Bootstrap ones):
     below 992px   @media (max-width: 991.98px)
     below 768px   @media (max-width: 767.98px)
     below 576px   @media (max-width: 575.98px)
     below 361px   @media (max-width: 360.98px)
   Hover effects sit inside @media (hover: hover) so touch screens don't
   get stuck hover states.

   State classes toggled by static/js/site.js:
     .is-scrolled   header, after the page leaves the top
     .nav-open      header, while the mobile menu is open
     .is-open       "More" menu item
     .is-active     current step / tab / video / testimonial
     .is-closed     process detail card, hidden
     .was-validated quote form, after the first submit attempt
   ===================================================================== */

:root {
  --ink: #0b0b0f;
  /* headings, primary buttons */
  --text: #2f3033;
  /* body copy */
  --accent: #ffd21a;
  /* brand yellow */
  --bg-top: #fbfcfe;
  --bg-bottom: #f4f6f9;
  --white: #fff;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font-sans: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Page column used by every section on desktop — same as .wrap (header/hero/footer),
     so all content lines up on both edges */
  --page-w: min(1312px, 90.42vw);
}


/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*,
::before,
::after,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  font-size: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (min-width: 992px) and (max-width: 1439.98px) {
  html {
    font-size: 1.1111vw;
  }
}

/* Body copy stays 16px everywhere; only rem sizes scale with the layout.
   overflow-x: clip, not hidden: with html also hiding overflow, hidden would make
   body a scroll container and break the sticky header. */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg-top);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

svg,
iframe {
  max-width: 100%;
}

button,
input,
select,
optgroup,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}

button,
input:where([type=button], [type=reset], [type=submit]) {
  appearance: button;
}

::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentcolor 50%, transparent);
}

textarea {
  resize: vertical;
}

[hidden]:where(:not([hidden=until-found])) {
  display: none !important;
}

/* Never let long words/URLs break a card or the page width */
h1,
h2,
h3,
p,
li,
a {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  ::before,
  ::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/* ---------------------------------------------------------------------
   Helpers
   --------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Line breaks that only apply on wide screens */
@media (max-width: 991.98px) {
  .br-wide {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .br-sm-up {
    display: none;
  }
}

/* Header / hero / footer container */
.wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: 14px;
}

@media (min-width: 576px) {
  .wrap {
    padding-inline: 20px;
  }
}

@media (min-width: 992px) {
  .wrap {
    width: var(--page-w);
    padding-inline: 0;
  }
}

/* Section container. Below 992px the gutters match .wrap so every left edge lines up. */
.container {
  width: var(--page-w);
  margin-inline: auto;
}

@media (max-width: 991.98px) {
  .container {
    width: auto;
    margin-inline: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .container {
    margin-inline: .875rem;
  }
}

@media (max-width: 360.98px) {
  .container--tight {
    margin-inline: .75rem;
  }
}

/* Invisible button laid over a whole card or badge so any part of it opens the popup */
.overlay-btn {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  cursor: pointer;
}

.overlay-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Inline text link with a chevron that nudges right on hover */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 500;
  color: var(--ink);
  text-underline-offset: 4px;
}

.text-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.text-link__icon {
  display: inline-flex;
  transition: .2s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

.text-link__icon svg {
  width: .7em;
  height: .7em;
}

@media (hover: hover) {
  .text-link:hover {
    text-decoration-line: underline;
  }

  .text-link:hover .text-link__icon {
    translate: 3px 0;
  }
}


/* ---------------------------------------------------------------------
   Pill button: .btn-pill + .btn-pill--dark or --outline, optional --lg
   --------------------------------------------------------------------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  height: 2.8125rem;
  padding-inline: 1.625rem;
  border: 1.5px solid transparent;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: .2s var(--ease);
  transition-property: background-color, color, border-color, translate, box-shadow;
}

.btn-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 360.98px) {
  .btn-pill {
    padding-inline: 18px;
    white-space: normal;
    text-align: center;
  }
}

.btn-pill--lg {
  height: 3.125rem;
  padding-inline: 2.0625rem;
  font-size: 1.09375rem;
}

@media (max-width: 991.98px) {
  .btn-pill--lg {
    padding-inline: 1.75rem;
    font-size: 1.03125rem;
  }
}

.btn-pill--dark {
  background-color: var(--ink);
  color: var(--white);
}

.btn-pill--dark:focus-visible {
  translate: 0 -2px;
  background-color: #23242a;
  color: var(--white);
  box-shadow: 0 10px 22px -10px rgba(11, 11, 15, .55);
}

.btn-pill--outline {
  background-color: var(--white);
  color: var(--ink);
  border-color: #3a3b40;
}

.btn-pill--outline:focus-visible {
  translate: 0 -2px;
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

@media (hover: hover) {
  .btn-pill--dark:hover {
    translate: 0 -2px;
    background-color: #23242a;
    color: var(--white);
    box-shadow: 0 10px 22px -10px rgba(11, 11, 15, .55);
  }

  .btn-pill--outline:hover {
    translate: 0 -2px;
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--white);
  }
}

.btn-arrow {
  display: inline-block;
  font-size: 1.05em;
  transition: .2s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

.btn-pill:hover .btn-arrow {
  translate: 4px 0;
}

/* "View all" style button under a section */
.btn-pill--more {
  height: 47px;
  padding-inline: 28px;
  font-size: 16px;
  border-color: #a9adb4;
}

.btn-pill--more:focus-visible {
  border-color: var(--ink);
}

@media (hover: hover) {
  .btn-pill--more:hover {
    border-color: var(--ink);
  }
}

@media (max-width: 575.98px) {
  .btn-pill--more {
    width: 100%;
  }
}

@media (max-width: 360.98px) {
  .btn-pill--more {
    padding-inline: 18px;
  }
}


/* ---------------------------------------------------------------------
   Round prev/next arrow button (process steps, video gallery)
   --------------------------------------------------------------------- */
.arrow-btn {
  display: grid;
  place-items: center;
  width: 3.8125rem;
  height: 3.8125rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: #eff1f3;
  color: var(--ink);
  cursor: pointer;
  transition: .2s var(--ease);
  transition-property: background-color, color, translate;
}

.arrow-btn svg {
  width: 40%;
  height: 40%;
}

.arrow-btn:disabled {
  opacity: .4;
  cursor: default;
}

.arrow-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.arrow-btn--dark {
  background-color: var(--ink);
  color: var(--white);
}

@media (hover: hover) {
  .arrow-btn:hover {
    background-color: var(--accent);
    translate: 0 -2px;
  }

  .arrow-btn--dark:hover {
    color: var(--ink);
  }

  .arrow-btn:disabled:hover {
    translate: 0 0;
    background-color: #eff1f3;
  }

  .arrow-btn--dark:disabled:hover {
    background-color: var(--ink);
  }
}

@media (max-width: 991.98px) {
  .arrow-btn {
    width: 50px;
    height: 50px;
  }
}

@media (pointer: coarse) {
  .arrow-btn {
    min-width: 44px;
    min-height: 44px;
  }
}


/* ---------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------- */
/* Small uppercase label with a yellow bar before it.
   The bar hangs slightly into the gutter on desktop. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 .5625rem -.625rem;
  font-size: .96875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
}

.eyebrow::before {
  content: "";
  width: 2.625rem;
  height: .25rem;
  border-radius: 4px;
  background-color: var(--accent);
}

.eyebrow--quality {
  margin-left: -.4375rem;
}

@media (max-width: 991.98px) {
  .eyebrow {
    margin-left: 0;
    margin-bottom: .625rem;
    font-size: .8125rem;
  }
}

/* Two-line title: bold first line, regular second line.
   Each section sets its own line sizes; below 992px both share one fluid size. */
.section-title {
  --strong-size: 3.0625rem;
  --light-size: 2.71875rem;
  font-size: 2.6875rem;
  line-height: 2.8125rem;
  letter-spacing: -.02em;
  color: var(--ink);
}

.section-title--process {
  --strong-size: 2.75rem;
}

.section-title--quality {
  --strong-size: 3rem;
  --light-size: 2.65625rem;
}

.section-title__strong {
  display: block;
  font-weight: 700;
  font-size: var(--strong-size);
}

.section-title__light {
  display: block;
  font-weight: 400;
  font-size: var(--light-size);
}

@media (max-width: 991.98px) {
  .section-title {
    font-size: clamp(30px, 5.6vw, 42px);
    line-height: 1.12;
  }

  .section-title__strong,
  .section-title__light {
    font-size: inherit;
  }
}

/* Centred heading: bold half + regular half on one line (videos, testimonials).
   The h2 size sets the letter-spacing and the gap between the two halves. */
.section-head {
  text-align: center;
}

.split-title {
  font-size: calc(21.2px + .9vw);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
}

.split-title__bold,
.split-title__light {
  display: inline;
  font-size: 2.5rem;
  line-height: 1.15;
}

.split-title__bold {
  font-weight: 700;
}

.split-title__light {
  font-weight: 400;
}

.section-head__text {
  margin: 10px 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #4b4e54;
}

@media (min-width: 1200px) {
  .split-title {
    font-size: 32px;
  }
}

@media (max-width: 991.98px) {

  .split-title__bold,
  .split-title__light {
    font-size: clamp(30px, 5.4vw, 38px);
  }

  .section-head__text {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .section-head {
    text-align: left;
  }
}

.section-more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.section-more--testimonials {
  margin-top: 3.5rem;
}

@media (max-width: 991.98px) {
  .section-more {
    margin-top: 2.5rem;
  }
}

@media (max-width: 575.98px) {
  .section-more {
    margin-top: 2rem;
  }
}


/* ---------------------------------------------------------------------
   Detail popup (Why Thikedaar cards, quality badges)
   --------------------------------------------------------------------- */
.info-dialog {
  margin: auto;
  width: min(60rem, calc(100% - 2rem));
  max-width: none;
  max-height: calc(100dvh - 3rem);
  padding: 0;
  border: 0;
  border-radius: 1.75rem;
  background-color: var(--white);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45);
}

.info-dialog::backdrop {
  background-color: rgba(30, 30, 34, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Sticky so the X stays in reach when long content scrolls */
.info-dialog__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 0;
}

.info-dialog__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  margin: 1.25rem 1.25rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: .2s var(--ease);
  transition-property: background-color, scale;
}

.info-dialog__close svg {
  width: 36%;
  height: 36%;
}

.info-dialog__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .info-dialog__close:hover {
    background-color: #2a2b31;
    scale: 1.06;
  }
}

.info-dialog__body {
  padding: 5.25rem clamp(1.5rem, 9%, 7rem) 4rem;
}

.info-dialog__label {
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.info-dialog__title {
  margin-top: .75rem;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--ink);
}

.info-dialog__para {
  max-width: 46rem;
  margin-top: 1rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: #2f3033;
}

.info-dialog__title+.info-dialog__para {
  margin-top: 1.75rem;
}

.info-dialog__points {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: 1.75rem;
}

.info-dialog__point {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  height: 2.75rem;
  padding-left: .375rem;
  padding-right: 1.125rem;
  border-radius: 9999px;
  background-color: #f5f5f7;
  font-size: .96875rem;
  font-weight: 500;
  color: var(--ink);
}

.info-dialog__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: var(--accent);
}

.info-dialog__check svg {
  width: 50%;
  height: 50%;
}

.info-dialog__link {
  margin-top: 2rem;
  font-size: 1.125rem;
}

@media (max-width: 991.98px) {
  .info-dialog__title {
    font-size: 2.75rem;
  }
}

@media (max-width: 575.98px) {
  .info-dialog {
    width: calc(100% - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    border-radius: 22px;
  }

  .info-dialog__close {
    margin: .875rem .875rem 0 0;
  }

  .info-dialog__body {
    padding-top: 4rem;
    padding-bottom: 2.25rem;
  }

  .info-dialog__label {
    font-size: 1rem;
  }

  .info-dialog__title {
    font-size: 2rem;
  }

  .info-dialog__para {
    font-size: 1rem;
  }

  .info-dialog__title+.info-dialog__para {
    margin-top: 1.25rem;
  }

  .info-dialog__points {
    margin-top: 1.5rem;
    gap: .5rem;
  }

  .info-dialog__point {
    height: auto;
    min-height: 2.5rem;
    padding-block: .25rem;
    font-size: .90625rem;
  }

  .info-dialog__link {
    font-size: 1rem;
  }
}


/* ---------------------------------------------------------------------
   Floating call button (sits below the WhatsApp widget)
   Both buttons stay hidden over the hero (site.js adds body.floats-visible
   after it) and blur while the page is scrolling (body.is-scrolling).
   --------------------------------------------------------------------- */
.floating-call-btn {
  position: fixed;
  bottom: 20px;
  right: 25px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffb800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  z-index: 99999;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease, opacity .3s ease, filter .3s ease, translate .3s ease, visibility .3s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* WhatsApp widget button (third-party, 50px): shrink to match the call button.
   `scale` is used because the widget pins its position with !important rules;
   `body` raises specificity above the widget's own stylesheet, injected after this one. */
body #wa-widget-send-button {
  scale: .8;
  transform-origin: bottom right;
  transition: opacity .3s ease, filter .3s ease, translate .3s ease, visibility .3s;
}

body:not(.floats-visible) .floating-call-btn,
body:not(.floats-visible) #wa-widget-send-button {
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  pointer-events: none;
}

body.is-scrolling .floating-call-btn,
body.is-scrolling #wa-widget-send-button {
  filter: blur(2px);
  opacity: .55;
}

.floating-call-btn:hover,
.floating-call-btn:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
}

.floating-call-btn:active {
  transform: scale(.96);
}

.floating-call-btn img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .floating-call-btn {
    bottom: 16px;
    right: 14px;
    width: 36px;
    height: 36px;
  }

  body #wa-widget-send-button {
    scale: .72;
  }
}

@media (prefers-reduced-motion: reduce) {

  .floating-call-btn,
  body #wa-widget-send-button {
    transition: none;
  }
}


/* =====================================================================
   HEADER
   ===================================================================== */
/* Countdown bar + header stick to the top together */
.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ----- Festive toran ----- */
/* Hangs from the bottom of the header over the page and travels with it; the SVG tile repeats seamlessly. */
.festival-offer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  height: clamp(46px, 5.6vw, 76px);
  background: url("../images/toran.svg") 0 0 / auto 100% repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
  pointer-events: none;
  transform-origin: top center;
  /* backwards (not both) so the scroll-hide styles below can take over once the drop-in ends */
  animation: toranDrop .7s var(--ease) backwards;
  transition: .35s var(--ease);
  transition-property: opacity, translate, visibility;
}

/* Only shown over the hero at the top of the page; tucks up behind the header once the user scrolls */
.site-header.is-scrolled+.festival-offer {
  opacity: 0;
  translate: 0 -12px;
  visibility: hidden;
}

@keyframes toranDrop {
  from {
    opacity: 0;
    translate: 0 -10px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .festival-offer {
    animation: none;
    transition: none;
  }
}

/* ----- Offer countdown bar ----- */
.cd-bar {
  background: #7008e7;
  color: #fff;
  overflow: hidden;
}

.cd-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 2px 20px;
  margin: 0 auto;
  max-width: 1200px;
}

.cd-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-label-short {
  display: none;
}

.cd-label-long {
  display: inline;
}

.cd-clock {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.cd-unit {
  text-align: center;
  min-width: 30px;
}

.cd-unit--sec {
  position: relative;
}

.cd-num-wrap {
  position: relative;
  height: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-num {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-family: 'Inter', system-ui, sans-serif;
}

.cd-sec {
  position: relative;
  z-index: 1;
}

.cd-sec-out {
  position: absolute;
  color: rgba(255, 255, 255, .25);
  opacity: 0;
  pointer-events: none;
  font-weight: 300;
}

.cd-sub {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-top: 1px;
}

.cd-sep {
  font-size: 15px;
  font-weight: 200;
  line-height: 1;
  padding: 0 3px 6px;
  color: rgba(255, 255, 255, .4);
  flex-shrink: 0;
}

.cd-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 5px;
  background: #ffd11a;
  color: #111;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}

.cd-cta:hover {
  opacity: .8;
}

@keyframes cdFlipIn {
  from {
    transform: translateY(60%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cdFlipOut {
  from {
    transform: translateY(0);
    opacity: .25;
  }

  to {
    transform: translateY(-55%);
    opacity: 0;
  }
}

#cdSec.cd-flip {
  animation: cdFlipIn .35s cubic-bezier(.22, .68, 0, 1.2) both;
}

#cdSecOut.cd-flip {
  animation: cdFlipOut .35s cubic-bezier(.4, 0, .6, 1) both;
}

@media (max-width: 768px) {
  .cd-inner {
    gap: 12px;
    padding: 6px 16px 5px;
  }

  .cd-label {
    font-size: 10.5px;
  }
}

@media (max-width: 600px) {
  .cd-label-long {
    display: none;
  }

  .cd-label-short {
    display: inline;
  }

  .cd-inner {
    gap: 10px;
    padding: 6px 12px 5px;
  }
}

@media (max-width: 480px) {
  .cd-inner {
    gap: 8px;
    padding: 5px 10px;
  }

  .cd-num {
    font-size: 17px;
  }

  .cd-num-wrap {
    height: 20px;
  }

  .cd-sep {
    font-size: 13px;
    padding: 0 2px 5px;
  }

  .cd-sub {
    font-size: 7.5px;
  }

  .cd-label {
    font-size: 10px;
  }

  .cd-cta {
    font-size: 10px;
    padding: 3px 10px;
  }
}

@media (max-width: 360px) {
  .cd-cta {
    display: none;
  }

  .cd-inner {
    gap: 7px;
  }
}

/* ----- Header bar ----- */
/* No backdrop-filter here: it would make the header the containing block of the fixed mobile drawer */
.site-header {
  position: relative;
  z-index: 100;
  background-color: #000;
  transition: .35s var(--ease);
  transition-property: background-color, box-shadow;
}

/*
.site-header.is-scrolled {
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .5);
}*/

/* Height grows on scroll only on desktop: below 992px the menu drawer is pinned at top: 3.75rem */
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 3.75rem;
  transition: height .35s var(--ease);
}

@media (min-width: 992px) {
  .is-scrolled .site-header__bar {
    height: 4rem;
  }
}

.site-header__logo {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
}

.site-header__logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-header__logo img {
  width: 10rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Contact Us in the bar (tablet and desktop) */
.site-header__contact {
  height: 2.8125rem;
  padding-inline: 1.5625rem;
  font-size: 1rem;
  border-width: 1px;
  border-color: rgba(255, 255, 255, .35);
}

@media (hover: hover) {
  .site-header__contact:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
  }
}

/* Login / user icon */
.site-header__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.625rem;
  height: 2.625rem;
  border: 1.8px solid rgba(255, 255, 255, .35);
  border-radius: 9999px;
  background-color: transparent;
  color: var(--white);
  -webkit-tap-highlight-color: rgba(255, 209, 26, .2);
  transition: .2s var(--ease);
  transition-property: background-color, border-color, color, scale;
}

.site-header__login svg {
  width: 1.25rem;
  height: 1.25rem;
}

.site-header__login:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .site-header__login:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    scale: 1.08;
  }
}

/* Hamburger (below 992px) */
.nav-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background-color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.nav-toggle__bar {
  position: absolute;
  left: .75rem;
  width: 1.25rem;
  height: .125rem;
  border-radius: 2px;
  background-color: var(--white);
  transition: .35s var(--ease);
  transition-property: rotate, top, opacity;
}

.nav-toggle__bar--top {
  top: 15px;
}

.nav-toggle__bar--mid {
  top: 21px;
}

.nav-toggle__bar--bottom {
  top: 27px;
}

.nav-open .nav-toggle__bar--top {
  top: 21px;
  rotate: 45deg;
}

.nav-open .nav-toggle__bar--mid {
  opacity: 0;
}

.nav-open .nav-toggle__bar--bottom {
  top: 21px;
  rotate: -45deg;
}

/* ----- Primary navigation ----- */
.site-nav {
  margin-left: 2.125rem;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Nav link with a yellow underline that grows from the left on hover
   (add .is-active to mark the current page) */
.site-nav__link,
.mega-link {
  position: relative;
  display: inline-block;
}

.site-nav__link::after,
.mega-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--accent);
  scale: 0 1;
  transform-origin: left;
  transition: .2s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

.site-nav__link.is-active::after,
.mega-link.is-active::after {
  scale: 1 1;
}

.site-nav__link:focus-visible,
.mega-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-nav__link {
  padding-block: .375rem;
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--white);
  -webkit-tap-highlight-color: rgba(255, 209, 26, .2);
  transition: .2s var(--ease);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
}

/* "More" toggle */
.site-nav__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: .375rem;
  border: 0;
  background-color: transparent;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 209, 26, .2);
  transition: .2s var(--ease);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
}

.site-nav__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.is-open .site-nav__more {
  color: var(--accent);
}

.site-nav__more-icon {
  width: 12px;
  height: 12px;
  transition: .2s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

.is-open .site-nav__more-icon {
  rotate: 180deg;
}

/* Phone-only Contact Us inside the drawer */
.site-nav__contact {
  display: none;
}

/* "More" mega panel. Desktop: floats under the header, opens on click (.is-open)
   or hover. Below 992px: inline accordion. */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  translate: 0 10px;
  transition: opacity .2s var(--ease), translate .2s var(--ease), visibility 0s linear .2s;
}

/* Invisible bridge so the mouse can travel from "More" down to the panel */
.mega-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.875rem;
}

.mega-item.is-open>.mega-panel {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity .2s var(--ease), translate .2s var(--ease), visibility 0s;
}

@media (hover: hover) and (min-width: 992px) {
  .mega-item:hover>.mega-panel {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity .2s var(--ease), translate .2s var(--ease), visibility 0s;
  }

  .mega-item:hover .site-nav__more-icon {
    rotate: 180deg;
  }
}

/* Links (two columns of title + description) on the left, tinted "Featured" video card on the right */
.mega-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  padding: 20px;
  border: 1px solid #eef0f3;
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: 0 30px 60px -30px rgba(15, 20, 30, .35), 0 8px 20px -12px rgba(15, 20, 30, .12);
}

.mega-panel__col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 4px 16px;
}

.mega-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  transition: background-color .2s var(--ease);
}

/* The underline used by the top nav links isn't part of this design */
.mega-link::after {
  display: none;
}

.mega-link__title {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #1f2024;
}

.mega-link__desc {
  font-size: 13.5px;
  line-height: 1.4;
  color: #7a7e85;
}

.mega-panel__video {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 0;
  border-radius: 16px;
  background-color: #fff6d1;
  overflow: hidden;
}

.mega-feature__label {
  font-size: 13px;
  font-weight: 500;
  color: #8a6d00;
}

.mega-feature__title {
  margin: 6px 0 16px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Video sits flush at the bottom of the card, rounded on the top corners only */
.mega-panel__video .mega-video,
.mega-panel__video .video-thumb-frame {
  margin-top: 10px;
  border-radius: 12px 12px 0 0;
}

/* YouTube thumbnail in the panel: site.js loads the thumbnail and swaps in the player on click */
.mega-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background-image: radial-gradient(60% 65% at 50% 60%, #f1f1f1 0%, #d9d9d9 55%, #cbcbcb 100%);
}

.mega-video:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.mega-video__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

.mega-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(33, 33, 38, .92);
  color: var(--white);
  translate: -50% -50%;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
  transition: .2s var(--ease);
  transition-property: background-color, color, scale;
}

.mega-video__play svg {
  width: 26px;
  height: 26px;
}

.mega-video:focus-visible .mega-video__play {
  background-color: var(--accent);
  color: var(--ink);
  scale: 1.08;
}

/* YouTube player swapped in by site.js */
.video-thumb-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  border: 0;
  border-radius: 18px;
}

@media (hover: hover) {

  .site-nav__link:hover,
  .site-nav__more:hover {
    color: var(--accent);
  }

  .site-nav__link:hover::after,
  .mega-link:hover::after {
    scale: 1 1;
  }

  .mega-link:hover {
    background-color: #f5f6f8;
  }

  .mega-link:hover .mega-link__title {
    color: var(--ink);
  }

  .mega-video:hover .mega-video__img {
    scale: 1.04;
  }

  .mega-video:hover .mega-video__play {
    background-color: var(--accent);
    color: var(--ink);
    scale: 1.08;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-nav {
    margin-left: 1.25rem;
  }

  .site-nav__list {
    gap: 1.875rem;
  }

  .site-nav__link {
    font-size: 1rem;
  }
}

/* Small desktops: rem shrinks with the viewport here (html font-size: 1.1111vw), so keep the
   bar's text and tap targets at a readable minimum. Everything still fits on one line at 992px. */
@media (min-width: 992px) and (max-width: 1439.98px) {
  .site-header__logo img {
    width: max(120px, 10rem);
  }

  .site-nav__link,
  .site-nav__more {
    font-size: max(14px, 1rem);
  }

  .site-header__contact {
    height: max(40px, 2.8125rem);
    padding-inline: max(18px, 1.5625rem);
    font-size: max(14px, 1rem);
  }

  .site-header__login {
    width: max(40px, 2.625rem);
    height: max(40px, 2.625rem);
  }

  .site-header__login svg {
    width: max(18px, 1.25rem);
    height: max(18px, 1.25rem);
  }
}

/* While the mobile drawer is open, the floating buttons and fireworks would sit on top of it */
body.nav-is-open .floating-call-btn,
body.nav-is-open #wa-widget-send-button,
body.nav-is-open .offer-fab,
body.nav-is-open #sound-toggle,
body.nav-is-open .festive-canvas {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ----- Header below 992px: the nav becomes a drawer under the header ----- */
@media (max-width: 991.98px) {
  .site-header__logo img {
    width: 130px;
  }

  .site-header__actions {
    gap: .5rem;
  }

  .site-header__contact {
    height: 2.5rem;
    padding-inline: 1.25rem;
    font-size: .9375rem;
  }

  .site-header__login {
    width: 2.5rem;
    height: 2.5rem;
  }

  .site-header__login svg {
    width: 19px;
    height: 19px;
  }

  .nav-toggle {
    display: inline-block;
  }

  /* Visibility flips instantly when opening and only after the slide when closing.
     --drawer-top is the header's bottom edge (set by site.js), below the sticky top bar. */
  .nav-drawer {
    position: fixed;
    top: var(--drawer-top, 3.75rem);
    inset-inline: 0;
    bottom: 0;
    z-index: 99;
    max-height: calc(100vh - var(--drawer-top, 3.75rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    translate: 0 -10px;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .35s var(--ease), opacity .35s var(--ease),
      translate .35s var(--ease), visibility 0s linear .35s;
  }

  .nav-open .nav-drawer {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    clip-path: inset(0 0 0 0);
    transition: clip-path .35s var(--ease), opacity .35s var(--ease),
      translate .35s var(--ease), visibility 0s;
  }

  .site-nav {
    margin: 0;
    padding: .5rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    background-color: var(--white);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .5);
    border-top: 1px solid #e0e0e0;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list>li+li {
    border-top: 1px solid #e0e0e0;
  }

  .site-nav__link {
    display: block;
    padding: .875rem .125rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #000;
  }

  .site-nav__link::after {
    bottom: 8px;
    width: 40px;
  }

  .site-nav__more {
    width: 100%;
    justify-content: space-between;
    padding: .875rem .125rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #000;
  }

  .is-open .site-nav__more {
    color: var(--accent);
  }

  .site-nav__more-icon {
    width: 14px;
    height: 14px;
  }

  .site-nav__contact {
    width: 100%;
    height: 3.125rem;
    margin-top: .875rem;
    font-size: 1rem;
  }

  .mega-panel {
    position: static;
    display: none;
    visibility: visible;
    opacity: 1;
    translate: none;
  }

  .mega-panel::before {
    display: none;
  }

  .mega-item.is-open>.mega-panel {
    display: block;
    animation: megaSlide .3s var(--ease);
  }

  /* Drawer: the links take the full width (two columns, one on phones); the Featured card is hidden */
  .mega-panel__inner {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: .375rem;
    padding: .25rem 0 1.125rem;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }

  .mega-panel__col {
    gap: 0 1.25rem;
  }

  .mega-link {
    padding: 8px 0;
    border-radius: 0;
  }

  .mega-link__title {
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
  }

  .mega-link__desc {
    font-size: 13px;
  }

  .mega-panel__video {
    display: none;
  }
}

@media (max-width: 991.98px) and (hover: hover) {

  .site-nav__link:hover,
  .site-nav__more:hover,
  .mega-link:hover .mega-link__title {
    color: var(--accent);
  }

  .mega-link:hover {
    background-color: transparent;
  }
}

@media (max-width: 991.98px) and (max-height: 500px) {
  .nav-drawer {
    max-height: calc(100dvh - var(--drawer-top, 3.75rem));
    overscroll-behavior: contain;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .nav-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .nav-toggle__bar {
    left: 11px;
    width: 18px;
  }

  .nav-toggle__bar--top {
    top: 14px;
  }

  .nav-toggle__bar--mid {
    top: 19px;
  }

  .nav-toggle__bar--bottom {
    top: 24px;
  }

  .nav-open .nav-toggle__bar--top,
  .nav-open .nav-toggle__bar--bottom {
    top: 19px;
  }
}

@media (max-width: 767.98px) {
  .site-nav__contact {
    display: flex;
  }

  .site-header__contact {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .site-header__logo img {
    width: 120px;
  }

  .site-header__login {
    width: 2.375rem;
    height: 2.375rem;
  }

  .site-header__login svg {
    width: 17px;
    height: 17px;
  }

  .nav-toggle {
    width: 2.375rem;
    height: 2.375rem;
  }

  .nav-toggle__bar {
    left: .625rem;
    width: 18px;
  }

  .nav-toggle__bar--top {
    top: 13px;
  }

  .nav-toggle__bar--mid {
    top: 18px;
  }

  .nav-toggle__bar--bottom {
    top: 23px;
  }

  .nav-open .nav-toggle__bar--top,
  .nav-open .nav-toggle__bar--bottom {
    top: 18px;
  }

  .site-nav__link {
    padding-block: .75rem;
    font-size: 1rem;
  }

  .site-nav__contact {
    height: 2.875rem;
    margin-top: .75rem;
    font-size: .9375rem;
  }

  .mega-panel__col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Landscape phones */
@media (max-width: 575.98px) and (max-height: 500px) {
  .site-header__logo img {
    width: 110px;
  }

  .site-header__login {
    width: 2.25rem;
    height: 2.25rem;
  }

  .nav-toggle {
    width: 2.25rem;
    height: 2.25rem;
  }

  .site-nav__link {
    padding-block: .625rem;
    font-size: .9375rem;
  }
}

@media (max-width: 359.98px) {
  .site-header__logo img {
    width: 104px;
  }
}


/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  margin-top: -3.75rem;
  padding-top: 150px;
  overflow: hidden;
  background-color: #fff;
}

.hero__inner {
  position: relative;
  height: 25rem;
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 37.5rem;
  padding-top: 2rem;
}

.hero__title {
  font-size: 3.5rem;
  line-height: 3.3125rem;
  letter-spacing: -.025em;
  color: var(--ink);
}

.hero__title-line {
  display: block;
  font-weight: 700;
}

.hero__title-line--light {
  font-weight: 300;
  letter-spacing: -.02em;
}

.hero__lead {
  margin-top: 1.0625rem;
  font-size: 1.1875rem;
  line-height: 1.6875rem;
  font-weight: 400;
  color: var(--text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.125rem;
  margin-top: 1.5rem;
}

/* House render on the right. No z-index on this wrapper: it would isolate the
   image and break mix-blend-mode. */
.hero__visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__image {
  position: absolute;
  left: 26.375rem;
  top: 20px;
  width: 57.125rem;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(75% 80% at 55% 52%, #000 72%, transparent 100%);
  mask-image: radial-gradient(75% 80% at 55% 52%, #000 72%, transparent 100%);
  animation: heroFloat 7s ease-in-out infinite;
}

/* Feature tiles under the hero */
.hero__features-band {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, var(--white) 45%);
}

/* One slim, centred row: yellow round icon + label. The second group starts after a thin divider. */
.hero__features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  padding-block: 1.25rem 2rem;
}

.feature-pill {
  display: flex;
  align-items: center;
  gap: 5px;
}

.feature-pill--group {
  padding-left: 1.5rem;
  border-left: 1px solid #d6d8dc;
}

.feature-pill__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  transition: scale .2s var(--ease);
}

.feature-pill__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-pill__icon svg>circle:first-child {
  fill: var(--accent);
  stroke: none;
}

.feature-pill__icon .is-solid {
  fill: var(--ink);
  stroke: none;
}

.feature-pill__label {
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink);
}

@media (hover: hover) {
  .feature-pill:hover .feature-pill__icon {
    scale: 1.12;
  }
}

/* Too narrow for one row: two rows of three, one group per row, so the divider is dropped */
@media (max-width: 1099.98px) {
  .hero__features {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 1rem 2.5rem;
    padding-block: 1.75rem 2.25rem;
  }

  .feature-pill--group {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 991.98px) {
  .hero__inner {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .hero__copy {
    container-type: inline-size;
    max-width: 640px;
    padding-top: 28px;
  }

  .hero__title {
    font-size: clamp(26px, 9.4cqi, 56px);
    line-height: 1.06;
  }

  .hero__lead {
    max-width: 520px;
    font-size: clamp(16px, 2.6vw, 19px);
    line-height: 1.5;
  }

  .hero__actions {
    margin-top: 26px;
  }

  .hero__visual {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 720px;
    margin: .5rem auto 0;
    aspect-ratio: 876 / 520;
  }

  .hero__image {
    left: -18%;
    top: 1%;
    width: 120%;
    max-width: none;
  }

}

@media (max-width: 767.98px) {
  .hero__features-band {
    background-image: none;
    background-color: var(--bg-bottom);
  }

  /* Phones: two left-aligned columns; long labels may wrap */
  .hero__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: .875rem 1rem;
  }

  .feature-pill__label {
    font-size: .875rem;
    white-space: normal;
  }
}

@media (max-width: 575.98px) {
  .hero__copy {
    padding-top: 18px;
  }

  .hero__actions {
    gap: .75rem;
  }

  .hero__cta {
    flex: 1 1 0;
    padding-inline: 1rem;
  }

  .hero__visual {
    margin-top: .25rem;
    aspect-ratio: 876 / 620;
  }

  .hero__image {
    left: -24%;
    top: 2%;
    width: 130%;
  }

  .hero__features {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
}


/* =====================================================================
   STATS
   ===================================================================== */
.stats {
  background-color: var(--white);
  padding-block: 80px;
}

.stats__card {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--page-w);
  height: 20rem;
  margin-inline: auto;
  padding-bottom: .625rem;
  border-radius: .875rem;
  overflow: hidden;
  background-image:
    radial-gradient(55% 90% at 18% 115%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 70% at 52% -20%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(100deg, #f0f2f4 0%, #f4f5f7 55%, #f3f5f6 100%);
  box-shadow: 0 1px 2px rgba(15, 20, 30, .04), 0 12px 30px -24px rgba(15, 20, 30, .25);
}

.stats__intro {
  position: relative;
  z-index: 1;
  flex: 0 0 25.0625rem;
  padding-left: 2.9375rem;
}

.stats__rank {
  font-size: 2.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.stats__rank::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: .25rem;
  margin-top: .6875rem;
  border-radius: 4px;
  background-color: var(--accent);
}

.stats__title {
  margin-top: .9375rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.9375rem;
  letter-spacing: -.01em;
  color: var(--ink);
}

.stats__text {
  margin-top: .75rem;
  font-size: 1.21875rem;
  line-height: 1.75rem;
  color: var(--text);
}

.stats__list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 3.25rem;
}

.stat:nth-child(1) {
  width: 15.5625rem;
}

.stat:nth-child(2) {
  width: 14.8125rem;
}

/* Divider before each figure */
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 7.3125rem;
  translate: 0 -50%;
  background-color: #c9ccd2;
}

.stat__value {
  font-size: 2.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: .625rem;
  font-size: 1.4375rem;
  line-height: 1.75rem;
  font-weight: 400;
  color: #26272b;
}

.stats__image {
  position: absolute;
  top: 0;
  right: 0;
  width: 21.8125rem;
  height: 100%;
  object-fit: cover;
  object-position: right;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  transition: .6s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

@media (hover: hover) {
  .stats__card:hover .stats__image {
    scale: 1.03;
  }
}

@media (max-width: 991.98px) {
  .stats {
    padding-top: 20px;
    padding-bottom: 0;
  }

  .stats__card {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    height: auto;
    margin-inline: 1.25rem;
    padding: 2rem 1.75rem 1.875rem;
    border-radius: 16px;
  }

  .stats__intro {
    flex: none;
    max-width: 60%;
    padding-left: 0;
  }

  .stats__rank {
    font-size: 2.625rem;
  }

  .stats__rank::after {
    width: 3.125rem;
    margin-top: .625rem;
  }

  .stats__title {
    margin-top: .875rem;
    font-size: 1.4375rem;
    line-height: 1.3;
  }

  .stats__text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .stats__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.875rem;
    padding-top: 1.625rem;
    border-top: 1px solid #dfe2e6;
  }

  .stat,
  .stat:nth-child(1),
  .stat:nth-child(2) {
    width: auto;
    padding-left: 1.5rem;
  }

  .stat::before {
    height: 100%;
  }

  .stat:first-child {
    padding-left: 0;
  }

  .stat:first-child::before {
    display: none;
  }

  .stat__value {
    font-size: 2.375rem;
  }

  .stat__label {
    margin-top: .5rem;
    font-size: 1.0625rem;
    line-height: 1.45;
  }

  .stats__image {
    width: 42%;
    height: 250px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%), linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 35%), linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

@media (max-width: 575.98px) {
  .stats__card {
    margin-inline: .875rem;
    padding: 1.625rem 1.25rem 1.5rem;
  }

  .stats__intro {
    max-width: none;
  }

  .stats__rank {
    font-size: 2.375rem;
  }

  .stats__title {
    font-size: 1.3125rem;
  }

  .stats__text {
    font-size: .9375rem;
  }

  .stats__list {
    margin-top: 1.375rem;
    padding-top: 1.25rem;
  }

  .stat:not(:first-child) {
    padding-left: .875rem;
  }

  .stat__value {
    font-size: 1.75rem;
  }

  .stat__label {
    font-size: .875rem;
  }

  .stats__image {
    display: none;
  }
}

@media (max-width: 360.98px) {
  .stats__card {
    margin-inline: .75rem;
    padding: 1.625rem 1.125rem;
  }

  .stats__list {
    column-gap: .25rem;
  }
}


/* =====================================================================
   SERVICES
   ===================================================================== */
.services {
  background-color: var(--white);
  padding-block: 80px;
}

.services__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.services__cta {
  flex-shrink: 0;
  width: 17.125rem;
  height: 3.0625rem;
  margin-top: 1.5rem;
  font-size: 1.09375rem;
  border-color: #a9adb4;
}

.services__cta:focus-visible {
  border-color: var(--ink);
}

.services__grid {
  display: grid;
  grid-template-columns: 381fr 373fr;
  gap: 1.1875rem;
  margin-top: .375rem;
}

.service-card {
  position: relative;
  display: flex;
  min-height: 28.125rem;
  border-radius: .75rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(15, 20, 30, .04);
  transition: .35s var(--ease);
  transition-property: translate, box-shadow;
}

.service-card--home {
  background-image: linear-gradient(100deg, #fdf3d6 0%, #fdf7e6 40%, #fcf9f0 100%);
}

.service-card--commercial {
  background-image: linear-gradient(100deg, #eaf3fc 0%, #f0f6fc 45%, #f3f8fc 100%);
}

.service-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2.25rem 0 2.25rem 2.625rem;
}

.service-card__title {
  margin-top: 1.375rem;
  font-size: 2.1875rem;
  font-weight: 700;
  line-height: 2.3125rem;
  letter-spacing: -.02em;
  color: var(--ink);
}

.service-card__text {
  margin-top: .875rem;
  font-size: 1.28125rem;
  line-height: 1.75rem;
  color: #34363a;
}

.service-card__cta {
  width: 12.75rem;
  height: 3.0625rem;
  margin-top: 1.75rem;
  font-size: 1.0625rem;
}

.service-card__image {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  height: 100%;
  object-fit: cover;
  object-position: right;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  transform-origin: bottom right;
  transition: .7s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

.service-card--home .service-card__image {
  width: 55.4%;
}

.service-card--commercial .service-card__image {
  width: 58.4%;
}

@media (hover: hover) {
  .services__cta:hover {
    border-color: var(--ink);
  }

  .service-card:hover {
    translate: 0 -6px;
    box-shadow: 0 26px 44px -26px rgba(15, 20, 30, .35);
  }

  .service-card:hover .service-card__image {
    scale: 1.05;
  }
}

@media (max-width: 991.98px) {
  .services {
    padding-block: 48px;
  }

  .services__head {
    flex-direction: column;
    gap: 18px;
    padding: 0;
  }

  .services__cta {
    width: auto;
    height: 2.875rem;
    margin-top: 0;
    padding-inline: 1.5rem;
    font-size: .9375rem;
  }

  .services__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
  }

  .service-card {
    height: auto;
    min-height: 400px;
    border-radius: 16px;
  }

  .service-card__body {
    max-width: 52%;
    padding-block: 34px;
    padding-left: 2rem;
  }

  .service-card__title {
    margin-top: 18px;
    font-size: 2rem;
    line-height: 1.12;
  }

  .service-card__text {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .service-card__cta {
    width: auto;
    height: 3rem;
    padding-inline: 1.75rem;
    font-size: .9375rem;
  }

  .service-card--home .service-card__image,
  .service-card--commercial .service-card__image {
    width: 50%;
  }
}

@media (max-width: 575.98px) {
  .service-card {
    flex-direction: column-reverse;
    min-height: 0;
  }

  .service-card__body {
    max-width: none;
    margin-top: -46px;
    padding: 0 22px 1.5rem;
  }

  .service-card__title {
    font-size: 1.6875rem;
  }

  .service-card__text {
    font-size: 1rem;
  }

  .service-card__image,
  .service-card--home .service-card__image,
  .service-card--commercial .service-card__image {
    position: static;
    width: 100%;
    height: 220px;
    object-position: center 30%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
}

@media (max-width: 360.98px) {

  .services__cta,
  .service-card__cta {
    padding-inline: 18px;
  }
}


/* =====================================================================
   HOW WE BUILD
   ===================================================================== */
.process {
  background-color: var(--white);
  overflow: hidden;
  padding-block: 80px;
}

.process__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
}

.process__intro {
  flex: 1 1 0%;
  min-width: 0;
}

.process__lead {
  max-width: 47.5rem;
  margin-top: 1.125rem;
  font-size: 1.0625rem;
  line-height: 1.5625rem;
  color: #4b4e54;
}

.process__arrows {
  display: flex;
  flex-shrink: 0;
  gap: .75rem;
  margin-top: .5rem;
}

/* ----- Step tabs (desktop) ----- */
/* Five equal steps spanning the page column, first icon on the left edge */
.process__tabs {
  --step-w: calc(var(--page-w) / 5);
  --icon: 5rem;
  --icon-x: 0rem;
  --pad-x: 0rem;
  --progress: 1;
  /* set by site.js */
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, var(--step-w));
  max-width: 100%;
  margin-top: 1.375rem;
  padding-left: var(--pad-x);
}

/* Grey line through the icons; the yellow part grows to the selected step */
.process__track {
  position: absolute;
  top: calc(var(--icon) / 2 - 1px);
  left: calc(var(--pad-x) + var(--icon-x) + var(--icon) / 2);
  width: calc(var(--step-w) * 4);
  height: 2px;
  background-color: #dfe2e6;
}

.process__progress {
  position: absolute;
  top: -.5px;
  left: 0;
  width: calc(var(--step-w) * var(--progress));
  height: 3px;
  border-radius: 3px;
  background-color: var(--accent);
  transition: width .5s var(--ease);
}

.process-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  text-align: left;
  color: #34363a;
  cursor: pointer;
}

.process-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.process-tab__icon {
  display: grid;
  place-items: center;
  width: var(--icon);
  height: var(--icon);
  margin-left: var(--icon-x);
  border-radius: 9999px;
  background-color: #f1f2f4;
  color: var(--ink);
  box-shadow: 0 0 0 .375rem var(--white), 0 0 0 .375rem rgba(255, 210, 26, 0);
  transition: .35s var(--ease);
  transition-property: background-color, color, scale, box-shadow;
}

/* Black outline icons; inverted to white on the selected (dark) step */
.process-tab__icon svg,
.process-tab__icon img {
  width: 54%;
  height: 54%;
  object-fit: contain;
  transition: .35s var(--ease);
  transition-property: scale, rotate, filter;
}

/* Numbered bullet + title, left-aligned with the icon above */
.process-tab__row {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-left: var(--icon-x);
}

.process-tab__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: #f1f2f4;
  font-size: .78125rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #6a6e75;
  box-shadow: 0 0 0 1px #dfe2e6;
  transition: .2s var(--ease);
  transition-property: background-color, color, box-shadow;
}

.process-tab__label {
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: #55585e;
  transition: .2s var(--ease);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
}

@media (hover: hover) {

  /* Hover: circle turns soft yellow inside a thin yellow halo, and the icon pops with a slight tilt */
  .process-tab:hover .process-tab__icon {
    background-color: #fff1bf;
    scale: 1.06;
    box-shadow: 0 0 0 .375rem var(--white), 0 0 0 calc(.375rem + 2px) var(--accent);
  }

  .process-tab:hover .process-tab__icon svg,
  .process-tab:hover .process-tab__icon img {
    scale: 1.12;
    rotate: -8deg;
  }

  .process-tab:hover .process-tab__num {
    background-color: #fff1bf;
    box-shadow: 0 0 0 1px var(--accent);
    color: var(--ink);
  }

  .process-tab:hover .process-tab__label {
    color: var(--ink);
  }
}

/* Selected step */
.process-tab.is-active .process-tab__icon,
.process-tab.is-active:hover .process-tab__icon {
  background-color: var(--ink);
  color: var(--accent);
  scale: 1;
  box-shadow: 0 0 0 .375rem var(--white), 0 0 0 calc(.375rem + 2px) var(--accent);
}

.process-tab.is-active .process-tab__icon img {
  filter: invert(1);
}

.process-tab.is-active:hover .process-tab__icon svg,
.process-tab.is-active:hover .process-tab__icon img {
  scale: 1;
  rotate: 0deg;
}

.process-tab.is-active .process-tab__num {
  background-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 10px -3px rgba(255, 199, 0, .6);
}

.process-tab.is-active .process-tab__label {
  color: var(--ink);
  font-weight: 700;
}

/* ----- Detail card for the selected step. Swipe left/right on touch screens to change step. ----- */
.process__detail {
  position: relative;
  touch-action: pan-y;
  margin-top: 1.5rem;
  border: 1px solid #e6e8eb;
  border-radius: .875rem;
  background-color: var(--white);
  box-shadow: 0 20px 40px -32px rgba(15, 20, 30, .3);
}

.process__detail.is-closed {
  display: none;
}

@media (pointer: coarse) {
  .process__detail {
    user-select: none;
  }
}

.process-panel {
  display: grid;
  grid-template-columns: 33.4375rem 1fr;
}

.process-panel.is-active {
  animation: processIn .45s var(--ease);
}

.process-panel__media {
  padding: .75rem 1rem;
  border-right: 1px solid #e6e8eb;
}

.process-panel__media img {
  width: 100%;
  height: 18.5rem;
  border-radius: .5rem;
  object-fit: cover;
}

.process-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: .875rem 4.375rem 1.25rem 1.9375rem;
}

.process-panel__step {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f2b705;
}

.process-panel__title {
  margin-top: .25rem;
  font-size: 1.71875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}

.process-panel__text {
  max-width: 35.625rem;
  margin-top: .625rem;
  font-size: 1.09375rem;
  line-height: 1.5rem;
  color: #45484e;
}

.process-panel__cta {
  width: 11.875rem;
  height: 2.9375rem;
  margin-top: 1.5rem;
  font-size: 1.03125rem;
}

/* ----- Vertical timeline (below 992px) ----- */
.process-timeline {
  display: none;
}

.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 1rem;
  padding-bottom: 2.5rem;
}

.process-timeline .timeline-step:last-child {
  padding-bottom: 0;
}

/* Rail from under this icon down to the next one */
.timeline-step__rail {
  position: absolute;
  left: 27px;
  top: 62px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background-color: var(--accent);
}

.timeline-step__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: var(--white);
  box-shadow: 0 0 0 2px var(--accent), 0 6px 14px -8px rgba(15, 20, 30, .35);
}

.timeline-step__icon img {
  width: 48%;
  height: 48%;
  object-fit: contain;
}

/* Tablet: text left, photo right. Phone: text, photo, then the button. */
.timeline-step__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: .25rem;
}

.timeline-step__step {
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f2b705;
}

.timeline-step__title {
  margin-top: .375rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}

.timeline-step__text {
  margin-top: .5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #5f636a;
}

.timeline-step__cta {
  height: 2.75rem;
  margin-top: 1rem;
  padding-inline: 1.5rem;
  font-size: .9375rem;
  border-color: #a9adb4;
}

.timeline-step__cta:focus-visible {
  border-color: var(--ink);
}

@media (hover: hover) {
  .timeline-step__cta:hover {
    border-color: var(--ink);
  }
}

.timeline-step__image {
  display: block;
  width: 100%;
  margin-top: 1rem;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .timeline-step__content {
    display: grid;
    grid-template-columns: 1fr 38%;
    column-gap: 1.5rem;
  }

  .timeline-step__image {
    grid-column-start: 2;
    grid-row-start: 1;
    margin-top: .25rem;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 991.98px) {
  .process {
    padding-top: 20px;
    padding-bottom: 56px;
  }

  .process__head {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 0;
  }

  .process__lead {
    max-width: 560px;
    margin-top: .875rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .process__arrows,
  .process__tabs,
  .process__detail {
    display: none;
  }

  .process-timeline {
    display: block;
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .timeline-step__copy {
    display: contents;
  }

  .timeline-step__cta {
    order: 1;
  }
}

@media (max-width: 575.98px) {
  .process-timeline {
    margin-top: 1.75rem;
  }

  .timeline-step {
    grid-template-columns: 44px 1fr;
    column-gap: .875rem;
    padding-bottom: 2.25rem;
  }

  .timeline-step__rail {
    left: 21px;
    top: 50px;
  }

  .timeline-step__icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .timeline-step__content {
    padding-top: .125rem;
  }

  .timeline-step__title {
    font-size: 1.1875rem;
  }

  .timeline-step__text {
    font-size: .9375rem;
  }
}


/* =====================================================================
   WHY THIKEDAAR
   ===================================================================== */
.why {
  overflow: hidden;
  background-color: #f9fafb;
  padding-block: 80px;
}

.why__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  width: var(--page-w);
  margin-inline: auto;
}

.why__eyebrow {
  margin-bottom: .75rem;
  font-size: .84375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f2b705;
}

.why__title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
}

.why__link {
  flex-shrink: 0;
  margin-bottom: .375rem;
  font-size: 1.0625rem;
}

/* Card row: scrolls sideways inside the page column.
   Padding leaves room for the hover lift, which the scroller would otherwise clip;
   the track is widened by the same amount so the cards still line up with the page edges. */
.why__track {
  display: flex;
  gap: 1.25rem;
  width: calc(var(--page-w) + .5rem);
  margin: 1.75rem auto 0;
  padding: .75rem .25rem 2rem;
  scroll-padding-inline: .25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.why__track::-webkit-scrollbar {
  display: none;
}

.why-card {
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 20rem;
  height: 30.5rem;
  border-radius: 1.75rem;
  background-color: var(--white);
  box-shadow: 0 1px 2px rgba(15, 20, 30, .04);
  transition: .35s var(--ease);
  transition-property: scale, box-shadow;
}

.why-card__body {
  padding: 2.125rem 1.875rem 0;
}

.why-card__label {
  font-size: .90625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.why-card__title {
  margin-top: .625rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
}

.why-card__text {
  margin-top: .75rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: #45484e;
}

.why-card__media {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 48%;
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}

.why-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .5s var(--ease);
}

/* The + on each card */
.why-card__plus {
  position: absolute;
  right: 1.375rem;
  bottom: 1.375rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #ececef;
  color: var(--ink);
  transition: .3s var(--ease);
  transition-property: background-color, color, rotate;
}

.why-card__plus svg {
  width: 42%;
  height: 42%;
}

.why__nav {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  width: var(--page-w);
  margin-inline: auto;
}

.why__nav-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: #e8e8ed;
  color: var(--ink);
  cursor: pointer;
  transition: .2s var(--ease);
  transition-property: background-color, opacity;
}

.why__nav-btn svg {
  width: 38%;
  height: 38%;
}

.why__nav-btn:disabled {
  opacity: .4;
  cursor: default;
}

.why__nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .why-card:hover {
    scale: 1.012;
    box-shadow: 0 18px 36px -18px rgba(15, 20, 30, .25);
  }

  .why-card:hover .why-card__media img {
    scale: 1.06;
  }

  .why-card:hover .why-card__plus {
    background-color: var(--ink);
    color: var(--white);
    rotate: 90deg;
  }

  .why__nav-btn:hover {
    background-color: #dcdce1;
  }

  .why__nav-btn:disabled:hover {
    background-color: #e8e8ed;
  }
}

@media (max-width: 991.98px) {
  .why {
    padding-block: 56px;
  }

  .why__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: auto;
    margin-inline: 1.25rem;
  }

  .why__eyebrow {
    font-size: .78125rem;
  }

  .why__title {
    font-size: clamp(30px, 5.6vw, 42px);
    line-height: 1.12;
  }

  .why__link {
    margin-bottom: 0;
    font-size: 1rem;
  }

  .why__track {
    width: auto;
    margin-inline: 1.25rem;
    margin-top: 1.25rem;
    gap: 1rem;
  }

  .why-card {
    width: 300px;
    height: 460px;
  }

  .why__nav {
    width: auto;
    margin-inline: 1.25rem;
  }

  .why__nav-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 575.98px) {
  .why {
    padding-block: 44px;
  }

  .why__head,
  .why__track,
  .why__nav {
    margin-inline: .875rem;
  }

  .why__track {
    gap: .75rem;
  }

  .why-card {
    width: min(300px, 80vw);
    height: 440px;
    border-radius: 22px;
  }

  .why-card__body {
    padding: 1.75rem 1.5rem 0;
  }

  .why-card__title {
    font-size: 1.375rem;
  }

  .why-card__text {
    font-size: .90625rem;
  }
}


/* =====================================================================
   QUALITY
   ===================================================================== */
.quality {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  min-height: 28.5rem;
  /* tall enough for the four rows of badges on desktop */
  background-color: var(--white);
  padding-block: 80px;
}

/* Photo anchored to the right edge on desktop */
.quality__visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 57.3125rem;
  max-width: 100%;
  overflow: hidden;
}

/* The mask dissolves the left edge into the white page behind the copy */
.quality__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 25%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 32%);
}

.quality__badges {
  position: absolute;
  inset: 0;
}

.quality-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  height: 3.375rem;
  padding-right: 1.5rem;
  padding-left: .3125rem;
  border-radius: 9999px;
  background-color: var(--white);
  box-shadow: 0 10px 26px -10px rgba(15, 20, 30, .35);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  animation: badgeFloat 5s ease-in-out infinite;
  transition: .2s var(--ease);
  transition-property: translate, box-shadow;
  min-width: 240px;
}


/* Desktop: two staggered columns of four over the photo; float delays keep them out of step */
.quality-badge--foundation {
  left: 9rem;
  top: 2.5rem;
}

.quality-badge--waterproofing {
  left: 35.5rem;
  top: 2rem;
  animation-delay: -2.5s;
}

.quality-badge--structural {
  left: 8.5rem;
  top: 8.5rem;
  animation-delay: -1s;
}

.quality-badge--finishing {
  left: 35.5rem;
  top: 8rem;
  animation-delay: -3.5s;
}

.quality-badge--masonry {
  left: 8rem;
  top: 14.5rem;
  animation-delay: -2s;
}

.quality-badge--handover {
  left: 35.5rem;
  top: 14rem;
  animation-delay: -.5s;
}

.quality-badge--electrical {
  left: 7.5rem;
  top: 20.5rem;
  animation-delay: -3s;
}

.quality-badge--total {
  left: 35.5rem;
  top: 20rem;
  animation-delay: -4.5s;
}

.quality-badge__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.8125rem;
  height: 2.8125rem;
  border-radius: 9999px;
  background-color: var(--accent);
  color: var(--ink);
}

.quality-badge__icon svg {
  width: 52%;
  height: 52%;
}

@media (hover: hover) {
  .quality-badge:hover {
    animation-play-state: paused;
    box-shadow: 0 16px 30px -12px rgba(15, 20, 30, .45);
  }
}

/* Copy on the left. Only the copy itself takes clicks, so the badges beside it stay clickable. */
.quality__copy-wrap {
  position: relative;
  z-index: 1;
  width: var(--page-w);
  height: 100%;
  margin-inline: auto;
  pointer-events: none;
}

.quality__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  padding-top: 1.625rem;
  pointer-events: auto;
}

.quality__text {
  margin-top: 1.375rem;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: #45484e;
}

@media (max-width: 991.98px) {
  .quality {
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    padding-top: 48px;
    padding-bottom: 40px;
  }

  .quality {
    min-height: 0;
  }

  /* Eight badges would crowd the photo, so they become a list under it (two columns, one on phones) */
  .quality__visual {
    position: relative;
    width: auto;
    height: auto;
    margin: 1.75rem 1.25rem 0;
    padding-bottom: .25rem;
    overflow: visible;
  }

  .quality__image {
    height: 420px;
    border-radius: 18px;
    object-position: 60% 35%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .quality__badges {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
    margin-top: 1rem;
  }

  .quality-badge {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 46px;
    gap: .625rem;
    padding-block: .25rem;
    padding-right: 1rem;
    padding-left: .25rem;
    font-size: .875rem;
    line-height: 1.2;
    white-space: normal;
    animation: none;
  }

  .quality-badge__icon {
    width: 38px;
    height: 38px;
  }

  .quality__copy-wrap {
    width: auto;
    height: auto;
    margin-inline: 1.25rem;
  }

  .quality__copy {
    width: auto;
    padding: 0;
  }

  .quality__text {
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.55;
  }
}

/* Phones: the badges become a list under the photo */
@media (max-width: 575.98px) {
  .quality {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .quality__visual {
    margin: 22px .875rem 0;
  }

  .quality__image {
    height: 240px;
    border-radius: 16px;
  }

  .quality__badges {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .875rem;
  }

  .quality-badge {
    gap: .75rem;
    font-size: .90625rem;
  }

  .quality-badge__icon {
    width: 36px;
    height: 36px;
  }

  .quality__copy-wrap {
    margin-inline: .875rem;
  }
}


/* =====================================================================
   VIDEOS
   Cover-flow on a white stage: the active video is a large rounded card with its
   tag, title and YouTube link laid over it (white text on a dark fade); the neighbours
   sit either side, smaller, faded and slightly blurred. site.js sets --yg-pos (slots
   from the centre) and --yg-side (-1, 0, 1) on each item; the sizes below are the only
   layout numbers.
   ===================================================================== */
.videos {
  overflow: hidden;
  background-color: #fbfcfe;
  padding-block: 80px;
}

/* A side card's inner edge sits var(--yg-gap) beyond the centre card's edge,
   so on narrow screens a smaller --yg-img-w is what lets the side cards peek in */
.video-gallery {
  --yg-img-w: 44rem;
  --yg-img-h: calc(var(--yg-img-w) * 9 / 16);
  --yg-thumb-w: 20rem;
  --yg-thumb-h: calc(var(--yg-thumb-w) * 9 / 16);
  --yg-gap: 1.75rem;
  --yg-radius: 1.5rem;
  position: relative;
  margin-top: 3rem;
  touch-action: pan-y;
}

.video-gallery__stage {
  position: relative;
  height: calc(var(--yg-img-h) + 3rem);
}

.video-thumb {
  --yg-x: calc(var(--yg-side) * (var(--yg-img-w) - var(--yg-thumb-w)) / 2 + var(--yg-pos) * (var(--yg-thumb-w) + var(--yg-gap)));
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--yg-thumb-w);
  height: var(--yg-thumb-h);
  overflow: hidden;
  border-radius: calc(var(--yg-radius) * .75);
  background-color: #e4e7eb;
  translate: calc(-50% + var(--yg-x)) -50%;
  /* Neighbours are faded and softened (60% opacity); anything two slots out fades away.
     pos × side is the distance from the centre: 0 → 1, 1 → .6, 2 → 0. */
  filter: blur(1px) saturate(.8);
  opacity: clamp(0, calc((2 - var(--yg-pos) * var(--yg-side)) * .6), 1);
  transition: .6s var(--ease);
  transition-property: width, height, translate, opacity, filter, border-radius, box-shadow;
}

.video-thumb.is-active {
  z-index: 2;
  width: var(--yg-img-w);
  height: var(--yg-img-h);
  border-radius: var(--yg-radius);
  filter: none;
  box-shadow: 0 30px 60px -30px rgba(15, 20, 30, .45), 0 0 0 1px rgba(15, 20, 30, .06);
}

.video-thumb__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.video-thumb__btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* Shade top and bottom of the active card so the text on it stays readable */
.video-thumb__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .78) 100%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.video-thumb.is-active .video-thumb__btn::after {
  opacity: 1;
}

.video-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .5s var(--ease);
}

.video-thumb__play-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.video-thumb.is-active .video-thumb__play-wrap {
  opacity: 1;
  transition-delay: .3s;
}

/* Frosted-glass play button */
.video-thumb__play {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: .2s var(--ease);
  transition-property: scale, background-color, color;
}

.video-thumb__play svg {
  width: 38%;
  height: 38%;
  translate: 8% 0;
}

/* Tag top-left, title + subtitle bottom-left, YouTube pill bottom-right. Only on the active card. */
.video-thumb__info {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 1rem;
  padding: 1.375rem 1.625rem 1.5rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: .3s var(--ease);
  transition-property: opacity, visibility;
}

.video-thumb.is-active .video-thumb__info {
  opacity: 1;
  visibility: visible;
  transition-delay: .3s;
}

.video-thumb__tag {
  grid-area: 1 / 1;
  justify-self: start;
  padding: .375rem .75rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
}

.video-thumb__meta {
  grid-area: 3 / 1;
  align-self: end;
  min-width: 0;
}

.video-thumb__title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--white);
}

.video-thumb__sub {
  margin-top: .25rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .75);
}

.video-thumb__link {
  grid-area: 3 / 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.5rem;
  padding-inline: 1rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--white);
  pointer-events: auto;
  transition: .2s var(--ease);
  transition-property: background-color, color;
}

.video-thumb__link svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.video-thumb__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* YouTube player swapped in by site.js when the centre video is clicked (covers the details) */
.video-thumb__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Counter + arrows, centred under the cards */
.video-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.video-gallery__count {
  font-size: 1.25rem;
  line-height: 1;
  color: #a3a9b0;
  font-variant-numeric: tabular-nums;
}

.video-gallery__current {
  color: var(--ink);
}

.videos .arrow-btn {
  width: 3rem;
  height: 3rem;
}

@media (hover: hover) {
  .video-thumb:not(.is-active):hover {
    filter: none;
    opacity: .9;
  }

  .video-thumb__btn:hover .video-thumb__img {
    scale: 1.04;
  }

  .video-thumb.is-active .video-thumb__btn:hover .video-thumb__play {
    scale: 1.1;
    background-color: var(--accent);
    color: var(--ink);
  }

  .video-thumb__link:hover {
    background-color: var(--white);
    color: var(--ink);
  }
}

@media (max-width: 991.98px) {
  .videos {
    padding-block: 56px;
  }

  .video-gallery {
    --yg-img-w: 34rem;
    --yg-thumb-w: 15rem;
    --yg-gap: 1.25rem;
    --yg-radius: 1.25rem;
    margin-top: 2.25rem;
  }

  .video-thumb__title {
    font-size: 1.125rem;
  }
}

/* About 3rem of each side card shows at the screen edges */
@media (max-width: 767.98px) {
  .video-gallery {
    --yg-img-w: calc(100vw - 8rem);
    --yg-thumb-w: 10rem;
    --yg-gap: .75rem;
    --yg-radius: 1rem;
  }

  .video-gallery__stage {
    height: calc(var(--yg-img-h) + 1.5rem);
  }

  .video-thumb__info {
    padding: 1rem 1.125rem 1.125rem;
  }
}

@media (max-width: 575.98px) {
  .videos {
    padding-block: 44px;
  }

  .video-gallery {
    --yg-img-w: calc(100vw - 6.5rem);
    --yg-thumb-w: 8rem;
    --yg-gap: .5rem;
    margin-top: 1.75rem;
  }

  .video-thumb__info {
    padding: .75rem .875rem .875rem;
  }

  .video-thumb__tag {
    padding: .3125rem .625rem;
    font-size: .625rem;
  }

  .video-thumb__title {
    font-size: .9375rem;
  }

  /* Small card: tapping it plays the video, so the subtitle and YouTube pill are dropped */
  .video-thumb__sub,
  .video-thumb__link {
    display: none;
  }

  .video-thumb__play {
    width: 3rem;
    height: 3rem;
  }
}


/* =====================================================================
   BLDOX APP
   ===================================================================== */
.app {
  overflow: hidden;
  background-color: #fff;
  padding-block: 80px;
}

.app__grid {
  display: grid;
  grid-template-columns: 42.0625rem 20.375rem 1fr;
  align-items: center;
  width: var(--page-w);
  margin-inline: auto;
}

.app__intro {
  padding-top: .5625rem;
}

.app__intro::before {
  content: "";
  display: block;
  width: 2.375rem;
  height: .25rem;
  margin-bottom: .625rem;
  border-radius: 4px;
  background-color: var(--accent);
}

/* h2 size sets the letter-spacing the lines inherit */
.app__title {
  font-size: calc(21.2px + .9vw);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
}

.app__title-main {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.3125rem;
}

.app__title-sub {
  display: block;
  font-size: 2.375rem;
  font-weight: 400;
  line-height: 2.3125rem;
}

.app__text {
  margin: 20px 0;
  font-size: 1.09375rem;
  line-height: 1.375rem;
  color: #45484e;
}

.app__stores {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: .875rem;
}

.store-badge {
  display: block;
  height: 3.5rem;
  border-radius: .625rem;
  overflow: hidden;
  background-color: #000;
  transition: .2s var(--ease);
  transition-property: translate, box-shadow;
}

.store-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.store-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-badge--google {
  width: 12rem;
}

.store-badge--apple {
  width: 11.4375rem;
}

@media (hover: hover) {
  .store-badge:hover {
    translate: 0 -3px;
    box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .55);
  }
}

.app__phone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app__phone img {
  display: block;
  width: 100%;
  max-width: 17.5rem;
  height: auto;
  max-height: 27.5rem;
  margin-inline: auto;
  object-fit: contain;
  backface-visibility: hidden;
}

.app__features {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-block: .375rem;
  padding-left: 1.75rem;
  border-left: 1px solid #e3e5e8;
}

.app-feature {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  color: #2f3033;
}

.app-feature__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #f0f1f3;
  color: var(--ink);
  transition: .2s var(--ease);
  transition-property: background-color, scale;
}

.app-feature__icon svg {
  width: 58%;
  height: 58%;
}

.app-feature__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-feature__title {
  font-size: .96875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.app-feature__sub {
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.375;
  color: #656972;
}

@media (hover: hover) {
  .app-feature:hover .app-feature__icon {
    background-color: var(--accent);
    scale: 1.08;
  }
}

@media (min-width: 1200px) {
  .app__title {
    font-size: 32px;
  }
}

@media (max-width: 991.98px) {
  .app {
    padding-block: 56px;
  }

  .app__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    justify-items: center;
    gap: 40px;
    width: auto;
    height: auto;
    margin-inline: 1.25rem;
    text-align: center;
  }

  .app__intro {
    grid-column: 1 / -1;
    max-width: 560px;
    padding: 0;
  }

  .app__intro::before {
    width: 42px;
    margin-inline: auto;
  }

  .app__title-main {
    font-size: 2.125rem;
    line-height: 1.15;
  }

  .app__title-sub {
    font-size: clamp(24px, 4.4vw, 33px);
    line-height: 1.2;
  }

  .app__text {
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .app__stores {
    align-items: center;
    justify-content: center;
  }

  .store-badge,
  .store-badge--google,
  .store-badge--apple {
    width: 172px;
    height: 52px;
  }

  .app__phone {
    height: auto;
    margin-top: 28px;
    overflow: visible;
  }

  .app__phone img {
    max-width: 250px;
    max-height: 380px;
  }

  .app__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 620px;
    margin-top: 28px;
    padding-block: 6px;
    padding-left: 0;
    border-left-width: 0;
    text-align: left;
  }

  .app-feature__icon {
    width: 36px;
    height: 36px;
  }

  .app-feature__title {
    font-size: .90625rem;
  }

  .app-feature__sub {
    font-size: .75rem;
  }
}

@media (max-width: 575.98px) {
  .app {
    padding-block: 44px;
  }

  .app__grid {
    margin-inline: .875rem;
  }

  .app__title-main {
    font-size: 1.875rem;
  }

  .app__title-sub {
    font-size: 18px;
  }

  .app__text {
    font-size: .875rem;
  }

  .app__stores {
    gap: .625rem;
  }

  .store-badge,
  .store-badge--google,
  .store-badge--apple {
    width: calc(50% - 5px);
    max-width: 180px;
    height: auto;
    aspect-ratio: 192 / 56;
  }

  .app__phone {
    order: 2;
    margin-top: 0;
  }

  .app__phone img {
    max-width: 240px;
    max-height: 360px;
  }

  .app__features {
    order: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
    width: 100%;
    margin-top: -1rem;
    padding: 0;
  }

  .app-feature {
    gap: .625rem;
    padding: .625rem;
    border-radius: 12px;
    background-color: #f6f7f9;
  }

  .app-feature__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: var(--white);
  }

  .app-feature__title {
    font-size: .78125rem;
    line-height: 1.2;
  }

  .app-feature__sub {
    font-size: .65625rem;
    line-height: 1.25;
  }
}


/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonials {
  position: relative;
  overflow: hidden;
  padding-block: 80px;
}

.testimonials__container {
  padding-inline: 2.0625rem;
}

.testimonials__body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  max-width: 48.75rem;
  margin: 3rem auto 0;
}

.testimonials__mark {
  margin-top: -.75rem;
  font: 700 88px/1 Georgia, "Times New Roman", serif;
  color: var(--ink);
}

.testimonials__main {
  min-width: 0;
}

.testimonials__quotes {
  display: grid;
  touch-action: pan-y;
}

.testimonial {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: .35s var(--ease);
  transition-property: opacity, translate, visibility;
}

.testimonial.is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.testimonial__text {
  font-size: max(16px, 1.25rem);
  line-height: 1.7;
  color: #2f3033;
}

/* Faces. The selected one moves to the front and opens into a black pill with the name. */
.testimonials__people {
  display: flex;
  align-items: center;
  margin-top: 2.25rem;
}

.testimonial-tab {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: .875rem;
  margin-left: -.875rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}

.testimonial-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.testimonial-tab__photo {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  object-fit: cover;
  background-color: #eceef1;
  box-shadow: 0 0 0 3px var(--white);
  transition: translate .2s var(--ease);
}

.testimonial-tab__info {
  display: none;
  flex-direction: column;
  min-width: 0;
  padding-block: 2px;
}

.testimonial-tab__name {
  font-size: max(15px, 1.0625rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
  overflow-wrap: break-word;
}

.testimonial-tab__role {
  font-size: max(12px, .84375rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, .6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (hover: hover) {
  .testimonial-tab:hover .testimonial-tab__photo {
    translate: 0 -3px;
  }
}

@media (max-width: 991.98px) {
  .testimonials {
    padding-top: 52px;
    padding-bottom: 56px;
  }

  .testimonials__container {
    padding-inline: 0;
  }

  .testimonials__body {
    max-width: 620px;
    margin-top: 2.25rem;
  }

  .testimonials__mark {
    margin-top: -.5rem;
    font-size: 68px;
  }

  .testimonial__text {
    font-size: 17px;
    line-height: 1.65;
  }

  .testimonials__people {
    margin-top: 1.75rem;
  }

  .testimonial-tab__photo {
    width: 46px;
    height: 46px;
  }

  .testimonial-tab__name {
    font-size: 16px;
  }

  .testimonial-tab__role {
    font-size: 12.5px;
  }
}

@media (max-width: 575.98px) {
  .testimonials__body {
    column-gap: .75rem;
    margin-top: 1.75rem;
  }

  .testimonials__mark {
    margin-top: -6px;
    font-size: 56px;
  }

  .testimonial__text {
    font-size: 15.5px;
  }

  .testimonials__people {
    margin-top: 1.5rem;
  }

  .testimonial-tab {
    gap: .625rem;
    margin-left: -10px;
  }

  .testimonial-tab__photo {
    width: 38px;
    height: 38px;
    box-shadow: 0 0 0 2.5px var(--white);
  }

  .testimonial-tab__name {
    font-size: 14.5px;
  }

  .testimonial-tab__role {
    font-size: 11.5px;
  }
}

/* Below 400px the row starts under the quote mark to give the pill more room */
@media (max-width: 399.98px) {
  .testimonials__people {
    margin-left: -2.25rem;
  }
}

@media (max-width: 360.98px) {
  .testimonial__text {
    font-size: 15px;
  }
}

/* Selected face (after the breakpoints so it wins at every width) */
.testimonial-tab.is-active {
  order: -9999;
  flex-shrink: 1;
  min-width: 0;
  margin-left: 0;
  margin-right: 1.5rem;
  padding: .375rem 1.5rem .375rem .375rem;
  background-color: #000;
  cursor: default;
}

.testimonial-tab.is-active .testimonial-tab__photo,
.testimonial-tab.is-active:hover .testimonial-tab__photo {
  box-shadow: none;
  translate: 0 0;
}

.testimonial-tab.is-active .testimonial-tab__info {
  display: flex;
}

@media (max-width: 575.98px) {
  .testimonial-tab.is-active {
    margin-right: 18px;
    padding: 4px 1rem 4px 4px;
  }
}


/* =====================================================================
   CTA + QUOTE FORM
   ===================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(90deg, #fdf4d9 0%, #fdf6e4 45%, #fbf4e6 100%);
  padding-block: 80px;
}

.form-cta-title {
  font-size: 40px !important;
}

.cta__image {
  position: absolute;
  top: 0;
  right: 0;
  width: 13.375rem;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%);
}

.cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* Copy on the left edge, form on the right edge of the page column */
  grid-template-columns: minmax(0, 36.1875rem) minmax(0, 32.125rem);
  justify-content: space-between;
  column-gap: 2.5625rem;
  align-items: center;
  width: var(--page-w);
  min-height: 15.5rem;
  margin-inline: auto;
  padding: 1.375rem 0 1.125rem;
}

.cta__copy {
  align-self: start;
  padding-top: .75rem;
}

/* Desktop size is the body size (16px), as on the original page */
.cta__title {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
}

.cta__text {
  margin-top: .625rem;
  font-size: 1rem;
  line-height: 1.4375rem;
  color: #45484e;
}

.cta__points {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: 2.125rem;
  margin-top: 1.375rem;
}

.cta-point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  font-size: .90625rem;
  color: #2f3033;
}

.cta-point svg {
  width: 2rem;
  height: 2rem;
  transition: .2s var(--ease);
  transition-property: translate, rotate;
}

@media (hover: hover) {
  .cta-point:hover svg {
    translate: 0 -2px;
    rotate: -6deg;
  }
}

/* ----- Quote form ----- */
.quote-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: .5rem;
  column-gap: .625rem;
  border-radius: .75rem;
  background-color: var(--white);
  box-shadow: 0 18px 40px -24px rgba(15, 20, 30, .3), 0 0 0 1px rgba(15, 20, 30, .04);
  padding: 30px;
}

.quote-form__title {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.quote-form__row {
  grid-column: 1 / -1;
}

/* Inputs, selects and the textarea. Touch screens get 16px text so iOS doesn't zoom in. */
.field {
  display: block;
  width: 100%;
  height: 2.25rem;
  padding-inline: .75rem;
  border: 1px solid #d6d9de;
  border-radius: .375rem;
  background-color: var(--white);
  font-size: .84375rem;
  color: var(--ink);
  transition: .2s var(--ease);
  transition-property: border-color, box-shadow;
}

.field::placeholder {
  color: #5f636a;
}

.field:focus {
  outline-style: none;
  border-color: #e0b400;
  box-shadow: 0 0 0 3px rgba(255, 210, 26, .3);
}

/* Red outline only after a submit attempt (site.js adds .was-validated to the form) */
.was-validated .field:invalid {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}

/* Custom select with a chevron; grey until a real option is chosen
   (the empty placeholder option makes a required select :invalid) */
.field--select {
  appearance: none;
  padding-right: 2.125rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%235f636a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .75rem;
}

.field--select:not(:valid) {
  color: #5f636a;
}

.field--textarea {
  height: 3.25rem;
  padding-top: .5625rem;
  resize: vertical;
}

.quote-form__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
  margin-top: .25rem;
}

.quote-form__submit {
  width: 100%;
  font-size: .96875rem;
  cursor: pointer;
}

.quote-form__status {
  font-size: .84375rem;
  color: #d93025;
}

.quote-form__status:empty {
  display: none;
}

.quote-form__status[data-state="success"] {
  color: #188038;
}

@media (max-width: 991.98px) {
  .cta {
    padding-block: 56px;
  }

  .cta__image {
    display: none;
  }

  .cta__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 28px;
    width: auto;
    min-height: 0;
    margin-inline: 1.25rem;
    padding: 0;
  }

  .cta__copy {
    padding-top: 0;
  }

  .cta__title {
    font-size: clamp(26px, 4.6vw, 34px);
  }

  .cta__text {
    line-height: 1.55;
  }

  .cta__points {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    row-gap: 16px;
    column-gap: 30px;
    margin-top: 24px;
  }

  .quote-form {
    gap: 12px;
    padding: 22px;
    border-radius: 16px;
  }

  .quote-form__title {
    font-size: 22px;
  }

  .field {
    height: 46px;
    font-size: 15px;
    border-radius: 8px;
  }

  .field--textarea {
    height: 96px;
    padding-top: 12px;
  }

  .quote-form__submit {
    width: auto;
    height: 3rem;
    padding-inline: 1.75rem;
  }

  .quote-form__status {
    font-size: 14px;
  }
}

@media (pointer: coarse) {
  .field {
    font-size: 16px;
  }
}

@media (max-width: 575.98px) {
  .cta {
    padding-block: 44px;
  }

  .cta__grid {
    margin-inline: .875rem;
  }

  /* One full-width row per point */
  .cta__points {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: .625rem;
  }

  .cta-point {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .625rem .875rem;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 1px #f0e2b8;
    font-size: 15px;
  }

  .quote-form {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    padding: 18px;
  }

  .quote-form__title {
    font-size: 20px;
  }

  .quote-form__actions {
    align-items: stretch;
  }

  .quote-form__submit {
    width: 100%;
  }
}

@media (max-width: 360.98px) {
  .quote-form__submit {
    padding-inline: 18px;
  }
}


/* =====================================================================
   DIWALI OFFER
   Floating "Grab Diwali Offer" button (bottom centre, site.js adds .is-visible once
   the page is scrolled) and the offer popup: photo on the left, form on the right.
   ===================================================================== */
.offer-fab {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 3rem;
  padding-inline: 1.25rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  background-color: var(--ink);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(11, 11, 15, .55);
  opacity: 0;
  visibility: hidden;
  translate: -50% 16px;
  transition: .35s var(--ease);
  transition-property: opacity, translate, visibility, background-color;
  animation: offerGlow 2.4s ease-in-out infinite;
}

.offer-fab.is-visible {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

.offer-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.offer-fab__icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--accent);
}

/* Soft yellow pulse so the button draws the eye without moving */
@keyframes offerGlow {
  0%, 100% { box-shadow: 0 12px 28px -10px rgba(11, 11, 15, .55), 0 0 0 0 rgba(255, 210, 26, .55); }
  50% { box-shadow: 0 12px 28px -10px rgba(11, 11, 15, .55), 0 0 0 8px rgba(255, 210, 26, 0); }
}

/* The dialog is a full-screen transparent layer that centres the card. Keeping it full screen
   (and untransformed) lets the fireworks canvas sit inside it, above the backdrop and behind
   the card. A click on the layer outside the card closes the popup (site.js). */
.offer-dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  border: 0;
  background-color: transparent;
  color: var(--text);
}

.offer-dialog[open] {
  display: grid;
  place-items: center;
}

/* Inline styles put the canvas at z-index 999; inside the popup it must stay under the card */
.offer-dialog .festive-canvas {
  z-index: 0 !important;
}

/* Popup card */
.offer-dialog__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  width: min(54rem, 100%);
  max-height: calc(100dvh - 2rem);
  border-radius: 1.25rem;
  background-color: var(--white);
  overflow: auto;
  box-shadow: 0 40px 80px -30px rgba(11, 11, 15, .5);
  animation: offerIn .35s var(--ease);
}

.offer-dialog::backdrop {
  background-color: rgba(11, 11, 15, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@keyframes offerIn {
  from { opacity: 0; translate: 0 16px; scale: .98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Keep the page from scrolling behind the open popup */
html:has(.offer-dialog[open]) {
  overflow: hidden;
}

.offer-dialog__close {
  position: absolute;
  top: .875rem;
  right: .875rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: #f1f2f4;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}

.offer-dialog__close svg {
  width: 40%;
  height: 40%;
}

.offer-dialog__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Photo inset inside the white card, as in the reference */
.offer-dialog__media {
  position: relative;
  padding: .625rem 0 .625rem .625rem;
}

.offer-dialog__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  border-radius: .875rem;
  object-fit: cover;
}

.offer-dialog__badge {
  position: absolute;
  top: 1.375rem;
  left: 1.375rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: 9999px;
  background-color: var(--accent);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
}

.offer-dialog__body {
  padding: 2.5rem 2.25rem 2rem;
}

.offer-dialog__title {
  padding-right: 2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}

.offer-dialog__lead {
  margin-top: .625rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: #45484e;
}

/* The shared quote form, without its own card styling, inside the popup */
.quote-form--plain {
  margin-top: 1.25rem;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.quote-form--plain .field {
  height: 2.75rem;
  border-radius: .5rem;
  font-size: .875rem;
}

.quote-form--plain .field--textarea {
  height: 4.25rem;
  padding-top: .625rem;
}

.quote-form--plain .quote-form__submit {
  width: 100%;
  height: 3rem;
}

/* The two selects share a row */
.quote-form__row--half {
  grid-column: auto;
}

.offer-dialog__note {
  margin-top: .875rem;
  font-size: .75rem;
  line-height: 1.45;
  color: #7a7e85;
}

@media (hover: hover) {
  .offer-fab:hover {
    background-color: #23242a;
    translate: -50% -2px;
  }

  .offer-dialog__close:hover {
    background-color: #e4e6e9;
  }
}

/* Touch screens: 16px text so iOS doesn't zoom into the fields */
@media (pointer: coarse) {
  .quote-form--plain .field {
    font-size: 16px;
  }
}

/* Stacked: a short photo banner on top, the form below */
@media (max-width: 767.98px) {
  .offer-dialog {
    padding: .75rem;
  }

  .offer-dialog__card {
    grid-template-columns: minmax(0, 1fr);
    max-height: calc(100dvh - 1.5rem);
  }

  .offer-dialog__media {
    padding: .5rem .5rem 0;
  }

  .offer-dialog__media img {
    height: 9rem;
    min-height: 0;
    object-position: center 60%;
  }

  .offer-dialog__badge {
    top: 1.125rem;
    left: 1.125rem;
  }

  .offer-dialog__close {
    background-color: rgba(255, 255, 255, .9);
  }

  .offer-dialog__body {
    padding: 1.25rem 1.25rem 1.25rem;
  }

  .offer-dialog__title {
    padding-right: 0;
    font-size: 1.5rem;
  }

  .quote-form--plain .field--textarea {
    height: 5rem;
  }
}

@media (max-width: 575.98px) {
  .offer-fab {
    bottom: 16px;
    height: 2.75rem;
    padding-inline: 1rem 1.25rem;
    font-size: .875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-fab,
  .offer-dialog__card {
    animation: none;
    transition: none;
  }
}


/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background-color: #000;
  color: var(--white);
  padding-top: 2rem;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Desktop: brand column | 4 link columns. Below 992px the brand column stacks above the links. */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
  align-items: start;
  column-gap: 3rem;
  padding-block: 1.25rem 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.25rem;
}

.site-footer__logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-footer__logo img {
  display: block;
  width: 9.375rem;
  height: auto;
}

.site-footer__about {
  max-width: 28rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .6);
}

.site-footer__contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  margin-top: .5rem;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2rem;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.site-footer__sublinks {
  display: flex;
  flex-direction: column;
  row-gap: .375rem;
  margin-top: .625rem;
}

/* Footer links */
.footer-link {
  position: relative;
  color: var(--white);
  transition: .2s var(--ease);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
}

.footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.footer-link--main {
  font-size: .875rem;
}

/* Yellow underline that grows from the left on hover */
.footer-link--main::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--accent);
  scale: 0 1;
  transform-origin: left;
  transition: .2s var(--ease);
  transition-property: transform, translate, scale, rotate;
}

.footer-link--sub,
.footer-link--legal {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .7);
}

.site-footer__social {
  display: flex;
  gap: .625rem;
}

.social-link {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, .1);
  color: var(--white);
  transition: .2s var(--ease);
  transition-property: background-color, color, translate;
}

.social-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.social-link svg {
  width: 82%;
  height: 82%;
  fill: currentColor;
}

/* Offices */
.site-footer__offices {
  padding-block: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.site-footer__heading {
  margin-bottom: 1.5rem;
  font-size: .78125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.site-footer__office-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 2rem;
  row-gap: 1.5rem;
  padding-bottom: 2rem;
}

.office {
  display: flex;
  flex-direction: column;
}

.office__name {
  margin-bottom: .25rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--white);
}

.office__address {
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .6);
}

.office__contact {
  display: inline-flex;
  align-items: center;
  column-gap: .625rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .6);
}

/* Round icon chip in front of phone / email */
.office__contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, .1);
  color: var(--accent);
}

.office__contact svg {
  width: 13px;
  height: 13px;
}

.office__directions {
  display: inline-flex;
  align-items: center;
  column-gap: .25rem;
  margin-top: 0px;
  font-size: .8125rem;
}

/* Arrow tilted up-right since the link opens Google Maps */
.office__directions svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  fill: currentColor;
  rotate: -45deg;
}

/* Location links */
/* Left-aligned with a divider before every item; the list is pulled left and clipped
   so the divider at the start of each wrapped line is hidden. */
.site-footer__locations {
  overflow: hidden;
  padding-block: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.site-footer__location-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 5px;
  margin-left: calc(-.875rem - 1px);
}

.site-footer__location-list li {
  padding-inline: 12px;
  border-left: 1px solid rgba(255, 255, 255, .2);
}

/* Copyright + legal links, centred */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: .5rem;
  min-height: 3.25rem;
  padding-block: 1.25rem;
  text-align: center;
}

.site-footer__copy {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
}

.site-footer__legal {
  display: flex;
  align-items: center;
}

.site-footer__legal li+li {
  margin-left: .75rem;
  padding-left: .75rem;
  border-left: 1px solid rgba(255, 255, 255, .2);
}

@media (hover: hover) {
  .footer-link:hover {
    color: var(--accent);
  }

  .footer-link--main:hover::after {
    scale: 1 1;
  }

  .social-link:hover {
    background-color: var(--accent);
    color: #000;
    translate: 0 -2px;
  }
}

@media (max-width: 991.98px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.25rem;
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }

  .site-footer__logo img {
    width: 140px;
  }

  .site-footer__about {
    max-width: 36rem;
  }

  .footer-link {
    font-size: .9375rem;
  }

  .social-link {
    width: 2.375rem;
    height: 2.375rem;
  }

  .social-link svg {
    width: 55%;
    height: 55%;
  }

  .site-footer__office-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__bottom {
    padding-top: 1rem;
    padding-bottom: 1.375rem;
  }

  .site-footer__copy {
    font-size: .84375rem;
  }
}

@media (max-width: 767.98px) {
  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .site-footer__office-grid {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Bigger touch targets */
@media (pointer: coarse) {
  .site-footer__location-list {
    row-gap: 0;
  }

  .footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .social-link {
    min-width: 44px;
    min-height: 44px;
  }
}


/* =====================================================================
   Animations
   ===================================================================== */
@keyframes heroFloat {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -.375rem;
  }
}

@keyframes badgeFloat {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -.3125rem;
  }
}

@keyframes processIn {
  from {
    opacity: 0;
    translate: 0 8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes megaSlide {
  from {
    opacity: 0;
    translate: 0 -6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Hide Google reCAPTCHA v3 badge (compliant with Google terms by displaying text notice) */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}