/* JS Power LLC — shared design system
   Navy #112754 + gold, flat and disciplined: solid colors, square
   stamped buttons, hairline gold rules, no glow, no gradients.
   Loaded by the homepage, card, guide, city and product pages after
   their legacy inline styles, so these rules give the whole site one
   cohesive tradesman look. Guide print/PDF rules stay authoritative
   under @media print. */
:root{
  --sp-navy:#112754;
  --sp-navy-2:#16305f;
  --sp-navy-deep:#0a1a3a;
  --sp-navy-ink:#081426;
  --sp-panel:#0e2044;
  --sp-panel-2:#132a56;
  --sp-gold:#e3b341;
  --sp-gold-deep:#c99327;
  --sp-gold-soft:#f5de9a;
  --sp-cream:#f7f2e6;
  --sp-paper:#fdfaf2;
  --sp-ink:#f4f1ea;
  --sp-muted:#bcc6da;
  --sp-muted-2:#97a4bf;
  --sp-line:rgba(227,179,65,.24);
  --sp-line-soft:rgba(227,179,65,.13);
  --sp-disp:'Archivo','Arial Narrow',Arial,sans-serif;
  --sp-radius:10px;
  --sp-shadow:0 1px 2px rgba(2,8,23,.28),0 10px 24px rgba(2,8,23,.20);
  --sp-shadow-sm:0 1px 2px rgba(2,8,23,.22),0 6px 16px rgba(2,8,23,.14);
  /* Retheme the legacy per-page variables so older pages go gold too */
  --void:#0a1a3a !important;
  --panel:#0e2044 !important;
  --panel-2:#132a56 !important;
  --line:rgba(227,179,65,.24) !important;
  --gold:#e3b341 !important;
  --blue:#d9a82e !important;
  --green:#f0d060 !important;
  --purple:#c49b3f !important;
  --grad:#e3b341 !important;
  --grad-hot:#e3b341 !important;
  --glow-blue:0 1px 2px rgba(2,8,23,.25) !important;
  --glow-green:0 1px 2px rgba(2,8,23,.25) !important;
  --glow-purple:0 1px 2px rgba(2,8,23,.25) !important;
}

