/* ==========================================================================
   aedesigninstall-com — "The Riser"
   One building, four services, one contractor. Ground is solid white; the
   page alternates white → ink → orange. The hero is a services riser section.
   base.css owns reset, shell, header mechanics, footer skeleton, reveals.
   ========================================================================== */

:root{
  /* --- palette (from BRIEF.md) --- */
  --ink:        #10151a;
  --ink-2:      #10151a;   /* ink bands */
  --ink-3:      #1a2229;
  --surface:    #ffffff;   /* solid white — no off-white anywhere */
  --surface-2:  #f4f5f6;
  --text:       #f2f4f5;
  --muted:      #9aa4ab;
  --ink-text:   #10151a;
  --ink-mute:   #6c757c;
  --accent:     #e2621b;
  --accent-lit: #ff8a4c;
  --accent-2:   #e2621b;
  --line:       rgba(255,255,255,.14);
  --line-d:     rgba(16,21,26,.13);
  --panel:      #f4f5f6;   /* schedule table cells only */
  --steel:      #6c757c;

  /* --- type --- */
  --font-display: "Antonio", "Arial Narrow", sans-serif;
  --font-body:    "Overpass", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap-max: 1240px;
  --radius:   2px;
}

::selection{ background:var(--accent); color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--text);
  padding:.7rem 1.1rem; font-family:var(--font-mono); font-size:.72rem;
}
.skip:focus{ left:1rem; top:1rem; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ==========================================================================
   PRELOADER — the riser draws itself, never the client logo
   ========================================================================== */
.pre__mark{ width:min(104px,26vw); color:var(--text); }
.pre__mark svg{ display:block; width:100%; height:auto; }
.pre__rise{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:pre-draw 1.15s var(--ease) forwards;
}
.pre__rise:nth-child(3){ animation-delay:0s; }
.pre__rise:nth-child(4){ animation-delay:.12s; }
.pre__rise:nth-child(5){ animation-delay:.24s; }
.pre__rise:nth-child(6){ animation-delay:.36s; }
.pre__ticks{ opacity:0; animation:pre-fade .5s ease .82s forwards; }
@keyframes pre-draw{ to{ stroke-dashoffset:0; } }
@keyframes pre-fade{ to{ opacity:1; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{ border-bottom:1px solid var(--line); }
.hdr__in{ min-height:78px; }

.brand{ display:inline-flex; align-items:center; gap:.62rem; color:var(--text); }
.brand__mark{ width:20px; height:33px; flex:none; }
.brand__txt{ display:block; min-width:0; }
.brand__name{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:1.45rem; line-height:.9; letter-spacing:.16em;
}
.brand__sub{
  display:block; margin-top:.34rem;
  font-family:var(--font-mono); font-size:.5rem; line-height:1;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}

.nav__link{ font-size:.84rem; letter-spacing:.01em; color:rgba(242,244,245,.84); }
.nav__link[aria-current="page"]{ color:var(--text); }
.nav__link[aria-current="page"]::after{
  content:""; width:4px; height:4px; background:var(--accent); flex:none;
}
.nav__util{ margin-left:.35rem; padding-left:.55rem; border-left:1px solid var(--line); }
.nav__util .nav__link{
  font-family:var(--font-mono); font-size:.71rem; letter-spacing:.04em; color:var(--muted);
}
.nav__cta{ margin-left:.4rem; }
.nav__cta .btn{ padding:.6rem .92rem; font-size:.76rem; }

@media (min-width:1024px){
  .nav__foot{ display:none; }
}

@media (max-width:1023px){
  .nav__util{ margin-left:0; padding-left:0; border-left:0; }
  .nav__util .nav__link{ font-size:.92rem; color:var(--text); }
  .nav__cta{ margin-left:0; border-bottom:0; padding-top:1.1rem; }
  .nav__cta .btn{ width:100%; justify-content:center; padding:.95rem 1rem; font-size:.9rem; }
  .nav__foot span{ font-size:.72rem; line-height:1.5; overflow-wrap:anywhere; }
}

/* ==========================================================================
   TYPE
   ========================================================================== */
.h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.02; letter-spacing:-.005em;
}

.shead{ display:flex; align-items:flex-start; gap:.65rem; margin-bottom:1.05rem; }
.shead__code{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); padding-top:.1rem;
}
.rtag{ width:13px; height:29px; flex:none; color:var(--accent); }

/* ==========================================================================
   HERO — white ground, the riser section on the right
   ========================================================================== */
.hero{
  position:relative;
  background:var(--surface);
  color:var(--ink-text);
  padding-block:clamp(2.4rem,5vw,4.4rem) clamp(2.4rem,5vw,3.8rem);
  border-bottom:1px solid var(--line-d);
}
@media (min-width:900px){
  .hero{ min-height:calc(100svh - 78px); display:flex; align-items:center; }
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.88fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center;
}
@media (max-width:899px){
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
}

.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.2rem;
}
.eyebrow__dot{ width:6px; height:6px; background:var(--accent); flex:none; }

