:root{
  --ink:#E8EEF7; --muted:#93A3BA; --line:#26364D; --paper:#0C1624; --wash:#131F31; --field:#1B2A40;
  --blue:#6FB0FF; --blue-dk:#9CCBFF; --char:#34373C; --bad:#F08275; --good:#5CC590;
  --w1:#F28A1E; --w2:#2E9B4F; --w3:#2F7FD6; --w4:#9A5B2B;
  --f-head:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
a:hover{color:var(--blue-dk)}
:focus-visible{outline:3px solid var(--w3);outline-offset:3px;border-radius:3px}
img{max-width:100%;height:auto}

/* the cable run: four strands down the left edge */
.run{position:absolute;left:clamp(10px,2.4vw,34px);top:0;bottom:0;width:22px;display:flex;gap:4px;pointer-events:none}
.run i{flex:1;border-radius:3px;transform-origin:top;animation:lay 1.5s cubic-bezier(.2,.7,.2,1) both}
.run i:nth-child(1){background:var(--w1);animation-delay:.05s}
.run i:nth-child(2){background:var(--w2);animation-delay:.18s}
.run i:nth-child(3){background:var(--w3);animation-delay:.31s}
.run i:nth-child(4){background:var(--w4);animation-delay:.44s}
@keyframes lay{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.page{position:relative;overflow:hidden}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px 0 clamp(52px,9vw,96px)}

header.top{padding:22px 0 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.logo img{display:block;width:150px}
nav.links{display:flex;gap:22px;flex-wrap:wrap;font:600 16px var(--f-head)}
nav.links a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav.links a:hover{border-color:var(--w1);color:var(--ink)}

.hero{padding:clamp(40px,8vw,84px) 0 clamp(40px,7vw,72px)}
.hero h1{font:800 clamp(38px,6.4vw,68px)/1.02 var(--f-head);font-stretch:108%;letter-spacing:-.02em;margin:0 0 22px;max-width:15em;color:var(--ink)}
.hero p.lead{font-size:clamp(19px,2.2vw,22px);max-width:34em;color:var(--muted);margin:0 0 30px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;font:700 17px var(--f-head);padding:14px 24px;border-radius:6px;text-decoration:none;border:2px solid var(--blue)}
.btn.solid{background:var(--blue);color:#07182E}
.btn.solid:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#07182E}
.btn.line{background:transparent;color:var(--blue)}
.btn.line:hover{background:var(--blue);color:#07182E}

section{padding:clamp(36px,6vw,64px) 0;border-top:1px solid var(--line)}
section h2{font:800 clamp(28px,4vw,38px)/1.1 var(--f-head);font-stretch:106%;letter-spacing:-.015em;margin:0 0 8px}
section .sub{color:var(--muted);max-width:36em;margin:0 0 28px}

/* services as plain rows, no cards */
.svc{margin:0;padding:0;list-style:none}
.svc li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:6px 36px;padding:16px 0;border-bottom:1px solid var(--line)}
.svc li:first-child{border-top:1px solid var(--line)}
.svc b{font:700 20px/1.25 var(--f-head)}
.svc span{color:var(--muted)}

/* steps: a real sequence */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.steps li{counter-increment:s;padding-top:14px;border-top:4px solid var(--blue)}
.steps li:nth-child(1){border-color:var(--w1)}.steps li:nth-child(2){border-color:var(--w2)}.steps li:nth-child(3){border-color:var(--w3)}.steps li:nth-child(4){border-color:var(--w4)}
.steps li::before{content:counter(s);font:800 15px var(--f-head);color:var(--muted);display:block;margin-bottom:4px}
.steps b{font:700 19px/1.25 var(--f-head);display:block;margin-bottom:4px}
.steps span{color:var(--muted);font-size:17px}

.warranty{background:var(--wash);border-top:0}
.warranty .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.warranty strong{font:800 clamp(34px,5vw,48px)/1 var(--f-head);font-stretch:108%;color:var(--blue);display:block;margin-bottom:6px}
.warranty p{margin:0;color:var(--muted)}
.fine{font-size:15px;color:var(--muted);margin-top:18px;max-width:46em}

.contact h2{margin-bottom:14px}
.contact dl{display:grid;grid-template-columns:8em minmax(0,1fr);gap:8px 20px;margin:20px 0 26px;font-size:20px}
.contact dt{color:var(--muted);font-size:17px;padding-top:2px}
.contact dd{margin:0;font-weight:600}
.contact dd a{color:var(--ink)}

footer{border-top:1px solid var(--line);padding:28px 0 44px;font-size:15px;color:var(--muted)}
footer p{margin:0 0 10px;max-width:56em}
footer a{color:var(--muted)}

/* legal pages */
.legal{padding:32px 0 56px;max-width:44em}
.legal h1{font:800 clamp(30px,4.6vw,42px)/1.1 var(--f-head);font-stretch:106%;margin:0 0 6px}
.legal .date{color:var(--muted);margin:0 0 24px}
.legal h2{font:800 24px/1.2 var(--f-head);margin:34px 0 8px}
.legal p,.legal li{font-size:17.5px}
.legal ul{padding-left:1.2em}

@media (max-width:760px){
  .run{width:14px;gap:3px;left:8px}
  .wrap{padding-left:40px;padding-right:20px}
  .svc li{grid-template-columns:1fr;gap:2px}
  .steps{grid-template-columns:1fr 1fr}
  .warranty .cols{grid-template-columns:1fr}
  .contact dl{grid-template-columns:1fr;gap:0}
  .contact dt{margin-top:12px}
}
@media (max-width:420px){.steps{grid-template-columns:1fr}.logo img{width:130px}}
@media (prefers-reduced-motion:reduce){.run i{animation:none}html{scroll-behavior:auto}}
.warranty h2{margin-bottom:20px}
.warranty .fine{margin-top:26px}

/* logo sits on a light plate so its navy lettering stays readable on the dark page */
.logo{display:inline-block;background:#fff;border-radius:8px;padding:6px 10px;line-height:0}
.logo img{display:block}
.warranty .cols strong{color:var(--blue)}

/* contact form */
.contact .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px 56px;align-items:start}
form.msg{display:grid;gap:16px}
form.msg label{display:block;font:600 16px var(--f-head);margin-bottom:6px}
form.msg input,form.msg textarea{width:100%;font:400 18px var(--f-body);color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:6px;padding:12px 14px}
form.msg textarea{min-height:130px;resize:vertical}
form.msg input:focus,form.msg textarea:focus{outline:3px solid var(--blue);outline-offset:1px}
form.msg .opt{font-weight:400;color:var(--muted)}
form.msg .consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;color:var(--muted);background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:14px}
form.msg .consent input{width:20px;height:20px;margin-top:3px;accent-color:var(--blue)}
form.msg .consent label{font:400 15.5px/1.5 var(--f-body);margin:0}
form.msg button{justify-self:start;cursor:pointer;font-size:17px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.thanks{background:var(--wash);border:1px solid var(--good);border-radius:6px;padding:18px;font-size:19px}
@media (max-width:760px){.contact .grid{grid-template-columns:1fr}}
.contact .grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.contact .grid dl{grid-template-columns:5em minmax(0,1fr);font-size:18px;margin-top:0}
.contact .grid dd{overflow-wrap:anywhere}

/* faq */
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font:700 19px/1.3 var(--f-head);padding:18px 36px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:600 26px var(--f-head);color:var(--blue)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 20px;color:var(--muted);max-width:40em}
.faq .cta-row{margin-top:32px}