/* =====================================================================
   SIGN IMAGE  |  signimage.css
   One stylesheet for the whole site. Loaded on every page by the
   header snippet (01-header.html). Lives at /wp-content/uploads/signimage/.

   Everything is scoped under .si (header, page body, footer), so it
   never restyles Elementor, Hello Elementor, or WordPress admin.

   Build direction: Sign-Image-Home-Page-Build-Direction.pdf
   Shapes: rhombus at the logo slant (17deg), one clipped corner (top
   right), angled section edges used sparingly. No rounded corners.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Brand colors (brand guide, June 2026) */
  --si-blue:#012E72;        /* Deep Blue, primary */
  --si-blue-d:#001B45;      /* darker navy, proof strip */
  --si-blue-dd:#00132F;     /* darkest navy, footer and solid header */
  --si-grey:#5F6B76;        /* Steel Grey, secondary text */
  --si-grey-60:#9AA2A8;
  --si-grey-20:#EFF0F1;
  --si-cyan:#3FA9C9;        /* Muted Cyan: backgrounds, rules, icons, large type on navy */
  --si-cyan-tx:#297790;     /* cyan for TEXT on light backgrounds (AA 4.5:1 on white and #F2F2F2) */
  --si-cyan-20:#D0E5EC;
  --si-line:#D9DEE3;        /* Cool Light Grey */
  --si-ink:#191919;         /* Jet Black */
  --si-bg:#F2F2F2;          /* Anti Flash White */
  --si-on-dark:#C6D3E0;     /* body text on navy */
  --si-on-dark-2:#9FB2C6;   /* small text on navy */

  /* Type. Handel Gothic D loads from Adobe Fonts once that kit is added;
     until then the stand-in (Chakra Petch, Google Fonts) is used. */
  --si-fd:"handel-gothic","Handel Gothic D","Chakra Petch",system-ui,sans-serif;
  --si-fb:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --si-h1:clamp(2.1rem,1.3rem + 3vw,3.7rem);
  --si-h1-inner:clamp(2rem,1.2rem + 2.4vw,3.1rem);
  --si-h2:clamp(1.7rem,1.2rem + 1.9vw,2.5rem);
  --si-body:17px;

  /* Shape language */
  --si-slant:17deg;         /* measured from the logo's frame */
  --si-nslant:-17deg;
  --si-clip:28px;           /* clipped corner size */
  --si-edge:56px;           /* angled section edge height */

  /* Rhythm */
  --si-max:1200px;
  --si-hdr-max:1360px;      /* header bar only: wider than the page so the full menu fits (Nov 1) */
  --si-sy:clamp(48px,2rem + 4.2vw,96px);
  --si-gap:20px;
  --si-hdr-h:80px;
  --si-ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:700px){
  :root{--si-clip:20px;--si-edge:28px;--si-hdr-h:64px}
}

/* ---------------------------------------------------------------------
   2. ELEMENTOR SAFETY NET
   The container around each HTML widget must be full width with zero
   padding. The guide covers the settings; these rules catch a miss.
   --------------------------------------------------------------------- */
.e-con:has(.si-page),
.e-con:has(.si-hdr),
.e-con:has(.si-foot){
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --container-default-padding-top:0px;--container-default-padding-right:0px;
  --container-default-padding-bottom:0px;--container-default-padding-left:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;
  --content-width:100%;
  padding:0;gap:0;max-width:none;
}
.e-con:has(.si-page) > .e-con-inner,
.e-con:has(.si-hdr) > .e-con-inner,
.e-con:has(.si-foot) > .e-con-inner{max-width:none;width:100%;padding:0;gap:0}
.elementor-widget-html:has(.si){margin:0;width:100%}
.elementor-widget-html:has(.si) > .elementor-widget-container{margin:0;padding:0}

/* ---------------------------------------------------------------------
   3. BASE (inside .si only)
   --------------------------------------------------------------------- */
.si{font-family:var(--si-fb);font-size:var(--si-body);line-height:1.6;color:var(--si-ink);
    -webkit-font-smoothing:antialiased;text-align:left}
.si *,.si *::before,.si *::after{box-sizing:border-box}
.si h1,.si h2,.si h3,.si h4{margin:0;font-family:var(--si-fd);font-weight:700;line-height:1.12;
    letter-spacing:-.01em;color:var(--si-blue);text-wrap:balance;text-transform:none}
