/* Florida Stucco Contractors, version 4 (version 3's layout, plus Kevin's 10/14 meeting notes).
   Layout and type follow advancedstucco.com (Divi 4.13), measured off the live site
   on 29 Sept 2026 at a 1280px viewport. Values in comments are theirs.

   Colour, since 10/14: black, charcoal, stone grey and white, with the red from the
   FLS logo as the only accent. David's own direction on 9/2 was "white, black and
   grey", and on 10/14 he liked the black top bar; Advanced Stucco's blues went.
   Every text colour pair is WCAG AA (contrast noted where it is close). */

:root{
  --head:#000;         /* top bar and footer */
  --char:#141618;      /* dark sections: projects, why GCs call back, team, pop-up title */
  --graphite:#26292D;  /* contact band */
  --stone:#EEECE8;     /* light bands */
  --red:#D0262A;       /* the logo's red: rules, borders, hover. Not for small text on black (3.9:1) */
  --red-text:#B91F24;  /* red as text on white, 6.3:1 */
  --muted:#5A5F66;     /* secondary text on white or stone, 5.6:1 on stone */
  --ink:#111;
  --body:#333;
  --wrap:1024px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--body);font-family:'Montserrat',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-text)}
h1,h2,h3,h4{margin:0;font-family:'Poppins',Helvetica,Arial,sans-serif}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),100% - 32px);margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px 12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- header */
/* David likes the darker look: the top bar is black on every page (10/14). */
.site-head{background:var(--head);box-shadow:0 1px 0 rgba(255,255,255,.08);position:sticky;top:0;z-index:50}
.head-in{display:flex;align-items:center;justify-content:space-between;height:114px;padding:0 34px}   /* 114px tall, logo inset 34px */
.brand img{height:99px;width:auto}   /* David, 10/15: 15-20% bigger; was 84px */
.nav{display:flex;align-items:center;gap:22px;font-family:'Poppins',Helvetica,Arial,sans-serif}
.nav>li{list-style:none;position:relative}
.nav ul{margin:0;padding:0}
.nav a{color:#fff;text-decoration:none;font-size:17px;font-weight:600;line-height:1;display:block;padding:10px 0}
.nav a[aria-current="page"],.nav .has-sub.current>a{box-shadow:inset 0 -3px 0 var(--red)}   /* red on black is 3.9:1, so a red rule, not red text */
.nav a:hover{opacity:.75}
.has-sub>a{padding-right:18px}
.has-sub>a::after{content:"";position:absolute;right:2px;top:15px;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.sub{position:absolute;top:100%;left:-20px;background:var(--head);min-width:240px;padding:20px 0!important;border-top:3px solid var(--red);box-shadow:0 2px 5px rgba(0,0,0,.1);visibility:hidden;opacity:0;transition:opacity .2s}
.has-sub:hover .sub,.has-sub:focus-within .sub{visibility:visible;opacity:1}
.sub li{list-style:none}
.sub a{font-size:14px;padding:6px 20px}
.navtoggle{display:none;background:none;border:0;color:#fff;font:600 15px 'Poppins',sans-serif;cursor:pointer;padding:8px}
.navtoggle span{display:block;width:26px;height:3px;background:#fff;margin:5px 0}
/* David, 10/21 (site note 7): Facebook and Instagram beside the menu, after a thin rule. */
.nav .nav-social{display:flex;align-items:center;gap:4px;padding-left:18px;border-left:1px solid rgba(255,255,255,.35)}
.nav .nav-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0}
.nav .nav-social svg{width:20px;height:20px;fill:#fff}
.nav .nav-social a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------------------------------------------------------------- home: video hero (v4)
   Notes: video for the main page like Advanced Stucco, no bars, an overlay, the
   white logo, and "big, nice, quality" in the first ten seconds. The video
   covers the screen (object-fit: cover never letterboxes); the header floats
   over it and fades to black as you scroll.
   Kevin, 10/14: the old switch to black was choppy, because a gradient cannot
   cross-fade to a flat colour, so it jumped. Now the soft shade and the black are
   two layers, and site.js sets --solid from 0 to 1 over the first 180px of
   scrolling, so the bar darkens with your finger instead of snapping. */
.site-head.over{position:fixed;left:0;right:0;top:0;background:transparent;box-shadow:none}
.site-head.over::before,.site-head.over::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:opacity}
.site-head.over::before{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));opacity:calc(1 - var(--solid,0))}
.site-head.over::after{background:var(--head);box-shadow:0 1px 0 rgba(255,255,255,.08);opacity:var(--solid,0)}
.vhero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:#111 url(../img/homepage-wide-v2.jpg) center/cover}
html.chg-joe-video .vhero{background-image:url(../img/homepage-wide-v5.jpg)}   /* waiting change: build.py CHANGES */
html.chg-joe-video.chg-bab-video .vhero{background-image:url(../img/homepage-wide-v6.jpg)}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vh-ctl{position:absolute;right:20px;bottom:20px;z-index:3;display:flex;gap:10px;align-items:center}
.hero-video-toggle:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* David, 10/15: a small tagline off to the side, never over the middle of the footage. */
.vh-tag{position:absolute;left:34px;bottom:24px;z-index:2;max-width:calc(100% - 200px);margin:0;padding:9px 14px;
  background:rgba(0,0,0,.5);border-left:4px solid var(--red);color:#fff;
  font:700 14px/1.35 'Montserrat',sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.hero-video-toggle{position:static;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:3px;font:600 13px 'Montserrat',sans-serif;padding:8px 12px;cursor:pointer}

/* The 2025 EIFS Excellence Award (notes: "EIMA 2025 Excellence Awards, story", "link to EIMA") */
.award{padding:100px 0 80px;background:#fff}
.award .split{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.award img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
.award .gal{position:relative;display:block;border-radius:4px;overflow:hidden}
.award .gal img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.award .gal:hover img,.award .gal:focus-visible img{transform:scale(1.04)}
.award .gal:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.award .gal-n{position:absolute;left:16px;bottom:16px;background:#000;color:#fff;font:700 15px/1 'Montserrat',sans-serif;padding:11px 14px;border-radius:3px}
.pslot{display:flex;align-items:center;padding:20px;aspect-ratio:3/2;font:600 15px/1.5 'Montserrat',sans-serif;border-radius:4px}
/* The museum carousel (build.py award_section/award_media, the museum-photos change; Kevin 10/16).
   Round 3: full width and tall, like the film and the project tiles; the award's words
   sit above it. Only the arrows sit on the photo; the caption and "See all the photos"
   underneath; no dots, no Pause. A photo that is not wide (.fit) sits whole in the middle
   with a blurred, darkened copy filling the sides, so the small EIMA photos stay sharp
   and no building loses its top. Entrance: site.js adds .armed, then .in, the first time
   it scrolls into view; the photo wipes in left to right and settles. */
.award-big{padding-bottom:70px}
/* Kevin, 10/17: the title on top, the description under the photos. */
.award-big .award-head{margin-bottom:36px}
.award-big .award-head h2{max-width:none;margin-bottom:14px}
.award-big .award-head .proj{margin-bottom:0}
.award-big .award-words{margin-top:28px}
.award-big .award-words>*{max-width:820px}
.award-big .award-words>*:first-child{margin-top:0}
.mcar-frame{position:relative;height:clamp(380px,74vh,800px);overflow:hidden;background:#111;clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.mcar-view{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.mcar-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.5,0,.2,1);will-change:transform}
.mcar-slide{flex:0 0 100%;height:100%;margin:0;position:relative;overflow:hidden;cursor:zoom-in}
.award .mcar-slide img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 50%;border-radius:0;user-select:none;-webkit-user-drag:none}
.award .mcar-slide.fit .mcar-main{object-fit:contain}
.award .mcar-slide .mcar-bg{filter:blur(30px) brightness(.5) saturate(1.1);transform:scale(1.2)}
.mcar-arrow{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font:400 38px/1 Arial,sans-serif;display:flex;align-items:center;justify-content:center;padding-bottom:4px;cursor:pointer;opacity:0;transition:opacity .2s,background .2s}
.mcar-arrow:hover{background:rgba(0,0,0,.8)}
.mcar-prev{left:20px}.mcar-next{right:20px}
.mcar:hover .mcar-arrow,.mcar:focus-within .mcar-arrow{opacity:1}
@media (hover:none){.mcar-arrow{opacity:1}}
.mcar-under{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;margin-top:16px;transition:opacity .6s ease .8s,transform .6s ease .8s}
.award .mcar-cap{margin:0;font:600 16px/1.4 'Montserrat',sans-serif;color:#333}
.mcar-all{background:#000;color:#fff;font:700 15px/1 'Montserrat',sans-serif;padding:13px 16px;border-radius:3px;text-decoration:none}
.mcar-all:hover{background:#222}
.mcar button:focus-visible,.mcar a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.mcar.armed:not(.in) .mcar-frame{clip-path:inset(0 100% 0 0)}
.mcar.armed:not(.in) .mcar-view{transform:scale(1.14)}
.mcar.armed:not(.in) .mcar-under{opacity:0;transform:translateY(12px)}
@media (max-width:980px){.mcar-frame{height:clamp(260px,62vw,560px)}.mcar-arrow{width:44px;height:44px;margin-top:-22px;font-size:32px}.mcar-prev{left:10px}.mcar-next{right:10px}}
@media (prefers-reduced-motion:reduce){.mcar-track,.mcar-frame,.mcar-view,.mcar-under{transition:none}}
.award .kick,.gcs .kick{font:700 15px/1 'Montserrat',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--red-text);margin-bottom:14px}
.award h2{font:900 44px/1.08 'Poppins',sans-serif;color:#000;margin-bottom:18px;max-width:16ch}
.award .proj{font:700 21px/1.3 'Poppins',sans-serif;color:#000;margin:0 0 14px;padding-left:14px;border-left:5px solid var(--red)}
.award .proj span{display:block;font:600 15px/1.5 'Montserrat',sans-serif;color:var(--muted)}
.award p{font:400 17px/1.8 'Montserrat',sans-serif;color:#000}
.award .more{font:700 16px 'Montserrat',sans-serif;color:var(--red-text);text-decoration:none}
.award .more:hover{text-decoration:underline}
.award .next{margin-top:56px;padding:14px 18px;font:600 15px/1.6 'Montserrat',sans-serif}
/* Two awards (the bab-award change; Kevin and David 10/19): Build-A-Bear's 2026 nomination,
   then the museum's 2025 win. Round 2: the nominee first, and plainly year after year: two
   big years side by side, the one on screen in black with a red bar that fills a step with
   each of its photos. Both titles and both sets of words sit in the same grid cell, so the
   page never jumps; site.js fades in the one whose photo is on screen. */
.award-years{display:flex;margin:2px 0 30px}
.award-year{--l:0px;--r:40px;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:none;border:0;padding:0 var(--r) 16px var(--l);text-align:left;cursor:pointer}
.award-year+.award-year{--l:40px;--r:0px;border-left:2px solid #e2e2e2}
.award-year b{font:900 68px/.9 'Poppins',sans-serif;color:#8a8a8a;letter-spacing:-1px;transition:color .35s}
.award-year span{font:700 14px/1 'Montserrat',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted);transition:color .35s}
.award-year::before,.award-prog{content:"";position:absolute;left:var(--l);right:var(--r);bottom:0;height:4px}
.award-year::before{background:#ececec}
.award-prog{background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.5,0,.2,1)}
.award-year[aria-pressed="true"] b{color:#000}
.award-year[aria-pressed="true"] span{color:var(--red-text)}
.award-year:hover b{color:#000}
.award-year:focus-visible{outline:3px solid var(--red);outline-offset:6px}
@media (max-width:640px){.award-year{--r:24px}.award-year+.award-year{--l:24px}.award-year b{font-size:46px}.award-year span{font-size:12px;letter-spacing:1.5px}}
.award-chs{display:grid}
.award-chs>.award-ch{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.award-chs>.award-ch.on{opacity:1;visibility:visible;transition:opacity .45s ease .1s}
@media (prefers-reduced-motion:reduce){.award-chs>.award-ch,.award-year b,.award-year span,.award-prog{transition:none}}

/* Written for general contractors (notes: audience GCs; chosen on price and dependability;
   they worry about schedule, capacity and communication; "we go to work every day") */
.gcs{background:var(--char);color:#fff;padding:100px 0}
.gcs h2{font:900 50px/1.1 'Poppins',sans-serif;margin-bottom:16px}
.gcs .lead{font:500 20px/1.6 'Montserrat',sans-serif;max-width:720px;margin-bottom:50px;color:#D5D7DA}
.gcs .three{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.gcs h3{font:700 24px/1.2 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;border-top:4px solid var(--red);padding-top:16px}
.gcs p{font:400 17px/1.7 'Montserrat',sans-serif;padding:6px 8px}

/* ---------------------------------------------------------------- home (v3) */
.hero{position:relative;background:var(--char)}
.hero img{width:100%;height:auto;aspect-ratio:1280/810;object-fit:cover}  /* full-bleed, 810px at 1280 */

.statement{background:var(--stone);padding:50px 16px 65px;text-align:center;text-transform:uppercase;letter-spacing:1px}
.statement .l1,.statement .l3{font:700 25px/1.1 'Montserrat',sans-serif;color:var(--muted)}
.statement .l1{margin:20px 0 10px}
.statement h1,.statement h2{font:700 42px/1 'Poppins',sans-serif;color:var(--ink);padding-bottom:10px}
.statement .l3{max-width:430px;margin:0 auto}

.projband{position:relative;background:var(--char);padding:100px 0;overflow:hidden}
.projband::before{content:"";position:absolute;inset:0;background:url(../img/projband-bg-1600.webp) center/cover;opacity:.28;mix-blend-mode:luminosity}
.projband::after{content:"";position:absolute;inset:0;background:rgba(14,16,18,.62)}
.projband>*{position:relative;z-index:1}
.projband h2{font:300 50px/60px 'Poppins',sans-serif;letter-spacing:10px;color:#fff;text-align:center;padding-bottom:10px}
.projband .intro{font:500 16px/1.4 'Montserrat',sans-serif;color:#fff;text-align:center;margin:0 auto 70px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 31px}
.tile{position:relative;display:block;aspect-ratio:321/404;border-radius:4px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.32);opacity:0;transition:opacity .5s}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.1) 40%,rgba(0,0,0,.82) 100%)}
.tile .lbl{position:absolute;left:12px;right:12px;bottom:40px;z-index:2;text-align:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile .t{display:block;font:700 30px/1 'Poppins',sans-serif;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.tile .t::after{content:"";display:block;width:34px;height:3px;background:var(--red);margin:14px auto 0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.tile .m{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:600 14px/1 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:1px}
.tile .m i{font-style:normal;display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
/* Kevin, 10/14: the tiles should move when you point at them, so they read as
   buttons. The photo eases in, the shade deepens, the name lifts, the red rule
   grows, the arrow nudges and one line about the category rises in. A phone has
   no pointer, so "N projects ->" is always showing and the line stays tucked away. */
.tile .more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tile .more>span{overflow:hidden;min-height:0}
.tile .d{display:block;max-width:28ch;margin:12px auto 0;font:500 15px/1.45 'Montserrat',sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media (hover:hover){
  .tile:hover img,.tile:focus-visible img{transform:scale(1.08)}
  .tile:hover::before,.tile:focus-visible::before{opacity:1}
  .tile:hover .lbl,.tile:focus-visible .lbl{transform:translateY(-8px)}
  .tile:hover .t::after,.tile:focus-visible .t::after{width:88px}
  .tile:hover .m i,.tile:focus-visible .m i{transform:translateX(6px)}
  .tile:hover .more,.tile:focus-visible .more{grid-template-rows:1fr;opacity:1}
}
.tile:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.center{text-align:center}
.btn-w{display:inline-block;margin-top:40px;background:#fff;color:var(--ink);font:700 20px/34px 'Poppins',sans-serif;padding:6px 20px;border-radius:3px;text-decoration:none;text-transform:uppercase}
.btn-w:hover{background:#E9E9E9}

.film{background:var(--char);padding:100px 0}
/* Projects and the company film fill the width, as in version 2 (Kevin, 10/14). */
.film.bleed{padding:0}
.film.bleed .frame{aspect-ratio:auto;height:min(80vh,820px);min-height:420px}
.projband.has-bleed{padding-bottom:0}
.tiles.bleed{grid-template-columns:repeat(3,1fr);gap:0;position:relative;z-index:1}
.tiles.bleed .tile{aspect-ratio:auto;height:clamp(260px,30vw,440px);border-radius:0}
.projband .center{position:relative;z-index:1;padding:50px 0 70px}
.frame{position:relative;aspect-ratio:16/9;background:#111 url(../img/film-bg-1600.webp) center/cover;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;text-align:center}
.frame::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.frame>*{position:relative}
.play{width:88px;height:62px;border-radius:14px;background:var(--red);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.frame b{font:700 22px/1.3 'Poppins',sans-serif}
.frame span.s{font:500 15px/1.5 'Montserrat',sans-serif;opacity:.9}

.logos{background:#fff;padding:100px 0 50px}
.lrow{display:grid;grid-template-columns:repeat(5,1fr);gap:40px 72px;align-items:center;justify-items:center}
.lrow img{max-height:128px;width:auto;max-width:160px}

/* ---------------------------------------------------------------- contact band + footer (every page) */
.cband{background:var(--graphite);color:#fff;padding:51px 0 50px}
.cband .wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:50px 0}
.cband h2{font:700 40px/80px 'Poppins',sans-serif;text-transform:uppercase}
.cband h3{font:700 25px/1 'Poppins',sans-serif;text-transform:uppercase;margin-top:14px}
.cband p{font:500 20px/1.4 'Poppins',sans-serif;margin:6px 0 34px}
.cband a{color:#fff;text-decoration:none}
.cband .big{justify-self:end;width:270px}
.fbar{background:#000;color:#fff;padding:40px 0}
.fbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;font:500 14px/28px 'Montserrat',sans-serif}
.fbar a{color:#fff;font-weight:700;text-decoration:none}
/* Notes: "Woolf Solutions blended w/ color & font". The credit is set in the footer's
   own type and colour, the way Advanced Stucco credits its web designer. */
.fbar .credit,.fbar .credit a{font-weight:500;color:inherit}
.fbar .credit a{border-bottom:1px solid rgba(255,255,255,.35)}
.fbar .credit a:hover{border-bottom-color:#fff}
/* Footer icons. Kevin, 10/27: 50% larger (were 30px boxes, 16px icons, 8px apart). */
.social{display:flex;gap:12px}
.social a{width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(255,255,255,.14);transition:background .2s}
.social a:hover{background:var(--red)}
.social svg{width:24px;height:24px;fill:#fff}

/* ---------------------------------------------------------------- project pop-ups (notes: "Projects Pop-Up") */
.pop{width:min(1120px,94vw);max-height:90vh;padding:0;border:0;border-radius:6px;overflow:hidden}
.pop[open]{display:flex;flex-direction:column}
.pop::backdrop{background:rgba(0,0,0,.82)}
html:has(.pop[open]){overflow:hidden}
.pop-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;background:var(--char);color:#fff}
.pop-head h2{font:700 26px/1.2 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:2px}
.pop-x{background:none;border:0;color:#fff;font:400 40px/1 'Montserrat',sans-serif;cursor:pointer;padding:0 6px}
.pop-body{overflow:auto;padding:24px}
.pblurb{font:500 16px/1.6 'Montserrat',sans-serif;color:#333;margin-bottom:20px}
.pgrid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
.pcard{display:block;width:100%;text-align:left;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.pcard .pimg{display:block;overflow:hidden;border-radius:4px;background:#E6E4E0}
.pcard img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pcard:hover img,.pcard:focus-visible img{transform:scale(1.06)}
.pcard:hover .pn,.pcard:focus-visible .pn{color:var(--red-text)}
.pcard:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.pcard .pd{display:none}   /* a project's details show in the big view, not the grid */
.pbig .pd{display:block;margin-top:10px;font:500 16px/1.6 'Montserrat',sans-serif;color:#333}
.pcard .pn{display:block;font:700 17px/1.3 'Poppins',sans-serif;color:#000;margin-top:10px;transition:color .2s}
.pcard .pc{display:block;font:600 12px/1.6 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.5px;color:#555}
.pnav{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.pback{margin-right:auto;background:none;border:0;color:var(--ink);font:700 15px 'Montserrat',sans-serif;cursor:pointer;padding:8px 0}
.parrow{width:44px;height:44px;border:1px solid #CFCFCF;border-radius:50%;background:#fff;color:var(--ink);font:400 28px/1 'Poppins',sans-serif;cursor:pointer}
.parrow:hover{background:#F0F0F0}
.pbig{margin:0}
.pbig img{width:100%;max-height:64vh;object-fit:contain;background:#F2F4F7;border-radius:4px}
.pbig figcaption{font:700 18px/1.4 'Poppins',sans-serif;margin-top:12px;color:#000}

/* ---------------------------------------------------------------- inner page header */
.phead{position:relative;padding:51px 0 50px;overflow:hidden;min-height:446px;display:flex;align-items:center}
.phead .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1)}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 55%,rgba(255,255,255,.55) 100%)}
.phead .in{position:relative;z-index:1;width:100%}
.phead h1{font:900 70px/84px 'Poppins',sans-serif;color:var(--ink);text-transform:uppercase}
.phead blockquote{margin:36px 0 0;border-left:8px solid var(--red);padding:0 0 0 30px;max-width:680px}
.phead blockquote p{font:700 26px/1.25 'Poppins',sans-serif;color:var(--ink);margin:0 0 18px}
.phead cite{font:700 15px/24px 'Montserrat',sans-serif;color:#000;font-style:normal}
.draft{background:#FFF4C2;color:#4A3B00!important;outline:2px dashed #C9A200;outline-offset:3px}
.draft p,.draft cite{color:#4A3B00!important}

/* ---------------------------------------------------------------- about */
.story{padding:70px 0}
.story .wrap{display:grid;grid-template-columns:390px 1fr;gap:23px 30px;align-items:start}
.story p{font:400 18px/1.8 'Montserrat',sans-serif;color:#000}
.team{background:var(--char);color:#fff;padding:50px 0 80px}
.team h2{font:700 70px/112px 'Poppins',sans-serif;letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:30px}
.tgrid{display:grid;gap:40px 42px}
.tgrid.two{grid-template-columns:1fr 1fr;margin-bottom:60px}
.tgrid.three{grid-template-columns:repeat(3,1fr)}
.person .ph{aspect-ratio:1/1;background:#E4E0DA;display:flex;align-items:center;justify-content:center}
.tgrid.three .person .ph{aspect-ratio:228/172}
.person h3{font:700 32px/1 'Poppins',sans-serif;margin:30px 0 26px}
.tgrid.three .person h3{font-size:26px}
.person p{font:400 16px/1.8 'Montserrat',sans-serif}
.letters{padding:90px 0}
.letters h2{font:900 50px/60px 'Poppins',sans-serif;color:#000}
.bar{height:7px;background:var(--red);width:min(390px,100%);margin:20px 0 30px}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:42px}
.lcard{border-left:8px solid var(--red);padding:4px 0 4px 26px}
.lcard .who{font:700 22px/1.2 'Poppins',sans-serif;color:#000}
.lcard .when{font:600 14px/1.6 'Montserrat',sans-serif;color:#555;margin-bottom:12px}
.lcard blockquote{margin:0 0 14px;font:600 18px/1.6 'Montserrat',sans-serif;color:#000}
.lcard .sig,.lcard .named{font:400 15px/1.7 'Montserrat',sans-serif;color:#333}
.lcard .named b{display:block;color:#000}
.lcard a{font:700 15px 'Montserrat',sans-serif;color:var(--red-text)}

/* ---------------------------------------------------------------- what we do */
.svc{padding:100px 0}
.svc .row{display:grid;grid-template-columns:390px 1fr;gap:80px;align-items:center;width:min(1152px,100% - 32px);margin-left:max(16px,calc((100% - 1024px)/2));}
.svc h2{font:900 50px/60px 'Poppins',sans-serif;color:#000}
.svc h2 small{display:block;font:700 18px/1.2 'Poppins',sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:10px}
.svc p{font:400 16px/2 'Montserrat',sans-serif;color:#000}
.svc p b{font-weight:700}
.svc.dark{background:var(--char)}
.svc.dark h2,.svc.dark p{color:#fff}
.svc img{width:100%;aspect-ratio:1224/690;object-fit:cover}

/* ---------------------------------------------------------------- projects */
.plist{padding:100px 0}
.plist .tile{aspect-ratio:1024/630;margin-bottom:52px}
.plist .tile .lbl{bottom:50px}
.plist .tile .t{font-size:44px}
.pgrid{padding:80px 0 100px}
.pgrid .tiles{grid-template-columns:repeat(3,1fr)}
.pgrid .tile .t{font-size:22px;line-height:1.15;text-transform:none}
.pgrid .tile .m{text-transform:uppercase;font-size:12px;letter-spacing:.5px}
.others{margin-top:60px;font:600 15px/2 'Montserrat',sans-serif}
.others b{font-family:'Poppins';color:#000;margin-right:10px}
.others a{color:var(--ink);margin-right:16px;white-space:nowrap}

/* ---------------------------------------------------------------- contact */
.contact-top{padding:51px 0 60px}
/* Kevin, 10/14: Advanced Stucco's 110px "Get In Touch" was too big. Same size and
   weight as every other page title now. */
.contact-top h1{font:900 70px/84px 'Poppins',sans-serif;color:var(--ink);text-transform:uppercase;padding-bottom:10px;margin-bottom:12px}
.contact-top .lede{font:500 16px/1.7 'Montserrat',sans-serif;color:#000;margin-bottom:50px}
.cgrid{display:grid;grid-template-columns:1fr 250px;gap:70px}
.form{display:grid;gap:20px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form input,.form textarea,.form select{width:100%;border:0;background:rgba(0,0,0,.05);font:600 14px 'Poppins',sans-serif;color:#333;padding:16px}
.form textarea{min-height:150px;resize:vertical}
.form ::placeholder{color:#767676}
.form .send{text-align:right}
.form button{background:#000;color:#fff;border:0;font:700 15px/25.5px 'Poppins',sans-serif;letter-spacing:1px;text-transform:uppercase;padding:16px 28px;cursor:pointer}
.form .hp{position:absolute;left:-9999px}
.form-msg{margin:0;padding:14px 16px;border-left:4px solid #2E7D4F;background:#EEF6F1;font:600 15px/1.5 'Montserrat',sans-serif;color:#14301F}
.form-msg.bad{border-left-color:var(--red);background:#FBEDED;color:#4A0E10}
.form button:disabled{opacity:.6;cursor:progress}
.offices h3{font:700 20px/30px 'Poppins',sans-serif;color:var(--red-text);letter-spacing:1px;text-transform:uppercase;padding-bottom:10px}
.offices p{font:500 16px/1.9 'Montserrat',sans-serif;color:#000;margin:0 0 26px}
.offices a{color:#000;text-decoration:none}
.offices .dir{font-weight:700;text-transform:uppercase}
.subs{border-top:2px solid #DDDBD6;padding:30px 0 60px}
.subs h2{font:700 40px/40px 'Poppins',sans-serif;color:var(--ink);padding-bottom:10px;margin-bottom:12px}
.subs p{font:500 16px/1.7 'Montserrat',sans-serif;color:#000}
.subs a{color:var(--red-text);font-weight:600;text-transform:uppercase;text-decoration:none}

/* ---------------------------------------------------------------- privacy */
.plain{padding:60px 0 90px}
.plain .wrap{max-width:820px}
.plain h2{font:700 28px/1.3 'Poppins',sans-serif;color:#000;margin:36px 0 10px}
.plain p,.plain li{font:400 16px/1.8 'Montserrat',sans-serif;color:#000}

/* ---------------------------------------------------------------- responsive (Divi collapses at 980px) */
@media (max-width:980px){
  .head-in{height:84px;padding:0 16px}
  .brand img{height:73px}   /* was 62px */
  .navtoggle{display:block}
  .nav{display:none;position:absolute;top:84px;left:0;right:0;background:var(--head);flex-direction:column;align-items:stretch;gap:0;padding:10px 0 20px;border-top:3px solid var(--red)}
  .nav.open{display:flex}
  .nav a{padding:12px 20px}
  .has-sub>a::after{display:none}
  .sub{position:static;visibility:visible;opacity:1;border:0;box-shadow:none;padding:0!important;min-width:0}
  .sub a{padding-left:40px}
  .nav .nav-social{border-left:0;border-top:1px solid rgba(255,255,255,.15);margin-top:8px;padding:10px 8px 0;gap:6px}
  .nav .nav-social a{width:44px;height:44px}
  .tiles,.pgrid .tiles,.tiles.bleed{grid-template-columns:1fr 1fr}
  .lrow{grid-template-columns:repeat(3,1fr);gap:30px}
  .cband .wrap,.story .wrap,.svc .row,.cgrid,.lgrid,.tgrid.two,.tgrid.three,.award .split,.gcs .three{grid-template-columns:1fr}
  .pgrid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .award{padding:60px 0}.gcs{padding:70px 0}
  .cband .big{justify-self:start;width:200px}
  .svc .row{gap:30px}
  .phead h1{font-size:48px;line-height:1.1;padding:0 16px}
  .phead blockquote{margin-left:16px;margin-right:16px}
  .contact-top h1{font-size:48px;line-height:1.1}
  .team h2{font-size:44px;line-height:1.3}
  .fbar .wrap{flex-direction:column;text-align:center}
}
@media (max-width:600px){
  .tiles,.pgrid .tiles,.tiles.bleed{grid-template-columns:1fr}
  .vh-ctl{right:12px;bottom:12px}
  .vh-tag{left:12px;bottom:12px;max-width:calc(100% - 140px);font-size:11px;letter-spacing:1px;padding:7px 10px}
  .statement h1,.statement h2{font-size:30px}
  .pgrid2{grid-template-columns:1fr}
  .award h2{font-size:32px}.gcs h2{font-size:34px}
  .pop-body{padding:16px}.pop-head h2{font-size:20px}
  .statement .l1,.statement .l3{font-size:18px}
  .projband h2{font-size:34px;letter-spacing:6px}
  .svc h2,.letters h2{font-size:36px;line-height:1.15}
  .plist .tile .t{font-size:30px}
  .lrow{grid-template-columns:repeat(2,1fr)}
  .form .two{grid-template-columns:1fr}
  .cband h2{font-size:32px;line-height:1.4}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- The accessibility audit of 10/19 (WCAG 2.1 AA). One layer per fix (build.py
   CHANGES): each lives under html.chg-<id>, which go adds only while that fix is on. */
/* Parts that are in every page but stay out of sight until their fix is on. */
.mcar-pause,.form .req,.form .req-note{display:none}

/* fix-carousel-pause: Pause under the photos, beside "See all the photos" (round 2's look). */
html.chg-fix-carousel-pause .mcar-pause{display:inline-block;margin-left:auto;border:1.5px solid #000;background:#fff;color:#000;font:700 12px/1 'Montserrat',sans-serif;letter-spacing:.5px;text-transform:uppercase;border-radius:3px;padding:12px 14px;cursor:pointer}
html.chg-fix-carousel-pause .mcar-pause:hover{background:#000;color:#fff}

/* fix-nav-shade: the shade over the top of the video, darker and a little lower, so
   the white menu stays at 4.5:1 or better on the brightest shots. */
html.chg-fix-nav-shade .site-head.over::before{bottom:-64px;background:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.62) 58%,rgba(0,0,0,.4) 72%,rgba(0,0,0,0))}

/* fix-video-labels: the tagline and Pause video on 65% black, not 50%. */
html.chg-fix-video-labels .vh-tag,html.chg-fix-video-labels .hero-video-toggle{background:rgba(0,0,0,.65)}

/* fix-placeholder: the hints in the empty fields, 5.1:1 on the field (was 4.1:1). */
html.chg-fix-placeholder .form ::placeholder{color:#666}

/* fix-form-labels: the labels (always there for screen readers) shown above the fields. */
html.chg-fix-form-labels .form label.sr-only{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;margin:0 0 6px;font:600 14px/1.4 'Poppins',sans-serif;color:#000}
html.chg-fix-form-labels .form .req{display:inline;color:var(--red-text)}
html.chg-fix-form-labels .form .req-note{display:block;margin:-8px 0 0;font:500 13px/1.4 'Montserrat',sans-serif;color:var(--muted)}

/* fix-focus-header: whatever has keyboard focus scrolls to below the top bar (114px; 84px on phones). */
html.chg-fix-focus-header{scroll-padding-top:130px}
@media (max-width:980px){html.chg-fix-focus-header{scroll-padding-top:100px}}

/* fix-narrow-headings: long one-word headings fit small phones; nothing else is cut off either. */
html.chg-fix-narrow-headings h1,html.chg-fix-narrow-headings h2{overflow-wrap:break-word}
@media (max-width:420px){
  html.chg-fix-narrow-headings .letters h2{font-size:clamp(26px,9vw,36px)}
  html.chg-fix-narrow-headings .subs h2{font-size:clamp(28px,10vw,40px)}
}

/* fix-contact-headings: the office details became h2s; they look as the h3s did. */
html.chg-fix-contact-headings .offices h2{font:700 20px/30px 'Poppins',sans-serif;color:var(--red-text);letter-spacing:1px;text-transform:uppercase;padding-bottom:10px}

/* Launch layers (10/27/26): hide-film and hide-team. The launch build leaves both
   sections out of the HTML; on go these classes hide them while staging. */
html.chg-hide-film .film{display:none}
html.chg-hide-team #our-team,html.chg-hide-team .nav-team{display:none}

/* ---- After launch, 10/27/26 (build.py CHANGES, waiting to go live) ---- */
/* eifsmart-three: the homepage's logo row opens with the one-of-three line. */
html.chg-eifsmart-three .logos .lhead{font:700 34px/1.2 'Poppins',sans-serif;color:var(--ink);text-align:center;margin:0 auto 10px;max-width:980px}
html.chg-eifsmart-three .logos .lsub{font:500 18px/1.5 'Montserrat',sans-serif;color:var(--muted);text-align:center;margin:0 0 56px}
/* about-layout: Kevin, "the picture is too big and the words are too much for the
   picture". A smaller photo, centred against two short paragraphs and a list. */
html.chg-about-layout .story{padding:64px 0}
html.chg-about-layout .story .wrap{grid-template-columns:360px minmax(0,1fr);gap:32px 44px;align-items:center}
html.chg-about-layout .story img{width:100%;aspect-ratio:3/2;object-fit:cover}
html.chg-about-layout .story p{font-size:17px;line-height:1.7}
html.chg-about-layout .story p:last-child{margin-bottom:0}
html.chg-about-layout .story .facts{grid-column:1/-1;list-style:none;margin:0;padding:26px 32px;background:var(--stone);display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
html.chg-about-layout .story .facts li{position:relative;padding-left:20px;font:500 15px/1.5 'Montserrat',sans-serif;color:var(--ink)}
html.chg-about-layout .story .facts li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--red)}
@media (max-width:980px){
  html.chg-about-layout .story .wrap{grid-template-columns:1fr;gap:24px}
  html.chg-about-layout .story img{max-width:520px}
  html.chg-about-layout .story .facts{grid-template-columns:1fr;padding:22px 20px}
}
@media (max-width:600px){
  html.chg-eifsmart-three .logos .lhead{font-size:26px}
  html.chg-eifsmart-three .logos .lsub{font-size:16px;margin-bottom:36px}
}