/*!
Theme Name: LF Driscoll
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cps
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

CPS is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ==========================================================================
   LF Driscoll Website — Home
   Figma file key: 3bjn9Gm18pnaNjjk2wlPxN  ·  Pages / Final Design

   Loaded AFTER bootstrap.min.css so these rules win where they overlap.

   Contents
     1.  Design tokens
     2.  Base / reset overrides
     3.  Accessibility (focus ring)
     4.  Buttons
     5.  Icons
     6.  Navigation
     7.  Mega menu
     8.  Overlay menu (tablet / mobile)
     9.  Hero
     10. Footer
     11. Breakpoints: XL Wide / LG / MD / SM / XS
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS  (Handoff §3 Typography, §4 Color System)
   ========================================================================== */

:root {
  /* --- Primary colors --- */
  --lfd-red: #CF202F;
  /* primary brand color */
  --lfd-red-80: #D94D59;
  --lfd-red-70: #DE636E;
  --lfd-red-50: #E79097;
  --lfd-black: #000000;
  --lfd-black-80: #333333;
  --lfd-black-70: #4D4D4D;
  --lfd-slate: #758592;
  --lfd-slate-40: #C8CED3;
  --white: #FFFFFF;

  /* --- Secondary colors --- */
  --lfd-teal: #007D96;
  --lfd-teal-40: #99CBD5;
  /* from the Figma paint styles */
  --lfd-teal-60: #66B1C0;
  --lfd-teal-80: #3397AB;
  --lfd-turquoise: #00BAC6;
  --lfd-turquoise-60: #66D6DD;
  --lfd-blue: #00549C;
  --lfd-blue-40: #99BBD7;
  --lfd-blue-60: #6698C4;
  --lfd-blue-80: #3376B0;
  --lfd-purple: #652C90;
  --lfd-purple-40: #C1ABD3;
  --lfd-purple-60: #A380BC;
  --lfd-raspberry: #CA1E59;
  --lfd-raspberry-60: #DF789B;
  --lfd-raspberry-80: #D54B7A;

  --lfd-orange: #F68A1E;
  --lfd-orange-60: #FAB978;
  --lfd-orange-80: #F8A14B;

  --lfd-beige: #DDDBD7;
  --lfd-beige-80: #E4E2DF;
  --lfd-beige-60: #EBE9E7;
  /* from the Figma paint styles */
  --lfd-beige-40: #F1F1EF;
  /* from the Figma paint styles */
  --lfd-green: #c4d600;
  --lfd-green-80: #d0de33;
  --lfd-green-60: #dce666;
  --lfd-green-40: #e7ef99;

  /* --- Neutral colors --- */
  --neutral-light: #E5E5E5;
  --neutral-default: #D2D2D2;
  --neutral-focus: #C0C0C0;
  --neutral-strong: #5E5E5E;
  --neutral-mid: #B7B7B7;

  /* --- Semantic text --- */
  --text-primary: var(--lfd-black);
  --text-secondary: var(--lfd-black-70);
  --text-tertiary: var(--lfd-black-80);
  --text-link: var(--lfd-teal);
  --text-link-hover: var(--lfd-teal-80);

  /* --- Surfaces / overlays --- */
  --background-surface: var(--lfd-beige);
  --background-surface-light: rgb(from var(--lfd-beige-60) r g b / 0.8);
  --overlay-medium: rgba(255, 255, 255, 0.4);
  --overlay-heavy: rgba(255, 255, 255, 0.6);
  --white-70: rgba(255, 255, 255, 0.7);

  /* --- Typefaces --- */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  /* headings, UI, nav, buttons */
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
  /* body, captions, forms */

  /* --- Type scale (Handoff §3). Poppins unless noted. --- */
  --h1-size: 61px;
  --h1-line: 76px;
  --h1-track: 0;
  --h1-project-size: 48px;
  --h1-project-line: 56px;
  --h1-project-track: 0.1px;

  --h2-project-size: 43px;
  --h2-project-line: 50px;
  --h2-project-track: 0.1px;
  --h2-size: 39px;
  --h2-line: 56px;
  --h2-track: 0.1px;
  --h3-size: 31px;
  --h3-line: 48px;
  --h4-size: 25px;
  --h4-line: 40px;
  --h5-size: 20px;
  --h5-line: 32px;
  --h6-size: 16px;
  --h6-line: 24px;
  --eyebrow-size: 20px;
  --eyebrow-line: 32px;
  --lead-size: 20px;
  --lead-line: 32px;
  /* Deck / Standfirst / Lead */
  --statistic-size: 36px;
  --statistic-line: 40px;
  --tag-size: 20px;
  --tag-line: 16px;
  --nav-size: 13px;
  --nav-line: 24px;
  --nav-track: 0.26px;
  --byline-size: 10px;
  --byline-line: 16px;
  --legal-size: 8px;
  --legal-line: 16px;

  /* Roboto */
  --body-size: 16px;
  --body-line: 24px;
  --body-track: 0.06px;
  --body-lg-size: 18px;
  --body-lg-line: 28px;
  --body-lg-track: 0.06px;
  --body-sm-size: 14px;
  --body-sm-line: 24px;
  --body-sm-track: 0.06px;
  --blockquote-size: 20px;
  --blockquote-line: 32px;
  --blockquote-track: 0.25px;
  --caption-size: 13px;
  --caption-line: 24px;
  --inline-link-size: 14px;
  --inline-link-line: 150%;
  --form-info-size: 13px;
  --form-info-line: 16px;

  /* --- Spacing --- */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-s: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 124px;

  /* --- Radius --- */
  --radius-xxs: 4px;
  --radius-xs: 8px;
  --radius-s: 10px;
  --radius-reg: 12px;
  --radius-nav: 16px;
  --radius-lg: 40px;
  --radius-md: 24px;
  --radius-xl: 32px;
  --radius-xxl: 64px;
  --radius-pill: 9999px;

  /* --- Layout. Page margin per breakpoint (Handoff §7 Home). --- */
  --margin: 64px;
  --content-max: 1440px;
  --content-sectorband-max: 1090px;
  --footer-max: 1312px;
  --footer-pad: var(--margin);
  --footer-gap: var(--spacing-xs);
  --footer-col-left: 421px;
  --footer-col-right: 406px;

  /* --- Hero video box (Handoff §7 Homepage Video Dimensions) --- */
  --hero-video-w: 1400px;
  --hero-video-h: 788px;
  --hero-wash: rgba(255, 255, 255, 0.5);
  --hero-angle: 155.336deg;
}


/* ==========================================================================
   2. BASE
   Bootstrap Reboot handles the reset; these are project overrides.
   ========================================================================== */

body {
  background: var(--white);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-track);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.skip-link {
  position: absolute;
  left: var(--margin);
  top: -100px;
  z-index: 1080;
  padding: var(--spacing-s) var(--spacing-lg);
  background: var(--white);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--nav-size);
}

.skip-link:focus {
  top: var(--spacing-md);
}

.general-content h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-track);
  padding: var(--spacing-md) 0;
}

.general-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
  padding: var(--spacing-sm) 0;
}

.general-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
  padding: var(--spacing-sm) 0;
}

.general-content h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  letter-spacing: var(--h4-track);
  padding: var(--spacing-xs) 0;
}

.general-content h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
  letter-spacing: var(--h5-track);
  padding: var(--spacing-xs) 0;
}

.general-content h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  letter-spacing: var(--h6-track);
  padding: var(--spacing-xs) 0;
}

.general-content p {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
}

/* ==========================================================================
   3. ACCESSIBILITY — Focus Ring (Handoff §9, Atoms page)
   Applied to every interactive element.
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--lfd-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Bootstrap adds its own focus shadow on controls — replaced with the ring */
.btn:focus,
.btn:focus-visible,
.form-control:focus {
  box-shadow: none;
}


/* ==========================================================================
   4. BUTTONS  (Handoff §5, Buttons page)
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-s) var(--spacing-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--lfd-teal-40);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--nav-size);
  line-height: var(--nav-line);
  letter-spacing: var(--nav-track);
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button:hover {
  background: var(--lfd-teal-60);
}

.button:active {
  background: var(--lfd-teal-80);
}


.button--compact {
  padding: var(--spacing-xs) var(--spacing-md);
}

.button--icon {
  padding: var(--spacing-xs) var(--spacing-md);
  background: transparent;
  border: 0;
  position: relative;
}

.button--icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--lfd-teal);
  transform: scale(1);
  transition: transform 0.2s ease;
  pointer-events: none;
  border-radius: var(--radius-pill);
}

.button--icon:hover {
  background: transparent;
  color: var(--text-primary);
}

.button--icon:hover::after {
  border: 2px solid var(--lfd-teal-60);

}

.button--icon:active {
  background: transparent;
  color: var(--text-primary);
}

.button--icon:active::after {
  border: 4px solid var(--lfd-teal);
}

.button--outline {
  background: transparent;
  border: 0;
  position: relative;
}

.button--outline::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--lfd-teal);
  transform: scale(1);
  transition: transform 0.2s ease;
  pointer-events: none;
  border-radius: var(--radius-pill);
}

.button--outline:hover::after {
  border: 2px solid var(--lfd-teal-60);

}

.button--outline:hover {
  background: transparent;
  color: var(--text-primary);
}

.button--outline:active {
  background: transparent;
  color: var(--text-primary);
}

.button--outline:active::after {
  border: 4px solid var(--lfd-teal);
}


/* No hover fill in the Figma design for icon buttons (hamburger toggle,
   search) — .button:hover would otherwise cascade in background:
   var(--lfd-teal) and color: var(--white) since these buttons also carry
   the base .button class; both are explicitly cancelled here. */





/* ==========================================================================
   5. ICONS  (Handoff §8 — stroke icons, exported as SVG)
   Exported paths are held at their Figma insets inside a 24px box.
   ========================================================================== */

.icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.icon__path {
  position: absolute;
}

.icon__bleed {
  position: absolute;
}

.icon__bleed img {
  width: 100%;
  height: 100%;
}

/* Search icon is a single SVG (22x20) centred in the 24px box */
.icon--search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
}

.icon--search img {
  width: 22px;
  height: 20px;
}

.icon--menu .icon__path--top {
  inset: 20.83% 16.67% 79.17% 16.67%;
}

.icon--menu .icon__path--mid {
  inset: 50% 16.67% 50% 16.67%;
}

.icon--menu .icon__path--bot {
  inset: 79.17% 16.67% 20.83% 16.67%;
}

.icon--menu .icon__bleed {
  inset: -1px -6.25%;
}

.icon--close svg {
  width: 24px;
  height: 24px;
}

.site-nav__toggle .icon--close {
  display: none;
}

.site-nav__toggle[aria-expanded="true"] .icon--menu {
  display: none;
}

.site-nav__toggle[aria-expanded="true"] .icon--close {
  display: block;
}

.site-nav__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__search-form {
  right: 0;
  display: flex;
  align-items: center;
  width: 0;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--lfd-teal);
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

.mobile-menu__search> :last-child {
  margin-left: auto;
}

.site-nav__search-form[data-open="true"] {
  width: 260px;
  padding: var(--spacing-xs) var(--spacing-md);
  opacity: 1;
  pointer-events: auto;
}

.site-nav__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-display);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-primary);
}

.site-nav__search-input::placeholder {
  color: var(--text-secondary, var(--text-primary));
  opacity: 1;
}

.site-nav__search-form[data-open="true"]+.site-nav__search:after {
  border: 0px;
}

.mobile-search-submit {
  background: var(--lfd-teal);
  border-radius: var(--radius-xl);
  border: 1px solid var(--lfd-teal);
  color: var(--white);
  padding: 0 var(--spacing-md);
}

@media (max-width: 1322px) {
  .site-nav__search-form {
    position: absolute;
    right: 50px;
  }
}

/* ==========================================================================
   6. NAVIGATION  (Handoff §6, Organisms page)

   Block is .site-nav, NOT .nav — Bootstrap owns .nav and sets
   `display:flex; flex-wrap:wrap` on it, which would make .site-nav__inner a
   flex item that shrink-wraps instead of filling the bar. Bootstrap also
   owns .nav-link, .nav-item, and .navbar. Don't rename this back.
   ========================================================================== */

.site-nav {
  /* Fixed (not absolute) so the bar sticks on scroll while still overlaying
     the hero and hugging its content width. Below LG it becomes a
     full-width sticky bar in normal flow — see the LG block. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  max-height: 100vh;
  overflow-y: auto;
  /* long panels stay reachable */
  border-bottom-right-radius: var(--radius-lg);
  background: var(--overlay-heavy);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
  max-width: 1080px;
  transition: max-width 0.35s ease;
}

.site-nav:has(.site-nav__search-form[data-open="true"]) {
  max-width: 1335px;
  transition: max-width 0.35s ease;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--margin);
  background: var(--overlay-medium);
  border-bottom-right-radius: var(--radius-lg);
}

.site-nav__brand-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.site-nav__logo {
  width: 200px;
}

@media (max-width: 1322px) {
  .site-nav__logo {
    width: 160px;
  }
}

.site-nav__logo img {
  width: 100%;
  height: auto;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-xs);
}

/* Nav Link — states: default, hover, active (Handoff §6) */
.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxs) var(--spacing-md);
  border: 1px solid transparent;
  /* reserved so hover doesn't shift layout */
  border-bottom-right-radius: var(--radius-nav);
  font-family: var(--font-display);
  font-size: var(--nav-size);
  line-height: var(--nav-line);
  letter-spacing: var(--nav-track);
  text-transform: capitalize;
  white-space: nowrap;
  transition: border-color 180ms ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link[aria-expanded="true"],
