/*
Theme Name: WITS
Theme URI: https://webcodeits.com/
Description: Custom child theme for WITS — Webcode Infrastructure & Turnkey Solutions. Warm Editorial design system built on OceanWP. Institutional turnkey solutions: learning spaces, facility development, technology, and LOAMS.
Author: WITS / Webcode Infrastructure & Turnkey Solutions
Author URI: https://webcodeits.com/
Template: oceanwp
Version: 0.1.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wits
*/

/* ============================================================
   WITS Design Tokens  (source: docs/design-system/WITS-DESIGN-SYSTEM.md)
   ============================================================ */
:root {
  /* color */
  --wits-bg:            #FAFAF9;
  --wits-surface:       #FFFFFF;
  --wits-surface-warm:  #F5F0E6;
  --wits-ink:           #1C1917;   /* primary text + dark sections */
  --wits-ink-deep:      #12100E;   /* footer */
  --wits-fg:            #1C1917;
  --wits-muted:         #57534E;
  --wits-faint:         #78716C;
  --wits-border:        #E7E5E4;
  --wits-label:         #6B6660;   /* small uppercase labels — AA on light/warm */
  --wits-gold:          #A16207;   /* accent / CTA fill */
  --wits-gold-text:     #8A5206;   /* gold AS TEXT — AA on light + warm */
  --wits-gold-on-dark:  #D4A24A;   /* gold on dark bg (contrast) */
  --wits-gold-tint:     #FDF3E3;
  --wits-teal:          #0B7D72;   /* secondary / links — AA 4.8:1 on light + as text bg */
  --wits-teal-dark:     #0A6E64;
  --wits-teal-tint:     #EAFAF7;
  --wits-danger:        #DC2626;
  --wits-focus:         #0D9488;

  /* type */
  --wits-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --wits-font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* spacing scale */
  --wits-s-1: 4px;  --wits-s-2: 8px;  --wits-s-3: 12px; --wits-s-4: 16px;
  --wits-s-5: 22px; --wits-s-6: 32px; --wits-s-7: 44px; --wits-s-8: 62px; --wits-s-9: 82px;

  /* radius / layout */
  --wits-radius-card: 18px;
  --wits-radius-lg:   22px;
  --wits-radius-btn:  8px;
  --wits-radius-pill: 999px;
  --wits-container:   1440px;
  --wits-gutter:      72px;
  --wits-btn-h:       48px;
}

/* ============================================================
   Base
   ============================================================ */
body.wits,
body {
  background: var(--wits-bg);
  color: var(--wits-fg);
  font-family: var(--wits-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wits-disp { font-family: var(--wits-font-display); font-weight: 500; letter-spacing: -0.01em; }

a { color: var(--wits-teal); text-decoration: none; }
a:hover { color: var(--wits-teal-dark); }

/* Visible keyboard focus everywhere (a11y P0) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .wits-btn:focus-visible {
  outline: 3px solid var(--wits-focus);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

/* ============================================================
   Reusable helpers (mirror the mockups)
   ============================================================ */
.wits-eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wits-gold-text);
}
.wits-chip {
  font-size: 13px; font-weight: 600; color: var(--wits-muted);
  background: var(--wits-surface); border: 1px solid var(--wits-border);
  padding: 8px 14px; border-radius: var(--wits-radius-pill); display: inline-block;
}

/* Buttons — min 44px touch target */
.wits-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--wits-btn-h); padding: 14px 30px;
  border-radius: var(--wits-radius-btn); font-weight: 600; font-size: 15.5px;
  cursor: pointer; border: 1.5px solid transparent; transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.wits-btn--gold  { background: var(--wits-gold); color: var(--wits-bg); }
.wits-btn--gold:hover  { background: #8a5206; color: var(--wits-bg); }
.wits-btn--ghost { background: transparent; color: var(--wits-ink); border-color: var(--wits-border); }
.wits-btn--ghost:hover { border-color: #d6d3d1; transform: translateY(-1px); }
.wits-btn--on-dark { background: transparent; color: var(--wits-bg); border-color: #57534E; }

/* Cards */
.wits-card {
  background: var(--wits-surface); border: 1px solid var(--wits-border);
  border-radius: var(--wits-radius-card);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wits-card--interactive { cursor: pointer; }
.wits-card--interactive:hover {
  border-color: var(--wits-gold-on-dark);
  box-shadow: 0 14px 30px rgba(28,25,23,0.08);
  transform: translateY(-2px);
}

/* Section rhythm */
.wits-section { padding: var(--wits-s-9) var(--wits-gutter); }
.wits-container { max-width: var(--wits-container); margin-inline: auto; }

/* ============================================================
   Motion — subtle, and OFF under reduced-motion
   ============================================================ */
/* JS-gated: the hidden start state only applies when JS is running (html.wits-js),
   so content is never stuck invisible if JS is disabled or fails. */
.wits-js .wits-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; transition-delay: var(--wits-reveal-delay, 0s); }
.wits-js .wits-reveal.is-in { opacity: 1; transform: none; }

/* Soft image zoom on photo cards (killed under reduced-motion by the block below) */
.wits-hero__tile img, .wits-cap-featured__media img, .wits-project__media img { transition: transform .5s ease; }
.wits-hero__tile:hover img, .wits-project:hover img, .wits-cap-featured:hover .wits-cap-featured__media img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .wits-js .wits-reveal { opacity: 1; transform: none; }
  .wits-js .wits-statement, .wits-js .wits-showcase > *, .wits-js .wits-moreproj{ opacity:1; transform:none; }
  .wits-hero__tile img, .wits-cap-featured__media img, .wits-project__media img { transform: none !important; }
}

/* ============================================================
   Responsive gutters
   ============================================================ */
@media (max-width: 1024px) { :root { --wits-gutter: 40px; } }
@media (max-width: 768px)  { :root { --wits-gutter: 24px; } .wits-section { padding: 56px var(--wits-gutter); } }
@media (max-width: 480px)  { :root { --wits-gutter: 20px; } }

/* ============================================================
   CHROME — header, nav, mobile drawer, footer
   ============================================================ */

/* a11y helpers */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wits-skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--wits-ink); color: var(--wits-bg); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.wits-skip-link:focus { left: 0; color: var(--wits-bg); }

/* Header */
.wits-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--wits-bg); border-bottom: 1px solid var(--wits-border);
}
.wits-header__inner {
  max-width: var(--wits-container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--wits-gutter);
}
.wits-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.wits-header__brand img { height: 48px; width: auto; display: block; }

