/* ENDURO shared footer — single source. Edit here + rebuild; never per-page. */
/* ══════════════ ENDURO SHARED FOOTER v1 (Keystone+) — CSS ══════════════
   Self-contained, namespaced .ef-*. THEME-DRIVEN: --ft-bg / --ft-accent;
   ink auto-flips with bg luminance. Defaults = brand black + brand yellow.
   Built to lift whole into a shared footer file (strip per page, inject once). */
/* COLOUR SCOPE — CTA + footer share these vars, BUT each page's inline "grid reveal" rule force-overrides bg→transparent + ink→dark, so EVERY footer renders as the one white bg-grid. --ft-bg is effectively only live for the dev theme-lab (footer.js); the old per-page bg colours (home-yellow / insights-red) were dead and removed 2026-07-08. */
/* ─────────────────────────────────────────────────────────────────────────────
   SITE-WIDE TYPOGRAPHIC BASELINE (2026-07-10 orphan pass). footer.css is the one
   stylesheet linked on all 49 pages, so this global rule reaches every page. Both properties
   are PROGRESSIVE — engines that lack them fall back to normal wrapping (no breakage) — and
   NEITHER overrides a hard <br>, so the homepage's hard-broken animated folds (#c11, hero,
   IOE title) are untouched (balance no-ops on hard-broken lines).
     • balance = even out short DISPLAY headings → kills lone-word last lines. SCOPED to specific classes, NOT a
       blanket h1/h2/h3: blanket balance RE-BREAKS hard-<br> headings to shorten their longest line — it split the
       homepage "A partner" heading into "A" / "partner" (4 lines) and threatened the reviews / hero / IOE titles.
       So headings whose line breaks are hand-controlled with <br> keep normal wrapping. (2026-07-10)
     • pretty  = optimise only the LAST line of body copy → kills paragraph orphans.
   Belt-and-suspenders with the &nbsp; binds on the closing-CTA heads (portfolio_build.py). */
.art-body h2,
.cta-build, .sec-name, .fc-headline, .art-title, .lead, .cap h3, .proj-title, .next-name, .pf-hero-title .ln { text-wrap: balance; }
p, li,
.art-dek, .lead-dek, .ov-lede, .service-body, .pf-hero-sub, .mvv-body, .s-hero p, .pcard .pm { text-wrap: pretty; }

