/* ==========================================================================
   Reset / box-sizing
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

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

/* ==========================================================================
   Scroll-reveal engine
   Hand-built vanilla replacement for the "element scrolls into view" half
   of Webflow's IX2 interactions runtime. js/main.js's initReveals() adds
   .is-visible to any .reveal element the first time it crosses into the
   viewport (IntersectionObserver, threshold 0.15, -10% bottom rootMargin);
   this stylesheet does the actual fade/slide transition. If JavaScript is
   unavailable at all, index.html's <noscript> block overrides .reveal back
   to fully visible so content never gets stuck hidden; if JS runs but
   IntersectionObserver doesn't exist, initReveals() reveals everything
   immediately instead.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(1.5em);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal.is-visible.reveal-slow {
  transition-duration: 0.8s;
}

/* Small manual stagger for groups of elements that enter the viewport at
   effectively the same scroll position (e.g. a row of phones or a cluster
   of illustrations) so they don't all snap in as one flat block. */
.reveal.reveal-stagger-1 {
  transition-delay: 0.08s;
}

.reveal.reveal-stagger-2 {
  transition-delay: 0.16s;
}

.reveal.reveal-stagger-3 {
  transition-delay: 0.24s;
}

.reveal.reveal-stagger-4 {
  transition-delay: 0.32s;
}

