/* ==========================================================================
   SignWorks 2026 — Design tokens
   Navy resolved to #00072D (SignWorks Branding Manual), per client decision
   2026-08-04. The handoff mock used #0B1E3C; every navy below is the darker
   brand value with gradient stops darkened proportionally.
   ========================================================================== */

:root {
  /* ---- Brand navy ------------------------------------------------------ */
  --sw-navy:        #00072D;  /* primary — headings, buttons, dark bands, scrolled nav */
  --sw-navy-hover:  #0B1645;  /* primary button hover (lighter than base, as the mock intends) */
  --sw-navy-mid:    #020C38;  /* gradient mid stop  (was #0D2347) */
  --sw-navy-deep:   #000021;  /* gradient deep stop (was #091730) */

  /* Alpha navies, used for scrims, nav gradient and the social rail. */
  --sw-navy-a85:    rgba(0, 7, 45, 0.85);
  --sw-navy-a75:    rgba(0, 7, 45, 0.75);
  --sw-navy-a55:    rgba(0, 7, 45, 0.55);
  --sw-navy-a35:    rgba(0, 7, 45, 0.35);
  --sw-navy-a15:    rgba(0, 7, 45, 0.15);
  --sw-navy-a00:    rgba(0, 7, 45, 0);

  /* ---- Blues ----------------------------------------------------------- */
  --sw-blue:        #1E4F91;  /* eyebrows, links, focus ring, badge borders */
  --sw-blue-accent: #3B82F6;  /* numbering, link hover */
  --sw-blue-light:  #7EA6E0;  /* eyebrows on dark bands */

  /* ---- Neutrals -------------------------------------------------------- */
  --sw-bg:          #F6F8FB;  /* page background */
  --sw-card-tint:   #F8FAFC;  /* tinted cards, secondary button hover */
  --sw-white:       #FFFFFF;
  --sw-border:      #E2E8F0;
  --sw-border-str:  #CBD5E1;
  --sw-text:        #475569;  /* card body copy */
  --sw-text-band:   #33445E;  /* intro paragraphs on light-blue headers */
  --sw-muted:       #64748B;  /* form labels, side-card labels */
  --sw-placeholder: #94A3B8;

  /* ---- Gradients ------------------------------------------------------- */
  --sw-grad-header: linear-gradient(155deg, #E3EBF6 0%, #EFF4FB 45%, #D8E3F2 100%);
  --sw-grad-band:   linear-gradient(160deg, var(--sw-navy) 0%, var(--sw-navy-mid) 60%, var(--sw-navy-deep) 100%);
  --sw-grad-bleed:  linear-gradient(180deg, var(--sw-navy) 0%, var(--sw-navy-mid) 60%, var(--sw-navy-deep) 100%);
  --sw-grad-solar:  linear-gradient(135deg, var(--sw-navy) 0%, var(--sw-navy-mid) 55%, var(--sw-navy-deep) 100%);
  --sw-grad-nav:    linear-gradient(180deg, var(--sw-navy) 0%, var(--sw-navy-mid) 100%);
  --sw-grad-navtop: linear-gradient(180deg, var(--sw-navy-a35) 0%, var(--sw-navy-a00) 100%);
  --sw-grad-green:  linear-gradient(90deg, #10B981, #059669); /* Recycled-in-2023 accent bar ONLY */

  /* Hero scrim over the showreel video. */
  --sw-hero-scrim: linear-gradient(180deg,
      var(--sw-navy-a55) 0%,
      var(--sw-navy-a00) 30%,
      var(--sw-navy-a00) 55%,
      var(--sw-navy-a75) 100%);

  /* ---- Type ------------------------------------------------------------ */
  --sw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sw-h1:        48px;
  --sw-h2:        38px;
  --sw-h2-caps:   28px;
  --sw-h3:        24px;
  --sw-card-h3:   20px;
  --sw-body:      15px;
  --sw-body-card: 14px;
  --sw-body-sm:   13px;
  --sw-eyebrow:   11px;
  --sw-micro:     10px;
  --sw-stat:      56px;
  --sw-stat-tile: 26px;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sw-gap-sm: 14px;
  --sw-gap:    16px;
  --sw-gap-md: 18px;
  --sw-gap-lg: 24px;
  --sw-pad-x:  48px;

  /* ---- Containers ------------------------------------------------------ */
  --sw-w-nav:    1280px;
  --sw-w-body:   1160px;
  --sw-w-about:   980px;
  --sw-w-header:  940px;

  /* ---- Radius ---------------------------------------------------------- */
  --sw-r-sm:   6px;   /* buttons, inputs */
  --sw-r:     10px;   /* cards, bands, image tiles */
  --sw-r-pill: 9999px;

  /* ---- Shadow ---------------------------------------------------------- */
  --sw-sh-1: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --sw-sh-2: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --sw-sh-btn: inset 0 1px 0 rgba(255,255,255,0.06);
  --sw-sh-cta: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,7,45,0.28);
  --sw-focus: 0 0 0 2px rgba(30,79,145,0.2);

  /* ---- Motion ---------------------------------------------------------- */
  --sw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sw-t-fast: 150ms;
  --sw-t:      200ms;

  /* ---- Chrome ---------------------------------------------------------- */
  --sw-nav-h: 64px;
}

/* Larger viewports — container and type genuinely scale up. */
@media (min-width: 1600px) {
  :root { --sw-w-nav: 1480px; --sw-w-body: 1280px; --sw-h1: 60px; --sw-stat: 64px; --sw-h2: 34px; --sw-h3: 24px; }
}
@media (min-width: 2000px) {
  :root { --sw-w-nav: 1720px; --sw-w-body: 1440px; --sw-h1: 68px; --sw-pad-x: 64px; }
}

/* Mobile type ramp. */
@media (max-width: 860px) {
  :root {
    --sw-h1: 32px;
    --sw-h2: 25px;
    --sw-h3: 20px;
    --sw-pad-x: 20px;
    --sw-stat: 38px;
  }
}

/* ==========================================================================
   SignWorks 2026 — Base: reset, typography, layout primitives
   ========================================================================== */

/* Self-hosted Inter (latin subset). Replaces the render-blocking Google Fonts
   request the audit measured at 121 KB on a third-party connection.
   font-display: swap so text paints immediately in the fallback. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Inter-Bold.woff2') format('woff2');
}
/* 800 and 900 both map to ExtraBold; the browser synthesises the difference
   rather than loading a fifth file for a handful of stat numerals. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url('/static/fonts/Inter-ExtraBold.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sw-bg);
  color: var(--sw-text);
  font-family: var(--sw-font);
  font-size: var(--sw-body-card);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* Offset for the fixed nav. Interior pages start below it; the hero on Home
   deliberately sits underneath so the video shows through the transparent bar. */
body:not(.home) .sw-main { padding-top: var(--sw-nav-h); }

img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--sw-blue); text-decoration: none; transition: color var(--sw-t) var(--sw-ease); }
a:hover { color: var(--sw-blue-accent); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--sw-navy);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

