/* ============================================================================
   Makeway hero — scroll-scrubbed Blender render + repurposed closer video.
   Source of truth: animation/EMBED-HANDOFF.md (build v12 final).
   Classes are namespaced `mw-` so they never collide with the Webflow export.
   Brand: zero AI imagery; the blue beacon is baked into the rendered frames.
   ========================================================================= */

/* Switzer weights used by the hero (400/500/600/800). Self-contained .otf so
   the hero renders correctly regardless of the Webflow font setup. */
@font-face { font-family:'Switzer'; font-weight:400; font-display:swap;
             src:url('../fonts/Switzer-Regular.otf')  format('opentype'); }
@font-face { font-family:'Switzer'; font-weight:500; font-display:swap;
             src:url('../fonts/Switzer-Medium.otf')   format('opentype'); }
@font-face { font-family:'Switzer'; font-weight:600; font-display:swap;
             src:url('../fonts/Switzer-Semibold.otf') format('opentype'); }
@font-face { font-family:'Switzer'; font-weight:800; font-display:swap;
             src:url('../fonts/Switzer-Extrabold.otf') format('opentype'); }

/* ---- HERO (pinned by ScrollTrigger while the swap scrubs) ---- */
.mw-hero {
  position: relative; height: 100vh; width: 100%; overflow: hidden;
  background: #000;
  font-family: 'Switzer', -apple-system, "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; color: #fff;
}


/* The scroll-scrubbed film. Full-bleed, centered, edges feathered INTO the page
   by a three-mask intersect — no card, no border, no drop-shadow (those read as
   "a video in a box"). Top edge killed; road dissolves to black at the bottom;
   left/right edges feather into the page the same dreamy way. */
