:root{
  --navy:#0a1a33; --navy-2:#11264a; --navy-3:#1a3563;
  --sun:#f8c52a; --sun-2:#ffd64d; --ink:#0a1a33;
  --paper:#f5f3ee; --line:rgba(255,255,255,.12);
  --display:'Archivo',sans-serif; --body:'Figtree',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--body);color:#fff;background:var(--navy);-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.disp{font-family:var(--display);font-stretch:112%;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.eyebrow{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sun)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-stretch:110%;font-weight:800;text-transform:uppercase;letter-spacing:.02em;border-radius:12px;padding:18px 26px;font-size:16px;cursor:pointer;border:0;transition:transform .15s,background .15s,box-shadow .15s;min-height:56px}
.btn-sun{background:var(--sun);color:var(--navy);box-shadow:0 8px 24px -8px rgba(248,197,42,.6)}
.btn-sun:hover{background:var(--sun-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3)}
.btn-ghost:hover{border-color:#fff}
.btn svg{width:18px;height:18px;flex:none}
.btn[disabled]{opacity:.72;cursor:progress;transform:none}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(10,26,51,.3);border-top-color:var(--navy);animation:sg-spin .7s linear infinite;flex:none}
@keyframes sg-spin{to{transform:rotate(360deg)}}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(10,26,51,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
/* The supplied wordmark already contains the emblem, so it renders as one image. */
.logo{display:flex;align-items:center}
.logo img{width:200px;height:auto;flex:none}
footer .logo img{width:250px}
.hdr-r{display:flex;align-items:center;gap:20px}
.hdr-phone{font-family:var(--display);font-stretch:110%;font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px}
.hdr-phone svg{width:16px;height:16px;color:var(--sun)}
.hdr .btn{padding:12px 18px;min-height:44px;font-size:14px}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 500px at 85% 20%, rgba(248,197,42,.14), transparent 60%),
  linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:72px 0 64px}
.badge{display:inline-flex;align-items:center;gap:10px;background:var(--sun);color:var(--navy);padding:8px 14px 8px 12px;border-radius:8px;font-family:var(--display);font-stretch:118%;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-1.5deg)}
.badge svg{width:14px;height:16px}
.hero h1{font-size:clamp(46px,6.4vw,84px);margin:22px 0 22px}
.hero h1 em{font-style:normal;color:var(--sun);display:block}
.hero p.lead{font-size:clamp(17px,1.5vw,20px);color:rgba(255,255,255,.82);max-width:30ch;text-wrap:pretty}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-img{position:relative}
.hero-img img{width:100%;border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);aspect-ratio:1.14;object-fit:cover}
.hero-img .tag{position:absolute;left:-18px;bottom:28px;background:#fff;color:var(--navy);border-radius:14px;padding:14px 18px;box-shadow:0 20px 40px -10px rgba(0,0,0,.5)}
.hero-img .tag small{display:block;font-size:12px;font-weight:600;opacity:.6;text-transform:uppercase;letter-spacing:.08em}
.hero-img .tag b{font-family:var(--display);font-stretch:112%;font-weight:900;font-size:26px;line-height:1.1}

/* features */
.feats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--navy)}
.feats ul{list-style:none;display:grid;grid-template-columns:repeat(8,1fr)}
.feats li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 8px;font-size:13px;font-weight:600;line-height:1.25;color:rgba(255,255,255,.88)}
.feats li+li{border-left:1px solid var(--line)}
.feats svg{width:30px;height:30px;color:var(--sun)}