h1 { font-size: var(--sw-h1); line-height: 1.1; }
h2 { font-size: var(--sw-h2); line-height: 1.15; }
h3 { font-size: var(--sw-h3); }

p { margin: 0; }

/* --- Layout primitives ---------------------------------------------------- */

.sw-wrap {                       /* body container */
  max-width: var(--sw-w-body);
  margin: 0 auto;
  padding-left: var(--sw-pad-x);
  padding-right: var(--sw-pad-x);
}

.sw-wrap--nav   { max-width: var(--sw-w-nav); }
.sw-wrap--about { max-width: var(--sw-w-about); }
.sw-wrap--head  { max-width: var(--sw-w-header); }

.sw-band {                       /* inner width on full-bleed navy bands */
  max-width: var(--sw-w-body);
  margin: 0 auto;
  padding: 88px var(--sw-pad-x);
}

/* --- Type helpers --------------------------------------------------------- */

.sw-eyebrow {
  font-size: var(--sw-eyebrow);
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sw-blue);
}
.sw-eyebrow--tight { letter-spacing: 0.1em; }
.sw-eyebrow--ondark { color: var(--sw-blue-light); }

.sw-micro {
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-muted);
}

.sw-intro {
  font-size: var(--sw-body);
  line-height: 1.85;
  color: var(--sw-text-band);
  max-width: 820px;
  margin: 22px auto 0;
}

.sw-body { font-size: var(--sw-body-card); line-height: 1.75; color: var(--sw-text); }
.sw-body + .sw-body { margin-top: 12px; }

/* --- Buttons -------------------------------------------------------------- */

.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--sw-r-sm);
  font-family: inherit;
  font-size: var(--sw-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--sw-t) var(--sw-ease),
              border-color var(--sw-t) var(--sw-ease),
              color var(--sw-t) var(--sw-ease);
}

.sw-btn--primary {
  background: var(--sw-navy);
  color: var(--sw-white);
  box-shadow: var(--sw-sh-btn);
}
.sw-btn--primary:hover { background: var(--sw-navy-hover); color: var(--sw-white); }

.sw-btn--cta {
  height: 48px;
  padding: 0 36px;
  font-size: 12px;
  letter-spacing: 0.12em;
  background: var(--sw-navy);
  color: var(--sw-white);
  box-shadow: var(--sw-sh-cta);
}
.sw-btn--cta:hover { background: var(--sw-navy-hover); color: var(--sw-white); }

.sw-btn--light { background: var(--sw-white); color: var(--sw-navy); }
.sw-btn--light:hover { background: var(--sw-border); color: var(--sw-navy); }

.sw-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--sw-white);
}
.sw-btn--ghost:hover { background: rgba(255,255,255,0.08); color: var(--sw-white); }

.sw-btn--secondary {
  height: 40px;
  border: 1px solid var(--sw-border);
  background: var(--sw-white);
  color: var(--sw-navy);
}
.sw-btn--secondary:hover {
  background: var(--sw-card-tint);
  border-color: var(--sw-border-str);
  color: var(--sw-navy);
}

.sw-btn--sm { height: 40px; }

/* --- Accessibility -------------------------------------------------------- */

.sw-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sw-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--sw-white);
  color: var(--sw-navy);
  border-radius: var(--sw-r-sm);
  font-size: 13px;
  font-weight: 700;
}
.sw-skip-link:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--sw-blue);
  outline-offset: 2px;
}

/* Respect reduced-motion for every transition and entrance animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Optional entrance motion --------------------------------------------- */

.sw-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--sw-ease), transform 400ms var(--sw-ease);
}
.sw-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   SignWorks 2026 — Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Navigation
   Includes a real Services dropdown. The previous theme had no submenu
   styling at all, which is why nested menu items rendered as a flat list.
   -------------------------------------------------------------------------- */

.sw-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--sw-nav-h);
  background: var(--sw-grad-navtop);
  border-bottom: 1px solid transparent;
  transition: background var(--sw-t) var(--sw-ease), border-color var(--sw-t) var(--sw-ease);
}

