/*
 * Home page — redesign per docs/Redesign/design_handoff_home_sell_rent/README.md.
 *
 * A NEW file rather than a rewrite of home.css, deliberately: home.css is also
 * loaded by sell#index and rent#index, and home_services.css by all three. The
 * find page taught this lesson the hard way — rewriting a stylesheet that other
 * pages quietly depend on strips them silently. home.css keeps serving sell and
 * rent untouched; this file carries the home redesign and loads last so it wins
 * where the two overlap.
 *
 * The shared skeleton (tokens, cards, buttons, reveal, trust band) comes from
 * service_pages.css.
 */

/* ================================ hero ================================
   The old hero carried id="home-main-hero", which media-query.css forces to
   overflow: visible !important — that would stop the video being clipped. The
   id is gone and home no longer loads media-query.css; the autocomplete
   dropdown positions itself, as on every other redesigned page. */

.home-hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: #0a1a3f;
}

.home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Starts INVISIBLE. This element is hero_video_controller's overlay target: it
   sets opacity 0 once the video plays and 1 if the video errors, so the gradient
   is a fallback for the poster, not the default look. It used to be painted on
   from the first frame, which made the whole hero read as a dark blue wash. */
.home-hero-scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  background: linear-gradient(
    100deg,
    rgba(8, 20, 54, 0.94) 0%,
    rgba(12, 32, 80, 0.86) 32%,
    rgba(20, 48, 110, 0.5) 56%,
    rgba(20, 48, 110, 0.2) 100%
  );
}

/* Base scrim — every width, owner 2026-09-10.
   CONTRAST NOTE: this is a pseudo-element, not .home-hero-scrim, and that is
   the whole point — hero_video_controller owns the scrim's opacity and drops it
   to 0 the moment the video plays. When autoplay is *refused* rather than broken
   (iOS Low Power Mode, Android Data Saver, Safari's autoplay setting) no `error`
   event fires either, so the controller's overlay never rises and the copy was
   left sitting on raw footage. Metered white-on-poster at 390px came back
   3.49:1 on the subtitle and 1.90:1 / 1.58:1 on the tab labels.
   This layer is painted in CSS, cannot be switched off by script, and is what
   carries the hero's contrast floor. The controller's overlay still stacks on
   top for the error case; it is no longer the only thing there. Tablet swaps
   the angle below; every other width uses this one. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Above the video and .home-hero-scrim (both z-auto), below the copy (20). */
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    178deg,
    rgba(8, 20, 54, 0.72) 0%,
    rgba(8, 20, 54, 0.48) 34%,
    rgba(8, 20, 54, 0.78) 72%,
    rgba(8, 20, 54, 0.9) 100%
  );
}

.home-hero-inner {
  position: relative;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
  /* Sits well clear of the fixed navbar rather than tucked under it. */
  padding: 152px 16px 116px;
}

/* With the overlay gone the copy sits straight on the footage, so it carries its
   own contrast. */
.home-hero-headline {
  margin: 0 0 18px;
  /* Caps near Zillow's ceiling; the hero's job is the search trigger, so the
     headline defers to it. No max-width on purpose: the headline may run past
     the input's width, but it must never wrap and push the stack down. */
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #ffffff;
  /* Two layers: a tight dark core for edge definition plus the wide wash.
     This is what carries contrast over bright video frames — the mobile
     median metered 2.9:1 with the single lighter shadow. */
  text-shadow: 0 1px 4px rgba(6, 16, 44, 0.75), 0 2px 22px rgba(6, 16, 44, 0.6);
}

.home-hero-sub {
  margin: 0 0 16px;
  max-width: 440px;
  /* Two-line reservation: every intent's subtitle runs ~2 lines at this
     measure, so swapping intents never moves the tabs or the form. */
  min-height: 53px;
  font-size: 17px;
  line-height: 1.55;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(6, 16, 44, 0.8), 0 1px 16px rgba(6, 16, 44, 0.6);
  text-wrap: pretty;
}