.hero__h1{ font-weight:600; letter-spacing:-.015em; margin-bottom:1.4rem; }
.hero__lead{
  max-width:46ch; font-size:1rem; line-height:1.68;
  color:var(--ink-mute); margin-bottom:1.9rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; }
.btn--line{ border:1px solid var(--line-d); color:var(--ink-text); }
.btn--line:hover{ background:var(--ink); color:var(--text); border-color:var(--ink); }

.hero__trust{
  padding-top:1rem; border-top:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}
.hero__trust span{ color:var(--accent); }
.nw{ white-space:nowrap; }

.hero__draw{ margin:0; width:100%; max-width:520px; justify-self:end; min-width:0; }
.riser{ display:block; width:100%; height:auto; overflow:visible; }
.riser text{
  font-family:var(--font-mono); font-size:8.5px;
  letter-spacing:.12em; fill:var(--steel);
}
.riser .dwg__dim{ font-size:8px; letter-spacing:.08em; }
.riser .tagtxt{ font-size:11px; letter-spacing:0; fill:var(--ink); font-weight:500; }
.riser .tagtxt--sig{ fill:#ffffff; }

.draw__legend{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem;
  margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
}
.draw__legend b{
  display:block; font-size:.7rem; font-weight:500;
  color:var(--ink-text); letter-spacing:.04em;
}
.draw__legend span:first-child b{ color:var(--accent); }

/* ==========================================================================
   00 — WHO WE ARE (ink)
   ========================================================================== */
.who__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.8rem,4vw,3.6rem);
}
@media (max-width:820px){ .who__grid{ grid-template-columns:minmax(0,1fr); } }
.who__copy{ min-width:0; }
.who__copy p{
  margin-top:1.15rem; max-width:52ch;
  font-size:.97rem; line-height:1.72; color:rgba(242,244,245,.72);
}
.who__side{ min-width:0; border-left:1px solid var(--line); padding-left:clamp(1.2rem,3vw,2.4rem); }
@media (max-width:820px){ .who__side{ border-left:0; padding-left:0; } }

.who__quote{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.06;
  color:var(--text); text-wrap:balance;
}
.who__quote::before{
  content:""; display:block; width:34px; height:2px;
  background:var(--accent); margin-bottom:1.1rem;
}

.creds{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; margin-top:2rem; background:var(--line);
}
.creds > div{ background:var(--ink); padding:1rem .9rem; min-width:0; }
.creds dt{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--text); }
.creds dd{ margin:.3rem 0 0; font-size:.69rem; line-height:1.4; color:var(--muted); }

/* ==========================================================================
   SERVICE RUNS — 01 power / 02 life safety / 03 data / 04 security
   ========================================================================== */
.svc__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:start;
}
@media (max-width:860px){ .svc__grid{ grid-template-columns:minmax(0,1fr); gap:2.2rem; } }
.svc__grid--flip .svc__body{ order:2; grid-column:2; grid-row:1; }
.svc__grid--flip .svc__fig{ order:1; grid-column:1; grid-row:1; }
@media (max-width:860px){
  .svc__grid--flip .svc__body{ order:1; grid-column:1; grid-row:auto; }
  .svc__grid--flip .svc__fig{ order:2; grid-column:1; grid-row:auto; }
}
.svc__body{ min-width:0; }

