:root{
  --bg:#071422; --surface:#0b1d31; --card:#0f2740; --text:#f7fbff; --muted:#b8c7d8;
  --orange:#ff7a1a; --blue:#1f9cff; --line:rgba(255,255,255,.13);
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --hero:url("assets/hero-night.png");
  --problem:url("assets/problem-night.png");
  --repair:url("assets/repair-night.png");
  --success:url("assets/hero-day.png");
}
body.day{
  --bg:#f4f8fc; --surface:#ffffff; --card:#ffffff; --text:#0a1a2a; --muted:#526373;
  --line:rgba(10,26,42,.12); --shadow:0 20px 50px rgba(19,51,82,.14);
  --hero:url("assets/hero-day.png");
  --problem:url("assets/problem-night.png");
  --repair:url("assets/repair-night.png");
  --success:url("assets/hero-day.png");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:var(--bg);color:var(--text);transition:background .6s,color .6s}
a{color:inherit;text-decoration:none}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:82px;display:flex;align-items:center;gap:30px;padding:0 6vw;background:rgba(5,15,26,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
body.day .site-header{background:rgba(255,255,255,.82)}
.brand{display:flex;align-items:center;gap:12px;min-width:230px}
.brand-logo{width:52px;height:52px;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12))}
.brand-mark{width:42px;height:42px;border:2px solid var(--blue);border-radius:12px;display:grid;place-items:center;color:var(--orange);font-weight:900}
.brand strong{display:block;font-size:22px;letter-spacing:1px}
.brand em{display:block;font-style:normal;color:var(--orange);font-weight:800;font-size:14px}
.brand small{font-size:10px;color:var(--muted)}
.nav{display:flex;gap:24px;align-items:center;flex:1;justify-content:center;font-weight:700;font-size:14px}
.nav a:first-child{color:var(--orange);border-bottom:2px solid var(--orange);padding-bottom:8px}
.phone-top{display:flex;flex-direction:column;text-align:right;color:var(--orange)}
.phone-top small{font-size:11px;color:var(--text);font-weight:800}
.phone-top strong{font-size:22px}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:10px}

