/* MISSING VAR FIX 2026-05-06 — multiple pages (process, services, faq,
   for-architects) reference var(--navy) and var(--bronze) but those vars
   are NOT defined in their <style> blocks. Result: white text on undefined
   bg = unreadable CTA sections at the bottom of those pages. Defining them
   here on :root makes every page see real colors. */
:root {
  --navy: #1a4566;
  --bronze: #c9a25d;
  --deep: #1a4566;
}
/* ======================================================
   Visual overrides 2026-05-06 v2 — header + hero brightness + about-img + portfolio
   ====================================================== */

/* Header: solid dark blue (kills white-flash transparency) */
header.site,
header.site.scrolled {
  background: #1a4566 !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
}
header.site .brand,
header.site.scrolled .brand,
header.site .brand .name,
header.site.scrolled .brand .name {
  color: #ffffff !important;
  text-shadow: none !important;
}
header.site .brand-text .name { font-size: 22px !important; }
header.site .brand img,
header.site.scrolled .brand img {
  width: 68px !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
header.site .brand-text .sub { display: none !important; }
header.site nav.primary a,
header.site.scrolled nav.primary a {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}
header.site nav.primary a:hover,
header.site.scrolled nav.primary a:hover { color: #9dd9f3 !important; }
header.site nav.primary a.active,
header.site.scrolled nav.primary a.active {
  color: #9dd9f3 !important;
  border-bottom-color: #9dd9f3 !important;
}
header.site .cta-phone,
header.site.scrolled .cta-phone {
  background: #9dd9f3 !important;
  color: #1a4566 !important;
}
header.site.scrolled .cta-phone:hover { background: #ffffff !important; }
header.site .menu-toggle,
header.site.scrolled .menu-toggle,
header.site.menu-open .menu-toggle { color: #ffffff !important; }
header.site.menu-open,
header.site.menu-open nav.primary { background: #1a4566 !important; }
header.site.menu-open nav.primary a {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
body { padding-top: 86px; }
body.has-hero, body.has-hero .hero { padding-top: 0; }

/* HERO: reduce dark overlay so the building photo shows brighter */
.hero-cinema::after {
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(26,69,102,.10) 40%,
    rgba(26,69,102,.32) 100%) !important;
}
.hero-cinema::before {
  filter: brightness(1.30) saturate(1.10) contrast(1.03) !important;
}
/* Stronger text shadow so headline stays readable on the brighter image */
.hero-cinema h1,
.hero-cinema .lead {
  text-shadow: 0 2px 28px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4) !important;
}

/* ABOUT page: kill the offset rectangular "outline" decoration that boxed
   the round portrait. Reset the parent container to fit the round portrait. */
.about-img::before { display: none !important; }
.about-img {
  max-width: 320px !important;
  justify-self: center !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The portrait itself: round, centered, soft shadow */
.about-img img,
img[src*="laquanzy"]:not([src*="logo"]) {
  width: 280px !important;
  height: 280px !important;
  max-width: 280px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 16px 50px rgba(26,69,102,.22) !important;
  margin: 0 auto !important;
  display: block !important;
}

/* For-architects: hide his portrait if it appears */
.for-architects-portrait,
body[data-page="for-architects"] img[src*="laquanzy"]:not([src*="logo"]) {
  display: none !important;
}

/* CTA-SECTION REDESIGN 2026-05-06
   Multiple pages have inline-styled CTAs: style="background:var(--navy);color:#fff"
   The previous fix defined --navy as dark blue, which made the CTA visually
   merge with the dark footer below — one giant dark trunk. Better:
   give these sections a soft sky-blue gradient with dark navy text, so they
   read as a distinct band ABOVE the footer instead of an extension of it. */

/* Override the inline-styled navy CTA sections */
section[style*="background:var(--navy)"],
section[style*="background: var(--navy)"],
section[style*="background:var(--deep)"],
section[style*="background: var(--deep)"] {
  background: linear-gradient(135deg, #e8f1f8 0%, #c9e8f7 100%) !important;
  color: #1a4566 !important;
  position: relative;
  border-top: 1px solid rgba(46,111,163,.18);
}

/* Add a subtle hairline AFTER the CTA section to separate from footer */
section[style*="background:var(--navy)"] + footer.site,
section[style*="background:var(--deep)"] + footer.site {
  border-top: 4px solid #c9a25d !important;
}

/* The headlines + paragraphs in those CTA sections */
section[style*="background:var(--navy)"] h2,
section[style*="background:var(--deep)"] h2 {
  color: #1a4566 !important;
}
section[style*="background:var(--navy)"] p,
section[style*="background:var(--deep)"] p {
  color: #3a5470 !important;
}
section[style*="background:var(--navy)"] .eyebrow,
section[style*="background:var(--deep)"] .eyebrow {
  color: #2e6fa3 !important;
}

/* The bronze buttons inside need to pop on the lighter bg now */
section[style*="background:var(--navy)"] a.btn[style*="background:var(--bronze)"],
section[style*="background:var(--deep)"] a.btn[style*="background:var(--bronze)"] {
  background: #1a4566 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(26,69,102,.25) !important;
  transition: all .2s ease !important;
}
section[style*="background:var(--navy)"] a.btn[style*="background:var(--bronze)"]:hover,
section[style*="background:var(--deep)"] a.btn[style*="background:var(--bronze)"]:hover {
  background: #c9a25d !important;
  color: #1a4566 !important;
  transform: translateY(-2px);
}