@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   Handoff — shared site styles.
   Every page links this file, so a change here changes the
   whole site. Page-specific tweaks go in that page's own
   <style> block, after this link.
   ============================================================ */

:root{
  --page:#FAFAF9;
  --card:#FFFFFF;
  --ink:#191917;
  --ink-2:#5F5F58;
  --ink-3:#90908A;
  --line:#E7E6E1;
  --line-2:#D6D5CE;
  --go:#0E5C4A;
  --go-soft:#E8F2EE;
  --urgent:#B4400C;
  --urgent-soft:#FBEDE6;
  --maxw:1020px;
  --emergency:#E11D48;  /* the Emergency tag and problems on My jobs */
  --trip:#2F7BEA; --trip-light:#5AA2FF; --trip-ink:#1D5FC4; --trip-ring:rgba(90,162,255,.6);  /* sky blue: the trip line and card edge on My jobs */
  /* legacy aliases so old markup keeps working */
  --bg:#FAFAF9; --text:#191917; --text-soft:#5F5F58; --text-faint:#90908A;
  --cyan:#0E5C4A; --violet:#0E5C4A; --amber:#B4400C;
  --glass:#FFFFFF; --glass-2:#FAFAF9; --glass-border:#E7E6E1;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--page); color:var(--ink);
  font-family:'Instrument Sans', -apple-system, system-ui, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; cursor:auto;
}
a{ color:inherit; text-decoration:none; }
svg{ fill:none; stroke:currentColor; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; background:none; border:none; color:inherit; }
::selection{ background:var(--go); color:#fff; }
:focus-visible{ outline:2px solid var(--go); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* the old dark theme's decoration has no place on a light page */
.bg-grid, .noise, .glow-1, .glow-2, .glow-3, #cursor-glow{ display:none !important; }

/* these used to swap in display / mono faces; one family now */
.display{ font-family:inherit; font-weight:600; letter-spacing:-0.035em; }
.mono{ font-family:inherit; letter-spacing:0; }

/* scroll-reveal is off: content is visible immediately */
.reveal{ opacity:1 !important; transform:none !important; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
h1,h2,h3{ font-weight:600; letter-spacing:-0.035em; line-height:1.08; }
p{ max-width:62ch; }

/* ---------------- nav ---------------- */
nav{
  display:flex; align-items:center; gap:22px; max-width:var(--maxw);
  margin:0 auto; padding:20px 24px; position:static;
  background:none; backdrop-filter:none; border:none;
}
.logo{ font-weight:600; font-size:17px; letter-spacing:-0.03em; display:flex; align-items:center; gap:8px; color:var(--ink); }
.logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--go); box-shadow:none; animation:none; }
nav .links{ display:flex; gap:24px; margin-left:auto; align-items:center; }
nav a{ color:var(--ink-2); font-size:14.5px; transition:color .15s; }
nav a:hover{ color:var(--ink); }
.cta-small{ color:var(--ink-2); background:none; padding:0; border-radius:0; font-weight:400; font-size:14.5px; }
.cta-small:hover{ color:var(--ink); transform:none; box-shadow:none; }

/* ---------------- labels & pills ---------------- */
.eyebrow, .ticket-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:12.5px; font-weight:500; text-transform:none; letter-spacing:0;
  color:var(--go); background:var(--go-soft); border:none;
  padding:5px 13px; border-radius:100px; backdrop-filter:none;
}
.ticket-tag .pulse{ width:6px; height:6px; border-radius:50%; background:var(--go); box-shadow:none; animation:none; }
.grad{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--go); animation:none; }
.badge{
  display:inline-block; font-size:12px; font-weight:500; padding:4px 11px; border-radius:100px;
  color:var(--go); background:var(--go-soft); border:none;
}
.badge.approved{ color:var(--go); background:var(--go-soft); }
.badge.pending{ color:var(--urgent); background:var(--urgent-soft); }
.badge.live{ color:var(--go); background:var(--go-soft); }

/* ---------------- buttons ---------------- */
.btn-primary, .accept-btn, .book-submit{
  background:var(--go); color:#fff; border:none; border-radius:10px;
  padding:13px 24px; font-weight:500; font-size:15px; font-family:inherit;
  display:inline-block; text-align:center; transition:opacity .15s;
}
.btn-primary:hover, .accept-btn:hover, .book-submit:hover{ opacity:.9; transform:none; box-shadow:none; }
.btn-ghost, .book-back{
  background:var(--card); color:var(--ink); border:1px solid var(--line-2); border-radius:10px;
  padding:12px 22px; font-weight:500; font-size:15px; font-family:inherit; transition:background .15s;
}
.btn-ghost:hover, .book-back:hover{ background:var(--page); border-color:var(--ink-3); }
.accept-btn{ padding:9px 18px; font-size:14px; border-radius:9px; }

/* ---------------- surfaces ---------------- */
.price-card, .job-card, .book-card, .trust-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  backdrop-filter:none; box-shadow:0 1px 2px rgba(25,25,23,.04);
}
.price-card, .job-card{ padding:22px; margin-bottom:0; transition:border-color .2s, transform .2s; }
.job-card:hover, .price-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }

/* ---------------- forms ---------------- */
input, select, textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px;
}
/* iPhones zoom the whole page into any field under 16px, so phones get 16px. */
@media (max-width: 600px){ input, select, textarea{ font-size:16px; } }
input::placeholder, textarea::placeholder{ color:var(--ink-3); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--go); }

