:root{
  --dark:#00224F;
  --dark-2:#0C3568;
  --paper:#F4F3EE;
  --mint:#3FA9F5;
  --coral:#1B6FB8;
  --ink:#00224F;
  --steel:#6A7280;
  --line:#1D4B8A;
  --line-light:#DEDCD2;
  --white:#FFFFFF;
  --header-h:70px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:16px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; margin:0; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--coral); outline-offset:2px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
img{max-width:100%; display:block;}

/* subtle circuit-trace background */
.circuit-bg{
  background-image:
    linear-gradient(90deg, rgba(63,169,245,0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(63,169,245,0.07) 1px, transparent 1px);
  background-size:42px 42px;
}

/* ===== HEADER (mobile-first base) ===== */
header{position:sticky; top:0; z-index:60; background:var(--dark); border-bottom:1px solid var(--line);}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:10px;}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-mark{height:34px; width:auto; flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; line-height:1.1; min-width:0;}
.brand-name{font-family:'Space Grotesk'; font-size:16px; font-weight:700; color:var(--white); letter-spacing:0.01em; white-space:nowrap;}
.brand-tag{font-family:'IBM Plex Mono'; font-size:9px; letter-spacing:0.08em; color:var(--mint); margin-top:2px; white-space:nowrap;}

.header-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}

nav#primary-nav{
  display:none; position:absolute; top:var(--header-h); left:0; right:0;
  background:var(--dark-2); border-bottom:1px solid var(--line);
  max-height:calc(100vh - var(--header-h)); overflow-y:auto;
}
nav#primary-nav.open{display:block;}
nav#primary-nav ul{list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:8px 0;}
nav#primary-nav a{
  display:block; font-size:15px; font-weight:500; text-decoration:none; color:var(--paper);
  padding:14px 20px; border-bottom:1px solid var(--line);
}
nav#primary-nav a:hover, nav#primary-nav a:focus-visible{color:var(--mint); background:rgba(63,169,245,0.08);}
.nav-mobile-cta{display:block; margin:12px 20px 16px;}

.nav-cta{
  font-size:13px; font-weight:600; background:var(--mint); color:var(--dark);
  padding:9px 14px; border-radius:6px; text-decoration:none; transition:transform 0.15s, background 0.2s;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--coral); color:var(--white); transform:translateY(-2px);}

.call-strip{background:var(--dark-2); color:var(--paper); font-family:'IBM Plex Mono'; font-size:11px;}
.call-strip .wrap{display:flex; justify-content:space-between; align-items:center; gap:10px; height:auto; min-height:32px; flex-wrap:wrap; padding-top:4px; padding-bottom:4px;}
.call-strip a{text-decoration:none; color:var(--mint);}
.call-strip .addr{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.menu-btn{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0;
  background:none; border:1px solid var(--line); color:var(--paper); border-radius:6px; cursor:pointer; padding:0;
}
.menu-btn svg{width:20px; height:20px;}

/* ===== HERO ===== */
.hero{padding:36px 0 40px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:32px; align-items:center;}
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--coral); background:rgba(27,111,184,0.08);
  border:1px solid rgba(27,111,184,0.3); padding:7px 12px; border-radius:999px; margin-bottom:18px;
}
.eyebrow-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--coral); flex-shrink:0;}
.hero h1{font-size:clamp(30px,7vw,58px); line-height:1.1; color:var(--ink);}
.hero h1 .accent{color:var(--coral);}
.hero-sub{font-size:16px; color:#3A3F48; max-width:48ch; margin:16px 0 26px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}
.btn{font-size:14px; font-weight:600; text-decoration:none; padding:14px 24px; border-radius:8px; display:inline-block; transition:transform 0.15s ease, background 0.2s ease; text-align:center;}
.btn-primary{background:var(--coral); color:var(--white);}
.btn-primary:hover{background:#155a94; transform:translateY(-2px);}
.btn-ghost{border:2px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--white); transform:translateY(-2px);}

/* repair ticket card */
.ticket{
  background:var(--dark); border-radius:14px; padding:24px; color:var(--paper);
  font-family:'IBM Plex Mono'; font-size:12.5px; position:relative;
}
.ticket::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}
.ticket-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed var(--line);}
.ticket-head .id{color:var(--mint);}
.ticket-row{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.ticket-row span:first-child{color:var(--steel); flex-shrink:0;}
.ticket-row span:last-child{text-align:right;}
.ticket-status{
  margin-top:16px; display:flex; align-items:center; gap:8px; color:var(--mint);
  font-weight:500;
}
.ticket-status .pulse{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(63,169,245,0.2); flex-shrink:0;}

/* ===== DEVICES WE FIX ===== */
.devices{padding:48px 0; background:var(--dark); color:var(--paper);}
.section-head{margin-bottom:28px;}
.section-head .eyebrow{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.14em; color:var(--mint); text-transform:uppercase; display:block; margin-bottom:10px;}
.section-head h2{font-size:clamp(24px,5vw,40px); color:var(--ink);}
.devices .section-head h2{color:var(--white);}
.device-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.device-card{
  background:var(--dark-2); border:1px solid var(--line); border-radius:12px; padding:20px 18px;
  transition:border-color 0.2s, transform 0.2s;
}
.device-card:hover{border-color:var(--mint); transform:translateY(-4px);}
.device-icon{width:36px; height:36px; margin-bottom:14px;}
.device-card h3{font-size:16px; color:var(--white); margin-bottom:6px;}
.device-card p{font-size:13px; color:#B7C4DE; margin:0;}

/* ===== WHY US ===== */
.why{padding:48px 0;}
.why-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:28px;}
.why-card{background:var(--white); border:1px solid var(--line-light); border-radius:12px; padding:24px;}
.why-card .num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--coral); letter-spacing:0.08em;}
.why-card h3{font-size:18px; margin:12px 0 8px; color:var(--ink);}
.why-card p{font-size:14px; color:var(--steel); margin:0;}