.ef-closing { --ft-bg:#ffffff; --ft-accent:#191A1C; --ft-ink-rgb:16,24,32; }
.ef { position:relative; padding:0; background:var(--ft-bg); color:rgba(var(--ft-ink-rgb),.74);
  letter-spacing:.01em; transition:background .35s cubic-bezier(.22,1,.36,1), color .35s cubic-bezier(.22,1,.36,1); }

/* ── CLOSING CTA (shared; colour from the .ef-closing vars; dark button works on yellow/red/white) ── */
#cta-build.cta { background:var(--ft-bg); color:var(--ft-accent); display:flex; flex-direction:column; justify-content:center; padding:calc(clamp(48px,6vh,72px) + 15px) 0 calc(clamp(48px,6vh,72px) + 15px); position:relative; z-index:2; transition:background .35s cubic-bezier(.22,1,.36,1); }
/* The +110px top-pad only makes sense when an immersive full-screen fold (the homepage team photo) flows straight into the CTA and needs breathing room. On every other page there's no such fold, so that +110 was just a ~110px void above the CTA — collapsed to the symmetric base pad. Homepage (has #team.tg-sec) keeps the +110. */
body:has(#team.tg-sec) #cta-build.cta { padding-top:calc(clamp(48px,6vh,72px) + 110px); }
/* Mobile + tablet: on the homepage the CTA follows the full-screen team photo, so the +110px top pad leaves too
   much space above the closing-CTA head. Trim ~35px on both. (2026-07-10) */
@media (max-width:960px){ body:has(#team.tg-sec) #cta-build.cta { padding-top:calc(clamp(48px,6vh,72px) + 75px); } }
#cta-build .cta-row { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
/* Closing-CTA on TABLET (641–960): hold the button on the RIGHT beside the heading (like laptop) via nowrap —
   otherwise at narrower tablet widths it wraps below. Mobile (≤640) keeps flex-wrap so the button still drops
   below where the row is genuinely too narrow. (2026-07-10; the tablet-only .cta-br-t line-break was retired when
   the head became the one-line "Start here." — 2026-07-16) */
@media (min-width:641px) and (max-width:960px){
  #cta-build .cta-row { flex-wrap:nowrap; }
}
#cta-build .cta-build { font-family:"Inter",sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(40px,5vw,72px); line-height:.92; letter-spacing:-.03em; margin:0; color:var(--ft-accent); }
#cta-build .cr-btn { display:inline-flex; align-items:center; gap:10px; background:#E43338; color:#fff; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:0 28px; height:52px; border-radius:0; transition:opacity .85s cubic-bezier(.16,.84,.34,1), transform .95s cubic-bezier(.16,.84,.34,1); }
@media (hover: hover) and (pointer: fine) { #cta-build .cr-btn:hover { transform:translateX(4px); transition:transform .2s ease; } }
@media (min-width:961px){ #cta-build .cr-btn { margin-right:var(--cta-tuck, 0); } }   /* pull the Contact Us button left off the far edge to balance a SHORT head; amount set per-page by the build via --cta-tuck on .cta-row (word-count → 120/100/0px, see portfolio_build.py cta_tuck); desktop-only so it never breaks the tablet/mobile wrap (2026-07-16) */
.cta-rv { opacity:0; transform:translateY(48px) scale(.985); transition:opacity .85s cubic-bezier(.16,.84,.34,1), transform .95s cubic-bezier(.16,.84,.34,1); }
.cta-rv:not(.in) { will-change:transform,opacity; }   /* on-demand: promote only while awaiting reveal; dropped once .in (perf — was permanent) */
.cta-rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .cta-rv { transition:none; opacity:1; transform:none; } }
.ef-in { max-width:var(--max); margin:0 auto; padding:56px var(--gutter) 31px; }   /* clean even frame */
.ef-head { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding-bottom:48px; }   /* logo + badge line 1; tagline wraps under; 48 → columns */
.ef-logo svg { display:block; height:26px; width:auto; }
.ef-logo svg path { fill:rgba(var(--ft-ink-rgb),.95); transition:fill .35s cubic-bezier(.22,1,.36,1); }
.ef-tick { width:0; height:15px; overflow:hidden; flex:0 0 auto; position:relative; top:1px; transition:width .5s cubic-bezier(.22,1,.36,1) .15s; }   /* Enduro badge shape — draws in by width; short pre-delay so it lands right after the (now later) trigger */
.ef-tick svg { width:35px; height:auto; display:block; }
.ef-tick svg path { fill:var(--ft-accent); }
.ef.lit .ef-tick { width:35px; }
.ef-tagline { flex:0 0 100%; font-size:13px; line-height:1.55; margin:12px 0 0; text-align:left; color:rgba(var(--ft-ink-rgb),.6); white-space:nowrap; }   /* tagline tucks under the logo, one line; nudged down 20px from -8 → 12 (2026-06-29) */
.ef-tag-br { display:none; }   /* the <br> after "Construction" in the tagline — PHONES only (below) */
@media (max-width:640px) { .ef-tag-br { display:inline; } }   /* phones: tagline wraps after "Construction" (2026-07-10) */
.ef-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding:0; }   /* stroke removed; vertical gaps live on head/area/legal */
.ef-hqlabel { font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ft-accent); margin:0 0 25px; }   /* +7px so the address row lines up with the first column item (Project Consultation / Offices / About Us) */
.ef-nap { display:flex; flex-direction:column; gap:18px; }   /* address(one group) / phone / email breathing room */
.ef-nap a { font-size:13px; line-height:1.5; color:rgba(var(--ft-ink-rgb),.74); text-decoration:none; transition:color .2s; }
@media (hover: hover) and (pointer: fine) { .ef-nap a:hover { color:var(--ft-accent); } }
.ef-soc { display:flex; gap:8px; margin-top:26px; }
.ef-soc a { width:28px; height:28px; display:inline-grid; place-items:center; color:rgba(var(--ft-ink-rgb),.78); font-family:ui-monospace,monospace; font-weight:700; font-size:12px; line-height:1; text-decoration:none; transition:color .2s ease; }
.ef-soc a svg { width:15px; height:15px; display:block; }
@media (hover: hover) and (pointer: fine) {
  .ef-soc a[aria-label*="Facebook"]:hover  { color:#1877F2; }
  .ef-soc a[aria-label*="Instagram"]:hover { color:#E1306C; }
  .ef-soc a[aria-label*="LinkedIn"]:hover  { color:#0A66C2; }
}
.ef-coltitle { font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(var(--ft-ink-rgb),.42); margin:0 0 20px; }
.ef-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.ef-links a { font-size:13px; line-height:1.45; color:rgba(var(--ft-ink-rgb),.74); text-decoration:none; transition:color .2s; }
@media (hover: hover) and (pointer: fine) { .ef-links a:hover { color:var(--ft-accent); } }
.ef-legal { display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px; padding-top:48px; }   /* 48 → copyright */
.ef-legal .ef-copy { font-size:11px; letter-spacing:.03em; color:rgba(var(--ft-ink-rgb),.46); }
.ef-legal a { font-size:11px; letter-spacing:.03em; color:rgba(var(--ft-ink-rgb),.46); text-decoration:none; cursor:pointer; transition:color .2s; }
@media (hover: hover) and (pointer: fine) { .ef-legal a:hover { color:var(--ft-accent); } }
.ef-legal .ef-dot { color:rgba(var(--ft-ink-rgb),.26); }
/* Service-area + credentials row — between the columns and the copyright; site-wide (2026-06-25, moved out of the CTA). */
.ef-area { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 40px; padding:30px 0; }
.ef-area-line { margin:0; font-size:12px; line-height:1.5; color:rgba(var(--ft-ink-rgb),.62); }
@media (max-width:960px) {
  .ef-head { flex-direction:column; align-items:flex-start; gap:20px; }   /* mobile: stack logo ABOVE the tagline + more space between them (2026-06-23) */
  .ef-tagline { margin-left:0; text-align:left; white-space:normal; }       /* mobile: allow the tagline to wrap so it never overflows */
  .ef-tick { display:none; }                /* mobile: hidden per */
  .ef-grid { grid-template-columns:1fr 1fr; gap:34px 30px; }
  .ef-links a, .ef-nap a { padding:6px 0; }
}
@media (max-width:620px) {
  .ef-grid { grid-template-columns:1fr; gap:46px; }   /* mobile: space the Services / Sectors / Company groups apart (2026-06-23) */
}
@media (prefers-reduced-motion:reduce) { .ef-tick { transition:none; } .ef.lit .ef-tick{width:35px;} }
/* DESKTOP — CTA + footer fill one viewport (footer = 100vh − CTA≈299, now the service-area lines moved out of the CTA into the footer); logo · columns · copyright distributed evenly. */
@media (min-width:961px){
  .ef-closing .ef-in { min-height:calc(min(calc(100vh - 299px), calc(640px + (100vh - 939px) * 0.1)) * 1.05); display:flex; flex-direction:column; justify-content:space-between; }   /* capped (+10% put-back on tall screens), then whole footer height scaled +5% — all pages (2026-07-09) */
  /* FLOOR, not zero (2026-07-22). These were 0 so that .ef-in's space-between owned all the
     vertical rhythm — but that only works while content is SHORTER than min-height. On a short
     window the content fills it, space-between has nothing left to distribute, and every gap
     collapses: the tagline landed 4.4px off the column headers at 1280x800 (vs 56.9px at
     1440x900), which read as "spaces missing" on an owner review. A floor guarantees the gap on
     short screens; space-between still adds on top of it on tall ones. */
  .ef-closing .ef-head { padding-bottom:32px; }
  .ef-closing .ef-legal { padding-top:32px; }
  .ef-closing .ef-grid { grid-template-columns:1fr 1fr 1fr 1fr; }   /* 4 equal columns */
  .ef-closing nav[aria-label="Services"], .ef-closing nav[aria-label="Sectors we build in"], .ef-closing nav[aria-label="Company"] { transform:translateX(50px); }   /* link columns shifted right as a group */
  .ef-closing nav[aria-label="Sectors we build in"] { transform:translateX(60px); }   /* Sectors +10 on its own */
}
/* hidden DEV theme toggle — host-gated (localhost/staging) + ` key; removed on live */
.ef-lab { position:fixed; left:16px; bottom:16px; z-index:99998; background:#14171c; color:#fff;
  border:1px solid rgba(255,255,255,.14); border-radius:0; padding:10px 12px;
  font:600 11px/1 "Inter",sans-serif; box-shadow:0 10px 30px -12px rgba(0,0,0,.6); }
.ef-lab[hidden] { display:none; }
.ef-lab .ef-lab-title { display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#E3FF17; margin-bottom:7px; }
.ef-lab .ef-lab-row { display:flex; align-items:center; gap:5px; margin-top:6px; }
.ef-lab .ef-lab-l { width:52px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.ef-lab .ef-lab-sw { width:19px; height:19px; border-radius:0; border:2px solid rgba(255,255,255,.22); background:var(--c); cursor:pointer; padding:0; transition:transform .12s; }
@media (hover: hover) and (pointer: fine) { .ef-lab .ef-lab-sw:hover { transform:scale(1.15); } }
.ef-lab .ef-lab-sw.on { border-color:#fff; }
.ef-lab .ef-lab-h { display:block; font-size:8.5px; color:rgba(255,255,255,.38); margin-top:8px; }