/* AGT Power, visual identity layer for t006
   Loads after the inline wireframe styles and restyles the same markup/classes
   in place: recolours via the existing custom properties, then layers in
   graphic treatment and responsive/accessibility polish on top of the
   accepted blue/navy identity from the locked v4 authority baseline.
   No structural selectors are introduced. */

:root{
  /* accepted blue/navy identity, matching the locked v4 authority baseline */
  --navy-900:#0B2545;
  --navy-800:#123A6B;
  --blue-600:#1D5BD6;
  --blue-500:#2E6FE8;
  --blue-100:#DDE8FB;
  --blue-050:#EEF4FE;

  --ink:#0E1726;
  --ink-2:#454B54;
  --ink-3:#71787F;
  --line:#D7DCE3;
  --line-2:#E9ECF1;
  --fill:#E1E5EB;
  --fill-2:#F1F3F6;
  --page:#FFFFFF;
  --shell:#F6F7F9;

  /* squarer, more architectural corners than the wireframe defaults */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:14px;

  --edge:rgba(11,37,69,.10);
  --glow:rgba(29,91,214,.16);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth;}
body{
  font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--blue-600);color:#fff;}

h1,h2,h3,h4{font-weight:800;}
h1{letter-spacing:-.03em;}
h2{letter-spacing:-.025em;}
.eyebrow{color:var(--blue-600);}
.eyebrow::before{background:var(--blue-600);height:3px;}
.lead,.copy-p{letter-spacing:-.005em;}

/* prevent flex/grid children forcing horizontal scroll at narrow widths */
.wrap,.hero-grid>div,.card-head,.trust-item,.hero-meta div,.map-cap,
.review-src,.step-card,.all-svc,.ftr-call,.chip-row,.hero-badge,
.hdr .wrap,.call .wrap,.stat,.svc-list li{min-width:0;}
img{max-width:100%;}
.slot-image{width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:inherit;}
.hero-ph,.all-svc-side,.shelly-ph{overflow:hidden;}

/* visible, on-brand focus ring everywhere, keyboard and pointer alike */
a,button,summary,.btn,.link,.src-link{outline-offset:3px;}
a:focus-visible,button:focus-visible,summary:focus-visible,
.btn:focus-visible,.link:focus-visible,.src-link:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--blue-600);
  outline-offset:3px;
  border-radius:4px;
}
summary:focus-visible{outline-offset:-2px;}

/* ---------- wireframe chrome bar: quieter, still legible ---------- */
.wf-bar{background:#B84A08;border-bottom:1px solid rgba(255,255,255,.08);}

/* ---------- header ---------- */
.hdr{
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(11,37,69,.05);
}
.brand-logo img{border-radius:2px;}
.brand .txt span{font-weight:700;color:var(--blue-600);}
.hdr .brand .txt span{font-weight:400;}
.nav a{position:relative;padding:6px 0;}
.nav a.on{color:var(--ink);}
.nav a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue-600);
}
.hdr-cta .btn-primary{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 20px -12px var(--glow);}

/* ---------- primary nav: Services submenu, keyboard and mouse alike,
   no JavaScript. :focus-within opens the panel the moment the trigger
   link is tabbed to, before the user tabs into the panel itself. ---------- */
.nav{align-items:center;}
.nav-item{position:relative;}
.submenu{
  list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:50%;
  min-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 24px 48px -28px rgba(11,37,69,.35);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:40;
}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.submenu li{padding:0;}
.submenu a{display:block;padding:11px 14px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:normal;}
.submenu a:hover,.submenu a:focus-visible{background:var(--blue-050);color:var(--blue-600);}

/* ---------- mobile nav: native <details> disclosure, no JavaScript ---------- */
.mobile-nav{position:static;}
.mobile-nav>summary{list-style:none;}
.mobile-nav>summary::-webkit-details-marker{display:none;}
.mobile-nav-panel{
  position:absolute;top:100%;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 24px 48px -28px rgba(11,37,69,.35);
  padding:8px 20px 18px;display:flex;flex-direction:column;z-index:35;
}
.mobile-nav-panel>a{padding:15px 4px;border-bottom:1px solid var(--line-2);color:var(--ink);font-weight:700;text-decoration:none;font-size:16px;}
.mobile-sub{border-bottom:1px solid var(--line-2);}
.mobile-sub summary{
  list-style:none;cursor:pointer;padding:15px 4px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;
}
.mobile-sub summary::-webkit-details-marker{display:none;}
.mobile-sub[open] summary{color:var(--blue-600);}
.mobile-sub a{display:block;padding:11px 4px 11px 16px;color:var(--ink-2);font-size:14.5px;font-weight:600;text-decoration:none;}
.mobile-sub a:hover,.mobile-sub a:focus-visible{color:var(--blue-600);}

