/* =====================================================================
   Home hero: "Scene"  (Saguaro Logic, approved direction 2026-10-01)
   ---------------------------------------------------------------------
   What it is: the headline sits in the open sky of the hero photo. A 2px
   green line runs from the homeowner's phone (left) to the handshake
   (right). Five numbered steps sit on that line: the journey of one job.

   How it's built:
   - .hs-text   : the copy, on Deep Slate.
   - .hs-media  : the photo. It slides up under the copy by 30% of its own
                  height (that part is only sky), and a slate fade blends
                  the two, so there is never a hard edge and the copy never
                  covers the people.
   - .hs-line   : an SVG in the photo's own coordinates (1672 x 933), so the
                  line stays on the right spots at every screen width.
   - .hs-steps  : a real numbered list (readable by screen readers and
                  Google). At 1024px and up, each step is placed on the line
                  by percentage. Below 1024px the list becomes one row under
                  the photo, and the photo keeps just the line.
   Colors are the Brand variables (Build-Spec 3.2), written out because
   custom code can't read Webflow variable names.
   ===================================================================== */

.hs { background:#10303d; color:#fff; position:relative; overflow:hidden; }

/* ---------- Copy ---------- */
.hs-text { position:relative; z-index:4; }   /* above the photo, line and step list, so the buttons are always clickable */
.hs-media { pointer-events:none; }   /* the photo, line and steps are decoration: clicks pass through */
.hs-inner { max-width:1140px; margin:0 auto; padding:48px 24px 0; }
.hs .eyebrow { font-family:Montserrat, sans-serif; font-weight:700; font-size:14px; letter-spacing:.08em;
               text-transform:uppercase; color:#f9a86a; margin:0 0 14px; }   /* orange: allowed only on Deep Slate */
.hs h1 { font-family:Montserrat, sans-serif; font-weight:800; font-size:52px; line-height:1.1; margin:0 0 16px;
         max-width:20ch; letter-spacing:-.01em; color:#fff; }
.hs-lead { font-family:"Source Sans 3", sans-serif; font-size:21px; line-height:1.5; color:#ffffff; margin:0 0 24px; max-width:54ch; text-wrap:pretty; }
/* Button area: desktop = button and phone link side by side, the reassurance under them.
   Phone = button, reassurance, phone link (set below). Named grid areas keep the HTML order simple. */
.hs-cta { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"btn call" "exp exp"; gap:10px 24px; align-items:center; }
.hs-cta > div { grid-area:btn; } .hs-call { grid-area:call; justify-self:start; } .hs-explainer { grid-area:exp; }
.hs .btn-primary { display:inline-block; background:#76bc43; color:#10303d; font-family:Montserrat, sans-serif; font-weight:700;
                   font-size:17px; line-height:1.2; padding:15px 28px; min-height:48px; box-sizing:border-box; border-radius:8px; text-decoration:none; }
.hs-call { font-family:"Source Sans 3", sans-serif; font-weight:600; font-size:18px; color:#fff; text-decoration:underline;
           text-decoration-color:#76bc43; text-decoration-thickness:2px; text-underline-offset:4px; padding:12px 0; }
.hs-explainer { font-family:"Source Sans 3", sans-serif; font-size:16px; color:#ffffff; margin:0; }   /* upright and white: it's the reassurance next to the button */

/* ---------- Photo, fade and line ---------- */
.hs-media { position:relative; margin-top:-16.7%; }          /* 30% of the photo's height (sky only) sits under the copy */
.hs-frame { position:relative; height:0; padding-bottom:55.8%; } /* 933 / 1672: the photo's shape */
.hs-frame img, .hs-frame video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block; }
.hs-fade { position:absolute; left:0; right:0; top:-2px; height:calc(100% + 2px); z-index:1;   /* starts 2px above the photo so no hairline shows at its top edge */
           background:linear-gradient(#10303d 0%, rgba(16,48,61,.85) 13%, rgba(16,48,61,.45) 27%, rgba(16,48,61,0) 42%, rgba(16,48,61,0) 100%); }
.hs-line { position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; overflow:visible; }
.hs-line path { fill:none; stroke:#76bc43; stroke-width:2px; stroke-linecap:round; vector-effect:non-scaling-stroke;
                filter:drop-shadow(0 0 3px rgba(118,188,67,.7)); }

/* ---------- Steps on the line (1024px and up) ---------- */
.hs-steps { list-style:none; margin:0; padding:0; position:absolute; left:0; top:0; width:100%; height:0; padding-bottom:55.8%; z-index:3; }
.hs-steps li { position:absolute; width:0; height:0; }        /* left/top are set per step, in % of the photo */
.hs-num { position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; background:#10303d;
          border:2px solid #76bc43; color:#fff; font-family:Montserrat, sans-serif; font-weight:800; font-size:13px;
          display:flex; align-items:center; justify-content:center; box-shadow:0 0 5px rgba(118,188,67,.6); box-sizing:border-box; }
.hs-br { display:none; }
.hs-label { position:absolute; top:22px; left:0; transform:translateX(-50%); white-space:nowrap; font-family:Montserrat, sans-serif;
            font-weight:700; font-size:13px; color:#fff; background:rgba(11,37,49,.82); border:1px solid rgba(255,255,255,.18);
            border-radius:8px; padding:5px 10px; }

/* ---------- Tablet and phone (below 1024px): copy above, photo with the line, steps as one row ---------- */
@media (max-width:1023px) {
  .hs-inner { padding:40px 24px 0; }
  .hs h1 { font-size:44px; }
  .hs-lead { font-size:20px; }
  .hs-media { margin-top:-10%; }
  .hs-steps { position:relative; height:auto; padding:18px 12px 26px; display:flex; justify-content:space-between; }
  .hs-steps::before { content:""; position:absolute; left:10%; right:10%; top:31px; height:2px; background:#76bc43; }
  .hs-steps li { position:relative !important; left:auto !important; top:auto !important; width:20%; height:auto; text-align:center; }
  .hs-num { position:relative; left:auto; top:auto; margin:0 auto 8px; width:26px; height:26px; font-size:12px; box-shadow:none; }
  .hs-label { position:static; transform:none; white-space:normal; background:none; border:0; padding:0; display:block;
              font-size:13px; line-height:1.25; }
  .hs-br { display:block; }   /* every label breaks after its first word, so all five wrap the same way */
}
@media (max-width:478px) {
  .hs-inner { padding:32px 20px 0; }
  .hs h1 { font-size:34px; }
  .hs-lead { font-size:18px; }
  .hs-cta { grid-template-columns:1fr; grid-template-areas:"btn" "exp" "call"; gap:8px; }   /* phone: reassurance right under the button */
  .hs .btn-primary { display:block; width:100%; text-align:center; }
  .hs-label { font-size:12px; }
  .hs-steps { padding:16px 4px 24px; }
}

/* ---------- Motion (browser only) ----------
   The head script adds .hs-motion to <html> before the page paints. When the hero scrolls into view, hero-scene.js adds .is-in: the line draws from her phone,
   and each number pops as the line reaches it. Reduced-motion visitors see the finished state. */
@media (prefers-reduced-motion: no-preference) {
  /* The line is revealed left to right, from her phone (18% across the photo) to the handshake.
     A clip on the whole SVG, not a stroke dash: dashes on a fixed-width (non-scaling) stroke are measured
     differently by each browser and fell short of the hands on very wide windows. */
  .hs-motion .hs .hs-line { -webkit-clip-path:inset(0 82% 0 0); clip-path:inset(0 82% 0 0);
                            transition:-webkit-clip-path 2.2s ease-out .3s, clip-path 2.2s ease-out .3s; }
  .hs-motion .hs.is-in .hs-line { -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); }
  .hs-motion .hs .hs-steps li { opacity:0; transform:translateY(6px); transition:opacity .35s ease-out, transform .35s ease-out; }
  .hs-motion .hs.is-in .hs-steps li { opacity:1; transform:none; }
  .hs-motion .hs.is-in .hs-steps li:nth-child(1) { transition-delay:.6s; }
  .hs-motion .hs.is-in .hs-steps li:nth-child(2) { transition-delay:1.0s; }
  .hs-motion .hs.is-in .hs-steps li:nth-child(3) { transition-delay:1.4s; }
  .hs-motion .hs.is-in .hs-steps li:nth-child(4) { transition-delay:1.8s; }
  .hs-motion .hs.is-in .hs-steps li:nth-child(5) { transition-delay:2.2s; }
}