/* packages */
.pk-sec{background:var(--paper);color:var(--ink);padding:96px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(34px,4.4vw,56px);margin-top:12px}
.sec-head p{margin-top:14px;font-size:18px;color:rgba(10,26,51,.7)}
.pk-sec .eyebrow{color:#b88a00}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.pk{background:#fff;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(10,26,51,.06),0 20px 50px -24px rgba(10,26,51,.25);border:2px solid transparent;position:relative;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.pk.feat{box-shadow:0 1px 0 rgba(10,26,51,.06),0 26px 60px -24px rgba(10,26,51,.32)}
/* Yellow highlight appears on hover / keyboard focus, and stays on the chosen
   package. It is never shown in the resting state. */
.pk:hover,.pk:focus-within,.pk.sel{border-color:var(--sun);transform:translateY(-2px);box-shadow:0 1px 0 rgba(10,26,51,.06),0 26px 60px -20px rgba(10,26,51,.34),0 0 0 4px rgba(248,197,42,.16)}
/* The badge sits in normal flow beside the name, so it can never overlap it. */
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pk-flag{background:var(--navy);color:var(--sun);font-family:var(--display);font-stretch:118%;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:6px;white-space:nowrap;flex:none}
.pk-top{padding:30px 32px 0}
.pk-name{font-size:30px}
.pk-name span{color:#c99a00}
.pk-sub{font-size:16px;color:rgba(10,26,51,.65);margin-top:8px;font-weight:500}
.pk-kit{margin:22px 20px 0;background:linear-gradient(180deg,#fafaf8,#eeede8);border-radius:16px;padding:14px;display:flex;align-items:center;justify-content:center;min-height:170px}
.pk-kit img{max-height:180px;width:auto;mix-blend-mode:multiply}
.pk-body{padding:26px 32px 32px;display:flex;flex-direction:column;flex:1}
.price{display:flex;align-items:baseline;gap:12px;padding-bottom:22px;border-bottom:1px dashed rgba(10,26,51,.18);flex-wrap:wrap}
.price b{font-family:var(--display);font-stretch:108%;font-weight:900;font-size:64px;line-height:1;letter-spacing:-.02em}
/* flex:none stops the badge being squeezed; wrap is the last-resort guard so the
   word "Installed" can never be clipped mid-word by the card's overflow:hidden. */
.price span{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;background:var(--sun);padding:5px 9px;border-radius:5px;flex:none}
.inc{list-style:none;margin:22px 0 28px;display:grid;gap:12px;flex:1}
.inc li{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:500}
.inc li svg{flex:none;width:22px;height:22px;margin-top:1px}
.pk .btn{width:100%}
.pk-note{text-align:center;margin-top:32px;font-size:16px;color:rgba(10,26,51,.7)}
.pk-note a{font-weight:700;color:var(--ink);border-bottom:2px solid var(--sun)}

/* why it works — proof section */
.why-sec{background:#fff;color:var(--ink);border-top:1px solid rgba(10,26,51,.08);padding:88px 0}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.why article{background:var(--paper);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.why img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.why-b{padding:20px 20px 22px}
.why-b h3{font-family:var(--display);font-stretch:110%;font-weight:900;text-transform:uppercase;font-size:19px;line-height:1.1}
.why-b p{margin-top:9px;font-size:15px;line-height:1.5;color:rgba(10,26,51,.68)}

/* coverage */
.cov{padding:88px 0 0;background:var(--navy)}
.cov .sec-head p{color:rgba(255,255,255,.72)}
.cov-strip{border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cov-strip img{width:100%}
.who{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-radius:18px;overflow:hidden;margin-top:40px;border:1px solid var(--line)}
.who div{background:var(--navy-2);padding:24px 20px;display:flex;flex-direction:column;gap:6px}
.who svg{width:28px;height:28px;color:var(--sun);margin-bottom:6px}
.who b{font-weight:700;font-size:16px}
.who span{font-size:14px;color:rgba(255,255,255,.65)}

/* booking */
.book{padding:96px 0 110px;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%)}
/* min-width:0 lets the form shrink to the container instead of being forced
   wider by its own min-content (the two-up package picker). Without it the
   card overhangs the right edge of the viewport on phones. */
.book-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;min-width:0}
/* Grid items default to min-width:auto, which means the form was sized by its own
   min-content (364px) and overhung the 354px container. This lets it shrink to fit. */
.book-grid>*{min-width:0}
.book h2{font-size:clamp(38px,4.8vw,62px);margin:14px 0 20px}
.book h2 em{font-style:normal;color:var(--sun)}
.book-l p{font-size:18px;color:rgba(255,255,255,.8);max-width:36ch}
.steps{list-style:none;margin:34px 0;display:grid;gap:18px;counter-reset:s}
.steps li{display:flex;gap:16px;align-items:flex-start;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;background:rgba(248,197,42,.14);color:var(--sun);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:16px;border:1px solid rgba(248,197,42,.4)}
.steps b{display:block;font-size:17px}
.steps span{font-size:15px;color:rgba(255,255,255,.65)}
.call-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);transition:background .15s}
.call-card:hover{background:rgba(255,255,255,.08)}
.call-card .ic{width:48px;height:48px;border-radius:12px;background:var(--sun);color:var(--navy);display:grid;place-items:center;flex:none}
.call-card .ic svg{width:22px;height:22px}
.call-card small{display:block;font-size:13px;color:rgba(255,255,255,.6);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.call-card b{font-family:var(--display);font-stretch:110%;font-weight:900;font-size:26px}

form.card{background:#fff;color:var(--ink);border-radius:24px;padding:36px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.form-h{font-family:var(--display);font-stretch:112%;font-weight:900;text-transform:uppercase;font-size:24px;line-height:1}
.form-s{font-size:15px;color:rgba(10,26,51,.6);margin:8px 0 24px}
.lbl{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;color:rgba(10,26,51,.75)}
.pk-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;min-width:0}
.pk-pick>label{min-width:0}
.pk-pick .opt{min-width:0}
.pk-pick label{cursor:pointer}
.pk-pick input{position:absolute;opacity:0;pointer-events:none}
.pk-pick .opt{border:2px solid #e2e0da;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;transition:border-color .15s,background .15s}
.pk-pick .opt b{font-family:var(--display);font-stretch:112%;font-weight:900;text-transform:uppercase;font-size:17px}
.pk-pick .opt span{font-size:14px;color:rgba(10,26,51,.65);font-weight:600}
.pk-pick input:checked+.opt{border-color:var(--navy);background:#fff9e3;box-shadow:inset 0 0 0 1px var(--navy)}
.pk-pick input:focus-visible+.opt{outline:3px solid var(--sun);outline-offset:2px}
.pk-pick .full{grid-column:1/-1}
.pk-pick .full .opt{flex-direction:row;align-items:center;justify-content:center;padding:11px 16px}
.pk-pick .full .opt span{font-size:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:16px}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);padding:14px 16px;border:2px solid #e2e0da;border-radius:12px;background:#fff;min-height:52px;transition:border-color .15s}
.fld textarea{min-height:88px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--navy)}
.fld .err{display:none;color:#c0392b;font-size:13px;font-weight:600;margin-top:6px}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#c0392b}
.fld.bad .err{display:block}
form .btn{width:100%;margin-top:6px;font-size:17px}
.fine{font-size:13px;color:rgba(10,26,51,.55);text-align:center;margin-top:14px}
.fine a{font-weight:700;color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;background:#fdecea;border:1px solid #f3c2bb;color:#c0392b;font-size:14px;font-weight:600}
.form-err.show{display:block}
.ok{display:none;text-align:center;padding:30px 6px}
.ok .check{width:72px;height:72px;border-radius:50%;background:var(--sun);display:grid;place-items:center;margin:0 auto 20px}
.ok .check svg{width:34px;height:34px}
.ok h3{font-family:var(--display);font-stretch:112%;font-weight:900;text-transform:uppercase;font-size:30px;line-height:1}
.ok p{margin-top:12px;color:rgba(10,26,51,.7);font-size:16px}
.ok a.btn{margin-top:22px}
form.done .fields{display:none}
form.done .ok{display:block}

footer{background:#06111f;padding:40px 0 40px;font-size:14px;color:rgba(255,255,255,.6)}
.ftr{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ftr a{color:#fff;font-weight:700}

/* mobile sticky bar */
.mbar{display:none}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:44px 0 48px}
  .hero-img .tag{left:14px;bottom:14px}
  .feats ul{grid-template-columns:repeat(4,1fr)}
  .feats li:nth-child(5){border-left:0}
  .feats li:nth-child(n+5){border-top:1px solid var(--line)}
  .pk-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .why{grid-template-columns:1fr 1fr;gap:20px}
  .who{grid-template-columns:1fr 1fr}
  .who div:last-child{grid-column:1/-1}
  .book-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .hdr{height:62px}
  .hdr-phone,.hdr .btn{display:none}
  .logo img{width:156px}
  .hero h1{margin:18px 0 16px}
  .hero-ctas{display:none}
  .hero-img{order:-1}
  .hero-img img{border-radius:16px}
  .hero-img .tag{padding:10px 14px}
  .hero-img .tag b{font-size:20px}
  .feats li{padding:18px 4px;font-size:11.5px}
  .feats svg{width:24px;height:24px}
  .pk-sec,.book{padding:64px 0 72px}
  .cov{padding:64px 0 0}
  /* Compact horizontal cards keep the extra proof section short on phones. */
  .why-sec{padding:64px 0}
  .why{grid-template-columns:1fr;gap:14px}
  .why article{display:grid;grid-template-columns:110px 1fr;align-items:center}
  .why img{height:110px;aspect-ratio:auto}
  .why-b{padding:14px 16px}
  .sec-head{margin-bottom:34px}
  .pk-top{padding:24px 22px 0}
  .pk-kit{margin:18px 14px 0;min-height:0}
  .pk-body{padding:22px 22px 24px}
  .cov-strip{border-radius:14px;margin:0 -6px}
  .who div{padding:18px 16px}
  form.card{padding:24px 20px;border-radius:20px}
  .row{grid-template-columns:1fr;gap:0}
  /* Package-picker labels. The two option boxes are only ~152px wide on a phone
     (the form is ~314px wide and they sit two-up), so at the desktop 17px the
     word "WATCHDOG" alone measured 121px against 120px of usable width — it ran
     into both borders and wrapped to two lines.
     The usable width is ~50vw - 75px and "Watchdog 2" needs ~8.3px per font-px,
     so this formula holds the label inside the box with roughly 14px of
     breathing room at every width from 360px up. Sizing the container and
     expressing the label in em keeps the name/price hierarchy proportional. */
  .pk-pick .opt{font-size:clamp(10px,calc(6vw - 10.5px),17px)}
  .pk-pick .opt b{font-size:1em}
  .pk-pick .opt span{font-size:.85em}
  /* Keeps the price and the "INSTALLED" badge on one line at phone widths.
     Without this the badge was clipped mid-word by the card's overflow:hidden. */
  .price b{font-size:44px}
  .price span{font-size:11px;letter-spacing:.1em;padding:4px 8px}
  body{padding-bottom:84px}
  .mbar{display:grid;grid-template-columns:auto 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(6,17,31,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);align-items:center}
  .mbar-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-stretch:110%;font-weight:800;font-size:15.5px;color:#fff;min-height:54px;padding:0 2px;white-space:nowrap}
  .mbar-phone svg{width:17px;height:17px;color:var(--sun);flex:none}
  .mbar .btn{min-height:54px;padding:14px 16px;font-size:15px}
  /* Same yellow glow as the desktop button, biased upward so it reads clearly
     above the bar instead of being cut off by the bottom of the screen. */
  .mbar .btn-sun{box-shadow:0 -3px 22px -4px rgba(248,197,42,.55),0 8px 24px -8px rgba(248,197,42,.6)}
}