.hero{min-height:740px;position:relative;display:grid;align-items:center;padding:120px 6vw 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(3,12,22,.92),rgba(3,12,22,.58),rgba(3,12,22,.15)),var(--hero);background-size:cover;background-position:center;transform:scale(1.04);animation:slowZoom 16s ease-in-out infinite alternate}
body.day .hero-bg{background-image:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.58),rgba(255,255,255,.1)),var(--hero)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,122,26,.25),transparent 35%)}
.hero-content{position:relative;max-width:680px}
.eyebrow{color:var(--orange);text-transform:uppercase;font-weight:900;letter-spacing:1.5px;font-size:14px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(48px,7vw,96px);line-height:.95;margin:0 0 22px;letter-spacing:1px}
h1 span,h2 span{color:var(--orange)}
.hero h1 span{display:block}
.hero-copy{font-size:22px;color:var(--muted);max-width:520px}
.hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin:30px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:4px;padding:17px 30px;text-transform:uppercase;font-weight:900;letter-spacing:.5px;min-width:170px;border:2px solid transparent}
.btn-orange{background:var(--orange);color:white}
.btn-blue{border-color:var(--blue);color:var(--text);background:rgba(31,156,255,.08)}
.quick-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:32px}
.quick-stats span{display:flex;align-items:center;gap:10px;color:var(--orange);font-size:26px}
.quick-stats b{display:block;color:var(--text);font-size:14px}
.quick-stats small{display:block;color:var(--muted);font-size:12px}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:42px;color:var(--text);animation:bounce 1.4s infinite}
section{position:relative}
.story-strip,.services,.reviews{padding:70px 6vw;background:var(--surface)}
.section-title{text-align:center;margin-bottom:34px}
.section-title small{color:var(--orange);text-transform:uppercase;font-weight:900;letter-spacing:1.3px}
.section-title h2{font-size:42px;text-transform:uppercase;margin:7px auto 0;max-width:900px}
.story-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.story-card,.service-grid article,.review-grid article,.trust-card,.contact-card,.feature-panel{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;overflow:hidden}
.story-img{height:190px;background-size:cover;background-position:center}
.problem-img{background-image:var(--problem)}
.dispatch-img{background-image:var(--problem);filter:saturate(1.2)}
.repair-img{background-image:var(--repair)}
.success-img{background-image:var(--success)}
.story-card{position:relative;padding-bottom:26px}
.story-card b{position:absolute;top:164px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:white;font-size:22px;border:4px solid var(--surface)}
.story-card h3{padding:38px 24px 0;text-transform:uppercase;margin-bottom:12px}
.story-card p{padding:0 24px;color:var(--muted);line-height:1.55}
.problem,.help,.repair,.success,.coverage{min-height:470px;padding:80px 6vw;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;border-top:1px solid var(--line);overflow:hidden}
.problem{background-image:linear-gradient(90deg,var(--bg),rgba(7,20,34,.6)),var(--problem);background-size:cover;background-position:center}
body.day .problem{background-image:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.75)),var(--problem)}
.help{background-image:linear-gradient(90deg,var(--bg),rgba(7,20,34,.3)),var(--problem);background-size:cover;background-position:center}
body.day .help{background-image:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.75)),var(--problem)}
.repair{background-image:linear-gradient(90deg,var(--bg),rgba(7,20,34,.2)),var(--repair);background-size:cover;background-position:center}
body.day .repair{background-image:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.58)),var(--repair)}
.success{background-image:linear-gradient(90deg,var(--bg),rgba(7,20,34,.12)),var(--success);background-size:cover;background-position:center}
body.day .success{background-image:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.35)),var(--success)}
.split-content{max-width:560px}
.split-content h2,.coverage h2{font-size:48px;line-height:1.05;text-transform:uppercase;margin-bottom:20px}
.split-content p,.coverage p{font-size:18px;color:var(--muted);line-height:1.6}
.orange-list,.blue-list{list-style:none;padding:0;margin:24px 0;color:var(--muted);line-height:2}
.orange-list li::before{content:"›";color:var(--orange);font-weight:900;margin-right:10px}
.blue-list li::before{content:"✓";color:var(--blue);font-weight:900;margin-right:10px}
.problem-visual{min-height:280px;position:relative}
.alert-card{position:absolute;right:8%;top:35%;display:flex;align-items:center;gap:18px;background:rgba(5,15,26,.72);border:1px solid var(--line);backdrop-filter:blur(10px);padding:26px 34px;border-radius:10px;color:white;font-weight:900;font-size:18px;box-shadow:var(--shadow);animation:pulse 1.8s infinite}
.alert-card:first-letter{color:var(--orange)}
.alert-card small{color:white}
.feature-panel{justify-self:end;width:min(360px,100%);padding:30px;color:var(--text)}
.feature-panel p{padding:18px;border-bottom:1px solid var(--line);color:var(--text)}
.feature-panel p:last-child{border:0}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.service-grid article{text-align:center;padding:36px 22px}
.service-grid i{font-size:54px;color:var(--orange);font-style:normal}
.service-grid h3{text-transform:uppercase;font-size:24px}
.service-grid p{color:var(--muted);line-height:1.5}
.service-grid a{display:inline-block;background:var(--orange);color:white;padding:12px 22px;border-radius:4px;text-transform:uppercase;font-weight:900;margin-top:12px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.review-grid article{padding:32px}
.review-grid span{font-size:58px;color:var(--blue);line-height:.5}
.review-grid p{line-height:1.7;color:var(--text)}
.review-grid b{color:#ffb020;display:block;margin:12px 0}
.review-grid small{color:var(--muted)}
.coverage{grid-template-columns:1.2fr .9fr 1fr;background:var(--surface)}
.trust-card,.contact-card{padding:34px;text-align:left}
.trust-card{font-size:34px;color:var(--blue)}
.trust-card h3{font-size:30px;text-transform:uppercase;color:var(--text)}
.contact-card .btn{width:100%;margin-top:12px}
.footer{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:30px;padding:55px 6vw 35px;background:#06111d;color:white;border-top:1px solid var(--line)}
.footer a{display:block;color:#b8c7d8;margin:10px 0}
.footer h4{text-transform:uppercase;color:white}
.copyright{grid-column:1/-1;text-align:center;color:#8193a6;border-top:1px solid rgba(255,255,255,.13);padding-top:24px;margin:0}
.section-reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.section-reveal.visible{opacity:1;transform:none}
@keyframes slowZoom{from{transform:scale(1.02)}to{transform:scale(1.08)}}
@keyframes bounce{50%{transform:translate(-50%,8px)}}
@keyframes pulse{50%{box-shadow:0 0 40px rgba(255,122,26,.35)}}
@media(max-width:900px){
  .nav,.phone-top{display:none}.menu-btn{display:block;margin-left:auto}
  .site-header{padding:0 22px}
  .hero{min-height:720px;padding:110px 24px 70px}
  .story-grid,.service-grid,.review-grid,.coverage,.problem,.help,.repair,.success{grid-template-columns:1fr}
  .section-title h2,.split-content h2,.coverage h2{font-size:34px}
  .footer{grid-template-columns:1fr}
}

/* =========================================================
   MOBILE POLISH ONLY — desktop stays the same
   ========================================================= */
@media (max-width: 900px) {
  .site-header {
    height: 88px;
    padding: 10px 18px;
    gap: 12px;
    align-items: center;
  }

  .brand {
    min-width: 0;
    gap: 10px;
    flex: 1;
  }

  .brand-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
  }

  .brand strong {
    font-size: 25px;
    line-height: 1;
    letter-spacing: 3px;
  }

  .brand em {
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: 2px;
  }

  .brand small {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--muted);
  }

  .menu-btn {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 22px;
    background: rgba(255,255,255,.04);
  }

  .hero {
    min-height: auto;
    padding: 150px 22px 72px;
    display: block;
  }

  .hero-bg {
    background-position: 62% center;
    transform: scale(1.01);
    animation: none;
  }

  .hero-content {
    max-width: 100%;
  }

  .eyebrow {
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 3px;
    margin-bottom: 28px;
  }

  h1 {
    font-size: clamp(52px, 14vw, 76px);
    line-height: .98;
    letter-spacing: 2px;
    margin-bottom: 28px;
  }

  .hero-copy {
    font-size: 23px;
    line-height: 1.45;
    max-width: 100%;
    margin-bottom: 28px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 28px 0 34px;
  }

  .btn {
    width: 100%;
    min-height: 70px;
    border-radius: 8px;
    font-size: 18px;
    letter-spacing: 2px;
  }

  .quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
    margin-top: 26px;
  }

  .quick-stats span {
    gap: 12px;
    font-size: 24px;
  }

  .quick-stats b {
    font-size: 17px;
    letter-spacing: .4px;
  }

  .quick-stats small {
    font-size: 16px;
  }

  .scroll-cue {
    bottom: 18px;
    font-size: 44px;
  }.story-strip,
  .services,
  .reviews {
    padding: 52px 20px;
  }

  .section-title {
    margin-bottom: 28px;
  }

  .section-title small {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .section-title h2,
  .split-content h2,
  .coverage h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  .story-grid,
  .service-grid,
  .review-grid {
    gap: 18px;
  }

  .story-card {
    border-radius: 16px;
  }

  .story-img {
    height: 210px;
  }

  .story-card b {
    top: 184px;
  }

  .story-card h3 {
    font-size: 23px;
  }

  .story-card p {
    font-size: 17px;
  }

  .problem,
  .help,
  .repair,
  .success,
  .coverage {
    min-height: auto;
    padding: 58px 22px;
    gap: 26px;
  }

  .problem,
  .help,
  .repair,
  .success {
    background-position: 65% center;
  }

  .split-content p,
  .coverage p {
    font-size: 18px;
  }

  .orange-list,
  .blue-list {
    font-size: 17px;
  }

  .problem-visual {
    min-height: 150px;
  }

  .alert-card {
    position: static;
    width: 100%;
    justify-content: center;
    padding: 22px;
    font-size: 17px;
  }

  .feature-panel {
    width: 100%;
    justify-self: stretch;
    border-radius: 16px;
  }

  .service-grid article,
  .review-grid article,
  .trust-card,
  .contact-card {
    border-radius: 16px;
  }

  .service-grid article {
    padding: 30px 22px;
  }

  .service-grid h3 {
    font-size: 25px;
  }

  .service-grid p {
    font-size: 17px;
  }

  .review-grid article {
    padding: 28px;
  }

  .review-grid p {
    font-size: 17px;
  }

  .coverage {
    grid-template-columns: 1fr;
  }

  .contact-card {
    text-align: center;
  }

  .footer {
    padding: 44px 22px 28px;
    gap: 22px;
  }

  .footer .brand-logo {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 480px) {
  .site-header {
    height: 82px;
    padding: 8px 14px;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .brand strong {
    font-size: 22px;
    letter-spacing: 2px;
  }

  .brand em {
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  .brand small {
    font-size: 12px;
    margin-top: 4px;
  }

  .menu-btn {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  .hero {
    padding: 128px 18px 68px;
  }

  h1 {
    font-size: clamp(46px, 14vw, 64px);
  }

  .hero-copy {
    font-size: 20px;
  }

  .quick-stats {
    grid-template-columns: 1fr;
  }

  .quick-stats span {
    align-items: flex-start;
  }

  .btn {
    min-height: 64px;
    font-size: 16px;
  }

  .section-title h2,
  .split-content h2,
  .coverage h2 {
    font-size: 30px;
  }

  .story-img {
    height: 185px;
  }

  .story-card b {
    top: 159px;
  }
}


/* Hide time-of-day badge; auto day/night theme still works */
.theme-pill{display:none!important}