:root{
  --navy:#12294d; --navy2:#1c3a66; --ink:#15202e; --slate:#5a6b80;
  --red:#d62828; --red2:#e63a3a; --sky:#eef4fb; --sky2:#f6f9fd;
  --line:#e2e9f2; --white:#fff; --gold:#f4a300;
  --shadow:0 18px 46px rgba(18,41,77,.10); --shadow-sm:0 8px 22px rgba(18,41,77,.08);
  --font-h:'Barlow Condensed',sans-serif; --font-b:'Inter',sans-serif;
  --wrap:1160px; --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:700;line-height:1.05;color:var(--navy);text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
.red{color:var(--red)}
.kicker{display:inline-block;font-family:var(--font-h);font-weight:600;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.lead{color:var(--slate);font-size:1.1rem;max-width:640px}
.center{text-align:center}.center .lead{margin:0 auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-h);font-weight:600;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;padding:13px 28px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:.18s}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(214,40,40,.28)}
.btn-red:hover{background:var(--red2);transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy2);transform:translateY(-2px)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-block{width:100%}

/* Top bar */
.topbar{background:var(--navy);color:#c9d8ec;font-size:.85rem}
.topbar-in{display:flex;justify-content:space-between;padding:8px 22px;flex-wrap:wrap;gap:6px}
.topbar a{color:#fff;font-weight:600}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:104px;height:104px;object-fit:contain;transition:.2s;filter:drop-shadow(0 2px 6px rgba(18,41,77,.18))}
.brand:hover img{transform:scale(1.05)}
.links{display:flex;gap:26px;font-family:var(--font-h);font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em}
.links a{color:var(--navy);padding:6px 0;position:relative}
.links a:hover{color:var(--red)}
.nav-cta{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;background:none;border:0;font-size:1.6rem;color:var(--navy);cursor:pointer}

/* Hero */
.hero{background:linear-gradient(180deg,var(--sky2),#fff);padding:60px 0 70px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 15px;font-size:.82rem;font-weight:600;color:var(--navy);box-shadow:var(--shadow-sm)}
.hero p{margin:18px 0 26px;color:var(--slate);font-size:1.14rem;max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.hero-trust{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--slate)}
.stars{color:var(--gold);letter-spacing:1px}
.hero-visual{position:relative}
.hero-visual img{border-radius:20px;box-shadow:var(--shadow);width:100%}
.hero-tag{position:absolute;left:-16px;bottom:22px;background:var(--red);color:#fff;font-family:var(--font-h);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:12px 20px;border-radius:12px;box-shadow:var(--shadow);font-size:1.05rem}

/* Trust strip */
.strip{background:var(--navy);color:#fff}
.strip-in{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;padding:26px 22px;text-align:center}
.strip b{display:block;font-family:var(--font-h);font-size:1.5rem}
.strip span{color:#a9c1e0;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}

/* Sections */
.section{padding:78px 0}
.section.sky{background:var(--sky2)}
.section-head{max-width:680px;margin-bottom:12px}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.svc-img{height:180px;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-ic{width:52px;height:52px;border-radius:12px;background:#fdeaea;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:-40px 0 12px 20px;position:relative;border:1px solid #f6d4d4;background-clip:padding-box}
.svc-body{padding:0 22px 24px}
.svc-body h3{font-size:1.35rem;margin-bottom:8px}
.svc-body p{color:var(--slate);font-size:.94rem}

/* Split (about the owner) */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.split-media{position:relative}
.split-media img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.checklist{list-style:none;margin-top:20px}
.checklist li{padding:10px 0 10px 34px;position:relative;border-bottom:1px solid var(--line);color:var(--ink)}
.checklist li:last-child{border:0}
.checklist li::before{content:"✓";position:absolute;left:0;top:9px;width:22px;height:22px;background:var(--red);color:#fff;border-radius:50%;font-size:.72rem;display:flex;align-items:center;justify-content:center;font-weight:700}

/* Why cards */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}
.why-card .ic{font-size:1.9rem;margin-bottom:12px}
.why-card h3{font-size:1.3rem;margin-bottom:8px}
.why-card p{color:var(--slate);font-size:.94rem}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);position:relative}
.step .sn{width:44px;height:44px;border-radius:10px;background:var(--navy);color:#fff;font-family:var(--font-h);font-weight:700;font-size:1.3rem;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:1.2rem;margin-bottom:6px}
.step p{color:var(--slate);font-size:.9rem}

/* CTA banner */
.cta{position:relative;border-radius:22px;overflow:hidden;padding:56px;text-align:center;color:#fff;background:linear-gradient(120deg,var(--navy),var(--navy2))}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:#c9d8ec;max-width:560px;margin:0 auto 24px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Contact */
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.contact-list{list-style:none;margin-top:20px}
.contact-list li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--slate);display:flex;gap:10px}
.contact-list a{color:var(--navy);font-weight:600}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.form-card .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-card label{display:block;font-size:.82rem;color:var(--slate);font-weight:500;margin-bottom:14px}
.form-card input,.form-card textarea{width:100%;margin-top:6px;padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:#fbfdff;font-family:inherit;font-size:.95rem;color:var(--ink)}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--red);background:#fff}
.form-note{font-size:.82rem;color:var(--slate);text-align:center;margin-top:12px}

/* Footer */
.foot{background:var(--navy);color:#c9d8ec;padding:52px 0 0}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.foot-brand img{width:110px;margin-bottom:14px}
.foot-brand p{color:#a9c1e0;font-size:.92rem;max-width:340px}
.foot-col h4{color:#fff;margin-bottom:14px;font-family:var(--font-h);font-size:1.2rem;letter-spacing:.04em}
.foot-col a,.foot-col span{display:block;color:#a9c1e0;padding:5px 0;font-size:.92rem}
.foot-col a:hover{color:#fff}
.foot-bottom{text-align:center;color:#7ea6d4;font-size:.82rem;padding:22px;margin-top:38px;border-top:1px solid #ffffff1a}

/* FAB */
.fab{position:fixed;bottom:20px;right:20px;background:var(--red);color:#fff;font-family:var(--font-h);font-weight:600;font-size:1.05rem;text-transform:uppercase;padding:13px 22px;border-radius:100px;box-shadow:0 10px 26px rgba(214,40,40,.4);z-index:60;display:none}

@media(max-width:930px){
  .hero-in,.split,.contact-in{grid-template-columns:1fr}
  .services,.why{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:8px 22px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;gap:0}
  .links.open{display:flex}.links a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}.nav-cta .btn-phone{display:none}
}
@media(max-width:560px){
  .services,.why,.steps,.form-card .row{grid-template-columns:1fr}
  .fab{display:inline-flex}.foot-in{grid-template-columns:1fr}.cta{padding:34px 22px}
}

/* ===== PRELOADER ===== */
#preloader{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 42%, #10151c 0%, #05080d 70%, #000 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .6s ease,visibility .6s ease}
#preloader.done{opacity:0;visibility:hidden}
.pl-logo{width:min(440px,80vw);filter:drop-shadow(0 12px 40px rgba(0,0,0,.6));animation:plZoom 2s ease-in-out infinite alternate}
.pl-bar{width:min(260px,55vw);height:4px;background:#ffffff1f;border-radius:4px;overflow:hidden}
.pl-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--red),#ff6b6b);border-radius:4px;animation:plLoad 1.3s ease-in-out infinite}
.pl-txt{font-family:var(--font-h);font-weight:600;letter-spacing:.34em;text-transform:uppercase;font-size:.78rem;color:#c9d8ec}
@keyframes plLoad{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes plZoom{from{transform:scale(.97)}to{transform:scale(1.03)}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.pl-logo{animation:none}}


/* ===== WATERMARK BACKGROUNDS ===== */
body{
  background-color:var(--white);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%3E%3Ccircle%20cx%3D%272%27%20cy%3D%272%27%20r%3D%271.4%27%20fill%3D%27%2312294d%27%20fill-opacity%3D%270.06%27%2F%3E%3C%2Fsvg%3E");
  background-attachment:fixed;
}
/* white sections get the diagonal wordmark; sky sections get dot+hail depth */
.section{position:relative;overflow:hidden}
.section:not(.sky)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27620%27%20height%3D%27340%27%20viewBox%3D%270%200%20620%20340%27%3E%20%3Cg%20fill%3D%27%2312294d%27%20fill-opacity%3D%270.035%27%20font-family%3D%27Arial%20Black%2C%20Arial%2C%20sans-serif%27%20font-weight%3D%27800%27%20font-size%3D%2726%27%20letter-spacing%3D%272%27%3E%20%3Ctext%20x%3D%2710%27%20y%3D%2760%27%20transform%3D%27rotate%28-16%2010%2060%29%27%3EPRO%20AUTO%20HAIL%20REPAIR%3C%2Ftext%3E%20%3Ctext%20x%3D%27-220%27%20y%3D%27210%27%20transform%3D%27rotate%28-16%20-220%20210%29%27%3EPRO%20AUTO%20HAIL%20REPAIR%3C%2Ftext%3E%20%3Ctext%20x%3D%27260%27%20y%3D%27210%27%20transform%3D%27rotate%28-16%20260%20210%29%27%3EPRO%20AUTO%20HAIL%20REPAIR%3C%2Ftext%3E%20%3Ctext%20x%3D%2730%27%20y%3D%27320%27%20transform%3D%27rotate%28-16%2030%20320%29%27%3EPRO%20AUTO%20HAIL%20REPAIR%3C%2Ftext%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");background-size:620px auto;opacity:.9;
}
.section.sky{
  background-color:var(--sky2);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2790%27%20height%3D%2790%27%3E%3Cg%20stroke%3D%27%2312294d%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%3E%3Cline%20x1%3D%2714%27%20y1%3D%278%27%20x2%3D%279%27%20y2%3D%2722%27%2F%3E%3Cline%20x1%3D%2746%27%20y1%3D%2720%27%20x2%3D%2741%27%20y2%3D%2734%27%2F%3E%3Cline%20x1%3D%2774%27%20y1%3D%2710%27%20x2%3D%2769%27%20y2%3D%2724%27%2F%3E%3Cline%20x1%3D%2728%27%20y1%3D%2750%27%20x2%3D%2723%27%20y2%3D%2764%27%2F%3E%3Cline%20x1%3D%2760%27%20y1%3D%2758%27%20x2%3D%2755%27%20y2%3D%2772%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%3E%3Ccircle%20cx%3D%272%27%20cy%3D%272%27%20r%3D%271.4%27%20fill%3D%27%2312294d%27%20fill-opacity%3D%270.06%27%2F%3E%3C%2Fsvg%3E");
  background-attachment:fixed;
}
.section .wrap{position:relative;z-index:1}

/* big faint ghost logo behind select sections */
.wm-ghost::after{
  content:"";position:absolute;right:-160px;top:50%;transform:translateY(-50%);
  width:620px;height:620px;background:url("assets/logo-ghost.png") center/contain no-repeat;
  opacity:.05;z-index:0;pointer-events:none;
}
.wm-ghost.left::after{right:auto;left:-180px}

/* soft accent orbs to add colour/life to white space */
.orb{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}
.orb.red{background:rgba(214,40,40,.10)}
.orb.navy{background:rgba(28,58,102,.10)}

/* hero gets a subtle animated texture too */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%3E%3Ccircle%20cx%3D%272%27%20cy%3D%272%27%20r%3D%271.4%27%20fill%3D%27%2312294d%27%20fill-opacity%3D%270.06%27%2F%3E%3C%2Fsvg%3E");opacity:.6;pointer-events:none}
.hero .wrap{position:relative;z-index:1}

/* ===== INTERACTIVITY / MICRO-ANIMATIONS ===== */
.badge{transition:.2s}
.badge:hover{transform:translateY(-3px);border-color:var(--red);color:var(--red)}
.strip div{transition:.2s}
.strip div:hover{transform:translateY(-4px)}
.strip b{transition:.2s}
.strip div:hover b{color:#ff8a8a}
.contact-list li{transition:.18s;border-radius:8px}
.contact-list li:hover{background:#fff;transform:translateX(4px);padding-left:8px;box-shadow:var(--shadow-sm)}
.checklist li{transition:.18s}
.checklist li:hover{color:var(--red)}
.svc-ic,.why-card .ic{transition:transform .25s}
.svc:hover .svc-ic{transform:rotate(-8deg) scale(1.08)}
.why-card:hover .ic{transform:scale(1.15)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:.5s}
.btn:hover::after{left:140%}
.step{transition:transform .2s, box-shadow .2s}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.step:hover .sn{background:var(--red)}

/* back-to-top button */
#toTop{position:fixed;bottom:20px;left:20px;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:0;font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.25s;z-index:60}
#toTop.show{opacity:1;visibility:visible}
#toTop:hover{background:var(--red);transform:translateY(-3px)}

/* nav shadow on scroll */
.nav.scrolled{box-shadow:0 6px 20px rgba(18,41,77,.10)}