/* ---- intent pills ----
   cta_toggle_controller owns the active state: it adds and removes a set of
   Tailwind utilities plus .cta-btn-active. These rules load after Tailwind and
   key off .cta-btn-active, so the controller keeps working untouched while the
   pills read as the redesign. Do not restyle by overriding the utilities it
   toggles — style the state class instead. */

/* The four pills share the search field's width and split it evenly, so they sit
   as one control above the input rather than four ragged chips. */
/* Text tabs with a single sliding pill behind the active one. The pill is an
   absolutely-positioned sibling the controller moves and sizes to the active
   button, so the glide never reflows the document. */
.home-hero-intents {
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  max-width: 560px;
  margin-bottom: 10px;
}

.home-hero-intents .cta-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 44px;
  border-radius: 999px;
  background: #ff4f00;
  /* The active tab no longer enlarges (owner 2026-08-09), so the pill carries
     the emphasis instead: a hairline dark ring (inset, so the measured
     geometry the controller sets stays exact) and a navy drop shadow in place
     of the old orange glow.
     CONTRAST NOTE: with the label back at 15px, white on #FF4F00 is 3.3:1 —
     under the 4.5:1 normal-text bar the old 19px large-text exemption
     covered. Owner-directed; deep orange #c23a00 (5.4:1) is the one-line fix
     if a ruling reopens it. */
  box-shadow: inset 0 0 0 1px rgba(10, 24, 61, 0.3),
    0 1px 2px rgba(8, 20, 60, 0.4),
    0 5px 14px rgba(8, 20, 60, 0.3);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.home-hero-intents .cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 12px rgba(6, 16, 44, 0.6);
}

.home-hero-intents .cta-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* Type stays at the resting 15px and the tab never scales up (owner
   2026-08-09). 650 on the Inter variable axis: visibly lighter than 700 but
   still bold to the eye.
   The same ruling used to have the active tab swap to a verb label ("Sell" ->
   "List Your Home"); that half is superseded — labels are fixed at every width
   now, because the swap moved the tapped tab out from under the finger. See
   cta_toggle_controller. */
.home-hero-intents .cta-btn.cta-btn-active {
  font-weight: 650;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-intents .cta-indicator,
  .home-hero-intents .cta-btn {
    transition: none;
  }
}

/* ---- search shell ----
   The controller swaps the whole form per intent, and each one is a different
   flow with its own endpoint. These rules dress whatever it injects rather than
   assuming one markup shape. */

.home-hero-search {
  max-width: 560px;
  /* All four intent forms are one input row; the reservation absorbs their
     small height differences so a swap never reflows the hero. */
  min-height: 64px;
}

.home-hero-search input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 17px 84px 17px 22px;
  font-size: 16px;
  color: var(--svc-ink, #0f172a);
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(8, 20, 60, 0.35);
}

.home-hero-search input[type="text"]::placeholder {
  color: #6b7280;
}

.home-hero-search input[type="text"]:focus {
  outline: none;
  border-color: #ff4f00;
  box-shadow: 0 12px 34px rgba(8, 20, 60, 0.35), 0 0 0 3px rgba(255, 79, 0, 0.25);
}

.home-hero-search input[disabled] {
  background: #f1f5f9;
  cursor: not-allowed;
}

.home-hero-search button,
.home-hero-search a[class*="bg-vanaCoral"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
  padding: 0;
  color: #ffffff;
  /* Icon-only: non-text contrast needs 3:1, so white-on-#FF4F00 (3.3:1) is
     legal at this size — the text labels moved to aria-label. */
  background: #ff4f00;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 79, 0, 0.4);
}

.home-hero-search button i {
  font-size: 17px;
}

.home-hero-search button:hover:not(:disabled),
.home-hero-search a[class*="bg-vanaCoral"]:hover {
  color: #ffffff;
  background: #d94300;
}

.home-hero-search button:disabled {
  opacity: 0.72;
}