.site-nav__link[aria-current="page"] {
  border-right-color: var(--lfd-teal);
  border-bottom-color: var(--lfd-teal);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.site-nav__toggle {
  display: none;
}


/* ==========================================================================
   7. MEGA MENU  (Navigation Dropdown + Nav Project Spotlight Item)
   ========================================================================== */

/* Work stretches the nav edge to edge; About and News hug to a 1265px max. */
.site-nav[data-menu-open="work"] {
  width: 100%;
  max-width: 1440px;
  transition: max-width 0.35s ease;
}

.site-nav[data-menu-open="about"],
.site-nav[data-menu-open="news"] {
  width: 100%;
  max-width: 1080px;
  transition: max-width 0.35s ease;
}

.site-nav[data-menu-open="about"]:has(.site-nav__search-form[data-open="true"]),
.site-nav[data-menu-open="news"]:has(.site-nav__search-form[data-open="true"]) {
  max-width: 1335px;
  transition: max-width 0.35s ease;
}

.megamenu {
  /* closed state: zero height, no vertical padding, invisible */
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding: 0 var(--margin);
  border-bottom-right-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  /* removes it from tab order + screen readers */
  pointer-events: none;
  transition:
    grid-template-rows 0.35s ease,
    padding 0.35s ease,
    opacity 0.25s ease,
    visibility 0s linear 0.35s;
  /* hide only AFTER the close animation ends */
}

.megamenu[data-open="true"] {
  grid-template-rows: 1fr;
  padding: var(--spacing-2xl) var(--margin) var(--spacing-3xl);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  /* show immediately when opening */
}

/* The single grid row needs to be allowed to shrink to 0 */
.megamenu>.megamenu__inner {
  min-height: 0;
  overflow: hidden;
}

.megamenu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 430px);
  gap: var(--spacing-2xl);
  max-width: var(--footer-max);
  margin: 0 auto;
}

.megamenu__rule {
  background: var(--text-primary);
  opacity: 0.25;
}

.megamenu__heading {
  margin: 0 0 var(--spacing-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
}

.megamenu__sectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  /* fills down each column, per the design */
  gap: var(--spacing-md) var(--spacing-2xl);
}

.megamenu__sector {
  display: block;
  padding: var(--spacing-s) var(--spacing-md);
  border-radius: var(--radius-reg);
  transition: background-color 160ms ease;
}

.megamenu__sector:hover,
.megamenu__sector:focus-visible {
  background: var(--lfd-teal-40);
}

.megamenu__sector-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

.megamenu__sector-copy {
  display: block;
  font-family: var(--font-display);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
}

.megamenu__sector-copy--lg {
  font-size: var(--h6-size);
  line-height: var(--h6-line);
}

/* About and News & Insights: plain two-column list, no headings or rule */
.megamenu--simple .megamenu__inner {
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: var(--spacing-2xl) 80px;
  justify-content: start;
  max-width: none;
  margin: 0;
}

/* Nav Project Spotlight Item */
.megamenu__projects {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.megamenu__project {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.megamenu__project-thumb {
  flex: 0 0 160px;
  width: 160px;
  height: 108px;
  background: var(--neutral-light);
  border-radius: 2px;
  object-fit: cover;
}

.megamenu__project-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.megamenu__project-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

.megamenu__project-copy {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  /* Prevents long words from breaking the layout */
  font-family: var(--font-display);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
}

.megamenu__project-link {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================================
   8. OVERLAY MENU — tablet / mobile hamburger (Handoff §6)
   Uses Bootstrap's Collapse plugin; .collapse is toggled by data attributes.
   ========================================================================== */

.mobile-menu {
  padding: var(--spacing-lg) var(--margin) var(--spacing-3xl);
}

/* From LG up the overlay never shows, even if Collapse left .show on it
   after a resize */
@media (min-width: 1024px) {
  .mobile-menu {
    display: none !important;
  }
}

.mobile-menu__search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  background: var(--white);
  border: 1px solid var(--lfd-teal);
  border-radius: var(--radius-pill);
}

.mobile-menu__search-input {
  flex: 0 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-display);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-primary);
}

.mobile-menu__search-input::placeholder {
  color: var(--text-primary);
  opacity: 1;
}

.mobile-menu__group {
  margin-bottom: var(--spacing-xl);
}

.mobile-menu__heading {
  position: relative;
  margin: 0 0 var(--spacing-md);
  padding-bottom: var(--spacing-s);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
}

/* Short teal rule sitting over the full-width hairline */
.mobile-menu__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 105px;
  height: 3px;
  background: var(--lfd-teal);
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.mobile-menu__links a {
  display: block;
  max-width: 508px;
  padding: var(--spacing-s);
  border-radius: var(--radius-reg);
  transition: background-color 160ms ease;
}

.mobile-menu__links a:hover,
.mobile-menu__links a:focus-visible {
  background: var(--lfd-teal-40);
}

.mobile-menu__link-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

/* Description renders only on hover/focus, per the design */
.mobile-menu__link-copy {
  display: none;
  font-family: var(--font-display);
  font-size: var(--body-size);
  line-height: var(--body-line);
}

.mobile-menu__links a:hover .mobile-menu__link-copy,
.mobile-menu__links a:focus-visible .mobile-menu__link-copy {
  display: block;
}


/* ==========================================================================
   9. HERO  (Handoff §7 Home)
   Default block = XL Desktop 1440.
   ========================================================================== */

.page-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--lfd-beige);
  background-image:
    linear-gradient(90deg, var(--hero-wash) 0%, var(--hero-wash) 100%),
    linear-gradient(var(--hero-angle), var(--lfd-teal) 11.564%, var(--lfd-beige) 54.462%);
}

/* Video box. At 1400px and below the box is centred so cropping is even. */
.hero__media {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--hero-video-w);
  height: var(--hero-video-h);
  overflow: hidden;
}

.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 540px;
  padding-top: var(--spacing-5xl);
  /* content starts 124px from top, below nav */
  padding-bottom: var(--spacing-4xl);
}

.layout {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: var(--content-max);
  min-height: 460px;
  padding: 0 var(--margin);
}

.layout__column {
  flex: 1 1 0;
  min-width: 0;
  max-width: 644px;
}

.layout__column--spacer {
  min-height: 460px;
}

.hero__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  padding: var(--spacing-xl);
  background: var(--white-70);
  border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
}

.hero__card-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.hero__title {
  margin: 0;
  max-width: 978px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-track);
  overflow-wrap: break-word;
}

.hero__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lead-size);
  line-height: var(--lead-line);
  overflow-wrap: break-word;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.button-group .button {
  width: 206.5px;
}


/* ==========================================================================
   10. FOOTER  (Templates & Pages page)
   ========================================================================== */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--footer-gap);
  padding: var(--spacing-3xl) var(--footer-pad) 20px;
  background: var(--background-surface);
  border-top: 3px solid var(--white);
}

.footer__main {
  display: grid;
  width: 100%;
  margin: 0 var(--margin);
  grid-template-columns: var(--footer-col-left) var(--footer-col-right);
  grid-template-areas:
    "logo  links"
    "news  links"
    "stobg eeo";
  justify-content: space-between;
  row-gap: var(--spacing-2xl);
  column-gap: var(--spacing-2xl);
}

.footer__logo {
  grid-area: logo;
  width: 295px;
  max-width: 100%;
}

.footer__logo img {
  width: 100%;
  height: auto;
}

.footer__links {
  grid-area: links;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer__links-column {
  display: flex;
  flex-direction: column;
  gap: var(--radius-reg);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  letter-spacing: var(--body-sm-track);
  color: var(--text-secondary);
  white-space: nowrap;
}

.footer__links-column a:hover {
  color: var(--lfd-teal);
  text-decoration: underline;
}

.newsletter {
  grid-area: news;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.newsletter__label {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  letter-spacing: var(--body-sm-track);
  color: var(--text-secondary);
  font-weight: 700;
  font-style: italic;
}

.newsletter__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.newsletter__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.newsletter__input {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-xs) var(--radius-reg);
  background: var(--lfd-beige-40);
  border: 0.5px solid var(--neutral-light);
  border-radius: var(--radius-reg);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-track);
  color: var(--text-primary);
}

.newsletter__input::placeholder {
  color: var(--text-primary);
  opacity: 0.3;
}

.newsletter__terms {
  font-size: var(--form-info-size);
  line-height: var(--form-info-line);
  color: var(--text-secondary);
}

.newsletter__terms a {
  text-decoration: underline;
}

.footer__stobg {
  grid-area: stobg;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-display);
  font-size: var(--byline-size);
  line-height: var(--byline-line);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.footer__stobg a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__eeo {
  grid-area: eeo;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  font-family: var(--font-display);
  font-size: var(--byline-size);
  line-height: var(--byline-line);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.footer__eeo a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}

.footer__divider {
  width: 100%;
  height: 3px;
  background: var(--neutral-light);
}

.footer__divider img {
  width: 100%;
  height: 3px;
}

.footer__bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.footer__legal {
  font-size: var(--form-info-size);
  line-height: var(--form-info-line);
  color: var(--text-secondary);
  white-space: nowrap;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  position: relative;
  top: -5px;
}

.footer__social a {
  display: block;
  width: 16px;
  height: 16px;
  transition: opacity 160ms ease;
}

.footer__social a:hover {
  opacity: 0.6;
}

.footer__social img {
  width: 16px;
  height: 16px;
}

.footer__terms {
  display: flex;
  align-items: center;
  gap: var(--radius-reg);
}

.footer__dot {
  width: 2px;
  height: 2px;
}

@media (max-width: 767px) {
  .footer__bottom-content {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   11. BREAKPOINTS  (Handoff §2)
       XS 320 · SM 480 · MD 768 · LG 1024 · XL 1440 · XL Wide 1920

   NOTE: these are the project's breakpoints, not Bootstrap's
   (576/768/992/1200/1400). Bootstrap's grid and responsive utility classes
   are therefore NOT used for layout — see the README note.
   ========================================================================== */

/* --------------------------------------------------------------------------
   XL WIDE — 1441px and up
   Video fixed at 1400px, right edge hugging the screen edge.
   Lighter wash and a steeper gradient angle.
   -------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  :root {
    --hero-wash: rgba(255, 255, 255, 0.2);
    --hero-angle: 160.997deg;
  }

  .hero__media {
    left: auto;
    right: 0;
    transform: none;
  }

  .section>.layout {
    width: var(--content-max);
  }
}

/* --------------------------------------------------------------------------
   LG LAPTOP — 1024px to 1439px
   Video 1024×728, full width, no offset. Single-column hero, 690px card.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  :root {
    --margin: 48px;
    --hero-video-w: 100%;
    --hero-video-h: 728px;
    --hero-angle: 149.685deg;
    --footer-col-left: 431px;
    --footer-col-right: 321px;
  }

  .site-nav {
    width: 100%;
    max-height: 100vh;
  }

  .hero__media {
    left: 0;
    right: auto;
    transform: none;
  }

  .layout__column {
    max-width: none;
  }

  .layout__column--spacer {
    display: none;
  }

  .hero__card {
    width: 690px;
    max-width: 100%;
  }

  .footer__logo {
    width: 324px;
  }

  .footer__links {
    gap: var(--spacing-lg);
    justify-content: space-between;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   MD TABLET — 768px to 1023px
   Video 768×768 (1:1), full width. Nav collapses to Contact + hamburger,
   both right-aligned. Card bleeds off the right edge, rounded on the left.
   Footer stacks and centres.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --margin: 32px;
    --hero-video-h: auto;
    --hero-angle: 139.841deg;
    --h1-size: 34px;
    --h1-line: 40px;
    --lead-size: 18px;
    --lead-line: 28px;
    --nav-size: 14px;
    --form-info-size: 14px;
    --form-info-line: 20px;
    --byline-size: 12px;
    --byline-line: 20px;
    --footer-gap: var(--spacing-md);
  }

  .site-nav__links {
    display: none;
  }

  .megamenu {
    display: none !important;
  }

  .site-nav[data-menu-open] {
    width: auto;
    max-width: none;
  }

  .site-nav__search {
    display: none;
  }

  .site-nav__toggle {
    display: inline-flex;
  }

  .page-body {
    padding: var(--spacing-5xl) 0;
  }

  .hero__media {
    left: 0;
    right: auto;
    transform: none;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .layout {
    padding: 0 var(--spacing-xl);
  }

  .layout__column {
    padding-left: 124px;
  }

  .hero__card {
    width: calc(100% + var(--spacing-xl));
    padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }

  /* Footer: single centred column — logo, links, signup, legal */
  .footer__main {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "links" "news" "stobg" "eeo";
    justify-items: center;
    row-gap: var(--spacing-xl);
  }

  .footer__logo {
    width: 312px;
  }

  .footer__links {
    width: 100%;
    justify-content: space-between;
    gap: var(--spacing-lg);
  }

  .footer__links-column:last-child {
    align-items: flex-end;
    text-align: right;
  }

  .newsletter {
    width: 100%;
    max-width: 462px;
    align-items: center;
  }

  .newsletter__label {
    text-align: center;
    width: 100%;
  }

  .newsletter__field {
    width: 100%;
  }

  .newsletter__row .button {
    flex: 1 1 0;
  }

  .newsletter__terms {
    text-align: center;
  }

  .footer__stobg {
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .footer__eeo {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   SM MOBILE — 480px to 767px
   Video 480×480 (1:1), full width, stacked above the text.
   Gradient reverses (beige into teal). Card is solid beige and bleeds off
   the LEFT edge, rounded on the right.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --margin: 24px;
    --hero-angle: 119.395deg;
  }

  /* Nav collapses to logo + Contact + hamburger at this width — shrink
     the logo so it doesn't push Contact Us / the toggle off the right
     edge. */
  .site-nav__logo {
    width: 130px;
  }

  .page-body {
    gap: var(--spacing-md);
    padding: 0;
    background-image:
      linear-gradient(90deg, var(--hero-wash) 0%, var(--hero-wash) 100%),
      linear-gradient(var(--hero-angle), var(--lfd-beige) 11.564%, var(--lfd-teal) 54.462%);
  }

  /* Stacked: the video sits in normal flow above the card */
  .hero__media {
    position: relative;
    top: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .section {
    min-height: 540px;
  }

  .layout {
    padding: 0 var(--spacing-lg);
  }

  .layout__column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 0;
    padding-right: var(--spacing-lg);
  }

  .hero__card {
    width: calc(100% + var(--spacing-lg) + var(--spacing-lg));
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--margin);
    background: var(--lfd-beige);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  }

  .button-group .button {
    width: 206.5px;
    max-width: 100%;
  }

  .footer__main {
    row-gap: var(--spacing-lg);
  }

  .footer__links-column {
    white-space: normal;
  }

  .newsletter {
    align-items: stretch;
  }

  .newsletter__row {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter__row .button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   XS — below 480px
   No dedicated Home frames were supplied; the SM rules continue fluidly
   with a tighter margin.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  :root {
    --margin: 16px;
    --h1-size: 30px;
    --h1-line: 38px;
  }

  .button-group .button {
    width: 100%;
  }
}


/* ==========================================================================
   12. SURFACES & SECTIONS  (Templates: Section, Layout)
   ========================================================================== */

.surface {
  position: relative;
  background: var(--white);
}

.surface--beige {
  background: var(--lfd-beige-40);
}

.surface--beige--60 {
  background: var(--lfd-beige-60);
}

/* The white/beige boundary is a large soft corner, per the Section component */
.surface--round-tr {
  border-top-right-radius: var(--radius-xxl);
}

.surface--round-bl {
  border-bottom-left-radius: var(--radius-xxl);
}

.section-block {
  padding: var(--spacing-4xl) 0;
  padding-bottom: var(--spacing-2xl);
}

.section-block--tight {
  padding: var(--spacing-xl) 0;
}

.heading_decorated .section-block--tight {
  padding: var(--spacing-xl) 0;
  padding-bottom: 0;
}

.leftcontent-rightimage-wd .section-block {
  padding: var(--spacing-xl) 0;
}

.leftcontent-rightimage-wd .split .split__text {
  align-self: center;
}

.leftcontent-rightimage-wd .split .split__text .prose {
  max-width: 95%;
}
@media screen and (max-width: 991px) {
  /* Use the body class to ensure the highest priority */
  body.page-id-8112 .split.section-block--tight {
    display: block !important;
  }
  
  body.page-id-8112 .split.section-block--tight > .split__text.prose:nth-of-type(2) {
    display: none !important;
  }
}
/* Service groups sit close together under one heading, so they use a
   tighter rhythm than a standalone page section. */
.section-block--service {
  padding: var(--spacing-xl) 0;
}

.section-block--service .split__text {
  margin: 0px !important;
}

.section-block--service .split__text {
  padding: var(--spacing-xl) 0px;
}

.coe-container {
  background: linear-gradient(0deg, transparent 0%, var(--lfd-blue-40) 100%);
}

.container-lfd {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* Two-column content row: text one side, media the other */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-2xl);
  align-items: stretch;
  /* media can then match the text column's height */
}

.split__text {
  align-self: start;
}

/* Markup order is always text-then-media (correct reading order). This pulls
   the media into the first column where the design puts the image on the
   left, without reordering the DOM. */
.split--media-first>.split__media {
  order: -1;
}

.split--media-first>.split__text {
  margin: var(--spacing-3xl) 0;
}

.split__text {
  max-width: 644px;
}

/* ==========================================================================
   13. PAGE HERO  (Organisms: Page Title Section — with breadcrumbs)
   ========================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: var(--spacing-5xl) 0 var(--spacing-4xl);
  border-bottom-left-radius: var(--radius-xl);
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim so white type stays legible over photography (Atoms: Scrim) */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.50) 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero__title {
  margin: var(--spacing-md) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  color: var(--white);
}

