@charset "UTF-8";
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * DESIGN TOKENS
 * ==========================================
 *
 * Purpose:
 * Shared spacing and content-width scale so
 * sections use a consistent vertical rhythm
 * and reading measure instead of one-off
 * pixel/rem values.
 *
 * Usage:
 * @use '../variables' as v;
 * margin-bottom: v.$space-md;
 */
/**
 * Spacing scale.
 * Matches the rem values already in use across
 * the theme's components (buttons, sections, etc).
 */
/**
 * Content-width (reading measure) scale.
 * Narrow widths keep body copy legible; wide
 * widths give large headings room before wrapping.
 */
/**
 * ==========================================
 * COMPONENTS
 * ==========================================
 */
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
:root {
  --mobile-nav-width: 320px;
}

/**
 * ==========================================
 * SITE HEADER
 * ==========================================
 *
 * Purpose:
 * Main website navigation.
 *
 * Package 6G.1 (ENH-CLIENT-004A) polish: replaced the two-stop
 * white gradient background with a flat white
 * ($wpstarter-color-white) — this package's brief explicitly
 * forbids introducing gradients on the header, and a gradient
 * this subtle (#ffffff → #fcfcfc) had no real visual purpose.
 * The hardcoded #ececec border color is now the equivalent,
 * already-existing $wpstarter-color-neutral-200 token (same
 * value, no visual change) per this package's "reuse existing
 * tokens" rule. Sticky positioning (`position: sticky`) already
 * existed before this package and is unchanged — audited and
 * confirmed there is no scroll-triggered "shrink" state to
 * preserve (no JS toggles a scrolled class), so nothing dynamic
 * needed refining here.
 */
.site-header {
  background: #ffffff;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #ececec;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 1100;
  height: auto;
}

/**
 * Main header container.
 *
 * Package 6G.1: removed `height: var(--mobile-header-height)` —
 * that custom property was never defined anywhere (no :root
 * declaration, no JS setProperty() call), so the declaration was
 * inert dead code; the container has always actually sized itself
 * from its own padding, which this change makes explicit rather
 * than implicit.
 */
.site-header__container {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 1.5rem;
}

/**
 * Navigation links
 */
.site-navigation a,
.mobile-navigation a {
  text-decoration: none;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  position: relative;
  padding-bottom: 14px;
  transition: color 0.3s ease;
}

/**
 * Animated underline.
 *
 * Package 6G.1 fix: this rule previously existed only as
 * `.mobile-navigation a::after` — the desktop selector
 * (`.site-navigation a::after`) was never declared with a
 * `content` value, so the pseudo-element was never actually
 * created on desktop and the existing `:hover::after { width:
 * 28px; }` rule below had no visible effect there. Both nav
 * contexts now share one base declaration.
 */
.site-navigation a::after,
.mobile-navigation a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #d30000;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/**
 * Hover state — text stays navy; only the underline appears.
 */
.site-navigation a:hover,
.mobile-navigation a:hover {
  background: #fafafa;
}

.site-navigation a:hover::after,
.mobile-navigation a:hover::after {
  width: 28px;
}

/**
 * Keyboard focus — same underline treatment as hover, plus a
 * visible focus ring so keyboard users have a non-color
 * indicator (`:focus-visible` only shows for keyboard/assistive
 * navigation, not mouse clicks, matching native browser
 * behavior).
 */
.site-navigation a:focus-visible,
.mobile-navigation a:focus-visible {
  outline: 2px solid #d30000;
  outline-offset: 4px;
}

.site-navigation a:focus-visible::after,
.mobile-navigation a:focus-visible::after {
  width: 28px;
}

/**
 * Navigation wrapper.
 */
.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-branding {
  flex: 1;
}

/**
 * ==========================================
 * ACTIVE NAVIGATION
 * ==========================================
 *
 * Package 6G.1: the current/active page no longer turns the menu
 * label red — text stays navy at all times; only the underline
 * communicates hover/current state.
 *
 * Package 6G.2 (ENH-CLIENT-004B) split this into two mutually
 * exclusive rule sets, scoped by `body.home` (WordPress core's own
 * class for `is_front_page()` — confirmed via
 * wp-includes/post-template.php, added by header.php's existing
 * `body_class()` call, zero markup change needed):
 *
 * - On the Homepage, `assets/js/navigation.js`'s scroll-spy
 *   (`.is-active`) is the SOLE visual authority. WordPress's own
 *   current-menu-item family is deliberately excluded here — it
 *   was previously honored on every page including the Homepage,
 *   which is exactly why "Home" (always `current-menu-item` on the
 *   front page) and, say, "Services" (`.is-active` once its
 *   section scrolls into view) could both show the persistent
 *   underline at once. Scoping WP's classes out of the Homepage
 *   context removes that conflict at the root.
 * - On every internal page, WordPress's own `current-menu-item`
 *   family (`wp_nav_menu()`'s own server-rendered knowledge of the
 *   current URL/queried object — see
 *   theme/navigation/public-navigation.php for the resolver that
 *   makes this reliable for Services/Projects/About/Contact) is
 *   the sole visual authority. `.is-active` is excluded here too,
 *   even though `navigation.js` itself is now also guarded to
 *   never run outside `body.home` (defense in depth — a page
 *   reusing a Homepage section partial, e.g. page-about.php's
 *   closing CTA, `id="cta"`, can never accidentally light up a nav
 *   item this way either).
 *
 * `aria-current="page"` remains exactly what WordPress core
 * outputs and is never touched by this rule — on the Homepage, a
 * screen reader still correctly announces "Home, current page"
 * even while the Services section's underline is the one visually
 * showing; the brief's own Part 5 explicitly accepts this
 * visual/semantic divergence as long as the page otherwise remains
 * understandable, and no other page in the sequence has more than
 * one truly current WordPress-recognized destination at a time.
 * Ancestor/parent classes are included for any future nested
 * submenu; this site's current menu has none.
 */
body:not(.home) .site-navigation .current-menu-item > a,
body:not(.home) .site-navigation .current_page_item > a,
body:not(.home) .site-navigation .current-menu-parent > a,
body:not(.home) .site-navigation .current-menu-ancestor > a,
body:not(.home) .site-navigation .current_page_parent > a,
body:not(.home) .site-navigation .current_page_ancestor > a {
  color: #111827;
}

body:not(.home) .site-navigation .current-menu-item > a::after,
body:not(.home) .site-navigation .current_page_item > a::after,
body:not(.home) .site-navigation .current-menu-parent > a::after,
body:not(.home) .site-navigation .current-menu-ancestor > a::after,
body:not(.home) .site-navigation .current_page_parent > a::after,
body:not(.home) .site-navigation .current_page_ancestor > a::after {
  width: 28px;
}

body.home .site-navigation a.is-active {
  color: #111827;
}

body.home .site-navigation a.is-active::after {
  width: 28px;
}

/**
 * ==========================================
 * DESKTOP NAVIGATION
 * ==========================================
 */
.site-navigation--desktop {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-navigation--desktop ul {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.menu-open {
  overflow: hidden;
}

/**
 * ==========================================
 * BRANDING
 * ==========================================
 */
.site-branding__link {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-decoration: none;
}

/**
 * ==========================================
 * COMPANY LOGO
 * ==========================================
 *
 * Purpose:
 * Display company logo image.
 *
 * Future:
 * WordPress Custom Logo support.
 */
.site-branding__logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/**
 * Text wrapper.
 */
.site-branding__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}

/**
 * Company Name.
 */
.site-branding__title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  color: #0f172a;
}

/**
 * Subtitle.
 */
.site-branding__subtitle {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #4b5563;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.mobile-menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #111827;
  margin: 6px 0;
  border-radius: 999px;
  transition: transform 0.3s ease, opacity 0.25s ease, background 0.3s ease;
}

/**
 * ==========================================
 * MOBILE MENU OPEN
 * ==========================================
 */
.mobile-menu-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-navigation {
  display: none;
}

/**
 * ==========================================
 * MOBILE/TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: block;
  }
  .site-navigation--desktop {
    display: none;
  }
  .site-header__container {
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: 1.5rem;
  }
  .site-branding {
    flex: 1;
    min-width: 0;
  }
  .site-branding__link {
    gap: 0.85rem;
    align-items: center;
  }
  .site-branding__title {
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: 2px;
  }
  .site-branding__subtitle {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    line-height: 1;
  }
  /**
  * ==========================================
  * MOBILE DRAWER
  * ==========================================
  */
  .mobile-navigation {
    display: block;
    position: fixed;
    left: 0;
    width: 100%;
    /**
     * The sticky .site-header sits above this panel
     * (z-index: 1100 vs. 1090), so a hardcoded top:0 (or any
     * other fixed guess) put the panel's first menu item
     * directly underneath it on some pages — hidden, not just
     * visually crowded. The header's real rendered height
     * varies (e.g. the WordPress admin toolbar adds margin
     * above it when logged in), so these are just a resting
     * default for before the panel first opens; the real
     * values are computed from the header's actual on-screen
     * position by mobile-menu.js every time the panel opens
     * or the window resizes while it's open.
     */
    top: 0;
    height: 100vh;
    background: #fcfcfc;
    overflow-y: auto;
    z-index: 1090;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    padding-top: 1rem;
    border-top: 1px solid #ececec;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-12px);
  }
  .mobile-navigation.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .mobile-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mobile-navigation li {
    width: 100%;
  }
  .mobile-navigation a {
    position: relative;
    display: block;
    padding: 1rem 1.75rem 1rem 3rem;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    border-bottom: 1px solid #f2f2f2;
  }
  .mobile-navigation a::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: #d30000;
    border-radius: 10px;
    transition: height 0.25s ease;
  }
  .mobile-navigation a::after {
    display: none;
  }
  /**
   * Package 6G.1: text stays navy (#111827, the link's own
   * default color) for the current mobile page too — only the
   * left accent bar (::before) and bold weight indicate it,
   * matching this package's "consistent navy text and red
   * accent" requirement. The accent bar is itself the
   * touch-friendly equivalent of the desktop underline — it
   * remains visible on mobile without requiring :hover, which
   * touch devices don't reliably support.
   *
   * Package 6G.2: split into the same `body.home` /
   * `body:not(.home)` mutually-exclusive authorities as the
   * desktop rules above — see that block's full explanation. The
   * mobile menu is the same DOM tree at every breakpoint (only
   * hidden/shown via CSS, not re-rendered), so it needs the exact
   * same split to avoid the same Homepage double-active defect.
   */
  body:not(.home) .mobile-navigation .current-menu-item > a,
  body:not(.home) .mobile-navigation .current_page_item > a,
  body:not(.home) .mobile-navigation .current-menu-parent > a,
  body:not(.home) .mobile-navigation .current-menu-ancestor > a,
  body:not(.home) .mobile-navigation .current_page_parent > a,
  body:not(.home) .mobile-navigation .current_page_ancestor > a {
    color: #111827;
    font-weight: 800;
  }
  body:not(.home) .mobile-navigation .current-menu-item > a::before,
  body:not(.home) .mobile-navigation .current_page_item > a::before,
  body:not(.home) .mobile-navigation .current-menu-parent > a::before,
  body:not(.home) .mobile-navigation .current-menu-ancestor > a::before,
  body:not(.home) .mobile-navigation .current_page_parent > a::before,
  body:not(.home) .mobile-navigation .current_page_ancestor > a::before {
    height: 32px;
  }
  body.home .mobile-navigation a.is-active {
    color: #111827;
    font-weight: 800;
  }
  body.home .mobile-navigation a.is-active::before {
    height: 32px;
  }
  .mobile-navigation a:focus-visible::before {
    height: 32px;
  }
  .site-navigation-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 1080;
  }
  .site-navigation-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
}
/**
 * ==========================================
 * REDUCED MOTION
 * ==========================================
 *
 * Package 6G.1: the underline/accent-bar grow animation and the
 * mobile drawer's slide/fade are non-essential motion — removed
 * for users who have requested reduced motion at the OS level.
 * The underline/bar still appears at its final state (`width`/
 * `height` themselves are unaffected, only the animated
 * transition is removed), so current-page/hover/focus indication
 * is not lost, only its animation.
 */