.svc__lead{
  margin-top:1.2rem; max-width:46ch;
  font-size:1.06rem; line-height:1.55; color:var(--ink-text);
}
.sect--dark-2 .svc__lead{ color:var(--text); }
.svc__p{
  margin-top:.9rem; max-width:54ch;
  font-size:.94rem; line-height:1.72; color:var(--ink-mute);
}
.sect--dark-2 .svc__p{ color:rgba(242,244,245,.66); }

.svc__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:0 1.6rem; margin-top:1.6rem;
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);
}
.svc__list li{
  position:relative; padding:.62rem 0 .62rem 1.1rem;
  font-size:.86rem; line-height:1.45;
  border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);
}
.svc__list li::before{
  content:""; position:absolute; left:0; top:1.02em;
  width:5px; height:5px; border:1px solid var(--accent);
}

.run{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:1.8rem; }
.run li{
  position:relative; padding-top:1.05rem; padding-right:.5rem;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase; opacity:.45;
}
.run li::before{
  content:""; position:absolute; top:3px; left:0; right:0; height:1px;
  background:currentColor;
}
.run li::after{
  content:""; position:absolute; top:0; left:0;
  width:7px; height:7px; border-radius:50%;
  border:1px solid currentColor; background:transparent;
}
.run li.is-on{ opacity:1; }
.run li.is-on::after{ background:var(--accent); border-color:var(--accent); }
.run li:last-child::before{ right:auto; width:0; }
@media (max-width:560px){
  .run{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 0; }
}

.svc__fig{ position:relative; margin:0; min-width:0; }
.svc__fig::before{
  content:""; position:absolute; top:-1px; left:-1px; width:26px; height:26px;
  border-top:2px solid var(--accent); border-left:2px solid var(--accent);
  pointer-events:none;
}
.svc__fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--panel);
  border:1px solid color-mix(in srgb,currentColor 12%,transparent);
}
.svc__cap{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.55rem;
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   SCHEDULE — the bespoke artefact
   ========================================================================== */
.sched-sect .sect__head{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.schedwrap{ min-width:0; }
.sched{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:.88rem; }
.sched th,.sched td{
  padding:.85rem 1rem; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line-d);
}
.sched thead th{
  background:var(--panel); color:var(--ink-text);
  font-family:var(--font-mono); font-size:.55rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
}
.sched thead th:first-child{ width:34%; }
.sched thead th:not(:first-child){ width:16.5%; text-align:center; }
.sched tbody th{ font-weight:600; font-size:.92rem; color:var(--ink-text); }
.sched tbody td{ text-align:center; }
.sched tbody tr:last-child th,
.sched tbody tr:last-child td{ border-bottom:1px solid var(--ink); }

.tick{
  display:inline-block; width:11px; height:6px;
  border-left:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg) translateY(-2px);
}
.dash{ color:var(--steel); font-size:.9rem; }

.sched__note{
  margin-top:1rem; max-width:64ch;
  font-family:var(--font-mono); font-size:.57rem; line-height:1.6;
  letter-spacing:.04em; color:var(--steel);
}

@media (max-width:680px){
  .sched thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .sched,.sched tbody,.sched tr,.sched th,.sched td{ display:block; }
  .sched tr{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    padding-bottom:.9rem; margin-bottom:.9rem;
    border-bottom:1px solid var(--line-d);
  }
  .sched tr:last-child{ margin-bottom:0; border-bottom:0; }
  .sched tbody th{
    grid-column:1/-1; padding:.7rem 0 .5rem; border:0;
    font-size:1rem; border-bottom:1px solid var(--line-d);
  }
  .sched td{ padding:.55rem 0 0; border:0; text-align:left; }
  .sched td::before{
    content:attr(data-l); display:block; margin-bottom:.3rem;
    font-family:var(--font-mono); font-size:.47rem; letter-spacing:.06em;
    text-transform:uppercase; color:var(--steel);
  }
}

/* ==========================================================================
   SECTORS (ink)
   ========================================================================== */