/* Breadcrumbs (Atoms) */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  font-family: var(--font-display);
  font-size: var(--nav-size);
  line-height: var(--nav-line);
  letter-spacing: var(--nav-track);
  color: var(--white);
}

.single-projects .breadcrumbs.bread-desktop {
  position: absolute;
  top: 16px;
  max-width: 40%;
}

.bread-mobile {
  display: none;
}

.bread-desktop {
  display: block;
}

.bread-desktop+div {
  top: 30px;
  position: relative;
}

@media (max-width: 1024px) {
  .bread-mobile {
    display: block;
  }

  .bread-desktop {
    display: none;
  }
}

.breadcrumbs a {
  opacity: 0.8;
}

.breadcrumbs a:hover {
  opacity: 1;
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  font-weight: 700;
}

.breadcrumbs__divider {
  opacity: 0.6;
}

/* ==========================================================================
   14. DECORATED HEADING  (Organisms)
   Eyebrow + heading + split rule: short teal segment over a long hairline.
   ========================================================================== */

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  color: var(--lfd-black);
}

.heading-decorated {
  margin: 0 0 var(--spacing-2xl);
  margin-bottom: 0px;
}

.heading-decorated.heading-decorated--inline {
  margin: 0 0 var(--spacing-xl);
}

.heading-decorated__title {
  margin: var(--spacing-xs) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
  color: var(--lfd-red);
}

.heading-decorated__rule {
  position: relative;
  margin-top: var(--spacing-md);
  max-width: 464px;
  height: 1px;
  background: var(--neutral-default);
}

.heading-decorated__rule.setRuleWidth {
  margin-top: 0px;
  max-width: none;
}

.heading-decorated__rule.setRuleWidth.setWhite {
  background: var(--white);
}

.heading-decorated__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 80px;
  height: 3px;
  background: var(--lfd-teal);
  z-index: 5;
}

.section-title {
  margin: 0 0 var(--spacing-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

.section-intro {
  margin-bottom: var(--spacing-lg);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-track);
}

.prose>p {
  margin-bottom: var(--spacing-lg);
}

.prose>p:last-child {
  margin-bottom: 0;
}

.prose a {
  text-decoration: none;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--lfd-blue);
  text-decoration: none;
}

.prose a.button:hover {
  color: var(--white);
  text-decoration: none;
}

/* ==========================================================================
   15. DECORATED IMAGE  (Molecules)
   Background SVG carries the whole decoration — beige panel, dot grid,
   teal square and tint block — at 672x650. The photo (556x520, corners
   already rounded in the asset) overlays it at 94px from the left, top
   aligned; measured off the Figma frame, so don't nudge without re-checking.
   ========================================================================== */

.decorated-image {
  position: relative;
  width: 100%;
  max-width: 672px;
  aspect-ratio: 672 / 650;
  background: url("img/about-legacy-bg.svg") no-repeat 0 0 / 100% 100%;
}

.decorated-image__photo {
  position: absolute;
  top: 0;
  left: 13.99%;
  /* 94 / 672 */
  width: 82.74%;
  /* 556 / 672 */
}

.decorated-image__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 30px 0 30px 30px;
}

/* ==========================================================================
   16. SCREEN EDGE IMAGE BLOCK  (Atoms)
   Photo that bleeds off one side of the viewport.
   ========================================================================== */

/* Height is driven by the adjacent text column, never taller. The photo
   fills that box and crops horizontally as the column narrows — anchored so
   the crop happens on the side that bleeds off screen. */
.edge-image {
  position: relative;
  height: 100%;
}

.edge-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edge-image--right {
  margin-right: calc(var(--margin) * -1);
}

.edge-image--left {
  margin-left: calc(var(--margin) * -1);
}

/* Bleeds right → hold the left edge, crop off the right */
.edge-image--right img {
  object-position: left center;
}

/* Bleeds left → hold the right edge, crop off the left */
.edge-image--left img {
  object-position: right center;
}

/* Rounded only on the side that meets the content — the opposite side
   bleeds off the viewport, so it stays square. */
.edge-image--right img {
  border-radius: var(--radius-nav) 0 0 var(--radius-nav);
}

.edge-image--left img {
  border-radius: 0 var(--radius-nav) var(--radius-nav) 0;
}

/* ==========================================================================
   17. INFO ACCORDION  (Molecules)
   ========================================================================== */

.info-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.info-item {
  background: var(--white);
  border-radius: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-lg);
}

.info-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.info-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
}

.info-item__toggle {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--lfd-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.info-item__toggle:hover {
  color: var(--text-primary);
}

/* Label swaps with state — no JS needed for the text itself */
.info-item__toggle::after {
  content: "More Info";
}

.info-item__toggle[aria-expanded="true"]::after {
  content: "Less Info";
}

.info-item__body {
  padding-top: var(--spacing-xs);
  max-width: 480px;
  font-family: var(--font-body);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  letter-spacing: var(--body-sm-track);
  color: var(--text-secondary);
}

/* ==========================================================================
   18. MEDIA BLOCK  (video / image panel)
   Sized to the video placeholder asset (632x483). The asset carries its own
   32px corners, so no background or radius here — either would show through
   its transparent corners. A real <video> should be the same ratio, or add
   a radius back alongside it.
   ========================================================================== */

.media-block {
  width: 100%;
  aspect-ratio: 632 / 483;
  overflow: hidden;
}

.media-block img,
.media-block video,
.media-block iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.media-block figure {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: var(--bs-border-radius-xxl);
  overflow: hidden;
}

.media-block .wp-block-embed__wrapper {
  width: 100%;
  height: 100%;
}

.media-block iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   19. CTA BANNER  (Templates: Section — Lean Delivery promo)
   ========================================================================== */

.cta-band {
  position: relative;
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(90deg, var(--lfd-blue-60) 0%, var(--lfd-teal-80) 100%);
}

.cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--lfd-beige-40);
  border-radius: 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}

.cta-card__body {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2xl);
}

.cta-card__title {
  margin: var(--spacing-md) 0 var(--spacing-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

.cta-card__copy {
  margin-bottom: auto;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
}

.cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-2xl);
}

.cta-card__media {
  min-height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-height: 500px;
}

.cta-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   20. ABOUT PAGE — RESPONSIVE
   Every two-column row collapses to one column from MD down; the About
   frames stack text above media at every narrow breakpoint.
   ========================================================================== */

@media (max-width: 1439px) {
  .page-hero {
    min-height: 360px;
    border-bottom-left-radius: var(--radius-3xl);
  }

  .cta-card {
    border-radius: 0 var(--radius-md) var(--radius-md);
  }

  .cta-card__media {
    border-radius: var(--radius-md);
  }

  .media-block figure {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 1023px) {
  :root {
    --h2-size: 31px;
    --h2-line: 44px;
    --h3-size: 25px;
    --h3-line: 36px;
  }

  .page-hero {
    min-height: 280px;
    padding: var(--spacing-4xl) 0 var(--spacing-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  /* Stacked: text always above media, matching the narrow About frames */
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xl);
  }

  .split--media-first>.split__media {
    order: 0;
  }

  .split__text {
    max-width: none;
  }

  /* Stacked: no adjacent column to take height from, so set one */
  .edge-image {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .edge-image--right {
    margin-right: calc(var(--margin) * -1);
  }

  .edge-image--left {
    margin-left: calc(var(--margin) * -1);
  }

  .cta-card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 0 var(--radius-nav) var(--radius-nav);
  }

  .cta-card__media {
    order: 2;
    min-height: 260px;
    border-radius: var(--radius-nav);
  }

  .media-block figure {
    border-radius: var(--radius-nav);
  }

  /* Decorated image scales with its aspect-ratio box — no overrides needed */

  .section-block {
    padding: var(--spacing-4xl) 0;
  }
}

@media (max-width: 767px) {
  :root {
    --h2-size: 28px;
    --h2-line: 38px;
    --h3-size: 22px;
    --h3-line: 32px;
  }

  .page-hero__title {
    font-size: 34px;
    line-height: 40px;
  }

  .info-item {
    padding: var(--spacing-s) var(--spacing-md);
  }

  .info-item__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xxs);
  }

  .cta-card__body {
    padding: var(--spacing-lg);
  }

  .cta-card__actions {
    padding-top: var(--spacing-lg);
  }
}

/* ==========================================================================
   21. PROJECTS ARCHIVE
   ========================================================================== */

/* The card grid sits in a narrower container than the standard 64px page
   margin — measured at 1090px content width (2 x 533 + 24 gap) on the
   1440 frame, i.e. inset 175px each side. The filter bar above it keeps
   the standard margin. max-width includes the padding so the *content*
   is 1090, not the box. */
.container-projects {
  width: 100%;
  max-width: calc(1090px + (var(--margin) * 2));
  margin: 0 auto;
  padding: 0 var(--margin);
}

.filter-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-2xl);
}

.filter-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
  padding: var(--spacing-s) var(--spacing-lg);
  background: var(--lfd-teal-40);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
  border: 0px;
}

.filter-button:hover {
  background: var(--lfd-teal-60);
}

.filter-button svg {
  flex: 0 0 auto;
}

button.filter-button.sort-button {
  background: transparent;
  border: 2px solid var(--lfd-teal);
}

button.filter-button.sort-button:hover {
  background: var(--lfd-teal-60);
}

/* --- Project grid --- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4xl) var(--spacing-lg);
  padding: var(--spacing-2xl) 0 var(--spacing-2xl);
}

/* --- Project Card (Organisms) --- */
.project-card {
  display: block;
}

.project-card__media {
  position: relative;
  aspect-ratio: 533 / 244;
  border-radius: var(--radius-nav) var(--radius-nav) var(--radius-nav) 0px;
  overflow: hidden;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.project-card:hover .project-card__media img {
  transform: scale(1.03);
}

.project-card__title {
  margin: var(--spacing-lg) 0 var(--spacing-xxs);
  font-family: var(--font-display);
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

.project-card:hover .project-card__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-card__location {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-track);
  color: var(--text-secondary);
}

nav.sectors-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-2xl);
}

/* --- Sector Tag (Molecules) ---
   Border colour is set per sector via --tag-color on the element. */

.sector-tag-container {
  position: absolute;
  top: calc(var(--spacing-md) + 3px);
  left: var(--spacing-md);
}

.pdp-hero__grid .sector-tag-container {
  position: relative;
  top: 0px;
  left: 0px;
}

.sector-tag {
  padding: var(--spacing-xxs) var(--spacing-s);
  background: var(--lfd-red);
  border: 0;
  border-radius: var(--spacing-xs);
  font-family: var(--font-display);
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  color: var(--white);
  white-space: nowrap;
}

.search-results .sector-tag {
  margin-left: 10px;
}

.sector-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sector-grid .project-card__media {
  aspect-ratio: 400 / 300;
}