/* ---------- buttons: a rocker-switch feel, not a SaaS pill ---------- */
.btn{
  border-radius:var(--r-sm);
  font-weight:700;
  letter-spacing:-.005em;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.btn-primary{
  background:var(--blue-600);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 14px 26px -16px var(--glow);
}
.btn-primary:hover{background:#0049C4;transform:translateY(1px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.22);}
.btn-ghost{border-color:var(--line);}
.btn-ghost:hover{border-color:var(--blue-600);color:var(--blue-600);}
.btn-on-blue{box-shadow:inset 0 -3px 0 rgba(11,37,69,.12);}
.btn-on-blue:hover{transform:translateY(1px);box-shadow:inset 0 -2px 0 rgba(11,37,69,.12);}
.btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.link{position:relative;}
.link .ico{transition:transform .15s ease;}
.link:hover .ico{transform:translateX(3px);}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(560px 360px at 88% -6%,var(--glow),transparent 70%),
    linear-gradient(180deg,var(--blue-050) 0%,#fff 62%);
  position:relative;
}
.hero .eyebrow{color:var(--blue-600);font-weight:400;}
.hero h1{color:var(--ink);}
.hero-actions .btn-primary{height:58px;font-size:16.5px;}
.hero-meta .ico{color:var(--blue-600);}
.hero-badge{
  border-color:var(--line);
  box-shadow:0 16px 32px -18px rgba(11,37,69,.28);
  border-left:3px solid var(--blue-600);
}
.hero-badge .ico{color:var(--blue-600);}

/* ---------- "no photo" placeholder state: a deliberate spec panel,
   not an empty wireframe box, corner brackets mark it as replacement-ready */
.ph{
  background:
    repeating-linear-gradient(135deg,rgba(11,37,69,.05) 0 1px,transparent 1px 13px),
    var(--fill-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  position:relative;
}
.ph::before,.ph::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border:2px solid rgba(11,37,69,.22);
}
.ph::before{top:10px;left:10px;border-right:0;border-bottom:0;}
.ph::after{bottom:10px;right:10px;border-left:0;border-top:0;}
.ph .glyph{color:var(--blue-600);opacity:.8;}
/* labels/tags are build-time spec notes, not part of the visual design.
   Drop them from view while leaving the elements (and their text) in the DOM. */
.ph-label,.ph-tag{display:none;}
.ph.blue{
  background:
    repeating-linear-gradient(135deg,rgba(29,91,214,.07) 0 1px,transparent 1px 13px),
    var(--blue-050);
  border-color:#C6D8FB;
}
.ph.blue::before,.ph.blue::after{border-color:rgba(29,91,214,.35);}
.ph.blue .glyph{color:var(--blue-600);opacity:.85;}
.all-svc-side.ph::before,.all-svc-side.ph::after{border-color:rgba(255,255,255,.4);}

/* ---------- trust bar ---------- */
.trust{background:var(--navy-900);}
.trust-item .ring{
  border-radius:var(--r-md);
  background:rgba(29,91,214,.22);
  border:1px solid rgba(29,91,214,.4);
}
.trust-item b{color:#fff;}

/* ---------- services ---------- */
.card{border-radius:var(--r-lg);box-shadow:0 18px 34px -26px rgba(11,37,69,.35);transition:box-shadow .15s ease,border-color .15s ease;}
.card:hover{border-color:var(--line);box-shadow:0 22px 40px -28px rgba(11,37,69,.3);}
.card-icon{border-radius:var(--r-md);background:var(--blue-050);border:1px solid var(--blue-100);}
.card h3{letter-spacing:-.02em;}

.all-svc{border-radius:var(--r-lg);background:var(--navy-900);}
.all-svc .eyebrow{color:var(--blue-500);}
.all-svc .eyebrow::before{background:var(--blue-500);}
.svc-list .ico{color:var(--blue-500);}
.svc-list li{border-bottom-color:rgba(255,255,255,.1);}

/* ---------- section rhythm: every band gets an obvious start/end.
   Plain sections sit on the shell tone (not page white) so they read as a
   band in their own right; tinted sections stay pale blue with a firmer
   rule. One alternating system, no extra colours introduced. ---------- */
.sec{background:var(--shell);border-top:1px solid var(--line);}
.sec.tint{background:var(--blue-050);border-top:1px solid #C6D8FB;border-bottom:1px solid #C6D8FB;}

/* ---------- shelly ---------- */
.chip{border-color:var(--line);color:var(--ink-2);}
.chip .ico{color:var(--blue-600);}

/* ---------- how we work ---------- */
.steps::before{background:var(--blue-100);}
.step-node{
  background:var(--blue-050);border-color:var(--blue-100);color:var(--blue-600);
  border-radius:var(--r-md);
  box-shadow:0 0 0 6px var(--shell),0 12px 22px -14px var(--glow);
}
.step:nth-child(odd) .step-node{
  background:var(--navy-900);border-color:var(--navy-900);
  box-shadow:0 0 0 6px var(--shell),0 12px 22px -14px rgba(11,37,69,.5);
}
.step-card{
  border-radius:var(--r-lg);
  box-shadow:0 18px 34px -26px rgba(11,37,69,.35);
  transition:box-shadow .15s ease,transform .15s ease;
}
.step-card:hover{box-shadow:0 22px 40px -22px rgba(11,37,69,.4);transform:translateY(-2px);}
.step-icon{
  border-radius:var(--r-md);background:var(--blue-050);color:var(--blue-600);
  box-shadow:inset 0 0 0 1px var(--blue-100);
}

/* ---------- reasons / reviews ---------- */
.review{border-radius:var(--r-lg);box-shadow:0 18px 34px -26px rgba(11,37,69,.35);transition:box-shadow .15s ease;}
.review:hover{box-shadow:0 22px 40px -28px rgba(11,37,69,.3);}
.stars.filled{color:var(--blue-600);}
.rating-tag.solid{color:var(--blue-600);background:var(--blue-050);border-color:var(--blue-100);}
.avatar.brand{background:var(--navy-900);border-color:var(--navy-900);color:#fff;font-weight:800;}
.src-link{color:var(--blue-600);background:var(--blue-050);border-color:var(--blue-100);}
.src-link:hover{background:var(--blue-100);}
.stats{border-radius:var(--r-lg);background:var(--navy-900);}
.stat b{color:#fff;}

/* ---------- areas ---------- */
.area-group li .dot{background:var(--blue-600);}
.area-group li.base .dot{background:var(--navy-900);}
.base-chip{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.map{border-radius:var(--r-lg);border-color:#C6D8FB;}
.map-tag,.map-cap{border-color:var(--line);}

/* ---------- call band: the clearest phone action on the page ---------- */
.call{
  background:var(--blue-600);
  position:relative;
}
.call h2{letter-spacing:-.02em;}
.call .btn-on-blue{
  box-shadow:0 18px 34px -16px rgba(11,37,69,.5);
}

/* ---------- faqs ---------- */
details summary .n{color:var(--blue-600);}
details summary .plus{border-radius:var(--r-sm);border-color:var(--line);color:var(--blue-600);transition:background-color .15s ease,color .15s ease;}
details[open] summary .plus{background:var(--blue-600);border-color:var(--blue-600);}
details summary{transition:background-color .15s ease;}
details:hover summary{background:var(--fill-2);}

/* ---------- footer ---------- */
.ftr{background:var(--navy-900);position:relative;}
.ftr h4{color:var(--blue-500);}
.ftr a{transition:color .15s ease;}
.ftr a:hover{color:#fff;}
.ftr .brand-logo{background:#fff;}
.ftr-call{background:rgba(29,91,214,.14);border-color:rgba(29,91,214,.35);border-radius:var(--r-md);}
.ftr-call b{color:#fff;}
.ftr-ident .ico{color:var(--blue-500);}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .btn-primary:hover,.btn-on-blue:hover{transform:none;}
}

/* ---------- responsive polish beyond the existing breakpoints ---------- */
@media (max-width:1080px){
  .hero-badge{border-left-width:3px;}
}
@media (max-width:400px){
  .wrap{padding:0 16px;}
  h1{font-size:29px;}
  h2{font-size:23px;}
  .hero-actions .btn-primary{height:52px;font-size:15px;}
  .hero-badge{padding:10px 12px;gap:10px;}
  .card-icon{width:44px;height:44px;flex:0 0 44px;}
  .all-svc{padding:22px 16px;}
  .ph::before,.ph::after{width:16px;height:16px;}
  .review{padding:20px;}
  .review h3{font-size:17px;}
  .stat b{font-size:23px;}
  .ftr-call{padding:18px;}
}