/*
  Rack Standard — the look.

  One typeface, three widths, each with one job (Archivo is a variable font
  with a real width axis, the same idea as lettering silk-screened on
  equipment faceplates):
    wide   (125%)  the travelling word only
    normal (100%)  headlines and reading text
    narrow (75%)   small working labels: tab names, status lines

  Colors come from the equipment room itself:
    --powder  rack steel, black powder-coat
    --aisle   the cool white of the room's walls and floor tile
    --aqua    OM3/OM4 fiber jacket (the patch cables in the photo)
    --green   Attenus brand green, also the patch cords in the close-up
    --link    a port's link light — used ONLY for tiny LEDs, never for areas
    --steel   secondary text on dark

  Without JavaScript the hero chapters stack as ordinary content. app.mjs adds
  `.js-story` to <html> to switch on the pinned, scroll-driven version, and
  leaves it off when the visitor prefers reduced motion.
*/
:root{
  --powder:#0e1417; --aisle:#eef2f3; --aqua:#35b8c6; --green:#056839;
  --link:#a6e22e; --steel:#9aa7ad; --ink:#10161a; --rule:#10161a24;
  --fx:.5; /* horizontal object-position of the hero photo, 0–1; app.mjs reads it */
  --word-cap:.125; /* largest travelling-word size as a share of stage width; app.mjs reads it */
  --gutter:clamp(20px,6vw,96px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--aisle);color:var(--ink);font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.55;font-stretch:100%}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,dl,dd,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:#fff;color:var(--ink);padding:10px 14px}
.skip:focus{left:12px;top:12px}