.sw-nav.is-scrolled {
  background: var(--sw-grad-nav);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* The transparent top state only works over the dark hero on Home. Every
   interior page opens on the pale-blue header, where white nav text on a light
   background is close to illegible — so those pages start solid. */
body:not(.home) .sw-nav {
  background: var(--sw-grad-nav);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* Drawer open on mobile always needs a solid bar behind it. */
.sw-nav.is-open {
  background: var(--sw-grad-nav);
  border-bottom-color: rgba(255,255,255,0.08);
}

.sw-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--sw-w-nav);
  margin: 0 auto;
  padding: 0 var(--sw-pad-x);
}

.sw-nav__logo img { height: 16px; width: auto; filter: brightness(0) invert(1); }

.sw-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sw-nav__list a {
  display: inline-block;
  padding: 6px 0;
  font-size: var(--sw-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  border-bottom: 2px solid transparent;
  transition: color var(--sw-t) var(--sw-ease), border-color var(--sw-t) var(--sw-ease);
}
.sw-nav__list a:hover { color: var(--sw-white); }
.sw-nav__list .current-menu-item > a,
.sw-nav__list .current_page_item > a,
.sw-nav__list .current-menu-ancestor > a {
  color: var(--sw-white);
  border-bottom-color: var(--sw-white);
}

/* ---- Dropdown ---- */

.sw-nav__list li { position: relative; }

.sw-nav__list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sw-t) var(--sw-ease);
}
.sw-nav__list .menu-item-has-children:hover > a::after,
.sw-nav__list .menu-item-has-children:focus-within > a::after { transform: rotate(-135deg); }

.sw-nav__list .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -18px;
  z-index: 60;
  min-width: 226px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--sw-grad-nav);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sw-r);
  box-shadow: 0 12px 32px rgba(0,7,45,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--sw-t) var(--sw-ease),
              transform var(--sw-t) var(--sw-ease),
              visibility 0s linear var(--sw-t);
}

/* Hover bridge so the pointer can travel from parent to panel. */
.sw-nav__list .menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 14px;
}

.sw-nav__list .menu-item-has-children:hover > .sub-menu,
.sw-nav__list .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sw-nav__list .sub-menu a {
  display: block;
  padding: 9px 12px;
  border-bottom: 0;
  border-radius: var(--sw-r-sm);
  font-size: var(--sw-micro);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.sw-nav__list .sub-menu a:hover { background: rgba(255,255,255,0.1); color: var(--sw-white); }
.sw-nav__list .sub-menu .current-menu-item > a { background: rgba(255,255,255,0.08); color: var(--sw-white); }

/* ---- Mobile drawer (replaces the mock's scrolling nav, per the handoff) ---- */

.sw-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sw-nav__toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--sw-white);
  transition: transform var(--sw-t) var(--sw-ease), opacity var(--sw-t) var(--sw-ease);
}
.sw-nav.is-open .sw-nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sw-nav.is-open .sw-nav__toggle span:nth-child(2) { opacity: 0; }
.sw-nav.is-open .sw-nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .sw-nav__toggle { display: block; }

  .sw-nav__list {
    position: fixed;
    inset: var(--sw-nav-h) 0 auto 0;
    display: block;
    max-height: calc(100vh - var(--sw-nav-h));
    overflow-y: auto;
    padding: 8px var(--sw-pad-x) 24px;
    background: var(--sw-grad-nav);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sw-t) var(--sw-ease),
                transform var(--sw-t) var(--sw-ease),
                visibility 0s linear var(--sw-t);
  }
  .sw-nav.is-open .sw-nav__list {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }

  .sw-nav__list > li { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .sw-nav__list > li:last-child { border-bottom: 0; }
  .sw-nav__list a { display: block; padding: 14px 0; font-size: 12px; border-bottom: 0; }

  /* Submenus are always expanded in the drawer — no second tap needed. */
  .sw-nav__list .sub-menu {
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-left: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .sw-nav__list .sub-menu a { padding: 10px 0; }
  .sw-nav__list .menu-item-has-children > a::after { display: none; }
  .sw-nav__list .menu-item-has-children::after { display: none; }
}

/* --------------------------------------------------------------------------
   2. Floating social rail
   -------------------------------------------------------------------------- */

.sw-rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--sw-navy-a85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px 0 0 8px;
}

.sw-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--sw-r-sm);
  color: rgba(255,255,255,0.75);
  transition: background var(--sw-t) var(--sw-ease), color var(--sw-t) var(--sw-ease);
}
.sw-rail a:hover { background: rgba(255,255,255,0.1); color: var(--sw-white); }
.sw-rail svg { width: 17px; height: 17px; }

@media (max-width: 860px) { .sw-rail { display: none; } }

/* --------------------------------------------------------------------------
   3. Footer
   -------------------------------------------------------------------------- */

.sw-footer { background: var(--sw-grad-bleed); color: rgba(255,255,255,0.75); }

.sw-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1.25fr 1fr 0.95fr;
  gap: 22px;
  max-width: var(--sw-w-body);
  margin: 0 auto;
  padding: 26px var(--sw-pad-x) 0;
}

.sw-footer__logo img { height: 15px; width: auto; filter: brightness(0) invert(1); }
.sw-footer__blurb {
  max-width: 280px;
  margin-top: 12px;
  font-size: var(--sw-body-sm);
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
}

