/* ============================================================================
   Construction — page-scoped styles (.cn-*)

   Reuses the site design system (tokens, fonts, shared .wrap/.eyebrow/.etrack/
   .cta/.acmarq/.totop from home.styles.css) but gives Construction its OWN
   composition: a full-bleed site hero, an accreditation strip high on the page,
   big outlined numerals on the "what we build" cards, a horizontal delivery
   ribbon, and a full-width navy closing band. Distinct from the .pm-* and .fr-*
   pages by design. All colours come from the shared tokens with safe fallbacks.
   ============================================================================ */

:root{
  --cn-navy:var(--ink,#0A1F4D);
  --cn-navy2:var(--ink-2,#0C2A63);
  --cn-red:var(--red,#C8102E);
  --cn-amber:var(--amber,#ECB84C);
  --cn-cream:#e9f0fa;   /* light-blue band — lightened from #dce6f5 so the periwinkle cards stand out and dark text reads cleaner */
  --cn-lblue:#e9f0fa;   /* kept equal to --cn-cream so all light bands share one tone */
  --cn-card:#b9c5e2;    /* periwinkle — cards sit a shade deeper than the light-blue bands */
  --cn-line:rgba(10,31,77,.14);
  --cn-lined:rgba(255,255,255,.16);
  --cn-bd-light:rgba(10,31,77,.85);   /* solid navy border for blocks on light / light-blue bands (matches the home news card so cards don't blend into the band) */
  --cn-bd-dark:rgba(236,184,76,.42);  /* amber border for blocks on navy / dark bands */
  --cn-e:var(--e,cubic-bezier(.22,1,.36,1));
}

/* ---- section rhythm ---- */
.cn-sec{padding:clamp(18px,2.4vw,34px) 0;position:relative}
.cn-sec .wrap{position:relative;z-index:2}
.cn-shead{max-width:760px;margin:0 0 clamp(26px,3.4vw,44px)}
.cn-shead h2,.cn-intro-l h2,.cn-resi-l h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.022em;font-size:clamp(1.9rem,3.6vw,3rem);margin:.5rem 0 0;color:var(--cn-navy)}
.cn-sub{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.08rem,1.45vw,1.22rem);line-height:1.55;color:#0f2246;margin:.8rem 0 0;max-width:60ch}
/* light / light-blue bands inherit a dark default, so no text can fall back to
   the shared white --muted / body colour; the navy bands set white explicitly */
.cn-intro,.cn-build,.cn-resi,.cn-process,.cn-why,.cn-faq,.cn-accred{color:var(--cn-navy)}
.cn-sub a{color:var(--cn-red);text-decoration:none;border-bottom:1px solid rgba(200,16,46,.32)}
.cn-sub a:hover,.cn-sub a:focus-visible{border-bottom-color:var(--cn-red)}

/* moving eyebrow — accent set by the band behind it: amber on navy/dark,
   red on the light / light-blue bands (overrides the .d helper in the markup) */
.cn-eyebrow{--kc:var(--cn-red)}
.cn-eyebrow.d{--kc:var(--cn-amber)}
.cn-eyebrow .etrack span,.cn-eyebrow .etrack i{color:var(--kc)}
.cn-hero .cn-eyebrow,.cn-sectors .cn-eyebrow,.cn-related .cn-eyebrow{--kc:var(--cn-amber)}
.cn-intro .cn-eyebrow,.cn-build .cn-eyebrow,.cn-resi .cn-eyebrow,.cn-process .cn-eyebrow,.cn-why .cn-eyebrow,.cn-faq .cn-eyebrow{--kc:var(--cn-red)}

/* =========================================================== HERO ========= */
.cn-hero{position:relative;min-height:clamp(560px,82vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--cn-navy)}
.cn-hmedia{position:absolute;inset:0;z-index:0}
.cn-hmedia img{width:100%;height:100%;object-fit:cover;object-position:26% 0%;transform-origin:50% 0%;animation:cnkb 18s ease-in-out infinite alternate}
@keyframes cnkb{from{transform:scale(1)}to{transform:scale(1.16)}}   /* ken-burns zoom, pinned to the top so it never crops the top */
.cn-hero::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(7,17,45,.30) 0%,rgba(7,17,45,.10) 30%,rgba(7,17,45,.62) 78%,rgba(7,17,45,.86) 100%),
  linear-gradient(90deg,rgba(7,17,45,.72) 0%,rgba(7,17,45,.28) 52%,rgba(7,17,45,0) 82%)}
.cn-hero-inner{position:relative;z-index:2;width:100%;padding:clamp(28px,6vw,64px) clamp(18px,3.4vw,48px) clamp(40px,6vw,74px)}
.cn-crumb{margin:0 0 clamp(20px,4vw,40px)}
.cn-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-family:'PlexMono',ui-monospace,monospace;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.cn-crumb li{color:rgba(255,255,255,.62)}
.cn-crumb li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.4)}
.cn-crumb a{color:rgba(255,255,255,.82);text-decoration:none}
.cn-crumb a:hover,.cn-crumb a:focus-visible{color:#fff}
.cn-hero-copy{max-width:760px}
.cn-hero-copy h1{font-family:'Fraunces',Georgia,serif;font-weight:330;line-height:.98;letter-spacing:-.015em;font-size:clamp(3rem,9vw,6.2rem);margin:.35rem 0 0;color:#fff}
.cn-lead{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.14rem,1.8vw,1.42rem);line-height:1.5;color:rgba(255,255,255,.9);margin:clamp(16px,2vw,24px) 0 0;max-width:60ch}
.cn-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:clamp(20px,2.4vw,28px) 0 0;padding:0}
.cn-tags li{font-family:'PlexMono',ui-monospace,monospace;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:9px 15px;border:1px solid rgba(255,255,255,.28);border-radius:40px;background:rgba(255,255,255,.06)}