.sectors{ margin-top:.4rem; }
.sectors li{
  display:grid; grid-template-columns:3rem minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(.8rem,2vw,2rem); align-items:baseline;
  padding-block:1.25rem; border-top:1px solid var(--line);
}
.sectors li:last-child{ border-bottom:1px solid var(--line); }
.sectors__n{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; color:var(--accent); }
.sectors h3{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1; letter-spacing:.01em;
}
.sectors p{ font-size:.9rem; line-height:1.55; color:rgba(242,244,245,.62); min-width:0; }
@media (max-width:640px){
  .sectors li{ grid-template-columns:2.2rem minmax(0,1fr); gap:.35rem 1rem; padding-block:1.1rem; }
  .sectors p{ grid-column:2; }
}

/* ==========================================================================
   ACCREDITATIONS (white)
   ========================================================================== */
.accred{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:1rem;
}
.accred li{
  display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--line-d); padding:1.15rem 1.1rem 1.25rem;
}
.accred__idx{
  display:block; font-family:var(--font-mono); font-size:.53rem;
  letter-spacing:.16em; color:var(--steel); margin-bottom:auto;
}
.accred img{
  width:100%; height:92px; object-fit:contain; object-position:left center;
  margin:1.2rem 0 1rem;
}
.accred__name{
  margin-top:0; font-family:var(--font-mono); font-size:.67rem;
  line-height:1.4; letter-spacing:.02em; color:var(--ink-text);
}
.accred__role{ margin-top:.3rem; font-size:.76rem; line-height:1.45; color:var(--ink-mute); }

/* ==========================================================================
   CTA (the one orange band)
   ========================================================================== */
.sect--cta{
  background:var(--accent); color:var(--ink);
  padding-block:clamp(2.6rem,6vw,4.4rem);
}
.sect--cta :focus-visible{ outline-color:var(--ink); }
.cta__in{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1.4rem 2.4rem;
}
.cta__kicker{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(16,21,26,.66); margin-bottom:.7rem;
}
.cta__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem,4vw,2.9rem); line-height:1.03; max-width:24ch;
}
.cta__tel{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.6rem,7vw,3.2rem); line-height:1; letter-spacing:.01em;
  border-bottom:2px solid rgba(16,21,26,.4); padding-bottom:.12rem;
  transition:border-color .2s;
}
.cta__tel:hover{ border-color:var(--ink); }

/* ==========================================================================
   CONTACT (white)
   ========================================================================== */
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4rem);
}
@media (max-width:760px){ .contact__grid{ grid-template-columns:minmax(0,1fr); } }
.contact__intro{ min-width:0; }
.contact__intro .sect__lead{ margin-top:1.2rem; }
.contact__tel{
  display:inline-block; margin-top:1.6rem;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1;
  border-bottom:2px solid var(--line-d); padding-bottom:.12rem;
  transition:border-color .2s;
}
.contact__tel:hover{ border-color:var(--accent); }

.contact__list{ margin:0; min-width:0; }
.contact__list > div{
  display:grid; grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);
  gap:1rem; padding-block:.95rem; border-top:1px solid var(--line-d);
}
.contact__list > div:last-child{ border-bottom:1px solid var(--line-d); }
.contact__list dt{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel); padding-top:.28rem;
}
.contact__list dd{ margin:0; min-width:0; overflow-wrap:anywhere; font-size:.92rem; line-height:1.55; }
.contact__list a{ border-bottom:1px solid var(--line-d); }
.contact__list a:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:700px){
  .contact__list > div{ grid-template-columns:minmax(0,1fr); gap:.25rem; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.brand--foot .brand__name{ font-size:1.3rem; }
.foot__blurb{
  margin-top:1.3rem; max-width:34ch;
  font-size:.84rem; line-height:1.62; color:var(--muted);
}
.foot__reg{
  margin-top:1rem; font-family:var(--font-mono); font-size:.57rem;
  line-height:1.7; letter-spacing:.06em; color:rgba(242,244,245,.42);
}
.foot__nav a{ overflow-wrap:anywhere; }
.foot__nav li{ min-width:0; }
.foot__nav{ grid-template-columns:1.05fr .72fr .92fr 1.31fr; }
@media (max-width:1023px){
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
.foot__bottom p{ max-width:60ch; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .pre__rise{ stroke-dashoffset:0; }
  .pre__ticks{ opacity:1; }
  .svc__fig::before{ display:none; }
}