/* ===== PROCESS ===== */
.process{padding:48px 0; background:var(--white); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);}
.process-track{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px; position:relative;}
.process-step{position:relative; padding-top:20px;}
.process-step::before{content:""; position:absolute; top:0; left:0; width:36px; height:3px; background:var(--mint); border-radius:2px;}
.process-step .num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--steel);}
.process-step h3{font-size:16px; margin:10px 0 8px; color:var(--ink);}
.process-step p{font-size:13.5px; color:var(--steel); margin:0;}

/* ===== REVIEWS ===== */
.reviews{padding:48px 0; background:var(--paper);}
.reviews .section-head h2{color:var(--ink);}
.review-card{background:var(--white); border:1px solid var(--line-light); border-radius:12px; padding:26px;}
.review-stars{color:var(--coral); font-size:15px; letter-spacing:2px; margin-bottom:14px;}
.review-card p{font-size:14px; color:#3A3F48; margin:0 0 16px; font-style:italic;}
.review-name{font-family:'IBM Plex Mono'; font-size:12px; color:var(--steel);}
.review-note{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--steel); margin-top:24px; text-align:center;}
.review-summary{background:var(--white); border:1px solid var(--line-light); border-radius:12px; padding:30px 24px; text-align:center;}
.review-summary .stars{font-size:32px; color:var(--coral); letter-spacing:3px;}
.review-summary .score{font-family:'Space Grotesk'; font-size:24px; margin:10px 0 4px; color:var(--ink);}
.review-summary .count{font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--steel); margin:0 0 18px;}

/* ===== LOCATION / CONTACT ===== */
.location{padding:48px 0 56px; background:var(--dark); color:var(--paper);}
.location .section-head h2{color:var(--white);}
.loc-grid{display:grid; grid-template-columns:1fr; gap:28px;}
.loc-card{background:var(--dark-2); border:1px solid var(--line); border-radius:14px; padding:24px;}
.loc-row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.loc-row:last-child{border-bottom:none;}
.loc-row .k{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:0.1em; color:var(--mint); text-transform:uppercase; width:80px; flex-shrink:0; padding-top:2px;}
.loc-row .v{font-size:14.5px; flex:1; min-width:150px;}
.loc-row a{color:var(--paper); text-decoration:none;}
.social-row{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.social-btn{
  flex:1 1 90px; text-align:center; padding:12px 8px; border:1px solid var(--line); border-radius:8px;
  text-decoration:none; color:var(--paper); font-size:13px; font-weight:500; transition:border-color 0.2s, color 0.2s;
}
.social-btn:hover{border-color:var(--mint); color:var(--mint);}

form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr; gap:16px;}
label{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); display:block; margin-bottom:6px;}
input, textarea, select{
  width:100%; background:var(--dark-2); border:1px solid var(--line); border-radius:8px; padding:13px 14px;
  font-family:'Inter'; font-size:16px; color:var(--paper);
}
textarea{resize:vertical; min-height:100px;}
.submit-btn{
  justify-self:stretch; background:var(--mint); color:var(--dark); border:none; border-radius:8px;
  font-size:15px; font-weight:600; padding:15px 30px; cursor:pointer; transition:background 0.2s, transform 0.15s;
}
.submit-btn:hover{background:var(--coral); color:var(--white); transform:translateY(-2px);}
.form-note{font-size:12px; color:var(--steel); margin-top:-4px;}
.form-note a{color:var(--mint); text-decoration:underline;}