.sw-footer h2 {
  margin-bottom: 10px;
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.sw-footer ul { margin: 0; padding: 0; list-style: none; }
.sw-footer li + li { margin-top: 4px; }
.sw-footer a { font-size: var(--sw-body-sm); color: rgba(255,255,255,0.75); }
.sw-footer a:hover { color: var(--sw-white); }

.sw-footer__cities {
  margin-top: 14px;
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
}

.sw-footer__bottom {
  max-width: var(--sw-w-body);
  margin: 18px auto 0;
  padding: 10px var(--sw-pad-x);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--sw-eyebrow);
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.45);
}

@media (max-width: 860px) {
  .sw-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   4. Pattern A — soft-blue page header
   -------------------------------------------------------------------------- */

.sw-pagehead { background: var(--sw-grad-header); }
.sw-pagehead__inner {
  max-width: var(--sw-w-header);
  margin: 0 auto;
  padding: 88px var(--sw-pad-x) 72px;
  text-align: center;
}
.sw-pagehead h1, .sw-pagehead h2 { margin-top: 14px; }
.sw-pagehead .sw-intro { text-align: left; }

/* Capabilities uses an uppercase, smaller, looser H2. */
.sw-pagehead--caps h1, .sw-pagehead--caps h2 {
  font-size: var(--sw-h2-caps);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   5. Pattern B — content card
   -------------------------------------------------------------------------- */

.sw-card {
  padding: 32px;
  background: var(--sw-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r);
  box-shadow: var(--sw-sh-1);
}
.sw-card--tint { background: var(--sw-card-tint); box-shadow: none; }
.sw-card--flush { padding: 0; overflow: hidden; }

.sw-card h3 { font-size: var(--sw-card-h3); margin-top: 10px; }
.sw-card .sw-body { margin-top: 12px; }

.sw-card--hover { transition: border-color var(--sw-t) var(--sw-ease), box-shadow var(--sw-t) var(--sw-ease); }
.sw-card--hover:hover { border-color: var(--sw-border-str); box-shadow: var(--sw-sh-2); }
/* Cards never translate on hover — border and shadow only. */

/* --------------------------------------------------------------------------
   6. Pattern C — navy band
   -------------------------------------------------------------------------- */

.sw-navyband {
  padding: 40px;
  background: var(--sw-grad-band);
  border-radius: var(--sw-r);
  text-align: center;
}
.sw-navyband h2, .sw-navyband h3 { color: var(--sw-white); }
.sw-navyband h3 { font-size: 26px; letter-spacing: -0.02em; }

.sw-navyband--bleed {
  padding: 0;
  border-radius: 0;
  background: var(--sw-grad-bleed);
}
.sw-navyband--bleed h2 { font-size: 40px; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   7. Patterns D & E — image tiles
   -------------------------------------------------------------------------- */

.sw-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--sw-r);
}
.sw-tile img { width: 100%; height: 100%; object-fit: cover; }
.sw-tile--square { aspect-ratio: 1 / 1; }

.sw-tile--light {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #E9EEF5, #DCE4EE);
  border: 0;
  border-radius: 0;
}
.sw-tile--wide { aspect-ratio: 16 / 8; }

.sw-grid { display: grid; gap: var(--sw-gap); }
.sw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sw-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--sw-gap-sm); }

@media (max-width: 1120px) and (min-width: 861px) {
  .sw-grid--3, .sw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sw-grid--2, .sw-grid--3 { grid-template-columns: 1fr; }
  .sw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 2000px) {
  .sw-grid--3 { grid-template-columns: repeat(4, 1fr); }
  .sw-grid--4 { grid-template-columns: repeat(5, 1fr); }
}

/* --------------------------------------------------------------------------
   8. FAQ
   -------------------------------------------------------------------------- */

.sw-faq { margin-top: 60px; }
.sw-faq__item {
  margin-bottom: 12px;
  padding: 20px 24px;
  background: var(--sw-card-tint);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r);
}
.sw-faq--white .sw-faq__item { background: var(--sw-white); }

.sw-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--sw-body);
  font-weight: 700;
  line-height: 1.5;
  color: var(--sw-navy);
  text-align: left;
  cursor: pointer;
}
.sw-faq__q::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 6px;
  border-right: 2px solid var(--sw-blue);
  border-bottom: 2px solid var(--sw-blue);
  transform: rotate(45deg);
  transition: transform var(--sw-t) var(--sw-ease);
}
.sw-faq__item.is-open .sw-faq__q::after { transform: rotate(-135deg); }

/* Answers stay in the DOM for SEO; height animates. */
.sw-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--sw-t) var(--sw-ease);
}
.sw-faq__item.is-open .sw-faq__a { max-height: 600px; }
.sw-faq__a > div {
  margin-top: 8px;
  font-size: var(--sw-body-card);
  line-height: 1.7;
  color: var(--sw-text);
}

/* No JS — every answer is visible and the chevron is hidden. */
.no-js .sw-faq__a { max-height: none; }
.no-js .sw-faq__q::after { display: none; }

/* --------------------------------------------------------------------------
   9. Filter pills (Projects)
   -------------------------------------------------------------------------- */

.sw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}
.sw-filter {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--sw-r-pill);
  font-family: inherit;
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background var(--sw-t) var(--sw-ease),
              color var(--sw-t) var(--sw-ease),
              border-color var(--sw-t) var(--sw-ease);
}
.sw-filter:hover { color: var(--sw-white); border-color: rgba(255,255,255,0.5); }
.sw-filter.is-active {
  background: var(--sw-white);
  border-color: var(--sw-white);
  color: var(--sw-navy);
}