.si h1{font-size:var(--si-h1);line-height:1.05}
.si h2{font-size:var(--si-h2);line-height:1.15}
.si h3{font-size:22px}
.si p{margin:0}
.si figure,.si blockquote,.si figcaption{margin:0}
.si ul,.si ol{margin:0;padding:0;list-style:none}
.si a{color:inherit;text-decoration:none;background:none}
.si a:focus-visible,.si button:focus-visible,.si summary:focus-visible{outline:2px solid var(--si-cyan);outline-offset:3px}
.si img,.si video,.si svg{max-width:100%;height:auto;display:block}
.si svg.si-ic{width:1em;height:1em;flex:0 0 auto}
.si.si-page{overflow-x:clip}
.si .si-wrap{width:100%;max-width:var(--si-max);margin:0 auto;padding:0 24px}
.si .si-sec{padding:var(--si-sy) 0;position:relative}
.si .si-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tone bands: never two of the same in a row */
.si .si-tone-white{background:#fff}
.si .si-tone-bg{background:var(--si-bg)}
.si .si-tone-blue{background:var(--si-blue);color:#fff}
.si .si-tone-blue h2,.si .si-tone-blue h3{color:#fff}
.si .si-tone-blue p{color:var(--si-on-dark)}

/* Type helpers */
.si .si-eyebrow{display:block;font-family:var(--si-fb);font-size:14px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--si-cyan-tx);margin-bottom:12px}
.si .si-tone-blue .si-eyebrow,.si .si-on-dark .si-eyebrow{color:var(--si-cyan)}
.si .si-lead{font-size:20px;line-height:1.55;color:var(--si-grey);max-width:58ch}
.si .si-tone-blue .si-lead{color:var(--si-on-dark)}
.si .si-muted{color:var(--si-grey)}
.si .si-mt{margin-top:16px}

/* ---------------------------------------------------------------------
   4. SHAPES
   --------------------------------------------------------------------- */
/* Clipped corner: square on three corners, one 45 degree cut top right */
.si .si-clip{clip-path:polygon(0 0,calc(100% - var(--si-clip)) 0,100% var(--si-clip),100% 100%,0 100%)}
/* Angled top edge (C): used on no more than two sections per page */
.si .si-angle{margin-top:calc(var(--si-edge) * -1);padding-top:calc(var(--si-sy) + var(--si-edge));z-index:1;
    clip-path:polygon(0 var(--si-edge),100% 0,100% 100%,0 100%)}

/* Rhombus buttons: skew the box, keep the label upright */
.si .si-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 28px;
    transform:skewX(var(--si-nslant));font-family:var(--si-fb);font-size:14px;font-weight:700;
    letter-spacing:.07em;text-transform:uppercase;line-height:1.2;white-space:nowrap;cursor:pointer;
    border:0;border-radius:0;transition:transform .18s var(--si-ease),box-shadow .18s var(--si-ease),background .18s}
.si .si-btn > span{display:inline-flex;align-items:center;gap:10px;transform:skewX(var(--si-slant))}
.si .si-btn .si-ic{width:17px;height:17px}
.si .si-btn:hover{transform:skewX(var(--si-nslant)) translateY(-1px)}
.si .si-btn--cyan{background:var(--si-cyan);color:var(--si-blue-dd)}
.si .si-btn--cyan:hover{box-shadow:0 6px 18px rgba(63,169,201,.4)}
.si .si-btn--navy{background:var(--si-blue);color:#fff}
.si .si-btn--navy:hover{box-shadow:0 6px 18px rgba(1,46,114,.3)}
.si .si-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.si .si-btn--ghost:hover{background:rgba(255,255,255,.1)}
.si .si-btn--line{background:transparent;color:var(--si-blue);box-shadow:inset 0 0 0 2px var(--si-blue)}
.si .si-btns{display:flex;flex-wrap:wrap;gap:18px}
.si .si-btns--center{justify-content:center}

/* Text link with a cyan underline */
.si .si-more{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--si-blue);white-space:nowrap;padding-bottom:6px;border-bottom:2px solid var(--si-cyan)}
.si .si-tone-blue .si-more{color:#fff}
.si .si-more .si-ic{width:15px;height:15px}

/* ---------------------------------------------------------------------
   5. HEADER (Theme Builder header, one HTML widget)
   --------------------------------------------------------------------- */
.si-skip{position:fixed;left:12px;top:-60px;z-index:1000;background:#fff;color:var(--si-blue);padding:10px 16px;font-weight:700}
.si-skip:focus{top:12px}
.si.si-hdr{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--si-hdr-h);display:flex;align-items:center;
    color:#fff;transition:background .25s,box-shadow .25s}
.si.si-hdr::before{content:"";position:absolute;inset:0 0 -40px 0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(0,19,47,.72),rgba(0,19,47,0));transition:opacity .25s}
.si.si-hdr.is-solid{background:var(--si-blue-dd);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.si.si-hdr.is-solid::before{opacity:0}
.admin-bar .si.si-hdr{top:32px}
@media (max-width:782px){.admin-bar .si.si-hdr{top:46px}}
.si .si-hdr__bar{display:flex;align-items:center;gap:24px;position:relative;max-width:var(--si-hdr-max)}
.si .si-hdr__logo img{height:34px;width:auto}
.si .si-nav{margin-left:6px}
.si .si-nav__list{display:flex;align-items:center;gap:4px}
.si .si-nav__item{position:relative}
.si .si-nav__link{display:flex;align-items:center;gap:6px;padding:10px 8px;font-size:15px;font-weight:500;color:rgba(255,255,255,.88);white-space:nowrap}
.si .si-nav__link:hover,.si .si-nav__link[aria-current]{color:#fff}
.si .si-nav__link[aria-current]{box-shadow:inset 0 -2px 0 var(--si-cyan)}
.si .si-nav__link .si-ic{width:12px;height:12px;opacity:.8}
/* "Signs" has no page of its own: a button that opens its drop-down, styled like the menu links
   (clears the theme's button border, background, and transition) */
.si .si-nav__link--btn{background:none;border:0;border-radius:0;font-family:inherit;line-height:inherit;cursor:default;transition:none}
.si .si-nav__link--btn:hover,.si .si-nav__link--btn:focus{background:none}
.si .si-nav__sub{position:absolute;top:100%;left:0;min-width:250px;background:#fff;padding:10px 0;
    box-shadow:0 18px 40px rgba(0,19,47,.28);border-top:4px solid var(--si-cyan);
    opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s}
.si .si-nav__item:hover > .si-nav__sub,.si .si-nav__item:focus-within > .si-nav__sub{opacity:1;visibility:visible;transform:none}
.si .si-nav__sub a{display:block;padding:9px 20px;font-size:15px;font-weight:500;color:var(--si-blue)}
.si .si-nav__sub a:hover,.si .si-nav__sub a[aria-current="page"]{background:var(--si-bg);color:var(--si-cyan-tx)}
.si .si-hdr__right{margin-left:auto;display:flex;align-items:center;gap:20px}
.si .si-tel{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#fff;white-space:nowrap}
.si .si-tel .si-ic{width:16px;height:16px;color:var(--si-cyan)}
.si.si-hdr .si-btn{min-height:44px;padding:11px 20px;font-size:13px}
.si .si-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;
    background:rgba(255,255,255,.14);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff;padding:0}
.si .si-burger i,.si .si-burger i::before,.si .si-burger i::after{display:block;width:19px;height:2px;background:#fff;position:relative;
    transition:transform .2s,background .2s}
.si .si-burger i::before,.si .si-burger i::after{content:"";position:absolute;left:0}
.si .si-burger i::before{top:-6px}.si .si-burger i::after{top:6px}
.si.si-hdr.is-open .si-burger i{background:transparent}
.si.si-hdr.is-open .si-burger i::before{transform:translateY(6px) rotate(45deg)}
.si.si-hdr.is-open .si-burger i::after{transform:translateY(-6px) rotate(-45deg)}
/* Up to 1360px the full-size bar (about 1270px of content) does not fit: the menu tightens a little */
@media (max-width:1360px){
  .si .si-hdr__bar{gap:16px}
  .si .si-hdr__right{gap:12px}
  .si .si-nav__list{gap:2px}
  .si .si-nav__link{padding:10px 6px;font-size:14px}
}
/* Up to 1260px the phone number becomes the round phone button (as on tablets and phones) */
@media (max-width:1260px){
  .si .si-tel{width:44px;height:44px;justify-content:center;gap:0;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
  .si .si-tel span{display:none}
  .si .si-tel .si-ic{width:19px;height:19px;color:#fff}
}
/* Phone menu up to 1200px (the round phone button comes from the block above) */
@media (max-width:1200px){
  .si .si-hdr__bar{gap:12px}
  .si .si-hdr__logo img{height:28px}
  .si .si-burger{display:flex}
  .si .si-hdr__right{gap:10px}
  /* Mobile menu: full-width navy panel under the bar */
  .si .si-nav{position:fixed;left:0;right:0;top:var(--si-hdr-h);bottom:0;margin:0;background:var(--si-blue-dd);
      overflow-y:auto;padding:12px 24px 40px;display:none}
  .admin-bar .si .si-nav{top:calc(var(--si-hdr-h) + 46px)}
  .si.si-hdr.is-open{background:var(--si-blue-dd)}
  .si.si-hdr.is-open .si-nav{display:block}
  .si .si-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .si .si-nav__link{font-size:19px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .si .si-nav__link .si-ic{display:none}
  .si .si-nav__link--btn{width:100%;text-align:left}
  .si .si-nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
      background:transparent;padding:4px 0 10px 16px;min-width:0}
  .si .si-nav__sub a{color:var(--si-on-dark);font-size:16px;padding:8px 0}
  .si .si-nav__sub a:hover,.si .si-nav__sub a[aria-current="page"]{background:transparent;color:#fff}
}
@media (max-width:560px){.si.si-hdr .si-hdr__right .si-btn{display:none}}
body.si-menu-open{overflow:hidden}

/* ---------------------------------------------------------------------
   6. HOME HERO: video band with no text, message below, proof strip
   --------------------------------------------------------------------- */
.si .si-hero{background:var(--si-blue);position:relative}
.si .si-hero__stage{position:relative;height:clamp(280px,50vh,580px);overflow:hidden;background:var(--si-blue-dd);
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--si-edge)),0 100%)}
@media (max-width:700px){.si .si-hero__stage{height:clamp(200px,29vh,260px)}}
.si .si-vmedia{position:absolute;inset:0;margin:0;overflow:hidden}
.si .si-vmedia img,.si .si-vmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;max-width:none}
.si .si-vmedia video{opacity:0;transition:opacity .9s ease}
.si .si-vmedia video.is-playing{opacity:1}
.si .si-hero__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(0,19,47,.55) 0%,rgba(0,19,47,0) 26%)}
.si .si-hero__msg{text-align:center;padding:clamp(26px,2.6vw,40px) 0 clamp(40px,4vw,60px);color:#fff}
.si .si-hero__msg .si-eyebrow{color:var(--si-cyan);margin-bottom:16px}
.si .si-hero__msg h1{color:#fff;max-width:24ch;margin:0 auto 18px}
.si .si-hero__msg h1 em{font-style:normal;color:var(--si-cyan);display:block}
.si .si-hero__msg .si-lead{color:var(--si-on-dark);margin:0 auto 30px}
@media (max-width:560px){
  .si .si-hero__msg .si-eyebrow{font-size:12px;letter-spacing:.12em}
  .si .si-hero__msg .si-lead{font-size:16.5px;margin-bottom:24px}
  .si .si-hero__msg .si-btns{flex-direction:column;align-items:center;gap:14px}
  .si .si-hero__msg .si-btn{width:calc(100% - 24px)}
}
/* Proof strip: white words on solid, darker navy (Brian, Aug 25) */
.si .si-proof{background:var(--si-blue-d);border-top:4px solid var(--si-cyan)}
.si .si-proof__grid{display:grid;grid-template-columns:repeat(4,1fr);padding-top:30px;padding-bottom:30px}
.si .si-proof__item{padding:4px 28px;position:relative}
.si .si-proof__item:first-child{padding-left:0}
.si .si-proof__item + .si-proof__item::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
    background:rgba(63,169,201,.6);transform:skewX(var(--si-nslant))}
.si .si-proof__item b{display:block;font-family:var(--si-fd);font-size:28px;color:#fff;line-height:1;margin-bottom:9px}
.si .si-proof__item span{display:block;font-size:14.5px;line-height:1.4;color:#B7C4D2}
@media (max-width:800px){
  .si .si-proof__grid{grid-template-columns:1fr 1fr;gap:22px 0}
  .si .si-proof__item:nth-child(3){padding-left:0}
  .si .si-proof__item:nth-child(3)::before{display:none}
  .si .si-proof__item b{font-size:23px}
}

/* ---------------------------------------------------------------------
   7. INNER PAGE HERO: shorter photo band, title block below, left aligned
   --------------------------------------------------------------------- */
.si .si-phero{background:var(--si-blue);color:#fff}
.si .si-phero__stage{position:relative;height:clamp(200px,34vh,360px);overflow:hidden;background:var(--si-blue-dd);
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--si-edge)),0 100%)}
.si .si-phero__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.si .si-phero__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,19,47,.6),rgba(0,19,47,0) 34%)}
.si .si-phero__title{padding:clamp(20px,2vw,30px) 0 clamp(36px,3.6vw,52px)}
.si .si-phero--solid .si-phero__title{padding-top:calc(var(--si-hdr-h) + clamp(34px,3.4vw,56px))}
.si .si-crumbs{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--si-on-dark-2);margin-bottom:14px}
.si .si-crumbs a:hover{color:#fff}
.si .si-crumbs b{color:var(--si-cyan);font-weight:600}
.si .si-phero h1{color:#fff;font-size:var(--si-h1-inner);max-width:22ch;margin-bottom:14px}
.si .si-phero .si-lead{color:var(--si-on-dark);margin-bottom:26px;max-width:60ch}

/* ---------------------------------------------------------------------
   8. SECTION HEAD (left aligned, link on the right)
   --------------------------------------------------------------------- */
.si .si-shd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.si .si-shd__text{max-width:800px}
.si .si-shd p{margin-top:14px;color:var(--si-grey)}
.si .si-tone-blue .si-shd p{color:var(--si-on-dark)}
.si .si-shd--center{flex-direction:column;align-items:center;text-align:center}
.si .si-shd--center .si-shd__text{max-width:720px}
@media (max-width:760px){.si .si-shd{flex-direction:column;align-items:flex-start}}

/* ---------------------------------------------------------------------
   9. PHOTO TILES (services, industries): photo, title on image, clipped
   --------------------------------------------------------------------- */
.si .si-tiles{display:grid;grid-template-columns:1fr;gap:var(--si-gap)}
@media (min-width:620px){.si .si-tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.si .si-tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.si .si-tiles--4{grid-template-columns:repeat(4,1fr)}}
.si .si-tile{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:flex-end;color:#fff;background:var(--si-blue-dd)}
.si .si-tiles--4 .si-tile{aspect-ratio:1/1}
.si .si-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .5s var(--si-ease)}
.si .si-tile::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(0,19,47,.93) 0%,rgba(0,19,47,.55) 36%,rgba(0,19,47,0) 64%)}
.si .si-tile__in{position:relative;z-index:2;width:100%;padding:22px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.si .si-tile h3{font-size:24px;line-height:1.1;color:#fff}
.si .si-tiles--4 .si-tile h3{font-size:20px}
.si .si-tile p{margin-top:7px;font-size:14.5px;line-height:1.45;color:#D5DEE8}
.si .si-go{width:42px;height:42px;flex:0 0 auto;background:var(--si-cyan);transform:skewX(var(--si-nslant));
    display:flex;align-items:center;justify-content:center}
.si .si-go .si-ic{width:17px;height:17px;color:var(--si-blue-dd);transform:skewX(var(--si-slant))}
.si .si-tile__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--si-cyan);z-index:3;
    transform:scaleX(0);transform-origin:left;transition:transform .35s var(--si-ease)}
.si .si-tile:hover img{transform:scale(1.05)}
.si .si-tile:hover .si-tile__bar{transform:scaleX(1)}

/* ---------------------------------------------------------------------
   10. RECENT WORK and GALLERY
   --------------------------------------------------------------------- */
.si .si-works{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 18px}
@media (min-width:1000px){.si .si-works{grid-template-columns:repeat(4,1fr)}}
.si .si-work img{width:100%;aspect-ratio:4/3;object-fit:cover}
.si .si-work__meta{padding-top:14px}
.si .si-work__meta::before{content:"";display:block;width:26px;height:4px;background:var(--si-cyan);
    transform:skewX(var(--si-nslant));margin:0 0 10px 2px}
.si .si-work b{display:block;font-size:16px;font-weight:700;color:var(--si-blue);line-height:1.3}
.si .si-work span{display:block;font-size:13.5px;color:var(--si-grey);margin-top:3px}
.si .si-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:900px){.si .si-gal{grid-template-columns:repeat(3,1fr)}}
.si .si-gal img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------------------------------------------------------------------
   11. SPLITS, FIGURES, CHECK LISTS
   --------------------------------------------------------------------- */
