/* Motion v2. Loaded after styles.css and contact.css, which stay untouched.
   1. The locked typeface, Archivo Expanded, replaces the Barlow drift.
   2. The building: a blueprint in the pinned services column that fills in
      trade by trade as the ten services go by.
   3. The dark band is a scroll-scrubbed frame sequence on canvas.
   Delete this file and the motion.js tag to return to v1. */

:root{
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --text:"Archivo",system-ui,-apple-system,sans-serif;
}
body{font-stretch:100%}

/* Display type at Expanded width. Expanded runs about 60 percent wider than
   Barlow Condensed, so sizes and tracking come down to hold the same lines. */
.nav a.t,.navtelm,.heroword,h1,.svcsticky .k,.svcsticky h2,.svcitem .num,.svcitem h3,
.stat .n,.plate h2,.bandcopy .k,.bandcopy h3,.wordmark,.svcidx .now,.svcidx .of,
.svclab,.callbar .callk,.callbar .callno,.enq label,.standing .stk,.cta{font-stretch:125%}

.nav a.t{font-size:clamp(9.5px,.7vw,11.5px);letter-spacing:.07em;font-weight:600}
.heroword{font-weight:800;font-size:clamp(1.7rem,5.4vw,4.4rem);letter-spacing:.06em}
h1{font-weight:600;font-stretch:112%;font-size:clamp(1.15rem,2.3vw,1.8rem);line-height:1.2;max-width:22ch}
.svcsticky h2{font-size:clamp(1.6rem,2.5vw,2.45rem);line-height:1.06;letter-spacing:-.015em}
.svcitem h3{font-size:clamp(1.05rem,1.65vw,1.5rem);letter-spacing:.03em}
.svcitem .num{font-size:clamp(.9rem,1.1vw,1.05rem)}
.stat .n{font-size:clamp(2rem,3.8vw,2.9rem)}
.plate h2{font-size:clamp(1.7rem,3.5vw,2.8rem);letter-spacing:-.015em}
.bandcopy h3{font-size:clamp(1.55rem,3.3vw,2.6rem);max-width:17ch}
.callbar .callno{font-size:clamp(1.5rem,3vw,2.3rem)}
.svclab{font-size:.95rem}
.svcidx .now{font-size:1.9rem}
.cta{font-weight:700;font-size:.9rem;letter-spacing:.02em}
.wordmark{font-size:clamp(13px,1.2vw,16px)}

/* Split-line reveals: each line rises out of its own mask. */
.sn-line{padding-bottom:.08em}

/* The dark band canvas sits exactly where the video was. */
.bandcv{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The building */
.isob{margin:14px 0 0 -8px;width:calc(100% + 16px);max-width:470px}
.isob svg{display:block;width:100%;height:auto;overflow:visible}
.isob path,.isob circle{stroke:var(--steel);stroke-width:1;stroke-opacity:.34;
  stroke-dasharray:2.5 2.5;stroke-linejoin:round;stroke-linecap:round;fill-opacity:0;
  transition:fill-opacity .7s cubic-bezier(.16,1,.3,1),stroke-opacity .5s ease,
    stroke .45s ease,fill .45s ease}
.isob path:not([data-f]){fill:none}
.isob [data-f="t"]{fill:#F1EBE0}
.isob [data-f="l"]{fill:#D2C9BB}
.isob [data-f="r"]{fill:#BDB2A2}
.isob [data-f="w"]{fill:#355070}
.isob [data-f="s"]{fill:#E9E3D8}
.isob [data-f="p"]{fill:#F4EFE6}
.isob [data-f="tr"]{fill:#9AA79A}
.isob .pt.built path,.isob .pt.built circle{stroke-opacity:.82;stroke-dasharray:none;fill-opacity:1}
.isob .pt.built [data-f="w"]{fill-opacity:.62}
.isob .pt[data-svc="01"] path{stroke-width:1.7}
.isob .pt.on path,.isob .pt.on circle{stroke:var(--sienna);stroke-opacity:1}
.isob .pt.on [data-f="t"]{fill:#F6DDCB}
.isob .pt.on [data-f="l"]{fill:#E9B696}
.isob .pt.on [data-f="r"]{fill:#DA9670}
.isob .pt.on [data-f="w"]{fill:#C4501A}
.isob .pt.on [data-f="s"]{fill:#F3DCCB}
.isob .pt.on [data-f="tr"]{fill:#D9946F}
.isob .pt.outline path{stroke-opacity:0;stroke-dasharray:none;stroke-width:2.2}
.isob .pt.outline.on path{stroke-opacity:1;animation:isopulse 2.4s ease-in-out infinite}
@keyframes isopulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.25}}
@media(min-width:901px) and (max-height:1000px){.svcsticky>p:not(.svcnote){display:none}}
@media(min-width:901px){.svcsticky .cta.ghost{display:none}.svcsticky{top:clamp(84px,11vh,120px)}}
@media(max-width:900px){.isob{display:none}}

@media (prefers-reduced-motion: reduce){
  .isob path,.isob circle{transition:none}
  .isob .pt.outline.on path{animation:none}
}