/* ==========================================================================
   Kovar Agency — Chauffeur Landing Page
   Additive layer on top of the Webflow export (kagency.webflow.css).
   Nothing here overrides core brand tokens; it only adds layout + components
   that the main site did not already ship.
   ========================================================================== */

/* --- Landing-page nav: logo + single CTA, no menu ------------------------ */

.nav-block.lp {
  justify-content: space-between;
}

/* --- Hero ----------------------------------------------------------------
   Full-bleed arrival footage behind the copy. The section carries its own
   height rather than being sized by the visual, so the layout is identical
   whether the video plays, the poster stands in, or neither loads. */

/* Full viewport height so the pin engages without a visible jump — a pinned
   element shorter than the viewport snaps as it takes over. */
.section-hero {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-top: 9em;
  padding-bottom: 7em;
}

/* Opaque base colour, not just an image: with object-fit:contain on mobile the
   letterbox is transparent, and anything painted behind the hero would show
   through it. */
.hero-media {
  z-index: 0;
  background-color: var(--dark-red);
  background-image: url("../images/hero-poster.webp");
  background-position: 50%;
  background-size: cover;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

/* Set by animations.js once the video is genuinely rendering — see there for
   why the still has to go at that point rather than up front. */
.hero-media.is-playing {
  background-image: none;
}

.hero-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Weighted, not uniform. Heaviest across the upper-middle where the headline
   sits, then opening up over the lower third so the car, the wet asphalt and
   the lit entrance stay readable. A flat wash dark enough for the copy would
   have buried the footage — which is the whole point of putting it there. */
.hero-scrim {
  background-image:
    linear-gradient(to bottom,
      var(--dark-red) 0%,
      #100000cc 21%,
      #10000091 50%,
      #10000042 78%,
      var(--dark-red) 100%),
    radial-gradient(ellipse at 50% 50%, #10000000 32%, #10000073 100%);
  position: absolute;
  inset: 0%;
}

.section-hero .content {
  z-index: 5;
  position: relative;
}

/* The footage moves, so no single scrim value is safe on every frame. These
   lift the copy off whatever happens to be behind it at the time.
   drop-shadow rather than text-shadow on the headline: it is gradient-filled
   with background-clip:text, and a text-shadow would show through the
   transparent glyph fill instead of sitting behind it. */
.section-hero .heading-hero {
  filter: drop-shadow(0 2px 20px #100000d9);
}

.section-hero .paragraph-hero,
.section-hero .subtitle {
  text-shadow: 0 1px 14px #100000, 0 1px 3px #100000b3;
}

.heading-hero.lp {
  max-width: 15em;
  font-size: 4.2em;
}

/* --- Client cards -------------------------------------------------------- */

.client-card {
  border: 1px solid var(--maroon-2-2);
  background-color: #ffffff08;
  border-radius: 1em;
  flex: 1 1 16em;
  min-width: 15em;
  padding: 1.4em 1.6em;
  text-decoration: none;
  transition: border-color .3s, background-color .3s, transform .3s;
  display: block;
}

.client-card:hover {
  border-color: var(--salmon);
  background-color: #ff5f5f14;
  transform: translateY(-3px);
}

.client-name {
  color: var(--white);
  margin-bottom: .2em;
  font-size: 1.12em;
  font-weight: 500;
  line-height: 1.3em;
}

.client-meta {
  color: var(--paragraph);
  font-size: .82em;
  line-height: 1.5em;
}

.client-arrow {
  width: .9em;
  height: .9em;
  margin-left: .5em;
  display: inline-block;
  vertical-align: middle;
}

/* --- Trust badges / stats ------------------------------------------------ */

.trust-row {
  grid-column-gap: 1.2em;
  grid-row-gap: 1.2em;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  margin-top: 1.6em;
  display: grid;
}

.trust-badge {
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding: 1.2em .8em;
  display: flex;
}

.trust-icon {
  width: 2.2em;
  height: 2.2em;
  margin-bottom: .8em;
}

.trust-figure {
  color: var(--white);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(140deg, var(--white), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 2.1em;
  font-weight: 500;
  line-height: 1.1em;
}

.trust-text {
  color: var(--paragraph);
  max-width: 14em;
  margin-top: .4em;
  font-size: .85em;
  line-height: 1.5em;
}

/* --- Heading levels ------------------------------------------------------
   The main site puts .heading-service on an <h5>, which skips two levels under
   the section <h2>. These are <h3> here for a valid outline; the sizes are
   pinned back to the h5/h4 steps of the brand type scale so nothing shifts. */

h3.heading-service {
  font-size: 1.25em;
  line-height: 1.2em;
}

h3.step-title {
  font-size: 1.62em;
  line-height: 1.1em;
}

/* --- Services grid (3 x 2) ---------------------------------------------- */

.service.card {
  border: 1px solid var(--maroon-2-2);
  background-color: #ffffff06;
  border-radius: 1.2em;
  height: 100%;
  padding: 2.4em 1.8em;
  transition: border-color .4s, background-color .4s, transform .4s;
}

.service.card:hover {
  border-color: var(--maroon-2);
  background-color: #ff5f5f0f;
  transform: translateY(-4px);
}

.service-tag {
  color: var(--salmon);
  letter-spacing: .13em;
  text-transform: uppercase;
  background-color: #ff5f5f26;
  border-radius: 50em;
  margin-bottom: 1em;
  padding: .45em 1em;
  font-size: .58em;
  font-weight: 500;
  line-height: 1.3em;
}

.service.card.cta-card {
  border-color: var(--maroon-2);
  background-image: linear-gradient(160deg, #ff5f5f1f, #10000000);
  justify-content: center;
}

/* --- Problems / Solutions grids -----------------------------------------
   Shared card treatment so the two sections read as a matched pair: the
   problem raised, then the same slot answered. */

.grid-problems {
  grid-column-gap: 1.4em;
  grid-row-gap: 1.4em;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  display: grid;
}

.problem-card {
  border: 1px solid var(--maroon-2-2);
  background-color: #ffffff06;
  border-radius: 1.2em;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 2.2em 2em;
  display: flex;
  transition: border-color .4s, background-color .4s, transform .4s;
}

.problem-card:hover {
  border-color: var(--maroon-2);
  background-color: #ff5f5f0d;
  transform: translateY(-3px);
}

.problem-icon {
  color: var(--salmon);
  background-color: #ff5f5f1f;
  border-radius: 50em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  margin-bottom: 1.3em;
  display: flex;
}

.problem-icon svg {
  width: 1.5em;
  height: 1.5em;
  display: block;
}

.problem-title {
  color: var(--white);
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(140deg, var(--white), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 0;
  margin-bottom: .45em;
  font-size: 1.35em;
  font-weight: 500;
  line-height: 1.25em;
}

.problem-text {
  color: var(--paragraph);
  margin-bottom: 0;
}

/* Solutions carry the brand accent so the answering half of the pair reads as
   the positive one. */
.solution-card {
  background-image: linear-gradient(165deg, #ff5f5f12, #10000000 62%);
}

.solution-answers {
  color: var(--salmon);
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: .7em;
  font-size: .58em;
  font-weight: 500;
  line-height: 1.3em;
}

/* --- Client proof cards --------------------------------------------------- */

.grid-clients {
  grid-column-gap: 1.4em;
  grid-row-gap: 1.4em;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  align-items: stretch;
  margin-bottom: 2.6em;
  display: grid;
}

.grid-clients .client-card {
  flex: none;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.client-shot {
  background-color: var(--maroon-3);
  border-bottom: 1px solid var(--maroon-2-2);
  flex: none;
}

/* Fake browser chrome so a bare screenshot reads unmistakably as a website,
   and so the domain is legible even when the shot itself is small. */
.client-chrome {
  grid-column-gap: .4em;
  background-color: #00000059;
  align-items: center;
  padding: .55em .8em;
  display: flex;
}

.client-chrome span {
  background-color: #ffffff26;
  border-radius: 50em;
  flex: none;
  width: .45em;
  height: .45em;
}

.client-url {
  color: var(--paragraph);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #ffffff0f;
  border-radius: 50em;
  flex: 1;
  margin-left: .5em;
  padding: .2em .7em;
  font-size: .58em;
  line-height: 1.5em;
  overflow: hidden;
}

.client-image {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  display: block;
}

.client-body {
  flex-direction: column;
  flex: 1;
  padding: 1.3em 1.5em 1.5em;
  display: flex;
}

.client-proof {
  color: var(--paragraph);
  border-left: 2px solid var(--maroon-2);
  margin-top: 1em;
  margin-bottom: 0;
  padding-left: .9em;
  font-size: .87em;
  font-style: italic;
  line-height: 1.55em;
}

.client-attrib {
  color: var(--salmon);
  font-style: normal;
  font-size: .85em;
  display: block;
  margin-top: .4em;
}

/* --- FAQ ------------------------------------------------------------------ */

.faq-list {
  width: 100%;
  max-width: 48em;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  border: 1px solid var(--maroon-2-2);
  background-color: #ffffff06;
  border-radius: 1em;
  margin-bottom: .8em;
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--maroon-2);
  background-color: #ff5f5f0d;
}

.faq-q {
  color: var(--white);
  cursor: pointer;
  grid-column-gap: 1em;
  justify-content: space-between;
  align-items: center;
  padding: 1.25em 1.5em;
  font-size: 1.06em;
  font-weight: 500;
  line-height: 1.4em;
  display: flex;
  list-style: none;
}

/* Safari still paints the default marker without this. */
.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q:focus-visible {
  outline: 2px solid var(--salmon);
  outline-offset: -2px;
}

.faq-mark {
  border-right: 2px solid var(--salmon);
  border-bottom: 2px solid var(--salmon);
  flex: none;
  width: .55em;
  height: .55em;
  margin-right: .2em;
  transition: transform .3s ease;
  transform: rotate(45deg);
}

.faq-item[open] .faq-mark {
  transform: rotate(-135deg);
}

.faq-a {
  color: var(--paragraph);
  padding: 0 1.5em 1.4em;
}

.faq-a p {
  margin-bottom: 0;
}

/* --- Stat card variant for a phrase rather than a figure ------------------
   Feedback asked for "Less manual work" alongside two numeric stats; this
   keeps the same visual weight without pretending to be a number. */
.trust-figure.is-phrase {
  max-width: 6em;
  font-size: 1.5em;
  line-height: 1.2em;
}

/* --- Full-bleed visual break -------------------------------------------- */

.section-visual {
  justify-content: center;
  align-items: center;
  min-height: 34em;
  padding: 7em 1.8em;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* Bled past the section edges so the parallax shift never exposes a gap. */
.visual-media {
  z-index: 0;
  position: absolute;
  inset: -10% 0%;
}

.visual-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Dark enough for AA text contrast, light enough that the car still reads. */
.visual-scrim {
  background-image:
    linear-gradient(to bottom, var(--dark-red) 0%, #10000038 22%, #10000047 60%, var(--dark-red) 100%),
    radial-gradient(circle at 50% 45%, #1000008a, #100000b8);
  position: absolute;
  inset: 0%;
}

.visual-content {
  z-index: 5;
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.visual-heading {
  max-width: 13em;
  margin-bottom: .4em;
  font-size: 2.9em;
}

.visual-content .paragraph-hero {
  margin-bottom: 2em;
}

/* --- How it works (3 steps) --------------------------------------------- */

.steps-grid {
  grid-column-gap: 1.8em;
  grid-row-gap: 1.8em;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  display: grid;
}

.step {
  border: 1px solid var(--maroon-2-2);
  background-color: var(--transparent-background);
  border-radius: 1.2em;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.4em 2em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.step-rule {
  z-index: 0;
  background-image: linear-gradient(90deg, var(--salmon), #ff5f5f00);
  width: 100%;
  height: 1px;
  position: absolute;
  inset: 0% 0% auto;
}

.step-number {
  width: 2.4em;
  height: 2.4em;
  margin-bottom: 1em;
}

.step-title {
  margin-top: 0;
  margin-bottom: .4em;
}

.step-text {
  color: var(--paragraph);
  margin-bottom: 0;
}

/* --- Lead form ----------------------------------------------------------- */

.select-field {
  color: var(--paragraph);
  border: 1px solid var(--maroon-3);
  background-color: var(--transparent-background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff5f5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 1.12em center;
  background-repeat: no-repeat;
  background-size: .9em;
  border-radius: .62em;
  width: 100%;
  height: 3.75em;
  margin-bottom: 1.6em;
  padding: .8em 3em .8em 1.12em;
  font-family: Creato, sans-serif;
  font-size: 1em;
  line-height: 1.3em;
  transition: border-color .3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select-field:focus {
  border-color: var(--red);
  outline: none;
}

.select-field option {
  background-color: var(--dark-red);
  color: var(--paragraph);
}

/* The site's .red-gradient is tuned for the very tall portfolio section, where
   its bright ring lands off the bottom edge. In this shorter CTA section the
   ring would cut straight across the form, so it's pushed down and softened —
   same brand glow, no hard band. */
#strategy-call .red-gradient {
  background-image: linear-gradient(to bottom, #10000000 0%, #eb00003d 42%, #ff5f5f2b 68%, #10000000 100%);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  inset: 40% 0% 0%;
}

.form-note {
  color: var(--paragraph);
  text-align: center;
  margin-top: 1.2em;
  margin-bottom: 0;
  font-size: .8em;
  line-height: 1.5em;
}

.button.submit.full {
  width: 100%;
  cursor: pointer;
  border: 0;
  font-family: Creato, sans-serif;
}

/* --- Form: honeypot + reCAPTCHA ------------------------------------------
   The honeypot is moved off-screen rather than display:none — some bots skip
   inputs that are display:none but will happily fill a positioned one. It is
   aria-hidden and tabindex="-1" in the markup, so it is unreachable for anyone
   using a keyboard or a screen reader. */

.hp-field {
  position: absolute !important;
  left: -6000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Google allows hiding the floating badge as long as the attribution below the
   form is shown instead — which is tidier here, since the badge would collide
   with the sticky mobile CTA. */
.grecaptcha-badge {
  visibility: hidden;
}

.form-legal {
  color: var(--paragraph);
  text-align: center;
  margin-top: .8em;
  margin-bottom: 0;
  font-size: .72em;
  line-height: 1.5em;
  opacity: .75;
}

.form-legal a {
  color: var(--paragraph);
  text-decoration: underline;
}

.form-legal a:hover {
  color: var(--salmon);
}

/* --- Sticky mobile CTA --------------------------------------------------- */

.sticky-cta {
  z-index: 400;
  border-top: 1px solid var(--maroon-2-2);
  background-color: var(--black-maroon);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  justify-content: center;
  align-items: center;
  padding: .8em 1.2em calc(.8em + env(safe-area-inset-bottom));
  display: none;
  position: fixed;
  inset: auto 0% 0%;
}

.sticky-cta .button {
  width: 100%;
  max-width: 26em;
  font-size: 1em;
}

/* --- Footer tweak for a single-page landing ----------------------------- */

.grid-footer.lp {
  grid-template-columns: 1.6fr 1fr;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .faq-q {
    font-size: 1em;
    padding: 1.1em 1.2em;
  }

  .faq-a {
    padding: 0 1.2em 1.2em;
  }

  /* The Webflow export puts backdrop-filter on .body at this breakpoint. That
     makes .body a containing block for position:fixed descendants, so both the
     fixed nav and the sticky CTA anchor to the page instead of the viewport.
     There is nothing behind .body to filter, so dropping it here is safe — and
     it is scoped to this landing page, not the main site's stylesheet. */
  .body {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .heading-hero.lp {
    font-size: 3.4em;
  }

  .grid-services {
    grid-template-columns: 1fr 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .sticky-cta {
    display: flex;
  }

  /* The nav CTA drops to a short label so it stays on one line next to the
     logo; the sticky bar carries the full wording. */
  .nav-block.lp .nav-button {
    white-space: nowrap;
    font-size: .9em;
  }

  .nav-cta-long {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .heading-hero.lp {
    font-size: 2.8em;
  }

  .grid-problems,
  .grid-clients {
    grid-template-columns: 1fr;
  }

  .problem-card {
    padding: 1.8em 1.5em;
  }

  .problem-title {
    font-size: 1.22em;
  }

  /* No video down here — .hero-media's poster background is the whole visual,
     so the section only needs enough height to frame the copy. 100vh is also
     unreliable on mobile browsers whose toolbars resize the viewport. */
  .section-hero {
    min-height: 38em;
    padding-top: 8em;
    padding-bottom: 5em;
  }

  /* Half the weight of the full-size poster, and nothing down here is wide
     enough to tell the difference. */
  .hero-media {
    background-image: url("../images/hero-poster-p-800.webp");
    background-position: 50% 62%;
  }

  /* `cover` on a portrait viewport crops a 16:9 frame to its middle third, and
     the car spends most of the clip outside that slice — you get an empty
     doorway. `contain` keeps the whole shot; the letterbox is invisible because
     the footage and the page are both near-black. Sat low so the copy has the
     darker upper area to itself. */
  .hero-video {
    object-fit: contain;
    object-position: 50% 78%;
  }


  /* A shorter band keeps the 16:9 photo from being cropped to a sliver. */
  .section-visual {
    min-height: 24em;
    padding: 5em 1.4em;
  }

  .visual-heading {
    font-size: 1.95em;
  }

  .trust-row {
    grid-template-columns: 1fr;
  }

  .grid-footer.lp {
    grid-template-columns: 1fr;
  }

  .contact {
    padding: 2em 1.6em;
  }

  .field-group {
    flex-direction: column;
  }
}

@media screen and (max-width: 479px) {
  .heading-hero.lp {
    font-size: 2.35em;
  }

  .grid-services {
    grid-template-columns: 1fr;
    flex-direction: column;
    display: flex;
  }

}

/* --- Animation priming ---------------------------------------------------
   `.anim-ready` is set by an inline <head> script, so it only ever applies
   when JS is running. animations.js removes it if GSAP fails to load, which
   makes the page degrade to fully visible static content. */

.anim-ready [data-hero-item],
.anim-ready [data-reveal],
.anim-ready [data-stagger] {
  opacity: 0;
}

/* Held back until GSAP has parked it off-screen, so it can't flash in on load.
   animations.js makes it visible as soon as it takes control. */
.anim-ready .sticky-cta {
  visibility: hidden;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .client-card,
  .service.card,
  .button {
    transition: none;
  }
}