/* --------------------------------------------------------------------------
   10. Forms (Contact)
   -------------------------------------------------------------------------- */

.sw-form {
  display: flex;
  flex-direction: column;
  gap: var(--sw-gap-md);
  padding: 32px;
  background: var(--sw-card-tint);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r);
}
.sw-field { display: flex; flex-direction: column; gap: 6px; }
.sw-field label {
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-muted);
}
.sw-field input, .sw-field textarea {
  height: 40px;
  padding: 0 12px;
  background: var(--sw-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r-sm);
  font-family: inherit;
  font-size: var(--sw-body-card);
  color: var(--sw-navy);
  transition: border-color var(--sw-t) var(--sw-ease), box-shadow var(--sw-t) var(--sw-ease);
}
.sw-field textarea { height: auto; padding: 12px; resize: vertical; line-height: 1.6; }
.sw-field input::placeholder, .sw-field textarea::placeholder { color: var(--sw-placeholder); }
.sw-field input:focus, .sw-field textarea:focus {
  outline: none;
  border-color: var(--sw-blue);
  box-shadow: var(--sw-focus);
}
@media (pointer: coarse) { .sw-field input { height: 44px; } }

.sw-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: var(--sw-white);
  border: 1px dashed var(--sw-border-str);
  border-radius: var(--sw-r-sm);
  font-size: var(--sw-body-sm);
  color: var(--sw-muted);
}
.sw-upload__chip {
  padding: 8px 14px;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r-sm);
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sw-blue);
  cursor: pointer;
  transition: background var(--sw-t) var(--sw-ease), border-color var(--sw-t) var(--sw-ease);
}
.sw-upload__chip:hover { background: var(--sw-card-tint); border-color: var(--sw-border-str); }

.sw-form__submit { align-self: flex-start; padding: 0 28px; }

.sw-infocard {
  padding: 22px 24px;
  background: var(--sw-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r);
  box-shadow: var(--sw-sh-1);
}
.sw-infocard__value {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sw-navy);
}

/* --------------------------------------------------------------------------
   11. Stats & certification badges
   -------------------------------------------------------------------------- */

.sw-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 72px;
}
.sw-stats__item { padding: 8px 24px; }
.sw-stats__item + .sw-stats__item { border-left: 1px solid var(--sw-navy-a15); }
.sw-stats__value {
  font-size: var(--sw-stat);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sw-navy);
  line-height: 1.05;
}
.sw-stats__label {
  margin-top: 14px;
  font-size: var(--sw-eyebrow);
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sw-text-band);
}

@media (max-width: 860px) {
  .sw-stats { grid-template-columns: 1fr; }
  .sw-stats__item { padding: 24px 0; }
  .sw-stats__item + .sw-stats__item {
    border-left: 0;
    border-top: 1px solid var(--sw-navy-a15);
  }
}

.sw-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 64px;
}
.sw-cert { width: 130px; text-align: center; }
.sw-cert__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto;
  padding: 10px;
  background: rgba(255,255,255,0.75);
  border: 2px solid var(--sw-blue);
  border-radius: var(--sw-r-pill);
  overflow: hidden;
}
.sw-cert__badge img { width: 100%; height: 100%; object-fit: contain; }
.sw-cert__label {
  margin-top: 10px;
  font-size: var(--sw-micro);
  font-weight: 700;
  line-height: 1.4;
  color: var(--sw-text-band);
}

/* --------------------------------------------------------------------------
   12. Stat tiles on navy (Sustainability)
   -------------------------------------------------------------------------- */

.sw-stattile {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sw-r);
}
.sw-stattile__value {
  font-size: var(--sw-stat-tile);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--sw-white);
}
.sw-stattile__label {
  margin-top: 8px;
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Recycled-in-2023 tiles carry the only green in the site. */
.sw-stattile--recycled { padding: 24px; border-color: rgba(255,255,255,0.12); }
.sw-stattile--recycled::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--sw-grad-green);
}
.sw-stattile--recycled .sw-stattile__value { font-size: 28px; }

/* --------------------------------------------------------------------------
   13. Contact Form 7
   The site's existing CF7 form (ID 129) is rendered through its shortcode, so
   these rules restyle CF7's own markup rather than replacing it. Field names
   and validation stay exactly as configured in the plugin.
   -------------------------------------------------------------------------- */

.sw-form .wpcf7-form { display: flex; flex-direction: column; gap: var(--sw-gap-md); }

.sw-form .wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-muted);
}

.sw-form .wpcf7-form input[type="text"],
.sw-form .wpcf7-form input[type="email"],
.sw-form .wpcf7-form input[type="tel"],
.sw-form .wpcf7-form input[type="url"],
.sw-form .wpcf7-form input[type="date"],
.sw-form .wpcf7-form select,
.sw-form .wpcf7-form textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--sw-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r-sm);
  font-family: inherit;
  font-size: var(--sw-body-card);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sw-navy);
  transition: border-color var(--sw-t) var(--sw-ease), box-shadow var(--sw-t) var(--sw-ease);
}
.sw-form .wpcf7-form textarea { height: auto; padding: 12px; line-height: 1.6; resize: vertical; }

.sw-form .wpcf7-form input::placeholder,
.sw-form .wpcf7-form textarea::placeholder { color: var(--sw-placeholder); }

.sw-form .wpcf7-form input:focus,
.sw-form .wpcf7-form select:focus,
.sw-form .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--sw-blue);
  box-shadow: var(--sw-focus);
}