/* buttons (shared shape, page-scoped tones) */
.cn-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:clamp(26px,3vw,34px) 0 0}
.cn-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Manrope',system-ui,sans-serif;font-weight:650;font-size:1rem;line-height:1;padding:16px 26px;border-radius:40px;text-decoration:none;border:1px solid transparent;transition:transform .3s var(--cn-e),background .3s var(--cn-e),color .3s var(--cn-e),border-color .3s var(--cn-e)}
.cn-btn svg{width:19px;height:19px}
.cn-btn-primary{background:var(--cn-red);color:#fff;box-shadow:0 16px 34px rgba(200,16,46,.28)}
.cn-btn-primary:hover,.cn-btn-primary:focus-visible{background:var(--gold-hi,#E01B30);transform:translateY(-2px)}
.cn-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)}
.cn-btn-ghost:hover,.cn-btn-ghost:focus-visible{background:rgba(255,255,255,.16);transform:translateY(-2px)}

/* =================================================== ACCREDITATION STRIP === */
.cn-accred{background:var(--cn-lblue);padding:clamp(8px,1.1vw,15px) 0 clamp(30px,3.8vw,48px)}
.cn-accred .acmarq{margin-top:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* =========================================================== OVERVIEW ===== */
.cn-intro{background:var(--cn-cream)}
.cn-intro-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:start}
.cn-intro-r p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.62;color:#0f2246;margin:0 0 1rem}
.cn-intro-r p:last-child{margin-bottom:0}
.cn-intro-r a{color:var(--cn-red);text-decoration:none;border-bottom:1px solid rgba(200,16,46,.3)}
.cn-intro-r a:hover,.cn-intro-r a:focus-visible{border-bottom-color:var(--cn-red)}
.cn-intro-r b{color:var(--cn-navy)}

/* at-a-glance strip — confirmed facts only, no invented numbers */
.cn-glance{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);margin:clamp(34px,4.4vw,56px) 0 0;padding:clamp(22px,2.6vw,30px) 0 0}
/* rule above the stats — a pseudo-element so it can draw left-to-right in sync with the reveal */
.cn-glance::before{content:"";position:absolute;top:0;left:0;height:1px;width:100%;background:var(--cn-bd-light);transform-origin:left}
.cn-glance li{display:flex;flex-direction:column;gap:6px}
.cn-glance b{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.12;letter-spacing:-.02em;color:var(--cn-red)}
.cn-glance span{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.08rem,1.35vw,1.2rem);line-height:1.48;color:#0f2246;max-width:24ch}

/* ===================================================== WHAT WE BUILD ====== */
.cn-build{background:var(--cn-cream)}
.cn-buildgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.cn-bcard{position:relative;background:var(--cn-card);border:1.5px solid var(--cn-bd-light);border-radius:18px;padding:clamp(26px,2.6vw,34px);overflow:hidden;box-shadow:0 16px 40px rgba(10,31,77,.10);transition:transform .4s var(--cn-e),box-shadow .4s var(--cn-e),border-color .4s var(--cn-e)}
.cn-bcard::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--cn-red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--cn-e)}
.cn-bcard:hover{transform:translateY(-4px);box-shadow:0 26px 52px rgba(10,31,77,.14);border-color:transparent}
.cn-bcard:hover::before{transform:scaleX(1)}
.cn-bnum{font-family:'PlexMono',ui-monospace,monospace;font-size:clamp(2.1rem,3.4vw,3rem);font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(200,16,46,.5);letter-spacing:.02em;display:block}
.cn-bcard h3{font-family:'Manrope',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;font-size:clamp(1.2rem,1.7vw,1.42rem);line-height:1.14;color:var(--cn-navy);margin:clamp(14px,1.6vw,18px) 0 .5rem}
.cn-bcard p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.03rem,1.25vw,1.12rem);line-height:1.55;color:#0f2246}
.cn-bcard a{color:var(--cn-red);text-decoration:none;border-bottom:1px solid rgba(200,16,46,.32)}
.cn-bcard a:hover,.cn-bcard a:focus-visible{border-bottom-color:var(--cn-red)}

