/* ProvTeam static build — design system.
   Same conventions as the SacITCentral build: .app-frame, .site-header,
   .desktop-nav, .mobile-menu, .hero-carousel,
   plus Kadence block layout classes used by the mirrored page content. */
:root{
  --navy:#1b2a4a;
  --blue:#1068b5; /* production Mai --color-link */
  --brand:#3fa9f5;
  --ink:#222;
  --muted:#555;
  --line:#e2e2e2;
  --bg:#fff;
  --soft:#f5f7fa;
  --maxw:1200px; /* production Mai --breakpoint-xl */
  --color-alt:#f6f7f8; /* production Mai --color-alt */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip} /* 100vw full-bleed breakouts include the scrollbar width; never allow page-level horizontal scroll */
body{margin:0;font-family:"Cabin Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(16px + 0.15vw);color:#6c747d;background:var(--bg);line-height:1.6} /* production Mai --color-body, --font-size-md */
/* production (Mai Engine theme): headings use Montserrat 500, #000 (--color-heading), line-height 1.265625 */
h1,h2,h3,h4,h5,h6{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;color:#000;line-height:1.265625}
img{max-width:100%;height:auto}
/* production Mai list styles: markers outside, margin 0 0 12px 1.75em, line-height 1.423828125 */
ul{list-style-type:disc}
ol{list-style-type:decimal}
dl,ol,ul{line-height:1.423828125;list-style-position:outside;margin:0 0 12px 1.75em;padding:0}
dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{margin:12px 0 12px 1em}
ol li,ul li{margin:0}
a{color:var(--blue);text-decoration:none} /* production: links not underlined by default */
.app-frame{min-height:100vh;display:flex;flex-direction:column}

/* ---------- header ---------- */
/* production Mai: header height comes from 36px vertical title-area padding
   (desktop), flex space-between, 1200px wrap, 24px gap. NOT sticky, no border. */
.site-header{background:#fff;position:relative}
/* production Mai: header is sticky on desktop/tablet (>=800px) via
   body.has-sticky-header; relative only on mobile */
@media (min-width:800px){.site-header{position:sticky;top:0;z-index:100}}
.header-inner{max-width:var(--maxw);width:calc(100% - (16px + 2vw)*2);margin:0 auto;padding:36px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-logo img{display:block;width:280px;height:auto} /* production custom-logo-width:280px desktop */
.desktop-nav{margin-left:auto}
.desktop-nav .main-menu{display:flex;gap:0;list-style:none;margin:0;padding:0;align-items:center;justify-content:flex-end;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;font-size:calc((16px + 0.15vw)/1.25)} /* production Mai menu: Montserrat 600, --font-size-sm */
.desktop-nav .main-menu>li{position:relative}
.desktop-nav .main-menu>li>a{text-decoration:none;color:#000;font-weight:600;padding:16px 16px;display:block} /* production Mai --menu-item-link-color #000 */
.desktop-nav .main-menu>li>a:hover{color:var(--blue)} /* production hover --color-link */
.desktop-nav .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid rgba(10,20,30,.05);box-shadow:0 8px 24px rgba(0,0,0,.12);border-radius:4px;list-style:none;margin:0;padding:.5rem 0;min-width:200px;z-index:60}
.desktop-nav .has-children:hover>.sub-menu,.desktop-nav .has-children:focus-within>.sub-menu{display:block}
.desktop-nav .sub-menu a{display:block;padding:.5rem 1rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.desktop-nav .sub-menu a:hover{background:var(--soft);color:var(--blue)}
/* production Mai search: absolutely-positioned white dropdown inside the last nav item */
.desktop-nav .search-icon-form{position:relative}
.search-toggle{background:transparent;border:0;cursor:pointer;padding:12px 4px;color:#000;position:relative}
.search-toggle svg{width:1.5em;height:1.5em;display:block} /* production --search-toggle-icon-width:1.5em */
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;color:var(--navy)} /* production: no hamburger on desktop */
.search-icon-form .search-form{display:none;position:absolute;right:0;top:100%;background:#fff;box-shadow:0 0.25em 1em 0 rgba(10,20,30,.1);padding:12px;max-width:var(--maxw);z-index:70}
.search-icon-form.search-open .search-form{display:flex;gap:.5rem;align-items:center}
.search-icon-form .search-form input{padding:.6rem .8rem;font-size:1rem;border:1px solid #ccc;border-radius:2px;min-width:200px;font-family:inherit}
.search-icon-form .search-form button{background:var(--brand);color:#fff;border:2px solid transparent;border-radius:4px;padding:.75em 1.25em;font-size:.8rem;font-weight:600;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;cursor:pointer}
.search-icon-form .search-results{position:absolute;right:0;top:100%;background:#fff;box-shadow:0 0.25em 1em 0 rgba(10,20,30,.1);z-index:70;min-width:280px}
.search-icon-form .search-results a{display:flex;gap:.6rem;padding:.5rem .75rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.search-icon-form .search-results a span{font-size:.75rem;background:var(--navy);color:#fff;border-radius:3px;padding:.1rem .4rem;height:fit-content}
/* mobile menu search gets the same treatment, stacked */
.mobile-menu .search-icon-form{position:relative}
.mobile-menu .search-icon-form .search-form{position:static;box-shadow:none;padding:.75rem 0}
.mobile-menu .search-icon-form.search-open .search-form{display:flex}
.mobile-menu .search-icon-form .search-results{position:static;box-shadow:none}
/* production Mai hamburger: three 2px lines, icon only, no visible label */
.menu-toggle-icon,.menu-toggle-icon::before,.menu-toggle-icon::after{display:block;width:24px;height:2px;border-radius:2px;background:currentColor}
.menu-toggle-icon{position:relative}
.menu-toggle-icon::before,.menu-toggle-icon::after{content:"";position:absolute;left:0}
.menu-toggle-icon::before{top:-7px}
.menu-toggle-icon::after{top:7px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* production Mai mobile menu: absolute dropdown panel below the header
   (top:100%), white header bg, body-gray text, border-bottom; hidden until
   body.mobile-menu-visible; hamburger morphs into an X when open */
.mobile-menu{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;color:#6c747d;border-bottom:1px solid rgba(10,20,30,.1);padding:1rem 0;max-height:calc(100vh - 90px);overflow-y:auto;z-index:60}
body.mobile-menu-visible .mobile-menu{display:block}
.mobile-menu .wrap{max-width:var(--maxw);margin:0 auto;padding:0 1rem}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu .menu>li{border-bottom:1px solid rgba(10,20,30,.07)}
.mobile-menu .menu>li:last-child{border-bottom:0}
.mobile-menu a{display:block;padding:.7rem 0;color:#000;text-decoration:none;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600}
.mobile-menu a:hover{color:var(--blue)}
.mobile-menu .sub-menu{margin:0 0 .5rem 1rem}
.mobile-menu .sub-menu a{font-weight:500;padding:.45rem 0}
/* production Mai: mobile sub-menus are collapsed; tap the chevron to expand */
.mobile-menu .sub-menu{display:none}
.mobile-menu .sub-menu.visible{display:block}
.mobile-menu .has-children{position:relative}
.sub-menu-toggle{background:transparent;border:0;cursor:pointer;padding:.8rem .6rem;position:absolute;right:0;top:0;color:#000;line-height:0}
.sub-menu-toggle-icon{display:block;width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.mobile-menu .has-children.active .sub-menu-toggle-icon{transform:rotate(-135deg)}
/* hamburger -> X when the menu is open (production Mai vars) */
body.mobile-menu-visible .menu-toggle-icon{background:transparent}
body.mobile-menu-visible .menu-toggle-icon::before{top:0;transform:rotate(45deg)}
body.mobile-menu-visible .menu-toggle-icon::after{top:0;transform:rotate(-45deg)}
.mobile-menu .sub-menu{list-style:none;margin:0;padding:0 0 0 1rem}
/* /search/ results page (static equivalent of production's ?s= results) */
.search-page-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;max-width:640px;margin:1.5rem 0}
.search-page-form label{flex:1 1 100%;font-weight:600}
.search-page-form input{flex:1 1 auto;min-width:200px;padding:.6rem .8rem;font-size:1rem;border:1px solid #bbb;border-radius:4px;font-family:inherit}
.search-page-form button{background:var(--blue);color:#fff;border:0;border-radius:4px;padding:.7rem 1.5rem;font-size:1rem;font-weight:700;cursor:pointer}
.search-page-form button:hover{background:var(--navy)}
.search-page-list{list-style:none;padding:0;margin:1rem 0;max-width:640px}
.search-page-list li{margin:.5rem 0}
.search-page-list span{font-size:.75rem;background:var(--navy);color:#fff;border-radius:3px;padding:.1rem .4rem;margin-left:.5rem}

/* ---------- hero carousel ---------- */
/* Cross-fade replica of production's Slider Revolution hero (v6.7.35):
   slides are absolutely stacked; JS cross-fades opacity (~0.8s) every 9s
   (production: fade <=1s, autoplay 9s, pause on hover, loops forever).
   Arrows + bullet dots are invisible until the slider is hovered; a 5px
   progress bar runs across the top over each 9s cycle.
   Production's slider is a FIXED 500px tall (Slider Revolution inline
   style="height:500px", viewport-width independent) — measured 2026-10-03. */
.hero-carousel{position:relative;background:#000}
.hero-viewport{position:relative;overflow:hidden;height:500px}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* production Slider Revolution panZoom (Ken Burns): bg image scales 100%->125%
   over the 9s slide duration — the "moves forward" entrance Austin described */
.hero-slide.is-active img{animation:hero-kenburns 9s ease-out forwards}
@keyframes hero-kenburns{from{transform:scale(1)}to{transform:scale(1.25)}}
/* production caption: 64px/400 Open Sans, black, top-left, single line
   (white-space:nowrap — never wraps), on a translucent white background
   (per-slide opacity set inline to match production) */
.hero-caption{position:absolute;top:20px;left:15px;color:#000;text-align:left}
.hero-title{display:inline-block;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:64px;font-weight:400;line-height:1.2;white-space:nowrap;padding:.1em .35em}
/* production tagline: 36px italic, positioned left:282px/top:88px relative
   to the caption block */
.hero-tagline{position:absolute;left:282px;top:88px;display:inline-block;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:36px;font-style:italic;font-weight:400;line-height:1.2;white-space:nowrap;padding:.1em .35em}
/* hover-revealed controls (production: opacity 0 until hover) */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.35);color:#fff;border:0;width:44px;height:64px;font-size:28px;line-height:1;cursor:pointer;opacity:0;transition:opacity .3s ease}
.hero-prev{left:12px}
.hero-next{right:12px}
.hero-bullets{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;gap:8px;opacity:0;transition:opacity .3s ease}
.hero-bullets button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer}
.hero-bullets button[aria-selected="true"]{background:#fff}
.hero-carousel:hover .hero-arrow,.hero-carousel:hover .hero-bullets{opacity:1}
.hero-arrow:focus-visible,.hero-bullets button:focus-visible{opacity:1}
/* thin 5px progress bar across the top, animating over the 9s cycle */
.hero-progress{position:absolute;top:0;left:0;right:0;height:5px;z-index:3;background:rgba(255,255,255,.25)}
.hero-progress-fill{display:block;height:100%;width:0;background:#fff}
.hero-progress-fill.run{animation:hero-progress 9s linear forwards}
.hero-carousel.is-paused .hero-progress-fill{animation-play-state:paused}
@keyframes hero-progress{from{width:0}to{width:100%}}

/* ---------- main ---------- */
.site-main,.interior-main{flex:1;max-width:var(--maxw);margin:0 auto;padding:2rem 1rem;width:100%}
/* production interior pages: full-width blue title banner + breadcrumb */
.page-banner{background:var(--brand);color:#fff;text-align:center;padding:2vw 1rem}
.page-banner-title{margin:0;font-size:3rem;font-weight:400;color:#fff} /* production heading weight */
.breadcrumbs{font-size:.85rem;color:var(--muted);max-width:var(--maxw);margin:1rem 0 0;padding:0 1rem;text-align:left !important} /* production: left-justified, never centered */
nav.breadcrumbs{text-align:left !important;margin-left:0 !important;margin-right:0 !important}
.breadcrumbs a{color:var(--blue);text-decoration:none}
.breadcrumbs .sep{margin:0 .35rem;color:#999}
.rich-content{font-size:1.02rem;color:#6c747d} /* production body gray */
.rich-content h2{color:#000;margin-top:1.75rem}
.rich-content h3{color:#000}
.rich-content hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
/* WordPress/Kadence preset classes */
.has-alt-color{color:#fff}
.has-lg-font-size{font-size:1.625rem}
.is-style-heading{font-weight:500;color:#000} /* production Kadence headings: no weight override -> Mai 500 */
/* Mai Engine icons (e.g. thumbs-up circles on about-us): honor the --icon-* custom props */
/* production Mai icon CSS (mai-engine blocks.min.css), verbatim: the About page
   alternates solid-gray-circle/white-icon with outline-circle/gray-icon;
   staging's fallback bg + missing border var made the outline ones invisible */
.mai-icon{line-height:0;vertical-align:middle}
.mai-icon-wrap{background-color:var(--icon-background);border:var(--icon-border,unset);border-radius:var(--icon-border-radius,unset);display:inline-block;height:calc(var(--icon-size) + var(--icon-padding)*2);margin:var(--icon-margin);padding:var(--icon-padding);text-align:center;width:calc(var(--icon-size) + var(--icon-padding)*2)}
.mai-icon svg{color:var(--icon-color);height:100%;max-height:var(--icon-size);max-width:var(--icon-size);width:100%;fill:currentColor}
/* homepage blue band (#1da9e5): white 28px heading, normal weight (production).
   Heading line-height 1.265625 = production Mai heading line-height (1 * 1.125 * 1.125).
   Button: production Kadence large outline button — font-size 1.35rem
   (.kt-btn-size-large), padding calc(.4em-3px) calc(1em-3px), 3px border. */
[style*="background-color:#1da9e5"] .wp-block-kadence-advancedheading{color:#fff;font-size:1.75rem;font-weight:400;line-height:1.265625}
[style*="background-color:#1da9e5"] .kb-button.kt-btn-size-large{font-size:1.35rem;padding:calc(.4em - 3px) calc(1em - 3px);border-width:3px}
/* production's blue band has NO group padding (measured 2026-10-03: ~130px =
   24px row padding x2 + ~71px heading + ~12px margin); the WP default
   1.25em/2.375em padding made staging taller AND squeezed the heading into
   more lines on mobile */
[style*="background-color:#1da9e5"].wp-block-group.has-background{padding:0}
[style*="background-color:#1da9e5"] .kb-row-layout-wrap{margin-bottom:0}
[style*="background-color:#1da9e5"] .kt-row-column-wrap{padding-top:1.5rem;padding-bottom:1.5rem}
/* homepage gray band (#e6e6e6): 40px heading in production body gray (#6c747d) */
[style*="background-color:#e6e6e6"] .wp-block-kadence-advancedheading{font-size:2.5rem;color:#6c747d}
/* homepage "Need Help With an IT Project?" light-blue bordered box */
.pt-blue-border{border:2px solid #a9d8f2;border-radius:6px}
.pt-blue-border .wp-block-kadence-advancedheading{font-size:2.25rem}
/* homepage client logos: single 5-col grid (.client-logo-grid), rebuilt from the
   5 Kadence rows in build.py. (The old per-row full-bleed breakout only matched
   the first row's id -> misaligned rows + 100vw horizontal scrollbar.) */
.client-logo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;align-items:center;max-width:1280px;margin:0 auto;padding:0 1rem}
.client-logo-grid a{display:flex;align-items:center;justify-content:center;min-width:0}
.client-logo-grid img{max-width:100%;height:auto}
/* production logo rows: 5 cols desktop -> single column at <=1024px
   (Kadence: .kb-row-layout-id* > .kt-row-column-wrap{grid-template-columns:minmax(0,1fr)} at 1024px and 767px) */
.kt-adv-heading11_266a35-b1{font-size:2.25rem;color:#222}

/* Kadence block layout (mirrored content uses these classes) */
/* production rows carry NO vertical margin — rhythm comes from the per-row
   1.5rem top/bottom padding in Kadence's inline styles (measured 2026-10-03) */
.kb-row-layout-wrap{margin:0}
.kb-row-layout-wrap.alignfull{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding-left:1rem;padding-right:1rem}
/* full-bleed breakout for alignfull groups (homepage blue band) — same pattern
   as alignfull rows; inner container stays at content width (Kadence default) */
.wp-block-group.alignfull{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.wp-block-group.alignfull > .wp-block-group__inner-container{max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem} /* production Mai --breakpoint-xl content width */
.kt-row-column-wrap{display:grid;gap:2rem}
.kt-row-column-wrap.kt-has-1-columns{grid-template-columns:1fr}
.kt-row-column-wrap.kt-has-2-columns{grid-template-columns:repeat(2,1fr)}
/* production Kadence row layouts: golden ratios are 2:1, not 1:1 */
.kt-row-column-wrap.kt-row-layout-left-golden{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.kt-row-column-wrap.kt-row-layout-right-golden{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.kt-row-column-wrap.kt-has-3-columns{grid-template-columns:repeat(3,1fr)}
.kt-row-column-wrap.kt-has-4-columns{grid-template-columns:repeat(4,1fr)}
.kt-inside-inner-col{min-width:0}
.wp-block-kadence-advancedheading{margin:0 0 .75rem}
.wp-block-image figure{margin:0 0 1rem}
.wp-block-image .aligncenter{text-align:center}
.wp-block-buttons{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0}
/* neutral default: Kadence buttons carry their own colors in inline <style>;
   never let the generic rule paint them orange */
.wp-block-button__link,.kt-button{display:inline-block;background:transparent;color:var(--navy);border:2px solid var(--navy);text-decoration:none;padding:.7rem 1.6rem;border-radius:4px;font-weight:700}
.wp-block-button__link:hover,.kt-button:hover{filter:brightness(.93)}
/* production Kadence button base + sizes (kadence-blocks advancedbtn.css):
   staging's generic .kt-button made every Kadence button bold with oversized
   padding; production is normal weight, 1.125rem base / 1.35rem large */
.kb-button:not(.kb-btn-global-inherit){border:0 solid rgba(0,0,0,0);padding:.4em 1em;cursor:pointer;font-size:1.125rem;border-radius:3px;font-weight:400}
.wp-block-kadence-advancedbtn .kb-button.kt-btn-size-small{font-size:.9rem}
.wp-block-kadence-advancedbtn .kb-button.kt-btn-size-large{font-size:1.35rem}
.wp-block-kadence-advancedbtn .kb-button.kt-btn-size-xlarge{font-size:1.65rem}
.kb-button.kb-btn-global-outline.kt-btn-size-small{border-width:1px;padding:calc(.4em - 1px) calc(1em - 1px)}
.kb-button.kb-btn-global-outline.kt-btn-size-large{border-width:3px;padding:calc(.4em - 3px) calc(1em - 3px)}
.kb-button.kb-btn-global-outline.kt-btn-size-xlarge{border-width:4px}
/* production Kadence DEPRECATED button styles (kb-button-deprecated-style.min.css):
   old .kt-button elements WITHOUT .kb-button (e.g. Careers "Current Job Postings"):
   20px/12px-24px/3px-border large vs staging's inherited 16px bold */
.kt-btn-wrap .kt-button:where(:not(.kb-button)){text-decoration:none;position:relative;z-index:1;overflow:hidden}
.kt-btn-wrap .kt-button:not(.kb-btn-global-inherit):where(:not(.kb-button)){padding:8px 16px;cursor:pointer;font-size:18px;display:flex;line-height:1.6;text-decoration:none;text-align:center;align-items:center;justify-content:center;border-width:2px;border-radius:3px;border-color:#555;background:transparent;color:#555;box-shadow:none;border-style:solid;font-weight:400}
.kt-btn-wrap .kt-button:where(:not(.kb-button)).kt-btn-size-small{font-size:16px;padding:4px 8px;border-width:1px}
.kt-btn-wrap .kt-button:where(:not(.kb-button)).kt-btn-size-large{font-size:20px;padding:12px 24px;border-width:3px}
/* production About Us CTA buttons (Kadence custom colors) */
.kb-button.kb-btn156_0b7d70-b3{background:#8ed1fc;color:#555555;border:1px solid #555555}
.kb-button.kb-btn156_709f38-6c{background:transparent;color:#555555;border:1px solid #555555}
.kt-btn-align-center{text-align:center}
.kt-btn-align-left{text-align:left}
.kt-btn-align-right{text-align:right}
/* production Kadence advanced-button: flex wrapper + full-width button type */
.wp-block-kadence-advancedbtn{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}
.kb-button.kt-btn-width-type-full{flex:1 0 fit-content;width:100%}
.kb-button{text-align:center} /* production Kadence buttons center their label */
.kt-svg-icon-list{list-style:none;margin:0 0 .75rem;padding:0}
/* Kadence sizes list icons via font-size on the wrapper; the svg must be 1em */
.kb-svg-icon-wrap{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.kb-svg-icon-wrap svg{width:1em;height:1em;fill:currentColor;display:block}
/* homepage three-column titles: ~28px gray with larger icons (production) */
.kt-svg-icon-list .kb-svg-icon-wrap{font-size:2.5rem}
.kt-svg-icon-list-text{font-weight:400;font-size:1.75rem;color:#6c747d} /* production body weight; Kadence sets no weight */
.wp-block-separator{border:0;border-top:2px solid var(--line);margin:1.5rem auto;max-width:100%}
.has-text-align-center{text-align:center}

/* ---------- forms ---------- */
/* production WPForms classic: form spans full content width, 24px vertical margin */
.contact-form{max-width:none;margin:24px auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* production .wpforms-field: 20px vertical rhythm (padding:10px 0) */
.form-field{padding:10px 0;margin-bottom:0}
.form-field label{display:block;font-weight:700;font-size:16px;line-height:1.3;margin:0 0 4px 0}
.form-field label .req{color:#333;font-weight:400} /* production .wpforms-required-label */
/* production WPForms Name field: "Name *" group label + First/Last sublabels */
.form-group-label{display:block;font-weight:700;font-size:16px;line-height:1.3;margin:0 0 4px 0}
.form-group-label .req{color:#333;font-weight:400}
.form-name .form-row .form-field{padding:0}
.sublabel{display:block;font-size:13px;color:#666;margin:4px 0 0 0;font-weight:400}
/* production WPForms inputs: 38px height, 6px 10px padding, #ccc border, 2px radius, #333 text */
.form-field input,.form-field textarea{display:block;width:100%;height:38px;padding:6px 10px;font-size:16px;font-family:inherit;color:#333;background:#fff;border:1px solid #ccc;border-radius:2px;line-height:1.3;box-sizing:border-box}
.form-field textarea{height:120px} /* production textarea.wpforms-field-medium */
/* production Mai button: #3fa9f5, Montserrat 600, 16px, 0.9rem 2rem padding */
.form-field button{background:#eee;color:#333;border:1px solid #ddd;border-radius:2px;padding:10px 15px;font-size:1em;font-weight:400;font-family:inherit;display:block;width:100%;line-height:1.3;cursor:pointer} /* production WPForms classic submit */
.form-field button:hover{background:#e0e0e0}
.form-note{color:var(--muted);font-size:.95rem}
.form-status{margin-top:.75rem;font-weight:600}

/* ---------- footer ---------- */
/* production: near-black footer, white copyright strip below it */
/* production footer: #262729 bg, 1383px inner, 1.5rem padding, 3 equal cols, no top margin */
.site-footer{color:#6c747d;margin-top:0} /* production: footer element is
   transparent; only the content row carries #262729, copyright sits below
   on the white page background */
/* full-bleed dark footer content row (production Kadence alignfull row) */
.footer-dark{background:#262729;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.footer-grid{max-width:1383px;margin:0 auto;padding:1.5rem 1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.footer-col h2{color:#f6f7f8;font-weight:500;font-size:calc((16px + 0.15vw)*1.953125);margin:0 0 .75rem} /* production Mai --font-size-xxl (desktop), has-alt-color */
.footer-col p,.footer-col li{font-size:calc(16px + 0.15vw)} /* production Mai --font-size-md */
.footer-col a{color:var(--blue)} /* production footer links inherit --color-link */
.footer-col ol{margin:0 0 12px 1.75em;padding:0;list-style-position:outside} /* production Mai list rules */
.footer-col li{margin-bottom:.4rem}
/* production shows the brand logos plain — no white rounded box */
.footer-brand{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.footer-bottom{text-align:center;padding:1rem;font-size:clamp(0.8rem,0.73rem + 0.217vw,0.9rem);color:#333} /* production: transparent group below the dark row, white page bg, Kadence xs vertical padding */
.footer-bottom a{color:var(--blue)}

/* ---------- responsive ---------- */
/* Production breakpoints (measured from mai-engine + Kadence CSS, read-only):
   - Kadence content rows: multi-col -> 1 col at <=1024px (tablet) and <=767px (mobile)
   - Mai header: desktop nav + 280px logo at >=1000px; hamburger + 120px logo below 1000px
     (desktop.min.css media='only screen and (min-width:1000px)'; logo sizes="(min-width:1000px) 280px, 120px")
   - Footer columns: 3 cols down to 767px, 1 col at <=767px
   - WPForms contact form stacks at <=600px
   - mai-success theme: .page-header-title 2rem at <=778px, 1.5rem at <=480px */
@media (max-width:1024px){
  .client-logo-grid{grid-template-columns:minmax(0,1fr)}
  .kt-row-column-wrap.kt-has-2-columns,.kt-row-column-wrap.kt-has-3-columns,.kt-row-column-wrap.kt-has-4-columns{grid-template-columns:1fr}
}
@media (max-width:999px){
  .desktop-nav{display:none}
  .header-inner{padding:16px 0} /* production --title-area-padding-mobile */
  .site-logo img{width:120px}
  .menu-toggle{display:inline-flex;margin-left:auto}
  .search-toggle{margin-left:0}
}
@media (max-width:900px){
  .hero-title{font-size:48px}
  .hero-tagline{font-size:28px;left:200px;top:70px}
  .hero-caption{top:12px;left:10px}
}
/* production Mai type scale for footer headings at smaller breakpoints
   (tablet --font-scale 1.2 -> 1.2^3, mobile --font-scale 1.125 -> 1.125^3) */
@media (max-width:999px){.footer-col h2{font-size:calc((16px + 0.15vw)*1.728)}}
/* production mai-success theme: page header title shrinks on small screens */
@media (max-width:778px){.page-banner-title{font-size:2rem}}
@media (max-width:799px){.footer-col h2{font-size:calc((16px + 0.15vw)*1.423828125)}}
/* production footer columns stay 3-col until <=767px */
@media (max-width:767px){.footer-grid{grid-template-columns:1fr}}
/* production Mai: headings break words on mobile to prevent overflow */
@media (max-width:799px){h1,h2,h3,h4,h5,h6{word-break:break-word}}
/* mobile hero: whole photo visible and proportional (same fix as SacITCentral
   2026-10-03) — production's slider scales down instead of cover-cropping */
@media (max-width:767px){
  .hero-viewport{height:auto;aspect-ratio:1200/620}
  .hero-slide img{object-fit:contain}
}
@media (max-width:760px){
  .hero-title{font-size:34px}
  .hero-tagline{position:static;display:inline-block;margin-top:.5rem;font-size:22px}
  .hero-arrow{width:36px;height:52px}
}
/* production WPForms stacks its two-column rows at <=600px */
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
@media (max-width:520px){
  .hero-title{font-size:22px}
  .hero-tagline{font-size:16px}
}
@media (max-width:480px){.page-banner-title{font-size:1.5rem}}