@media (pointer: coarse) {
  .sw-form .wpcf7-form input[type="text"],
  .sw-form .wpcf7-form input[type="email"],
  .sw-form .wpcf7-form input[type="tel"] { height: 44px; }
}

/* File input — styled to match the dashed upload panel in the design. */
.sw-form .wpcf7-form input[type="file"] {
  width: 100%;
  padding: 18px;
  background: var(--sw-white);
  border: 1px dashed var(--sw-border-str);
  border-radius: var(--sw-r-sm);
  font-size: var(--sw-body-sm);
  color: var(--sw-muted);
  cursor: pointer;
}
.sw-form .wpcf7-form input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 14px;
  background: var(--sw-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r-sm);
  font-family: inherit;
  font-size: var(--sw-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-blue);
  cursor: pointer;
}

/* Submit */
.sw-form .wpcf7-form input[type="submit"],
.sw-form .wpcf7-form button[type="submit"] {
  align-self: flex-start;
  height: 44px;
  padding: 0 28px;
  background: var(--sw-navy);
  border: 0;
  border-radius: var(--sw-r-sm);
  box-shadow: var(--sw-sh-btn);
  font-family: inherit;
  font-size: var(--sw-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-white);
  cursor: pointer;
  transition: background var(--sw-t) var(--sw-ease);
}
.sw-form .wpcf7-form input[type="submit"]:hover,
.sw-form .wpcf7-form button[type="submit"]:hover { background: var(--sw-navy-hover); }

/* Two-column field rows where CF7 markup allows it. */
.sw-form .sw-cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sw-gap-md); }
@media (max-width: 860px) { .sw-form .sw-cf7-row { grid-template-columns: 1fr; } }

