/* =========================================================
   TechSavvy Solutions
   Palette and type carried over from the existing brand kit.
   The kit ships six accents; this uses two. Electric cyan does
   structure and links, solar yellow does one job only, which is
   the thing you want clicked. Flame is kept for warnings.
   ========================================================= */
:root{
  --dark:#0A0A0F;
  --dark2:#111119;
  --card:#191924;
  --card2:#24242F;
  --line:rgba(255,255,255,.11);
  --line2:rgba(0,229,255,.28);
  --electric:#00E5FF;
  --solar:#FFD600;
  --flame:#FF4D00;
  /* Ember is the logo's own orange, readable on dark. Third accent:
     it warms the page so the mark stops looking like a sticker. */
  --ember:#FF7A1A;
  --ember-soft:rgba(255,122,26,.35);
  --text:#F0F0F8;
  --muted:#9A9AB4;
  --measure:64ch;
  --green:#5CFF9D;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* iOS WebKit inflates text inside blocks it judges too wide for the
     viewport, ignoring the declared font sizes and scaling elements by
     different amounts. That is why the phone rendering looked zoomed and
     uneven while desktop was fine. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--dark);
  color:var(--text);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:"Syne","DM Sans",sans-serif;
  font-weight:800;
  line-height:1.04;
  letter-spacing:-0.02em;
  margin:0;
}
p{margin:0 0 1.1rem}
a{color:var(--electric)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--solar);outline-offset:3px}
.wrap{width:min(1240px,92vw);margin-inline:auto}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--solar);color:#14140A;padding:.7rem 1.1rem;font-weight:700;
}
.skip-link:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:"DM Sans",sans-serif;
  font-size:.97rem;
  font-weight:700;
  letter-spacing:.01em;
  padding:.8rem 1.5rem;
  border:1px solid transparent;
  border-radius:0;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn-lg{padding:1rem 1.9rem;font-size:1.02rem}