.home-hero-search .suggestions-container {
  max-height: 350px;
  overflow-y: auto;
  z-index: 9999;
  color: var(--svc-ink, #0f172a);
  text-align: left;
  border: 1px solid #e5e7eb;
}

/* ---- what the field accepts ----
   This line is a SIBLING of .home-hero-search, never a child: that element is
   cta_toggle's formContainer and its innerHTML is replaced wholesale on every
   intent swap, which would take the hint with it on the first tap. Sitting
   outside also keeps it below the autocomplete dropdown rather than inside the
   positioning context the dropdown anchors to.

   It carries the "address, MLS, city or ZIP" detail that the COMPACT
   placeholder drops, so it belongs only where that placeholder is used — below
   1024px, where the long string was clipped by roughly half on a 320px phone.
   Desktop keeps the full placeholder in the field and needs no second line, so
   this starts hidden and the small-screen block turns it on. Hiding it here
   rather than only in cta_toggle means it never flashes in before JS runs. */
.home-hero-hint {
  display: none;
  max-width: 560px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(6, 16, 44, 0.8), 0 1px 12px rgba(6, 16, 44, 0.55);
}

/* ==================== savings calculator value props ====================
   The savings calculator itself is NOT styled here — it kept its original
   markup, CSS (home_services.css) and controllers. Only the value-prop row at
   the bottom of shared/_savings_section carries the redesigned treatment, so
   only those rules live here. Do not grow this block back into a re-skin. */

.savings-info-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid #eef2f7;
}

.savings-info-card {
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid #e8eef7;
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.savings-info-card:hover {
  border-color: #ff4f00;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

/* No rule for the icon here on purpose. fontawesome-svg-core's dom.watch()
   (application.js) replaces every <i class="fa-*"> with an <svg>, so an element
   selector like `.savings-info-card i` matches nothing once the page is live.
   The icon inherits its colour and sits on its own line above the block <h4>,
   which is the treatment that was signed off. */

.savings-info-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.savings-info-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
  text-wrap: pretty;
}

/* ============================ featured homes ============================ */

.home-featured {
  padding: 88px clamp(24px, 5vw, 64px) 96px;
  background: var(--svc-tint, #f8fafc);
  border-top: 1px solid #eef2f7;
  border-bottom: 1px solid #eef2f7;
}

.home-featured-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.home-featured-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e2e8f0;
}

.home-featured-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #0f172a;
}

/* The standfirst under "What's happening right now." */
.home-featured-blurb {
  margin: 10px 0 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--svc-muted, #64748b);
  text-wrap: pretty;
}

/* auto-fit, not repeat(4, ...) — fixed tracks shrink below content width and
   clip the beds/baths/sqft row under 1180px. */
.home-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.home-featured-grid .listing-tile-stats {
  flex-wrap: wrap;
  gap: 8px 14px;
}

.home-featured-grid .listing-tile-city {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
}

/* ============================ choose your path ============================ */

.home-paths {
  /* Budgeted to fit a laptop screen: two cards on a wide image are tall already,
     so the section padding, the heading gap and the card body all give ground
     together. Cutting only the padding does not get there. */
  padding: 52px clamp(24px, 5vw, 64px) 56px;
  background: #ffffff;
}

.home-paths-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.home-paths-head {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
}

.home-paths-grid {
  display: grid;
  /* min() because a grid track will not shrink below its own minimum: a bare
     minmax(320px, 1fr) held the cards at 320px inside the 280px content box a
     320px phone leaves after the section's 20px padding, so they bled 40px out
     of the section. The 320px floor still governs wherever there is room for
     it, so the desktop two-up is unchanged. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}

.home-path-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e8eef7;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}

.home-path-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
}

/* Fixed frame so both illustrations sit in an identical box; the source art
   is portrait, so cover + a per-card object-position picks the crop. Matching
   the scenes fully needs the Sell asset re-exported wider — CSS can't add
   scene depth that isn't in the file. */
.home-path-media {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--svc-tint, #f8fafc);
}

.home-path-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.home-path-card:hover .home-path-media img {
  transform: scale(1.04);
}

.home-path-media--buy img {
  object-position: 50% 42%;
}

.home-path-media--sell img {
  object-position: 50% 46%;
}

/* Leads the copy block instead of floating over the line work. */
.home-path-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c23a00;
}