/* ========================================================== SECTORS ======= */
.cn-sectors{background:var(--cn-navy);color:#fff}
.cn-sectors .cn-shead h2{color:#fff}
.cn-sectors .cn-sub{color:rgba(255,255,255,.72)}
.cn-secgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,20px)}
.cn-seccard{background:rgba(255,255,255,.05);border:1px solid var(--cn-bd-dark);border-radius:16px;padding:clamp(22px,2.3vw,30px);position:relative;transition:transform .4s var(--cn-e),background .4s var(--cn-e)}
.cn-seccard::before{content:"";position:absolute;left:clamp(22px,2.3vw,30px);top:0;width:34px;height:3px;background:var(--cn-amber);transform:translateY(-0px)}
.cn-seccard:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.cn-seccard h3{font-family:'Manrope',system-ui,sans-serif;font-weight:680;font-size:clamp(1.12rem,1.5vw,1.28rem);color:#fff;margin:14px 0 .5rem}
.cn-seccard p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(.98rem,1.18vw,1.08rem);line-height:1.5;color:rgba(255,255,255,.72);margin:0}
.cn-seccard-wide{grid-column:span 4}
.cn-seccard-wide p{max-width:70ch}

/* ============================================ RESIDENTIAL FEATURE ========== */
.cn-resi{background:var(--cn-cream)}
.cn-resi-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center}
.cn-resi-l h2{margin-top:.4rem}
.cn-resi-l p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.1rem,1.45vw,1.26rem);line-height:1.6;color:#0f2246;margin:1rem 0 0}
.cn-resi-l a{color:var(--cn-red);text-decoration:none;border-bottom:1px solid rgba(200,16,46,.3)}
.cn-resi-l a:hover,.cn-resi-l a:focus-visible{border-bottom-color:var(--cn-red)}
.cn-resi-note{font-size:clamp(1.02rem,1.25vw,1.12rem)!important;color:#0f2246!important}
.cn-resi-list{list-style:none;margin:0;padding:clamp(26px,3vw,38px);display:grid;gap:14px;background:var(--cn-card);border:1.5px solid var(--cn-bd-light);border-left:4px solid var(--cn-red);border-radius:18px;box-shadow:0 24px 54px rgba(10,31,77,.1)}
.cn-resi-list li{display:flex;align-items:flex-start;gap:12px;font-family:'Manrope',system-ui,sans-serif;font-weight:560;font-size:clamp(1.08rem,1.35vw,1.2rem);color:var(--cn-navy);line-height:1.35}
.cn-tick{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--cn-red);position:relative}
.cn-tick::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}