.reveal.reveal-stagger-5 {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

img {
  display: block;
  max-width: 100%;
  border: 0;
}

a {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background-color: var(--color--white-primary);
  color: var(--color--black);
  font-family: var(--font-cond);
  /* Fluid root em: the live site scales its base font-size with the
     viewport (embedded <style> on parkhappy.com, not present in
     reference/site.css) so 1em-based spacing throughout the design
     matches at any width instead of only at one fixed viewport. */
  font-size: 1.11111vw;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: 0.02em;
}

@media screen and (min-width: 1920px) {
  body {
    font-size: 0.7vw;
  }
}

@media screen and (max-width: 991px) {
  body {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Site header
   Values pulled from reference/site.css: .navbar-el (fixed top bar,
   padding-top .44em / padding-bottom .31em), .container.is-nav (padding
   1.25em L/R), .navbar-wrapper (flex, space-between), .navbar-logo-wr
   (width 6.875em, padding-left .06em), .nav-button-wrapper (gap .75rem).
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 0.44em 1.25em 0.31em;
}

.site-logo {
  display: block;
  flex-shrink: 0;
  width: 6.875em;
  padding-left: 0.06em;
}

.site-logo img {
  width: 100%;
  height: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4975em;
}

/* ==========================================================================
   .button-primary — reusable pill button component
   Values pulled from reference/site.css:
   .button-primary { min-width: 10rem; text-transform: uppercase; }
   .button-wr { border: 2px solid var(--color--black);
                border-radius: var(--0-625rem) [= .625rem];
                padding: 1.0625em 1.25em 1em; }
   .button-wr.is-nav { padding-top: .85em; padding-bottom: .8em; }
   .button-bg-white { background-color: var(--color--white-primary); } (default fill)
   .button-bg-black { background-color: var(--color--black); }         (is-black fill)
   .button-bg        { background-color: var(--color--yellow); }       (hover fill)
   .button-wr.is-nav.is-black { color: var(--color--white-primary); }
   .button-wr.is-nav.is-black:hover { color: var(--color--black); }

   Hover fill mechanics verified against the live site's Webflow IX2 config
   (window.Webflow.require('ix2').store.getState().ixData.actionLists):
   mouseover animates .button-bg height 0 -> 100% over 300ms ease; mouseout
   animates it back to 0 over 300ms ease-in. Reproduced here with a real
   .button-bg child element (see index.html) instead of shipping webflow.js:
   the anchor clips (overflow: hidden) an absolutely-positioned yellow
   .button-bg that grows up from the bottom, while .button-label stays on
   its own stacking layer above it so the text is always readable.
   ========================================================================== */

.button-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  padding: 0.85em 1.25em 0.8em;
  overflow: hidden;
  border: 2px solid var(--color--black);
  border-radius: 0.625rem;
  background-color: var(--color--white-primary);
  color: var(--color--black);
  font-family: var(--font-semib);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s ease-in;
}

.button-label {
  position: relative;
  z-index: 2;
}

.button-bg {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 0;
  background-color: var(--color--yellow);
  transition: height 0.3s ease-in;
}

.button-primary:hover {
  color: var(--color--black);
  transition: color 0.3s ease;
}

.button-primary:hover .button-bg {
  height: 100%;
  transition: height 0.3s ease;
}

.button-primary.is-black {
  background-color: var(--color--black);
  color: var(--color--white-primary);
}

/* Same specificity as .button-primary.is-black above, so this must stay
   below it in source order to win back the black hover text color. */
.button-primary.is-black:hover {
  color: var(--color--black);
}

@media screen and (max-width: 991px) {
  .button-primary {
    min-width: auto;
  }
}

@media screen and (max-width: 767px) {
  .site-header {
    padding-top: 0.2rem;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 479px) {
  .site-header {
    align-items: flex-start;
  }

  .header-actions {
    gap: 0.25rem;
  }

  .button-primary {
    padding: 0.5em 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   Hero section
   Values pulled from reference/site.css: .hero-content-wrapper (flex column,
   centered, min-height calc(100svh - 3rem), padding-top/bottom 1em, plus
   .container's 1.25em L/R padding), .hero-content__img-wr (character +
   wordmark art, width 60vw / max-width 45em, margin-top auto so it sits
   toward the bottom half of the viewport), .hero-img-h-wr (small "PARK
   HAPPY LLC" wordmark svg, width 20vw / max-width 25em, margin-top -1em so
   it overlaps the bottom of the art above), .button-icon / .text-size-1em /
   .icon-1em (scroll cue link, label, and chevron).
   ========================================================================== */

#hero {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100svh - 3rem);
  padding: 1em 1.25em;
  background-color: var(--color--white-primary);
  position: relative;
}

.hero-character {
  width: 60vw;
  max-width: 45em;
  margin-top: auto;
  margin-bottom: 0;
}

.hero-wordmark {
  width: 20vw;
  max-width: 25em;
  margin-top: -1em;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: auto;
  padding: 1.25em;
  font-size: 1em;
  transition: opacity 0.2s ease;
}

.scroll-cue:hover {
  text-decoration: underline;
}

/* Hero "Scroll for more" chevron.
   Verified against the live site's inline stylesheet: a 3-layer chevron
   stack (.a1/.a2/.a3 there) using `animation: arrow 2s infinite` with
   negative animation-delays of -1s/-0.5s/0s so the three copies are
   permanently out of phase, producing a chevron that pulses in a
   continuous cascade down the stack. Reproduced verbatim below (renamed
   .is-1/.is-2/.is-3) instead of shipping webflow.js. */
.scroll-chevron-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  margin-top: -0.1em;
}

.scroll-chevron {
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.3em;
  border-right: 0.14em solid currentColor;
  border-bottom: 0.14em solid currentColor;
  transform: rotate(45deg);
  animation: chevron-pulse 2s infinite;
}

.scroll-chevron.is-1 {
  animation-delay: -1s;
}

.scroll-chevron.is-2 {
  animation-delay: -0.5s;
}

.scroll-chevron.is-3 {
  animation-delay: 0s;
}

@keyframes chevron-pulse {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-chevron {
    animation: none;
    opacity: 1;
  }
}

@media screen and (min-width: 1920px) {
  .hero-character {
    max-width: 55em;
  }

  .hero-wordmark {
    width: 30vw;
    max-width: 28em;
  }
}

@media screen and (max-width: 991px) {
  #hero {
    padding-top: 10dvh;
  }

  .hero-character {
    width: 50rem;
    max-width: 90vw;
  }

  .hero-wordmark {
    width: 25rem;
    max-width: 40vw;
  }
}

@media screen and (max-width: 767px) {
  #hero {
    padding-top: 2dvh;
    padding-bottom: 0;
  }

  .hero-character {
    max-width: 92vw;
    margin-bottom: 1rem;
  }

  .hero-wordmark {
    width: 23rem;
    max-width: 50vw;
  }
}

@media screen and (max-width: 479px) {
  #hero {
    min-height: calc(100svh - 1rem);
    padding-bottom: 0;
  }

  .hero-character {
    max-width: 100%;
  }

  .hero-wordmark {
    width: 14rem;
    max-width: 70vw;
  }
}