/* Validation and response messages. */
.sw-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: var(--sw-body-sm);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #B42318;
}
.sw-form .wpcf7-form input.wpcf7-not-valid,
.sw-form .wpcf7-form textarea.wpcf7-not-valid { border-color: #B42318; }

.sw-form .wpcf7-response-output {
  margin: 4px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r-sm);
  background: var(--sw-white);
  font-size: var(--sw-body-sm);
  color: var(--sw-text);
}
.sw-form .wpcf7-form.sent .wpcf7-response-output { border-color: #10B981; color: #065F46; }
.sw-form .wpcf7-form.invalid .wpcf7-response-output,
.sw-form .wpcf7-form.failed .wpcf7-response-output { border-color: #B42318; color: #B42318; }

.sw-form .wpcf7-spinner { margin-left: 12px; }

/* ── Footer facilities strip (Dubai / Doha / Riyadh) ─────────────────── */
.sw-facilities {
  max-width: var(--sw-w-body);
  margin: 0 auto;
  padding: 28px var(--sw-pad-x) 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sw-facility {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sw-facility__img {
  flex: 0 0 84px;
}
.sw-facility__img img {
  width: 84px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.sw-facility__city {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.sw-facility__addr {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: 0.72;
}
@media (max-width: 860px) {
  .sw-facilities { grid-template-columns: 1fr; padding-top: 36px; gap: 20px; }
}

/* ── Stat-tile icons (sustainability recycled figures) ───────────────── */
.sw-stattile__icon {
  margin-bottom: 12px;
  opacity: 0.9;
}
.sw-stattile__icon svg { display: inline-block; }

/* ── Sustainability — exact copy of the old page layout ──────────────── */
.sw-sus { padding: 76px 0; }
.sw-sus--navy { background: #03071F; color: #fff; }
.sw-sus--navy-alt { background: #0A1230; }
.sw-sus--white { background: #fff; }
.sw-sus--tint { background: #EDF1F9; }
.sw-sus__inner { text-align: center; }
.sw-sus__h {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
}
.sw-sus__h--dark { color: var(--sw-navy, #00072D); }
.sw-sus__intro {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: 17px;
  line-height: 1.85;
  opacity: 0.92;
}
.sw-sus__row { display: grid; gap: 56px; margin-top: 52px; }
.sw-sus__row--2 { grid-template-columns: repeat(2, 1fr); }
.sw-sus__card h3 { margin: 20px 0 0; font-size: 19px; color: #fff; }
.sw-sus__card p {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 15.5px;
  line-height: 1.75;
  opacity: 0.88;
}
.sw-sus__icon {
  width: 118px;
  height: 118px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}
.sw-sus__icon img { width: 70px; height: 70px; object-fit: contain; display: block; }
.sw-sus__prodgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 36px;
  margin-top: 52px;
}
.sw-sus__picon { height: 84px; display: flex; align-items: center; justify-content: center; }
.sw-sus__picon img { max-height: 84px; max-width: 110px; object-fit: contain; }
.sw-sus__prodcard h3 { margin: 16px 0 0; font-size: 16.5px; color: var(--sw-navy, #00072D); }
.sw-sus__prodcard p { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: #4A5265; }
.sw-sus__recgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 52px;
}
.sw-sus__rectile {
  border: 1.5px solid var(--sw-navy, #00072D);
  border-radius: 16px;
  background: #fff;
  padding: 34px 24px;
}
.sw-sus__ricon { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sw-sus__ricon img { max-height: 64px; max-width: 72px; object-fit: contain; }
.sw-sus__rectile .sw-stattile__value { color: var(--sw-navy, #00072D); font-size: 34px; font-weight: 800; }
.sw-sus__rlabel { margin-top: 6px; font-size: 14.5px; color: #4A5265; line-height: 1.5; }
@media (max-width: 960px) {
  .sw-sus__prodgrid { grid-template-columns: repeat(2, 1fr); }
  .sw-sus__recgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sw-sus__row--2, .sw-sus__prodgrid, .sw-sus__recgrid { grid-template-columns: 1fr; }
  .sw-sus { padding: 56px 0; }
}

/* Sustainability refinements: pattern backgrounds + icon treatments */
.sw-sus--navy-alt {
  background-color: #0A1230;
  background-image: linear-gradient(rgba(6, 12, 40, 0.82), rgba(6, 12, 40, 0.82)),
                    url("/static/img/Energy-Efficiency-Bg.jpg");
  background-size: cover;
  background-position: center;
}
.sw-sus--tint {
  background-color: #EDF1F9;
  background-image: url("/media/2023/10/white_3d_background2.jpg");
  background-size: cover;
  background-position: center;
}
.sw-sus__icon { border: 2px solid rgba(10, 30, 94, 0.55); box-shadow: none; }
.sw-sus__icon--bare {
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  height: 96px;
}
.sw-sus__icon--bare img { width: 88px; height: 88px; }

/* ── Service pages: image hero, overview split, CTA band ─────────────── */
.sw-pagehead--img {
  position: relative;
  overflow: hidden;
  padding: 132px 0 84px;
}
.sw-pagehead--img .sw-pagehead__bg,
.sw-pagehead--img .sw-pagehead__bg img,
.sw-pagehead--img .sw-pagehead__bg picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sw-pagehead--img .sw-pagehead__bg img { object-fit: cover; object-position: center; }
.sw-pagehead--img .sw-pagehead__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 7, 45, 0.78) 0%, rgba(0, 7, 45, 0.55) 55%, rgba(0, 7, 45, 0.82) 100%);
}
.sw-pagehead--img .sw-pagehead__inner { position: relative; z-index: 1; }
.sw-pagehead--img h1, .sw-pagehead--img h2 { color: #fff; }

.sw-svc {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 48px;
  align-items: start;
}
.sw-svc__body { min-width: 0; }
.sw-svc__aside {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 24px;
}
.sw-svc__img { margin: 0; }
.sw-svc__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 18px 44px rgba(0, 7, 45, 0.16);
}
.sw-svc__img:first-child img { aspect-ratio: 4 / 5; }
@media (max-width: 1000px) {
  .sw-svc { grid-template-columns: 1fr; }
  .sw-svc__aside { position: static; grid-template-columns: 1fr 1fr; }
  .sw-svc__img:first-child img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .sw-svc__aside { grid-template-columns: 1fr; }
}

.sw-svc__cta {
  margin-top: 64px;
  padding: 56px 32px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #00072D 0%, #0A1E5E 100%);
}
.sw-svc__cta h3 { color: #fff; font-size: 28px; margin: 0; }
.sw-svc__cta-actions {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Capabilities stats band + hero video fade-in */
.sw-navyband--flush { margin: 0; border-radius: 0; }
.sw-stats--band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--sw-w-body); margin: 0 auto; padding: 8px var(--sw-pad-x); text-align: center; }
.sw-stats--band .sw-stats__value { color: #fff; }
.sw-stats--band .sw-stats__label { color: rgba(255,255,255,0.65); }
.sw-hero__video video { opacity: 0; transition: opacity 0.8s ease; }
.sw-hero__video video.is-playing { opacity: 1; }

/* Footer: two-column link lists to cut height */
.sw-footer__grid ul { column-count: 2; column-gap: 18px; }
.sw-footer__grid > div:last-child ul { column-count: 1; }
.sw-footer__grid li { break-inside: avoid; }
.sw-footer a { font-size: 13px; }
.sw-footer__blurb { font-size: 13px; line-height: 1.55; }
.sw-facility__addr { line-height: 1.45; }

/* Footer polish: no mid-label breaks, aligned strip */
.sw-footer__grid a { white-space: nowrap; display: inline-block; }
.sw-facility__addr { max-width: 240px; }
@media (max-width: 860px) {
  .sw-footer__grid { grid-template-columns: 1fr 1fr; }
  .sw-footer__grid a { white-space: normal; }
}

/* ── Responsive refinements (mobile + large screens) ─────────────────── */
@media (max-width: 860px) {
  .sw-stats { margin-top: 44px; }
  .sw-stats__item { padding: 16px 0; }
  .sw-svc__cta { padding: 40px 20px; margin-top: 48px; }
  .sw-svc__cta h3 { font-size: 22px; }
  .sw-pagehead--img { padding: 100px 0 60px; }
  .sw-svc { gap: 28px; }
  .sw-sus__intro { font-size: 15.5px; }
}
@media (max-width: 640px) {
  /* the capabilities stats band overflowed — stack it like the home stats */
  .sw-stats--band {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px var(--sw-pad-x);
    text-align: center;
  }
  .sw-stats--band .sw-stats__item + .sw-stats__item {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
}
@media (min-width: 1600px) {
  .sw-svc__aside { gap: 28px; }
  .sw-facility__img { flex-basis: 104px; }
  .sw-facility__img img { width: 104px; height: 72px; }
}

/* ==========================================================================
   SignWorks 2026 — Page composition
   ========================================================================== */

/* --- Home: hero ----------------------------------------------------------- */

.sw-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 94vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--sw-navy);
}

.sw-hero__media { position: absolute; inset: 0; }
.sw-hero__poster, .sw-hero__video { position: absolute; inset: 0; }
.sw-hero__poster img,
.sw-hero__video iframe,
.sw-hero__video video {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
/* The video sits above the poster; if it fails to load the poster remains
   visible rather than leaving a black rectangle. */
.sw-hero__video { z-index: 1; }

.sw-hero__scrim { position: absolute; inset: 0; z-index: 2; background: var(--sw-hero-scrim); }
.sw-hero__body { position: relative; z-index: 3; width: 100%; padding-bottom: 72px; }
.sw-hero h1 { max-width: 720px; color: var(--sw-white); }
.sw-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* --- Home: about band ----------------------------------------------------- */

.sw-about { position: relative; overflow: hidden; background: var(--sw-grad-header); }
.sw-about__inner { position: relative; z-index: 1; padding-top: 96px; padding-bottom: 80px; text-align: center; }
.sw-about__copy { margin-top: 22px; text-align: left; }
.sw-about__copy p {
  font-size: var(--sw-body);
  line-height: 1.85;
  color: var(--sw-text-band);
}
.sw-about__copy p + p { margin-top: 16px; }

.sw-about__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.sw-about__blob--a {
  width: 520px; height: 520px;
  left: -140px; bottom: -120px;
  background: rgba(255,255,255,0.35);
}
.sw-about__blob--b {
  width: 460px; height: 460px;
  right: -160px; top: -140px;
  background: rgba(30,79,145,0.05);
}

/* --- Rich text from ACF WYSIWYG ------------------------------------------- */

.sw-richtext h1 { font-size: var(--sw-h2); line-height: 1.15; margin-bottom: 18px; }
.sw-richtext h2 { font-size: var(--sw-h3); margin: 32px 0 12px; }
.sw-richtext h3 { font-size: var(--sw-card-h3); margin: 26px 0 10px; }
.sw-richtext h4 { font-size: 16px; margin: 22px 0 8px; }
.sw-richtext p, .sw-richtext li {
  font-size: var(--sw-body-card);
  line-height: 1.75;
  color: var(--sw-text);
}
.sw-richtext p + p { margin-top: 12px; }
.sw-richtext ul, .sw-richtext ol { margin: 12px 0 0; padding-left: 22px; }
.sw-richtext li + li { margin-top: 6px; }
.sw-richtext strong { color: var(--sw-navy); font-weight: 700; }
.sw-richtext a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Service pages: split blocks ------------------------------------------ */

.sw-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.sw-split--flip .sw-split__media { order: 2; }
.sw-split__media {
  overflow: hidden;
  border-radius: var(--sw-r);
  border: 1px solid var(--sw-border);
}
.sw-split__media img { width: 100%; height: auto; }

@media (max-width: 860px) {
  .sw-split { grid-template-columns: 1fr; gap: 20px; }
  .sw-split--flip .sw-split__media { order: 0; }
}

/* --- Capabilities cards --------------------------------------------------- */

.sw-capcard__caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
}
.sw-capcard__num {
  font-size: var(--sw-eyebrow);
  font-weight: 800;
  color: var(--sw-blue-accent);
}
.sw-capcard__name {
  font-size: var(--sw-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sw-navy);
}

/* --- Projects ------------------------------------------------------------- */

.sw-projects .sw-tile[hidden] { display: none; }

/* --- Sustainability ------------------------------------------------------- */

.sw-solar {
  position: relative;
  overflow: hidden;
  padding: 40px;
  background: var(--sw-grad-solar);
  border-radius: var(--sw-r);
}
.sw-solar h3 { color: var(--sw-white); }
.sw-solar__blob {
  position: absolute;
  top: -160px; right: -100px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}
.sw-solar .sw-sustain__body,
.sw-solar .sw-sustain__body p { color: rgba(255,255,255,0.75); }
.sw-solar .sw-stattile .sw-sustain__body strong,
.sw-solar .sw-stattile .sw-sustain__body b {
  display: block;
  font-size: var(--sw-stat-tile);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--sw-white);
}

.sw-sustain__title { font-size: var(--sw-body-card); font-weight: 700; color: var(--sw-navy); }
.sw-sustain__body { font-size: var(--sw-body-sm); line-height: 1.7; color: var(--sw-text); }
.sw-sustain__title + .sw-sustain__body { margin-top: 8px; }

.sw-masonry { columns: 3; column-gap: var(--sw-gap); }
.sw-masonry__item {
  break-inside: avoid;
  margin-bottom: var(--sw-gap);
  padding: 22px;
}
@media (max-width: 1120px) { .sw-masonry { columns: 2; } }
@media (max-width: 860px)  { .sw-masonry { columns: 1; } }

/* --- Contact -------------------------------------------------------------- */

.sw-contact {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sw-gap-lg);
  align-items: start;
}
.sw-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sw-gap-md); }
.sw-contact__aside { display: flex; flex-direction: column; gap: var(--sw-gap); }

.sw-map {
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-r);
}
.sw-map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) {
  .sw-contact { grid-template-columns: 1fr; }
  .sw-form__row { grid-template-columns: 1fr; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .sw-nav, .sw-rail, .sw-footer, .sw-hero__video { display: none !important; }
  body { background: #fff; }
}

.sw-solar__copy { margin-top: 18px; max-width: 720px; }
.sw-solar__copy .sw-sustain__body,
.sw-solar__copy .sw-sustain__body p {
  font-size: var(--sw-body-card);
  line-height: 1.75;
  color: rgba(255,255,255,0.75);
}
.sw-solar__copy .sw-sustain__body + .sw-sustain__body { margin-top: 12px; }