.home-path-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 24px 22px;
}

.home-path-title {
  margin: 0 0 7px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

/* Lets the copy grow so both buttons land on one baseline. */
.home-path-copy {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  text-wrap: pretty;
}

.home-path-body .svc-btn {
  align-self: flex-start;
  height: 44px;
  box-sizing: border-box;
  padding: 0 28px;
  font-size: 15px;
}

/* ======================== everything after the offer ======================== */

.home-services {
  padding: 88px clamp(24px, 5vw, 64px) 96px;
  background: var(--svc-tint, #f8fafc);
  border-top: 1px solid #eef2f7;
}

.home-services-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* The ~78ch blurb measure cap now lives on .svc-blurb itself (service_pages.css). */

/* The 32px/700 section scale now lives on .svc-h2 itself (service_pages.css). */

/* Real ids with scroll-margin so the hero's intent anchors do not land these
   under the sticky navbar. Padding moves to the band/body halves; overflow
   clips the band's corners against the card radius. */
.home-svc-card {
  scroll-margin-top: 80px;
  padding: 0;
  overflow: hidden;
}

/* Navy band — same navy as the hero on every card, no per-service colors.
   Fixed 96px so the navy/white seam lines up across the row; the right padding
   reserves the motif's zone so the nowrap titles never collide with the art. */
.home-svc-band {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 96px;
  padding: 0 92px 0 22px;
  overflow: hidden;
  background-color: #14306e;
  /* Triangular lattice — echoes the logo key's faceted triangle grid. Matches
     the sell closing band; this is the band texture standard. */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 30px);
}

/* Each band carries its service page's hero motif, cropped and fully drawn —
   static on purpose: the stroke-draw animation's job belongs to the hero pages. */
.home-svc-motif {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  height: 62px;
  width: auto;
  opacity: 0.42;
  pointer-events: none;
}

.home-svc-rule {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 0 14px;
  background: #FF4F00;
}

.home-svc-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  white-space: nowrap;
  color: #ffffff;
}

.home-svc-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

.home-svc-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}

.home-svc-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #c23a00;
  text-decoration: none;
}

.home-svc-link i {
  font-size: 11px;
}

/* ============================== responsive ==============================
   The hero's small-screen rules and the sticky mobile CTA (home_services.css)
   both key off `max-width: 1023.98px`, so the two can no longer disagree about
   where "small" ends. They used to split at 767px and 768px respectively, which
   handed iPad portrait — exactly 768px — the desktop hero padding AND the
   mobile bar at the same time.

   Tablet portrait then narrows that band with
   `(min-width: 768px) and (max-width: 1023.98px)`. Anything the tablet block
   does not restate is inherited from the small-screen block above it, so the
   two read top to bottom as phone-then-tablet.

   The page sections at the bottom stay on the old 767px phone breakpoint on
   purpose: their tablet sizing is outside this pass. */

/* ---------------------- phone + tablet portrait ---------------------- */