/* ==========================================================================
   Shared body-content typography
   Values pulled from reference/site.css: .text-size-2_75em (headings:
   font-size 3.75em, weight 600, line-height 115%, letter-spacing -.0275em,
   max-width 16em), .text-size-1-875em (lead paragraphs: font-size 1.875em,
   weight 600, line-height 115%), .text-size-3_75rem_bold_span (bold inline
   highlight: font-family Proxima Nova Cond Webfont / --font-cond-bold,
   weight 700). Verified live in Chrome (scrolled the "parking excellence"
   phrase in and out of view repeatedly, zoomed in): the yellow underline
   SVG is fully drawn the instant it's in the DOM — there is no separate
   draw-in animation, and it isn't one of the live site's Webflow IX2
   interactions (confirmed via window.Webflow.require('ix2') — no action
   list targets it). It simply appears together with its paragraph, so
   .highlight-span needs no animation of its own; it fades in as part of
   the parent lead-text's .reveal below.
   ========================================================================== */

.section-heading {
  max-width: 16em;
  margin: 0;
  font-size: 3.75em;
  font-weight: 600;
  line-height: 115%;
  letter-spacing: -0.0275em;
}

.section-heading.is-centered {
  max-width: none;
  margin: 0 auto 2.5em;
  text-align: center;
}

.lead-text {
  margin: 0;
  font-size: 1.875em;
  font-weight: 600;
  line-height: 115%;
  letter-spacing: 0;
}

.highlight-span {
  display: inline-block;
  font-family: var(--font-cond-bold);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color--yellow);
  text-decoration-thickness: 0.28em;
  text-underline-offset: -0.05em;
  text-decoration-skip-ink: none;
}

@media screen and (max-width: 991px) {
  .section-heading {
    font-size: 2.75rem;
  }

  .lead-text {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 479px) {
  .section-heading {
    font-size: 2rem;
  }

  .lead-text {
    font-size: 1.375rem;
  }
}

/* ==========================================================================
   Parking excellence (#about)
   Values pulled from reference/site.css: .about-content__section
   (padding-top/bottom 7.94em), .about-content__section-title-wr (max-width
   42em, text-align left). The reference layers five responsive background
   illustrations absolutely behind the text; reproduced here with a single
   full-bleed illustration image (images/66c874d79348f129f4843a66_...) with
   the text overlaid, centered over its empty upper-left region.
   ========================================================================== */

.section-about {
  position: relative;
  padding: 7.94em 1.25em;
  overflow: hidden;
}

.about-illustration {
  display: block;
  width: 100%;
  height: auto;
}

.about-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25em;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  max-width: 42em;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .section-about {
    padding: 3rem 1.25rem;
  }

  .about-content {
    position: static;
    padding: 2rem 0 0;
  }
}

/* ==========================================================================
   Next-level parking technology (#why) + key-service-areas marquee
   Values pulled from reference/site.css: .next-level-content (padding-top
   10.25em, padding-bottom 2em), .about-content__section-title-wr.is--next-level
   (max-width 42em, gap 4.12em), .next-level-content__p-wr (column gap 2.5em),
   .marquete-container-outer (padding-top/bottom 5em), .marquee-wrapper.is--rupor
   (rotated ticker). Verified against the live site's inline stylesheet:
   `.marquee-container { animation: marquee-container 90s linear infinite; }`
   with `@keyframes marquee-container { from { translateX(0%) } to
   { translateX(-50%) } }` — a slow, continuous, linear drift (not a
   Webflow IX2 interaction, so no licensing concern reproducing it
   verbatim). Track content is duplicated in the markup so the -50% point
   lines up seamlessly with the start.
   ========================================================================== */

.section-next-level {
  position: relative;
  background-color: var(--color--white-bright);
  padding: 10.25em 1.25em 2em;
}

.next-level-content {
  display: flex;
  flex-direction: column;
  gap: 4.12em;
  max-width: 42em;
  margin: 0 auto;
}

.next-level-text {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  text-align: left;
}

.next-level-content .button-primary {
  align-self: center;
}

.marquee-outer {
  position: relative;
  margin-top: 5em;
  padding: 5em 0;
  overflow: hidden;
  transform: rotate(-5deg);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.5em;
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll 90s linear infinite;
}

.marquee-item {
  font-size: 1.875em;
  font-weight: 600;
  line-height: 115%;
}

.marquee-item.is-blue {
  color: #1d7dad;
}