@media (max-width: 1023px) {
  .project-grid {
    gap: var(--spacing-2xl) var(--spacing-lg);
  }
}

@media (max-width: 767px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-2xl);
    padding-bottom: var(--spacing-4xl);
  }

  .project-card__media {
    aspect-ratio: 4 / 3;
  }

  .filter-bar {
    padding-top: var(--spacing-lg);
  }
}

/* ==========================================================================
   22. PAGE HERO — CARD VARIANT  (Lean Focused Delivery)
   Extends .page-hero. Instead of white type sitting directly on the photo,
   a beige card bleeds off the left edge and carries dark type. Everything
   not overridden here is inherited from section 13.
   ========================================================================== */

.page-hero--card {
  align-items: flex-end;
  min-height: 500px;
  padding: 0;
  border-bottom-right-radius: 0;
  /* the surface below carries the curve */
}

/* No scrim — type sits on the card, not the photo */
.page-hero--card .page-hero__media::after {
  content: none;
}

/* Card bleeds to the viewport edge, so the inner wrapper drops its gutters */
.page-hero--card .page-hero__inner {
  width: 100%;
  max-width: none;
  padding: 0;
}

.page-hero__card {
  width: min(820px, 80%);
  padding: var(--spacing-4xl) var(--margin);
  background: var(--background-surface-light);
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding-top: var(--spacing-2xl);
}

.page-hero__card .eyebrow {
  margin-top: var(--spacing-lg);
}

.page-hero__card .page-hero__title {
  margin-top: var(--spacing-lg);
}

.page-hero__card .page-hero__insights_title {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  margin-top: 0px;
}

/* Square tucked behind the card's bottom-left, so the rounded corner reads
   as an inset curve against the surface below rather than a rounded card
   edge. Sits inside .page-hero__inner's stacking context, so z-index -1
   keeps it behind the card but still above the hero photo. */
.hero-divider {
  position: relative;
  z-index: -1;
  width: 30px;
  height: 30px;
  top: -30px;
  margin-bottom: -30px;
  border-radius: 0;
  background: var(--lfd-beige-40);
}

/* Dark-on-light variants of the hero type */
.breadcrumbs--dark {
  color: var(--text-primary);
}

.breadcrumbs--dark a {
  color: var(--text-secondary);
  opacity: 1;
}

.breadcrumbs--dark a:hover {
  color: var(--lfd-teal);
}

.breadcrumbs--dark .breadcrumbs__divider {
  opacity: 1;
  color: var(--neutral-strong);
}

.page-hero__title--dark {
  color: var(--text-primary);
}

@media (max-width: 1439px) {
  .hero-divider {
    display: none;
  }
}

@media (max-width: 1023px) {
  .page-hero--card {
    min-height: 380px;
  }

  .page-hero__card {
    width: min(820px, 88%);
    padding: var(--spacing-2xl) var(--margin);
  }
}

@media (max-width: 767px) {
  .page-hero--card {
    min-height: 320px;
  }

  .page-hero__card {
    width: 92%;
  }
}

/* ==========================================================================
   23. DECORATED HEADING — VARIANTS  (Lean Focused Delivery)
   ========================================================================== */

/* Teal segment fading into a pale continuation */
.heading-decorated--tealrule .heading-decorated__rule {
  max-width: 530px;
  background: var(--lfd-teal-40);
}

.heading-decorated--tealrule .heading-decorated__rule::before {
  width: 140px;
  height: 3px;
  background: var(--lfd-teal);
}

/* Grey block to the left of the title, gradient rule beneath */
.heading-decorated--barred {
  display: flex;
  gap: var(--spacing-lg);
}

.heading-decorated--barred .heading-decorated__bar {
  flex: 0 0 auto;
  width: 24px;
  align-self: stretch;
  background: var(--neutral-light);
}

.heading-decorated--barred .heading-decorated__rule {
  max-width: none;
  height: 1px;
  background: linear-gradient(90deg, var(--lfd-purple) 0%, var(--lfd-blue) 100%);
}

.heading-decorated--barred .heading-decorated__rule::before {
  content: none;
}

/* Title with a short rule set inline to its right */
.heading-decorated--inline .heading-decorated__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.heading-decorated--inline .heading-decorated__title::after {
  content: "";
  flex: 0 0 100px;
  height: 2px;
  background: var(--lfd-teal);
}

.heading-decorated--inline .heading-decorated__title:has(.setRuleWidth)::after {
  display: none;
}

.heading-decorated--inline .heading-decorated__title> :last-child {
  flex: 1;
}

.section-block--tight .heading-decorated.heading-decorated--inline {
  margin: 0 0 var(--spacing-xs);
}

/* ==========================================================================
   24. RELATED PROJECTS CAROUSEL  (Templates: Related Projects)
   Scrolls horizontally and bleeds off the right edge.
   ========================================================================== */

.related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.related__intro {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
}

.related__track {
  display: flex;
  gap: var(--spacing-lg);
  margin-right: calc(var(--margin) * -1);
  padding-bottom: var(--spacing-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-right: calc((100vw - var(--content-max) / 2) * -1);
}

.related__track::-webkit-scrollbar {
  display: none;
}

.related__item {
  flex: 0 0 auto;
  width: 400px;
  max-width: 78vw;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.related-projects-meta {
  background: #ffffff99;
  position: absolute;
  bottom: -50px;
  width: 100%;
  border-radius: 0px 0px var(--radius-xl) var(--radius-nav);
  padding: var(--spacing-s);
  opacity: 0;
  transition: all .3s linear;
}

.related__item:hover .related-projects-meta {
  bottom: 0;
  opacity: 1;
  transition: all .3s linear;
}

.related__item>img {
  width: 100%;
  aspect-ratio: 445 / 425;
  object-fit: cover;
  border-radius: 0px var(--radius-xl) var(--radius-xl) var(--radius-nav);
}

@media (max-width: 1440px) {
  .related__track {
    margin-right: calc(var(--margin) * -1);
  }
}

@media (max-width: 767px) {
  .related__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .related__item {
    width: 300px;
  }
}

/* ==========================================================================
   25. CAREERS
   ========================================================================== */

/* Right-aligned prose column (A People-First Builder) */
.split__text--end {
  text-align: right;
  margin-left: auto;
}

/* --- Feature band: gradient strip with an inset beige card --- */
.feature-band {
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(90deg, var(--lfd-blue-60) 0%, var(--lfd-teal-80) 100%);
}

.feature-band__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-2xl);
  align-items: center;
  padding: var(--spacing-2xl);
  background: var(--lfd-beige-60);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.feature-band__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.feature-band-card__body .prose {
  padding-top: var(--spacing-xl);
}

.feature-band-card__media {
  height: 100%;
}

/* Bulleted list inside editorial prose */
.prose ul {
  margin: 0 0 var(--spacing-lg);
  padding-left: var(--spacing-lg);
}

.prose li {
  margin-bottom: var(--spacing-xxs);
}

.left_content_right_image_with_eyebrow .prose {
  padding-top: var(--spacing-xl);
}

.left_content_right_image_with_eyebrow .split__text {
  align-self: center;
}

.left_content_right_image_with_eyebrow .split__media img {
  width: 100%;
}

/* --- Photo collage (Connecting People Beyond The Jobsite) ---
   Three columns, middle column offset down, matching the frame. */
.collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  align-items: start;
}

.collage__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.collage__col--offset {
  margin-top: var(--spacing-4xl);
}

.collage img {
  width: 100%;
  aspect-ratio: 300 / 230;
  object-fit: cover;
  border-radius: var(--radius-reg);
}


/* --- Benefits band --- */
.benefits-band {
  padding: var(--spacing-2xl) 0;
  background: var(--lfd-teal-40);
}

.benefits-band .prose {
  padding-top: var(--spacing-xl);
}

.benefits-band .info-item__body {
  max-width: unset;
}

.benefits-band .heading-decorated__rule {
  background: var(--lfd-blue);
  max-width: 645px;
}

.benefits-band .heading-decorated__rule::before {
  background: var(--white);
  width: 100px;
}

.benefits__label {
  margin: var(--spacing-md) 0 var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  text-align: right;
}

.benefits__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
}

.benefits__row-title {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

/* White stub fading into the long blue rule */
.benefits__row-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,
      var(--white) 0, var(--white) 100px, var(--lfd-blue) 100px, var(--lfd-blue) 100%);
}

.benefits__row .button {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--lfd-blue);
  color: var(--lfd-blue);
}

.benefits__row .button:hover {
  background: var(--lfd-blue);
  color: var(--white);
}

.benefits__disclaimer {
  margin-top: var(--spacing-2xl);
  text-align: center;
  font-size: var(--form-info-size);
  line-height: var(--form-info-line);
  color: var(--text-secondary);
}

.benefits__row .button.benefits__toggle::after {
  content: "More Info";
}

.benefits__row .button.benefits__toggle[aria-expanded="true"]::after {
  content: "Less Info";
}

@media (max-width: 1023px) {
  .feature-band__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__text--end {
    text-align: left;
  }

  .benefits__label {
    text-align: left;
    margin-top: var(--spacing-2xl);
  }
}

@media (max-width: 767px) {
  .collage {
    gap: var(--spacing-xs);
  }

  .collage__col--offset {
    margin-top: var(--spacing-lg);
  }

  .benefits-band {
    padding: var(--spacing-4xl) 0;
  }

  .benefits__row {
    flex-wrap: wrap;
    gap: var(--spacing-s);
  }

  .benefits__row-rule {
    display: none;
  }

  .benefits__row .button {
    margin-left: auto;
  }
}

.benefits-band .info-item__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

.accordionChildCards {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--lfd-beige-40);
  padding: var(--spacing-lg);
  border-radius: 0px var(--radius-nav) var(--radius-nav) var(--radius-nav);
}

.accordionChildCards img {
  width: 40px;
  height: 40px;
  margin-bottom: 15px;
  fill: var(--lfd-blue);
}

.accordionChildCards h5 {
  margin: 0;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
  color: var(--lfd-black);
}

