/* JAS Cleaning home page styles — ported verbatim from src/website/home.html
   <style> block. Linked from app/page.tsx so the Next home renders pixel-for-pixel
   like the finalized static home. Shared chrome tokens come from styles.css +
   site.css; this file is the home-specific layout (utility bar, nav, hero,
   sections, footer, float CTA). */

  body { background: var(--bone); color: var(--ink); }

  /* Top utility bar */
  .ub { background: var(--ink); color: var(--paper); font-size: 12px; padding: 10px 56px; display:flex; align-items:center; justify-content:space-between; }
  .ub .pin { display:inline-flex; gap:6px; align-items:center; }
  .ub .right { display:flex; gap:16px; align-items:center; }
  .ub .lang { display:inline-flex; gap:10px; align-items:center; }
  .ub .lang b { border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:1px; cursor:pointer; font-weight:400; }
  .ub .lang span { opacity:0.55; cursor:pointer; }
  .ub .lang span.on, .ub .lang b.on { opacity:1; border-bottom:1px solid rgba(255,255,255,0.4); }

  /* Sticky nav */
  nav.bar { padding: 20px 56px; border-bottom: 1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; background: var(--bone); position: sticky; top:0; z-index:50; }
  nav.bar .menu { display:flex; gap:28px; font-size:14px; color: var(--ink-2); }
  nav.bar .menu a { color:inherit; text-decoration:none; cursor:pointer; }
  nav.bar .menu a .car { color: var(--mute); margin-left: 4px; }
  nav.bar .menu a:hover { color: var(--leaf); }
  nav.bar .menu a.on { color: var(--leaf); }
  nav.bar .ctas { display:flex; gap:8px; }

  /* ── Hero video band (kept, slightly tightened) ── */
  .video-band { position: relative; height: 640px; overflow: hidden; background: var(--ink); }
  @media (max-width: 900px) { .video-band { height: 480px; } }
  .video-band video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .video-band .gradient { position:absolute; inset:0; background: url('/media/hero-poster.jpg') center/cover no-repeat, linear-gradient(135deg, #2A2E2B 0%, #1A1E1B 55%, #0F1411 100%); }
  .video-band .grid-tex { position:absolute; inset:0; opacity:0.18; background-image: linear-gradient(to right, #F4EFE6 0.4px, transparent 0.4px), linear-gradient(to bottom, #F4EFE6 0.4px, transparent 0.4px); background-size: 60px 60px; }
  .video-band .blob-1 { position:absolute; width:340px; height:340px; border-radius:999px; right: 12%; top: 12%; background: rgba(244,239,230,0.06); }
  .video-band .blob-2 { position:absolute; width:240px; height:240px; border-radius:999px; left: 14%; bottom: 8%; background: rgba(244,239,230,0.08); }
  .video-band .vignette { position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,42,61,0.30) 0%, rgba(15,42,61,0.10) 50%, rgba(15,42,61,0.75) 100%); }
  /* (.slot placeholder label removed — the video slot is filled.) */
  @media (prefers-reduced-motion: reduce) { .video-band video { display:none; } }
  .video-band .overlay { position:absolute; left:56px; right:56px; bottom:48px; color: var(--paper); }
  .video-band .overlay h2 { font-family: var(--display); font-size: 72px; line-height: 0.98; margin: 12px 0 0; color: var(--paper); letter-spacing:-0.02em; font-weight:400; }
  .video-band .overlay h2 em { color:#D9E5C7; font-style: italic; }
  .video-band .overlay p { font-size:15px; color: rgba(244,239,230,0.85); margin-top:14px; max-width:520px; }
  .video-band .overlay .eb { font-family: var(--mono); font-size: 11px; letter-spacing:0.14em; text-transform:uppercase; color: rgba(244,239,230,0.7); }

  /* ── Hero (tightened: no quote-card, trust pills inline) ── */
  .hero { padding: 72px 56px 56px; display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; }
  .hero h1 { font-family: var(--display); font-size: 96px; line-height: 0.96; letter-spacing:-0.02em; font-weight:400; margin: 0; }
  .hero h1 em { color: var(--leaf); font-style: italic; }
  .hero .lead { font-size:18px; color: var(--ink-2); max-width:520px; line-height:1.5; }
  .hero .col-left { display:flex; flex-direction:column; gap:18px; }
  .hero-ctas { display:flex; gap:12px; margin-top: 4px; }
  .hero-trust { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color: var(--ink-3); margin-top: 8px; }
  .hero-trust span { display:inline-flex; gap:6px; align-items:center; }
  .hero-trust .ck { color: var(--leaf); font-weight:700; }

  /* Right col proof card — "the journey line" (2026-06-11 redesign; the owner
     disliked the lit-up text rows + photo strip). A vertical timeline whose
     leaf fill line draws downward over a single 12s pure-CSS loop; four icon
     nodes ignite as the line reaches them (0/3/6/9s) and stay lit; a proof
     chip (real room photos + CleanCheck ✓) pops for the 9.5s finale beat.
     No JS — the card can never strand.
     NOTE: per-node offsets are baked into each keyframe set (25%/50%/75%)
     instead of animation-delay so every node shares the SAME loop boundary and
     all of them dip back to unlit together over the final 0.4s (a positive
     delay would shift each node's reset point too). */
  .flow-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-2); display:flex; flex-direction:column; gap:14px; }
  .flow-info-wrap { position:relative; }
  /* Rail track: spans first→last node centers (dot = 44px → center x 22px;
     grid rows are equal quarters, so the last center sits 25% − 22px up). */
  .flow-rail { position:absolute; left:20.5px; top:22px; bottom:calc(25% - 22px); width:3px; border-radius:2px; background: var(--line-soft); }
  .flow-rail-fill { position:absolute; left:0; right:0; top:0; height:0; border-radius:inherit; background: linear-gradient(180deg, var(--leaf-2) 0%, var(--leaf) 100%); animation: flowRailGrow 12s ease-in-out infinite; }
  @keyframes flowRailGrow {
    0%          { height:0%; opacity:1; }
    25%         { height:33.4%; }
    50%         { height:66.7%; }
    75%, 96.7%  { height:100%; opacity:1; }
    100%        { height:100%; opacity:0; }
  }
  .flow-info { list-style:none; margin:0; padding:0; display:grid; grid-template-rows: repeat(4, 1fr); min-height:372px; }
  .flow-info .fstep { display:flex; gap:14px; align-items:flex-start; }
  /* Nodes paint above the rail (positioned + z-index over the absolute track). */
  .fdot { width:44px; height:44px; flex:0 0 44px; border-radius:999px; background: var(--paper); border:1px solid var(--line); color: var(--ink-3); display:grid; place-items:center; position:relative; z-index:1; }
  .fdot svg { width:24px; height:24px; display:block; }
  .ftext { padding-top:2px; min-width:0; }
  .ftext strong { display:block; font-size:14.5px; color: var(--ink); line-height:1.25; }
  .ftext .sub { display:block; font-size:12.5px; color: var(--ink-3); line-height:1.4; margin-top:2px; }
  .n1 .fdot { animation: flowNode1 12s ease-in-out infinite; }
  .n2 .fdot { animation: flowNode2 12s ease-in-out infinite; }
  .n3 .fdot { animation: flowNode3 12s ease-in-out infinite; }
  .n4 .fdot { animation: flowNode4 12s ease-in-out infinite; }
  /* Ignition grammar (same beats per node, shifted by 25%): unlit → 0.24s ramp
     into the pop (leaf-bg circle, leaf border/icon, 1.08 scale, ring starts) →
     0.54s settle (ring expands to transparent, scale back, rest on leaf-soft)
     → hold lit → all nodes dip to unlit over the final 0.4s (96.7%→100%). */
  @keyframes flowNode1 {
    0%         { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
    2%         { background: var(--leaf-bg); border-color: var(--leaf); color: var(--leaf); transform: scale(1.08); box-shadow: 0 0 0 0 rgba(46,107,58,0.30); }
    6.5%, 96.7% { background: var(--leaf-soft); border-color: var(--leaf); color: var(--leaf); transform: scale(1); box-shadow: 0 0 0 11px rgba(46,107,58,0); }
    100%       { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
  }
  @keyframes flowNode2 {
    0%, 23%     { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
    25%         { background: var(--leaf-bg); border-color: var(--leaf); color: var(--leaf); transform: scale(1.08); box-shadow: 0 0 0 0 rgba(46,107,58,0.30); }
    29.5%, 96.7% { background: var(--leaf-soft); border-color: var(--leaf); color: var(--leaf); transform: scale(1); box-shadow: 0 0 0 11px rgba(46,107,58,0); }
    100%        { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
  }
  @keyframes flowNode3 {
    0%, 48%     { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
    50%         { background: var(--leaf-bg); border-color: var(--leaf); color: var(--leaf); transform: scale(1.08); box-shadow: 0 0 0 0 rgba(46,107,58,0.30); }
    54.5%, 96.7% { background: var(--leaf-soft); border-color: var(--leaf); color: var(--leaf); transform: scale(1); box-shadow: 0 0 0 11px rgba(46,107,58,0); }
    100%        { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
  }
  @keyframes flowNode4 {
    0%, 73%     { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
    75%         { background: var(--leaf-bg); border-color: var(--leaf); color: var(--leaf); transform: scale(1.08); box-shadow: 0 0 0 0 rgba(46,107,58,0.30); }
    79.5%, 96.7% { background: var(--leaf-soft); border-color: var(--leaf); color: var(--leaf); transform: scale(1); box-shadow: 0 0 0 11px rgba(46,107,58,0); }
    100%        { background: var(--paper); border-color: var(--line); color: var(--ink-3); transform: scale(1); box-shadow: 0 0 0 0 rgba(46,107,58,0); }
  }
  /* Finale chip: in-flow under node 4's label column (space reserved → the
     card never reflows), pops at 9.5s (79.2%), fades with the loop reset. */
  .flow-proof-chip { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-left:58px; padding:6px 10px 6px 6px; background: var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow: var(--sh-1); opacity:0; transform: translateY(8px); animation: flowChipPop 12s ease-in-out infinite; }
  .flow-proof-chip .th { width:36px; height:36px; flex:0 0 36px; border-radius:9px; display:block; }
  .flow-proof-chip .lbl { font-family: var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-2); white-space:nowrap; }
  .flow-proof-chip .ck { color: var(--leaf); font-weight:700; }
  @keyframes flowChipPop {
    0%, 79.2% { opacity:0; transform: translateY(8px); }
    82.5%, 96.7% { opacity:1; transform: translateY(0); }
    100%      { opacity:0; transform: translateY(8px); }
  }
  /* Footer holds only the caption (the checklist button was removed by owner request):
     centered over a hairline rule so it reads as the card's sign-off, not a leftover
     half of the old space-between row. */
  .flow-foot { border-top:1px solid var(--line-soft); padding-top:12px; text-align:center; }
  .flow-cap { font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-3); }
  /* Reduced motion: the finished infographic — full line, every node lit, chip shown. */
  @media (prefers-reduced-motion: reduce) {
    .flow-rail-fill, .fdot, .flow-proof-chip { animation: none; }
    .flow-rail-fill { height:100%; opacity:1; }
    .fdot { background: var(--leaf-soft); border-color: var(--leaf); color: var(--leaf); }
    .flow-proof-chip { opacity:1; transform:none; }
  }

  /* ── NEW: trust stats bar (replaces in-hero trust + duplicates from other sections) ── */
  .trust-bar { background: var(--paper); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 28px 56px; }
  .trust-bar-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; align-items: center; }
  .trust-stat .v { font-family: var(--display); font-size: 36px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
  .trust-stat .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

  /* ── Sections (shared) ── */
  section { padding: 64px 56px; }
  .sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 20px; }
  .sec-head h2 { font-family: var(--display); font-size:44px; letter-spacing:-0.02em; margin:0; font-weight:400; }
  .eb { font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-3); }

  /* ── Services preview (compact: 5 cards, smaller) ── */
  .svc-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .svc { background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition: border-color .12s, transform .12s; text-decoration: none; color: inherit; }
  .svc:hover { border-color: var(--ink); transform: translateY(-2px); }
  .svc .ph { height: 120px; background-size: cover; background-position: center; }
  .svc .body { padding: 14px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
  .svc .row1 { display:flex; align-items:center; justify-content:space-between; gap: 6px; }
  .svc .name { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; }
  .svc .desc { font-size:13px; color: var(--ink-2); line-height: 1.35; }
  .svc .row2 { margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; }
  .svc .price { font-family: var(--mono); font-size:11.5px; color: var(--ink-3); }
  .svc .arr { color: var(--ink-3); font-family: var(--mono); }

  /* ── How it works (horizontal 4-step, compact) ── */
  .howit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .howit-step { padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .howit-step .n { font-family: var(--mono); color: var(--leaf); font-size: 14px; letter-spacing: 0.08em; }
  .howit-step .h { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; margin-top: 10px; }
  .howit-step .p { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }

  /* ── Reviews preview (3 strongest, compact) ── */
  .rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .rev { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
  .rev .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 8px; font-size: 13px; }
  .rev .q { font-family: var(--display); font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
  .rev .by { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: var(--ink-3); align-items: center; gap: 10px; }
  .rev .by strong { color: var(--ink); }

  /* ── Areas + ZIP qualifier (inline, like services) ── */
  .areas-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .areas-map { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
  .areas-map-inner { position: relative; height: 240px; background: linear-gradient(135deg, #D9E5C7 0%, #B8CFA1 70%, #7E9B68 100%); }
  .areas-qualify { display: flex; flex-direction: column; gap: 12px; }
  .areas-qualify .field-label { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; display: block; }
  .areas-qualify .qrow { display: flex; gap: 10px; }
  .areas-qualify .qrow .field { flex: 1; }
  .areas-zips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13px; margin-top: 12px; }
  .areas-zips span { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
  .areas-zips .ck { color: var(--leaf); font-weight: 700; margin-right: 6px; }
  #zipResult { min-height: 18px; font-size: 13px; margin-top: 8px; }

  /* ── Final CTA (phone equal weight) ── */
  .final { padding: 64px 56px; background: var(--ink); color: var(--paper); display:flex; align-items:center; justify-content:space-between; gap: 32px; flex-wrap: wrap; }
  .final h2 { font-family: var(--display); font-size: 56px; line-height: 1.05; margin: 0; color: var(--paper); font-weight:400; letter-spacing:-0.02em; }
  .final h2 em { color: var(--leaf-soft); font-style: italic; }
  .final .eb { color: rgba(244,239,230,0.5); }
  .final .ghost-on-dark { background:transparent; color: var(--paper); border-color: rgba(244,239,230,0.3); }
  .final-buttons { display: flex; gap: 12px; }

  /* Footer */
  footer { background: var(--bone); padding: 48px 56px 24px; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; border-top:1px solid var(--line); }
  footer h5 { font-family: var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight:500; }
  footer a { display:block; color: var(--ink); text-decoration:none; font-size:14px; padding:4px 0; }
  footer a:hover { color: var(--leaf); }
  footer .legal { grid-column: 1 / -1; border-top:1px solid var(--line); padding-top:20px; font-family: var(--mono); font-size:11px; color: var(--ink-3); letter-spacing:0.12em; text-transform:uppercase; display:flex; justify-content:space-between; margin-top: 16px; }

  /* Photo gradients */
  /* Licensed room photography (public/photos — see docs/media-credits.md) layered
     over the original gradients, which remain visible while the image loads. */
  .ph-kitchen { background: url('/photos/kitchen.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); }
  .ph-bath    { background: url('/photos/bath.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); }
  .ph-living  { background: url('/photos/living.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); }
  .ph-window  { background: url('/photos/window.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); }
  .ph-bed     { background: url('/photos/bed.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); }

  /* Float CTA */
  .float-cta { position: fixed; bottom: 24px; right: 24px; z-index: 100; box-shadow: var(--sh-3); }

  /* ── Mobile ── */
  @media (max-width: 900px) {
    section, .final, footer { padding-left: 24px; padding-right: 24px; }
    /* The shared burger drawer (animations.css + initMobileNav) owns phone
       navigation now. This file loads after animations.css (same order as
       home.html's inline <style>), so the desktop chrome rules above outrank
       the shared mobile overrides — restate the mobile bar treatment here:
       hide the inline menu (the drawer replaces it), keep ONE tight row of
       logo + quote CTA + burger, and slim the utility bar to phone + EN/ES
       (the child-level hides + ellipsis come from animations.css unopposed). */
    nav.bar { padding: 12px 16px; flex-wrap: nowrap; gap: 10px; }
    html.has-mobile-nav nav.bar .menu { display: none; } /* JS-injected burger present; without it the plain menu stays usable */
    nav.bar .ctas { margin-left: auto; gap: 6px; }
    .ub { padding: 8px 16px; font-size: 11px; }
    .ub .pin { display: none; }
    .ub .right { width: 100%; gap: 10px; flex-wrap: nowrap; justify-content: space-between; min-width: 0; }
    .video-band .overlay { left: 24px; right: 24px; bottom: 32px; }
    .video-band .overlay h2 { font-size: 44px; }
    .hero { grid-template-columns: 1fr; padding: 48px 24px; gap: 36px; }
    .hero h1 { font-size: 56px; }
    /* CTA pairs (hero + final band) can't share a 390px row — wrap instead of
       pushing the page wider than the viewport (overflow inherited from home.html). */
    .hero-ctas { flex-wrap: wrap; }
    /* Journey line, slightly tighter: 40px nodes, 13px labels; rail geometry
       follows the smaller dot (center x 20px). */
    .flow-info { min-height: 332px; }
    .flow-info .fstep { gap: 12px; }
    .flow-rail { left: 18.5px; top: 20px; bottom: calc(25% - 20px); }
    .fdot { width: 40px; height: 40px; flex-basis: 40px; }
    .fdot svg { width: 22px; height: 22px; }
    .ftext strong { font-size: 13px; }
    .ftext .sub { font-size: 12px; }
    .flow-proof-chip { margin-left: 52px; }
    .final-buttons { flex-wrap: wrap; }
    .trust-bar-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
    .svc-grid { grid-template-columns: 1fr 1fr; }
    .howit-grid { grid-template-columns: 1fr 1fr; }
    .rev-grid { grid-template-columns: 1fr; }
    .areas-row { grid-template-columns: 1fr; }
    .final { flex-direction: column; align-items: flex-start; padding: 48px 24px; }
    .final h2 { font-size: 40px; }
    footer { grid-template-columns: 1fr 1fr; padding: 36px 24px 20px; }
  }