/* =========================================================== PROCESS ====== */
.cn-process{background:var(--cn-lblue)}
.cn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px);counter-reset:cnstep;position:relative}
.cn-steps::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:repeating-linear-gradient(90deg,rgba(10,31,77,.24) 0 10px,transparent 10px 18px);z-index:0}
.cn-steps li{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.cn-stnum{width:46px;height:46px;flex:none;border-radius:50%;background:var(--cn-red);color:#fff;font-family:'PlexMono',ui-monospace,monospace;font-size:1rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--cn-lblue)}
.cn-steps h3{font-family:'Manrope',system-ui,sans-serif;font-weight:680;font-size:clamp(1.08rem,1.4vw,1.22rem);color:var(--cn-navy);margin:6px 0 0}
.cn-steps p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.5;color:#0f2246;margin:0}

/* ============================================================== WHY ======= */
.cn-why{background:var(--cn-cream)}
.cn-whygrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.cn-whygrid li{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,28px);background:var(--cn-card);border:1.5px solid var(--cn-bd-light);border-radius:16px;box-shadow:0 16px 40px rgba(10,31,77,.10)}
.cn-whygrid b{font-family:'Manrope',system-ui,sans-serif;font-weight:720;font-size:clamp(1.1rem,1.4vw,1.24rem);color:var(--cn-navy)}
.cn-whygrid span{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.02rem,1.22vw,1.12rem);line-height:1.5;color:#0f2246}

/* ==================================================== RELATED SERVICES ===== */
.cn-related{background:var(--cn-navy);color:#fff}
.cn-related .cn-shead h2{color:#fff}
.cn-related .cn-sub{color:rgba(255,255,255,.72)}
.cn-relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.cn-relcard{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,32px);background:rgba(255,255,255,.05);border:1px solid var(--cn-bd-dark);border-radius:18px;text-decoration:none;transition:transform .4s var(--cn-e),background .4s var(--cn-e)}
.cn-relcard:hover,.cn-relcard:focus-visible{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.cn-relcard h3{font-family:'Manrope',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;font-size:clamp(1.2rem,1.7vw,1.4rem);color:#fff;margin:0}
.cn-relcard p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.02rem,1.2vw,1.1rem);line-height:1.52;color:rgba(255,255,255,.74);margin:0;flex:1}
.cn-relgo{display:inline-flex;align-items:center;gap:8px;font-family:'PlexMono',ui-monospace,monospace;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cn-amber);margin-top:4px}
.cn-relgo svg{width:17px;height:17px;transition:transform .3s var(--cn-e)}
.cn-relcard:hover .cn-relgo svg,.cn-relcard:focus-visible .cn-relgo svg{transform:translateX(4px)}

/* ============================================================== FAQ ======= */
.cn-faq{background:var(--cn-cream)}
.cn-faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.5vw,18px);align-items:start}
.cn-faqcol{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,18px)}
.cn-q{background:var(--cn-card);border:1.5px solid var(--cn-bd-light);border-radius:14px;padding:0 clamp(18px,2vw,24px);box-shadow:0 10px 26px rgba(10,31,77,.08);transition:border-color .3s var(--cn-e),box-shadow .3s var(--cn-e)}
.cn-q[open]{border-color:rgba(200,16,46,.4);box-shadow:0 16px 36px rgba(10,31,77,.1)}
.cn-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,1.9vw,21px) 0;font-family:'Manrope',system-ui,sans-serif;font-weight:660;font-size:clamp(1.08rem,1.35vw,1.2rem);color:var(--cn-navy)}
.cn-q summary::-webkit-details-marker{display:none}
.cn-qi{position:relative;flex:none;width:20px;height:20px}
.cn-qi::before,.cn-qi::after{content:"";position:absolute;background:var(--cn-red);border-radius:2px}
.cn-qi::before{left:0;top:9px;width:20px;height:2.4px}
.cn-qi::after{left:9px;top:0;width:2.4px;height:20px;transition:transform .3s var(--cn-e)}
.cn-q[open] .cn-qi::after{transform:scaleY(0)}
.cn-a{padding:0 0 clamp(18px,2vw,22px)}
.cn-a p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.04rem,1.25vw,1.14rem);line-height:1.6;color:#0f2246;margin:0}
.cn-a a{color:var(--cn-red);text-decoration:none;border-bottom:1px solid rgba(200,16,46,.3)}
.cn-a a:hover,.cn-a a:focus-visible{border-bottom-color:var(--cn-red)}

/* ========================================================= FINAL CTA ====== */
.cn-final{background:var(--cn-lblue)}
.cn-final-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(22px,4vw,48px);max-width:1080px;margin-inline:auto;background:linear-gradient(160deg,var(--cn-navy2) 0%,var(--cn-navy) 72%);color:#fff;border:1.5px solid var(--cn-bd-dark);border-radius:clamp(20px,2.4vw,28px);padding:clamp(30px,4vw,54px);box-shadow:0 24px 54px rgba(10,31,77,.16)}
.cn-final-copy{flex:1 1 440px;max-width:640px}
.cn-final-copy h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.022em;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;color:#fff;margin:0}
.cn-final-copy p{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.55;color:rgba(255,255,255,.82);margin:.8rem 0 0}
.cn-final .cn-cta-row{margin:0;flex:none}