/* ---------- shared pieces ---------- */
.button{display:inline-block;padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:16px;line-height:1;transition:background-color .15s,color .15s,border-color .15s}
.button.solid{background:#f4f8f8;color:var(--powder)}
.button.solid:hover{background:#fff}
.button.ghost{border:1px solid #ffffff59;color:#fff;padding:11px 20px;font-size:15px}
.button.ghost:hover{border-color:#fff}
.button.light{background:#fff;color:var(--green)}
.button.light:hover{background:var(--aisle)}
.text-link{font-weight:500;text-underline-offset:5px;text-decoration-thickness:1px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- hero: stacked fallback first ---------- */
.stage{position:relative;background:var(--powder);color:#f2f7f8;overflow:hidden}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(var(--fx)*100%) 50%}
.photo.near,.word{display:none}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,#0e1417f0 0%,#0e1417cc 34%,#0e141766 60%,#0e141726 100%)}
.top{position:relative;z-index:6;display:flex;align-items:center;gap:32px;padding:26px var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-stretch:125%;font-weight:600;font-size:19px;letter-spacing:.08em}
.top nav{margin-left:clamp(24px,4vw,56px);display:flex;gap:30px;font-size:15px}
/* The menu sits on the left, next to the logo, over the calm side of the photo (Grant, 2026-09-19: on the right it blended into the racks). The shadow keeps it readable on any picture; the phone number is set a little heavier so it is easy to find. */
.top nav a{text-decoration:none;color:#fff;text-shadow:0 1px 8px #000c}
.top nav a[href^="tel:"]{font-weight:600}
.top nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.chapters{position:relative;z-index:5;padding:40px var(--gutter) 72px;display:grid;gap:64px;max-width:760px}
.copy h1,.copy h2{font-weight:500;letter-spacing:-.032em;line-height:1.02;font-size:clamp(42px,5.3vw,84px);text-wrap:balance}
.copy h2{font-size:clamp(38px,4.6vw,72px)}
.copy>p{margin-top:22px;max-width:34em;color:#d5dfe2;font-size:clamp(16px,1.25vw,19px)}
.copy .actions{margin-top:34px;color:#fff}
.status{display:flex;align-items:center;gap:10px;font-stretch:75%;font-weight:600;font-size:15px;letter-spacing:.02em;color:#eef6f7!important}
.status i{width:8px;height:8px;border-radius:50%;background:var(--link);box-shadow:0 0 10px var(--link)}
.panel{display:none}

/* ---------- hero: pinned, scroll-driven version ---------- */
.js-story .story{height:620svh}
.js-story .stage{position:sticky;top:0;height:100svh;min-height:620px}
.js-story .top{position:absolute;inset:0 0 auto 0}
.js-story .photo.near{display:block;z-index:3}
.js-story .word{display:block;position:absolute;left:0;top:21%;z-index:2;white-space:nowrap;pointer-events:none;
  font-stretch:125%;font-weight:800;font-size:100px;line-height:.9;letter-spacing:-.025em;
  opacity:0;will-change:transform,opacity}
.js-story .word-light{color:#fff;mix-blend-mode:soft-light}
.js-story .word-body{color:#e9f6f8;-webkit-text-stroke:0;filter:none}
.js-story .chapters{position:absolute;z-index:5;left:var(--gutter);bottom:clamp(120px,19svh,190px);padding:0;display:block;width:min(46%,680px);max-width:none}
.js-story .copy{position:absolute;left:0;bottom:0;width:100%;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
.js-story .copy.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .45s ease .1s}


/* chapter switcher: five separate pills, no bar, no underline; the current one is solid white */
.js-story .panel{display:flex;flex-wrap:wrap;position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);bottom:34px;gap:10px}
.panel button{display:inline-flex;align-items:baseline;gap:8px;background:#0a0f12a6;border:1px solid #ffffff59;border-radius:999px;color:#e4ecee;font:inherit;font-stretch:75%;font-weight:600;font-size:14px;letter-spacing:.02em;padding:9px 16px;cursor:pointer;backdrop-filter:blur(6px);transition:background-color .15s,color .15s,border-color .15s}
.panel button:hover{border-color:#fff;color:#fff}
.panel span{line-height:1.1}
.panel button[aria-current="true"]{background:#f4f8f8;border-color:#f4f8f8;color:var(--powder)}

/* ---------- the standard ---------- */
.standard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--aisle)}
.standard figure{margin:0;min-height:560px;position:relative}
.standard figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.standard-text{padding:clamp(56px,8vw,128px) var(--gutter) clamp(56px,8vw,120px) clamp(28px,5vw,88px)}
.standard h2,.services h2,.process h2,.closing h2{font-weight:500;letter-spacing:-.03em;line-height:1.04;font-size:clamp(34px,4vw,62px);text-wrap:balance}
.lede{margin-top:20px;max-width:30em;font-size:19px;color:#3d484e}
.standard dl{margin-top:44px;border-top:1px solid var(--rule)}
.standard dl div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:8px 32px;padding:24px 0;border-bottom:1px solid var(--rule)}
.standard dt{font-weight:600;font-size:19px;letter-spacing:-.01em}
.standard dd{color:#3d484e}

/* ---------- services as a rack elevation: one unit per service ---------- */
.services{padding:clamp(64px,9vw,136px) var(--gutter);background:#fff}
.elevation{margin-top:clamp(36px,5vw,64px);border:1.5px solid var(--ink);border-width:0 1.5px;padding:0 clamp(14px,2vw,28px)}
.elevation li{border-top:1px solid var(--rule)}
.elevation li:last-child{border-bottom:1px solid var(--rule)}
.elevation a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;gap:12px 40px;padding:30px clamp(8px,1.5vw,20px);text-decoration:none;transition:background-color .15s}
.elevation a:hover,.elevation a:focus-visible{background:var(--aisle)}
.elevation strong{font-weight:600;font-size:clamp(21px,2vw,28px);letter-spacing:-.015em}
.elevation span{color:#3d484e;max-width:44em}

/* ---------- how a job runs: the walk down the aisle ---------- */
.process{padding:clamp(64px,9vw,128px) var(--gutter);background:var(--aisle)}
.process h2{font-weight:500;letter-spacing:-.03em;line-height:1.04;font-size:clamp(34px,4vw,62px);text-wrap:balance}
.walk{--fx:.5;position:relative;margin-top:clamp(28px,4vw,48px);height:clamp(300px,50vh,560px);overflow:hidden;background:var(--powder)}
.walk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(var(--fx)*100%) 45%}
.steps{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(28px,5vw,80px)}
.tape{display:inline-block;background:#f5f7f4;color:var(--ink);border-left:3px solid var(--ink);padding:5px 12px 5px 11px;font-stretch:75%;font-weight:600;font-size:16px;letter-spacing:.02em;box-shadow:0 2px 10px #0000001f}
.steps p{margin-top:14px;color:#3d484e;max-width:26em}
.process .reach{margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid var(--rule);max-width:44em;font-size:19px;color:#2c363b}

/* ---------- closing ---------- */
/* Vendor logo band (like LMI's): real logos in their own colors on white, no heading.
   Still by default; vendors.mjs adds .sliding only when the logos overflow the band. */
.vendors{background:#fff;padding:clamp(28px,4vw,48px) var(--gutter);overflow:hidden;border-top:1px solid var(--rule)}
.vendor-track{display:flex;align-items:center;gap:clamp(40px,6vw,88px);flex-wrap:wrap}
/* --logo-scale (set per logo in build-pages.mjs VENDORS) lets a tall, stacked logo stand taller than a wide one. */
.vendor-track img{height:calc(clamp(30px,3vw,42px) * var(--logo-scale,1));width:auto;max-width:none}
.vendors.sliding .vendor-track{flex-wrap:nowrap;width:max-content;animation:vendor-slide var(--slide-seconds,40s) linear infinite}
.vendors.sliding:hover .vendor-track{animation-play-state:paused}
@keyframes vendor-slide{to{transform:translateX(calc(-50% - clamp(40px,6vw,88px) / 2))}}
@media(prefers-reduced-motion:reduce){.vendors.sliding .vendor-track{animation:none;flex-wrap:wrap;width:auto}}

.closing{background:var(--green) url("./assets/patch-green-macro.jpg") right center/auto 100% no-repeat;color:#fff;position:relative}
.closing::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--green) 0%,var(--green) 42%,#056839d9 62%,#05683966 100%)}
.closing>div{position:relative;padding:clamp(72px,10vw,150px) var(--gutter);max-width:900px}
.closing h2{font-size:clamp(40px,5.4vw,86px)}
.closing p{margin-top:22px;font-size:19px;max-width:28em;color:#e3f1e9}
.closing .actions{margin-top:36px;color:#fff}
footer{display:flex;flex-wrap:wrap;gap:10px 40px;align-items:baseline;padding:30px var(--gutter);background:var(--powder);color:var(--steel);font-size:15px}
.footer-brand{font-stretch:125%;font-weight:600;letter-spacing:.08em;color:#fff}
/* The address (opens the Google listing) and the email sit together at the right end of the footer. */
.footer-contact{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 22px}
.nowrap{white-space:nowrap}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.footer-nav a{text-underline-offset:4px}

/* ---------- smaller screens ---------- */
@media(max-width:900px){
  /* Phones keep only the phone number, on the right, so it is one tap away. */
  .top nav{margin-left:auto}
  .top nav a:not([href^="tel:"]){display:none}
  .standard{grid-template-columns:1fr}
  .standard figure{min-height:300px}
  .standard-text{padding:56px var(--gutter)}
  .standard dl div{grid-template-columns:1fr}
  .elevation a{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
}
@media(max-width:700px){
  :root{--fx:.66;--word-cap:.3}
  .walk{height:420px}
  body{font-size:16px}
  .shade{background:linear-gradient(180deg,#0e1417d9 0%,#0e141780 24%,#0e141759 44%,#0e1417e6 72%,#0e1417 100%)}
  .js-story .word{top:16%;font-stretch:88%}
  .js-story .chapters{width:auto;right:var(--gutter);bottom:132px}
  .js-story .panel{bottom:22px;gap:8px}
  .panel button{padding:8px 12px;font-size:12px}
  .closing{background-size:cover}
  .closing::before{background:linear-gradient(180deg,var(--green) 0%,#056839e6 60%,#056839b3 100%)}
  .footer-contact{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}


/* ======================================================================
   INNER PAGES (service pages). Same parts as the home page; the hero is a
   single fixed picture with one word, driven by inner.mjs.
   ====================================================================== */
.page-hero{--word-cap:.1;position:relative;min-height:max(88svh,700px);background:var(--powder);color:#f2f7f8;overflow:hidden;display:flex;flex-direction:column}
.page-hero .photo.near{display:block;z-index:3}
.page-hero .word{display:block;position:absolute;left:0;top:13%;z-index:2;white-space:nowrap;pointer-events:none;
  font-stretch:125%;font-weight:800;font-size:100px;line-height:.9;letter-spacing:-.025em;opacity:0;will-change:transform,opacity}
.page-hero .word-light{color:#fff;mix-blend-mode:soft-light}
.page-hero .word-body{color:#e9f6f8}
.page-hero-copy{position:relative;z-index:5;margin-top:auto;padding:0 var(--gutter) clamp(48px,8svh,96px);max-width:calc(820px + var(--gutter))}
.page-hero-copy h1{font-weight:500;letter-spacing:-.03em;line-height:1.04;font-size:clamp(36px,4.4vw,68px);text-wrap:balance}
.page-hero-copy>p{margin-top:20px;max-width:36em;color:#d5dfe2;font-size:clamp(16px,1.25vw,19px)}
.page-hero-copy .actions{margin-top:30px;color:#fff}
.crumb{display:flex;gap:10px;margin-bottom:22px;font-stretch:75%;font-weight:600;font-size:15px;letter-spacing:.02em;color:#c6d2d6}
.crumb a{text-underline-offset:4px}

.scope{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,6vw,96px);padding:clamp(64px,9vw,128px) var(--gutter);background:#fff}
.scope h2,.fits h2,.faq h2{font-weight:500;letter-spacing:-.03em;line-height:1.04;font-size:clamp(34px,4vw,62px);text-wrap:balance}
.scope ul{border-top:1.5px solid var(--ink)}
.scope li{padding:18px 0;border-bottom:1px solid var(--rule);font-weight:600;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.01em}

.fits{padding:clamp(64px,9vw,128px) var(--gutter);background:var(--aisle)}
.fits dl{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px);border-top:1px solid var(--rule)}
.fits dl div{padding:26px 0;border-bottom:1px solid var(--rule)}
.fits dt{font-weight:600;font-size:21px;letter-spacing:-.01em}
.fits dd{margin-top:8px;color:#3d484e;max-width:30em}

/* Plain reading pages (the privacy policy): one measured column, headings sized to read rather than announce. */
.prose{padding:clamp(56px,8vw,112px) var(--gutter);background:#fff}
.prose>*{max-width:720px}
.prose h2{font-weight:500;letter-spacing:-.02em;line-height:1.1;font-size:clamp(26px,2.6vw,36px);margin-top:clamp(40px,5vw,64px)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{margin-top:16px;font-size:17px;line-height:1.6;color:#2b353a}
.prose ul{padding-left:1.2em;list-style:disc}
.prose li{margin-top:8px}
.prose a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px}

.faq{padding:clamp(64px,9vw,128px) var(--gutter);background:#fff}
.faq-list{margin-top:clamp(28px,4vw,48px);max-width:900px;border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-weight:600;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:26px;line-height:1;color:var(--green);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 24px;color:#3d484e;max-width:38em}
.services.related{background:var(--aisle)}
.services.related .elevation a:hover,.services.related .elevation a:focus-visible{background:#fff}

@media(max-width:900px){
  .scope{grid-template-columns:1fr}
  .fits dl{grid-template-columns:1fr}
}
@media(max-width:700px){
  .page-hero{--word-cap:.3}
  .page-hero .word{top:13%;font-stretch:88%}
  .page-hero-copy{padding-bottom:44px}
}

/* ---------- what you can count on: license, insurance, safety ---------- */
/* What customers say: the customers' own words, laid out like the assurance strip below it but on white. No stars, no quote-mark graphics. */
.voices{padding:clamp(56px,7vw,104px) var(--gutter);background:#fff}
.voices h2{font-weight:500;letter-spacing:-.025em;line-height:1.08;font-size:clamp(26px,2.8vw,42px)}
.voices ul{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(28px,4vw,64px)}
.voices li{border-top:1.5px solid var(--ink);padding-top:18px;display:flex;flex-direction:column}
.voices blockquote{margin:0}
.voices blockquote p{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:#2b353a;max-width:32em}
.voices .who{margin-top:auto;padding-top:16px;font-weight:600;font-size:15px;color:var(--ink)}
@media(max-width:900px){.voices ul{grid-template-columns:1fr;gap:26px}}

.assurance{padding:clamp(48px,6vw,88px) var(--gutter);background:var(--powder);color:#f2f7f8}
.assurance h2{font-weight:500;letter-spacing:-.025em;line-height:1.08;font-size:clamp(26px,2.8vw,42px)}
.assurance ul{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(28px,4vw,64px)}
.assurance li{border-top:1.5px solid #ffffff52;padding-top:18px}
.assurance strong{display:block;font-weight:600;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.015em}
.assurance span{display:block;margin-top:6px;color:#c6d2d6;max-width:24em}
@media(max-width:900px){.assurance ul{grid-template-columns:1fr;gap:22px}}

/* ---------- per-page picture position, and a heavier shade for bright pictures ---------- */
.page-hero{--fx:var(--fx-d,.5)}
.page-hero.dim .shade{background:linear-gradient(90deg,#0e1417f2 0%,#0e1417d1 38%,#0e1417a3 66%,#0e14178f 100%)}
@media(max-width:700px){
  .page-hero{--fx:var(--fx-m,.66)}
  .page-hero.dim .shade{background:linear-gradient(180deg,#0e1417e0 0%,#0e1417a8 26%,#0e141794 46%,#0e1417eb 74%,#0e1417 100%)}
}
/* ---------- contact page: three ways to reach us ---------- */
.contact-ways li{display:grid;gap:4px}
/* Where we are (contact page): the full address beside a small drawn map; the map and the link both open the Google listing. */
.where{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,6vw,96px);align-items:start;padding:0 var(--gutter) clamp(64px,9vw,128px);background:#fff}
.where h2{font-weight:500;letter-spacing:-.03em;line-height:1.04;font-size:clamp(34px,4vw,62px);text-wrap:balance}
.where address{margin-top:26px;font-style:normal;font-size:clamp(19px,1.6vw,23px);line-height:1.45}
.where-link{display:inline-block;margin-top:18px;font-weight:600;color:var(--green);text-underline-offset:5px;text-decoration-thickness:1.5px}
.where .map{display:block;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.where .map:hover,.where .map:focus-visible{border-color:var(--ink)}
.where .map img{width:100%;height:auto}
@media(max-width:900px){.where{grid-template-columns:1fr}}
.contact-ways a{font-weight:600;text-underline-offset:5px;text-decoration-thickness:1.5px;color:var(--green)}
.contact-ways span{font-weight:400;font-size:17px;letter-spacing:0;color:#3d484e}
/* ---------- home page: who we work for ---------- */
.services.buyers{background:var(--aisle);padding-top:0}
.services.buyers .elevation a:hover,.services.buyers .elevation a:focus-visible{background:#fff}