/* A to Z Technologies - design layer (v20). Loads after site.css and overrides it.
   Idea: a survey / field-map look. Contour lines = land, flight lines = air, the teal fiber link ties it all to the "o" hub in the logo. */
:root{
  --pat:url(../brand/fiber.svg);
  --ink:#12202b; --navy:#0b2540; --navy-2:#12365a;
  --paper:#eef3f4; --line:#cfd9dc; --muted:#4a5a66;
  --accent:#d9a12b; --accent-ink:#7a5208; --teal:#179eaf; --link:#0f6a86;
  --radius:6px;
  --head:"Archivo","Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans","Source Sans 3","Segoe UI",Arial,system-ui,sans-serif;
}
body{font-family:var(--body);font-size:17.5px;background:var(--paper)}
h1,h2,h3{font-family:var(--head);font-stretch:112%;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.2vw,64px);line-height:1.04}
h2{font-size:clamp(28px,3.3vw,42px);line-height:1.1}
h3{font-weight:700;font-stretch:104%}
.nav a,.btn,.card .more{font-family:var(--head);font-stretch:100%}

/* labels: plain sentence case instead of tracked caps */
.eyebrow{text-transform:none;letter-spacing:0;font-size:17px;font-weight:600;color:var(--accent-ink);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(23,158,175,.35)}
.on-dark .eyebrow{color:#f0bb52}
.card h4,.site-footer h4{text-transform:none;letter-spacing:0;font-size:17px}

/* survey-map backgrounds on dark sections */
.hero.on-dark,.cta,.on-dark.band-dark,section.on-dark{position:relative;isolation:isolate}
.hero.on-dark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pat) center/cover no-repeat;opacity:.22}
.hero-home{padding:76px 0 72px;background:linear-gradient(180deg,#0b2540,#0d2d4d)}
.hero.photo.on-dark::before{display:none}

/* hero logo: fiber links draw in once on load */
@media (prefers-reduced-motion:no-preference){
  .logo-live .ll-links path{stroke-dasharray:60;stroke-dashoffset:60;animation:fiber 1.6s .35s ease-out forwards}
  .logo-live .ll-links circle{opacity:0;animation:node .4s 1.5s ease-out forwards}
  .logo-live .hub{animation:hub 1.2s 1.6s ease-out both}
}
@keyframes fiber{to{stroke-dashoffset:0}}
@keyframes node{to{opacity:1}}
@keyframes hub{0%{box-shadow:0 0 0 0 rgba(23,158,175,.8)}100%{box-shadow:0 0 0 18px rgba(23,158,175,0)}}
.logo-panel{border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.35)}

/* section heads get the fiber link motif */
section h2{position:relative}
.sec-rule,section>.wrap>h2::after{content:none}
.card{border-radius:var(--radius);border-color:var(--line)}
.card:hover{border-color:var(--teal);box-shadow:0 10px 26px rgba(11,37,64,.14)}
.card li::before{background:var(--teal)}

/* empty photo areas look like a field map, not a blank box */
figure.img-missing,.slot.img-missing,.card figure,.slot{
  background:#0f3050 var(--pat) center/cover no-repeat}
figure.img-missing,.slot.img-missing{background-blend-mode:normal}
.card figure:not(:has(img[src])){background:#0f3050 var(--pat) center/cover}
.slot.img-missing .slot-label i{color:#f0bb52;text-transform:none;letter-spacing:0;font-size:13px}

/* three-fact strip under the hero */
.facts{background:#fff;border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.facts div{padding:22px 26px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font:800 21px var(--head);font-stretch:108%;color:var(--navy)}
.facts span{font-size:16px;color:var(--muted)}
@media(max-width:760px){.facts .wrap{grid-template-columns:1fr}.facts div{border-left:0;border-top:1px solid var(--line);padding-left:0}.facts div:first-child{border-top:0}}

/* contact line */
.phone{white-space:nowrap}
.site-footer .phone,.cta .phone{font-weight:600}
section.facts{padding:0}
.logo-live .tile{background:#0f3050 var(--pat) center/cover no-repeat}

/* Precision Aerial hero: the logo's drone artwork on white, scaled to fit (never stretched) */
.hero-art{background:#fff;color:var(--ink);padding:56px 0 40px;border-bottom:1px solid var(--line)}
.hero-art-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
.hero-art h1{color:var(--navy)}
.hero-art .lede{color:var(--muted);font-size:20px;max-width:540px}
.hero-art .eyebrow{color:var(--accent-ink)}
.hero-art-img{width:100%;height:auto;object-fit:contain}
.hero-art .btn.ghost{color:var(--navy);border-color:var(--navy)}
.hero-art .btn.ghost:hover{background:var(--navy);color:#fff}
@media(max-width:820px){.hero-art-grid{grid-template-columns:1fr}.hero-art-img{order:-1}}

/* ---- hero logo panel: quadrant geometry, fiber routed around the wording, hover labels ---- */
.logo-live .t-mobile,.logo-live .t-install{top:2%;height:33%}
.logo-live .t-aerial,.logo-live .t-marine{top:61.5%;height:30%}
.logo-live .ll-word{top:43.4%}
.logo-live .tile{cursor:pointer;transition:box-shadow .2s}
/* label hidden until hover or keyboard focus; the whole quadrant is the link */
.logo-live .tile>span{left:0;right:0;bottom:0;top:auto;transform:none;border-radius:0;
  background:linear-gradient(0deg,rgba(11,37,64,.92),rgba(11,37,64,.55) 70%,rgba(11,37,64,0));
  padding:28px 10px 10px;font:700 15px/1.1 var(--head);letter-spacing:.02em;text-transform:none;text-align:center;white-space:normal;
  opacity:0;transition:opacity .18s ease}
.logo-live .tile:hover>span,.logo-live .tile:focus-visible>span{opacity:1;background:linear-gradient(0deg,rgba(11,37,64,.92),rgba(11,37,64,.55) 70%,rgba(11,37,64,0))}
.logo-live .tile>span::after{content:" \2192"}
.logo-live .tile:hover,.logo-live .tile:focus-visible{box-shadow:0 0 0 3px #179eaf}
/* touch screens cannot hover, so keep the labels visible there only */
@media (hover:none){.logo-live .tile>span{opacity:1}}
@media (prefers-reduced-motion:reduce){.logo-live .tile>span{transition:none}}

/* ---- home hero: the real logo, with four clickable quadrants and hover-only labels ---- */
.logo-map{background:#fff;overflow:hidden}
.logo-map img{width:100%;height:auto;display:block}
.logo-map .hot{border-radius:10px;cursor:pointer;transition:background .18s,box-shadow .18s}
.logo-map .hot span{left:50%;bottom:8%;transform:translateX(-50%);opacity:0;background:rgba(11,37,64,.94);font:700 15px/1 var(--head);text-transform:none;letter-spacing:.02em;padding:9px 14px;transition:opacity .18s}
.logo-map .hot span::after{content:" \2192"}
.logo-map .hot:hover,.logo-map .hot:focus-visible{background:rgba(23,158,175,.10);box-shadow:inset 0 0 0 3px #179eaf;outline:0}
.logo-map .hot:hover span,.logo-map .hot:focus-visible span{opacity:1;background:rgba(11,37,64,.94)}
@media (hover:none){.logo-map .hot span{opacity:1;font-size:11px;padding:6px 8px}}
@media (prefers-reduced-motion:reduce){.logo-map .hot,.logo-map .hot span{transition:none}}

/* background pattern per division: fiber for networks, spray/prop wash for aerial, depth soundings for marine */
body.t-fiber{--pat:url(../brand/fiber.svg)}
body.t-spray{--pat:url(../brand/spray.svg)}
body.t-depth{--pat:url(../brand/contours.svg)}
.hero.on-dark::before{background-image:var(--pat)}
.hero.on-dark::before{opacity:.3}
.hero-art{position:relative;isolation:isolate;overflow:hidden}
.hero-art::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pat) center/cover no-repeat;opacity:.16}

/* division hero picture is a link to that page's services, with a label on hover */
.hero-art-link{position:relative;display:block;border-radius:10px;text-decoration:none;cursor:pointer}
.hero-art-link span{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);background:rgba(11,37,64,.94);color:#fff;font:700 16px/1 var(--head);padding:11px 16px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .18s}
.hero-art-link:hover span,.hero-art-link:focus-visible span{opacity:1}
.hero-art-link:hover,.hero-art-link:focus-visible{box-shadow:0 0 0 3px #179eaf;outline:0}
@media (hover:none){.hero-art-link span{opacity:1;font-size:13px;padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.hero-art-link span{transition:none}}