@media screen{
  html{scroll-padding-top:96px;text-rendering:optimizeLegibility}
  body{
    background:var(--sp-navy-ink);
    color:var(--sp-ink);
  }
  body::before{background-image:none !important}
  ::selection{background:rgba(227,179,65,.4);color:#fff}
  :focus-visible{outline:3px solid rgba(227,179,65,.9);outline-offset:3px;border-radius:4px}
  main{display:block;min-width:0}
  img,svg,video{max-width:100%}
  img{height:auto}
  a{color:var(--sp-gold-soft)}
  a:hover{color:#fff}
  h1,h2,h3{font-family:var(--sp-disp)}

  /* ---------- Header / navigation ---------- */
  .ux-header,.site-header,header.site-header,header{
    background:var(--sp-navy-deep);
    border-bottom:2px solid var(--sp-gold-deep);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .ux-header-in{max-width:1180px;min-height:66px}
  .ux-brand,.brand{letter-spacing:.01em;text-decoration:none}
  .ux-nav a,.nav-links a{border-radius:6px;padding:8px 14px;transition:background .18s ease,color .18s ease}
  .ux-nav a:hover,.nav-links a:hover{background:rgba(227,179,65,.14);color:#fff}
  .ux-call,.btn-primary,.btn-order,.ux-buybtn,.dl-btn,.button-primary,.nap-call,.btn-book{
    background:var(--sp-gold) !important;
    color:#231a05 !important;
    border:none;
    border-radius:8px;
    box-shadow:0 2px 0 var(--sp-gold-deep);
    transition:background .18s ease,box-shadow .18s ease;
  }
  .ux-call:hover,.btn-primary:hover,.btn-order:hover,.ux-buybtn:hover,.dl-btn:hover,.button-primary:hover,.nap-call:hover,.btn-book:hover{
    background:var(--sp-gold-soft) !important;box-shadow:0 2px 0 var(--sp-gold-deep);
  }

  /* ---------- Shared surfaces ---------- */
  .wrap{max-width:1120px}
  .cover,.hero{
    isolation:isolate;
    background:var(--sp-navy-deep);
    border-bottom:3px solid var(--sp-gold-deep);
  }
  .cover h1,.hero h1{letter-spacing:-.01em;text-wrap:balance}
  .cover .sub,.hero-lead,.sub{color:#d5dbe9}
  .chapter,.toc,.about,.price-box,.locked,.section,.card,.service-card,.why-card,.plan-card,.nap,
  .g-card,.gallery-item,.contact-info,.quote-form,.cta-band,.callout{
    border-color:var(--sp-line);
  }
  .chapter,.toc,.about,.price-box,.locked,.section,.cta-band{
    border-radius:var(--sp-radius);
    background:var(--sp-panel);
    box-shadow:var(--sp-shadow-sm);
  }
  .service-card,.why-card,.plan-card,.g-card,.gallery-item,.nap-card,.pkg{
    background:var(--sp-panel);
    border:1px solid var(--sp-line-soft);
    border-radius:var(--sp-radius);
    box-shadow:var(--sp-shadow-sm);
    transition:border-color .18s ease;
  }
  .service-card:hover,.why-card:hover,.g-card:hover,.gallery-item:hover,.nap-card:hover{
    border-color:rgba(227,179,65,.55);
  }
  .nap{
    background:var(--sp-navy-deep);
    border:1px solid var(--sp-line);
    border-radius:12px;
    box-shadow:var(--sp-shadow);
  }
  .nap-card{background:rgba(255,255,255,.045);border-color:var(--sp-line-soft)}
  .nap-call{border-radius:8px}
  .eyebrow,.kicker{letter-spacing:.11em;color:var(--sp-gold);text-transform:uppercase}
  .callout{border-radius:10px;background:var(--sp-panel-2)}
  .toc a,.chapter a,.about a{text-underline-offset:3px}
  .grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--sp-gold-soft)}
  .price{color:var(--sp-gold-soft)}
  .tag,.g-tag,.preview-tag{
    background:rgba(227,179,65,.14);border:1px solid var(--sp-line);
    color:var(--sp-gold-soft);border-radius:6px;
  }
  .warn,.danger{border-radius:10px}
  .seo-nav a{border-radius:6px}
  .seo-nav a:hover{background:rgba(227,179,65,.14);color:#fff}
  .top-link{color:var(--sp-gold-soft)}

  /* ---------- Forms and controls ---------- */
  input,select,textarea{
    border:1px solid rgba(227,179,65,.3);
    border-radius:8px;
    background:rgba(6,15,32,.78);
    color:var(--sp-ink);
  }
  input:focus,select:focus,textarea:focus{border-color:var(--sp-gold);box-shadow:0 0 0 3px rgba(227,179,65,.18);outline:none}
  button,a.btn,a.btn-primary,a.btn-order{min-height:44px}

  /* ---------- Guide covers and catalogue cards ---------- */
  .cover-img,.guide-cover-card{
    width:100%;max-width:560px;aspect-ratio:4/3;object-fit:cover;
    border-radius:10px;border:1px solid rgba(227,179,65,.35);
    box-shadow:var(--sp-shadow);margin:0 0 28px;
  }
  .g-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
  .g-card{display:grid;grid-template-columns:118px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px;overflow:hidden}
  .g-card-img{width:118px;height:92px;object-fit:cover;border-radius:8px;border:1px solid rgba(227,179,65,.28);display:block}
  .nap-img{width:100%;height:180px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid rgba(227,179,65,.28);padding:10px;margin:0 0 12px;display:block}
  .g-card .g-emoji{display:none}
  .g-card:not(:has(.g-card-img)) .g-emoji{display:block;font-size:2rem}
  .g-title{line-height:1.35}
  .fig{border-radius:10px;background:var(--sp-panel-2);box-shadow:var(--sp-shadow-sm)}
  .fig figcaption{color:#c9d2e4}
  ul.checklist li::before,ol.checklist li::before{box-shadow:0 0 0 3px rgba(227,179,65,.12)}

  /* ---------- Tables and long-form reading ---------- */
  .chapter p,.section p{max-width:76ch}
  table{max-width:100%;border-collapse:separate;border-spacing:0}
  th{background:rgba(227,179,65,.16);color:#fff}
  th,td{border-color:rgba(227,179,65,.22)}
  pre{overflow-x:auto;border-radius:10px}

  /* Homepage guide panels with legacy inline layouts */
  #guide .wrap,#landlord-guide .wrap{row-gap:28px}
  #guide img.guide-cover-card,#landlord-guide img.guide-cover-card{margin:0 auto}

  /* FAQ blocks on city pages */
  .faq details{
    background:var(--sp-panel);
    border:1px solid var(--sp-line-soft);border-radius:10px;
    padding:18px 20px;margin:0 0 12px;
  }
  .faq summary{cursor:pointer;font-weight:700;color:#fff}
  .faq details p{color:var(--sp-muted);margin-top:10px}

  /* Digital business card */
  body:has(.card-wrap) .card-wrap{box-shadow:var(--sp-shadow)}

  @media (max-width:860px){
    .g-card{grid-template-columns:96px minmax(0,1fr)}
    .g-card-img{width:96px;height:76px}
    .g-tag{grid-column:2;justify-self:start}
  }
  @media (max-width:760px){
    html{scroll-padding-top:118px}
    .wrap{padding-left:20px;padding-right:20px}
    .cover,.hero{border-radius:0}
    .ux-header-in{min-height:58px}
    .g-grid{grid-template-columns:1fr}
    .fig{padding:12px;margin-left:-4px;margin-right:-4px}
    table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  }
  @media (max-width:520px){
    .g-card{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:14px}
    .g-card-img{width:82px;height:68px}
    .cover-img,.guide-cover-card{border-radius:10px;margin-bottom:22px}
    .ux-callbar a{min-height:48px}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  }
}

@media print{
  .ux-header,.ux-callbar,.top-link,.sale-strip,.ux-skip{display:none!important}
  body{background:#fff!important;color:#111!important}
  a{color:#9a720f}
  .fig{break-inside:avoid}
}

/* ---------- Motion: one calm services ticker, nothing else ---------- */
@media screen{
  /* Hero logo sting — static frame, no float, no glow */
  .logo-frame .sting-v{
    position:relative;display:block;width:min(470px,88vw);aspect-ratio:3/2;object-fit:cover;
    border-radius:12px;background:#0a1a3a;
    box-shadow:var(--sp-shadow);
  }

  /* New-customer offer tag (sits under the hero CTAs, never over artwork) */
  .hero-offer-wrap{margin:0 0 24px}
  .hero-offer{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--sp-gold);color:#231a05;
    font-family:var(--sp-disp);font-weight:800;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;
    padding:11px 20px;border-radius:6px;
    box-shadow:0 2px 0 var(--sp-gold-deep);
  }

  /* Primary CTAs — flat gold, stamped edge (classes also styled above) */
  .btn-gold,.call-pill{position:relative}

  /* Services ticker — slow, calm marquee */
  .ticker{
    overflow:hidden;background:var(--sp-navy-deep);
    border-top:1px solid var(--sp-line-soft);border-bottom:1px solid var(--sp-line-soft);
    padding:13px 0;
  }
  .ticker-track{display:flex;width:max-content;animation:jsp-tick 55s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  .ticker-track span{
    flex:none;display:inline-flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap;
    font-family:var(--sp-disp);font-weight:600;font-size:.8rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--sp-gold-soft);
  }
  .ticker-track b{color:var(--sp-gold);font-weight:400;font-size:.72rem}
  @keyframes jsp-tick{to{transform:translateX(-50%)}}

  /* Card hover — border warms, nothing floats */
  .safe{transition:border-color .25s ease}
  .safe:hover,.svc:hover,.g-card-x:hover{
    border-color:rgba(227,179,65,.55);
  }

  /* Reveal on scroll — initial states only when JS is on (no-JS stays visible) */
  .js .rv{
    opacity:0;transform:translateY(16px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--rvd,0ms);
  }
  .js .rv.in{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
  .ticker-track{animation:none!important;transform:none!important;flex-wrap:wrap;width:auto}
}