/* Hallmark · macrostructure: Marquee Hero · tone: bold-established-premium · anchor hue: gold
 * theme: Freccia Construction official brand guide (April 2025 v2)
 * paper: Porcelain White #F4F2ED · accent: Gold #B1975A · display: Lora · body: Montserrat
 * axes: dark / serif-headers / warm-gold
 */

:root {
  /* ── Brand colours (Freccia brand guide, main) ──────── */
  --color-navy:        #1E1B18;   /* Obsidian Black */
  --color-navy-deep:   #141210;
  --color-navy-mid:    #2A2621;
  --color-gold:        #B1975A;   /* Gold */
  --color-gold-light:  #C4AD79;
  --color-gold-dark:   #8F7A47;

  /* ── Secondary palette (Freccia brand guide) ────────── */
  --color-walnut-taupe:   #9C8F80;
  --color-light-gray:     #D9D9D9;
  --color-light-blue-gray:#DCE5EC;
  --color-slate-blue:     #3D5D75;
  --color-soft-green:     #8AA45E;
  --color-warm-gray-5:    #ACA39A;  /* Pantone Warm Gray 5 C, added 2026-08-03 per RJ's request */

  /* ── Paper / surface ────────────────────────────────── */
  --color-paper:       #F4F2ED;   /* Porcelain White */
  --color-paper-2:     #EAE7DF;
  --color-white:       #FFFFFF;

  /* ── Text ───────────────────────────────────────────── */
  --color-ink:         #1E1B18;
  --color-ink-2:       #3D3934;
  --color-ink-3:       #6B6560;
  --color-ink-on-dark: #F4F2ED;
  --color-ink-muted:   #A39D93;

  /* ── Semantic ───────────────────────────────────────── */
  --color-accent:      var(--color-gold);
  --color-surface:     var(--color-paper);
  --color-border:      #DAD5CB;
  --color-focus:       var(--color-gold);
  --color-overlay:     rgba(30, 27, 24, 0.72);
  --color-overlay-deep:rgba(20, 18, 16, 0.85);

  /* ── Typography (Freccia brand guide) ────────────────── */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Type scale ─────────────────────────────────────── */
  --text-display:   clamp(3rem, 7vw, 5.5rem);
  --text-display-s: clamp(2rem, 4.5vw, 3.5rem);
  --text-h1:        clamp(2rem, 4vw, 3rem);
  --text-h2:        clamp(1.5rem, 2.5vw, 2.25rem);
  --text-h3:        clamp(1.125rem, 1.8vw, 1.5rem);
  --text-lg:        1.125rem;
  --text-base:      1rem;
  --text-sm:        0.875rem;
  --text-xs:        0.75rem;

  /* ── Spacing (4pt scale) ────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Layout ─────────────────────────────────────────── */
  --max-w:     1280px;
  --max-w-text: 720px;
  --gutter:    clamp(1rem, 4vw, 2rem);
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* ── Motion ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    280ms;
  --dur-slow:    480ms;
  --dur-enter:   600ms;
}

/* ── Footer (shared sitewide — one format, every page) ─── */
.footer { background: var(--color-navy-deep); padding: var(--space-16) var(--space-8) var(--space-8); border-top: 1px solid oklch(100% 0 0 / 0.06); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid oklch(100% 0 0 / 0.08); }
.footer-brand img { height: 44px; width: auto; margin-bottom: var(--space-4); }
.footer-tagline { font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 1.65; max-width: 260px; }
.footer-address { font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 1.8; margin-top: var(--space-4); }
.footer-connect { margin-top: var(--space-6); }
.footer-connect-title { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; margin-bottom: var(--space-3); }
.social-icons { display: flex; gap: var(--space-3); }
.social-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; background: var(--color-navy-mid); color: var(--color-ink-on-dark); transition: background 0.2s, color 0.2s; }
.social-icon:hover { background: var(--color-gold); color: var(--color-navy); }
.social-icon svg { width: 18px; height: 18px; fill: currentColor; }
.footer-col-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { font-size: var(--text-sm); color: var(--color-ink-muted); transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--color-ink-on-dark); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-8); gap: var(--space-4); flex-wrap: wrap; }
.footer-copy { font-size: var(--text-xs); color: var(--color-ink-3); }
.footer-legal { display: flex; gap: var(--space-6); }
.footer-legal a { font-size: var(--text-xs); color: var(--color-ink-3); transition: color var(--dur-fast); }
.footer-legal a:hover { color: var(--color-ink-on-dark); }

@media (max-width: 1024px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr; } .footer { padding-left: var(--space-5); padding-right: var(--space-5); } }

/* PARTNERS STRIP — "Companies We've Worked With" logo showcase, shared across index/commercial/portfolio */
/* NOTE (2026-08-03): background matched to var(--color-paper) per RJ's request, it didn't match the
   rest of the page. Part of the page-by-page secondary color review, more sections to come. */
.partners-strip { background: var(--color-paper); padding: var(--space-16) var(--space-8); text-align: center; }
.partners-strip .partners-eyebrow { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); font-weight: 600; margin-bottom: var(--space-8); }
.partners-logos { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-10) var(--space-12); }
.partners-logos--wide { max-width: 1320px; }
.partners-logos img { height: 110px; width: 170px; object-fit: contain; opacity: 0.9; transition: opacity 0.2s, transform 0.2s; }
.partners-logos img:hover { opacity: 1; transform: translateY(-2px); }
.partners-logo-text { height: 110px; width: 170px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--color-ink-2); font-weight: 600; transition: opacity 0.2s, transform 0.2s; }
.partners-logo-text:hover { opacity: 1; transform: translateY(-2px); }
/* Force exactly 6 per row regardless of viewport width, so 16 logos always land 6-6-4 */
.partners-logos--wide img, .partners-logos--wide .partners-logo-text { width: calc((100% - 5 * var(--space-12)) / 6); flex: 0 0 auto; }
@media (max-width: 768px) { .partners-logos { gap: var(--space-6); } .partners-logos img { height: 64px; width: 100px; } .partners-logo-text { height: 64px; width: 100px; font-size: 1.15rem; } .partners-logos--wide img, .partners-logos--wide .partners-logo-text { width: calc((100% - 1 * var(--space-6)) / 2); } }

/* GIVE BACK STRIP — "We Care About Our Community" charity/community logo showcase */
/* NOTE: was styled with Slate Blue for visual distinction from "Companies We've Worked With" (2026-07-31),
   reverted to neutral per RJ's request pending a full review of where secondary brand colors should go
   sitewide. See PENDING_SECONDARY_COLOR_REVIEW note. Color variant classes below are left defined but
   unused so this can be reapplied without rebuilding.
   2026-08-03: background matched to var(--color-paper), same fix as .partners-strip, it didn't match
   the rest of the page either. */
.giveback-strip { background: var(--color-paper); padding: var(--space-16) var(--space-8); text-align: center; }