.si .si-split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:900px){
  .si .si-split{grid-template-columns:1.05fr .95fr}
  .si .si-split--pic{grid-template-columns:.95fr 1.05fr}
  .si .si-split--rev > *:first-child{order:2}
}
.si .si-fig img{width:100%;aspect-ratio:5/4;object-fit:cover}
.si .si-fig figcaption{font-size:13px;color:var(--si-grey);margin-top:10px}
.si .si-tone-blue .si-fig figcaption{color:var(--si-on-dark-2)}
.si .si-checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin:24px 0 30px}
.si .si-checks li{display:flex;gap:11px;padding:8px 0;font-size:15.5px;border-top:1px solid var(--si-line)}
.si .si-tone-blue .si-checks li{color:#DCE6F0;border-top-color:rgba(255,255,255,.14)}
.si .si-checks .si-ic{width:16px;height:16px;color:var(--si-cyan-tx);margin-top:4px}
.si .si-tone-blue .si-checks .si-ic{color:var(--si-cyan)}
@media (max-width:560px){.si .si-checks{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   12. STEPS (rhombus numbers)
   --------------------------------------------------------------------- */
.si .si-steps{margin-top:26px}
.si .si-steps li{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--si-line);align-items:flex-start}
.si .si-steps li:last-child{border-bottom:1px solid var(--si-line)}
.si .si-n{width:48px;height:42px;flex:0 0 auto;background:var(--si-blue);transform:skewX(var(--si-nslant));
    display:flex;align-items:center;justify-content:center;margin-left:6px}
.si .si-n b{transform:skewX(var(--si-slant));font-family:var(--si-fd);font-size:19px;color:var(--si-cyan)}
.si .si-steps h3{font-family:var(--si-fb);font-size:18px;color:var(--si-blue);line-height:1.3}
.si .si-steps p{font-size:15px;color:var(--si-grey);margin-top:3px;line-height:1.5}

/* ---------------------------------------------------------------------
   13. CHIPS (rhombus)
   --------------------------------------------------------------------- */
.si .si-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding-left:6px}
.si .si-chip{display:inline-block;transform:skewX(var(--si-nslant));background:#fff;box-shadow:inset 0 0 0 1.5px var(--si-line);padding:11px 18px}
.si .si-chip > span{display:block;transform:skewX(var(--si-slant));font-size:14.5px;font-weight:600;color:var(--si-blue)}
a.si-chip:hover{box-shadow:inset 0 0 0 1.5px var(--si-cyan-tx)}

/* ---------------------------------------------------------------------
   14. NUMBERS BAND (verified figures only)
   --------------------------------------------------------------------- */
.si .si-nums{display:grid;grid-template-columns:repeat(4,1fr)}
.si .si-nums > div{padding:6px 28px;position:relative;text-align:center}
.si .si-nums > div + div::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
    background:rgba(255,255,255,.22);transform:skewX(var(--si-nslant))}
.si .si-nums b{display:block;font-family:var(--si-fd);font-size:clamp(2.4rem,1.6rem + 2.2vw,3.4rem);line-height:1;color:var(--si-cyan)}
.si .si-nums span{display:block;margin-top:12px;font-size:14.5px;color:#BCCBDA}
@media (max-width:760px){.si .si-nums{grid-template-columns:1fr 1fr;gap:28px 0}.si .si-nums > div:nth-child(3)::before{display:none}}

/* ---------------------------------------------------------------------
   15. TESTIMONIALS and BIG QUOTE
   --------------------------------------------------------------------- */
.si .si-quotes{display:grid;grid-template-columns:1fr;gap:var(--si-gap)}
@media (min-width:900px){.si .si-quotes{grid-template-columns:repeat(2,1fr)}.si .si-quotes--3{grid-template-columns:repeat(3,1fr)}}
.si .si-quote{background:#fff;padding:30px 28px 26px;border-top:4px solid var(--si-cyan);display:flex;flex-direction:column}
.si .si-quote__stars{color:var(--si-cyan-tx);letter-spacing:3px;font-size:15px;margin-bottom:12px}
/* Partner logo at the top of a testimonial card (Testimonials page, Nov 12, 2026): one height for every logo */
.si .si-quote__logo{height:56px;width:auto;max-width:200px;object-fit:contain;object-position:left center;margin-bottom:22px}
.si .si-quote__logo--tall{height:84px;margin-top:-14px;margin-bottom:8px}
.si .si-quote p{font-size:17px;line-height:1.55;color:var(--si-ink);margin-bottom:20px}
.si .si-quote figcaption{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--si-blue)}
.si .si-quote figcaption span{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--si-grey);margin-top:3px}
.si .si-bigq{max-width:880px;margin:0 auto;text-align:center}
.si .si-bigq p{font-family:var(--si-fd);font-size:clamp(1.4rem,1rem + 1.3vw,2rem);line-height:1.3;color:#fff}
.si .si-bigq figcaption{margin-top:22px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--si-cyan)}

/* ---------------------------------------------------------------------
   16. FAQ (details/summary, no JavaScript)
   --------------------------------------------------------------------- */
.si .si-faq{max-width:900px}
.si .si-faq details{border-top:1px solid var(--si-line);padding:20px 0}
.si .si-faq details:last-child{border-bottom:1px solid var(--si-line)}
.si .si-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;
    font-weight:700;font-size:18px;color:var(--si-blue)}