/* ============================================================ MOTION ====== */
html.js .cn-rev{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.js .cn-rev.is-in{opacity:1;transform:none}
html.js .cn-stagger>*{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e)}
html.js .cn-stagger.is-in>*{opacity:1;transform:none}
html.js .cn-stagger.is-in>*:nth-child(1){transition-delay:0ms}
html.js .cn-stagger.is-in>*:nth-child(2){transition-delay:500ms}
html.js .cn-stagger.is-in>*:nth-child(3){transition-delay:1000ms}
html.js .cn-stagger.is-in>*:nth-child(4){transition-delay:1500ms}
html.js .cn-stagger.is-in>*:nth-child(5){transition-delay:2000ms}
html.js .cn-stagger.is-in>*:nth-child(6){transition-delay:2500ms}
html.js .cn-stagger.is-in>*:nth-child(7){transition-delay:3000ms}
/* the horizontal delivery ribbon animates a touch slower, one step after another */
html.js .cn-steps>*{transition-duration:0.7s}
html.js .cn-steps.is-in>*:nth-child(1){transition-delay:0ms}
html.js .cn-steps.is-in>*:nth-child(2){transition-delay:500ms}
html.js .cn-steps.is-in>*:nth-child(3){transition-delay:1000ms}
html.js .cn-steps.is-in>*:nth-child(4){transition-delay:1500ms}
html.js .cn-steps.is-in>*:nth-child(5){transition-delay:2000ms}
/* at-a-glance — its own slow, staged slide-up; a dedicated observer adds .is-in
   only once the whole strip is fully in view, and removes it on exit to replay */
html.js .cn-glance>li{opacity:0;transform:translateY(34px);transition:opacity .9s var(--e),transform .9s var(--e)}
html.js .cn-glance.is-in>li{opacity:1;transform:none}
html.js .cn-glance.is-in>li:nth-child(1){transition-delay:0ms}
html.js .cn-glance.is-in>li:nth-child(2){transition-delay:500ms}
html.js .cn-glance.is-in>li:nth-child(3){transition-delay:1000ms}
html.js .cn-glance.is-in>li:nth-child(4){transition-delay:1500ms}
/* the rule line draws left-to-right in parallel with the stats appearing */
html.js .cn-glance::before{transform:scaleX(0);transition:transform 2.2s cubic-bezier(.25,.46,.45,.94)}
html.js .cn-glance.is-in::before{transform:scaleX(1)}

/* sectors — the amber accent on each card sweeps out to the end of the card then
   settles back to the short bar (the photo state), one card after another, once the
   whole block is in view; replays on full re-entry (driven by a dedicated observer) */
@keyframes cn-secsweep{0%{width:34px}50%{width:calc(100% - 2*clamp(22px,2.3vw,30px))}100%{width:34px}}
html.js .cn-sectors.is-in .cn-seccard::before{animation:cn-secsweep 0.9s cubic-bezier(.25,.46,.45,.94) both}
html.js .cn-sectors.is-in .cn-seccard:nth-child(2)::before{animation-delay:.65s}
html.js .cn-sectors.is-in .cn-seccard:nth-child(3)::before{animation-delay:1.3s}
html.js .cn-sectors.is-in .cn-seccard:nth-child(4)::before{animation-delay:1.95s}
html.js .cn-sectors.is-in .cn-seccard:nth-child(5)::before{animation-delay:2.6s}

@media (prefers-reduced-motion:reduce){
  html.js .cn-rev,html.js .cn-stagger>*,html.js .cn-steps>*,html.js .cn-glance>li,html.js .cn-glance::before{opacity:1!important;transform:none!important;transition:none!important}
  html.js .cn-sectors.is-in .cn-seccard::before{animation:none!important;width:34px!important}
  .cn-hmedia img{animation:none!important;transform:none!important}
}

/* ========================================================= RESPONSIVE ===== */
/* NB: the mobile burger dropdown (.navwrap.nav-open .nlinks) is provided by the
   shared home.styles.css and applies here too; construction only needed the JS
   toggle, which its scripts already ship. */
@media (max-width:1000px){
  .cn-intro-grid{grid-template-columns:1fr;gap:clamp(16px,3vw,24px)}
  .cn-buildgrid,.cn-relgrid,.cn-whygrid{grid-template-columns:1fr 1fr}
  .cn-secgrid{grid-template-columns:1fr 1fr}
  .cn-seccard-wide{grid-column:span 2}
  .cn-resi-grid{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .cn-glance{grid-template-columns:1fr 1fr;gap:22px}
  .cn-steps{grid-template-columns:1fr 1fr 1fr}
  .cn-steps::before{display:none}
  .cn-faqgrid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .cn-hero{min-height:0;padding-top:clamp(96px,26vw,140px)}
  .cn-buildgrid,.cn-relgrid,.cn-whygrid,.cn-secgrid,.cn-glance,.cn-steps{grid-template-columns:1fr}
  .cn-seccard-wide{grid-column:span 1}
  .cn-cta-row{flex-direction:column;align-items:stretch}
  .cn-btn{justify-content:center}
  .cn-final-inner{flex-direction:column;align-items:flex-start}
  .cn-final-copy{flex:0 0 auto;max-width:100%}
  .cn-final .cn-cta-row{align-self:stretch}
}