/* ---------------- sections ---------------- */
section{ padding:72px 24px; border:none; }
.hero{ padding:56px 24px 40px; max-width:var(--maxw); margin:0 auto; }
.sub{ color:var(--ink-2); font-size:17px; margin-top:14px; }
.section-head{ max-width:56ch; }
.section-head h2{ margin-top:14px; }
.section-head p{ color:var(--ink-2); margin-top:14px; }
.final{ padding:64px 24px 76px; border-top:1px solid var(--line); }
.final-form{ display:flex; gap:8px; margin-top:22px; flex-wrap:wrap; max-width:660px; }
.final-form input, .final-form select{ flex:1; min-width:140px; }
.final-form select{ max-width:150px; }

footer{
  border-top:1px solid var(--line); padding:24px; display:flex; justify-content:space-between;
  color:var(--ink-3); font-size:13.5px; max-width:var(--maxw); margin:0 auto;
}

/* ---------------- spinner ---------------- */
.spinner-ring{
  width:30px; height:30px; margin:0 auto 14px; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--go);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:760px){
  nav{ gap:14px; padding:16px; flex-wrap:wrap; }
  nav .links{ gap:16px; }
  section, .hero, .final{ padding-left:18px; padding-right:18px; }
  .wrap{ padding:0 18px; }
}

/* ---------------- website alerts (alerts.js) ---------------- */
.hb-bell{ position:relative; display:inline-flex; align-items:center; background:none; border:0; padding:6px; color:var(--ink-2); cursor:pointer; }
.hb-bell:hover{ color:var(--ink); }
.hb-count{ position:absolute; top:0; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--urgent); color:#fff; font-size:11px; font-weight:600; line-height:17px; text-align:center; }
.hb-panel{ position:fixed; right:16px; width:min(360px, calc(100vw - 32px)); max-height:70vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(25,25,23,.14); z-index:1000; padding:6px; }
.hb-item{ display:block; padding:12px; border-radius:10px; color:var(--ink); }
a.hb-item:hover{ background:var(--page); }
.hb-item b{ display:block; font-size:14px; font-weight:600; }
.hb-item span{ display:block; font-size:13px; color:var(--ink-2); margin-top:2px; line-height:1.45; white-space:pre-line; }
.hb-item i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:4px; }
.hb-item.new b::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--urgent); margin-right:7px; vertical-align:1px; }
.hb-empty{ padding:16px; font-size:13.5px; color:var(--ink-3); }
.hb-toast{ position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(420px, calc(100vw - 32px)); background:var(--card); border:1px solid var(--line); border-left:4px solid var(--go); border-radius:12px; box-shadow:0 12px 32px rgba(25,25,23,.18); z-index:1001; padding:12px 42px 12px 14px; }
.hb-toast b{ display:block; font-size:14.5px; color:var(--ink); }
.hb-toast span{ display:block; font-size:13.5px; color:var(--ink-2); margin-top:3px; line-height:1.45; }
.hb-toast a{ display:inline-block; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--go); }
.hb-toast button{ position:absolute; top:6px; right:6px; background:none; border:0; font-size:22px; line-height:1; color:var(--ink-3); cursor:pointer; padding:6px 10px; }

/* ---------------- live job panel (My jobs + the job page) ----------------
   White cards like the rest of the site. The trip line glows sky blue where the job is right now. */
.live{ position:relative; display:block; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px;
  box-shadow:0 1px 2px rgba(25,25,23,.04), 0 12px 28px -22px rgba(25,25,23,.3); }
.live.paused{ background:#FDF2F4; border-color:#F6D5DC; }
.live.paused .lv-title{ color:var(--emergency); }
.lv-title{ display:block; font-size:22px; font-weight:600; letter-spacing:-0.03em; line-height:1.2; }
.lv-text{ font-size:14.5px; line-height:1.5; color:var(--ink-2); margin-top:6px; max-width:none; }
.live .chip{ display:inline-block; font-size:12px; font-weight:600; font-style:normal; padding:3px 9px; border-radius:100px; background:var(--emergency); color:#fff; vertical-align:2px; }
/* "Live": this screen updates by itself */
.live-tag{ position:absolute; top:20px; right:20px; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--trip-ink); }
.live-tag::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--trip); box-shadow:0 0 8px var(--trip-light); animation:live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink{ 50%{ opacity:.35; } }
.live .turn{ display:inline-block; margin-top:12px; font-size:13.5px; font-weight:600; padding:6px 13px; border-radius:100px; background:var(--go); color:#fff; }

/* the trip line: booked → on the way → working → done */
.track{ list-style:none; display:grid; grid-template-columns:repeat(3, 1fr) auto; margin:20px 0 2px; }
.track li{ position:relative; padding:20px 6px 0 0; font-size:12px; line-height:1.3; font-weight:500; color:var(--ink-3); }
.track li::before{ content:''; position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--line-2); }
.track li::after{ content:''; position:absolute; top:5px; left:16px; right:4px; height:2px; border-radius:2px; background:var(--line); }
.track li:last-child::after{ display:none; }
.track li.done{ color:var(--ink-2); }
.track li.done::before{ background:var(--trip); }
.track li.done::after{ background:var(--trip); transform-origin:left; animation:trip-draw .45s ease-out both; animation-delay:calc(var(--i) * .22s); }
.track li.now{ color:var(--trip-ink); font-weight:600; }
.track li.now::before{ background:var(--trip-light); animation:trip-ping 1.8s ease-out infinite; }
/* the stretch to the next step: blue light flows along it, because that's where the job is heading */
.track li.now::after{ background:linear-gradient(90deg, var(--line) 30%, var(--trip) 50%, var(--line) 70%) 0 0 / 300% 100%; animation:trip-flow 2s linear infinite; }
@keyframes trip-draw{ from{ transform:scaleX(0); } }
@keyframes trip-flow{ from{ background-position:100% 0; } to{ background-position:0 0; } }
@keyframes trip-ping{ 0%{ box-shadow:0 0 0 0 var(--trip-ring); } 100%{ box-shadow:0 0 0 11px transparent; } }