/* ==========================================================================
   GIWU, shared site footer
   Single source of truth for the footer on every page.
   Extracted from index.html's inline <style> on 7 Sep 2026 so that all pages
   share one identical footer instead of the six variants that had drifted.
   Colour values are declared with fallbacks so this file works on pages that
   do not define the site's :root custom properties.
   ========================================================================== */

footer {
  background: #0f1f08;
  color: rgba(255, 255, 255, 0.6);
  padding: 64px 0 32px;
  position: relative;
}

/* Keep the footer's inner width identical everywhere, independent of the
   per-page .container width (1280px inline vs 1400px in styles.css). */
/* css/mobile-fixes.css sets `* { max-width: 100% !important }` globally, which
   defeats any max-width here. `width: min()` is not affected by that cap and
   stays responsive on pages that do not load mobile-fixes.css. */
footer .container {
  width: min(1280px, 100%);
  max-width: 1280px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand img { height: 44px; width: auto; margin-bottom: 24px; }

.footer-tagline {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  max-width: 320px;
  border-left: 2px solid var(--gold, #c8a864);
  padding-left: 16px;
}

.footer-social { display: flex; gap: 12px; margin-top: 24px; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
  background: var(--gold, #c8a864);
  color: var(--green-deep, #1f3a0f);
  transform: translateY(-2px);
}

.footer-social svg { width: 18px; height: 18px; }

.footer-col-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #c8a864);
  margin-bottom: 20px;
}

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

/* Size non-link items (e.g. the address) to match the links, so the column
   does not inherit each page's own base font-size. */
.footer-col li {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.footer-col a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--gold, #c8a864); }

.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  flex-wrap: wrap;
  gap: 12px;
  letter-spacing: 0.04em;
}

.footer-slogan {
  color: var(--gold, #c8a864);
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 13px;
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 500px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Shared nav CTA.
   index.html carries its own inline .nav-cta rule; every other page uses the
   .navlinks nav and has no styling for it, so it is defined here with the same
   values and colour fallbacks.
   ========================================================================== */

.navlinks .nav-cta,
.mobile .nav-cta {
  background: var(--gold, #c8a864);
  color: var(--green-deep, #1f3a0f) !important;
  padding: 11px 24px;
  border-radius: 2px;
  font-weight: 700 !important;
  text-decoration: none;
}

.navlinks .nav-cta:hover,
.mobile .nav-cta:hover { background: var(--gold-light, #d9bd84); }

/* ==========================================================================
   FLAT SURFACES, site-wide, 8 Sep 2026
   Removes card fills, borders, rounded corners and drop shadows from content
   surfaces so every page reads as one continuous background.

   Deliberately NOT flattened, because flattening would break them:
     - forms (.field input, .form-*, .newsletter-form *), inputs need their box
     - buttons/CTAs (.cta-button, .rw-allcta, .pi-allcta, .blog-cases-cta,
       .service-link, .cta-action), they must still read as buttons
     - icons and numerals (.service-icon, .why-icon, .info-icon, .*-num,
       .service-content li:before), a badge with no shape is a floating glyph
     - deliberate accent bands (.cta-section, .ctabox, .cta-box, .article-cta,
       .newsletter, .hero-card, .blog-cases)
     - .hero and team.html's dark <header>, background-image / dark bands
   ========================================================================== */

.blog-card, .blog-case-card, .case-card, .case-study-card, .commitment,
.deliver-card, .featured-card, .featured-post, .highlight-box,
.industry, .news-item, .pcard, .phase-item, .pi-card,
.pillar-card, .portfolio-item, .process-step, .related-card,
.related-services-list a, .resource-card, .sc-card, .sector-card, .service,
.service-reads, .sp-card, .stat, .stat-block, .team-card, .testimonial,
.vm-vision, .vm-mission, .why-card {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(16, 20, 17, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* containers and bands: remove the panel, no dividing rule needed */
.about-pillars, .client-logo-item, .services-grid, .team-values, .values-bar,
.hseq-intro-text .highlight-line, .featured-card .meta span {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* hover: a rule-colour shift instead of a lift-and-shadow */
.blog-card:hover, .case-card:hover, .deliver-card:hover, .featured-card:hover,
.news-item:hover, .pcard:hover, .pi-card:hover, .portfolio-item:hover,
.related-card:hover, .resource-card:hover, .sc-card:hover, .sector-card:hover,
.sp-card:hover, .team-card:hover, .why-card:hover, .related-services-list a:hover {
  transform: none !important;
  box-shadow: none !important;
  border-top-color: rgba(16, 20, 17, 0.4) !important;
}

/* tags become plain letter-spaced type rather than miniature cards */
.blog-tag, .blog-case-tag, .blog-card-category, .expertise-tag, .pi-tag,
.related-card .related-tag, .sp-card .sp-tag {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  letter-spacing: 0.18em;
}

/* .contact-card (index) and .info-card/.info-item (contact) are deliberate DARK
   panels carrying white text - flattening them stranded the address, phone
   numbers and email on a light background. Excluded from the flatten list above.

   Dark article heroes: .back-link and .article-meta set their own dark colour,
   which beats the white the hero sets on its container - the same direct-vs-
   inherited trap as the page heroes. */
.article-hero .back-link,
.article-hero .article-meta,
.article-hero .article-meta span {
  color: rgba(255, 255, 255, 0.88) !important;
}

.article-hero .article-meta {
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* Service/location page components missed by the first inventory (their rules
   were structured differently), plus image wrappers: images keep their shape
   but lose the drop shadow that made them float above the page. */
.sp-rel, .sp-step, .sp-specwrap {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(16, 20, 17, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sp-rel:hover, .sp-step:hover, .sp-specwrap:hover {
  transform: none !important;
  box-shadow: none !important;
  border-top-color: rgba(16, 20, 17, 0.4) !important;
}

.sp-fig, .service-image, .media {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 10px !important;
}

/* Breadcrumb separators: these inline SVGs carry no width/height attribute and
   no CSS size, so they expanded to 1400x1400 - two full-viewport chevrons on
   every service page. Pre-existing; only became visible once the blanket
   `* { max-width: 100% !important }` in mobile-fixes.css stopped hiding it. */
.breadcrumb svg,
.breadcrumb-list svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto;
  vertical-align: middle;
}


/* ==========================================================================
   BASE NAVIGATION - 8 Sep 2026
   .navbox / .brand / .navlinks / .toggle / .mobile were defined only inside
   each page's inline <style>, and 13 pages carry the nav markup with no inline
   styles at all: contact, team, hseq, privacy-policy, terms-of-service and all
   eight service/location pages. On those pages the navigation rendered
   completely unstyled - a giant logo, plain underlined links, and the mobile
   drawer permanently visible. Verified pre-existing against git HEAD.

   Rules below are the canonical set, lifted verbatim from the pages that do
   style their nav, so pages already carrying these rules render identically.
   ========================================================================== */

.nav{position:fixed;inset:16px 0 auto;z-index:999}
.navbox{width:min(calc(100% - 32px),1380px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border-radius:999px;background:rgba(7,18,10,.78);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.06);padding:7px}
.brand strong,.brand span{display:block}
.brand strong{color:var(--white);font-size:.92rem}
.brand span{color:rgba(255,255,255,.58);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{color:rgba(255,255,255,.72);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.navlinks a:hover,.navlinks a.active{color:var(--white)}

/* Mobile drawer + hamburger: the extraction source (a blog post) has no
   toggle, so these were missing and the drawer showed at desktop width. */
.toggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:none;position:relative}
.toggle span{position:absolute;left:12px;right:12px;height:2px;background:var(--white);transition:.25s var(--ease)}
.toggle span:nth-child(1){top:15px}
.toggle span:nth-child(2){top:21px}
.toggle span:nth-child(3){top:27px}
.toggle.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.toggle.open span:nth-child(2){opacity:0}
.toggle.open span:nth-child(3){top:21px;transform:rotate(-45deg)}
.mobile{display:none;position:fixed;inset:90px 16px auto;padding:18px;border-radius:24px;background:rgba(7,18,10,.96);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);z-index:998}
.mobile.show{display:block}
.mobile a{display:block;color:var(--white);padding:12px 6px;font-weight:700}
.mobile .pill{width:100%;margin-top:10px}
@media(max-width:860px) {
  .toggle{display:inline-block}
}

/* The base nav above is position:fixed. Pages that already styled their own nav
   also carry the top padding to clear it; these 13 never had nav CSS at all, so
   they have no offset and the nav would sit on top of their first heading. */
body.has-fixed-nav {
  padding-top: 104px;
}

/* ==========================================================================
   UNIFIED NAVIGATION - 8 Sep 2026
   The site had two nav designs: a full-width solid bar on index.html and a
   floating rounded "pill" (rgba(7,18,10,.78) + backdrop-blur) on the other 42
   pages. Unified on the solid bar: it matches the flat direction taken across
   the site, and drops backdrop-filter, which re-composites on every scroll
   frame and is costly on mid-range mobile.

   CSS only - no markup or JS changes, so both mobile-menu implementations
   (#navToggle and #toggle/#mobile) keep working untouched.
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  padding: 18px 0;
  background: #1f3a0f;
  border-bottom: 1px solid rgba(200, 168, 100, 0.2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* the pill becomes the bar's inner container */
.navbox {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* match index.html's link treatment on the other 42 pages */
.navlinks {
  gap: 34px;
}

.navlinks a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.navlinks a:hover { color: #fff; }
.navlinks a.active { color: var(--gold, #c8a864); }

/* Chrome links must never be underlined. The 13 pages that shipped without any
   inline styles have no base link rules at all, so their nav, brand and
   breadcrumb links were rendering with the browser default underline. */
.nav a,
.navlinks a,
.nav-links a,
.brand,
.nav-logo,
.mobile a,
.breadcrumb a,
footer a {
  text-decoration: none;
}

.breadcrumb a:hover,
footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   VERTICAL RHYTHM - 8 Sep 2026
   Section padding ranged from 40px to 140px across the site under ~20 different
   class names, so the gap between two sections was as much as 280px. One value
   everywhere. Heroes are excluded: they set their own height and top offset to
   clear the fixed nav.
   ========================================================================== */

section:not(.hero):not(.page-hero):not(.article-hero),
.cta-band {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

@media (max-width: 860px) {
  section:not(.hero):not(.page-hero):not(.article-hero),
  .cta-band {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* Mobile nav switch. This media query lives in each page's inline <style>, so the
   pages that ship without inline styles never hid their desktop links on a phone:
   the links wrapped and the fixed bar grew to 161px, covering the content below. */
@media (max-width: 860px) {
  .navlinks,
  .navcta {
    display: none;
  }

  .toggle {
    display: inline-flex;
  }
}

/* .industry-news-section carried margin-top:-104px so its panel overlapped the
   hero. That was balanced against its old 104px top padding; with the tightened
   36px rhythm the balance broke and its eyebrow landed on the dark hero band,
   dark green on dark green. The pull-up is a floating-panel artifact anyway, so
   the section now flows normally. */
.industry-news-section {
  margin-top: 0 !important;
}

/* ==========================================================================
   Decorative rules removed from label text - 8 Sep 2026
   The eyebrow labels ("INTEGRATED SOLUTIONS", "CORE VALUES", "RECENT WORK" and
   the rest) drew a short 1px dash before the words via a ::before pseudo-element.
   Removed everywhere; the flex `gap` collapses on its own because a
   display:none pseudo-element generates no box.
   .hero-card::before is left alone - it is a panel overlay, not a label dash.
   ========================================================================== */

.eyebrow::before,
.eyebrow::after,
.hero-eyebrow::before,
.hero-eyebrow::after,
.vm-card-eyebrow::before,
.vm-card-eyebrow::after,
.client-band-eyebrow::before,
.client-band-eyebrow::after,
[class*="eyebrow"]::before,
[class*="eyebrow"]::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   ACCESSIBLE GOLD  —  Sep 2026
   The brand golds (#c8a864, #d1aa5d, #c9a04c, #d4af37) all measure roughly
   2.1–2.3:1 against the near-white ground. WCAG AA needs 4.5:1 for body-size
   text and 3:1 for large text. --gold-ink measures 5.5:1 on #fdfcfa and keeps
   the gold identity. Gold on the dark green grounds already passes 4.5:1 and
   is deliberately left alone — the restore block below puts it back wherever
   these same classes sit on a dark ground.
   ========================================================================== */
:root { --gold-ink: #7a5a1e; }

.eyebrow,
.sp-eyebrow,
.client,
.sp-client,
.service-link,
.pillar-num,
.team-title,
.client-band-eyebrow,
.rw-tag,
.tag.loc,
.hero h1 .accent,
.hero h2 .accent,
a[style*="var(--gold)"],
span[style*="var(--gold)"] {
  color: var(--gold-ink) !important;
}

/* Dark grounds keep the bright gold. var(--gold) resolves per page, so each
   page keeps its own gold rather than being flattened to one value. */
.article-hero .eyebrow,
body.dark-hero .page-hero .eyebrow,
.why .eyebrow,
.safety-culture .eyebrow,
.form-cta .eyebrow,
.contact-card .eyebrow,
.info-card .eyebrow,
footer .eyebrow,
.article-hero a[style*="var(--gold)"],
body.dark-hero .page-hero a[style*="var(--gold)"] {
  color: var(--gold, #c8a864) !important;
}

/* .page-hero is dark on nine pages and light on the rest, with no class to
   tell them apart, so those nine carry body.dark-hero. .article-hero is
   always dark. An eyebrow sitting on a gold band needs near-black instead. */
.cta-box .eyebrow,
.ctabox .eyebrow {
  color: #14210c !important;
}

/* Breadcrumbs: dark ink by default, light on the dark heroes. */
.breadcrumb span { color: #5a5f5a !important; }
.article-hero .breadcrumb span,
body.dark-hero .page-hero .breadcrumb span {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Gold label on the dark green contact panel was 4.35:1 — a shade lighter. */
.form-cta-info-title { color: #d9bd84 !important; }

/* ==========================================================================
   BLOG CARD CATEGORY CHIP
   The label was brand green set directly on the card photograph, measuring
   1.06–1.31:1 on three of six cards. The other three passed only because of
   what happened to be behind them, so a chip makes the label photo-proof
   rather than dependent on the image.
   ========================================================================== */
.blog-card-category {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #1f3a0f !important;
  display: inline-block !important;
  padding: 5px 10px !important;
  border-radius: 2px !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   COMMITMENTS SECTION — join the common ground
   It was the only section on pure #ffffff and the only one carrying a
   background texture (an 80px gold blueprint grid), against the single
   flat background agreed for the rest of the site.
   ========================================================================== */
.commitments { background: #fdfcfa !important; }
.commitments::before { content: none !important; display: none !important; }

/* Page-specific contrast fixes found by the sitewide sweep */
.hseq-intro-inner h2 span { color: var(--gold-ink) !important; }   /* 2.13:1 gold on cream */
.ctabox .btn.secondary    { color: #091108 !important;             /* white on the gold CTA, 1.97:1 */
                            border-color: rgba(9, 17, 8, 0.35) !important; }

/* Phone links in the dark contact panel inherit the panel colour rather than
   falling back to the browser's default link blue. */
.form-cta-info-value a { color: inherit !important; text-decoration: none !important; }
.form-cta-info-value a:hover { text-decoration: underline !important; }

/* ==========================================================================
   MOBILE MENU BUTTON  —  Sep 2026
   The shared .toggle button ships empty on every page that has one, and the
   only bars defined were `.toggle span`, which no page supplies — so it
   rendered as a blank outline. Flex was also squashing the 44px circle into
   an oval. Bars are drawn with pseudo-elements instead (middle bar via
   box-shadow), scoped to :empty so a page that swaps its own icon in still
   wins. index.html uses .nav-toggle and is untouched by this.
   ========================================================================== */
.toggle { flex: 0 0 44px; min-width: 44px; padding: 0; cursor: pointer; }

.toggle:empty::before,
.toggle:empty::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--white, #fff);
  transition: transform .25s ease, top .25s ease, box-shadow .25s ease;
}
.toggle:empty::before { top: 15px; box-shadow: 0 6px 0 var(--white, #fff); }
.toggle:empty::after  { top: 27px; }

.toggle.open:empty::before { top: 21px; transform: rotate(45deg);  box-shadow: none; }
.toggle.open:empty::after  { top: 21px; transform: rotate(-45deg); }