@media (prefers-reduced-motion: reduce) {
  .site-navigation a,
  .mobile-navigation a,
  .site-navigation a::after,
  .mobile-navigation a::after,
  .mobile-navigation a::before,
  .mobile-navigation,
  .site-navigation-overlay {
    transition: none;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * PUBLIC PAGE LAYOUT
 * ==========================================
 *
 * Purpose:
 * Shared, reusable layout foundation for public pages that
 * are not the Homepage (archive.php, single.php, page.php,
 * Package 5B), and for the module-specific templates that
 * will extend them (archive-service.php, single-project.php,
 * etc., Phase 5C onward). Contains no module-specific
 * styling — only the generic structural classes every public
 * page shares: .content-container, .page-header,
 * .archive-header, .empty-state, and WordPress core's own
 * pagination markup.
 *
 * Boilerplate Candidate:
 * YES
 */
/**
 * ==========================================
 * CONTENT CONTAINER
 * ==========================================
 */
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/**
 * ==========================================
 * PAGE / ARCHIVE HEADER
 * ==========================================
 *
 * Package 6B (ENH-CLIENT-003): .archive-header gained an eyebrow,
 * a scoped title typography rule, and a decorative accent line —
 * each added as its own selector below, never by editing the
 * .page-header/.archive-header compound rules above, so About's
 * and Contact's .page-header (out of scope for this package) is
 * completely unaffected.
 */
.page-header,
.archive-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.page-header__title,
.archive-header__title {
  margin-bottom: 1rem;
}

/**
 * Package 6B — small uppercase eyebrow above the archive title,
 * matching the established eyebrow pattern already used elsewhere
 * on the site (e.g. .project-detail__eyebrow,
 * .project-showcase-main__eyebrow): FES accent color, restrained
 * letter-spacing, no filled background, no pill.
 */
.archive-header__eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: #d30000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/**
 * Package 6B — the archive title previously relied on the
 * browser's default <h1> styling (no theme typography was ever
 * applied to it). Scoped to .archive-header__title only — not
 * merged into the .page-header__title compound rule above — so
 * About's/Contact's page titles are unaffected.
 */
.archive-header__title {
  color: #0f172a;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.archive-header__description {
  max-width: 620px;
  margin: 0 auto;
  color: #666666;
  font-size: 1.125rem;
  line-height: 1.7;
}

/**
 * Package 6B — short, centered, decorative accent line beneath
 * the description, replacing the section's previous lack of any
 * closing visual element (no full-width divider existed to
 * remove). aria-hidden since it carries no information.
 */
.archive-header__accent {
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.5rem auto 0;
  background: #c00000;
  border-radius: 999px;
}

/**
 * ==========================================
 * EMPTY STATE
 * ==========================================
 */
.empty-state {
  text-align: center;
  padding: 3rem 0;
  color: #666666;
}

/**
 * ==========================================
 * PAGINATION
 * ==========================================
 *
 * Targets the markup WordPress core's own
 * the_posts_pagination() already outputs
 * (.pagination > .nav-links > .page-numbers) —
 * no custom pagination markup is introduced.
 */
.pagination {
  margin-top: 3rem;
  text-align: center;
}

.pagination .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 1rem;
  border-radius: 8px;
  border: 1px solid #ececec;
  color: #0f172a;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.pagination .page-numbers.current {
  background: #c00000;
  border-color: #c00000;
  color: #ffffff;
}

.pagination .page-numbers:not(.current):hover {
  border-color: #c00000;
}

/**
 * Package 6B (ENH-CLIENT-003) — visited numbered/prev/next links
 * must not fall back to the browser's default purple; the ellipsis
 * is excluded since it's never a link (WordPress core outputs it
 * as a plain, non-interactive <span class="page-numbers dots">).
 */
.pagination .page-numbers:not(.dots):visited {
  color: #0f172a;
}

.pagination .page-numbers.current:visited {
  color: #ffffff;
}

/**
 * Package 6B — visible keyboard focus, matching the
 * :focus-visible convention already used elsewhere in this theme
 * (e.g. .project-detail__thumbnail).
 */
.pagination .page-numbers:focus-visible {
  outline: 2px solid #c00000;
  outline-offset: 2px;
}

/**
 * Package 6B — the ellipsis WordPress core inserts between
 * non-adjacent page numbers is informational only, never a
 * control: strip the button-box treatment every other
 * .page-numbers element gets, so it reads as a visual separator,
 * not another clickable page.
 */
.pagination .page-numbers.dots {
  min-width: auto;
  height: auto;
  padding: 0 0.5rem;
  border: none;
  background: none;
  color: #666666;
  cursor: default;
}

.pagination .page-numbers.dots:hover {
  border: none;
}