.form-success{
  display:none; background:var(--dark-2); border:1px solid var(--mint); border-radius:12px;
  padding:32px 24px; text-align:center;
}
.form-success.show{display:block;}
.form-success .check{
  width:48px; height:48px; border-radius:50%; background:rgba(63,169,245,0.15); color:var(--mint);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:22px;
}
.form-success h3{color:var(--white); font-size:19px; margin-bottom:8px;}
.form-success p{color:var(--paper); opacity:0.85; font-size:14px; margin:0;}

.loc-map{margin-top:20px; border-radius:12px; overflow:hidden; border:1px solid var(--line); line-height:0;}
.loc-map iframe{width:100%; height:260px; border:0; display:block; filter:grayscale(0.15);}

/* ===== FAQ (used on service pages) ===== */
.faq{padding:48px 0; background:var(--white); border-top:1px solid var(--line-light);}
.faq-item{border-bottom:1px solid var(--line-light); padding:20px 0;}
.faq-item h3{font-size:16px; margin-bottom:8px; color:var(--ink);}
.faq-item p{font-size:14px; color:var(--steel); margin:0;}

/* ===== FOOTER ===== */
footer{background:var(--dark-2); color:var(--paper); padding-top:44px; border-top:1px solid var(--line);}
.footer-top{display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:64px;}
.foot-brand{font-family:'Space Grotesk'; font-size:15px; font-weight:700; color:var(--white);}
.footer-tagline{font-size:13px; color:#B7C4DE; margin:12px 0 0; max-width:34ch;}
.footer-col-title{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mint); display:block; margin-bottom:14px;}
.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-links a{font-size:14px; color:var(--paper); text-decoration:none; opacity:0.85;}
.footer-links a:hover{opacity:1; color:var(--mint);}
.footer-contact{font-size:13.5px; color:#B7C4DE; margin:0 0 8px;}
.footer-contact a{color:var(--paper); text-decoration:none;}
.footer-bottom{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:28px 0 10px; border-top:1px solid rgba(222,220,210,0.15);
}
.foot-fine{font-family:'IBM Plex Mono'; font-size:10.5px; opacity:0.6; margin:0;}
.foot-credit{font-family:'IBM Plex Mono'; font-size:10.5px; opacity:0.75; margin:0;}
.foot-credit a{color:var(--mint); text-decoration:none;}
.foot-credit a:hover{color:var(--white);}

/* ===== RESPONSIVE — scale up from mobile base ===== */
@media (min-width:641px){
  .device-grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .footer-bottom{flex-direction:row; justify-content:space-between; align-items:center;}
}

@media (min-width:768px){
  .wrap{padding-left:32px; padding-right:32px;}
  .footer-top{grid-template-columns:1.3fr 1fr 1fr;}
  :root{--header-h:78px;}
  .brand-mark{height:42px;}
  .brand-name{font-size:20px;}
  .brand-tag{font-size:10px;}
  .call-strip{font-size:12px;}
  .call-strip .wrap{height:34px;}
  .hero{padding:60px 0 56px;}
  .form-row{grid-template-columns:1fr 1fr;}
  .submit-btn{justify-self:start;}
}

@media (min-width:961px){
  .nav-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;}
  .brand{grid-column:1; grid-row:1;}
  nav#primary-nav{
    display:block; position:static; background:none; border:none; max-height:none; overflow:visible;
    grid-column:2; grid-row:1; justify-self:center;
  }
  nav#primary-nav ul{flex-direction:row; gap:32px; padding:0;}
  nav#primary-nav a{padding:0; border:none; font-size:14px; opacity:0.85;}
  nav#primary-nav a:hover{opacity:1; background:none;}
  nav#primary-nav a.nav-mobile-cta{display:none;}
  .header-actions{grid-column:3; grid-row:1; justify-self:end;}
  .menu-btn{display:none;}
  .nav-cta{font-size:14px; padding:11px 22px;}
  .hero-grid{grid-template-columns:1.15fr 0.85fr; gap:50px;}
  .device-grid{grid-template-columns:repeat(4,1fr); gap:20px;}
  .device-card{padding:26px 22px;}
  .why-grid{grid-template-columns:repeat(3,1fr); gap:24px;}
  .process-track{grid-template-columns:repeat(4,1fr); gap:24px;}
  .loc-grid{grid-template-columns:0.9fr 1.1fr; gap:50px;}
}

@media (min-width:1080px){
  .review-grid-wrap{max-width:640px; margin:0 auto;}
}