.marquee-loudspeaker {
  position: absolute;
  top: -1em;
  right: 3em;
  width: 12em;
  transform: rotate(10deg);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation-play-state: paused;
  }
}

@media screen and (max-width: 991px) {
  .section-next-level {
    padding-top: 4rem;
  }

  .marquee-loudspeaker {
    width: 8em;
  }
}

@media screen and (max-width: 479px) {
  .section-next-level {
    padding-top: 2rem;
  }

  .marquee-outer {
    padding: 2.5em 0;
  }

  .marquee-item {
    font-size: 1.25rem;
  }

  .marquee-loudspeaker {
    width: 6em;
  }
}

/* ==========================================================================
   Mobile payments made simple (#mobile-payments)
   Values pulled from reference/site.css: .mobile-content__mp-phones-row
   (row, centered), .mobile-content__arrow-wr (width/height 2.5em),
   .mobile-content__p-wr (max-width 35em). Confirmed via the live site's
   Webflow IX2 store (window.Webflow.require('ix2').store.getState().ixData
   .events): this section's data-w-id'd elements (the section itself plus
   its 3 caption divs) are driven by a SCROLLING_IN_VIEW event with a
   *continuous* parameter group (smoothing, startsEntering/startsExiting
   offsets) rather than a discrete keyframe trigger — i.e. it's a genuine
   scroll-jacked pin: the section sticks while the phone/caption cycle is
   scrubbed directly by scroll position. Faithfully reproducing that scroll
   -linked pin/scrub needs a purpose-built scroll-timeline engine, which is
   disproportionate to this static rebuild (and would fight the desktop
   layout already chosen in Task 7a: a static 3-phone row, not a 1-phone
   slider). Reproduced instead as a tasteful equivalent: the row and
   captions are static and always all visible (unchanged from Task 7a),
   and both now use the general .reveal fade/slide-up with a small
   .reveal-stagger-N cascade so the three phones/captions animate in one
   after another as the section scrolls into view, echoing the live
   section's sequential feel without literally scroll-scrubbing content.
   ========================================================================== */

.section-mobile-payments {
  padding: 6rem 1.25em;
  text-align: center;
}

.mobile-phones-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5em;
  margin-bottom: 3em;
}

.mobile-phone {
  width: 16em;
  max-width: 80vw;
}

.mobile-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.mobile-phone-arrow {
  flex-shrink: 0;
  width: 2.5em;
  height: 2.5em;
}

.mobile-payments-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 35em;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .section-mobile-payments {
    padding: 3rem 1.25rem;
  }

  .mobile-phone {
    width: 11em;
  }

  .mobile-phone-arrow {
    width: 1.5em;
    height: 1.5em;
  }
}

@media screen and (max-width: 479px) {
  .mobile-phone {
    width: 8em;
  }

  .mobile-phone-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Shared body-content typography — size variants used by sections 5-7
   Values pulled from reference/site.css: .text-size-1_625em (font-size
   1.625em, weight 600, line-height 120%) used in Property Management;
   .text-size-2em (font-size 2em, weight 600, line-height 115%, letter-
   spacing -.02em) used in Retail Parking Experts and Customer Service.
   ========================================================================== */

.lead-text.is-story {
  font-size: 1.625em;
  line-height: 120%;
}

.lead-text.is-wide {
  font-size: 2em;
  line-height: 115%;
  letter-spacing: -0.02em;
}

@media screen and (max-width: 479px) {
  .lead-text.is-story {
    font-size: 1.375rem;
  }

  .lead-text.is-wide {
    font-size: 1.625rem;
  }
}

/* ==========================================================================
   Property management (#property-management) — "angel of parking"
   Values pulled from reference/site.css: .story-content (padding-top 6em,
   padding-bottom 8.9375em), .about-content__section-title-wr.is--story
   (max-width 42em, gap 5em), .story-content__p-wr (gap 1.25em, margin-top
   -2em), .story-content__ill-angel (height 23em, absolute bottom-right).
   The button is a sibling of the text column rather than nested inside it,
   so it centers independently of the left-aligned text (matches reference's
   "is-centered" modifier on an otherwise left-aligned block).
   ========================================================================== */

.section-property {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color--blue);
  padding: 6em 1.25em 8.9375em;
}

.property-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5em;
  max-width: 42em;
  margin: 0 auto;
}

.property-headline,
.property-copy {
  width: 100%;
  text-align: left;
}