/* Tablet */
@media (max-width: 991px) {
  .benefits-band .info-item__body {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .accordionChildCards {
    align-items: center;
    text-align: center;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .benefits-band .info-item__body {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .accordionChildCards {
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   26. CONTACT
   Full-bleed photo with two glass panels: details card left, form right.
   No .page-hero on this page — the design has no title band or breadcrumb.
   ========================================================================== */

.contact-band {
  position: relative;
  padding: var(--spacing-5xl) 0 var(--spacing-4xl);
  overflow: hidden;
}

.contact-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-band>.container-lfd {
  position: relative;
  z-index: 1;
}

.contact-grid {
  display: grid;
  grid-template-columns: 422px minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: stretch;
}

.contact-card {
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

.contact-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-project-size);
  line-height: var(--h1-project-line);
  letter-spacing: var(--h1-project-track);
}

.contact-bg-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Vimeo version of the contact background. Same box as .contact-bg-video:
   fills .contact-band__media, centred, cropped to cover. */
.contact-bg-vimeo {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background-size: cover;
  /* the optional placeholder image shows until the video is ready */
  background-position: center;
}

.contact-bg-vimeo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  /* real size is set by JS so it covers like object-fit: cover */
  transform: translate(-50%, -50%);
  /* = object-position: center */
  border: 0;
  pointer-events: none;
  /* background only */
  opacity: 0;
  transition: opacity 0.6s ease;
}

.contact-bg-vimeo.is-ready iframe {
  opacity: 1;
}

.contact-panel {
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* --- Office list --- */
.office {
  margin-bottom: var(--spacing-lg);
}

.office__name {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0 0 var(--spacing-xs);
  color: var(--lfd-red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

.office__name svg {
  flex: 0 0 auto;
}

.office address {
  margin: 0 0 var(--spacing-s);
  font-style: normal;
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-secondary);
}

.office__phone {
  font-size: var(--body-size);
  color: var(--text-secondary);
}

.office__phone:hover {
  color: var(--lfd-teal);
  text-decoration: underline;
}

.contact-card__social {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: auto;
  padding-top: var(--spacing-lg);
}

.contact-card__social a {
  display: block;
  width: 16px;
  height: 16px;
}

.contact-card__social a:hover {
  opacity: 0.6;
}

.contact-card__social img,
.contact-card__social svg {
  width: 16px;
  height: 16px;
}

.contact-card .heading-decorated {
  margin: 0 0 var(--spacing-2xl);
}

/* --- Form --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-primary);
}

.form-control-lfd {
  width: 100%;
  padding: var(--spacing-s) var(--spacing-md);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-primary);
}

.form-control-lfd::placeholder {
  color: var(--neutral-focus);
}

textarea.form-control-lfd {
  border-radius: var(--radius-xl);
  resize: vertical;
  min-height: 190px;
}

/* Segmented control — Preferred Method of Contact */
.segmented {
  display: inline-flex;
  padding: var(--spacing-xxs);
  background: var(--white);
  border-radius: var(--radius-lg);
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.segmented input:checked+label {
  background: var(--lfd-teal-40);
}

.segmented input:focus-visible+label {
  outline: 3px solid var(--lfd-teal);
  outline-offset: 2px;
}

.segmented label:has(input:checked) {
  background: var(--lfd-teal-40);
}

.segmented .wpcf7-list-item {
  margin: 0px;
}

/* Inquiry type radios */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.radio-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.radio-row input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--lfd-teal);
}

.radio-item label {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  cursor: pointer;
}

.form-submit {
  width: 100%;
  margin-top: var(--spacing-lg);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #ffb900;
  color: #fff;
  padding: 5px;
}

.radio-row span.wpcf7-list-item-label {
  line-height: 20px;
  display: inline-block;
  position: relative;
  left: 5px;
  top: -4px;
}

.contact-panel span.wpcf7-not-valid-tip {
  margin-left: var(--radius-md);
}

@media (max-width: 1439px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-panel {
    border-radius: var(--radius-lg);
  }

  .contact-band {
    padding: var(--spacing-4xl) 0;
  }

  .contact-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg) var(--spacing-2xl);
  }

  .contact-card> :first-child,
  .contact-card> :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-card,
  .contact-panel {
    padding: var(--spacing-lg);
  }

  .radio-row {
    gap: var(--spacing-s) var(--spacing-md);
  }

  /* Mobile returns to a single stacked column */
  .contact-card {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   27. SHARED — ARTICLE CARDS, PAGINATION, TAGS
   Used by Project Detail, Sector Detail and Search.
   ========================================================================== */

/* --- Article Preview Link (Organisms) --- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.article-card {
  display: flex;
  flex-direction: column;
}

.article-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-reg);
  overflow: hidden;
}

.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.article-card:hover .article-card__media img {
  transform: scale(1.03);
}

.article-card__meta {
  margin: var(--spacing-s) 0 var(--spacing-xxs);
  font-family: var(--font-display);
  font-size: var(--byline-size);
  line-height: var(--byline-line);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lfd-red);
}

.article-card__title {
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
}

.article-card__copy {
  margin-bottom: var(--spacing-s);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

.article-card__more {
  margin-top: auto;
  font-size: var(--body-sm-size);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-card:hover .article-card__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Service / award tag pills (Molecules: Service Tag) --- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-pill {
  padding: var(--spacing-xxs) var(--spacing-s);
  border: 2px solid var(--lfd-teal-40);
  border-radius: var(--spacing-xl);
  font-family: var(--font-display);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  white-space: nowrap;
}

.tag-pill {
  position: relative;
}

.tag-pill a {
  color: inherit;
  text-decoration: none;
}

.tag-pill a::after {
  /* stretch the link over the whole pill */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tag-pill:hover {
  background: var(--lfd-teal-40);
}

.tag-pill a:focus-visible {
  outline: 3px solid var(--lfd-teal);
  outline-offset: 2px;
  border-radius: var(--spacing-xl);
}

.award-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.award-list li {
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-secondary);
}

/* --- Pagination Control Buttons (Buttons page) --- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-3xl);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--spacing-s);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  transition: background-color 160ms ease;
}

.pagination a:hover {
  background: var(--lfd-teal-40);
}

.pagination [aria-current="page"] {
  background: var(--lfd-teal);
  color: var(--white);
}

/* ==========================================================================
   28. PROJECT MEDIA CAROUSEL  (Templates — see 42__Templates PDF)
   Desktop/tablet: large highlighted item + thumbnail strip, arrows and dots.
   Mobile: vertical column preview with a See All expander.

   Block is .pdp-gallery, NOT .gallery — WordPress core outputs
   `<div class="gallery">` for the [gallery] shortcode, and themes routinely
   run $('.gallery').slick() against it, which rewrites the children and
   breaks this carousel. Likewise .lfd-lightbox, not .lightbox, which many
   lightbox plugins bind to. Don't rename these back.
   ========================================================================== */

.pdp-gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.pdp-gallery__note {
  font-size: var(--body-sm-size);
  color: var(--text-secondary);
}

.pdp-gallery__note span {
  background: var(--lfd-beige);
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--spacing-xxs);
}

.pdp-gallery__controls> :last-child {
  margin-left: auto;
}

.pdp-gallery__head {
  display: block;
}

/* Sliding track.
   All items live in one flex row that translates; nothing is destroyed or
   rebuilt between steps, so images never re-fetch. The active item widens to
   --stage-w while its neighbours stay --thumb-w, and the track shifts so the
   active item's left edge sits exactly --thumb-prev-shown into the viewport.
   Both transform and width animate, giving the slide-and-grow. */
.pdp-gallery {
  --stage-w: min(65vw, 900px);
  /* capped so the gallery isn't huge */
  --thumb-w: calc(var(--stage-w));
  /* 20% smaller than the stage */
  --thumb-prev-shown: 0.10;
  /* left thumb: 10% visible */
  --thumb-next-shown: 0.25;
  /* right thumb: 25% visible */
  --gallery-h: min(500px, 34vw);
  /* image max height */
  --gallery-gap: var(--spacing-md);
}

/* Window: left sliver + stage + right sliver + the two gaps */
.pdp-gallery__viewport {
  width: calc((var(--thumb-w) * var(--thumb-prev-shown)) + var(--stage-w) + (var(--thumb-w) * var(--thumb-next-shown)) + (var(--gallery-gap) * 2));
  max-width: 100%;
  height: var(--gallery-h);
  margin: 0 auto;
  /* Horizontal gestures belong to the carousel; vertical ones still scroll
     the page, which matters on touch devices. */
  touch-action: pan-y;
  cursor: grab;
}

.pdp-gallery--dragging .pdp-gallery__viewport {
  cursor: grabbing;
}

/* .pdp-gallery--dragging only changes the cursor; motion is JS-driven. */

.pdp-gallery__track {
  display: flex;
  align-items: stretch;
  gap: var(--gallery-gap);
  height: 100%;
  will-change: transform;
  /* No CSS transition here: the slide is driven frame-by-frame in JS so it
     animates identically whether or not a theme or an OS preference has
     stripped CSS transitions out. */
  /* Stops the browser selecting captions/images mid-drag */
  user-select: none;
  -webkit-user-select: none;
}

.pdp-gallery__track img {
  -webkit-user-drag: none;
}

/* The active item is the stage; neighbours sit shorter and slightly lower */
.pdp-gallery__item[aria-current="true"] {
  flex-basis: var(--stage-w);
  width: var(--stage-w);
}

.pdp-gallery__item:not([aria-current="true"]) {
  height: 80%;
  margin-top: 4%;
}

/* Motion is JS-driven, so there are no CSS transitions to suppress here.
   prefers-reduced-motion is honoured in scripts/main.js by skipping the
   tween entirely. */

.pdp-gallery__item {
  position: relative;
  flex: 0 0 var(--thumb-w);
  width: var(--thumb-w);
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-reg);
  overflow: hidden;
  cursor: pointer;
  /* Size/offset are interpolated in JS alongside the track transform, so the
     incoming image lands exactly on the stage. */
}

.pdp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The old scale-in keyframe is gone — the active item now grows via the
   flex-basis/width transition on .pdp-gallery__item, which is what makes
   the slide read as one continuous movement. */

.pdp-gallery__play {
  position: absolute !important;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}

.pdp-gallery__play::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: red;
  border-radius: 50%;
}

.pdp-gallery__play::after {
  position: relative;
  z-index: 2;
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 18px solid var(--white);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}


.pdp-gallery__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.pdp-gallery__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--lfd-teal);
  color: var(--white);
  border: 0;
  border-radius: var(--spacing-xxs);
  cursor: pointer;
}

.pdp-gallery__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--lfd-teal);
  border: 3px solid var(--lfd-teal);
  border-radius: var(--spacing-xxs);
  cursor: pointer;
  font-weight: bold;
}

.pdp-gallery__number.active {
  background: var(--lfd-teal);
  color: var(--white);
  pointer-events: none;
}

.bt-disabled {
  pointer-events: none;
  background: var(--lfd-teal-40);
}

.pdp-gallery__arrow:hover {
  background: var(--text-primary);
}

.pdp-gallery__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.pdp-gallery__dots {
  display: flex;
  gap: var(--spacing-xs);
}

.pdp-gallery__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--neutral-default);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.pdp-gallery__dot[aria-current="true"] {
  background: var(--text-primary);
}

/* Mobile: vertical column with a See All expander */
.pdp-gallery__mobile {
  display: none;
}

.pdp-gallery__mobile-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.pdp-gallery__mobile-list .pdp-gallery__item {
  aspect-ratio: 16 / 10;
}

.pdp-gallery__mobile-list .pdp-gallery__item[data-extra="true"] {
  display: none;
}

.pdp-gallery__mobile[data-expanded="true"] .pdp-gallery__item[data-extra="true"] {
  display: block;
}

.pdp-gallery__seeall {
  width: 100%;
  margin-top: var(--spacing-md);
}


@media (max-width: 767px) {

  .pdp-gallery__viewport,
  .pdp-gallery__controls {
    display: none;
  }

  .pdp-gallery__mobile {
    display: block;
  }
}


/* --- Lightbox --- */
.lfd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  background: rgba(0, 0, 0, 0.85);
}

.lfd-lightbox[data-open="true"] {
  display: flex;
}

.lfd-lightbox__figure {
  max-width: 1100px;
  width: 100%;
  margin: 0;
}

.lfd-lightbox__figure img,
.lfd-lightbox__figure video {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-reg);
  background: #000;
}

/* Vimeo player in the lightbox: 16:9, never taller than the viewport */
.lfd-lightbox__video {
  position: relative;
  width: min(100%, calc(78vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #000;
  border-radius: var(--radius-reg);
  overflow: hidden;
}

.lfd-lightbox__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lfd-lightbox__caption {
  margin-top: var(--spacing-s);
  color: var(--white);
  font-size: var(--body-sm-size);
  text-align: center;
}

.lfd-lightbox__close,
.lfd-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lfd-lightbox__close:hover,
.lfd-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lfd-lightbox__close {
  top: var(--spacing-lg);
  right: var(--spacing-lg);
}

.lfd-lightbox__nav--prev {
  left: var(--spacing-lg);
}

.lfd-lightbox__nav--next {
  right: var(--spacing-lg);
}

/* Override */
.pdp-gallery__note span {
  background: var(--lfd-beige);
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--spacing-xxs);
  display: inline-block;
  margin-bottom: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.pdp-gallery__controls> :last-child {
  margin-left: auto;
}

.pdp-gallery__head {
  display: block;
}

.pdp-gallery__arrow img {
  height: 22px;
}

.pdp-gallery__arrow {
  border-radius: var(--spacing-xxs);
}

.pdp-gallery__dot {
  background: var(--lfd-teal-60);
  width: 6px;
  height: 6px;
}

.pdp-gallery__dot[aria-current="true"] {
  background: var(--lfd-teal);
  width: 8px;
  height: 8px;
  position: relative;
  top: -1px;
}

.pdp-gallery__viewport {
  margin-bottom: var(--spacing-2xl);
  width: 100%;
  position: relative;
}

.pdp-gallery__item {
  border-radius: var(--radius-xl);
  opacity: .75;
  transition: opacity .7s linear;
}

button.pdp-gallery__item:hover {
  opacity: 1;
  transition: opacity .7s linear;
}

.pdp-gallery__item[aria-current="true"] {
  border-radius: var(--radius-xl);
  opacity: 1;
}

img.expand-icon {
  position: absolute;
  bottom: var(--spacing-xl);
  left: 150px;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 767px) {
  .pdp-gallery__viewport {
    display: block;
  }

  .pdp-gallery__controls {
    display: flex;
  }

  .pdp-gallery__mobile {
    display: none;
  }
}

/* ==========================================================================
   29. PROJECT DETAIL
   ========================================================================== */

.pdp-hero {
  padding: var(--spacing-5xl) 0 var(--spacing-2xl);
}

.pdp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--spacing-2xl);
  align-items: center;
}

.single-projects .pdp-hero__grid {
  position: relative;
  min-height: 450px;
}

.pdp-hero__title {
  margin: var(--spacing-md) 0 var(--spacing-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-project-size);
  line-height: var(--h1-project-line);
  letter-spacing: var(--h1-project-track);
}

.pdp-hero__client {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  text-align: left;
  color: var(--text-secondary);
}

.pdp-hero__location {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
  font-size: var(--body-size);
  color: var(--text-secondary);
}

.pdp-hero__mediacontainer {
  border-radius: var(--radius-xxl) var(--radius-xxl) 0 var(--radius-xxl);
  overflow: hidden;
}

.pdp-hero__media {
  position: relative;
}

.pdp-hero__media:before {
  content: '';
  position: absolute;
  width: 200px;
  height: 130px;
  left: -104px;
  top: -28px;
  background: url(/wp-content/themes/lfdriscoll/img/Halftone-Gradiant-Asset.svg);
}

.pdp-hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Photo Cred Tag (Molecules) */
.photo-cred {
  position: absolute;
  right: var(--spacing-s);
  bottom: var(--spacing-s);
  padding: var(--spacing-xxs) var(--spacing-xs);
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--spacing-xxs);
  font-size: var(--byline-size);
  line-height: var(--byline-line);
  color: var(--text-secondary);
}

/* PDP Data Group (Organisms) */
.pdp-overview {
  padding: var(--spacing-xl);
  background: var(--white);
  border-radius: var(--radius-reg);
}

.pdp-overview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg) var(--spacing-2xl);
  margin-top: var(--spacing-lg);
}