.mw-film {
  /* a page-wide band sitting BELOW the headline — the text lives on black above it and is
     never behind the render. `top` anchors the band in the upper-middle; the edge-fade mask
     melts its edges into the black page; the beats sit on black below it. */
  position: absolute; top: 32%; left: 50%; transform: translateX(-50%);
  width: 74%; max-width: 1460px; height: auto; display: block; z-index: 0;
  /* three masks, intersected:
       1. vertical   — kills the top edge, dissolves the road to black at the bottom
       2. horizontal — feathers the left/right edges into the page (no hard band line)
       3. radial     — rounds the corners so the feathers meet softly                 */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 70%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    radial-gradient(ellipse 88% 100% at 50% 45%, #000 72%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 70%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    radial-gradient(ellipse 88% 100% at 50% 45%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;   /* old-webkit keyword for "intersect" */
          mask-composite: intersect;
}

/* Headline left, sub-copy + button top-right. Reads on the near-black sky band. */
.mw-overlay { position: absolute; inset: 0;
              /* mirror the navbar container (.navbar-logo-left-container: max-width 1728px,
                 35px side padding) so the headline's left edge lines up with the logo and the
                 sub-copy's right edge lines up with Get Early Access. */
              max-width: 1728px; margin: 0 auto;
              /* headline sits at the TOP on black, fully ABOVE the render band (which starts
                 lower down) — so the text is never behind the streetlight or any car. */
              padding: clamp(100px, 11vh, 132px) 35px clamp(28px, 4.5vw, 64px);
              display: flex; justify-content: space-between; align-items: flex-start;
              pointer-events: none; z-index: 3; }
.mw-overlay * { pointer-events: auto; }

/* weight 600 (Semibold) matches the original "Rethink How Cities Park" headline
   (.step-10) — 800 read too heavy. Same Switzer, lighter cut. */
.mw-overlay h1 { font-weight: 600; font-size: clamp(38px, 6vw, 86px); line-height: .96;
                 letter-spacing: -.012em; max-width: 11ch; margin: 0; color: #fff; }

/* Drop the right block so its TOP lands on the middle of the first headline line
   ("Stop circling."). That offset = half an H1 line-height (0.48 × the H1 font-size
   clamp), so it tracks the headline across viewports. */
.mw-right { max-width: 520px; text-align: right; display: flex; flex-direction: column;
            align-items: flex-end; gap: 30px; margin-top: clamp(18px, 2.88vw, 41px); }
.mw-right p { font-size: clamp(15px, 1.35vw, 21px); line-height: 1.7; color: #d7d7d7; margin: 0;
              letter-spacing: .002em; }

.mw-btn { display: inline-block; border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
          padding: 11px 24px; font-size: 14px; color: #fff; text-decoration: none;
          transition: background .2s, color .2s; }
.mw-btn:hover { background: #fff; color: #000; }

/* Scroll-synced story beats — on the pure-black band below the road (clear of the
   cars/lamp/beacon), fading by scroll-progress percent (frame-count independent). */
.mw-beats { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
            width: 90%; max-width: 640px; height: 3.2em; text-align: center;
            pointer-events: none; z-index: 3; }
.mw-beat { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; opacity: 0;
           font-size: clamp(16px, 1.7vw, 22px); line-height: 1.45; color: #ededed;
           letter-spacing: .005em; text-shadow: 0 2px 24px rgba(0,0,0,.8);
           transition: opacity .65s ease; }  /* cross-fade between storyline phrases */

.mw-scrollhint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
                 font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
                 color: rgba(255,255,255,.4); z-index: 3;
                 animation: mw-bob 1.8s ease-in-out infinite; }
@keyframes mw-bob { 0%,100%{ transform: translateX(-50%) translateY(0); }
                    50%  { transform: translateX(-50%) translateY(6px); } }

.mw-loading { position: absolute; inset: 0; background: #000; z-index: 9; display: grid;
              place-items: center; color: rgba(255,255,255,.5); transition: opacity .5s;
              font-family: 'Switzer', system-ui, sans-serif; }

/* ---- Closer: the ORIGINAL hero video, repurposed — faded behind a CTA ---- */
.mw-closer { position: relative; height: 100vh; overflow: hidden; background: #000;
             display: grid; place-items: center;
             font-family: 'Switzer', -apple-system, Arial, system-ui, sans-serif; color: #fff; }
.mw-closervid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                opacity: .5; filter: grayscale(.25) brightness(.65) contrast(1.05);
                -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 50%, #000 42%, transparent 100%);
                        mask-image: radial-gradient(ellipse 82% 78% at 50% 50%, #000 42%, transparent 100%); }
.mw-closer-overlay { position: relative; text-align: center; display: flex; flex-direction: column;
                     align-items: center; gap: 28px; z-index: 2; }
.mw-closer-overlay h2 { font-size: clamp(34px, 6vw, 84px); font-weight: 800;
                        letter-spacing: -.03em; line-height: .98; color: #fff; margin: 0; }

/* ---- Final CTA — the closer clip as a darkened, full-section BACKGROUND, with the
   CTA (headline, sub-copy, email form) layered on top. A vignette + flat dim keep the
   clip visible while everything on top stays readable. ---- */
.mw-cta-bg { position: relative; overflow: hidden; isolation: isolate;
             display: flex; flex-direction: column; justify-content: center; align-items: center;
             border-radius: 28px;
             min-height: clamp(520px, 70vh, 720px);
             /* inner wrapper → sits inside the section's 35px padding, so its edges line up
                one-to-one with the FAQ content above it. margin-top = breathing-room spacer. */
             width: 100%; margin-top: clamp(24px, 3.5vh, 52px); }
.mw-cta-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                  z-index: 0;
                  /* darkened so the headline, sub-copy, and buttons on top read clearly,
                     while the dark-blue footage still shows through */
                  filter: grayscale(.08) brightness(.66) contrast(1.04); }
.mw-cta-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
                  /* vignette + flat dim — strong enough to seat the centered CTA on top,
                     darker toward the edges */
                  background:
                    radial-gradient(ellipse 96% 96% at 50% 50%, rgba(0,0,0,.24) 0%, rgba(0,0,0,.60) 100%),
                    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)); }
/* a touch of text-shadow keeps the CTA crisp now that the backdrop is lighter */
.mw-cta-content { text-shadow: 0 1px 18px rgba(0,0,0,.55); }
.mw-cta-content { position: relative; z-index: 2; width: 100%;
                  display: flex; flex-direction: column; align-items: center; gap: 28px; }
@media (max-width: 860px) {
  .mw-cta-bg { border-radius: 18px; min-height: clamp(440px, 64vh, 580px); }
}

/* ---- "How Makeway works" step cards — brand dark-blue cool gradient ----
   The Webflow tab cards defaulted to a flat grey (#121212). Fill them with the
   same Makeway blue the feature cards use (linear-gradient(#083158,#0b243e)) on a
   cooler diagonal, and brighten the active/hovered step so the hover swap reads. */
/* Step cards rest as plain black/outline — no grey "active" fill that lingers after
   you hover off. The Makeway-blue is a soft translucent overlay on a ::before whose
   opacity fades in/out on hover (gradients can't be transitioned directly). */
.tabs-hover .w-tab-link {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid #1f1f1f;   /* consistent resting outline on every card */
  transition: border-color .35s ease;
  /* Stack number -> heading -> body tightly from the top (was space-between,
     which pinned the heading/body block to the card bottom and made the
     number->heading gap vary 22-74px by body length). flex-start + a single
     gap keeps the header close to the number and every card's rhythm identical. */
  justify-content: flex-start;
  gap: 14px;
}
/* Webflow's active tab zeroed the border (border-width:0), so the selected
   card lost its outline. Restore it so all cards match and hover reads blue. */
.tabs-hover .w-tab-link.w--current { background: transparent; border: 1px solid #1f1f1f; }   /* active stays black */
.tabs-hover .w-tab-link > * { position: relative; z-index: 1; }   /* content above overlay */
.tabs-hover .w-tab-link::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: linear-gradient(135deg, #0e4f86 0%, #0c2c50 100%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.tabs-hover .w-tab-link:hover { border-color: rgba(96, 168, 236, .28); }
.tabs-hover .w-tab-link:hover::before { opacity: .7; }

/* Tighten the empty band above the "Parking shouldn't feel like a daily battle"
   section — that lone .div-style after the hero carried a 100px top margin. */
.div-style:not(.second-section) { margin-top: 24px; }

/* ---- Testimonials — city names in Makeway blue (regular weight, not bold), and
   all three bylines pinned to the same bottom row regardless of quote length. ---- */
.mw-city   { color: #3084D5; font-weight: 400; }
.mw-byline { font-weight: 400; }
.quick-stack-3 .w-layout-cell { display: flex; }
.quote-card { display: flex; flex-direction: column; height: 100%; width: 100%; }
.quote-card .paratext.no-max-w { margin-top: auto; }

/* Optically center the arrow inside the circular buttons — the right-pointing head
   pulls the eye right, so notch it a hair left. Hits every arrow-circle button. */
.div-block-2 img[src*="arrow-right"] { transform: translateX(-1.5px); }

/* ============================================================================
   MOBILE / RESPONSIVE — hero + CTA.
   The desktop hero is a two-column overlay (headline left, sub-copy + button
   right) floating over a landscape film band. On phones that two-column layout
   crushes both columns into ~150px slivers, so it collapses to a single stacked,
   left-aligned column, and the landscape film band is enlarged + dropped so it
   still reads in portrait. Height switches to svh on phones so the pinned
   ScrollTrigger doesn't re-pin (jump) when the mobile URL bar shows/hides.
   ========================================================================= */

/* Tablet & landscape phone — stack the overlay, keep generous type. */
@media (max-width: 860px) {
  .mw-overlay {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: clamp(84px, 13vh, 116px) 28px 28px;
  }
  .mw-overlay h1 { font-size: clamp(40px, 8.6vw, 64px); max-width: 16ch; }
  .mw-right {
    max-width: 560px; text-align: left; align-items: flex-start;
    margin-top: 22px; gap: 22px;
  }
  .mw-right p { font-size: clamp(15px, 2.4vw, 18px); line-height: 1.6; }
  .mw-film { width: 104%; max-width: none; top: 38%; }
}

/* Phone portrait. */
@media (max-width: 600px) {
  /* svh = "small viewport height": pinned to the smallest-chrome state, so the
     pinned hero never lurches when the URL bar collapses on scroll. vh first as
     the fallback for browsers without svh. */
  .mw-hero { height: 100vh; height: 100svh; }
  .mw-overlay { padding: clamp(76px, 12vh, 104px) 20px 24px; }
  .mw-overlay h1 { font-size: clamp(38px, 11.5vw, 54px); line-height: .98; max-width: 18ch; }
  .mw-right { margin-top: 18px; gap: 18px; }
  .mw-right p { font-size: 16px; line-height: 1.58; }    /* 16px avoids iOS input-zoom siblings; comfortable read */
  .mw-btn { padding: 12px 22px; font-size: 15px; }       /* ~44px tall — iOS touch-target minimum */
  /* Enlarge + drop the landscape film band so the render reads in portrait,
     sitting below the stacked headline. Clipped by .mw-hero overflow:hidden, so
     the 150% width never introduces horizontal scroll. */
  .mw-film { width: 150%; top: 42%; }
  .mw-beats { bottom: 9%; width: 92%; }
  .mw-beat { font-size: clamp(15px, 4.4vw, 19px); line-height: 1.4; }
  .mw-scrollhint { bottom: 16px; font-size: 10px; letter-spacing: .3em; }
  .mw-cta-content { gap: 22px; }
}

/* ---- Feature cards — align the subtext start line across cards ----
   Cards are flex-column with justify-content:space-between, so the body is
   pinned to the card bottom. Bodies range 4–5 lines (104–130px), which made
   4-line bodies start one line lower than 5-line neighbors. Give every body
   the same block height so the first line of subtext aligns across the row. */
.div-block-8 .step-4-regular.card-text { min-height: 130px; }

/* ---- 2026-07-02 polish: optical alignment, r/t kerning, mobile CTA ---------------
   1. iOS text-inflation guard — Safari was inflating the closer CTA type/buttons.
   2. H1 optical outdent — the "S" glyph's side bearing made the headline look
      indented vs the logo ink; both containers already align at 35px.
   3. .mw-rt — opens the r-t pair in "Start" a touch (net ≈ +.018em after the
      global -.012em tracking) without loosening the whole headline.
   4. ≤767px closer CTA — centered heading/label/caption, 52px tap targets,
      16px input font (stops iOS focus-zoom), tighter card + section padding. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.mw-overlay h1 { margin-left: -0.035em; }
.mw-rt { letter-spacing: .03em; }

@media (max-width: 767px) {
  #pre-footer.fourth-section { padding: 44px 16px 52px; }
  .mw-cta-bg { min-height: 0; border-radius: 16px; margin-top: 8px; }
  .mw-cta-content { gap: 18px; padding: 44px 20px 48px; }
  .mw-cta-content .step-8-regular { text-align: center; align-self: center; }
  .mw-cta-content .text-field { height: 52px; font-size: 16px; border-radius: 12px; }
  .mw-cta-content .form-button { text-align: center; height: 52px; font-size: 16px;
                                 border-radius: 12px; padding: 0 44px; }
  .mw-cta-content .div-block-2.for-button { width: 36px; height: 36px; right: 8px; }
  .mw-cta-content .step-4-regular.paratext.align-center.fixed-width.step-2-regular {
    text-align: center; font-size: 14px; line-height: 1.55;
    max-width: 320px; margin: 0 auto; opacity: .85; }
}

/* Tagline ("Street parking made simpler, one neighbor at a time."): balance the
   line breaks so the last word never strands alone (was "…at a / time."). */
.div-block-7 > .step-8-regular.align-left { text-wrap: balance; }

/* Webflow badge + editor FAB — this is a static export on Vercel; Webflow's
   runtime must never surface its "Made in Webflow" badge or the editor pencil
   button (boots off a stale localStorage "WebflowEditor" flag). */
.w-webflow-badge, [class*="w-editor"] { display: none !important; }