.property-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  margin-top: -2em;
}

.property-angel {
  position: absolute;
  z-index: -1;
  right: 2%;
  bottom: 3em;
  height: 23em;
  width: auto;
}

@media screen and (max-width: 767px) {
  .section-property {
    padding: 3rem 1.25rem;
  }

  .property-content {
    gap: 2.5rem;
  }

  .property-angel {
    position: static;
    width: 80vw;
    max-width: 20rem;
    height: auto;
    margin: 2rem auto 0;
  }
}

/* ==========================================================================
   Retail parking experts (#retail-parking)
   Values pulled from reference/site.css: .protect-content (padding-top
   9.5em), .protect-content__par-wr (gap 3.125em, max-width 42em),
   .protect-content__bot-ill-wr (padding-left/right 20em — a large but not
   full-bleed image), .protect-content__cloud-ill-wr-1/-2 (small absolute
   decorative clouds). The clouds are hidden below 767px since their
   per-breakpoint reference positions are heavily bespoke and purely
   decorative; the Storefronts photo remains at every width.
   ========================================================================== */

.section-retail {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 9.5em 0 0;
}

.retail-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125em;
  max-width: 42em;
  margin: 0 auto;
  padding: 0 1.25em;
}

.retail-content > .section-heading {
  width: 100%;
  text-align: left;
}

.retail-copy {
  display: flex;
  flex-direction: column;
  gap: 3.125em;
  width: 100%;
  text-align: left;
}

.retail-cloud {
  position: absolute;
  z-index: -1;
}

.retail-cloud.is-1 {
  width: 10em;
  top: 16.319vh;
  left: 2.153vw;
}

.retail-cloud.is-2 {
  width: 13.5625em;
  top: 15vw;
  right: 10vw;
}

.retail-storefronts-wrap {
  width: 100%;
  margin-top: 1.25em;
  padding: 0 20em;
}

.retail-storefronts {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 991px) {
  .retail-storefronts-wrap {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .section-retail {
    padding-top: 3rem;
  }

  .retail-clouds {
    display: none;
  }
}

/* ==========================================================================
   Top-shelf customer service (#we-offer)
   Values pulled from reference/site.css: .service-content (padding-top
   9.75em, padding-bottom 8.9375em), .service-content__par-wr (gap 3.125em,
   max-width 42em), .service-content__ill-wr--1..-5 (five absolute
   decorative illustrations scattered around the text). The illustration
   set is hidden below 767px for the same reason as the retail clouds above
   — the reference repositions each of the five independently per
   breakpoint, which is out of scope for a purely decorative flourish.
   ========================================================================== */

.section-service {
  position: relative;
  overflow: hidden;
  background-color: var(--color--blue);
  padding: 9.75em 1.25em 8.9375em;
}

/* Full-width positioning ancestor: the illustrations' vw-based offsets are
   measured from this box's edges (matching reference/site.css, where
   .service-content spans the full container width, not just the text
   column), so they land near the section's edges instead of on top of the
   centered text column. */
.service-content {
  position: relative;
  z-index: 0;
}

.service-text-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125em;
  max-width: 42em;
  margin: 0 auto;
}

.service-text {
  display: flex;
  flex-direction: column;
  gap: 3.125em;
  width: 100%;
  text-align: left;
}

.service-illustration {
  position: absolute;
  z-index: -1;
}

.service-illustration.is-1 {
  width: 16.8125em;
  top: 6.8125em;
  left: 2.431vw;
}

.service-illustration.is-2 {
  width: 20.5625em;
  right: 5.556vw;
  bottom: 5.1875em;
}

.service-illustration.is-3 {
  width: 20em;
  top: 6.125em;
  right: 5vw;
}

.service-illustration.is-4 {
  width: 18em;
  bottom: 7em;
  left: 2vw;
}

.service-illustration.is-5 {
  width: 9.875em;
  bottom: 23.6875em;
  left: 14.167vw;
}

@media screen and (max-width: 767px) {
  .section-service {
    padding: 3rem 1.25rem;
  }

  .service-illustrations {
    display: none;
  }
}