.btn-solar{background:var(--solar);color:#14140A;box-shadow:6px 6px 0 rgba(0,229,255,.3)}
.btn-solar:hover{background:#FFE24D;transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(0,229,255,.38)}
.btn-line{background:transparent;color:var(--text);border-color:var(--line2)}
.btn-line:hover{border-color:var(--electric);color:var(--electric)}

/* ---------- topbar ---------- */
.signal-strip{height:29px;overflow:hidden;background:var(--electric);color:#05080a;font:800 .68rem/29px "Syne",sans-serif;letter-spacing:.13em;white-space:nowrap}
.signal-track{display:inline-flex;align-items:center;gap:1.2rem;min-width:max-content;animation:signal 24s linear infinite}
.signal-track i{font-style:normal;font-size:.55rem}
@keyframes signal{to{transform:translateX(-50%)}}
.topbar{border-bottom:1px solid var(--line);background:rgba(10,10,15,.88);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text)}
.brand img{width:44px;height:44px;border-radius:50%;flex:0 0 auto}
/* "TechSavvy" sits in <strong> at 800 while "Solutions" was inheriting 700,
   which is the only thing that made them look like different faces. Both now
   render identically; colour is the sole distinction. */
.brand span{font-family:"Syne",sans-serif;font-weight:800;font-size:1.05rem;line-height:1.15;letter-spacing:-.01em}
.brand strong{color:var(--electric);font-weight:800}
.brand em{
  display:block;font-family:"DM Sans",sans-serif;font-style:normal;
  font-weight:400;font-size:.72rem;letter-spacing:.04em;color:var(--muted);margin-top:.15rem;
}
.nav-panel{display:flex;align-items:center;gap:1.3rem;margin-left:auto}
.nav-link{color:var(--text);text-decoration:none;font-size:.92rem;opacity:.82}
.nav-link:hover{opacity:1;color:var(--electric)}
.nav-link.is-here{opacity:1;color:var(--electric)}
.nav-toggle{
  display:none;margin-left:auto;
  font-family:"DM Sans",sans-serif;font-size:.88rem;font-weight:700;
  padding:.55rem .9rem;background:transparent;color:var(--text);
  border:1px solid var(--line2);border-radius:3px;cursor:pointer;
}

/* ---------- hero ---------- */
.hero{
  padding:0; /* .hero-in owns its own padding; the section rule was stacking
                another 4.6rem on top, creating ~128px of dead space above
                the headline before anything else was even measured. */
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(34rem 34rem at 79% 52%,rgba(255,122,26,.16),transparent 66%),
    radial-gradient(60rem 30rem at 78% 12%,rgba(0,229,255,.10),transparent 62%),
    radial-gradient(40rem 24rem at 8% 88%,rgba(255,214,0,.06),transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),var(--dark);
  background-size:auto,auto,auto,64px 64px,64px 64px,auto;
  position:relative;overflow:hidden;
}
.hero::after{content:"REPAIR / IT / DRONES";position:absolute;right:-.04em;bottom:-.22em;font:800 clamp(5rem,13vw,12rem)/1 "Syne",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,122,26,.07);white-space:nowrap;pointer-events:none}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:3rem;align-items:center;min-height:560px;padding:3.4rem 0 3.8rem;position:relative;z-index:1}
.kicker{
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--electric);font-weight:700;
  margin:0 0 1.5rem;
}
.kicker span{color:var(--muted);margin-right:.7rem}
.hero h1{font-size:clamp(3rem,5.6vw,5.2rem);line-height:.88;letter-spacing:-.06em;max-width:9ch;text-transform:uppercase}
.hero h1 em,.founder-copy h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--electric);text-shadow:0 0 30px rgba(0,229,255,.18)}
.lede{font-size:1.12rem;color:var(--muted);max-width:52ch;margin:1.4rem 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.quickprice{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin:2.8rem 0 0;max-width:38rem;
  background:var(--line);border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.quickprice > div{padding:1.05rem 1.2rem;background:var(--dark2);position:relative}
.quickprice dt{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.quickprice dd{
  margin:.3rem 0 0;font-family:"Syne",sans-serif;font-weight:800;
  font-size:1.6rem;line-height:1.05;color:var(--solar);
}
.quickprice dd small{display:block;font-size:.74rem;font-weight:500;color:var(--muted);letter-spacing:.02em;margin-top:.2rem}
.hero-system{width:min(40vw,490px);aspect-ratio:1;position:relative;margin-inline:auto;display:grid;place-items:center}
.hero-badge{width:63%;position:relative;z-index:2}
.hero-badge img{width:100%;border-radius:50%;box-shadow:0 0 0 1px var(--ember-soft),0 0 70px rgba(255,122,26,.28),0 0 130px rgba(0,229,255,.14),0 24px 60px rgba(0,0,0,.7)}
.orbit{position:absolute;inset:5%;border:1px solid rgba(0,229,255,.28);border-radius:50%;animation:spin 18s linear infinite}
.orbit::before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--electric);top:14%;left:14%;box-shadow:0 0 20px var(--electric)}
.orbit span{position:absolute;top:7%;left:57%;font:700 .62rem "DM Sans",sans-serif;letter-spacing:.12em;color:var(--electric);background:var(--dark);padding:.2rem .45rem}
.orbit-two{inset:16%;border-color:rgba(255,214,0,.3);animation-direction:reverse;animation-duration:13s}
.orbit-two::before{background:var(--solar);box-shadow:0 0 20px var(--solar);top:auto;left:auto;right:5%;bottom:22%}
.orbit-two span{top:auto;left:2%;bottom:14%;color:var(--solar)}
.status-pill{position:absolute;z-index:4;right:-1rem;bottom:12%;padding:.55rem .8rem;background:#11131a;border:1px solid var(--line);font-size:.76rem;letter-spacing:.04em;box-shadow:0 12px 32px #000}
.status-pill b{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:.5rem;box-shadow:0 0 12px var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- service route ---------- */
.route-band{padding:0;background:var(--solar);color:#101014}
.route-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.route-grid>div{min-height:128px;padding:1.45rem 1.2rem;border-left:1px solid rgba(0,0,0,.18);display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-content:center}
.route-grid>div:last-child{border-right:1px solid rgba(0,0,0,.18)}
.route-grid span{font:800 .74rem "Syne",sans-serif;opacity:.45;grid-row:1/3}
.route-grid strong{font:800 1rem "Syne",sans-serif;line-height:1.1}
.route-grid small{font-size:.76rem;margin-top:.35rem;opacity:.67}

/* ---------- interactive triage ---------- */
.triage{background:linear-gradient(135deg,rgba(0,229,255,.055),transparent 38%),var(--dark2);position:relative;overflow:hidden}
.triage::after{content:"DIAGNOSE";position:absolute;right:-.03em;top:-.2em;font:800 clamp(5rem,14vw,12rem)/1 "Syne",sans-serif;color:rgba(255,255,255,.018);pointer-events:none}
.triage-shell{position:relative;z-index:1}
.triage-head{display:grid;grid-template-columns:1fr 1fr;column-gap:4rem;align-items:end;margin-bottom:2rem}
.triage-head .kicker{grid-column:1/-1;margin-bottom:1rem}
.triage-head h2{font-size:clamp(2.2rem,4.8vw,4.4rem);letter-spacing:-.055em;text-transform:uppercase}
.triage-head>p:not(.kicker){color:var(--muted);max-width:48ch;margin:0 0 .45rem}
.triage-ui{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);background:var(--line);gap:1px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.triage-options{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.triage-option{min-height:92px;text-align:left;padding:1.15rem;background:var(--card);color:var(--text);border:0;font:700 .95rem "DM Sans",sans-serif;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.triage-option span{display:block;color:var(--muted);font:800 .68rem "Syne",sans-serif;letter-spacing:.08em;margin-bottom:.35rem}
.triage-option:hover{background:var(--card2)}
.triage-option.is-active{background:var(--electric);color:#071013;box-shadow:inset 0 -4px 0 var(--solar)}
.triage-option.is-active span{color:rgba(0,0,0,.5)}
.triage-result{background:#0d0d14;padding:clamp(1.6rem,4vw,3.2rem);min-height:350px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative}
.triage-result::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.triage-status{font:800 .7rem "Syne",sans-serif;letter-spacing:.1em;color:var(--green);margin-bottom:1.1rem}
.triage-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green);margin-right:.6rem}
.triage-result h3{font-size:clamp(1.7rem,3.4vw,3rem);max-width:15ch;margin-bottom:.8rem}
.triage-result>p{color:var(--muted);max-width:55ch}
.triage-result dl{display:grid;grid-template-columns:1fr 1.4fr;width:100%;max-width:34rem;margin:1.2rem 0 1.4rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.triage-result dl>div{padding:.85rem 1rem .85rem 0}
.triage-result dl>div+div{border-left:1px solid var(--line);padding-left:1rem}
.triage-result dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.triage-result dd{margin:.2rem 0 0;color:var(--solar);font:800 1rem "Syne",sans-serif}
.triage-result small{margin-top:1rem;color:var(--muted);font-size:.75rem}

/* ---------- sections ---------- */
section{padding:4.6rem 0}
.sec-head{margin-bottom:2.4rem;max-width:var(--measure)}
.sec-head h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}
.sec-head p{margin-top:.9rem;color:var(--muted)}
/* One small warm rule above every section heading. Cheapest way to give
   the page a repeating beat instead of nine identical starts. */
.sec-head h2::before,.areas h2::before,.faq h2::before{
  content:"";display:block;width:46px;height:3px;
  background:linear-gradient(90deg,var(--ember),var(--solar));
  margin-bottom:1.15rem;
}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{
  display:block;background:var(--card);padding:2rem 1.7rem 1.7rem;
  text-decoration:none;color:var(--text);transition:background-color .2s ease,transform .25s ease;position:relative;overflow:hidden;
}
.svc::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--ember),var(--solar));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.svc:hover::before,.svc:focus-visible::before{transform:scaleX(1)}
.svc:hover,.svc:focus-visible{background:var(--card2)}
.svc h3{font-size:1.45rem;margin-bottom:.7rem;transition:color .2s ease}
.svc:hover h3{color:var(--ember)}
.svc p{color:var(--muted);font-size:.97rem;margin-bottom:1.2rem}
.svc-go{font-size:.86rem;font-weight:700;color:var(--electric)}
.svc:hover .svc-go{color:var(--solar)}

/* ---------- founder proof ---------- */
.founder-proof{background:var(--dark2)}
.founder-grid{display:grid;grid-template-columns:minmax(260px,.72fr) 1.28fr;gap:clamp(2.5rem,7vw,7rem);align-items:center}
.founder-photo{position:relative;max-width:430px}
.founder-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--electric);z-index:0}
.founder-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;filter:saturate(.85) contrast(1.05)}
.founder-photo span{position:absolute;z-index:2;left:-18px;bottom:24px;background:var(--solar);color:#111;padding:.65rem .9rem;font:800 .72rem "Syne",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.founder-copy h2{font-size:clamp(2.5rem,5vw,4.9rem);letter-spacing:-.05em;text-transform:uppercase;margin-bottom:1.5rem}
.founder-copy>p:not(.kicker){color:var(--muted);font-size:1.1rem;max-width:60ch}
.proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:2rem 0}
.proof-row span{background:var(--card);padding:1.2rem;color:var(--muted);font-size:.88rem}
.proof-row b{display:block;color:var(--electric);font:800 1rem "Syne",sans-serif;margin-bottom:.35rem;line-height:1.2}
.text-link{display:inline-flex;gap:.8rem;align-items:center;text-decoration:none;font-weight:700;color:var(--text);border-bottom:1px solid var(--electric);padding-bottom:.25rem}
.text-link span{color:var(--electric);transition:transform .2s ease}.text-link:hover span{transform:translateX(5px)}

/* ---------- promise ---------- */
.promise{padding:0}
.promise-in{
  border:1px solid var(--line2);background:var(--card);
  padding:2.2rem;display:grid;grid-template-columns:auto 1fr;gap:2.4rem;align-items:center;
}
.promise-in h2{font-size:1.6rem;color:var(--solar);white-space:nowrap}
.promise-in p{margin:0;color:var(--muted);max-width:70ch}

/* ---------- areas ---------- */
.areas h2{font-size:1.5rem;margin-bottom:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips span{
  border:1px solid var(--line);background:var(--card);
  padding:.5rem .95rem;border-radius:3px;font-size:.9rem;color:var(--text);
  transition:border-color .2s ease,color .2s ease;
}
.chips span:hover{border-color:var(--ember-soft);color:var(--ember)}
.areas-note{margin-top:1.2rem;color:var(--muted);font-size:.9rem}

/* ---------- page hero ---------- */
.page-hero{border-bottom:1px solid var(--line);padding:3rem 0 3.4rem;background:var(--dark2)}
.page-hero h1{font-size:clamp(2.1rem,4.8vw,3.3rem)}
.gov-hero{background:linear-gradient(180deg,rgba(0,229,255,.07),transparent),var(--dark2)}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:1.4rem}
.crumbs a{color:var(--electric);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs i{margin:0 .5rem;font-style:normal;opacity:.4}

/* ---------- prose ---------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:2.6rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose p{color:#D6D6E4;line-height:1.72}
.prose strong{color:var(--text)}

/* ---------- pricing ---------- */
.pgroup{margin-bottom:3rem}
.pgroup h2{
  font-size:1.35rem;color:var(--electric);
  padding-bottom:.8rem;margin-bottom:.3rem;border-bottom:1px solid var(--line2);
}
.prow{
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
}
.pname{font-weight:500}
/* Direct, unclassed span only. As `.pname span` this hit the .tagrow
   wrapper and every .tag inside it, forcing display:block and stacking
   the method pills full width. */
.pname > span:not([class]){display:block;font-size:.88rem;font-weight:400;color:var(--muted);margin-top:.2rem;max-width:56ch}
.pprice{font-family:"Syne",sans-serif;font-weight:700;font-size:1.1rem;color:var(--solar);white-space:nowrap}
.promise-box,.comehere-in{border:1px solid var(--line2);background:var(--card);padding:2rem}
.promise-box h2,.comehere-in h2{font-size:1.5rem;color:var(--solar);margin-bottom:.8rem}
.promise-box p,.comehere-in p{margin:0;color:var(--muted);max-width:70ch}
.comehere{padding-top:0}

/* ---------- government ---------- */
.idlist{margin:0;border-top:1px solid var(--line)}
.idlist > div{
  display:grid;grid-template-columns:16rem 1fr;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);
}
.idlist dt{color:var(--muted);font-size:.9rem}
.idlist dd{margin:0;font-weight:500}
.idlist.two > div{grid-template-columns:8rem 1fr}
.ident,.naics{padding-bottom:0}
.ident h2,.naics h2,.caps h2,.diffs h2{font-size:1.5rem;margin-bottom:1.2rem}
.cap-grid,.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cap,.diff{background:var(--card);padding:1.7rem}
.cap h3,.diff h3{font-size:1.15rem;margin-bottom:.5rem;color:var(--electric)}
.cap p,.diff p{margin:0;color:var(--muted);font-size:.95rem}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:3rem;align-items:start}
.about-side img{width:100%;border:1px solid var(--line);border-radius:3px;margin-bottom:1.4rem}
.side-card{border:1px solid var(--line);background:var(--card);padding:1.4rem;margin-bottom:1.2rem}
.side-card h3{font-size:1.1rem;margin-bottom:.7rem;color:var(--electric)}
.side-card ul{margin:0 0 .9rem;padding-left:1.1rem;color:var(--muted);font-size:.95rem}
.side-card p{margin:0;font-size:.93rem;color:var(--muted)}
.bigphone{font-family:"Syne",sans-serif;font-weight:700;font-size:1.45rem;margin-bottom:.4rem}
.bigphone a{color:var(--solar);text-decoration:none}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.5fr .5fr;gap:3rem;align-items:start}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1 / -1}
.hp{display:none}
label{font-size:.85rem;color:var(--muted)}
input,textarea,select{
  font-family:"DM Sans",sans-serif;font-size:1rem;padding:.78rem .9rem;
  background:var(--card);border:1px solid var(--line);border-radius:3px;color:var(--text);
}
input:focus,textarea:focus,select:focus{border-color:var(--electric);outline:none}
textarea{min-height:150px;resize:vertical}