.pdp-overview__label {
  margin: 0 0 var(--spacing-xxs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
}

.pdp-overview__value {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

@media (max-width: 1440px) {
  .pdp-overview {
    position: relative;
    right: calc(-1 * var(--margin));
    min-width: 49%;
    border-radius: var(--radius-reg) 0 0 var(--radius-reg);
  }
}

@media (max-width: 1023px) {
  .pdp-hero {
    padding-top: var(--spacing-5xl);
  }

  .pdp-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp-hero__media {
    margin-right: calc(var(--margin) * -1);
  }

  .gallery__stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery__thumbs {
    flex-direction: row;
  }

  .pdp-gallery {
    --stage-w: min(72vw, 900px);
    --gallery-h: min(420px, 40vw);
  }
}

@media (max-width: 767px) {
  .pdp-overview__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   30. SECTOR DETAIL
   Each sector supplies its own gradient via --sector-from / --sector-to.
   ========================================================================== */

.sector-hero {
  position: relative;
  padding: var(--spacing-5xl) 0 0;
  background: var(--lfd-beige-40);
  min-height: 715px;
}

.sector-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.sector-hero__grid {
  grid-template-columns: 50% 50%;
}

.sector-hero__body {
  padding: var(--spacing-3xl) var(--margin) var(--spacing-3xl) 0;
}

.sector-hero__eyebrow {
  display: block;
  margin-bottom: var(--spacing-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  color: var(--sector-from, var(--lfd-red));
}

.sector-hero h1 {
  margin: var(--spacing-lg) 0 0;
}

.sector-hero__title {
  display: block;
  margin: 0 0 var(--spacing-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
}

.sector-hero__media {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 50%;
  max-height: none;
  height: auto;
  border-radius: var(--radius-xl) 0px 0px var(--radius-xl);
  overflow: hidden;
}

.sector-hero__media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;

}

.container-sectorband-lfd {
  width: 100%;
  max-width: var(--content-sectorband-max);
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* Gradient strip with the stacked capability bars */
.sector-band {
  padding: var(--spacing-2xl) 0 var(--spacing-2xl);
  background: linear-gradient(90deg,
      var(--sector-from, var(--lfd-turquoise)) 0%,
      var(--sector-to, var(--lfd-blue)) 100%);
}

.capability {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-2xl);
  background: var(--sector-to, var(--lfd-blue));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  margin: 0;
  justify-content: center;
  border-radius: var(--radius-xl) var(--radius-xl) 0px 0px;
  text-align: center;
}

.capability--alt {
  background: var(--white);
  color: var(--text-primary);
  border-radius: 0px 0px var(--radius-xl) var(--radius-xl);
}

.capability__rule {
  flex: 0 0 60px;
  height: 2px;
  background: currentColor;
  opacity: 0.6;
}

/* Sector band animation starts */
.capability--alt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}

.capability--alt>span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  opacity: 0;
}

/* Sector band animation ends */

/* Center of Excellence panel */
.coe {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 0;
}

.coe__content {
  padding: var(--spacing-3xl);
  background: radial-gradient(ellipse at top right, var(--lfd-blue-80) 30%, var(--lfd-blue) 100%);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  color: var(--white);
  padding-right: calc(var(--spacing-3xl) + var(--spacing-3xl));
}

.coe__title {
  margin: 0 0 var(--spacing-2xl);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  gap: var(--spacing-5xl);
  display: grid;
  grid-template-columns: 40fr 60fr;
}

.coe .prose p {
  color: var(--white);
}

.coe__panel {
  padding: var(--spacing-xl);
  background: var(--white);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  color: var(--text-primary);
  position: relative;
  left: calc(var(--spacing-2xl) * -1);
  top: var(--spacing-2xl);
  width: calc(100% + var(--spacing-2xl));
}

.coe__panel h3 {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

.coe__topics {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.coe__topics li {
  padding-left: var(--spacing-md);
  position: relative;
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
}

.coe__topics li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--sector-to, var(--lfd-blue));
}

.coe__cta {
  margin-top: var(--spacing-3xl);
  margin-left: var(--spacing-3xl);
}


@media (max-width: 1440px) {
  .sector-hero {
    padding: var(--spacing-4xl) 0 0;
  }

  .sector-hero {
    min-height: 615px;
  }
}

@media (max-width: 1023px) {
  .coe {
    grid-template-columns: minmax(0, 1fr);
  }

  .sector-hero__body {
    padding: var(--spacing-2xl) var(--margin);
  }

  .sector-hero__media {
    min-height: 260px;
  }

  .capability {
    padding: var(--spacing-xl) var(--spacing-lg);
    font-size: var(--h5-size);
  }
}

@media (max-width: 768px) {
  .sector-hero__grid {
    grid-template-columns: 1fr;
  }

  .sector-hero__media {
    position: relative;
    max-height: 420px;
    top: 0px;
    right: 0px;
    width: 100%;
    border-radius: var(--radius-xl) 0px 0px var(--radius-xl);
    overflow: hidden;
    margin-left: calc(var(--margin) * 2);
  }

  .sector-hero__media img {
    max-height: 420px;
  }
}

@media (max-width: 767px) {
  .coe {
    padding: var(--spacing-lg);
  }

  .sector-hero {
    padding-bottom: var(--spacing-2xl);
  }
}

/* ==========================================================================
   32. 404
   ========================================================================== */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  min-height: 60vh;
  margin-inline: auto;
  padding: var(--spacing-5xl) var(--margin);
  text-align: center;
}

.error-page__mark {
  width: 148px;
  margin-bottom: var(--spacing-2xl);
}

.error-page__mark img {
  width: 100%;
  height: auto;
}

.error-page__code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
}

.error-page__title {
  margin: var(--spacing-xs) 0 var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

.error-page__copy {
  max-width: 560px;
  margin: 0 auto var(--spacing-2xl);
  color: var(--text-secondary);
}

button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input[type="button"]:focus,
input[type="submit"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   FOOTER SUBCRIBE FORM MOVED TO CONTACT FORM 7
   ========================================================================== */

input#newsletter_email {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-xs) var(--radius-reg);
  background: var(--lfd-beige-40);
  border: 0.5px solid var(--neutral-light);
  border-radius: var(--radius-reg);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-track);
  color: var(--text-primary);
}

form#newsletterForm fieldset:nth-child(2) {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-s) var(--spacing-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--lfd-teal-40);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--nav-size);
  line-height: var(--nav-line);
  letter-spacing: var(--nav-track);
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  font-weight: var(--bs-body-font-weight);
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.link-arrow {
  padding: var(--spacing-xs) var(--spacing-md);
}

span.wpcf7-spinner {
  display: none;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.link-arrow:hover {
  background: var(--lfd-teal);
  color: var(--white);
}

.wpcf7-response-output.newsletter_event,
.wpcf7 form .wpcf7-response-output {
  position: relative;
  top: 18px;
  margin: 0px;
  padding: 0px;
  display: block;
}

.wpcf7 form .wpcf7-response-output {
  background: #373737;
  color: #fff;
  line-height: 22px;
  padding: 0px 5px;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.wpcf7-not-valid-tip {
  position: absolute;
  font-size: var(--byline-size);
  font-family: var(--font-display);
}

#skiptocontent a {
  padding: 6px;
  position: fixed;
  top: 2px;
  left: 0;
  color: #1d252c;
  background: #e3e5e6;
  -webkit-transition: top 1s ease-out, background 1s linear;
  transition: top 1s ease-out, background 1s linear;
  z-index: -9999999999;
  opacity: 0;
  font-size: 17px;
}

#skiptocontent a:active,
#skiptocontent a:focus {
  position: fixed;
  left: 0;
  top: 0;
  background: #e3e5e6;
  color: #1d252c;
  -webkit-transition: top 0.1s ease-in, background 0.5s linear;
  transition: top 0.1s ease-in, background 0.5s linear;
  z-index: 99999999999;
  opacity: 1;
}

@media (max-width: 767px) {
  form#newsletterForm fieldset:nth-child(2) {
    flex-direction: column;
    align-items: stretch;
  }

  input#newsletter_email {
    width: 100%;
  }

  input.wpcf7-form-control.wpcf7-submit.has-spinner.link-arrow {
    width: 100%;
  }

  .footer__stobg {
    display: inline-block;
  }

  .page-body .layout__column.layout__column--spacer {
    display: none;
  }

  .page-body .section .layout {
    padding: var(--spacing-lg) 0;
  }
}

/* ==========================================================================
   TWO COLOR SECTION SEPARATING BORDER DECORATION
   ========================================================================== */

.section-border-top-design,
.section-border-bottom-design {
  width: 100%;
  height: 50%;
  flex: 0 0 50%;
  position: relative;
}

.two_color_section_border {
  display: flex;
  flex-direction: column;
  padding: 0px;
  height: var(--spacing-4xl);
}

.section-border-top-design-inner,
.section-border-bottom-design-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--radius-xl);
}

.section-border-top-design-inner {
  left: 0;
  border-radius: 0px 0px 0px var(--radius-xl);
}

.section-border-bottom-design-inner {
  right: 0;
  border-radius: 0px var(--radius-xl) 0px 0px;
}

.section-border-top-design {
  z-index: 1;
}

.transparent-overlap-border-radius {
  top: calc(-1 * var(--radius-xl));
  margin-bottom: calc(-2 * var(--radius-xl));
  position: relative;
}

.transparent-overlap-border-radius .page-hero-scooped-border-radius {
  position: absolute;
  z-index: 1;
  width: var(--radius-xl);
  height: var(--radius-xl);
  top: calc(-1 * var(--radius-xl));
}

.transparent-overlap-border-radius .section-border-top-design-inner {
  border-radius: 0px var(--radius-xl) 0px 0px;
}

.transparent-overlap-border-radius .section-border-bottom-design {
  display: none;
}

.checker {
  background-color: #fff !important;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
}

@media (max-width: 1439px) {
  .two_color_section_border {
    height: var(--spacing-3xl);
  }

  .section-border-top-design-inner,
  .section-border-bottom-design-inner {
    height: var(--radius-md);
  }

  .section-border-top-design-inner {
    border-radius: 0px 0px 0px var(--radius-md);
  }

  .section-border-bottom-design-inner {
    border-radius: 0px var(--radius-md) 0px 0px;
  }

  .transparent-overlap-border-radius {
    top: calc(-1 * var(--radius-md));
    margin-bottom: calc(-2 * var(--radius-md));
  }

  .transparent-overlap-border-radius .page-hero-scooped-border-radius {
    width: var(--radius-md);
    height: var(--radius-md);
    top: calc(-1 * var(--radius-md));
    border-radius: 0 var(--radius-md) 0 0;
  }

  .transparent-overlap-border-radius .section-border-top-design-inner {
    border-radius: 0px var(--radius-md) 0px 0px;
  }
}

@media (max-width: 1023px) {
  .two_color_section_border {
    height: var(--spacing-xl);
  }

  .section-border-top-design-inner,
  .section-border-bottom-design-inner {
    height: var(--radius-nav);
  }

  .section-border-top-design-inner {
    border-radius: 0px 0px 0px var(--radius-nav);
  }

  .section-border-bottom-design-inner {
    border-radius: 0px var(--radius-nav) 0px 0px;
  }

  .transparent-overlap-border-radius {
    top: calc(-1 * var(--radius-nav));
    margin-bottom: calc(-2 * var(--radius-nav));
  }

  .transparent-overlap-border-radius .page-hero-scooped-border-radius {
    width: var(--radius-nav);
    height: var(--radius-nav);
    top: calc(-1 * var(--radius-nav));
    border-radius: 0 var(--radius-nav) 0 0;
  }

  .transparent-overlap-border-radius .section-border-top-design-inner {
    border-radius: 0px var(--radius-nav) 0px 0px;
  }
}

/* ==========================================================================
   TWO COLUMN CONTENT BLOCK
   ========================================================================== */

.surface.two_column_content .section-block {
  padding: 0px;
}

.surface.two_column_content .section-block .section-block--tight {
  padding: var(--spacing-2xl) 0;
}

.single_column_content .section-block .container-lfd p:has(.aligncenter) {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Left Content Rght Image WD Panel
   ========================================================================== */

.edge-image-min-height {
  min-height: 460px;
}

.split__text__center {
  align-self: center;
}

.heading-decorated__title__toright {
  text-align: right;
}

.heading-decorated__title__toright+.prose {
  max-width: 500px !important;
  float: right;
}

/* ==========================================================================
   Sitemap Panel
   ========================================================================== */

.sitemap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3xl);
}

.sitemap__column {
  min-width: 0;
}

.sitemap__column h2 {
  margin-bottom: var(--spacing-lg);
}

.sitemap__column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap__column li {
  margin-bottom: var(--spacing-sm);
}

.sitemap__column li ul {
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-lg);
}

.sitemap__column nav {
  padding-left: var(--spacing-md);
}

.sitemap_panel .section-block {
  padding-bottom: var(--spacing-5xl);
}

@media (max-width: 767px) {
  .sitemap {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Article Template
   ========================================================================== */

.article-content {
  background: var(--lfd-beige-60);
}

.article-content img {
  max-width: 100%;
  width: 100%;
  margin-bottom: var(--spacing-xl);
}

.article-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.article-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-nav);
}

.article-content .split {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: var(--spacing-2xl);
  align-items: stretch;
}

.article-content .article-meta-container {
  background: var(--white);
  padding: var(--spacing-xl) var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  row-gap: var(--radius-xl);
  border-radius: 0px var(--radius-xl) var(--radius-xl) var(--radius-xl);
}

.article-content .article-meta-item {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr);
  column-gap: 20px;
  align-items: center;
}

.article-content .article-meta-label,
.article-content .article-meta-text {
  min-width: 0;
}

.article-content .article-single-image {
  border-radius: var(--radius-nav) var(--radius-nav) var(--radius-nav) 0px;
}

.article-content .section-block--tight {
  padding: var(--spacing-2xl) 0;
}

.article-content .article-meta-text span {
  background: var(--lfd-beige);
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--radius-xxs);
}

/* ==========================================================================
   Article Archive
   ========================================================================== */

.news-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4xl) var(--spacing-lg);
  padding: var(--spacing-2xl) 0 var(--spacing-2xl);
}

.news-archive-grid .project-card__title,
.insights-archive-related-items .project-card__title {
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  font-weight: bold;
  margin-top: 0px;
}

.news-archive-grid .project-card__media,
.insights-archive-related-items .project-card__media {
  aspect-ratio: 420 / 244;
}

.article-meta {
  display: flex;
  justify-content: space-between;
}

.news-archive-grid .project-card__category,
.insights-archive-related-items .project-card__category {
  color: var(--lfd-orange);
  font-size: var(--byline-size);
  line-height: var(--byline-line);
  text-transform: uppercase;
  padding: var(--spacing-xs) 0;
}

.news-archive-grid .project-card__publisheddate,
.insights-archive-related-items .project-card__publisheddate {
  color: var(--lfd-black-70);
  font-size: var(--byline-size);
  line-height: var(--byline-line);
  padding: var(--spacing-xs) 0;
}

.archive-read-more {
  color: var(--text-link);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
}

.archive-read-more:hover {
  color: var(--text-link-hover);
}

.insights-archive-related-items {
  background: transparent;
}

.featured-insight {
  background: unset;
}

.featured-project {
  background: unset;
}

@media (max-width: 1439px) {
  .article-content .split {
    grid-template-columns: 35% 62%;
  }
}