/* ==========================================================================
   Somebody loves us (#reviews) — testimonials carousel (vendored Swiper 9)
   Values pulled from reference/site.css: .testimonial-content_left-col
   (margin-left 23vw, pushing the heading/carousel right to make room for the
   trophy illustration pinned to the section's left edge), .testimonial-
   content__col-wr.swiper + .testimonial-content__col-list.swiper-wrapper
   (max-width 64.25em — Swiper computes each slide's width from this
   container's actual width, so setting max-width here is enough; no
   per-slide width rule is needed), .testimonial-content__right-wr
   (trophy: absolute, left .6em, max-width 19em, padding-top 10.2em),
   .arrow-div (vertical divider between cards: width .0625em, margin
   1.88em each side, background #0003), .testimonial-img (avatar: 3.5em,
   border-radius .75em), .testimonial-stars-wr img (1.375em stars),
   .gradient-wr (10em fade over the right edge of the carousel, hinting at
   more slides). The live site also renders .swiper-prev/.swiper-next
   buttons (functional via Swiper's navigation module) but its own CSS sets
   .slider-_button-wrapper { display: none } unconditionally — reproduced
   here as-is; the carousel is autoplay + drag/swipe only on the live site.
   ========================================================================== */

.section-testimonials {
  padding: 6.1875em 1.25em;
  overflow: hidden;
}

.testimonials-row {
  position: relative;
  display: flex;
}

.testimonials-trophy {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0.6em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 19em;
  max-width: 19em;
  padding-top: 10.2em;
}

.testimonials-trophy img {
  width: 100%;
  height: auto;
}

.testimonials-col {
  width: 100%;
  margin-left: 23vw;
}

.testimonials-carousel-wrap {
  position: relative;
  margin-top: 3.75em;
  margin-bottom: 3.75em;
}

.testimonials-swiper {
  max-width: 64.25em;
  overflow: hidden;
}

.testimonials-fade {
  position: absolute;
  z-index: 2;
  inset: 0 -1.9em 0 auto;
  width: 10em;
  background-image: linear-gradient(270deg, var(--color--white-primary) 59%, transparent 85%);
  pointer-events: none;
}

.testimonial-slide {
  display: flex;
  align-items: stretch;
  height: auto;
  padding: 2.5em 0;
}

.testimonial-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25em;
  width: 100%;
  padding-right: 1.88em;
}

.testimonial-text {
  margin: 0;
  font-size: 1.625em;
  font-weight: 600;
  line-height: 120%;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.9375em;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 3.5em;
  height: 3.5em;
  overflow: hidden;
  border-radius: 0.75em;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-size: 1.375em;
  font-weight: 600;
}

.testimonial-stars {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.testimonial-star {
  width: 1.375em;
  height: 1.375em;
}

.testimonial-divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 0.0625em;
  min-height: 27em;
  margin-left: 1.88em;
  background-color: #0003;
}

.testimonials-nav {
  display: none;
}

@media screen and (max-width: 991px) {
  .testimonials-trophy {
    width: 40%;
    max-width: 15rem;
  }

  .testimonials-col {
    margin-left: 37vw;
  }

  .testimonials-swiper {
    max-width: 31rem;
  }
}

@media screen and (max-width: 767px) {
  .section-testimonials {
    padding: 3rem 1.25rem;
  }

  .testimonials-row {
    flex-direction: column;
  }

  .testimonials-trophy {
    position: static;
    align-self: center;
    order: 2;
    width: 8rem;
    max-width: 8rem;
    padding-top: 0;
    margin-top: 2rem;
  }

  .testimonials-col {
    order: 1;
    margin-left: 0;
  }

  .testimonials-swiper {
    max-width: none;
  }

  .testimonial-slide {
    padding: 1.88rem 0;
  }
}

/* ==========================================================================
   Site footer
   Values pulled from reference/site.css: .footer-content (flex row,
   space-between, align-items center, gap 16px, padding-top .4em /
   padding-bottom .5em), .footer-content__left-col (flex row, gap 1.25em,
   align-items center), .footer-adrees-wr (inline-flex, gap .5em, align-items
   baseline), .text-size-0_875em (.875em, weight 400) / its .font-weight-bold
   modifier (var(--font-semib), used for the address/email values and, per
   reference markup, the copyright line too), .icon-1_5em (1.5em square
   LinkedIn icon). Reference container is `.container.is-nav` (full-bleed,
   1.25em L/R padding only) — same box the header nav uses.
   Responsive behavior (max-width 767px: wrap + icon moves first; max-width
   479px: stack into a column, icon grows to 2rem) pulled from the
   corresponding reference breakpoint blocks.
   ========================================================================== */