/* Primary nav */
.wits-nav { margin-left: auto; }
.wits-nav__list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.wits-nav__item { position: relative; }
.wits-nav__item > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 500; color: #44403c; padding: 8px 0;
}
.wits-nav__item > a:hover { color: var(--wits-ink); }
.wits-nav__caret { color: var(--wits-faint); }

/* Dropdown */
.wits-nav__sub {
  position: absolute; top: calc(100% + 6px); left: -14px; min-width: 250px;
  background: var(--wits-surface); border: 1px solid var(--wits-border);
  border-radius: 12px; box-shadow: 0 16px 34px rgba(28,25,23,0.12);
  list-style: none; margin: 0; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.wits-nav__item.has-sub:hover > .wits-nav__sub,
.wits-nav__item.has-sub:focus-within > .wits-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.wits-nav__sub a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; font-weight: 500; color: var(--wits-ink);
}
.wits-nav__sub a:hover { background: var(--wits-surface-warm); color: var(--wits-ink); }

.wits-header__cta { flex-shrink: 0; padding: 11px 22px; min-height: 0; font-size: 14px; }

/* Mobile toggle — hidden on desktop */
.wits-navtoggle { display: none; background: none; border: 0; padding: 6px; color: var(--wits-ink); cursor: pointer; }

/* Mobile drawer */
.wits-drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--wits-ink); color: var(--wits-bg);
  transform: translateX(100%); transition: transform .28s ease; overflow-y: auto;
  visibility: hidden;
}
.wits-drawer.is-open { transform: translateX(0); visibility: visible; }
.wits-drawer__inner { padding: 84px 24px 40px; }
.wits-drawer__list { list-style: none; margin: 0 0 24px; padding: 0; }
.wits-drawer__top a { display: block; padding: 16px 0; font-family: var(--wits-font-display); font-size: 22px; font-weight: 600; color: var(--wits-bg); border-bottom: 1px solid #2a2521; }
.wits-drawer__sub a { display: block; padding: 11px 0 11px 18px; font-size: 15px; color: rgba(250,249,249,0.66); border-bottom: 1px solid #211d1a; }
.wits-drawer__cta { display: flex; width: 100%; margin-bottom: 22px; }
.wits-drawer__contact { font-size: 13.5px; line-height: 1.8; color: rgba(250,249,249,0.6); }
.wits-drawer__contact a { color: rgba(250,249,249,0.6); }
body.wits-nav-open { overflow: hidden; }

/* Footer */
.wits-footer { background: var(--wits-ink-deep); color: rgba(250,249,249,0.6); }
.wits-footer__top {
  max-width: var(--wits-container); margin-inline: auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px;
  padding: 62px var(--wits-gutter) 40px;
}
.wits-footer__mark { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wits-footer__w { width: 34px; height: 34px; border-radius: 8px; background: var(--wits-gold); color: var(--wits-ink-deep); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.wits-footer__name { color: var(--wits-bg); font-size: 22px; font-weight: 600; }
.wits-footer__tag { color: rgba(250,249,249,0.72); font-size: 14px; margin: 0 0 14px; }
.wits-footer__line { color: var(--wits-gold-on-dark); font-size: 15px; font-style: italic; margin: 0; }
.wits-footer__h { color: var(--wits-bg); font-family: var(--wits-font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px; }
.wits-footer__col ul { list-style: none; margin: 0; padding: 0; }
.wits-footer__col li { margin-bottom: 10px; }
.wits-footer__col a { color: rgba(250,249,249,0.66); font-size: 14px; }
.wits-footer__col a:hover { color: var(--wits-bg); }
.wits-footer__contact { font-style: normal; font-size: 14px; line-height: 1.7; color: rgba(250,249,249,0.66); }
.wits-footer__contact a { color: rgba(250,249,249,0.66); }
.wits-footer__contact a:hover { color: var(--wits-bg); }
.wits-footer__bottom {
  max-width: var(--wits-container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px var(--wits-gutter); border-top: 1px solid #2a2521; font-size: 13px;
}
.wits-footer__bottom a { color: var(--wits-gold-on-dark); font-weight: 600; }

/* Generic prose container */
.wits-flow { max-width: 760px; }
.wits-flow > * + * { margin-top: 1rem; }

/* Legal / long-form prose (privacy policy, terms) */
.wits-legal { max-width: 800px; margin-inline: auto; padding: 40px var(--wits-gutter) 72px; }
.wits-legal h1 { font-size: 44px; line-height: 1.08; font-weight: 500; margin: 0 0 10px; }
.wits-legal__meta { color: var(--wits-faint); font-size: 14px; margin: 0 0 32px; }
.wits-legal h2 { font-size: 24px; font-weight: 600; margin: 36px 0 12px; }
.wits-legal p, .wits-legal li { font-size: 16px; line-height: 1.7; color: var(--wits-muted); }
.wits-legal ul { padding-left: 22px; margin: 0 0 12px; }
.wits-legal li { margin-bottom: 6px; }
.wits-legal a { color: var(--wits-teal); font-weight: 600; }
.wits-footer__legal a { color: rgba(250,249,249,0.66); }
.wits-footer__legal a:hover { color: var(--wits-bg); }

/* ============================================================
   HOME PAGE  (pattern: patterns/home.php)
   Section classes mirror design/Main.dc.html. Full-bleed page:
   each section owns its gutter; inner content caps at --wits-container.
   ============================================================ */
[class^="wits-hero"] *, [class^="wits-proof"] *, [class^="wits-caps"] *, [class^="wits-cap"] *,
[class^="wits-why"] *, [class^="wits-process"] *, [class^="wits-featured"] *,
[class^="wits-projects"] *, [class^="wits-project"] *, [class^="wits-serve"] *, [class^="wits-finalcta"] * { box-sizing: border-box; }
.wits-home__explore { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--wits-teal); margin-top: 18px; }
.wits-home__explore--gold { color: var(--wits-gold); }
.wits-home__quiet { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--wits-muted); }
.wits-home__quiet:hover { color: var(--wits-ink); }
.wits-icontile { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wits-icontile--gold { background: var(--wits-gold-tint); }
.wits-icontile--teal { background: var(--wits-teal-tint); }

/* --- Hero --- */
.wits-hero { padding: 62px var(--wits-gutter) 34px; }
.wits-hero__grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.wits-hero__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.wits-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: #d6d3d1; }
.wits-hero h1 { font-size: 58px; line-height: 1.04; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 20px; }
.wits-hero h1 em { font-style: italic; color: var(--wits-teal); }
.wits-hero__lead { font-size: 19px; line-height: 1.6; color: var(--wits-muted); margin: 0 0 14px; max-width: 560px; }
.wits-hero__lead strong { color: var(--wits-ink); font-weight: 600; }
.wits-hero__sub { font-size: 14.5px; line-height: 1.5; color: var(--wits-faint); margin: 0 0 26px; max-width: 540px; }
.wits-hero__sub em { font-style: italic; color: var(--wits-gold); font-family: var(--wits-font-display); }
.wits-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.wits-hero__actions { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.wits-hero__visual { position: relative; }
.wits-hero__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wits-hero__tile { position: relative; border-radius: 16px; overflow: hidden; }
.wits-hero__tile img { width: 100%; height: 200px; object-fit: cover; display: block; }
.wits-hero__tilelabel { position: absolute; left: 12px; bottom: 11px; font-size: 12px; font-weight: 700; color: var(--wits-bg); background: rgba(28,25,23,0.72); padding: 5px 11px; border-radius: var(--wits-radius-pill); }
.wits-hero__stat { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: var(--wits-bg); border: 1px solid var(--wits-border); border-radius: 12px; padding: 12px 20px; box-shadow: 0 12px 30px rgba(28,25,23,0.14); display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.wits-hero__stat b { font-family: var(--wits-font-display); font-size: 24px; font-weight: 600; color: var(--wits-gold); }
.wits-hero__stat span { font-size: 12px; color: var(--wits-faint); line-height: 1.3; }
.wits-hero__stat span em { color: var(--wits-teal); font-weight: 600; font-style: normal; }

/* --- Proof strip --- */
.wits-proof { background: var(--wits-ink); color: var(--wits-bg); padding: 34px var(--wits-gutter); margin-top: 30px; }
.wits-proof__grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: center; }
.wits-proof__num { font-family: var(--wits-font-display); font-size: 30px; font-weight: 600; }
.wits-proof__lbl { font-size: 13px; color: rgba(250,249,249,0.6); }
.wits-proof__clients { max-width: var(--wits-container); margin: 30px auto 0; padding-top: 24px; border-top: 1px solid #3f3a35; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.wits-proof__clients .wits-eyebrow { color: rgba(250,249,249,0.45); flex-shrink: 0; }
.wits-proof__names { display: flex; gap: 34px; opacity: 0.72; font-weight: 600; font-size: 15px; color: var(--wits-bg); flex-wrap: wrap; }

/* --- What we do --- */
.wits-caps { padding: 82px var(--wits-gutter) 30px; }
.wits-caps__head { max-width: var(--wits-container); margin: 0 auto 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.wits-caps__head h2 { font-size: 42px; line-height: 1.1; font-weight: 500; margin: 0; max-width: 640px; }
.wits-caps__head p { font-size: 15.5px; line-height: 1.6; color: var(--wits-faint); max-width: 300px; margin: 0; }
.wits-cap-featured { max-width: var(--wits-container); margin: 0 auto 22px; overflow: hidden; display: grid; grid-template-columns: 1.1fr 0.9fr; }
.wits-cap-featured__body { padding: 40px 44px; }
.wits-cap-featured h3 { font-size: 28px; font-weight: 600; margin: 0 0 12px; }
.wits-cap-featured p { font-size: 15.5px; line-height: 1.6; color: var(--wits-muted); margin: 0 0 18px; max-width: 460px; }
.wits-cap-featured__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wits-cap-featured__media { position: relative; min-height: 300px; }
.wits-cap-featured + .wits-cap-featured { margin-top: 22px; }
.wits-cap-featured--flip { grid-template-columns: 0.9fr 1.1fr; }
.wits-cap-featured__note { font-size: 14px; line-height: 1.55; color: var(--wits-muted); margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--wits-border); max-width: 460px; }
.wits-cap-featured__note strong { color: var(--wits-gold); font-weight: 600; }
.wits-cap-grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wits-cap { padding: 32px; }
.wits-cap h3 { font-size: 21px; font-weight: 600; margin: 18px 0 9px; }
.wits-cap p { font-size: 14.5px; line-height: 1.6; color: var(--wits-muted); margin: 0; }
.wits-cap p strong { color: var(--wits-ink); font-weight: 600; }
.wits-imgfill { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }

/* --- Why WITS --- */
.wits-why { padding: 74px var(--wits-gutter) 20px; }
.wits-why__panel { max-width: var(--wits-container); margin-inline: auto; background: var(--wits-surface-warm); border-radius: var(--wits-radius-lg); padding: 52px 48px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; }
.wits-why__panel h2 { font-size: 40px; line-height: 1.08; font-weight: 500; margin: 0 0 16px; }
.wits-why__panel > div > p { font-size: 16px; line-height: 1.6; color: var(--wits-muted); margin: 0; }
.wits-why__cap { font-size: 13px; font-weight: 700; color: var(--wits-label); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.wits-why__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.wits-why__check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--wits-ink); font-weight: 500; }
.wits-why__check svg { flex-shrink: 0; margin-top: 1px; }

/* --- How we work --- */
.wits-process { padding: 60px var(--wits-gutter) 20px; }
.wits-process__rule { max-width: var(--wits-container); margin: 0 auto 26px; display: flex; align-items: center; gap: 14px; }
.wits-process__rule span.line { flex: 1; height: 1px; background: var(--wits-border); }
.wits-process__rule .wits-motto { font-family: var(--wits-font-display); font-size: 15px; font-style: italic; color: var(--wits-faint); }
.wits-process__grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wits-step { background: var(--wits-surface); border: 1px solid var(--wits-border); border-radius: 14px; padding: 24px 22px; }
.wits-step__n { font-family: var(--wits-font-display); font-size: 15px; color: var(--wits-gold-on-dark); margin-bottom: 8px; }
.wits-step__t { font-family: var(--wits-font-display); font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.wits-step__d { font-size: 13px; line-height: 1.5; color: var(--wits-faint); }

/* --- Featured project --- */
.wits-featured { padding: 62px var(--wits-gutter) 20px; }
.wits-featured__card { max-width: var(--wits-container); margin-inline: auto; background: var(--wits-teal-dark); border-radius: var(--wits-radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.wits-featured__body { padding: 48px 46px; color: var(--wits-bg); }
.wits-featured__kicker { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250,249,249,0.86); margin-bottom: 14px; }
.wits-featured__body h2 { font-size: 34px; line-height: 1.12; font-weight: 500; margin: 0 0 16px; color: var(--wits-bg); }
.wits-featured__body p { font-size: 15.5px; line-height: 1.6; color: rgba(250,249,249,0.95); margin: 0 0 24px; }
.wits-featured__meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 13.5px; margin-bottom: 26px; }
.wits-featured__meta dt { color: rgba(250,249,249,0.86); margin: 0; }
.wits-featured__meta dd { color: var(--wits-bg); font-weight: 500; margin: 0; }
.wits-featured__foot { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.wits-featured__stats { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 22px; }
.wits-featured__stats b { font-family: var(--wits-font-display); font-size: 22px; font-weight: 600; color: var(--wits-bg); }
.wits-featured__stats span { font-size: 12px; color: rgba(250,249,249,0.86); }
.wits-featured__media { position: relative; min-height: 380px; }
.wits-btn--on-teal { background: var(--wits-bg); color: var(--wits-teal-dark); }
.wits-btn--on-teal:hover { background: #fff; color: var(--wits-teal-dark); }

/* --- Selected projects --- */
.wits-projects { padding: 58px var(--wits-gutter) 20px; }
.wits-projects__head { max-width: var(--wits-container); margin: 0 auto 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.wits-projects__head h2 { font-size: 30px; font-weight: 500; margin: 0; }
.wits-projects__grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wits-project { overflow: hidden; }
.wits-project__media { position: relative; height: 190px; }
.wits-project__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wits-project__label { position: absolute; left: 14px; top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wits-ink); background: rgba(255,255,255,0.9); padding: 5px 10px; border-radius: var(--wits-radius-pill); }
.wits-project__body { padding: 22px 24px; }
.wits-project__body h3 { font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.wits-project__loc { font-size: 13px; color: var(--wits-faint); margin-bottom: 10px; }
.wits-project__svc { font-size: 13px; color: var(--wits-muted); }

/* --- Who we serve --- */
.wits-serve { padding: 74px var(--wits-gutter) 40px; }
.wits-serve__head { max-width: var(--wits-container); margin-inline: auto; }
.wits-serve__head h2 { font-size: 42px; line-height: 1.1; font-weight: 500; margin: 0 0 40px; max-width: 620px; }
.wits-serve__grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--wits-border); }
.wits-serve__col { padding: 30px 26px; border-right: 1px solid var(--wits-border); }
.wits-serve__col:first-child { padding-left: 0; }
.wits-serve__col:last-child { padding-right: 0; border-right: 0; }
.wits-serve__col h3 { font-size: 20px; font-weight: 600; margin: 16px 0 8px; }
.wits-serve__col p { font-size: 14px; line-height: 1.55; color: var(--wits-faint); margin: 0 0 14px; }

/* --- Final CTA --- */
.wits-finalcta { padding: 60px var(--wits-gutter) 84px; }
.wits-finalcta__card { max-width: var(--wits-container); margin-inline: auto; background: var(--wits-ink); border-radius: var(--wits-radius-lg); padding: 62px 56px; text-align: center; }
.wits-finalcta__card .wits-eyebrow { color: var(--wits-gold-on-dark); }
.wits-finalcta__card h2 { font-size: 44px; line-height: 1.08; font-weight: 500; color: var(--wits-bg); margin: 18px auto 14px; max-width: 720px; }
.wits-finalcta__card p { font-size: 17px; color: rgba(250,249,249,0.72); margin: 0 auto 32px; max-width: 560px; }
.wits-finalcta__actions { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   SUBPAGE KIT  (Solutions, capability pages, and later pages)
   Reusable blocks: page hero, card grid, capability rows,
   pull-quote, callout, gallery.
   ============================================================ */
[class^="wits-pagehero"] *, [class^="wits-sub"] *, [class^="wits-caprow"] *,
[class^="wits-pullquote"] *, [class^="wits-callout"] *, [class^="wits-gallery"] *, [class^="wits-gtile"] * { box-sizing: border-box; }

/* Page hero (full-bleed image banner) */
.wits-pagehero { position: relative; min-height: 420px; overflow: hidden; display: flex; }
.wits-pagehero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wits-pagehero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,25,23,0.92) 0%, rgba(28,25,23,0.7) 46%, rgba(28,25,23,0.15) 100%); }
.wits-pagehero__inner { position: relative; max-width: var(--wits-container); margin-inline: auto; width: 100%; padding: 64px var(--wits-gutter); display: flex; flex-direction: column; justify-content: center; }
.wits-pagehero__box { max-width: 720px; }
.wits-pagehero__crumb { font-size: 13px; color: rgba(250,249,249,0.65); margin-bottom: 16px; }
.wits-pagehero__crumb a, .wits-pagehero__crumb span.here { color: var(--wits-gold-on-dark); }
.wits-pagehero h1 { font-size: 52px; line-height: 1.05; font-weight: 500; color: var(--wits-bg); margin: 0 0 18px; }
.wits-pagehero__lead { font-size: 18px; line-height: 1.6; color: rgba(250,249,249,0.82); margin: 0 0 28px; max-width: 580px; }
.wits-pagehero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.wits-btn--on-photo { background: transparent; color: var(--wits-bg); border-color: rgba(250,249,249,0.45); }
.wits-btn--on-photo:hover { border-color: var(--wits-bg); }

/* Turnkey ribbon */
.wits-ribbon { max-width: var(--wits-container); margin-inline: auto; padding: 34px var(--wits-gutter); border-bottom: 1px solid var(--wits-border); display: flex; align-items: center; gap: 14px; }
.wits-ribbon span.line { flex: 1; height: 1px; background: var(--wits-border); }
.wits-ribbon .wits-motto { font-family: var(--wits-font-display); font-size: 15px; font-style: italic; color: var(--wits-gold); }

/* Generic band + heading */
.wits-band { max-width: var(--wits-container); margin-inline: auto; padding: 74px var(--wits-gutter) 30px; }
.wits-band__h { font-size: 40px; line-height: 1.1; font-weight: 500; margin: 14px 0 40px; max-width: 640px; }

/* 3-col info cards */
.wits-subgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wits-subcard { background: var(--wits-surface); border: 1px solid var(--wits-border); border-radius: 16px; padding: 26px; }
.wits-subcard svg { margin-bottom: 16px; }
.wits-subcard h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.wits-subcard p { font-size: 14px; line-height: 1.55; color: var(--wits-faint); margin: 0; }

/* Capability rows (alternating image / text) */
.wits-caprow { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding: 48px var(--wits-gutter); }
.wits-caprow__media { position: relative; height: 380px; border-radius: 20px; overflow: hidden; }
.wits-caprow__num { font-family: var(--wits-font-display); font-size: 18px; color: var(--wits-gold-on-dark); }
.wits-caprow h2 { font-size: 34px; font-weight: 600; margin: 0 0 14px; }
.wits-caprow p { font-size: 16px; line-height: 1.65; color: var(--wits-muted); margin: 0 0 20px; max-width: 520px; }
.wits-caprow__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.wits-caprow--flip .wits-caprow__media { order: 2; }

/* Pull-quote */
.wits-pullquote { max-width: var(--wits-container); margin-inline: auto; padding: 50px var(--wits-gutter); }
.wits-pullquote__inner { background: var(--wits-surface-warm); border-radius: var(--wits-radius-lg); padding: 56px 64px; text-align: center; }
.wits-pullquote__inner p { font-family: var(--wits-font-display); font-size: 30px; line-height: 1.4; font-weight: 500; color: var(--wits-ink); margin: 0 auto; max-width: 900px; }
.wits-pullquote__mark { color: var(--wits-gold-on-dark); margin-bottom: 18px; }

/* Warm 2-col callout */
.wits-callout { max-width: var(--wits-container); margin-inline: auto; padding: 40px var(--wits-gutter); }
.wits-callout__inner { background: var(--wits-surface-warm); border-radius: var(--wits-radius-lg); padding: 44px 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.wits-callout h2 { font-size: 32px; line-height: 1.14; font-weight: 500; margin: 0 0 12px; }
.wits-callout p { font-size: 15.5px; line-height: 1.6; color: var(--wits-muted); margin: 0; }
.wits-callout__media { position: relative; height: 240px; border-radius: 16px; overflow: hidden; background: var(--wits-surface); }
.wits-callout__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

/* Gallery */
.wits-gallery { max-width: var(--wits-container); margin-inline: auto; padding: 40px var(--wits-gutter) 30px; }
.wits-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.wits-gallery__head h2 { font-size: 30px; font-weight: 500; margin: 0; }
.wits-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wits-gtile { position: relative; border-radius: 14px; overflow: hidden; }
.wits-gtile img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform .5s ease; }
.wits-gtile:hover img { transform: scale(1.045); }
.wits-gcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 16px 12px; background: linear-gradient(transparent, rgba(28,25,23,0.82)); color: var(--wits-bg); font-size: 13.5px; font-weight: 600; }

/* LOAMS mini dashboard (illustrative) */
.wits-loams { max-width: var(--wits-container); margin-inline: auto; padding: 40px var(--wits-gutter); }
.wits-loams__inner { background: var(--wits-teal-dark); border-radius: var(--wits-radius-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 48px 52px; }
.wits-loams__body .wits-eyebrow { color: var(--wits-bg); }
.wits-loams__body h2 { font-size: 30px; line-height: 1.14; font-weight: 500; color: var(--wits-bg); margin: 12px 0; }
.wits-loams__body p { font-size: 15.5px; line-height: 1.6; color: rgba(250,249,249,0.95); margin: 0; }
.wits-loams__panel { background: var(--wits-bg); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.wits-loams__panel-h { display: flex; justify-content: space-between; align-items: center; }
.wits-loams__panel-h b { font-family: var(--wits-font-display); font-size: 16px; font-weight: 600; color: var(--wits-ink); }
.wits-loams__stats { display: flex; gap: 10px; }
.wits-loams__stat { flex: 1; border-radius: 8px; padding: 12px; }
.wits-loams__stat b { font-family: var(--wits-font-display); font-size: 24px; font-weight: 600; display: block; }
.wits-loams__stat span { font-size: 11px; color: var(--wits-faint); }
.wits-loams__bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; padding-top: 8px; }
.wits-loams__bars i { flex: 1; background: var(--wits-teal); border-radius: 4px 4px 0 0; }
.wits-loams__note { font-size: 10.5px; color: var(--wits-label); text-align: center; }

@media (max-width: 1024px) {
  .wits-pagehero h1 { font-size: 40px; }
  .wits-subgrid { grid-template-columns: 1fr; }
  .wits-caprow { grid-template-columns: 1fr; gap: 32px; }
  .wits-caprow--flip .wits-caprow__media { order: 0; }
  .wits-caprow__media { height: 300px; }
  .wits-callout__inner, .wits-loams__inner { grid-template-columns: 1fr; gap: 28px; }
  .wits-gallery__grid { grid-template-columns: 1fr 1fr; }
  .wits-pullquote__inner { padding: 40px 28px; }
  .wits-pullquote__inner p { font-size: 24px; }
}
@media (max-width: 560px) {
  .wits-pagehero h1 { font-size: 32px; }
  .wits-band__h { font-size: 30px; }
  .wits-gallery__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WHO WE SERVE  (pattern: patterns/who-we-serve.php)
   Uses the .wits-caprow kit; adds the "what you're weighing" list.
   ============================================================ */
.wits-caprow__band { background: var(--wits-surface-warm); }
.wits-weighlabel { font-size: 12px; font-weight: 700; color: var(--wits-label); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 10px; }
.wits-concern { font-size: 14.5px; line-height: 1.5; color: var(--wits-muted); display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.wits-concern::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wits-teal); margin-top: 7px; flex-shrink: 0; }
.wits-caprow__tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ============================================================
   ABOUT PAGE  (pattern: patterns/about.php)
   ============================================================ */
[class^="wits-about"] *, [class^="wits-statcard"] *, [class^="wits-approach"] *, [class^="wits-leader"] *, [class^="wits-ctawarm"] * { box-sizing: border-box; }
.wits-about-grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 74px var(--wits-gutter) 40px; align-items: start; }
.wits-about-grid h2 { font-size: 38px; line-height: 1.12; font-weight: 500; margin: 14px 0 20px; }
.wits-about-grid p { font-size: 16px; line-height: 1.7; color: var(--wits-muted); margin: 0 0 16px; }
.wits-about-grid p:last-child { margin-bottom: 0; }
.wits-statcard { background: var(--wits-surface-warm); border-radius: 20px; padding: 36px 40px; }
.wits-statcard__h { font-family: var(--wits-font-display); font-size: 22px; font-weight: 600; margin-bottom: 20px; }
.wits-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.wits-statgrid b { font-family: var(--wits-font-display); font-size: 34px; font-weight: 600; color: var(--wits-gold); display: block; }
.wits-statgrid span { font-size: 13px; color: var(--wits-faint); }

.wits-approach { max-width: var(--wits-container); margin-inline: auto; padding: 40px var(--wits-gutter); }
.wits-approach__card { background: var(--wits-ink); border-radius: var(--wits-radius-lg); padding: 52px 56px; }
.wits-approach__card h2 { font-size: 34px; line-height: 1.14; font-weight: 500; color: var(--wits-bg); margin: 14px 0 30px; max-width: 720px; }
.wits-approach__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wits-approach__step b { font-family: var(--wits-font-display); font-size: 22px; color: var(--wits-bg); font-weight: 600; display: block; }
.wits-approach__step span { font-size: 12.5px; color: rgba(250,249,249,0.6); margin-top: 4px; display: block; }

.wits-leader { max-width: var(--wits-container); margin-inline: auto; padding: 50px var(--wits-gutter); }
.wits-leader__card { background: var(--wits-surface); border: 1px solid var(--wits-border); border-radius: 20px; padding: 40px 44px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
.wits-leader__avatar { width: 110px; height: 110px; border-radius: 50%; background: var(--wits-teal); display: flex; align-items: center; justify-content: center; font-family: var(--wits-font-display); color: var(--wits-bg); font-size: 40px; font-weight: 600; flex-shrink: 0; }
.wits-leader__card h3 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.wits-leader__role { font-size: 14px; color: var(--wits-gold); font-weight: 600; margin-bottom: 14px; }
.wits-leader__q { font-family: var(--wits-font-display); font-size: 19px; line-height: 1.5; font-style: italic; color: var(--wits-ink); margin: 0; max-width: 760px; }

.wits-ctawarm { max-width: var(--wits-container); margin-inline: auto; padding: 30px var(--wits-gutter) 84px; }
.wits-ctawarm__card { background: var(--wits-surface-warm); border-radius: var(--wits-radius-lg); padding: 52px 56px; text-align: center; }
.wits-ctawarm__card h2 { font-size: 38px; line-height: 1.1; font-weight: 500; margin: 18px auto 12px; max-width: 640px; }
.wits-ctawarm__card p { font-size: 16px; color: var(--wits-muted); margin: 0 auto 28px; max-width: 520px; }
.wits-ctawarm__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1024px) {
  .wits-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .wits-approach__steps { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .wits-leader__card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 560px) {
  .wits-about-grid h2, .wits-ctawarm__card h2 { font-size: 30px; }
  .wits-statgrid { grid-template-columns: 1fr; }
  .wits-approach__steps { grid-template-columns: 1fr; }
  .wits-approach__card, .wits-ctawarm__card { padding: 36px 28px; }
}

/* ============================================================
   PROJECTS  (CPT grid + filter — inc/projects.php)
   ============================================================ */
.wits-pfilterwrap { max-width: var(--wits-container); margin: 0 auto 26px; padding: 0 var(--wits-gutter); }
.wits-pfilter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wits-pfilter button {
	font-family: var(--wits-font-body); font-size: 13.5px; font-weight: 600;
	padding: 9px 18px; border-radius: var(--wits-radius-pill); cursor: pointer;
	background: var(--wits-surface); border: 1px solid var(--wits-border); color: var(--wits-muted);
	transition: background .16s, color .16s, border-color .16s;
}
.wits-pfilter button:hover { border-color: #d6d3d1; }
.wits-pfilter button.is-active { background: var(--wits-ink); color: var(--wits-bg); border-color: var(--wits-ink); }

.wits-pgrid {
	max-width: var(--wits-container); margin-inline: auto; padding: 0 var(--wits-gutter) 10px;
	display: grid; grid-template-columns: repeat(var(--wits-pcols, 4), 1fr); gap: 22px;
}
.wits-pgrid .wits-project { overflow: hidden; }
.wits-project.is-hidden { display: none; }

@media (max-width: 1024px) { .wits-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .wits-pgrid { grid-template-columns: 1fr; } }

/* ---- PROJECT SHOWCASE (single-wits_project.php) ---- */
:root{ --wits-gold-lite:#E7C983; }

/* Cinematic hero */
.wits-showhero{ position:relative; min-height:92vh; display:flex; align-items:flex-end; background-size:cover; background-position:center; }
.wits-showhero::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(18,16,14,.36) 0%, rgba(18,16,14,.05) 38%, rgba(18,16,14,.72) 100%); }
.wits-showhero--plain{ background:var(--wits-ink); }
.wits-showhero__inner{ position:relative; z-index:1; width:100%; max-width:var(--wits-container); margin-inline:auto; padding:0 var(--wits-gutter) clamp(46px,7vw,90px); color:#fff; }
.wits-showhero__eyebrow{ color:var(--wits-gold-lite); }
.wits-showhero__eyebrow a{ color:inherit; }
.wits-showhero__name{ font-size:clamp(46px,8.5vw,104px); line-height:.98; letter-spacing:-.02em; margin:14px 0 0; text-wrap:balance; color:#fff; }
.wits-showhero__tagline{ font-family:var(--wits-serif,"Newsreader",serif); font-style:italic; font-size:clamp(18px,2.4vw,25px); margin:16px 0 0; color:rgba(255,255,255,.92); }
.wits-showhero__lead{ max-width:640px; margin:20px 0 0; color:rgba(255,255,255,.9); }
.wits-showhero__credit{ margin:26px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.28); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.wits-showhero__credit b{ color:#fff; }

/* Overview panel */
.wits-overview{ background:var(--wits-surface-warm); border-bottom:1px solid var(--wits-border); }
.wits-overview__inner{ max-width:var(--wits-container); margin-inline:auto; padding:clamp(46px,6vw,78px) var(--wits-gutter); display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(28px,5vw,72px); }
.wits-overview__head .wits-eyebrow{ color:var(--wits-gold-text); }
.wits-facts{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; margin:0; align-content:start; }
.wits-fact dt{ font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--wits-label); margin:0 0 5px; }
.wits-fact dd{ margin:0; font-size:16.5px; font-weight:500; }
.wits-fact--wide{ grid-column:1 / -1; }
.wits-facts__stats{ grid-column:1 / -1; display:flex; gap:44px; padding-top:24px; border-top:1px solid var(--wits-border); }
.wits-facts__stats b{ display:block; font-size:34px; line-height:1; color:var(--wits-teal-dark); }
.wits-facts__stats span{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--wits-faint); }

/* Statement */
.wits-statement{ text-align:center; padding:clamp(70px,11vw,140px) var(--wits-gutter); }
.wits-statement__kick{ font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--wits-gold-text); margin:0 0 22px; }
.wits-statement__line{ font-weight:400; font-size:clamp(26px,4.2vw,50px); line-height:1.18; max-width:16ch; margin:0 auto; text-wrap:balance; }

/* Gallery (the_content) — full-bleed capable */
.wits-showcase{ overflow-x:clip; }                        /* clamp any full-bleed overflow */
.wits-showcase > *{ max-width:820px; margin-inline:auto; padding-inline:var(--wits-gutter); }
.wits-showcase > .alignwide{ max-width:1280px; }
.wits-showcase > .alignfull{ max-width:none; width:auto; margin-inline:calc(50% - 50vw); padding-inline:0; } /* NOT 100vw (scrollbar) */
.wits-showcase figure.wp-block-image{ margin:clamp(40px,6vw,80px) auto; }
.wits-showcase figure.wp-block-image.alignfull{ margin-block:clamp(48px,7vw,96px); }
.wits-showcase figure.wp-block-image img{ display:block; width:100%; height:auto; }
.wits-showcase .alignfull.wp-block-image img{ height:clamp(360px,72vh,720px); object-fit:cover; }
/* Image captions — match the approved mockup exactly: a baseline-aligned flex row of a serif
   "name" (the bold lead) and a muted description. WP 6.x renders the figcaption as
   .wp-element-caption, so target the figcaption element itself. */
.wits-showcase > figure.wp-block-image > figcaption, .wits-cap{ max-width:var(--wits-container); margin:18px auto 0; padding:0 var(--wits-gutter); display:flex; flex-wrap:wrap; justify-content:center; gap:2px 16px; align-items:baseline; color:var(--wits-faint); font-size:14.5px; line-height:1.5; text-align:center; }
.wits-showcase > figure.wp-block-image > figcaption strong, .wits-cap strong{ flex:none; font-family:var(--wits-font-display); font-weight:500; font-size:19px; color:var(--wits-ink); }
/* two-up gallery — own the 2-col layout (WP's modern has-nested-images gallery CSS is not
   enqueued on this front end, so don't rely on it; grid also wins over core's is-layout-flex) */
.wits-showcase .wp-block-gallery.columns-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,22px); }
/* core sets figure width:calc(50%) boosted to ID specificity via :not(#individual-image); in our
   grid that's 50% of the 50% column (25% total). Mirror the ID-hack so our width:auto wins and the
   figure fills its column. */
.wits-showcase .wp-block-gallery.columns-2 > figure.wp-block-image:not(#wits){ margin:0; width:auto; max-width:100%; }
.wits-showcase .wp-block-gallery.columns-2 > figure.wp-block-image img{ width:100%; height:clamp(300px,46vh,560px); object-fit:cover; }
.wits-showcase .wp-block-gallery.alignwide{ margin-block:clamp(40px,6vw,80px); }
.wits-showcase .wp-block-gallery img{ border-radius:0; }
/* dark band (cover) */
.wits-showcase .wp-block-cover.wits-darkband{ align-items:center; margin-block:clamp(48px,7vw,96px); }
.wits-showcase .wits-darkband .wp-block-cover__inner-container{ max-width:var(--wits-container); margin-inline:auto; padding-inline:var(--wits-gutter); width:100%; }
.wits-showcase .wits-darkband__eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--wits-gold-lite); margin:0; }
.wits-showcase .wits-darkband h2{ font-family:inherit; font-weight:400; font-size:clamp(28px,4.6vw,58px); line-height:1.12; max-width:16ch; margin:16px 0 0; color:#fff; }

/* More projects */
.wits-moreproj{ border-top:1px solid var(--wits-border); }
.wits-moreproj__inner{ max-width:var(--wits-container); margin-inline:auto; padding:clamp(60px,8vw,108px) var(--wits-gutter); }
.wits-moreproj__inner .wits-eyebrow{ color:var(--wits-gold-text); text-align:center; display:block; }
.wits-moreproj h2{ text-align:center; margin:12px 0 40px; }
.wits-moreproj__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--wits-border); }
.wits-moreproj__card{ background:var(--wits-bg); padding:30px 26px; display:flex; flex-direction:column; gap:6px; min-height:150px; justify-content:flex-end; text-decoration:none; color:inherit; transition:background .25s; }
.wits-moreproj__card:hover{ background:var(--wits-surface-warm); }
.wits-moreproj__card .k{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--wits-faint); }
.wits-moreproj__card .nm{ font-size:23px; }
.wits-moreproj__card .go{ margin-top:8px; color:var(--wits-teal-dark); font-weight:600; font-size:14px; }

@media (max-width:820px){ .wits-overview__inner{ grid-template-columns:1fr; } }
@media (max-width:720px){ .wits-moreproj__row{ grid-template-columns:1fr; } .wits-showcase .wp-block-gallery.columns-2{ grid-template-columns:1fr; } }
@media (max-width:480px){ .wits-facts{ grid-template-columns:1fr; } }

/* Reveal start-state for showcase sections (selector-driven, no FOUC) */
.wits-js .wits-statement, .wits-js .wits-showcase > *, .wits-js .wits-moreproj{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.wits-js .wits-statement.is-in, .wits-js .wits-showcase > *.is-in, .wits-js .wits-moreproj.is-in{ opacity:1; transform:none; }

/* ============================================================
   CONTACT PAGE  (pattern: patterns/contact.php)
   ============================================================ */
[class^="wits-contact"] *, .wits-form-card *, .wits-side-next *, .wits-side-reach * { box-sizing: border-box; }
.wits-contact-intro { padding: 58px var(--wits-gutter) 30px; }
.wits-contact-intro__inner { max-width: 820px; margin-inline: auto 0; }
.wits-contact-intro h1 { font-size: 48px; line-height: 1.06; font-weight: 500; margin: 14px 0; }
.wits-contact-intro p { font-size: 18px; line-height: 1.6; color: var(--wits-muted); margin: 0; }
.wits-contact-grid { max-width: var(--wits-container); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; padding: 20px var(--wits-gutter) 72px; align-items: start; }

.wits-form-card { background: var(--wits-surface); border: 1px solid var(--wits-border); border-radius: 20px; padding: 40px 44px; }
.wits-form-card__kicker { font-size: 12px; font-weight: 700; color: var(--wits-label); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 22px; }
.wits-form-card__privacy { font-size: 12.5px; color: var(--wits-label); margin: 16px 0 0; line-height: 1.5; }

/* Sidebar */
.wits-side-next { background: var(--wits-ink); border-radius: 18px; padding: 32px 34px; color: var(--wits-bg); margin-bottom: 20px; }
.wits-side-next .wits-eyebrow { color: var(--wits-gold-on-dark); margin-bottom: 18px; }
.wits-side-step { display: flex; gap: 14px; margin-bottom: 18px; }
.wits-side-step:last-child { margin-bottom: 0; }
.wits-side-step b { font-family: var(--wits-font-display); font-size: 18px; font-weight: 600; color: var(--wits-gold-on-dark); flex-shrink: 0; }
.wits-side-step span { font-size: 14px; line-height: 1.5; color: rgba(250,249,249,0.85); }
.wits-side-reach { background: var(--wits-surface); border: 1px solid var(--wits-border); border-radius: 18px; padding: 30px 32px; }
.wits-side-reach__h { font-size: 12px; font-weight: 700; color: var(--wits-label); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.wits-reach-row { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.wits-reach-row:last-child { margin-bottom: 0; }
.wits-reach-row svg { margin-top: 2px; flex-shrink: 0; }
.wits-reach-row div { font-size: 14px; color: var(--wits-ink); line-height: 1.6; }
.wits-reach-row a { color: var(--wits-ink); }
.wits-reach-row a:hover { color: var(--wits-teal); }

/* --- Fluent Forms restyle to the WITS design system --- */
.wits-form-card .fluentform .ff-el-group { margin-bottom: 20px; }
.wits-form-card .fluentform .ff-el-input--label label,
.wits-form-card .fluentform label.ff-el-form-check-label { font-size: 13px; font-weight: 600; color: #44403c; margin-bottom: 7px; }
.wits-form-card .fluentform .ff-el-is-required > label:after,
.wits-form-card .fluentform .ff-el-input--label.ff-el-is-required label:after { color: var(--wits-gold); }
.wits-form-card .fluentform input[type=text],
.wits-form-card .fluentform input[type=email],
.wits-form-card .fluentform input[type=tel],
.wits-form-card .fluentform input[type=number],
.wits-form-card .fluentform textarea,
.wits-form-card .fluentform select {
	width: 100%; font-family: inherit; font-size: 15px; color: var(--wits-ink);
	background: var(--wits-surface); border: 1.5px solid var(--wits-border);
	border-radius: 9px; padding: 12px 14px; box-shadow: none; line-height: 1.4; height: auto;
}
.wits-form-card .fluentform textarea { min-height: 120px; }
.wits-form-card .fluentform input:focus,
.wits-form-card .fluentform textarea:focus,
.wits-form-card .fluentform select:focus {
	outline: none; border-color: var(--wits-teal); box-shadow: 0 0 0 3px rgba(13,148,136,0.18);
}
.wits-form-card .fluentform .ff-el-help-message { font-size: 12px; color: var(--wits-label); margin-top: 5px; }
.wits-form-card .fluentform .ff-btn-submit {
	background: var(--wits-gold); color: var(--wits-bg); border: 0;
	padding: 14px 30px; border-radius: var(--wits-radius-btn); font-weight: 600; font-size: 15.5px;
	min-height: var(--wits-btn-h); cursor: pointer; transition: background .18s;
}
.wits-form-card .fluentform .ff-btn-submit:hover { background: #8a5206; }
.wits-form-card .fluentform .ff-message-success {
	background: var(--wits-teal-tint); border: 1px solid #99e6dd; border-radius: 12px;
	padding: 16px 20px; color: #0f766e; font-size: 14px;
}

/* ============================================================
   CONTACT — responsive
   ============================================================ */
@media (max-width: 1024px) {
  .wits-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .wits-contact-intro h1 { font-size: 38px; }
  .wits-form-card { padding: 32px 24px; }
}

/* ============================================================
   HOME — responsive
   ============================================================ */
@media (max-width: 1024px) {
  .wits-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .wits-hero h1 { font-size: 46px; }
  .wits-proof__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .wits-caps__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .wits-cap-featured { grid-template-columns: 1fr; }
  .wits-cap-featured__media { min-height: 260px; }
  .wits-cap-grid { grid-template-columns: 1fr; }
  .wits-why__panel { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
  .wits-process__grid { grid-template-columns: repeat(2, 1fr); }
  .wits-featured__card { grid-template-columns: 1fr; }
  .wits-featured__media { min-height: 260px; }
  .wits-projects__grid { grid-template-columns: 1fr; }
  .wits-serve__grid { grid-template-columns: 1fr 1fr; }
  .wits-serve__col, .wits-serve__col:first-child, .wits-serve__col:last-child { padding: 26px 22px; border-right: 0; border-bottom: 1px solid var(--wits-border); }
}
@media (max-width: 640px) {
  .wits-hero h1 { font-size: 38px; }
  .wits-caps__head h2, .wits-serve__head h2 { font-size: 32px; }
  .wits-why__panel h2, .wits-finalcta__card h2 { font-size: 32px; }
  .wits-why__checks { grid-template-columns: 1fr; }
  .wits-process__grid { grid-template-columns: 1fr; }
  .wits-serve__grid { grid-template-columns: 1fr; }
  .wits-hero__collage { grid-template-columns: 1fr 1fr; }
}

/* ---- Responsive: collapse to drawer ---- */
@media (max-width: 900px) {
  .wits-nav, .wits-header__cta { display: none; }
  .wits-navtoggle { display: inline-flex; }
  .wits-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .wits-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .wits-footer__top { grid-template-columns: 1fr; }
}