@media (max-width: 1024px) {
  .news-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .article-content .split {
    display: block;
  }

  .article-content .split__text {
    max-width: unset;
    margin-bottom: var(--spacing-2xl);
    margin-left: calc(-1 * var(--spacing-3xl));
  }

  .article-content .article-meta-container {
    border-radius: 0px var(--radius-xl) var(--radius-xl) 0px;
  }

  .article-content .article-meta-item {
    display: block;
  }

  .article-content .article-meta-container {
    flex-direction: row;
    justify-content: space-between;
  }

  .article-content .article-meta-label {
    margin-bottom: var(--spacing-s);
  }
}

@media (max-width: 768px) {
  .article-content .article-meta-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: var(--spacing-md);
  }

  .article-content .article-meta-container>* {
    flex: 0 0 calc(50% - (var(--spacing-3xl) / 2));
  }

  .article-content .split {
    display: block;
  }

  .article-content .split__text {
    max-width: unset;
    margin-bottom: var(--spacing-2xl);
    margin-left: calc(-1 * var(--spacing-3xl));
  }

  .article-content .article-meta-container {
    border-radius: 0px var(--radius-xl) var(--radius-xl) 0px;
  }

  .article-content .article-meta-item {
    display: block;
  }

  .article-content .article-meta-label {
    margin-bottom: var(--spacing-s);
  }
}

@media (max-width: 767px) {
  .news-archive-grid {
    grid-template-columns: 1fr;
  }

  .article-content .article-meta-text span.zoom-social_icons-list-span {
    font-size: 14px !important;
    padding: 6px !important;
  }

  .zoom-social-icons-list--no-labels .zoom-social_icons-list__item {
    margin: 2px;
  }
}

/* ==========================================================================
   Sharing Icons
   ========================================================================== */

span.social-sharing-icon-label {
  display: none;
}

/* ==========================================================================
   31. SEARCH
   ========================================================================== */

.search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

.search-toolbar__count {
  font-family: var(--font-display);
  font-size: var(--h5-size);
  line-height: var(--h5-line);
}

.search-toolbar__page {
  margin-left: var(--spacing-lg);
  font-size: var(--body-size);
  color: var(--text-secondary);
}

.search-toolbar__actions {
  display: flex;
  gap: var(--spacing-xs);
}

.search-panel {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--lfd-beige-40);
  border-radius: var(--radius-reg);
}

.search-panel__title {
  margin: 0 0 var(--spacing-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h6-size);
  line-height: var(--h6-line);
}

/* Search Result Card v2 (Organisms) */
.result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--spacing-lg);
  align-items: start;
  padding: var(--spacing-lg) 0 0 0;
  border-bottom: 1px solid var(--neutral-light);
}

.result-card {
  position: relative;
  z-index: 1;
}

.result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Covers the whole area */
  left: -20px;
  background-color: var(--lfd-beige-80);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  /* Places background behind content */
  border-radius: var(--radius-reg);
}

.result-card:hover::before {
  opacity: 1;
}

.result-card--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.result-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  position: relative;
}

.result-card__head .sector-tag-container {
  right: var(--spacing-md);
  left: unset;
  top: 0px;
}

.result-card__type {
  font-family: var(--font-display);
  font-size: var(--h6-size);
  line-height: var(--h6-line);
  color: var(--lfd-red);
  text-transform: capitalize;
}

.result-card__date {
  font-size: var(--body-sm-size);
  color: var(--text-secondary);
}

.result-card__title {
  margin: 0 0 var(--spacing-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
}

.result-card:hover .result-card__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.result-card__copy {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--text-secondary);
}

.result-card__media {
  aspect-ratio: 3 / 3;
  border-radius: 0px var(--spacing-md) 0px 0px;
  overflow: hidden;
}

.result-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sector tag sits inline in the head row here, not overlaid on an image */


/* No results state */
.search-empty {
  padding: var(--spacing-5xl) 0;
  text-align: center;
}

.search-empty__title {
  margin: 0 0 var(--spacing-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
}

.search-empty__copy {
  max-width: 520px;
  margin: 0 auto var(--spacing-lg);
  color: var(--text-secondary);
}

.search-results-panel {
  padding-bottom: var(--spacing-2xl);
  max-width: 867px;
}

.search-panel-container {
  background: var(--lfd-beige-40);
}

div#sort-panel {
  background: var(--white);
}

div#filter-panel {
  background: var(--white);
}

.search-panel-container nav.sectors-pagination {
  margin-bottom: 0px;
}

.empty-spacer {
  padding: var(--spacing-md);
}

@media (max-width: 767px) {
  .result-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-card__media {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  .search-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-toolbar__page {
    margin-left: 0;
  }
}


/* ==========================================================================
   Projects Archive — Filter Panel (archive-projects.php)
   Reuses the search page's .filter-bar / .filter-button / .search-panel /
   .radio-row / .radio-item pattern as-is (see search.php) for the Sector
   fieldset. Architect / Partners / Clients / Locations are plain <select>
   dropdowns instead — the theme has no existing <select> styling, so
   this defines it fresh, matching the teal/pill form-input language used
   elsewhere (search inputs, buttons).
   ========================================================================== */

.filter-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin-top: 0;
}

#filter-panel {
  background: var(--lfd-beige-40);
}

.no-results-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  min-height: 300px;
  text-align: center;
}

.filter-select-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.filter-select-item label {
  font-family: var(--font-body);
  font-size: var(--body-sm-size, var(--body-size));
  color: var(--text-secondary, var(--text-primary));
}

.filter-select {
  width: 100%;
  padding: var(--spacing-s) var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--lfd-teal);
  border-radius: var(--radius-md, var(--radius-reg));
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--text-primary);
  cursor: pointer;
}

.filter-select:focus-visible {
  outline: 3px solid var(--lfd-teal);
  outline-offset: 2px;
}

.filter-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.filter-panel__clear {
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--text-secondary, var(--text-primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1023px) {
  .filter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .filter-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Insights Archive — Filter Panel (archive-insights.php)
   Same pattern as the Projects archive filter panel: reuses
   .filter-bar / .filter-button / .search-panel / .radio-row /
   .radio-item as-is. Upper fieldset (Category) is checkboxes; lower
   fieldset (Tags + Author + Published Date) mixes checkboxes with two
   dropdowns laid out side by side via .filter-row-2.
   ========================================================================== */

#insights-filter-panel {
  background: var(--lfd-beige-40);
}

.filter-row-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.filter-col {
  min-width: 0;
}

/* Category/Tags checkboxes wrap horizontally by default (.radio-row);
   in a narrow one-of-four column that reads better stacked vertically. */
.radio-row--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.filter-select-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Author/Published Date labels use .search-panel__title directly in the
   markup so they match Category/Tags' legend styling exactly. */

.filter-select {
  width: 100%;
  padding: var(--spacing-s) var(--spacing-md);
  background: var(--white);
  border: 1px solid var(--lfd-teal);
  border-radius: var(--radius-md, var(--radius-reg));
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--text-primary);
  cursor: pointer;
}

/* Targets all selects with the filter-select class */
.filter-select {
  /* 1. Hide the browser's default arrow */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  /* 2. Add custom arrow (SVG chevron) */
  /* Using a standard grey color, you can change 'currentColor' to a specific hex like %23666666 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;

  /* 3. Position the arrow 24px from the right edge */
  background-position: right 24px center !important;
  background-size: 16px !important;

  /* 4. Increase right padding so text doesn't run into the arrow */
  padding-right: 50px !important;
}

/* Optional: Support for IE11 if needed */
.filter-select::-ms-expand {
  display: none;
}

.filter-select:focus-visible {
  outline: 3px solid var(--lfd-teal);
  outline-offset: 2px;
}