.si .si-faq summary::-webkit-details-marker{display:none}
.si .si-faq summary::after{content:"+";width:30px;height:28px;flex:0 0 auto;background:var(--si-cyan-20);color:var(--si-blue);
    transform:skewX(var(--si-nslant));display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600}
.si .si-faq details[open] summary::after{content:"\2013"}
.si .si-faq details p{margin-top:10px;color:var(--si-grey);max-width:70ch}

/* ---------------------------------------------------------------------
   17. CARDS, LOGO STRIP
   --------------------------------------------------------------------- */
.si .si-cards{display:grid;grid-template-columns:1fr;gap:var(--si-gap)}
@media (min-width:900px){.si .si-cards{grid-template-columns:repeat(3,1fr)}}
.si .si-card{background:#fff;padding:28px;border-top:4px solid var(--si-cyan)}
.si .si-tone-white .si-card{background:var(--si-bg)}
.si .si-card h3{font-size:22px;margin-bottom:10px}
.si .si-card p{color:var(--si-grey);font-size:15.5px}
.si .si-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:800px){.si .si-logos{grid-template-columns:repeat(5,1fr)}}
.si .si-logos > *{height:84px;display:flex;align-items:center;justify-content:center;background:#fff;padding:14px;box-shadow:inset 0 0 0 1px var(--si-line)}
.si .si-logos img{max-height:52px;width:auto}

/* ---------------------------------------------------------------------
   18. CONTACT PAGE
   --------------------------------------------------------------------- */
.si .si-contact{display:grid;grid-template-columns:1fr;gap:var(--si-gap)}
@media (min-width:900px){.si .si-contact{grid-template-columns:repeat(3,1fr)}}
.si .si-nap{background:var(--si-blue);color:#fff;padding:30px}
.si .si-nap h3{color:#fff;font-size:22px;margin-bottom:12px}
.si .si-nap p{color:var(--si-on-dark);font-size:15.5px;line-height:1.7}
.si .si-nap b{display:block;font-family:var(--si-fd);font-size:30px;color:#fff;margin:6px 0 4px;line-height:1.1}
.si .si-map{position:relative;aspect-ratio:16/9;background:var(--si-grey-20)}
.si .si-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------------------------------------------------------------------
   19. GLOBAL CTA BAND (in the footer template, hidden on Contact)
   --------------------------------------------------------------------- */
.si .si-cta{background:var(--si-blue);color:#fff;padding:var(--si-sy) 0}
.si .si-cta__grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px);align-items:center}
@media (min-width:900px){.si .si-cta__grid{grid-template-columns:1.15fr .85fr}}
.si .si-cta h2{color:#fff;margin-bottom:14px}
.si .si-cta p{color:var(--si-on-dark);margin-bottom:28px;max-width:52ch}
.si .si-cta__card{background:#fff;color:var(--si-ink);padding:clamp(24px,2.6vw,36px);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.si .si-cta__card small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--si-cyan-tx)}
.si .si-cta__card a.si-cta__phone{display:block;font-family:var(--si-fd);font-size:clamp(28px,2.4vw,36px);color:var(--si-blue);margin:8px 0 6px;line-height:1.05}
.si .si-cta__card p{color:var(--si-grey);font-size:15px;margin:0}
.si .si-cta__card hr{border:0;border-top:1px solid var(--si-line);margin:18px 0}
.si .si-cta.is-hidden{display:none}

/* ---------------------------------------------------------------------
   20. FOOTER
   --------------------------------------------------------------------- */
.si .si-ft{background:var(--si-blue-dd);color:#93A3B4;font-size:15px;padding:56px 0 26px}
.si .si-ft__grid{display:grid;grid-template-columns:1fr;gap:34px;padding-bottom:38px}
@media (min-width:800px){.si .si-ft__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}}
.si .si-ft__logo img{height:44px;width:auto;margin-bottom:16px}
.si .si-ft h4{font-family:var(--si-fb);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.si .si-ft li{padding:5px 0}
.si .si-ft a:hover{color:#fff}
.si .si-ft__phone{color:#fff;font-weight:700}
.si .si-ft__bot{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;
    gap:20px;font-size:12.5px;color:#9BADBE;flex-wrap:wrap}
/* Social media icons under the tagline (Nov 2). The icon files are round. No links until the accounts
   exist; when an icon gets a link, the a rules below give it a hover and a keyboard focus ring. */
.si .si-ft__social{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.si .si-ft__social li{padding:0}
.si .si-ft__social img{width:36px;height:36px;margin:0}
.si .si-ft__social a{display:block;border-radius:50%;transition:opacity .2s var(--si-ease)}
.si .si-ft__social a:hover{opacity:.8}
.si .si-ft__social a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Mobile action bar: appears after the hero scrolls away */
.si .si-mbar{display:none}
@media (max-width:700px){
  .si .si-mbar{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:fixed;left:0;right:0;bottom:0;z-index:890;
      background:var(--si-blue-dd);padding:10px 22px calc(10px + env(safe-area-inset-bottom));
      box-shadow:0 -8px 24px rgba(0,0,0,.25);transform:translateY(110%);transition:transform .25s var(--si-ease)}
  .si .si-mbar.is-on{transform:none}
  .si .si-mbar .si-btn{width:100%;padding:12px 10px;font-size:13px;min-height:46px}
  .si .si-ft{padding-bottom:96px}
}

/* ---------------------------------------------------------------------
   21. SCROLL REVEAL: one effect, fires once, off for reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .si-js .si [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--si-ease),transform .6s var(--si-ease);
      transition-delay:var(--si-rd,0ms)}
  .si-js .si [data-reveal].is-visible{opacity:1;transform:none}
}
/* Inside the Elementor editor, show everything */
.elementor-editor-active .si [data-reveal]{opacity:1;transform:none}

/* ---------------------------------------------------------------------
   22. THEME COLLISIONS (Hello Elementor styles buttons and links)
   --------------------------------------------------------------------- */
.si .si-burger:hover,.si .si-burger:focus,.si .si-burger:active{background:rgba(255,255,255,.24);color:#fff;border:0}
.si a:not([class]):hover{color:var(--si-cyan-tx)}
.si .si-tone-blue a:not([class]):hover,.si .si-ft a:not([class]):hover{color:#fff}

/* ---------------------------------------------------------------------
   23. SMALL HELPERS ADDED FOR INNER PAGES
   --------------------------------------------------------------------- */
.si .si-note{font-size:13.5px;color:var(--si-grey);margin-top:14px}
.si .si-tone-blue .si-note{color:var(--si-on-dark-2)}
.si .si-logos span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--si-blue);text-align:center;line-height:1.35}
.si .si-gal figure{margin:0}
.si .si-gal figcaption{font-size:13px;color:var(--si-grey);margin-top:8px}
.si .si-card .si-more{margin-top:18px}
.si .si-card ul{margin-top:10px}
.si .si-card li{font-size:15px;color:var(--si-grey);padding:3px 0}
.si .si-contact .si-card{display:flex;flex-direction:column}
.si .si-contact .si-card b{display:block;font-family:var(--si-fd);font-size:26px;color:var(--si-blue);line-height:1.1;margin:4px 0 6px}
.si .si-nap a{color:#fff}
.si .si-nap .si-more{color:#fff;margin-top:18px}
.si .si-split + .si-split{margin-top:clamp(40px,5vw,72px)}
.si .si-sec--tight{padding:clamp(40px,4vw,64px) 0}

/* ---------------------------------------------------------------------
   24. BLOG: Elementor Posts widget (Classic skin, 3 columns, CSS class si-posts;
   the widget itself sets columns, gaps, and image ratio)
   and single posts, which use the theme's post layout
   --------------------------------------------------------------------- */
.si-posts{max-width:var(--si-max);margin:0 auto;padding:var(--si-sy) 24px;font-family:var(--si-fb)}
/* Elementor's .elementor.elementor .e-con > .elementor-widget{max-width:100%} outranks the line above */
.elementor.elementor .e-con > .elementor-widget.si-posts{max-width:var(--si-max)}
.si-posts .elementor-post{background:#fff;border-top:4px solid var(--si-cyan);display:flex;flex-direction:column;
    clip-path:polygon(0 0,calc(100% - var(--si-clip)) 0,100% var(--si-clip),100% 100%,0 100%);box-shadow:inset 0 0 0 1px var(--si-line)}
.si-posts .elementor-post__thumbnail__link{display:block;margin:0}
.si-posts .elementor-post__text{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.si-posts .elementor-post__title,.si-posts .elementor-post__title a{font-family:var(--si-fd);font-size:21px;line-height:1.2;color:var(--si-blue);margin:0 0 10px}
.si-posts .elementor-post__meta-data{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--si-grey);margin-bottom:10px}
.si-posts .elementor-post__excerpt p{font-size:15.5px;line-height:1.55;color:var(--si-grey);margin:0 0 14px}
.si-posts .elementor-post__read-more{margin-top:auto;font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--si-blue);border-bottom:2px solid var(--si-cyan);padding-bottom:5px;align-self:flex-start}
.si-posts .elementor-posts-nothing-found{font-size:17px;color:var(--si-grey);text-align:center;padding:20px 0}
.si-posts .elementor-pagination{margin-top:36px;text-align:center;font-weight:700;color:var(--si-blue)}
.single-post #content{max-width:760px;margin:0 auto;padding:56px 24px 80px;font-family:var(--si-fb);font-size:18px;line-height:1.7;color:var(--si-ink)}
.single-post #content h1,.single-post #content h2,.single-post #content h3{font-family:var(--si-fd);color:var(--si-blue);line-height:1.15;font-weight:700}
.single-post #content h1{font-size:var(--si-h1-inner)}
.single-post #content a{color:var(--si-cyan-tx);text-decoration:underline}
.single-post #content img{height:auto}
@media (min-width:620px){.si .si-tiles--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.si .si-tiles--2 .si-tile{aspect-ratio:16/9}}

/* ---------------------------------------------------------------------
   25. LOGO CAROUSEL (Home and Who We Serve, "National Programs"): logos on a pure white panel
   with a cyan top bar and the clipped corner, set in a navy band.
   CSS only, no controls (Kevin, Oct 13): the strip glides left at a steady
   pace and loops without a seam, because the list is in the HTML twice and
   the track moves exactly one list width per loop. 2 logos in view on
   phones, 3 on tablets, 4 from 900px. Reduced motion: no movement; the logos
   wrap into centered rows instead.
   --------------------------------------------------------------------- */
.si .si-pcar{--si-pcar-n:2;--si-pcar-g:clamp(24px,2vw + 16px,36px);--si-pcar-fade:clamp(16px,4vw,48px);
    background:#fff;border-top:4px solid var(--si-cyan)}
@media (min-width:600px){.si .si-pcar{--si-pcar-n:3}}
@media (min-width:900px){.si .si-pcar{--si-pcar-n:4}}
/* The window: logos fade in and out at its edges */
.si .si-pcar__win{overflow:hidden;container-type:inline-size;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--si-pcar-fade),#000 calc(100% - var(--si-pcar-fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--si-pcar-fade),#000 calc(100% - var(--si-pcar-fade)),transparent)}
.si .si-pcar__track{display:flex;width:max-content}
.si .si-pcar__list{display:flex;flex:0 0 auto}
/* Item width: n logos and their gaps fill the window (100cqw); the first width is for browsers without cqw */
.si .si-pcar__item{flex:0 0 auto;margin-right:var(--si-pcar-g);position:relative;display:flex;align-items:center;justify-content:center;
    width:calc((min(100vw - 48px,1152px) - (var(--si-pcar-n) - 1) * var(--si-pcar-g)) / var(--si-pcar-n));
    width:calc((100cqw - (var(--si-pcar-n) - 1) * var(--si-pcar-g)) / var(--si-pcar-n));
    height:clamp(116px,8vw + 70px,168px);padding:0 clamp(8px,1.5vw,20px)}
/* Slanted hairline between logos, at the logo angle, centered in the gap */
.si .si-pcar__item::before{content:"";position:absolute;left:calc(var(--si-pcar-g) / -2);top:24%;bottom:24%;
    width:1px;background:var(--si-line);transform:skewX(var(--si-nslant))}
/* Every logo file is square. Marks show whole; wordmarks crop to the middle band of the file. */
.si .si-pcar__item img{width:auto;height:clamp(64px,6vw + 30px,96px);object-fit:contain}
.si .si-pcar__item--wide img{width:100%;max-width:200px;height:auto;aspect-ratio:9/5;object-fit:cover}
/* The glide: 30s per loop of 9 logos, about 3.3s per logo at every screen size. Change it here if the count changes. */
@keyframes si-pcar-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  .si .si-pcar__track{animation:si-pcar-run 30s linear infinite;will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  .si .si-pcar__list[aria-hidden]{display:none}
  .si .si-pcar__track{width:auto}
  .si .si-pcar__list{flex:1 1 auto;flex-wrap:wrap;justify-content:center;gap:0 var(--si-pcar-g)}
  .si .si-pcar__item{margin-right:0}
  .si .si-pcar__item::before{display:none}
  .si .si-pcar__win{-webkit-mask-image:none;mask-image:none}
}

/* ---------------------------------------------------------------------
   26. QUOTE FORM (Contact, Nov 3): a native Elementor form, so it sits
   outside .si. Layout, fonts, and colors are set on the form's own
   elements in Elementor; this only does what the form cannot.
   --------------------------------------------------------------------- */
form.e-form-base input[type=checkbox].e-form-checkbox-base,
form.e-form-base input[type=radio].e-form-radio-button-base{width:20px;height:20px;flex:0 0 20px;margin:0;
    border:1.5px solid var(--si-grey);background-color:#fff;cursor:pointer}
form.e-form-base input[type=checkbox].e-form-checkbox-base:checked{background-color:var(--si-blue);border-color:var(--si-blue)}
form.e-form-base input[type=radio].e-form-radio-button-base:checked{background-color:#fff;border:6px solid var(--si-blue)}
form.e-form-base input:focus-visible{outline:2px solid var(--si-cyan);outline-offset:2px}
/* "Is your sign down right now?" shows only when "Sign service or repair" is ticked */
form.e-form-base:has(input[name="interest"][value="Sign-service-or-repair"]:not(:checked)) > .e-con:has(input[name="sign_down"]){display:none}