@media (max-width: 1023.98px) {
  .home-hero {
    min-height: 560px;
  }

  /* A 16:9 frame in a portrait box shows about 39% of its width, and the
     default centre crop landed on the garage. This holds the lit entry in
     frame. It governs the poster too: per the HTML spec the poster image is
     painted with the same object-fit/object-position as the video, which is
     what keeps the still and the first frame aligned. */
  .home-hero-video {
    object-position: 62% 38%;
  }

  .home-hero-inner {
    padding: 104px 16px 72px;
  }

  /* Three lines, not the desktop block's two (3 x 1.55 line-height). At this
     measure every intent's subtitle runs three lines except sell's, which runs
     two — so without this the tabs, the field and the hint all jumped 26px up
     the moment you tapped Sell. Reserving the tallest keeps the swap still. */
  .home-hero-sub {
    min-height: calc(3 * 1.55em);
  }

  /* ---- intent tabs: segmented control ----
     The tabs used to be bare text on a shared rail, wrapping to a ragged second
     row. Three of the four then had no bounded region at all (Common Region),
     so they read as caption text rather than controls — and structure in the
     video behind them read as UI. A fixed grid gives every intent the same
     bordered cell, which also means the row count no longer depends on how wide
     the labels happen to be. */
  .home-hero-intents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* The sliding pill is a desktop affordance. Here each button carries its own
     state, and the pill would otherwise consume a grid cell and push the fourth
     tab onto a third row. cta_toggle skips measuring it while it is unrendered. */
  .home-hero-intents .cta-indicator {
    display: none;
  }

  .home-hero-intents .cta-btn {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 15.5px;
    /* Same weight in both states: the fill marks the active tab, so the label
       has no reason to shift weight and re-render. */
    font-weight: 600;
    background: rgba(10, 26, 63, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    text-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  /* Deep orange, not #FF4F00: white on the bright orange is 3.3:1 at this size
     and these labels are normal-size text. #C23A00 is 5.4:1. */
  .home-hero-intents .cta-btn.cta-btn-active {
    font-weight: 600;
    background: #c23a00;
    border-color: #c23a00;
  }

  /* :not([hidden]) so cta_toggle keeps the final say per intent — it hides the
     hint on sell/insure/finance, whose field takes a property address. A bare
     `display: block` here would beat the UA's [hidden] rule and strand it on. */
  .home-hero-hint:not([hidden]) {
    display: block;
  }

  /* Room for a 48px button plus its 8px inset, and no more: the old 84px
     reservation was sized for a 64px desktop button and ate the placeholder. */
  .home-hero-search input[type="text"] {
    padding: 17px 62px 17px 20px;
  }

  .home-hero-search button,
  .home-hero-search a[class*="bg-vanaCoral"] {
    width: 48px;
    height: 48px;
    background: #c23a00;
  }

  .home-hero-search button:hover:not(:disabled),
  .home-hero-search a[class*="bg-vanaCoral"]:hover {
    background: #a53100;
  }
}

/* -------------------------- tablet portrait -------------------------- */

@media (min-width: 768px) and (max-width: 1023.98px) {
  .home-hero {
    min-height: 660px;
  }

  /* Left-weighted: at this width the copy column no longer spans the frame, so
     the scrim follows it rather than washing the whole image down. */
  .home-hero::after {
    background: linear-gradient(
      96deg,
      rgba(8, 20, 54, 0.86) 0%,
      rgba(8, 20, 54, 0.62) 46%,
      rgba(8, 20, 54, 0.34) 100%
    );
  }

  .home-hero-video {
    object-position: 55% 42%;
  }

  /* 156px, not the phone block's 104px: at exactly 768 the navbar's links wrap
     to a second row and it stands 124px tall, so the phone padding would run
     the headline under it. This keeps the same ~32px clearance the bar gets at
     834 where it stops wrapping. */
  .home-hero-inner {
    padding: 156px 32px 88px;
  }

  /* Back to the two-line reservation: the subtitle reaches its 440px measure
     here and every intent fits two lines, so the three-line phone reservation
     would just be dead space above the tabs. */
  .home-hero-sub {
    min-height: 53px;
  }

  .home-hero-headline {
    font-size: 46px;
  }

  /* All four intents fit one row here, so the grid stops wrapping. */
  .home-hero-intents {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 580px;
  }

  /* Tabs, field and hint share one edge — they are one control. */
  .home-hero-search,
  .home-hero-hint {
    max-width: 580px;
  }
}

/* ----------------------------- phone only ----------------------------- */

@media (max-width: 767px) {
  .home-featured,
  .home-paths,
  .home-services {
    padding: 60px 20px 64px;
  }

  .home-featured-title {
    font-size: 26px;
  }
}