.filter-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.filter-panel__clear {
  font-family: var(--font-body);
  font-size: var(--body-size);
  color: var(--text-secondary, var(--text-primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.no-results-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  min-height: 300px;
  text-align: center;
}

@media (max-width: 1023px) {
  .filter-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .filter-row-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   31. ANIMATIONS
   ========================================================================== */


/* Split section entrance animation — shared by .leftcontent-rightimage-wd,
   .left_video_right_content, and .left_accordion_content_right_image_swap
   (all use the same .split/.split__text/.split__media/.split--media-first
   structure — the "Cards Content" style of the accordion block has no
   .split__media counterpart, so only its text side animates). Text slides
   in from one side, media from the other, converging into position as
   the section scrolls into view. Triggered once by adding .is-revealed
   via IntersectionObserver (see main.js snippet).
   Direction: normally text-from-left / media-from-right; reversed when
   .split--media-first is present (each block's swap_columns field). */
.leftcontent-rightimage-wd .split__text,
.leftcontent-rightimage-wd .split__media,
.left_video_right_content .split__text,
.left_video_right_content .split__media,
.left_accordion_content_right_image_swap .split__text,
.left_accordion_content_right_image_swap .split__media {
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

/* Default order: text from the left, media from the right */
.leftcontent-rightimage-wd .split__text,
.left_video_right_content .split__text,
.left_accordion_content_right_image_swap .split__text {
  transform: translateX(-80px);
}

.leftcontent-rightimage-wd .split__media,
.left_video_right_content .split__media,
.left_accordion_content_right_image_swap .split__media {
  transform: translateX(80px);
}

/* Swapped order (media visually on the left): reverse it */
.leftcontent-rightimage-wd .split.split--media-first .split__text,
.left_video_right_content .split.split--media-first .split__text,
.left_accordion_content_right_image_swap .split.split--media-first .split__text {
  transform: translateX(80px);
}

.leftcontent-rightimage-wd .split.split--media-first .split__media,
.left_video_right_content .split.split--media-first .split__media,
.left_accordion_content_right_image_swap .split.split--media-first .split__media {
  transform: translateX(-80px);
}

/* !important here is deliberate: the swapped-direction rules above are
   4 classes deep (more specific than this 3-class rule), so without it
   they'd permanently win and the swapped section's text/media would
   never actually settle into translateX(0) — appearing stuck/hidden
   even after .is-revealed is added. This guarantees the end state
   always wins, regardless of which directional rule set the start. */
.leftcontent-rightimage-wd.is-revealed .split__text,
.leftcontent-rightimage-wd.is-revealed .split__media,
.left_video_right_content.is-revealed .split__text,
.left_video_right_content.is-revealed .split__media,
.left_accordion_content_right_image_swap.is-revealed .split__text,
.left_accordion_content_right_image_swap.is-revealed .split__media {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Small stagger so the media trails the text slightly, rather than both
   landing in perfect lockstep. */
.leftcontent-rightimage-wd.is-revealed .split__media,
.left_video_right_content.is-revealed .split__media,
.left_accordion_content_right_image_swap.is-revealed .split__media {
  transition-delay: 0.15s;
}

/* Same entrance animation, applied to .left_ctacard_right_image — uses
   its own class names (.cta-card__body / .cta-card__media) rather than
   .split__text/.split__media, and has no swap_columns field, so there's
   no reversed-direction variant to handle: body always slides from the
   left, media always from the right. */
.left_ctacard_right_image .cta-card__body,
.left_ctacard_right_image .cta-card__media {
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

.left_ctacard_right_image .cta-card__body {
  transform: translateX(-80px);
}

.left_ctacard_right_image .cta-card__media {
  transform: translateX(80px);
}

.left_ctacard_right_image.is-revealed .cta-card__body,
.left_ctacard_right_image.is-revealed .cta-card__media {
  opacity: 1;
  transform: translateX(0);
}

.left_ctacard_right_image.is-revealed .cta-card__media {
  transition-delay: 0.15s;
}

/* .related-projects-section — slides up from the bottom as a single
   unit (not a left/right split like the others), fading in at the same
   time. Used by template-related-projects.php across multiple templates
   (single-sectors.php, single-projects.php, search.php, etc.). */
.related-projects-section {
  opacity: 0;
  transform: translateY(80px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

.related-projects-section.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Home Banner — on-load entrance animation
   Separate from the scroll-reveal system (leftcontent-rightimage-wd-
   animation.css/js) — this one plays once on page load, triggered by the
   hero media actually being ready (not a fixed guessed delay — see the
   companion JS file).

   .hero__media slides in from the right, .section (the card side) slides
   in from the left. .is-media-ready is added by JS once the video's
   loadeddata event fires (or the image's load event, or immediately if
   there's no media at all).
   ========================================================================== */

.home_banner .hero__media,
.home_banner .section {
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

.home_banner .hero__media {
  transform: translateX(80px);
}

.home_banner .section {
  transform: translateX(-80px);
}

.home_banner.is-media-ready .hero__media,
.home_banner.is-media-ready .section {
  opacity: 1;
  transform: translateX(0);
}

/* Vimeo background video inside .hero__media */
.hero__vimeo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__vimeo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  /* real size is set by JS so it covers like object-fit: cover */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  /* background only – no clicks, no Vimeo controls */
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__vimeo.is-ready iframe {
  opacity: 1;
}

/* Optional still poster shown until the video is ready */
.hero__vimeo .hero__vimeo-poster {
  transition: opacity 0.6s ease;
}

.hero__vimeo.is-ready .hero__vimeo-poster {
  opacity: 0;
}

/* ==========================================================================
   Sector Hero — on-load entrance animation (single-sectors.php)
   .sector-hero__grid slides in from the left, .sector-hero__media slides
   in from the right. Triggered by .sector-hero__media img actually
   loading (see companion JS), capped at a 4s max wait — not a flat
   guessed delay.
   ========================================================================== */

.sector-hero .sector-hero__grid,
.sector-hero .sector-hero__media {
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

.sector-hero .sector-hero__grid {
  transform: translateX(-80px);
}

.sector-hero .sector-hero__media {
  transform: translateX(80px);
}

.sector-hero.is-media-ready .sector-hero__grid,
.sector-hero.is-media-ready .sector-hero__media {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   PDP Hero — on-load entrance animation (single-projects.php)
   .pdp-hero__grid > div (the content column — no dedicated class of its
   own) slides in from the left, .pdp-hero__media slides in from the
   right. Triggered by .pdp-hero__media img actually loading (see
   companion JS), capped at a 4s max wait.
   ========================================================================== */

.pdp-hero .pdp-hero__grid>div:nth-child(2),
.pdp-hero .pdp-hero__grid>nav:first-child,
.pdp-hero .pdp-hero__media {
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

.pdp-hero .pdp-hero__grid>div:nth-child(2) {
  transform: translateX(-80px);
}

.pdp-hero .pdp-hero__grid>nav:first-child {
  transform: translateX(-80px);
}

.pdp-hero .pdp-hero__media {
  transform: translateX(80px);
}

.pdp-hero.is-media-ready .pdp-hero__grid>div:nth-child(2),
.pdp-hero.is-media-ready .pdp-hero__grid>nav:first-child,
.pdp-hero.is-media-ready .pdp-hero__media {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1024px) {
  .single-projects .pdp-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    width: calc(100% - 30px);
  }

  .single-projects .pdp-hero__grid>.pdp-hero__media {
    order: -1;
  }

  .single-projects .pdp-hero__media:before {
    width: 154px;
    height: 100px;
    left: 0px;
    top: -27px;
    background-size: contain;
  }
}

/* ==========================================================================
   Contact Page Card — on-load entrance animation (contact_page_card block)
   .contact-card (office details) slides in from the left, .contact-panel
   (form) slides in from the right. Triggered by .contact-bg-video
   actually loading (see companion JS), capped at a 4s max wait.
   ========================================================================== */

.contact_page_card .contact-card,
.contact_page_card .contact-panel {
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  will-change: transform, opacity;
}

.contact_page_card .contact-card {
  transform: translateX(-80px);
}

.contact_page_card .contact-panel {
  transform: translateX(80px);
}

.contact_page_card.is-media-ready .contact-card,
.contact_page_card.is-media-ready .contact-panel {
  opacity: 1;
  transform: translateX(0);
}


/* ADD: Play/Pause button on the home banner video.  (v2)
   Add to style.css, directly after the `.hero__media img, .hero__media video`
   rule (~line 722). If you pasted v1, REPLACE it with this version.
   Button is 48x48, 30px from the bottom and 60px from the right of
   .hero__media (already position:absolute, so it is the positioning parent). */

.hero__video-toggle {
  position: absolute;
  right: 60px;
  bottom: 30px;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

/* The generic `.hero__media img` rule makes images absolutely positioned and
   full-bleed; reset that for the two button icons. */
.hero__media .hero__video-toggle img {
  position: static;
  inset: auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.hero__video-toggle:hover {
  opacity: 0.85;
}

.hero__video-toggle:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Show ONE icon at a time. Playing (default): pause icon. Paused: play icon.
   Selectors are deliberately more specific than the img reset above, so
   display:none wins. */
.hero__media .hero__video-toggle .hero__video-toggle-icon--play {
  display: none;
}

.hero__media .hero__video-toggle[data-state="paused"] .hero__video-toggle-icon--pause {
  display: none;
}

.hero__media .hero__video-toggle[data-state="paused"] .hero__video-toggle-icon--play {
  display: block;
}

/* CLICK FIX: the hero text layer (.section, z-index:1) spans the whole
   banner and sits above the video, so it was swallowing clicks meant for
   the button. Let clicks pass through the layer, and turn them back on for
   the actual card (heading, text and CTA buttons). */
.home_banner .section {
  pointer-events: none;
}

.home_banner .hero__card {
  pointer-events: auto;
}

@media (max-width: 1200px) {
  .hero__video-toggle {
    bottom: unset;
    top: 100px;
    right: 15px;
  }
}

@media (max-width: 1023px) {
  .hero__video-toggle {
    right: 30px;
  }
}


/* Related Projects looping carousel — ADD after the .related__* rules in style.css
   (e.g. right after the @media (max-width: 767px) block of section 24). */

/* Controls reuse .pdp-gallery__controls / __arrow / __dot styling.
   The gallery pushes its last child to the right edge; keep ours left-aligned. */
.related__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.related__controls> :last-child {
  margin-left: 0;
}

.related__controls[hidden] {
  display: none;
}

/* Used by JS for the invisible "jump back" so scroll-snap doesn't fight it */
.related__track.is-jumping,
.related__track.is-animating {
  scroll-snap-type: none;
}

/* Dots can be many; allow wrapping on narrow screens */
.related__controls .pdp-gallery__dots {
  flex-wrap: wrap;
}


/* ==========================================================================
   Parallax Gallery — standalone component
   Three columns of square images. Outer columns move up, centre column
   moves down as the page scrolls. Requires js/parallax-gallery.js + jQuery.

   Customise per instance with CSS variables, e.g.
     <div class="gallery" data-parallax-gallery style="--gallery-height: 480px">
   ========================================================================== */

.gallery {
  /* ---- Settings (override on any .gallery) ---- */
  --gallery-height: clamp(300px, 38.9vw, 600px);
  /* visible window height     */
  --gallery-gap: 12px;
  /* space between images     */
  --gallery-radius: 20px;
  /* image corner radius      */
  --gallery-outer-offset: -144px;
  /* start position, outer    */
  --gallery-center-offset: -280px;
  /* start position, centre   */
  --gallery-fade-color: #ffffff;
  /* match section background */
  --gallery-fade-height: clamp(80px, 10vw, 140px);

  position: relative;
  flex: 1 1 0%;
  /* sits nicely as one half of a flex row */
  min-width: 0;
  width: 100%;
  height: var(--gallery-height);
  overflow: hidden;
}

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

.gallery__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gallery-gap);
  height: 100%;
}

.gallery__col {
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
  will-change: transform;
}

.gallery__col--outer {
  margin-top: var(--gallery-outer-offset);
}

.gallery__col--center {
  margin-top: var(--gallery-center-offset);
}

.gallery__item {
  width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--gallery-radius);
}

.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Soft top/bottom fade (on by default) ----
   Add .gallery--no-fade to turn it off. */
.gallery::before,
.gallery::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--gallery-fade-height);
  pointer-events: none;
}

.gallery::before {
  top: 0;
  background: linear-gradient(to bottom, var(--gallery-fade-color) 40%, transparent);
}

.gallery::after {
  bottom: 0;
  background: linear-gradient(to top, var(--gallery-fade-color) 40%, transparent);
}

.gallery--no-fade::before,
.gallery--no-fade::after {
  display: none;
}

@media (max-width: 1024px) {
  .gallery {
    height: auto;
  }
}


/* ---- Scrub section: the tall scroll region (spec: 600vh) ---------- */
.lfd-scrub {
  position: relative;
  /* JS sets --lfd-scrub-height per breakpoint; 600vh is the spec default */
  /* height: var(--lfd-scrub-height, 600vh); */
}

/* ---- Sticky container: video stays fixed while the page scrolls ---- */
.lfd-scrub__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* avoids mobile URL-bar jump where supported */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lfd-scrub__media {
  position: relative;
  width: 100%;
  height: 100%;
}

.lfd-scrub__video,
.lfd-scrub__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* change to `contain` if the approved design letterboxes */
}

/* Video stays hidden until it can seek; poster sits on top until then */
.lfd-scrub__video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lfd-scrub__poster {
  z-index: 1;
  transition: opacity 0.4s ease;
}

.lfd-scrub.is-ready .lfd-scrub__video {
  opacity: 1;
}

.lfd-scrub.is-ready .lfd-scrub__poster {
  opacity: 0;
  pointer-events: none;
}

/* ---- Optional: progress indicator ---------------------------------- */
.lfd-scrub__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.lfd-scrub__progress-bar {
  height: 100%;
  background: var(--lfd-teal);
  transform-origin: left center;
  transform: scaleX(0);
  /* transform only → no layout thrash */
  will-change: transform;
}

/* ---- Optional: scroll hint ----------------------------------------- */
.lfd-scrub__hint {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--text-primary);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
}

.lfd-scrub__hint::after {
  content: "";
  width: 1px;
  height: 28px;
  background: currentColor;
  animation: lfd-hint-line 1.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes lfd-hint-line {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }

  60% {
    transform: scaleY(1);
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* Screen-reader-only text equivalent (spec: Screen Reader Considerations) */
.lfd-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Static fallback (reduced motion / mobile poster / JS failure) -- */
.lfd-scrub.is-static {
  height: auto;
}

.lfd-scrub.is-static .lfd-scrub__sticky {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  /* match your video's aspect ratio */
}

.lfd-scrub.is-static .lfd-scrub__progress,
.lfd-scrub.is-static .lfd-scrub__hint {
  display: none;
}

/* ---- Demo-only surrounding content (remove in production) ---------- */
.demo-block {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}

.demo-block h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0 0 1rem;
}

@media (max-width: 1023px) {
  .sitemap__column nav.footer__links-column:last-child {
    text-align: left;
    align-items: start;
  }
}

@media (max-width: 767px) {
  .capability--alt>span {
    white-space: unset;
    line-height: 24px;
    width: 100%;
    padding: 0px 20px;
  }
}

@media (max-width: 1440px) {
  .pdp-gallery-section {
    overflow-x: hidden;
  }

  .sector-hero {
    overflow-x: hidden;
  }

  .section-block {
    overflow-x: hidden;
  }

  .transparent-overlap-border-radius {
    overflow-x: visible;
  }

}

@media (min-width: 1025px) and (max-width: 1440px) {
  .pdp-hero {
    padding: var(--spacing-5xl) 0 var(--spacing-2xl);
  }


  .pdp-hero__media:before {
    background-size: contain;
    width: 150px;
    height: 98px;
  }

  .pdp-hero__title {
    font-size: var(--h3-size);
    line-height: var(--h3-line);
  }

}

@media (min-width: 1025px) and (max-width: 1300px) {
  .pdp-hero__title {
    font-size: var(--h4-size);
    line-height: var(--h4-line);
  }

  .pdp-hero__media:before {
    background-size: contain;
    width: 150px;
    height: 98px;
  }
}

.home_banner.page_template_v2 .section {
  padding-bottom: 0px;
}


.home_banner.page_template_v2 .hero__title {
  font-size: var(--h1-project-size);
  line-height: var(--h1-project-line);
}

.home_banner.page_template_v2 .hero__card {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 873px;
  gap: var(--spacing-sm);
  border-radius: 0 var(--radius-xxl) 0 0;
}

.home_banner.page_template_v2 .hero__card> :first-child {
  flex: 1;
}

.home_banner.page_template_v2 .hero__card> :last-child {
  flex: 0 0 150px;
  margin-top: auto;
}

.home_banner.page_template_v2 .button-group {
  display: block;
  flex-wrap: unset;
  gap: unset;

}

.home_banner.page_template_v2 .hero__media {
  position: relative;
  right: 0px;
  width: 100%;
  left: 0px;
  height: 100dvh;
}

.home_banner.page_template_v2 .section {
  padding-top: 0px;
  min-height: unset;
}

.home_banner.page_template_v2 .section .layout {
  padding-top: 0px;
  min-height: unset;
}

.home_banner.page_template_v2 .section .layout__column--spacer {
  padding-top: 0px;
  min-height: unset;
}

.home_banner.page_template_v2 .hero__card svg {
  position: absolute;
  z-index: 15;
  width: var(--radius-xxl);
  height: var(--radius-xxl);
  bottom: -1px;
  left: 0px;
  fill: #ffffff;
  content: ' ';
}

.home_banner.page_template_v2 .hero__card> :last-child .button {
  position: absolute;
  bottom: calc(var(--spacing-xl) + 10px);
  right: var(--spacing-xl);
}

.home_banner.page_template_v2 .button-group .button {
  width: 170px;
}

.scroll-based-video-panel .contact-bg-video {
  max-width: 1130px;
  margin: 0px auto;
}

.transparent-overlap-border-radius .page-hero-scooped-border-radius svg {
  width: 100%;
  height: 100%;
  top: 0px;
  position: relative;
}

@media (max-width: 1023px) {
  .home_banner.page_template_v2.page-body {
    padding: 0;
  }

  .home_banner.page_template_v2 .button-group .button {
    width: auto;
  }

  .scroll-based-video-panel .section-block {
    padding: 0px;
  }

  .transparent-overlap-border-radius .page-hero-scooped-border-radius svg {
    top: -5px;
    position: relative;
  }
}

@media (max-width: 850px) {
  .home_banner.page_template_v2 .hero__title {
    font-size: var(--h2-project-size);
    line-height: var(--h2-project-line);
  }
}

@media (max-width: 780px) {
  .home_banner.page_template_v2 .hero__title {
    font-size: var(--h2-size);
    line-height: var(--h2-line);
  }
}

@media (max-width: 600px) {
  .home_banner.page_template_v2 .hero__title {
    font-size: var(--h3-size);
    line-height: var(--h3-line);
  }
}

@media (max-width: 510px) {
  .home_banner.page_template_v2 .hero__title {
    font-size: var(--h5-size);
    line-height: var(--h5-line);
  }
}

@media (max-width: 767px) {
  img.expand-icon {
    left: unset;
    right: var(--spacing-3xl);
  }
}

/* ==========================================================================
   Reduced motion — grouped here at the end so the whole block can be
   commented out / removed in one place to temporarily disable it,
   rather than hunting through each section above individually.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .leftcontent-rightimage-wd .split__text,
  .leftcontent-rightimage-wd .split__media,
  .left_video_right_content .split__text,
  .left_video_right_content .split__media,
  .left_accordion_content_right_image_swap .split__text,
  .left_accordion_content_right_image_swap .split__media,
  .left_ctacard_right_image .cta-card__body,
  .left_ctacard_right_image .cta-card__media,
  .related-projects-section {
    transition: none;
    transform: none;
    opacity: 1;
  }
} 

@media (prefers-reduced-motion: reduce) {
  .home_banner .hero__media,
  .home_banner .section {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sector-hero .sector-hero__grid,
  .sector-hero .sector-hero__media {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-hero .pdp-hero__grid > div:nth-child(2),
  .pdp-hero .pdp-hero__grid > nav:first-child,
  .pdp-hero .pdp-hero__media {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact_page_card .contact-card,
  .contact_page_card .contact-panel {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lfd-scrub { height: auto; }
  .lfd-scrub__sticky { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .lfd-scrub__video { display: none; }
  .lfd-scrub__poster { opacity: 1 !important; }
  .lfd-scrub__progress,
  .lfd-scrub__hint { display: none; }
  .lfd-scrub__hint::after { animation: none; }
}