/**
 * Package 6B — Previous/Next carry directional text ("← Previous"
 * / "Next →", set in template-parts/layout/pagination.php), which
 * needs more horizontal room than a compact number box; widened
 * padding only, same border/radius/hover/focus treatment as every
 * other pagination link.
 */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  padding: 0 1.5rem;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .archive-header__title {
    font-size: 2rem;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .content-container {
    padding: 2rem 1rem;
  }
  .archive-header__title {
    font-size: 1.5rem;
  }
  .archive-header__description {
    font-size: 1rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * HERO SECTION
 * ==========================================
 */
/**
 * min-height is deliberately taller than the "empty" Hero looks
 * on desktop. .hero__slide is position:absolute/inset:0, so its
 * box is always exactly this height — content longer than that
 * gets clipped by overflow:hidden below rather than growing the
 * section (a single crossfading/sliding carousel can't size to
 * its active slide's content without JS). 780px is sized to fit
 * the CMS's recommended maximums (2-3 line Main Heading, 180-220
 * character Description, both CTA buttons) with room to spare
 * before the pagination's reserved zone (see .hero__indicators).
 */
.hero {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  color: #ffffff;
}

/**
 * The static fallback (no published Hero Slides) renders
 * .hero__content directly inside .hero, without the
 * .hero__slide wrapper the carousel variant uses. It needs
 * the same vertical flex positioning the slide provides.
 */
.hero:not([data-hero-carousel]) {
  display: flex;
  align-items: flex-start;
  padding: 4rem 0;
}

/**
 * Slides stack on top of one another and slide horizontally
 * in/out of view (see .hero__slide below). Layout, spacing,
 * and background rules carried over unchanged from the
 * single-slide .hero.
 */
.hero__slides {
  position: relative;
  height: 100%;
  min-height: inherit;
  /**
   * Package 5I: hints to the browser that only vertical
   * panning is a native touch gesture here — horizontal
   * swipe is handled by hero-carousel.js. Every touch
   * listener there is passive (no preventDefault), so this
   * is a performance/clarity hint, not what actually keeps
   * vertical scrolling working.
   */
  touch-action: pan-y;
}

/**
 * Slides sit edge-to-edge and are shifted fully off-canvas via
 * transform. JS (hero-carousel.js) sets the precise per-slide
 * translateX() on every transition so multi-slide carousels
 * always move in the shortest direction, including wrap-around;
 * this base rule is just the pre-JS/no-JS resting position.
 *
 * visibility is intentionally undelayed on the way in and
 * delayed on the way out, so the outgoing slide stays visible
 * (and out of the tab order only once) for the full slide-out
 * instead of disappearing the instant it loses --active.
 */
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 4rem 0;
  background-size: cover;
  background-position: center;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.6s;
}

.hero__slide--active {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/**
 * ==========================================
 * CAROUSEL CONTROLS
 * ==========================================
 */
.hero__control {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  opacity: 0.8;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.25s ease, opacity 0.25s ease;
}

.hero__control:hover,
.hero__control:focus-visible {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.hero__control--prev {
  left: 1.5rem;
}

.hero__control--next {
  right: 1.5rem;
}

/**
 * ==========================================
 * CAROUSEL INDICATORS
 * ==========================================
 */
/**
 * The Features section directly below the Hero pulls itself
 * up with a negative top margin (.features__container) so its
 * cards float over the bottom of the Hero. bottom here has to
 * clear that overlap (130px desktop/tablet, 50px mobile — see
 * _features.scss) plus a comfortable gap, otherwise the cards
 * render on top of the dots. This is a layout/spacing fix, not
 * a z-index fix — the dots get their own reserved space above
 * the overlap instead of just being stacked higher.
 */
.hero__indicators {
  position: absolute;
  left: 50%;
  bottom: calc(130px + 1.5rem);
  z-index: 2;
  display: flex;
  gap: 0.6rem;
  transform: translateX(-50%);
}

.hero__indicator {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.hero__indicator--active {
  background: #ffffff;
}

/**
 * Shared content container. Mirrors the max-width/margin/padding
 * pattern used by every other section (.services__container,
 * .about__container, etc.) so the hero content aligns with the
 * rest of the page instead of hugging the viewport edge.
 */
.hero__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero__content {
  /**
   * Wider than the description's own measure so a
   * multi-word headline has room before wrapping,
   * while .hero__description still narrows itself
   * to a legible line length below.
   */
  max-width: 720px;
  padding-top: 5rem;
}

.hero__subtitle {
  display: inline-block;
  /**
   * Tight gap: the eyebrow label reads as directly
   * attached to the heading that follows it.
   */
  margin-bottom: 1rem;
  color: #ff4d4d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/**
 * Main hero heading.
 */
.hero__title {
  /**
   * Larger gap than the eyebrow uses: the heading is
   * the dominant element, so the next content group
   * (description) needs clearer separation from it.
   */
  margin-bottom: 2rem;
  /**
   * White for readability.
   */
  color: #ffffff;
  /**
   * Large desktop heading.
   */
  font-size: 4rem;
  line-height: 1.1;
  max-width: 900px;
}

.hero__description {
  /**
   * Narrower than .hero__content so body copy keeps
   * an optimal reading measure (~60-75 characters)
   * even though the heading above it runs wider.
   */
  max-width: 560px;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-direction: row;
  /**
   * No tablet-specific override needed: when two buttons don't
   * both fit on one line at a given width, they wrap to their
   * own line naturally instead of overflowing or forcing a
   * breakpoint-specific rule (requirement: side-by-side on
   * tablet only "if sufficient space exists").
   */
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 1.75rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
}

.btn--primary {
  background: #c00000;
  color: #ffffff;
}

.btn--secondary {
  border: 2px solid #ffffff;
  color: #ffffff;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 *
 * Refined independently from mobile: a shorter box, a tighter
 * (but still generous) top offset, a narrower content measure
 * so text doesn't run edge-to-edge on medium screens, and a
 * closer vertical rhythm between elements.
 */
@media (max-width: 1024px) {
  .hero__title {
    font-size: 3.2rem;
  }
  /**
   * Shorter than desktop's 780px (a landscape tablet has less
   * room to spare), but still sized to fit the CMS's recommended
   * content maximums without clipping or crowding the pagination
   * dots — see the min-height comment on the base .hero rule.
   */
  .hero {
    min-height: 700px;
  }
  /**
   * .hero__slide's padding and .hero:not([data-hero-carousel])'s
   * padding must be overridden together — the fallback selector
   * carries higher specificity than a plain ".hero" override, so
   * targeting it directly here is required, not optional.
   *
   * padding-bottom is set to the exact same value as
   * .hero__indicators' bottom offset below (not just "enough" of
   * a gap) so the pagination has a real, structurally-reserved
   * area content can never render into — flex children can't
   * occupy their container's own padding, regardless of how tall
   * the CMS content grows. Content only risks the section's
   * outer overflow:hidden in a genuinely unreasonable case, never
   * the pagination's own space.
   */
  .hero__slide,
  .hero:not([data-hero-carousel]) {
    padding-top: 3rem;
    padding-bottom: calc(130px + 1.5rem);
  }
  .hero__content {
    /**
     * Narrower than desktop's 720px measure so the heading
     * doesn't run nearly edge-to-edge on a ~768-1024px screen.
     */
    max-width: 560px;
    padding-top: 3rem;
  }
  .hero__title,
  .hero__description {
    margin-bottom: 1.5rem;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  /**
   * Taller than the previous 480/600px passes. Mobile has the
   * narrowest content column of any breakpoint, and that column
   * narrows further on small phones (iPhone SE/mini-class
   * widths, ~320-375px) — the CMS's recommended-maximum
   * Description (180-220 characters) can wrap to 5-6 lines
   * there, close to twice the desktop line count for the same
   * text. 660px carries enough margin to fit that worst case
   * (eyebrow + full-length heading + full-length description +
   * two stacked buttons) above the pagination's reserved zone —
   * see the min-height comment on the base .hero rule.
   */
  .hero {
    min-height: 660px;
  }
  /**
   * .hero:not([data-hero-carousel]) has higher specificity than
   * a plain ".hero" rule (see the TABLET block above), so it has
   * to be targeted directly here too, otherwise this padding is
   * silently ignored for the static-fallback Hero on mobile.
   *
   * padding-bottom matches .hero__indicators' bottom offset below
   * exactly, for the same reason as the TABLET block: a real,
   * structurally-reserved pagination area instead of a hopeful gap.
   */
  .hero__slide,
  .hero:not([data-hero-carousel]) {
    padding-top: 2rem;
    padding-bottom: calc(50px + 1rem);
  }
  .hero__title {
    font-size: 2.1rem;
    line-height: 1.08;
    /**
     * The eyebrow keeps its default space-sm gap above this
     * (still reads as "attached" to the heading). This margin
     * is the title -> description gap: kept deliberate rather
     * than squeezed, so the stack reads as balanced sections
     * instead of a cramped wall of text.
     */
    margin-bottom: 1.5rem;
  }
  .hero__description {
    /**
     * Full desktop value: reclaiming the wasted top padding
     * (see .hero__slide / .hero:not([data-hero-carousel]) and
     * .hero__content above) freed up enough room to keep this
     * gap generous instead of compressing it further.
     */
    margin-bottom: 2rem;
  }
  .hero__content {
    max-width: none;
    padding-top: 1.5rem;
  }
  .hero__actions {
    flex-direction: column;
    width: 100%;
  }
  /**
   * Full width per requirement, not the previous 90% — the
   * buttons should fill the content column edge to edge.
   */
  .btn {
    width: 100%;
  }
  .hero__control {
    width: 32px;
    height: 32px;
  }
  /**
   * The Features overlap shrinks to 50px on mobile (see
   * _features.scss's own mobile override), so the dots only
   * need to clear that smaller amount here.
   */
  .hero__indicators {
    bottom: calc(50px + 1rem);
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * WHY CHOOSE FES
 * ==========================================
 *
 * Purpose:
 * Build trust immediately after hero section.
 *
 * Boilerplate Candidate:
 * YES
 */
.features {
  /**
   * Section spacing.
   */
  padding: 4rem 2rem 1rem;
  background: #ffffff;
}

/**
 * Visually-hidden section title.
 *
 * The section has no visible heading (the "WHY CHOOSE FES" name
 * only exists as an HTML comment), which left the card <h3>s
 * jumping straight from the Hero's <h1> with no <h2> in between.
 * This label restores a correct heading order for assistive
 * tech without changing anything sighted users see.
 */
.features__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Cards container.
 */
.features__container {
  max-width: 1200px;
  margin: -130px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 10;
}

.feature-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-radius: 14px;
  /**
   * Package 6G.3 (ENH-CLIENT-004C): border + Foundation shadow
   * token (already the documented "features/services default
   * card shadow cluster") in place of the previous ad-hoc
   * rgba(0,0,0,*) value, matching the Service card treatment —
   * these two card types now share one consistent, restrained
   * elevation language.
   */
  border: 1px solid #ececec;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  border-color: #dbe3eb;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: #d30000;
  border-radius: 16px 16px 0 0;
}

.feature-card__icon {
  color: #d30000;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  margin: 0 0 0.75rem;
  color: #0f172a;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.feature-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.7;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .features__container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .features__container {
    grid-template-columns: 1fr;
    margin: -50px auto 0;
    gap: 1rem;
  }
  .feature-card {
    padding: 1.5rem;
  }
  .feature-card i {
    font-size: 1.5rem;
  }
  .feature-card h3 {
    font-size: 1.25rem;
  }
  .feature-card p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * SERVICES SECTION
 * ==========================================
 *
 * Purpose:
 * Showcase primary company services.
 *
 * Boilerplate Candidate:
 * YES
 *
 * Future:
 * Can become dynamic via ACF or CPT.
 */
.services {
  /**
   * Section spacing (Package 6G.3, ENH-CLIENT-004C, replacing the
   * previous one-off asymmetric 80px/120px values; compacted to
   * separate top/bottom tokens Package 6G.3.1, ENH-CLIENT-004D —
   * docs/DECISIONS.md).
   */
  padding-top: 96px;
  padding-bottom: 5rem;
  /**
   * Alternate background color (Package 6G.3 fix) — this file's
   * own comment already named the intent ("Alternate background
   * color"); the actual value was white, identical to the Hero/
   * page surface and to the Service cards below, leaving cards
   * with no section-level contrast to stand out against (the
   * confirmed defect this package's brief reported). Now the
   * neutral-50 muted surface — see docs/DECISIONS.md for the full
   * Homepage surface rhythm this section is one step of.
   */
  background: #fafafa;
  /**
   * Seperator
   */
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

@media (max-width: 1024px) {
  .services {
    padding-top: 72px;
    padding-bottom: 4rem;
  }
}
@media (max-width: 768px) {
  .services {
    padding-top: 56px;
    padding-bottom: 3rem;
  }
}
/**
 * Main content container.
 */
.services__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/**
 * Section heading area.
 */
.services__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

/**
 * Small label above title.
 */
.services__subtitle {
  display: inline-block;
  margin-bottom: 1rem;
  color: #c00000;
  font-weight: 700;
  letter-spacing: 2px;
}

/**
 * Main section title.
 */
.services__title {
  margin-bottom: 1rem;
  font-size: 2.75rem;
}

/**
 * Supporting description.
 */
.services__description {
  color: #666;
  line-height: 1.8;
}

/**
 * Services grid layout.
 */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/**
 * Individual service card.
 */
.service-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 14px;
  /**
   * Package 6G.3 (ENH-CLIENT-004C): border + Foundation shadow
   * token (already documented in _shadows.scss as this exact
   * "features/services default card shadow cluster") replace the
   * previous ad-hoc rgba(0,0,0,*) value — now the card reads
   * clearly against the section's own new muted background even
   * before the shadow renders.
   */
  border: 1px solid #ececec;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /**
  * Positioning context for accent bar.
  */
  position: relative;
  overflow: hidden;
}

/**
 * Top accent bar.
 */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #c00000;
}

/**
 * Card hover effect.
 */
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  border-color: #dbe3eb;
}

/**
 * Service title.
 */
.service-card h3 {
  margin: 0;
  color: #c00000;
  font-size: 1.15rem;
}

/**
 * Service description.
 */
.service-card p {
  margin: 0;
  color: #666;
  line-height: 1.7;
}

.service-card:hover .service-card__icon {
  background: #c00000;
  color: #ffffff;
}

/* ==========================================
   SERVICE CARD HEADER
========================================== */
.service-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ==========================================
   SERVICE CARD ICON
========================================== */
.service-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid rgba(192, 0, 0, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c00000;
  background: #ffffff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

/**
 * ==========================================
 * SERVICE CARD — IMAGE VARIANT
 * ==========================================
 *
 * Package 5D / D-021. Coexists with the Icon
 * variant above without modifying any of its
 * rules — reuses .service-card (background,
 * radius, shadow, hover) and .service-card__icon
 * (badge circle) as shared base classes, adding
 * only new, scoped rules below.
 */
.service-card--image::before {
  /* Suppress the Icon variant's top accent bar
     for this variant only — its own accent line
     lives on .service-card__image instead. */
  display: none;
}

.service-card__image-link {
  display: block;
}

.service-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin: -2rem -2rem 1.5rem;
  overflow: hidden;
  border-bottom: 3px solid #c00000;
  background: #f2f2f2;
}

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

.service-card__image--icon-fallback i,
.service-card__image--placeholder i {
  font-size: 2.5rem;
  color: #666666;
}

.service-card__image--icon-fallback i {
  color: #c00000;
}

.service-card__badge {
  position: relative;
  z-index: 1;
  margin: -3rem 0 1rem 0;
}

.service-card--image .service-card__content {
  display: block;
}

.service-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.service-card__title a {
  color: inherit;
  text-decoration: none;
}

.service-card__title a:hover {
  text-decoration: underline;
}

.service-card__description {
  margin: 0 0 1rem;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #d30000;
  font-weight: 700;
  text-decoration: none;
  transition: padding-left 0.25s ease;
  padding-top: 0.75rem;
}

.service-card--image:hover .service-card__link {
  padding-left: 0.5rem;
}

/**
 * ==========================================
 * SERVICES ARCHIVE (View All Services page)
 * ==========================================
 *
 * Package 5D. Same grid pattern as
 * .services__grid above — its own class since
 * the archive page has no .services__container
 * wrapper.
 */
.services-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/**
 * ==========================================
 * SERVICE DETAIL PAGE
 * ==========================================
 *
 * Package 5D. Redesigned and moved to its own file,
 * components/_service-detail.scss, in Package 6G (ENH-CLIENT-004) —
 * see that file for the current `.service-detail*` rules. Nothing
 * remains here to avoid dead/conflicting CSS against the new markup.
 */
/**
 * ==========================================
 * VIEW ALL SERVICES
 * ==========================================
 */
.services__actions {
  margin-top: 3.5rem;
  text-align: center;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services__actions {
    margin-top: 3rem;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .services {
    padding: 80px 1.25rem;
  }
  .services__title {
    font-size: 2rem;
    line-height: 1.2;
  }
  .services__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .services__description {
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .service-card {
    padding: 1.25rem;
  }
  .service-card__image {
    height: 160px;
    margin: -1.25rem -1.25rem 1.25rem;
  }
  .service-card__badge {
    margin: -2.5rem 0 0.75rem 0;
  }
  .services-archive__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .service-card__header {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .service-card__icon {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }
  .service-card h3 {
    font-size: 1rem;
  }
  .service-card p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .services__actions {
    margin-top: 2.5rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * SINGLE SERVICE PAGE
 * ==========================================
 *
 * Purpose (Package 6G, ENH-CLIENT-004):
 * Styles for the public Service Details page
 * (single-service.php / template-parts/services/service-detail.php).
 * Replaces the previous `.service-detail*` rules that lived
 * inside components/_services.scss (removed there in the same
 * package) — split into its own file, matching the precedent
 * components/_about-page.scss and components/_contact-page.scss
 * already established for a standalone public page distinct
 * from its Homepage section counterpart.
 *
 * Reuses the existing Public Page Layout foundation
 * (components/_public-layout.scss's .content-container) for the
 * page shell, and the sitewide eyebrow visual language already
 * established by .project-detail__eyebrow / .archive-header__eyebrow
 * (component-local, not a shared class, per this project's own
 * established convention of repeating the same values rather
 * than a premature shared abstraction).
 */
.service-detail {
  max-width: 860px;
  margin: 0 auto;
}

/**
 * ==========================================
 * HEADER
 * ==========================================
 */
.service-detail__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.service-detail__eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  color: #d30000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.service-detail__title {
  margin: 0 0 1rem;
  color: #0f172a;
  /**
   * Package 6G.3.1 (ENH-CLIENT-004D): now follows the CMS Heading
   * Font setting like every other public heading, instead of the
   * page-scoped $wpstarter-font-heading-serif accent Package 6G
   * introduced — Part 8's explicit "Service detail H1 follows
   * Heading Font" requirement.
   */
  font-family: var(--wpstarter-font-heading, Source Serif 4, Georgia, Times New Roman, Times, serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.service-detail__lead {
  margin: 0;
  color: #666666;
  font-size: 1.125rem;
  line-height: 1.8;
}

/**
 * ==========================================
 * MEDIA
 * ==========================================
 */
.service-detail__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
  margin-bottom: 4rem;
  border-radius: 18px;
  overflow: hidden;
  background: #f2f2f2;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

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

.service-detail__media--icon-fallback i,
.service-detail__media--placeholder i {
  font-size: 4.5rem;
  color: #666666;
}

.service-detail__media--icon-fallback i {
  color: #c00000;
}

/**
 * Small accent badge shown when a Service has BOTH a Cover
 * Image and an Icon — a purely visual enrichment of existing
 * data (Part 1's "better image presentation"), never a new
 * field. Sits inside the media box's own padding, never
 * clipped by its overflow: hidden.
 */
.service-detail__media-badge {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  color: #c00000;
  font-size: 1.35rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(192, 0, 0, 0.15);
}

/**
 * ==========================================
 * CLOSING CTA
 * ==========================================
 */
.service-detail__cta {
  text-align: center;
  padding: 4rem;
  background: #fafafa;
  border-radius: 18px;
  border-top: 4px solid #c00000;
}

.service-detail__cta-text {
  margin: 0 0 1.5rem;
  color: #0f172a;
  font-size: 1.25rem;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .service-detail__media {
    height: 320px;
  }
  .service-detail__title {
    font-size: 2rem;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .service-detail__media {
    height: 220px;
    margin-bottom: 3rem;
  }
  .service-detail__media--icon-fallback i,
  .service-detail__media--placeholder i {
    font-size: 3rem;
  }
  .service-detail__media-badge {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }
  .service-detail__title {
    font-size: 1.5rem;
  }
  .service-detail__lead {
    font-size: 1rem;
  }
  .service-detail__cta {
    padding: 2rem;
  }
  .service-detail__cta-text {
    font-size: 1rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * PROJECTS ARCHIVE, DETAILS, AND CARD
 * ==========================================
 *
 * Purpose:
 * Styles for the public Projects Archive
 * (archive-project.php), Project Details page
 * (single-project.php), and the shared
 * template-parts/projects/project-card.php
 * partial those two pages both use.
 *
 * Package 6A note (ENH-CLIENT-001):
 * The Homepage's own former "Featured Marine
 * Projects" section styles (.projects,
 * .projects__container, .projects__header,
 * .projects__subtitle, .projects__title,
 * .projects__description, .projects__grid)
 * were removed here — that section was retired
 * and consolidated into the new Project
 * Experience section (see
 * assets/scss/components/_project-showcase.scss).
 * .projects__actions is intentionally kept below
 * — the new section's "View All Projects" button
 * reuses it unchanged.
 *
 * Package 6A.2 note (ENH-CLIENT-002):
 * The Project Details page's `.project-detail__*`
 * rules were redesigned from a stacked Cover Image
 * + text + gallery-grid layout into a two-column,
 * image-gallery style layout (main media + thumbnail
 * strip on the left, title/details on the right).
 * `.project-card`/`.projects-archive__grid` are
 * unaffected — only the Details page's own layout
 * changed.
 */
/**
 * Individual project card.
 */
.project-card {
  padding: 2rem;
  background: #ffffff;
  border-left: 4px solid #c00000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/**
 * Hover interaction.
 */
.project-card:hover {
  transform: translateY(-5px);
  border-left-color: #ff3333;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/**
 * Project title.
 */
.project-card h3 {
  margin-top: 0;
  color: #0f172a;
}

/**
 * Project description.
 *
 * Package 6A.4: card_description is already word-limited at the
 * Query Layer (theme/queries/project.php), but a line-clamp is
 * kept here too as a second, purely visual line of defense — it
 * keeps every Archive card the same height even if word-count
 * alone doesn't guarantee identical rendered line counts across
 * different card widths/breakpoints.
 */
.project-card p {
  margin-bottom: 0;
  color: #666666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * ==========================================
 * PROJECT CARD — COVER IMAGE
 * ==========================================
 *
 * Package 5C. Bleeds to the card's edges by
 * cancelling .project-card's own 2rem padding
 * on three sides.
 */
.project-card__image {
  margin: -2rem -2rem 1.5rem;
}

.project-card__image img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.project-card__title a {
  color: inherit;
  text-decoration: none;
}

.project-card__title a:hover {
  text-decoration: underline;
}

/**
 * ==========================================
 * PROJECTS ARCHIVE (View All Projects page)
 * ==========================================
 *
 * Package 5C. Reuses .project-card for each
 * item — same grid pattern as .projects__grid
 * above, its own class since the archive page
 * has no .projects__container wrapper.
 */
.projects-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/**
 * ==========================================
 * PROJECT DETAIL PAGE
 * ==========================================
 *
 * Package 5C, redesigned in Package 6A.2 (ENH-CLIENT-002) from a
 * stacked Cover Image + text + gallery-grid layout into a
 * two-column, image-gallery style page, and polished in Package
 * 6A.3 (same Enhancement ID) — the two-column information
 * architecture is unchanged; this pass fixes the thumbnail strip
 * (was wrapping into multiple rows — `flex-wrap: wrap` was the
 * bug; now `nowrap` + horizontal scroll) and adds a cohesive
 * panel/eyebrow/accent-line treatment. `.project-detail__layout`
 * is still the 2-column grid (left: main media + thumbnail strip;
 * right: info); `--no-media` still collapses it to a single
 * column when a Project has no usable image at all
 * (theme/queries/project.php's `media_gallery` is empty). Package
 * 6A.4 (same Enhancement ID) adds two things without touching this
 * two-column grid: a desktop grab/grabbing cursor + `.is-dragging`
 * state on `.project-detail__thumbnails` for mouse drag-to-scroll
 * (assets/js/project-gallery-switcher.js), and a new full-width
 * `.project-detail__long-description` section rendered as a
 * sibling below `.project-detail__layout`, inside the same
 * `.project-detail__panel`. Package 6A.5 (same Enhancement ID)
 * fixes narrow-mobile horizontal overflow — root cause: CSS Grid
 * items default to `min-width: auto`, so `.project-detail__gallery-col`
 * (which contains a wide, intrinsically-sized thumbnail row) and
 * `.project-detail__info-col` could force their grid track — and
 * therefore the whole panel/page — wider than the viewport, even
 * though the thumbnail strip's own `overflow-x: auto` looks like it
 * should contain that width. `min-width: 0` on both grid items
 * (added below, unscoped — harmless at every breakpoint, since
 * desktop/tablet tracks are already wide enough that min-content
 * never becomes the binding constraint there) fixes the actual
 * cause; `overflow-wrap`/`img { max-width: 100% }` fixes on the
 * text/long-description content prevent a long unbroken word, URL,
 * or a Post Content image with hardcoded HTML width/height
 * attributes from doing the same. No `overflow-x: hidden` shortcut
 * was used anywhere. Desktop/tablet layout is otherwise unchanged.
 */
.project-detail {
  max-width: 1100px;
  margin: 0 auto;
}

/**
 * Package 6A.3 — cohesive panel wrapping both columns: white
 * background, subtle neutral border, restrained shadow, and a
 * thin top accent line in the same FES red already used by
 * Footer heading accents (foundation.$wpstarter-color-primary).
 */
.project-detail__panel {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 18px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 3rem;
}

.project-detail__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #c00000;
}

.project-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 3rem;
}

.project-detail__layout--no-media {
  grid-template-columns: 1fr;
}

/**
 * Package 6A.5 — `min-width: 0` on both grid items overrides CSS
 * Grid's default `min-width: auto`, which otherwise sizes a track
 * to fit its content's min-content width (e.g. this column's own
 * thumbnail row) regardless of the track's `minmax(0, ...)` sizing
 * above. Unscoped (applies at every breakpoint) since it's a
 * correctness fix with no visual effect where the track already
 * has enough space — see the file-header note for the full
 * root-cause explanation.
 */
.project-detail__gallery-col,
.project-detail__info-col {
  min-width: 0;
  max-width: 100%;
}

/**
 * Left column — main media + thumbnails.
 */
.project-detail__main-media {
  max-width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 14px;
  background: #f2f2f2;
}

.project-detail__main-image-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.project-detail__main-image-link:focus-visible {
  outline: 2px solid #c00000;
  outline-offset: 2px;
}

.project-detail__main-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * Package 6A.3 — one-row, horizontally scrollable thumbnail
 * strip. `flex-wrap: nowrap` (the actual fix for the reported
 * multi-row wrapping bug) plus `overflow-x: auto` gives mouse
 * wheel/trackpad scrolling and native touch swipe for free, with
 * no JavaScript needed just to scroll the strip.
 */
.project-detail__thumbnails {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 0.75rem;
  margin-top: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.project-detail__thumbnails::-webkit-scrollbar {
  display: none;
}

/**
 * Package 6A.4 — active-drag state, toggled by
 * assets/js/project-gallery-switcher.js only past the drag
 * threshold (never on a normal click or native touch swipe).
 * Suppresses text selection and image ghost-dragging during the
 * drag itself, without disabling either outside of it.
 */
.project-detail__thumbnails.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.project-detail__thumbnails.is-dragging .project-detail__thumbnail img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.project-detail__thumbnail {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: block;
  width: clamp(64px, 9vw, 84px);
  aspect-ratio: 4/3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.project-detail__thumbnail:hover {
  opacity: 1;
}

.project-detail__thumbnail:focus-visible {
  opacity: 1;
  outline: 2px solid #c00000;
  outline-offset: 2px;
}

.project-detail__thumbnail.is-active {
  opacity: 1;
  border-color: #c00000;
}

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

/**
 * Right column — eyebrow, title, date, description.
 */
.project-detail__info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**
 * Package 6A.3 — static presentation-only label (not a CMS
 * field), styled like this project's other established eyebrows
 * (e.g. .project-showcase-main__eyebrow, D-036): small uppercase
 * text, FES accent color, restrained letter-spacing, no
 * background/pill/badge.
 */
.project-detail__eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  color: #d30000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.project-detail__title {
  overflow-wrap: anywhere;
  word-break: normal;
  margin-bottom: 0.5rem;
}

.project-detail__date {
  color: #666666;
  margin-bottom: 1.5rem;
}

.project-detail__description {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.8;
}

/**
 * Package 6A.4 — full-width Long Description, rendered as a
 * sibling below .project-detail__layout, still inside the same
 * .project-detail__panel. A top border + spacing (not a second
 * nested card) keeps it visually connected to the two-column area
 * above it, per the approved layout — no new heavy panel, no
 * second pill/badge; the eyebrow reuses .project-detail__eyebrow
 * unmodified.
 */
.project-detail__long-description {
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #ececec;
}

.project-detail__long-description-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: 1rem;
  line-height: 1.8;
}

/**
 * Package 6A.5 — a Post Content image can carry hardcoded `width`/
 * `height` HTML attributes (a default WordPress editor behavior);
 * without this, such an image would force the panel wider than the
 * viewport on mobile regardless of every other fix above.
 */
.project-detail__long-description-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.project-detail__long-description-content > * + * {
  margin-top: 1.25rem;
}

.project-detail__long-description-content h1,
.project-detail__long-description-content h2,
.project-detail__long-description-content h3,
.project-detail__long-description-content h4 {
  font-weight: 700;
  line-height: 1.4;
}

.project-detail__long-description-content ul,
.project-detail__long-description-content ol {
  padding-left: 1.5rem;
}

.project-detail__long-description-content li + li {
  margin-top: 0.5rem;
}

.project-detail__long-description-content a {
  color: #c00000;
}

/**
 * ==========================================
 * VIEW ALL PROJECTS
 * ==========================================
 */
.projects__actions {
  margin-top: 3.5rem;
  text-align: center;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .project-card {
    padding: 1.75rem;
  }
  .project-card__image {
    margin: -1.75rem -1.75rem 1.5rem;
  }
  .projects-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .project-detail__panel {
    padding: 2rem;
  }
  .project-detail__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .project-detail__main-media {
    aspect-ratio: 16/9;
  }
  .projects__actions {
    margin-top: 3rem;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .project-card {
    padding: 1.5rem;
  }
  .project-card__image {
    margin: -1.5rem -1.5rem 1.25rem;
  }
  .projects-archive__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /**
   * Package 6A.3: no mobile-specific thumbnail size override
   * needed — .project-detail__thumbnail's clamp(64px, 9vw, 84px)
   * width (with aspect-ratio: 4/3 driving height) already scales
   * down smoothly at every breakpoint on its own.
   */
  /**
   * Package 6A.5 — reduced from 1.5rem (24px) to the design
   * system's own $wpstarter-space-sm (16px), landing inside the
   * approved 16-20px mobile inner-padding target while keeping
   * the panel border/radius/shadow/top-accent all untouched, so
   * it still reads as a distinct panel, not edge-to-edge content.
   */
  .project-detail__panel {
    padding: 1rem;
  }
  /**
   * Package 6A.5 — the 2.5rem/2.5rem (40px) desktop spacing above
   * the Long Description section felt oversized once the mobile
   * panel's own padding was tightened; reduced to
   * $wpstarter-space-lg (32px), still a clear, deliberate break
   * from the summary content above it.
   */
  .project-detail__long-description {
    margin-top: 2rem;
    padding-top: 2rem;
  }
  .projects__actions {
    margin-top: 2.5rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * CERTIFICATIONS & ACCREDITATIONS
 * ==========================================
 *
 * Purpose:
 * Reinforce trust and legitimacy.
 *
 * Boilerplate Candidate:
 * YES
 */
.certifications {
  /**
   * Section spacing (Package 6G.3, ENH-CLIENT-004C; compacted to
   * separate top/bottom tokens Package 6G.3.1, ENH-CLIENT-004D —
   * docs/DECISIONS.md).
   */
  padding-top: 96px;
  padding-bottom: 5rem;
  /**
   * Section color (Package 6G.3 fix) — this section's own
   * hardcoded #f7f7f7 and the About section's #f8f9fb
   * (assets/scss/components/_about.scss) were two separate,
   * barely-distinguishable near-white grays sitting back-to-back
   * in Homepage order, reading as one accidental blended surface
   * rather than two intentional sections. About is now the
   * muted step (neutral-50) and this section is white — see
   * docs/DECISIONS.md for the full alternating rhythm.
   */
  background: #ffffff;
}

@media (max-width: 1024px) {
  .certifications {
    padding-top: 72px;
    padding-bottom: 4rem;
  }
}
/**
 * Main container.
 */
.certifications__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/**
 * Header content.
 */
.certifications__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

/**
 * Small section label.
 */
.certifications__subtitle {
  display: inline-block;
  margin-bottom: 1rem;
  color: #c00000;
  font-weight: 600;
  letter-spacing: 2px;
}

/**
 * Main title.
 */
.certifications__title {
  margin-bottom: 1rem;
  font-size: 2.75rem;
}

/**
 * Description.
 */
.certifications__description {
  color: #666;
  line-height: 1.8;
}

/**
 * ==========================================
 * CAROUSEL (Package 5H; responsive sizing and
 * smart-activation layout added in Package 5H.1;
 * mobile one-logo centering and autoplay support
 * added in Package 5H.2)
 * ==========================================
 *
 * Logo-only, user-driven horizontal carousel. No card
 * container, no visible title (title is preserved as each
 * logo's `alt` text only — see template-parts/sections/
 * certifications.php). CSS Scroll Snap + native touch/trackpad
 * scrolling; assets/js/certifications-carousel.js adds desktop
 * drag-to-scroll, idle-triggered autoplay, and the seamless-
 * loop illusion — see that file and docs/DECISIONS.md
 * D-029/D-030/D-031.
 *
 * .certifications__carousel's max-width at each breakpoint
 * (below) is what actually controls how many logos are
 * visible at once — .certifications__logo's min-width gives
 * each logo a predictable footprint so that math holds
 * regardless of any individual logo's natural aspect ratio.
 * This same max-width is also what
 * certifications-carousel.js measures against at runtime to
 * decide whether the real (untripled) logo set even needs to
 * scroll — see D-030.
 */
.certifications__carousel {
  max-width: 1100px;
  margin: 4rem auto 0;
  /**
   * Clips the tripled track's clones to the visible width;
   * the track itself is what scrolls, not this wrapper.
   */
  overflow: hidden;
}

.certifications__track {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.certifications__track::-webkit-scrollbar {
  display: none;
}
.certifications__track:active, .certifications__track.is-dragging {
  cursor: grabbing;
}
.certifications__track:focus-visible {
  outline: 2px solid #c00000;
  outline-offset: 4px;
}

/**
 * Added by certifications-carousel.js only when the real
 * logo set doesn't need to scroll — centers the single,
 * un-looped row instead of left-aligning it. Safe to always
 * define: it has no visible effect on the scrolling case,
 * where content already exceeds the container and there is
 * no free space left for `justify-content` to distribute.
 */
.certifications__track--static {
  justify-content: center;
}

.certifications__track-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4rem;
  padding: 0.75rem 2rem;
  /**
   * Vertical padding (Package 5H.2) gives the hover
   * scale(1.05) transform (below) room to grow into without
   * being clipped by .certifications__carousel's
   * `overflow: hidden`.
   */
}

.certifications__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 160px;
  scroll-snap-align: center;
}

.certifications__logo img {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  -webkit-user-drag: none;
  user-select: none;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.certifications__logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/**
 * ==========================================
 * DESKTOP — 4 VISIBLE (Package 5H.1)
 * ==========================================
 */
@media (max-width: 1439px) {
  .certifications__carousel {
    max-width: 880px;
  }
}
/**
 * ==========================================
 * DESKTOP — 3 VISIBLE (Package 5H.1)
 * ==========================================
 */
@media (max-width: 1199px) {
  .certifications__carousel {
    max-width: 660px;
  }
}
/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .certifications__track-set {
    gap: 3rem;
  }
}
/**
 * ==========================================
 * MOBILE — 1 VISIBLE (Package 5H.2)
 * ==========================================
 *
 * .certifications__logo's min-width (below) is deliberately
 * close to the full mobile track width, so one logo occupies
 * almost the entire viewport. .certifications__track-set's
 * left/right padding uses calc(50% - half the logo's
 * min-width) — relative to the track-set's own width, i.e.
 * the visible carousel viewport — so the first (and last)
 * logo in each set centers itself regardless of the exact
 * phone width, without a hardcoded per-device value. A small,
 * intentional sliver of the next logo is allowed to show,
 * per the approved design guidance.
 */
@media (max-width: 768px) {
  .certifications {
    padding-top: 56px;
    padding-bottom: 3rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .certifications__title {
    font-size: 1rem;
    line-height: 1.3;
  }
  .certifications__carousel {
    max-width: 100%;
    margin-top: 2.5rem;
  }
  .certifications__track-set {
    gap: 1.5rem;
    padding: 0.75rem calc(50% - 115px);
  }
  .certifications__logo {
    min-width: 230px;
  }
  .certifications__logo img {
    height: 64px;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * CONTACT CTA
 * ==========================================
 *
 * Purpose:
 * Final conversion section.
 */
.cta {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #66161a 0%, #541014 100%);
  color: #ffffff;
  text-align: center;
}

.cta__container {
  max-width: 900px;
  margin: 0 auto;
}

.cta__subtitle {
  color: #ff6b6b;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.cta__title {
  margin-bottom: 1rem;
  font-size: 2.75rem;
  max-width: 700px;
  margin: 0 auto 1.25rem;
}

.cta__description {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}

.cta__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 768px) {
  .cta {
    padding: 4rem 1.5rem;
  }
  .cta__title {
    font-size: 2rem;
  }
  .cta__actions {
    flex-direction: column;
    align-items: center;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * SITE FOOTER
 * ==========================================
 *
 * Purpose:
 * Company information and navigation.
 */
.site-footer {
  background: linear-gradient(180deg, #07111f 0%, #050b14 100%);
  color: #ffffff;
  padding-top: 0;
}

/**
 * Main footer layout.
 */
.site-footer__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 24px 4rem;
  display: grid;
  grid-template-columns: 1.8fr 0.9fr 1.2fr;
  gap: 4rem;
}

/**
 * Company title.
 */
.footer-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 1rem;
}

/**
 * Column heading.
 */
.footer-heading {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  position: relative;
}

.footer-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #c00000;
  margin-top: 0.5rem;
}

/**
 * Description text.
 */
.footer-description {
  color: #9aa4b2;
  line-height: 1.9;
  max-width: 320px;
}

/**
 * Links list.
 */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: #b5b5b5;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

/**
 * Copyright section.
 */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  padding: 2rem 1rem;
  color: #7b8492;
  font-size: 0.85rem;
}

/**
 * ==========================================
 * SOCIAL MEDIA ICONS
 * ==========================================
 */
.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer-social a:hover {
  background: #c00000;
  border-color: #c00000;
  color: #ffffff;
  transform: translateY(-4px);
}

.footer-column p,
.footer-column address {
  /**
   * Package 5K: <address> is the semantically correct element
   * for the CMS Office Address, but browsers italicize it by
   * default — this rule keeps it visually identical to the
   * existing paragraph text, matching the Footer's unchanged
   * visual design.
   */
  font-style: normal;
  color: #9aa4b2;
  margin-bottom: 0.75rem;
  line-height: 1.8;
}

/**
 * Package 5K.1: landline/email rows — an icon plus the link's
 * own value, replacing the browser's default blue/underlined
 * link styling. Reuses the already-loaded Font Awesome icon set
 * (see the Social Media Links icons above) rather than a new
 * icon library.
 */
.footer-contact-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-link:visited {
  color: #ffffff;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
  color: #c00000;
}

.footer-contact-link:focus-visible {
  outline: 2px solid #c00000;
  outline-offset: 2px;
  border-radius: 2px;
}

.footer-contact-icon {
  font-size: 0.95em;
  line-height: 1.8;
  flex-shrink: 0;
}

.footer-contact-value {
  min-width: 0;
  overflow-wrap: break-word;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.footer-brand img {
  width: 90px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .site-footer {
    padding-top: 3rem;
  }
  .site-footer__container {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
    padding: 0 24px 3rem;
  }
  .footer-brand {
    justify-content: center;
    text-align: left;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-description {
    max-width: 100%;
    margin: 0 auto;
  }
  .footer-social {
    margin-left: 0;
    justify-content: center;
  }
  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .footer-column p {
    margin-bottom: 0.5rem;
  }
  .footer-bottom {
    padding: 1.5rem 1rem;
    line-height: 1.8;
  }
  .footer-description {
    max-width: 100%;
  }
  .footer-heading::after {
    margin-left: auto;
    margin-right: auto;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * PROJECT SHOWCASE (Package 6A, ENH-CLIENT-001)
 * ==========================================
 *
 * Purpose:
 * Consolidated Homepage "Project Experience" section — replaces
 * the former separate Salvage Experience and Featured Marine
 * Projects sections/files. Retired: _experience.scss (this file
 * ports its section/header/stats/card rules), and the Homepage-
 * only rules from _projects.scss (see that file's own updated
 * header comment for exactly which rules moved here vs. which
 * stayed, since Projects Archive/Details still live there).
 *
 * Renamed from _experience.scss (docs/DECISIONS.md D-036):
 * - .experience            -> .project-showcase
 * - .experience__container -> .project-showcase__container
 * - .experience__grid      -> .project-showcase__grid
 * - .experience-card*      -> .project-experience-card*
 * Kept unchanged (chrome, not card-identity, no rename needed):
 * - .experience-header*, .experience-stats, .experience-stat*
 */
/**
 * ==========================================
 * SECTION WRAPPER
 * ==========================================
 */
.project-showcase {
  /**
   * Background corrected (Package 6G.3.1, ENH-CLIENT-004D) —
   * Package 6G.3 left this section's own pre-existing gradient
   * unchanged on the assumption it already read as distinct from
   * Services' new muted surface. Live review found otherwise;
   * re-auditing the actual compiled values confirmed the
   * gradient's own top stop (#fafafa) is byte-identical to
   * Services' new background ($wpstarter-color-neutral-50,
   * #fafafa) — the two sections shared the exact same color at
   * their shared boundary, not merely a similar one. Now flat
   * white, completing the intended alternation: Services
   * (muted) -> Projects (white) -> About (muted) -> Certifications
   * (white). Project cards' own border/shadow (unchanged) already
   * provide sufficient contrast against white — confirmed no
   * heavier treatment was needed.
   */
  background: #ffffff;
  /**
   * Section spacing (Package 6G.3.1) — now the compact top/bottom
   * section-spacing tokens (docs/DECISIONS.md), replacing the
   * single 140px-both-sides value. Declared as separate
   * padding-top/padding-bottom (not the `padding: A B` shorthand,
   * which would mean vertical/horizontal, not top/bottom) —
   * horizontal padding stays 0 here, provided by
   * .project-showcase__container instead.
   */
  padding-top: 96px;
  padding-bottom: 5rem;
}

@media (max-width: 1024px) {
  .project-showcase {
    padding-top: 72px;
    padding-bottom: 4rem;
  }
}
@media (max-width: 768px) {
  .project-showcase {
    padding-top: 56px;
    padding-bottom: 3rem;
  }
}
.project-showcase__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/**
 * ==========================================
 * HEADER (ported unchanged from _experience.scss)
 * ==========================================
 */
.experience-header {
  max-width: 900px;
  margin: 0 auto 5rem;
  text-align: center;
}

.experience-header__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.experience-header__eyebrow span {
  width: 70px;
  height: 2px;
  background: #d30000;
}

.experience-header__eyebrow p {
  color: #d30000;
  font-weight: 700;
  letter-spacing: 6px;
  font-size: 0.85rem;
}

.experience-header__title {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.05;
  color: #0f172a;
  margin: 2rem 0 1.5rem;
}

.experience-header__title span {
  color: inherit;
}

.experience-header__line {
  width: 90px;
  height: 4px;
  background: #d30000;
  margin: 1rem auto 2rem;
}

.experience-header__description {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #6c7486;
}

.experience-header__divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.experience-header__divider span {
  width: 55px;
  height: 2px;
  background: #d30000;
}

.experience-header__divider i {
  color: #d19900;
  font-size: 1rem;
}

.experience-header__icon {
  margin-bottom: 2rem;
  font-size: 1.75rem;
  color: #d30000;
}

/**
 * ==========================================
 * STATS (ported unchanged from _experience.scss)
 * ==========================================
 */
.experience-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 5rem;
  padding: 2rem 0;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}

.experience-stat {
  display: flex;
  gap: 1rem;
  align-items: center;
  position: relative;
}

.experience-stat__icon {
  width: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #d30000;
}

.experience-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ececec;
}

.experience-stat h4 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.experience-stat p {
  margin: 0;
  color: #666;
  line-height: 1.6;
  font-size: 0.95rem;
}

/**
 * ==========================================
 * STANDARD FEATURED PROJECT CARD
 * (renamed from .experience-card, same output)
 * ==========================================
 */
.project-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 64px;
}

.project-experience-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
}

.project-experience-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.project-experience-card__image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.project-experience-card__image-link,
.project-experience-card__image img {
  display: block;
  width: 100%;
  height: 100%;
}

.project-experience-card__image img {
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.project-experience-card:hover .project-experience-card__image img {
  transform: none;
}

.project-experience-card__count {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #c40000;
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.project-experience-card__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-experience-card__content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: #0f172a;
}

.project-experience-card__title-link {
  color: inherit;
  text-decoration: none;
}

.project-experience-card__title-link:hover {
  text-decoration: underline;
}

/**
 * Package 6A.4: card_description is already word-limited at the
 * Query Layer (theme/queries/project.php); the line-clamp here is
 * a second, purely visual line of defense keeping all six Standard
 * cards the same height regardless of rendered line count.
 */
.project-experience-card__content p {
  color: #666;
  line-height: 1.7;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-experience-card__accent {
  width: 48px;
  height: 5px;
  background: #d30000;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.project-experience-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: #d30000;
  font-weight: 700;
  text-decoration: none;
}

.project-experience-card:hover .project-experience-card__link {
  padding-left: 0.5rem;
}

/**
 * ==========================================
 * MAIN FEATURED PROJECT
 * ==========================================
 *
 * Stands out through layout/hierarchy only — same navigation
 * contract as .project-experience-card, never a different one.
 */
.project-showcase-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  margin-bottom: 2.5rem;
}

.project-showcase-main__media {
  position: relative;
  aspect-ratio: 16/9;
  min-height: 320px;
  overflow: hidden;
  background: #f2f2f2;
}

.project-showcase-main__image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.project-showcase-main__image-link img,
.project-showcase-main__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-showcase-main__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}

/**
 * Main Feature Eyebrow (Package 6A.1).
 *
 * Replaces the earlier filled pill (.project-showcase-main__badge
 * — a background-color badge with rounded/pill padding) with a
 * restrained text treatment consistent with this Homepage's
 * existing eyebrow/subtitle pattern (.experience-header__eyebrow p,
 * .projects__subtitle): small uppercase text in the FES accent
 * color, no background, no border-radius, no badge-like padding.
 * The Main card still stands out through layout/hierarchy (split
 * layout, larger media, larger title) — this label provides
 * context only, per docs/DECISIONS.md D-036.
 */
.project-showcase-main__eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  color: #d30000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.project-showcase-main__title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
  margin-bottom: 1rem;
}

.project-showcase-main__title a {
  color: inherit;
  text-decoration: none;
}

.project-showcase-main__title a:hover {
  text-decoration: underline;
}

.project-showcase-main__description {
  color: #666;
  line-height: 1.8;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.project-showcase-main__meta {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.project-showcase-main__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  color: #d30000;
  font-weight: 700;
  text-decoration: none;
}

.project-showcase-main__link:hover {
  padding-left: 0.5rem;
}

/**
 * ==========================================
 * MAIN FEATURED PROJECT — YOUTUBE CLICK-TO-LOAD POSTER
 * ==========================================
 *
 * assets/js/project-showcase-video.js swaps the .project-showcase-video
 * anchor for a .project-showcase-video__iframe-wrapper on click —
 * both simply fill their shared aspect-ratio'd parent
 * (.project-showcase-main__media), so no extra positioning is
 * needed on either.
 */
.project-showcase-video {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.project-showcase-video__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-showcase-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.5rem;
  transition: background 0.25s ease, transform 0.25s ease;
}

.project-showcase-video:hover .project-showcase-video__play {
  background: #c00000;
  transform: translate(-50%, -50%) scale(1.08);
}

.project-showcase-video__label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

.project-showcase-video__iframe-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

.project-showcase-video__iframe-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/**
 * ==========================================
 * VIEW ALL PROJECTS
 * (reuses .projects__actions from _projects.scss —
 * no new rule needed here)
 * ==========================================
 */
/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .project-showcase-main {
    grid-template-columns: 1fr;
  }
  .project-showcase-main__content {
    padding: 2rem;
  }
  .project-showcase-main__title {
    font-size: 1.85rem;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .experience-header__title {
    font-size: 2.25rem;
    line-height: 1.15;
  }
  .experience-stats {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
    margin-bottom: 3rem;
  }
  .experience-stat {
    justify-content: flex-start;
  }
  .experience-stat:not(:last-child)::after {
    display: none;
  }
  .project-showcase {
    padding: 80px 0;
  }
  .experience-header {
    margin-bottom: 3rem;
  }
  .experience-header__description {
    font-size: 1rem;
    line-height: 1.7;
  }
  .project-showcase__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
  }
  .project-experience-card__image {
    height: 200px;
  }
  .project-experience-card__content {
    padding: 20px;
  }
  .project-experience-card__content h3 {
    font-size: 1.15rem;
  }
  .project-experience-card__content p {
    font-size: 0.9rem;
  }
  .experience-header__eyebrow {
    gap: 0.75rem;
  }
  .experience-header__eyebrow span {
    width: 40px;
  }
  .experience-header__eyebrow p {
    letter-spacing: 3px;
    font-size: 0.75rem;
  }
  .project-showcase-main__content {
    padding: 1.5rem;
  }
  .project-showcase-main__title {
    font-size: 1.6rem;
  }
  .project-showcase-main__eyebrow {
    margin-bottom: 0.5rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * BUTTONS
 * ==========================================
 *
 * Purpose:
 * Shared button styles used throughout
 * the website.
 *
 * Variants:
 * - Primary
 * - Outline Primary
 * - Light Outline
 *
 * Foundation:
 * Migrated in Package 3A to consume Foundation
 * tokens (docs/DESIGN_SYSTEM.md) wherever a value
 * here was an exact match to an existing token —
 * see docs/DECISIONS.md D-012. Values with no exact
 * Foundation token (.95rem font-size; 220px/56px/
 * 320px dimensions; the rgba(0,0,0,*) hover shadows;
 * rgba(255,255,255,.85) border; #66161a) are
 * unchanged and tracked in the Package 3A migration
 * backlog.
 */
/**
 * ==========================================
 * BASE BUTTON
 * ==========================================
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 56px;
  padding: 0 2rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/**
 * ==========================================
 * PRIMARY
 * ==========================================
 */
.btn--primary {
  background: #c00000;
  color: #ffffff;
  border: 2px solid #c00000;
}

.btn--primary:hover {
  background: #d91313;
  border-color: #d91313;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

/**
 * ==========================================
 * OUTLINE PRIMARY
 * ==========================================
 */
.btn--outline-primary {
  background: #ffffff;
  color: #c00000;
  border: 2px solid #c00000;
}

.btn--outline-primary:hover {
  background: #c00000;
  color: #ffffff;
  border-color: #c00000;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/**
 * ==========================================
 * LIGHT OUTLINE
 * ==========================================
 */
.btn--outline-light {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.btn--outline-light:hover {
  background: #ffffff;
  color: #66161a;
  border-color: #ffffff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * ABOUT
 * ==========================================
 *
 * Purpose:
 * Tell the company's story while reinforcing
 * credibility and trust.
 *
 * Boilerplate Candidate:
 * YES
 */
.about {
  /**
   * Section spacing (Package 6G.3, ENH-CLIENT-004C; compacted to
   * separate top/bottom tokens Package 6G.3.1, ENH-CLIENT-004D —
   * docs/DECISIONS.md).
   */
  padding-top: 96px;
  padding-bottom: 5rem;
  /**
   * Alternate background to separate from Services and
   * Experience. Package 6G.3 fix: the previous #f8f9fb was a
   * one-off value nearly indistinguishable from Certifications'
   * own separate #f7f7f7 — now the shared neutral-50 muted
   * surface token, one step of the full alternating rhythm
   * documented in docs/DECISIONS.md (white → muted → white →
   * muted → white, Features through Certifications).
   */
  background: #fafafa;
}

@media (max-width: 1024px) {
  .about {
    padding-top: 72px;
    padding-bottom: 4rem;
  }
}
@media (max-width: 768px) {
  .about {
    padding-top: 56px;
    padding-bottom: 3rem;
  }
}
/**
 * Main content wrapper.
 */
.about__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/**
 * Section heading.
 */
.about__header {
  max-width: 760px;
  margin: 0 auto 4rem;
  text-align: center;
}

.about__title {
  font-size: 2.5rem;
  line-height: 1.05;
  max-width: 760px;
  margin: 0 auto 1.75rem;
  color: #0f172a;
  font-weight: 800;
}

.about__subtitle {
  margin-bottom: 1.5rem;
  color: #c00000;
  font-weight: 700;
  letter-spacing: 2px;
}

/**
 * ==========================================
 * HEADER DIVIDER
 * ==========================================
 */
.about__header-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 2.75rem;
}

.about__header-divider span {
  width: 72px;
  height: 2px;
  background: #d30000;
}

.about__header-divider i {
  color: #d19900;
  font-size: 1.1rem;
}

/**
 * ==========================================
 * ABOUT CONTENT
 * ==========================================
 */
.about__content-subtitle {
  display: inline-block;
  margin-bottom: 1rem;
  color: #c00000;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about__content-title {
  margin-bottom: 1.5rem;
  color: #111827;
  font-size: 2.2rem;
  line-height: 1.25;
}

.about__content p {
  color: #64748b;
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

/**
 * Description.
 */
.about__description {
  color: #666;
  line-height: 1.8;
  max-width: 760px;
  margin: 1.75rem auto 0;
  font-size: 1.1rem;
}

/**
 * ==========================================
 * HIGHLIGHTS
 * ==========================================
 */
.about__highlights {
  list-style: none;
  margin: 2rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.about__highlights li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.about__highlights i {
  color: #c00000;
  font-size: 1rem;
  flex-shrink: 0;
}

.about__highlights span {
  color: #374151;
  font-weight: 500;
  line-height: 1.6;
}

/**
 * "Read More" link to the full About Us page (Package 5G
 * follow-up) — reuses the existing .btn/.btn--outline-primary
 * button styles verbatim; only the spacing above it is new.
 */
.about__read-more {
  margin-top: 2rem;
}

/**
 * ==========================================
 * ABOUT TABS
 * ==========================================
 */
/**
 * Tab navigation container.
 */
.about__tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

/**
 * Individual tab.
 */
.about__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 1.75rem;
  background: #ffffff;
  border: 1px solid #dbe3eb;
  border-radius: 999px;
  cursor: pointer;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.25s ease;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

/**
 * Hover.
 */
.about__tab:hover {
  border-color: #c00000;
  color: #c00000;
}

/**
 * Active tab.
 */
.about__tab.is-active {
  background: #c00000;
  color: #ffffff;
  border-color: #c00000;
  box-shadow: 0 8px 20px rgba(192, 0, 0, 0.18);
}

/**
 * Tab Icon.
 */
.about__tab i {
  font-size: 0.9rem;
}

.about__tab:hover i {
  transform: translateY(-1px);
  transition: transform 0.25s ease;
}

/**
 * ==========================================
 * ABOUT PANEL
 * ==========================================
 */
/**
 * Left column.
 */
.about__image {
  width: 100%;
}

/**
 * Image wrapper.
 */
.about__image-wrapper {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

/**
 * Image.
 */
.about__image img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  filter: contrast(0.95);
}

/**
 * About Media embed (Package 5G follow-up #3) — same fixed
 * height as .about__image img above, so a video embed fills
 * the identical visual slot a Cover Image would. Inherits
 * .about__image-wrapper's overflow/border-radius/shadow.
 */
.about__image-embed {
  height: 520px;
}

.about__image-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/**
 * ==========================================
 * ABOUT CONTENT
 * ==========================================
 */
.about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-left: 2rem;
}

.about__content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 72px;
  border-radius: 4px;
  background: #c00000;
}

/**
 * ==========================================
 * ABOUT PANELS
 * ==========================================
 */
.about__panel {
  display: none;
  grid-template-columns: 45% 55%;
  gap: 5rem;
  align-items: center;
  animation: aboutFade 0.35s ease;
  padding-top: 3rem;
  border-top: 1px solid #e8edf2;
}

.about__panel.is-active {
  display: grid;
}

/**
 * ==========================================
 * MISSION & VISION
 * ==========================================
 */
.about__mission {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.about-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
  border-top: 4px solid #c00000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.about-card__subtitle {
  display: inline-block;
  margin-bottom: 1rem;
  color: #c00000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about-card h3 {
  margin-bottom: 1rem;
  color: #0f172a;
  font-size: 1.6rem;
  line-height: 1.3;
}

.about-card p {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.8;
}

/**
 * ==========================================
 * PANEL ANIMATION
 * ==========================================
 */
@keyframes aboutFade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .about__panel {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about__content-title {
    text-align: center;
  }
  .about__content-title {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  .about__content-subtitle {
    text-align: center;
    display: block;
  }
  .about__content p {
    text-align: left;
  }
  .about__mission {
    gap: 1.5rem;
    max-width: 720px;
    margin: 2rem auto 0;
  }
  .about__image {
    max-width: 700px;
    margin: 0 auto;
  }
  .about__image img,
  .about__image-embed {
    height: 320px;
  }
  .about__image-wrapper {
    border-radius: 22px;
  }
  .about__header {
    max-width: 680px;
    margin: 0 auto 3rem;
  }
  .about__description {
    max-width: 620px;
    font-size: 1rem;
    margin-top: 1.5rem;
  }
  .about__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    max-width: 760px;
    margin: 0 auto 2.5rem;
  }
  .about__tab {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1rem;
  }
  .about__content {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 0;
  }
  .about__content::before {
    display: none;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .about {
    padding: 4.5rem 1.5rem;
  }
  .about__tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .about__tab {
    width: 100%;
    max-width: none;
    justify-content: center;
    padding: 1rem 1.25rem;
  }
  .about__tabs {
    max-width: 100%;
  }
  .about__panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about__image {
    order: 1;
  }
  .about__content {
    order: 2;
    padding-left: 0;
  }
  .about__content::before {
    display: none;
  }
  .about__content-title {
    font-size: 1.9rem;
  }
  .about__title {
    font-size: 2.2rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .about__subtitle {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
  }
  .about__description {
    max-width: 320px;
    margin: 1.25rem auto 0;
    font-size: 0.95rem;
    line-height: 1.8;
  }
  .about__tabs {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .about__header-divider {
    margin: 1.25rem 0 2rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================================
 * ABOUT US PAGE
 * ==========================================================
 *
 * Purpose:
 * Styles for the public About Us page (page-about.php,
 * Package 5G; redesigned Package 6G, ENH-CLIENT-004) — its own
 * branded hero header (matching the Homepage About section's
 * eyebrow/divider/serif-title visual language, per this
 * package's explicit brief), Company Profile/Media, upgraded
 * Mission/Vision cards, an improved Core Values grid, and a new
 * Credibility (Certifications) band. Deliberately a separate
 * file from components/_about.scss, which styles the
 * Homepage-only tabbed About block and is not modified by this
 * package — every value below that intentionally matches the
 * Homepage's own `.about-card`/`.about__header-divider`
 * treatment is a direct reuse of that file's existing values,
 * not an independent, potentially-drifting redeclaration.
 *
 * Reuses the existing Public Page Layout foundation
 * (components/_public-layout.scss's .content-container —
 * Package 5B) for the page shell, and only defines the
 * About-specific blocks below it. No longer uses .page-header
 * (Package 6G replaced it with this file's own .about-page__hero
 * — see template-parts/about/about-content.php's docblock).
 */
.about-page {
  max-width: 1100px;
  margin: 0 auto;
}

/**
 * ==========================================
 * HERO HEADER (Package 6G)
 * ==========================================
 *
 * Eyebrow / divider / serif title / description — the exact
 * visual shape of the Homepage About section's own
 * .about__subtitle / .about__header-divider / .about__title /
 * .about__description (components/_about.scss), reused here
 * deliberately so the standalone page reads as the same site,
 * not a redesign.
 */
.about-page__hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem;
}

.about-page__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  color: #c00000;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-page__hero-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.about-page__hero-divider span {
  width: 72px;
  height: 2px;
  background: #d30000;
}

.about-page__hero-divider i {
  color: #d19900;
  font-size: 1.1rem;
}

.about-page__title {
  margin: 0 0 1.5rem;
  color: #0f172a;
  /**
   * Package 6G.3.1 (ENH-CLIENT-004D): now follows the CMS Heading
   * Font setting like every other public heading — Part 8's
   * explicit "About Us H1 follows Heading Font" requirement.
   */
  font-family: var(--wpstarter-font-heading, Source Serif 4, Georgia, Times New Roman, Times, serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.about-page__hero-description {
  margin: 0 auto;
  max-width: 620px;
  color: #666666;
  font-size: 1.125rem;
  line-height: 1.8;
}

/**
 * ==========================================
 * COMPANY PROFILE / OUR STORY
 * ==========================================
 */
.about-page__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 5rem;
}

.about-page__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.about-page__media-embed {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.about-page__media-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.about-page__profile-eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: #d30000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-page__profile p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #666666;
}

/**
 * ==========================================
 * MISSION & VISION
 * ==========================================
 *
 * Card treatment matches components/_about.scss's own
 * .about-card exactly (background/radius/shadow/top-accent-
 * border/hover lift) — Part 3C's explicit "matching border
 * radius / shadow / border style" requirement, using the
 * Homepage's own existing values rather than inventing new
 * ones.
 */
.about-page__mission-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 5rem;
}

.about-page-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
  border-top: 4px solid #c00000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-page-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.about-page-card__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  color: #c00000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.about-page-card h2 {
  margin-bottom: 1rem;
  color: #0f172a;
  font-size: 1.6rem;
  line-height: 1.3;
}

.about-page-card p {
  margin: 0;
  line-height: 1.8;
  color: #666666;
  font-size: 0.95rem;
}

/**
 * ==========================================
 * SECTION EYEBROW (shared by Core Values / Credibility)
 * ==========================================
 */
.about-page__section-eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: #d30000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/**
 * ==========================================
 * CORE VALUES
 * ==========================================
 */
.about-page__values {
  text-align: center;
  margin-bottom: 5rem;
}

.about-page__values h2 {
  margin: 0 0 2rem;
  color: #0f172a;
  font-size: 2rem;
}

.about-page__values-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.about-page__values-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  border-left: 3px solid #c00000;
}

.about-page__values-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(192, 0, 0, 0.08);
  color: #c00000;
  font-size: 0.9rem;
}

.about-page__values-label {
  color: #0f172a;
  font-weight: 500;
  line-height: 1.4;
}

/**
 * ==========================================
 * CREDIBILITY / EXPERIENCE HIGHLIGHTS (Package 6G)
 * ==========================================
 *
 * Reuses the existing Certifications data
 * (wpstarter_get_certifications()) already proven on the
 * Homepage carousel — presented here as a simple, static grid
 * rather than a carousel, since this standalone page has no
 * "infinite scroll" need and a plain grid reads more like a
 * credibility band than a repeating marquee.
 */
.about-page__credibility {
  text-align: center;
}

.about-page__credibility h2 {
  margin: 0 0 2rem;
  color: #0f172a;
  font-size: 2rem;
}

.about-page__credibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

.about-page__credibility-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  padding: 1rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.about-page__credibility-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .about-page__intro {
    grid-template-columns: 1fr;
  }
  .about-page__mission-vision {
    grid-template-columns: 1fr;
  }
  .about-page__title {
    font-size: 2rem;
  }
  /**
   * Package 6G.2 (ENH-CLIENT-004B): explicit 2-column tablet
   * step, between the desktop `auto-fit` grid (which would still
   * fit 4+ of these 140px-minimum cards at typical tablet
   * widths) and the mobile 1-column layout below.
   */
  .about-page__credibility-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .about-page__intro,
  .about-page__mission-vision {
    gap: 2rem;
  }
  .about-page__hero {
    margin-bottom: 2rem;
  }
  .about-page__title {
    font-size: 1.5rem;
  }
  .about-page__hero-divider span {
    width: 40px;
  }
  .about-page__values-list {
    grid-template-columns: 1fr;
  }
  /**
   * Package 6G.2 (ENH-CLIENT-004B) fix — Certification Grid Root
   * Cause: this rule previously forced `repeat(2, 1fr)` at the
   * mobile breakpoint too, producing the reported 2-cards-per-row
   * layout with each card and logo compressed. One column per
   * row at mobile width; the card's own centered flex layout and
   * `object-fit: contain` (above) already keep the logo centered
   * and undistorted at the new, wider card width.
   */
  .about-page__credibility-grid {
    grid-template-columns: 1fr;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================================
 * CONTACT US PAGE
 * ==========================================================
 *
 * Purpose:
 * Styles for the public Contact Us page (page-contact.php,
 * Package 5J; redesigned Package 6G, ENH-CLIENT-004; simplified
 * to a single-column, form-focused layout Package 6G.1,
 * ENH-CLIENT-004A) — a branded hero header sourced from the
 * Contact Us CMS record, and a centered Inquiry Form card. This
 * remains the theme's first public-facing form; the form-field
 * rules below (.contact-form* — status, honeypot, rows, inputs,
 * errors) are Package 5J's original rules, UNCHANGED by either
 * Package 6G or 6G.1, since the form's own markup (ids/names/
 * classes) was left byte-for-byte identical throughout — only
 * wrapper markup around it has ever changed. Every new rule below
 * is built entirely from existing Foundation tokens (spacing/
 * color/radius/shadow/typography) and reuses the existing
 * .btn/.btn--primary button styles verbatim for the submit
 * button — no new button variant introduced.
 *
 * Package 6G.1 removed the two-column intro/contact-info layout
 * Package 6G introduced (`.contact-page__grid`, `__intro`,
 * `__intro-copy`, `__header`, `__info*`, `__eyebrow`) — live
 * review found it duplicated the footer's own contact details and
 * left unbalanced whitespace once the info column ran shorter
 * than the form. Those rules are removed outright rather than
 * left dead, since nothing else references them.
 *
 * Reuses the existing Public Page Layout foundation
 * (components/_public-layout.scss's .content-container —
 * Package 5B) for the page shell, matching _about-page.scss's
 * own precedent. No longer uses .page-header (Package 6G
 * replaced it with this file's own .contact-page__hero — see
 * template-parts/contact/contact-content.php's docblock).
 */
.contact-page {
  max-width: 1100px;
  margin: 0 auto;
}

/**
 * ==========================================
 * HERO HEADER
 * ==========================================
 *
 * H1 now sources from the Contact Us CMS record's own Header
 * field (Package 6G.1) rather than always the native Page title.
 * The Introductory Text below it is normal supporting copy, not
 * eyebrow styling — per this package's explicit instruction not
 * to force a full-sentence CMS value into tiny uppercase type.
 */
.contact-page__hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4rem;
}

.contact-page__title {
  margin: 0;
  color: #0f172a;
  /**
   * Package 6G.3.1 (ENH-CLIENT-004D): now follows the CMS Heading
   * Font setting like every other public heading — Part 8's
   * explicit "Contact Us H1 follows Heading Font" requirement.
   */
  font-family: var(--wpstarter-font-heading, Source Serif 4, Georgia, Times New Roman, Times, serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.contact-page__divider {
  display: block;
  width: 64px;
  height: 3px;
  margin: 1.5rem auto;
  background: #d30000;
  border-radius: 999px;
}

.contact-page__subtitle {
  margin: 0 auto;
  max-width: 620px;
  color: #666666;
  font-size: 1.125rem;
  line-height: 1.8;
}

/**
 * ==========================================
 * CENTERED FORM CARD (Package 6G.1)
 * ==========================================
 *
 * Replaces Package 6G's two-column `.contact-page__grid` — the
 * form is now the page's sole focus, centered and constrained to
 * a readable card width rather than stretched full-bleed.
 */
.contact-page__form-wrap {
  max-width: 720px;
  margin: 0 auto;
}

/**
 * Form panel container — a premium card treatment around the
 * existing, unmodified .contact-form markup below.
 *
 * Package 6G.2 (ENH-CLIENT-004B) fix — Contact Form Root Cause:
 * this project has no sitewide `box-sizing: border-box` reset
 * (confirmed by `grep -rn "box-sizing" assets/scss/` — the only
 * existing uses are scoped to individual components, e.g.
 * `_buttons.scss`/`_projects.scss`), so every element defaults to
 * the browser's own `content-box`. `.contact-form__row input`/
 * `textarea` (below) have always set `width: 100%` while also
 * having their own `padding`/`border` — under `content-box`, that
 * padding and border are added ON TOP of the 100%-of-parent
 * content width, pushing the control's actual rendered width past
 * its container's right edge. The card's left padding stayed
 * visually correct because it's the card's own inner edge, not
 * affected by its children's box model; the overflow only showed
 * on the right, exactly matching the reported symptom. Scoped
 * `box-sizing: border-box` here (not a sitewide reset, per this
 * package's explicit instruction) makes every control inside this
 * one card measure its declared width inclusive of its own padding
 * and border, so it can never exceed 100% of its parent.
 */
.contact-page__form-panel,
.contact-page__form-panel * {
  box-sizing: border-box;
}

.contact-page__form-panel {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  padding: 3rem;
  border-top: 4px solid #c00000;
}

/**
 * ==========================================
 * FORM
 * ==========================================
 */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form__status {
  min-height: 1.5em;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status--success {
  background: rgba(34, 139, 34, 0.08);
  color: #1e6b1e;
}

.contact-form__status--error {
  background: rgba(192, 0, 0, 0.08);
  color: #c00000;
}

/**
 * Honeypot — visually hidden, never reached by keyboard or
 * assistive technology (also aria-hidden and tabindex="-1" in
 * the markup itself). Real visitors never see or fill this in;
 * if a submission arrives with it populated, the request is
 * rejected server-side (theme/forms/contact.php).
 */
.contact-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-form__row label {
  font-weight: 600;
  color: #0f172a;
}

.contact-form__required {
  color: #c00000;
}

.contact-form__row input,
.contact-form__row textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 1px solid #ececec;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: #0f172a;
  background: #ffffff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form__row textarea {
  resize: vertical;
}

.contact-form__row input:focus,
.contact-form__row textarea:focus {
  outline: none;
  border-color: #c00000;
  box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.12);
}

.contact-form__row input[aria-invalid=true],
.contact-form__row textarea[aria-invalid=true] {
  border-color: #c00000;
}

.contact-form__error {
  min-height: 1.25em;
  color: #c00000;
  font-size: 0.875rem;
}

.contact-form__error:empty {
  display: none;
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: 1rem;
  border: 0;
  cursor: pointer;
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/**
 * ==========================================
 * TABLET
 * ==========================================
 */
@media (max-width: 1024px) {
  .contact-page__title {
    font-size: 2rem;
  }
  .contact-page__form-panel {
    padding: 2rem;
  }
}
/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .contact-form__submit {
    align-self: stretch;
  }
  .contact-page__hero {
    margin-bottom: 2rem;
  }
  .contact-page__title {
    font-size: 1.5rem;
  }
  .contact-page__form-panel {
    padding: 2rem 1.5rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================================
 * WORKFLOW PREVIEW — INDICATOR + ERROR PAGE
 * ==========================================================
 *
 * Purpose (Package 6F.2.8, ENH-BUG-010):
 * Styles for the two frontend-only surfaces
 * theme/workflow/workflow-preview.php renders: a non-disruptive
 * banner shown only to an authorized reviewer/submitter viewing
 * proposed content (`wpstarter_render_workflow_preview_indicator()`,
 * Part 18), and a safe, on-brand failure page for an invalid or
 * unauthorized preview request
 * (`wpstarter_render_workflow_preview_error()`, Part 19). Neither
 * is ever rendered for an ordinary public visitor. Built entirely
 * from existing Foundation tokens — no new color introduced.
 */
/**
 * ==========================================
 * PREVIEW INDICATOR
 * ==========================================
 */
.wpstarter-preview-indicator {
  background: #fafafa;
  border-bottom: 3px solid #c00000;
}

.wpstarter-preview-indicator__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1rem 2rem;
}

.wpstarter-preview-indicator__inner p {
  margin: 0;
  font-size: 0.875rem;
  color: #666666;
}

.wpstarter-preview-indicator__title {
  color: #c00000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.wpstarter-preview-indicator__meta {
  color: #0f172a;
}

.wpstarter-preview-indicator__link {
  margin-left: auto;
  color: #c00000;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.wpstarter-preview-indicator__link:hover,
.wpstarter-preview-indicator__link:focus-visible {
  color: #0f172a;
}

/**
 * ==========================================
 * PREVIEW ERROR PAGE
 * ==========================================
 */
.wpstarter-preview-error {
  max-width: 560px;
  margin: 5rem auto;
  padding: 3rem;
  text-align: center;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  border-top: 4px solid #c00000;
}

.wpstarter-preview-error h1 {
  margin: 0 0 1rem;
  color: #0f172a;
  /**
   * Package 6G.3.1 (ENH-CLIENT-004D): no explicit font-family
   * here anymore — main.scss's global `h1, h2, h3, h4, h5, h6`
   * rule already applies the CMS Heading Font to every heading
   * sitewide, including this one; a page-scoped override would
   * only reintroduce the same inconsistency Part 8 asked this
   * package to remove from the three public page titles.
   */
  font-size: 2rem;
}

.wpstarter-preview-error p {
  margin: 0;
  color: #666666;
  line-height: 1.6;
}

/**
 * ==========================================
 * MOBILE
 * ==========================================
 */
@media (max-width: 768px) {
  .wpstarter-preview-indicator__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .wpstarter-preview-indicator__link {
    margin-left: 0;
  }
  .wpstarter-preview-error {
    margin: 3rem auto;
    padding: 2rem;
  }
}
/**
 * ==========================================
 * FOUNDATION
 * ==========================================
 */
/**
 * ==========================================
 * GALLERY LIGHTBOX
 * ==========================================
 *
 * Purpose:
 * Display project photos in a modern
 * fullscreen gallery.
 *
 * Boilerplate Candidate:
 * YES
 */
.gallery {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(7, 20, 45, 0.88);
  backdrop-filter: blur(6px);
  z-index: 9999;
  padding: 2rem;
}

/**
 * Active state.
 */
.gallery.is-active {
  display: flex;
}

/**
 * Background overlay.
 */
.gallery__overlay {
  position: absolute;
  inset: 0;
}

/**
 * Main container.
 */
.gallery__container {
  position: relative;
  width: min(1200px, 92vw);
  max-height: 92vh;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/**
 * ==========================================
 * HEADER
 * ==========================================
 */
.gallery__title {
  padding: 1.5rem 2rem;
  margin: 0;
  font-size: 1.5rem;
  color: #0f172a;
  border-bottom: 1px solid #edf2f7;
}

.gallery__counter {
  text-align: center;
  color: #64748b;
  font-weight: 600;
  padding: 1.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

/**
 * ==========================================
 * GALLERY VIEWER
 * ==========================================
 */
.gallery__viewer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f6f9;
  height: 60vh;
  min-height: 450px;
  max-height: 650px;
  padding: 1.5rem;
}

.gallery__image {
  display: block;
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

/**
 * ==========================================
 * NAVIGATION BUTTONS
 * ==========================================
 */
.gallery__previous,
.gallery__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: 0.25s ease;
}

.gallery__previous:hover,
.gallery__next:hover {
  background: #c00000;
  color: #ffffff;
}

.gallery__previous {
  left: 1.5rem;
}

.gallery__next {
  right: 1.5rem;
}

.gallery__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 5;
  transition: 0.25s ease;
}

.gallery__close:hover {
  background: #c00000;
  color: #ffffff;
}

/**
 * ==========================================
 * GALLERY THUMBNAILS
 * ==========================================
 */
.gallery__thumbnails {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 72px;
  padding: 0.25rem 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/**
 * Hide scrollbar
 */
.gallery__thumbnails::-webkit-scrollbar {
  display: none;
}

.gallery__thumbnail {
  flex-shrink: 0;
  width: 72px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/**
 * Hover
 */
.gallery__thumbnail:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/**
 * Active
 */
.gallery__thumbnail.is-active {
  opacity: 1;
  border-color: #c00000;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(192, 0, 0, 0.18);
}

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

/**
 * ==========================================
 * GALLERY FOOTER
 * ==========================================
 */
.gallery__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid #edf2f7;
  background: #ffffff;
}

@media (max-width: 768px) {
  .gallery {
    padding: 1rem;
  }
  .gallery__viewer {
    height: 42vh;
    min-height: 260px;
    padding: 1rem;
  }
  .gallery__previous,
  .gallery__next {
    width: 40px;
    height: 40px;
  }
  .gallery__previous {
    left: 0.75rem;
  }
  .gallery__next {
    right: 0.75rem;
  }
  .gallery__title {
    font-size: 1.15rem;
    padding: 1.25rem 4rem 1.25rem 1.25rem;
    line-height: 1.4;
  }
  .gallery__close {
    top: 0.9rem;
    right: 0.9rem;
    width: 38px;
    height: 38px;
    box-shadow: none;
  }
  .gallery__container {
    width: 100%;
    max-height: 90vh;
    border-radius: 16px;
  }
  /**
  * ==========================================
  * MOBILE THUMBNAILS
  * ==========================================
  */
  .gallery__thumbnail {
    width: 60px;
    height: 45px;
  }
}
header {
  padding: 16px;
  border-bottom: 1px solid #ddd;
}

/**
 * ==========================================
 * GLOBAL BEHAVIOR
 * ==========================================
 *
 * Purpose:
 * Smooth scrolling for anchor links.
 */
html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/**
 * Offset anchor scrolling
 * for sticky header.
 */
section[id] {
  scroll-margin-top: 100px;
}

/**
 * ==========================================
 * GLOBAL TYPOGRAPHY (Package 6G.3, ENH-CLIENT-004C)
 * ==========================================
 *
 * Runtime CSS custom properties (functions.php's wpstarter_assets(),
 * theme/settings/theme-settings.php's font preset manifest) supply
 * the actual value from a Website Administrator's Theme Settings
 * selection; the SCSS token interpolated as the var() fallback is
 * only what renders if that inline <style> block hasn't loaded for
 * some reason — both currently resolve to the same "Theme Default"
 * stack, so there is no visual difference between the two today.
 *
 * More specific selectors elsewhere in this stylesheet — the three
 * page-level titles using $wpstarter-font-heading-serif
 * (.service-detail__title, .contact-page__title,
 * .about-page__title) — are deliberately left untouched and
 * unaffected: CSS specificity means those class selectors always
 * win over this element-level default regardless of value, so this
 * package's new global Heading Font setting does not reach them.
 * They are a scoped branding accent, not general site typography —
 * see docs/DECISIONS.md.
 */
body {
  font-family: var(--wpstarter-font-body, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wpstarter-font-heading, Source Serif 4, Georgia, Times New Roman, Times, serif);
}

/**
 * Form controls do not inherit font-family from the page by
 * default in every browser's own user-agent stylesheet (a
 * long-standing, well-known CSS behavior for form elements) — this
 * restores inheritance so the Body Font setting actually reaches
 * every button/input/select/textarea site-wide, per Part 15's
 * explicit requirement, without giving any of them a new font
 * value of their own.
 */
button,
input,
select,
textarea {
  font-family: inherit;
}

/*# sourceMappingURL=main.css.map */