/* ---------- cta ---------- */
.cta{border-top:1px solid var(--line);background:var(--dark2)}
.cta-inner{display:grid;grid-template-columns:1.4fr .6fr;gap:3rem;align-items:center}
.cta h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.cta p:not([class]){color:var(--muted);max-width:60ch;margin-top:.9rem}
.cta-logistics{color:var(--ember);max-width:60ch;margin-top:.9rem}
.cta-actions{display:flex;flex-direction:column;gap:.8rem}
.cta-actions .btn{text-align:center}

/* ---------- faq ---------- */
.faq h2{font-size:1.6rem;margin-bottom:1.4rem}
.qa{border-bottom:1px solid var(--line);transition:background-color .2s ease}
.qa:first-of-type{border-top:1px solid var(--line)}
.qa summary{
  cursor:pointer;font-weight:700;font-size:1.02rem;
  padding:1.15rem 3rem 1.15rem 1rem;position:relative;list-style:none;
  transition:color .2s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:1.1rem;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--ember);border-bottom:2px solid var(--ember);
  transform:rotate(45deg);transition:transform .25s ease;
}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.qa:hover{background:var(--card)}
.qa summary:hover,.qa[open] summary{color:var(--ember)}
.qa p{margin:0 1rem .2rem;padding-bottom:1.1rem;color:var(--muted);max-width:70ch}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:#07070B;padding:3.2rem 0 2rem;font-size:.9rem}
.foot{display:grid;grid-template-columns:1.3fr .9fr .9fr .9fr;gap:2rem}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--electric)}
.foot > div > div{margin-bottom:.4rem}
.foot-brand{font-family:"Syne",sans-serif;font-weight:800;font-size:1.15rem;color:var(--text)}
.foot-legal{color:var(--muted);max-width:30ch}
.foot-certs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.foot-certs span{border:1px solid var(--line2);color:var(--electric);padding:.2rem .55rem;border-radius:2px;font-size:.74rem}
.foot-h{font-family:"Syne",sans-serif;font-weight:700;color:var(--text);margin-bottom:.7rem}
.foot-base{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .nav-toggle{display:inline-block}
  .nav-panel{
    flex:1 1 100%;display:none;flex-direction:column;align-items:stretch;gap:0;
    margin:.8rem 0 .2rem;padding-top:.2rem;border-top:1px solid var(--line);
  }
  .nav-panel.is-open{display:flex}
  .nav-link{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem;opacity:1}
  .nav-panel .btn{margin:1rem 0 .4rem;text-align:center}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:2.4rem;padding:3rem 0}
  .hero-system{order:-1;width:min(72vw,330px);margin:0}
  .svc-grid,.cap-grid,.diff-grid{grid-template-columns:1fr}
  .promise-in{grid-template-columns:1fr;gap:1rem}
  .promise-in h2{white-space:normal}
  .about-grid,.contact-grid,.cta-inner{grid-template-columns:1fr;gap:2rem}
  .qform{grid-template-columns:1fr}
  .idlist > div,.idlist.two > div{grid-template-columns:1fr;gap:.2rem}
  .idlist dt{font-size:.8rem}
  .foot{grid-template-columns:1fr 1fr}
  section{padding:3.2rem 0}
  .route-grid{grid-template-columns:1fr 1fr}
  .founder-grid{grid-template-columns:1fr}.founder-photo{max-width:360px}
  .triage-head{grid-template-columns:1fr;gap:.8rem}.triage-ui{grid-template-columns:1fr}
}
@media (max-width:560px){
  .quickprice{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr;gap:.3rem}
  .pprice{font-size:1.05rem}
  .hero-in{min-height:auto}
  /* Narrow screens go back to a stacked headline; two long lines will not
     fit, and tall-and-narrow is the natural shape here anyway. */
  .hero h1{font-size:clamp(2.9rem,15vw,4.4rem);max-width:9ch;line-height:.88}
  .route-grid{grid-template-columns:1fr}.route-grid>div{min-height:94px;border-right:1px solid rgba(0,0,0,.18)}
  .proof-row{grid-template-columns:1fr}
  .triage-options{grid-template-columns:1fr}.triage-option{min-height:68px}.triage-result{min-height:0;padding:2rem 1.4rem}.triage-result dl{grid-template-columns:1fr}.triage-result dl>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  /* On narrow screens the orbit system shrinks under the pill, so anchor
     it below the badge instead of over it. */
  .status-pill{right:auto;left:50%;transform:translateX(-50%);bottom:-4%;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .signal-track,.orbit{animation:none!important}
}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* =========================================================
   THE THREE SERVICE METHODS
   These are the spine of the site, so they get real weight.
   ========================================================= */
.tag{
  display:inline-block;
  font-family:"DM Sans",sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  padding:.22rem .55rem;
  border-radius:2px;
  border:1px solid;
  white-space:nowrap;
}
.tag-remote{color:var(--electric);border-color:rgba(0,229,255,.45);background:rgba(0,229,255,.07)}
.tag-onsite{color:var(--solar);border-color:rgba(255,214,0,.45);background:rgba(255,214,0,.07)}
.tag-pickup{color:#FF8A4D;border-color:rgba(255,77,0,.45);background:rgba(255,77,0,.08)}

.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
/* Methods + fees are one continuous band. Lifting them off the page
   background groups the pricing spine instead of letting nine sections
   run together on the same black. */
.methods,.fees{background:var(--dark2)}
.methods{border-top:1px solid var(--line)}
.fees{border-bottom:1px solid var(--line)}

.method{background:var(--card);padding:2rem 1.7rem}
.method h3{font-size:1.35rem;margin:.9rem 0 .3rem}
.mprice{
  font-family:"Syne",sans-serif;
  font-weight:800;
  font-size:1.9rem;
  color:var(--solar);
  margin:0 0 1rem;
}
/* Scoped to unclassed paragraphs only. As `.method p` this rule was
   (0,1,1) and sat after .mprice/.mbest, so it silently overrode the
   price size and colour and the "best for" line. */
.method p:not([class]){color:var(--muted);font-size:.96rem}
.mbest{
  margin:1.1rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:#C4C4D8;
  font-size:.9rem;
}
.method-note{
  margin:1.4rem 0 0;
  padding:.9rem 1.1rem;
  border-left:2px solid var(--electric);
  background:var(--card);
  color:var(--muted);
  font-size:.93rem;
}

/* ---------- the trust statement ---------- */
.trust{padding:4.6rem 0 0}
.trust-in{
  border:1px solid var(--line2);
  background:linear-gradient(120deg,rgba(255,122,26,.10),rgba(0,229,255,.07) 55%,rgba(255,214,0,.05)),var(--card);
  padding:2.6rem;
  text-align:center;
}
.trust-in h2{
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  margin-bottom:1rem;
}
.trust-in p{
  margin:0 auto;
  max-width:62ch;
  color:#D6D6E4;
  font-size:1.05rem;
}

/* ---------- method labels on the price rows ---------- */
.tagrow{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.pricing-key{color:var(--muted);font-size:.92rem;margin-bottom:2rem}

@media (max-width:900px){
  .method-grid{grid-template-columns:1fr}
  .trust-in{padding:1.8rem;text-align:left}
}

/* ---------- exactly what you pay ---------- */
.fees{padding-top:0}
.fee-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.feecol{background:var(--card);padding:1.9rem 1.6rem}
.feecol h3{font-size:1.25rem;margin:.85rem 0 1.1rem}
.feelist{margin:0}
.feelist > div{padding:.8rem 0;border-top:1px solid var(--line)}
.feelist > div:first-child{border-top:0;padding-top:0}
.feelist dt{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--electric);
  margin-bottom:.25rem;
}
.feelist dd{margin:0;color:#C8C8DA;font-size:.94rem;line-height:1.5}
.mfee{
  margin:.9rem 0 0;
  padding:.7rem .9rem;
  background:var(--dark2);
  border-left:2px solid var(--solar);
  color:#C8C8DA;
  font-size:.9rem;
}
@media (max-width:900px){
  .fee-grid{grid-template-columns:1fr}
}

/* ── Who this is for ─────────────────────────────────────── */
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.serve{background:var(--card);padding:1.9rem 1.6rem}
.serve h3{font-size:1.25rem;margin-bottom:.6rem}
.serve p{color:var(--muted);font-size:.97rem;margin:0}
.serve a{color:var(--electric)}

/* ── Certified vendor ────────────────────────────────────── */
.certs{background:var(--dark2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.certs h2{font-size:1.6rem}
.certs h2::before{content:"";display:block;width:46px;height:3px;background:linear-gradient(90deg,var(--ember),var(--solar));margin-bottom:1.15rem}
.certs-note{color:var(--muted);max-width:62ch;margin:.9rem 0 2rem}
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cert-grid > div{background:var(--card);padding:1.2rem 1.3rem}
.cert-grid dt{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cert-grid dd{margin:.35rem 0 0;font-family:"Syne",sans-serif;font-weight:700;font-size:1.1rem;color:var(--electric);letter-spacing:.01em}

@media (max-width:900px){
  .serve-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cert-grid{grid-template-columns:1fr}
}

/* ── Capability statement ────────────────────────────────── */
.capstate{background:var(--dark2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.capstate-in{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.capstate-in h2{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.capstate-in h2::before{content:"";display:block;width:46px;height:3px;background:linear-gradient(90deg,var(--ember),var(--solar));margin-bottom:1.15rem}
.capstate-in p{color:var(--muted);max-width:60ch;margin-top:.9rem}
.capstate-note{font-size:.92rem}
.capstate-actions{display:flex;flex-direction:column;align-items:stretch;gap:.9rem}
.capstate-actions .btn{text-align:center}
.capstate-actions .text-link{margin-top:.3rem}
@media (max-width:900px){.capstate-in{grid-template-columns:1fr;gap:2rem}}

/* ── SAVVY chat assistant ────────────────────────────────── */
.savvy-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.savvy-trigger{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;width:60px;height:60px;
  border-radius:50%;border:1px solid var(--ember-soft);background:var(--dark2);cursor:pointer;padding:0;
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 34px rgba(255,122,26,.22);
  transition:transform .2s ease,box-shadow .2s ease}
.savvy-trigger:hover{transform:translateY(-2px)}
.savvy-trigger img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.savvy-trigger-x{display:none;font-size:1.7rem;line-height:1;color:var(--text)}
.savvy-trigger.is-open img{display:none}
.savvy-trigger.is-open .savvy-trigger-x{display:block}

.savvy-panel{position:fixed;right:1.4rem;bottom:5.6rem;z-index:60;width:min(380px,calc(100vw - 2.8rem));
  height:min(560px,calc(100vh - 8rem));display:flex;flex-direction:column;
  background:var(--dark2);border:1px solid var(--line);box-shadow:0 26px 70px rgba(0,0,0,.6)}
/* The author display:flex below beats the UA rule for [hidden], so the
   panel must be re-hidden explicitly or it never closes. */
.savvy-panel[hidden]{display:none}
.savvy-head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border-bottom:1px solid var(--line);background:var(--card)}
.savvy-head img{border-radius:50%;flex:0 0 auto;object-fit:cover;box-shadow:0 0 0 1px var(--ember-soft)}
.savvy-head div{flex:1;min-width:0}
.savvy-head b{display:block;font-family:"Syne",sans-serif;font-size:.95rem}
.savvy-head span{font-size:.74rem;color:var(--muted)}
.savvy-close{background:none;border:0;color:var(--muted);font-size:1.35rem;line-height:1;cursor:pointer;padding:.2rem .35rem}
.savvy-close:hover{color:var(--ember)}

.savvy-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.savvy-msg{display:flex}
.savvy-user{justify-content:flex-end}
.savvy-bubble{max-width:85%;padding:.65rem .85rem;font-size:.9rem;line-height:1.5;border:1px solid var(--line)}
.savvy-bot .savvy-bubble{background:var(--card);border-left:2px solid var(--ember)}
.savvy-user .savvy-bubble{background:var(--card2);border-right:2px solid var(--electric)}
.savvy-typing .savvy-bubble{display:flex;gap:4px;align-items:center}
.savvy-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:savvyBlink 1.1s infinite}
.savvy-typing i:nth-child(2){animation-delay:.16s}
.savvy-typing i:nth-child(3){animation-delay:.32s}
@keyframes savvyBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.savvy-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .6rem}
.savvy-quick.is-hidden{display:none}
.savvy-q{background:var(--card);border:1px solid var(--line);color:var(--text);
  font-size:.78rem;padding:.4rem .7rem;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.savvy-q:hover{border-color:var(--ember-soft);color:var(--ember)}

.savvy-form{display:flex;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--line);align-items:flex-end}
.savvy-form textarea{flex:1;resize:none;background:var(--dark);border:1px solid var(--line);color:var(--text);
  font:400 .9rem/1.45 "DM Sans",sans-serif;padding:.55rem .7rem;
  height:38px;min-height:38px;max-height:110px;overflow-y:auto}
.savvy-form textarea:focus{outline:none;border-color:var(--ember-soft)}
.savvy-send{flex:0 0 auto;width:40px;height:38px;border:0;background:var(--solar);color:#111;
  font-size:1.05rem;font-weight:700;cursor:pointer}
.savvy-send:hover{background:var(--ember);color:#fff}
.savvy-foot{margin:0;padding:0 1rem .8rem;font-size:.68rem;color:var(--muted)}

@media (max-width:560px){
  .savvy-panel{right:.7rem;left:.7rem;width:auto;bottom:5rem;height:min(72vh,520px)}
  .savvy-trigger{right:1rem;bottom:1rem;width:54px;height:54px}
  .savvy-trigger img{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .savvy-trigger,.savvy-typing i{transition:none;animation:none}
}


/* ── Touch device corrections ────────────────────────────── */
/* iOS keeps :hover applied after a tap, so hover states stick until the
   user taps elsewhere. That is why the send arrow stays orange. */
@media (hover:none){
  .savvy-send:hover{background:var(--solar);color:#111}
  .savvy-q:hover{border-color:var(--line);color:var(--text)}
  .chips span:hover{border-color:var(--line);color:var(--text)}
  .qa:hover{background:transparent}
  .svc:hover{background:var(--card)}
  .svc:hover h3{color:var(--text)}
  .svc:hover::before{transform:scaleX(0)}
  .savvy-trigger:hover{transform:none}
}

/* Phone landscape: short viewport, so the chat panel must not exceed it. */
@media (max-height:520px) and (orientation:landscape){
  .savvy-panel{height:calc(100dvh - 5.5rem);bottom:1rem;right:1rem;top:auto}
  .savvy-trigger{width:46px;height:46px;right:1rem;bottom:1rem}
  .savvy-trigger img{width:36px;height:36px}
  .savvy-quick{display:none}
}

/* Between the phone breakpoint and desktop the status pill sat underneath
   the chat trigger in the bottom-right corner. Move it clear. */
@media (min-width:561px) and (max-width:1120px){
  .status-pill{right:auto;left:0;bottom:4%}
}