.site-footer {
  padding: 0.4em 1.25em 0.5em;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 1.25em;
}

.footer-icon-link {
  display: inline-flex;
}

.footer-icon {
  width: 1.5em;
  height: 1.5em;
}

.footer-address {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.footer-label,
.footer-value,
.footer-dot,
.footer-copyright {
  font-family: var(--font-cond);
  font-size: 0.875em;
  font-weight: 400;
  letter-spacing: 0.00875em;
}

.footer-value {
  font-family: var(--font-semib);
}

@media screen and (max-width: 767px) {
  .footer-content {
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .footer-left {
    order: -1;
  }
}

@media screen and (max-width: 479px) {
  .site-footer {
    padding-bottom: 0.625em;
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.69em;
  }

  .footer-left {
    flex-wrap: wrap;
    gap: 1em 0.6em;
  }

  .footer-icon {
    width: 2rem;
    height: 2rem;
  }
}

/* ==========================================================================
   404 Page
   Centered "Page Not Found" layout with heading, description, and home link.
   ========================================================================== */

.notfound-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 6rem);
  padding: 2em 1.25em;
  background-color: var(--color--white-primary);
}

.notfound-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 45em;
  text-align: center;
}

.notfound-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}

.notfound-heading {
  margin: 0;
  font-size: 3.75em;
  font-weight: 600;
  line-height: 115%;
  letter-spacing: -0.0275em;
  color: var(--color--black);
}

.notfound-text {
  margin: 0;
  font-size: 1.875em;
  font-weight: 600;
  line-height: 115%;
  letter-spacing: 0;
  color: var(--color--black);
}

.notfound-button {
  margin-top: 0.75em;
}

@media screen and (max-width: 991px) {
  .notfound-heading {
    font-size: 2.75rem;
  }

  .notfound-text {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 479px) {
  .notfound-main {
    min-height: calc(100svh - 4rem);
    padding: 1em 1.25em;
  }

  .notfound-heading {
    font-size: 2rem;
  }

  .notfound-text {
    font-size: 1.375rem;
  }
}

/* ==========================================================================
   Policy page (Checker app privacy policy)
   ========================================================================== */

.policy-page {
  padding: 8em 1.25em 3em;
}

.policy-content {
  max-width: 750px;
  margin: 0 auto;
}

.policy-title {
  margin: 0 0 0.5em 0;
  font-size: 2.5em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.0275em;
  color: var(--color--black);
  font-family: var(--font-cond);
}

.policy-subtitle {
  margin: 0 0 1.5em 0;
  font-size: 1.25em;
  font-weight: 400;
  color: var(--color--black);
  font-family: var(--font-cond);
}

.policy-intro {
  margin: 0 0 2em 0;
  font-size: 1.125em;
  line-height: 1.6;
  color: var(--color--black);
}

.policy-section {
  margin: 0 0 2.5em 0;
}

.policy-heading {
  margin: 0 0 1em 0;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.3;
  color: #2c6790;
  font-family: var(--font-cond);
}

.policy-list {
  margin: 0 0 1.25em 0;
  padding-left: 1.5em;
}

.policy-list li {
  margin: 0 0 0.75em 0;
  font-size: 1.0625em;
  line-height: 1.6;
  color: var(--color--black);
  list-style-type: disc;
}

.policy-closing {
  margin: 2em 0 0 0;
  font-size: 1.0625em;
  line-height: 1.6;
  color: var(--color--black);
}

.policy-footer {
  margin-top: 3em;
  text-align: right;
  font-size: 0.9375em;
  color: #666666;
  font-style: italic;
}

@media screen and (max-width: 991px) {
  .policy-page {
    padding: 5em 1.25em 2em;
  }

  .policy-title {
    font-size: 2rem;
  }

  .policy-heading {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 767px) {
  .policy-page {
    padding: 4.5em 1.25em 1.5em;
  }

  .policy-title {
    font-size: 1.75rem;
  }

  .policy-subtitle {
    font-size: 1.125em;
  }

  .policy-intro {
    font-size: 1em;
  }

  .policy-heading {
    font-size: 1.25rem;
  }

  .policy-list li {
    font-size: 1rem;
  }

  .policy-closing {
    font-size: 1rem;
  }
}