/* ========================================================================== sonoranintel.com — Design System (Sonoran Intelligence Consulting) Built by Sonoran Intelligence Consulting. Static HTML/CSS/JS site. CONTRACT — read before editing: 1. COLOR TOKENS. Only 4 brand hexes exist in this file's :root, plus their derived support tokens. NO PAGE FILE may hardcode a raw hex. If a page needs a color, it uses one of the --color-* / --line-* custom properties defined below. Token names are a downstream contract used verbatim by every later page task — do not rename them. 2. SECTION-ALTERNATION RULE (locked, adapted from the LBW two-color rule). Sections strictly alternate between exactly two background families. There is no third background color, ever. - DARK sections: class .bg-dark background: var(--color-saguaro) text: var(--color-bone) secondary: var(--color-bone-dim) hairline: var(--line-dark) - LIGHT sections: class .bg-sand background: var(--color-sand) text: var(--color-ink) secondary: var(--color-sand-dim) hairline: var(--line-light) Terracotta (--color-terracotta) is an ACCENT ONLY — CTAs, links, kickers, emphasis, borders. It is never a section background. When a page inserts a new section, flip the neighbors above/below it so the dark/sand/dark/sand chain stays valid all the way down the page. 3. CONTRAST CONTRACT (verified WCAG AA+, see task-1-1 commit message for the computed ratios): - bone text on saguaro bg -> ~10.3:1 - ink text on sand bg -> ~11.9:1 - terracotta-hot on saguaro (inline links/small text) -> ~4.8:1 - ink button-label text on terracotta bg (large/bold) -> ~4.5:1 Buttons keep their OWN internal contrast regardless of which section they sit in (they carry their own bg + text color, not inherited). 4. FONTS load via in each page's (Google Fonts, with preconnect), matching the WTP demo and the current placeholder: Barlow:wght@400;500;600 and Barlow+Condensed:wght@500;600;700. This file only references the font-family stacks, it does not @import. Architecture of this file (mirrors site/white-tanks-plumbing/assets/wtp.css): :root tokens -> reset -> type -> layout primitives -> buttons -> shared components -> mobile media-query stack at the bottom. ========================================================================== */ :root { /* ---- brand color tokens (contract: used by ALL page tasks, no raw hex in page files) ---- */ --color-saguaro: #2D3A2E; /* Saguaro Green, primary dark bg */ --color-terracotta: #C8682E; /* Sunset Terracotta, accent / CTA */ --color-sand: #E8D5B7; /* Desert Sand, light bg */ --color-bone: #F5EDE0; /* Bone White, light text / lightest surface */ /* ---- derived / support tokens ---- */ --color-saguaro-2: #374630; /* slightly raised green, cards on dark */ --color-terracotta-hot: #E2914F; /* lighter terracotta, hover + on-dark inline links (~4.8:1 on saguaro) */ --color-terracotta-deep: #8F4A1E; /* darker terracotta, shadow/active */ --color-ink: #201B16; /* near-black desert brown, text on sand (~11.9:1) */ --color-bone-dim: #B9AF9C; /* muted bone, secondary text on dark (~5.5:1 on saguaro) */ --color-sand-dim: #5C4F3E; /* muted ink, secondary text on sand (~5.5:1 on sand) */ --line-dark: rgba(245, 237, 224, 0.12); /* hairline on dark */ --line-light: rgba(45, 58, 46, 0.14); /* hairline on sand */ /* ---- type scale (fluid, clamp-based) ---- */ --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", "Helvetica Neue", sans-serif; --step-h1: clamp(2.4rem, 5.5vw, 4.2rem); --step-h2: clamp(1.9rem, 3.4vw, 2.8rem); --step-h3: clamp(1.25rem, 2vw, 1.55rem); --step-body: clamp(1rem, 1.4vw, 1.15rem); --step-lede: clamp(1.05rem, 1.6vw, 1.25rem); --step-small: 0.9rem; /* ---- spacing scale (section rhythm) ---- */ --space-xs: 8px; --space-sm: 16px; --space-md: 28px; --space-lg: 48px; --space-xl: 80px; --space-2xl: 120px; --section-pad: clamp(56px, 9vw, 120px); --maxw: 1180px; --radius: 10px; } /* ---------- reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--step-body); background: var(--color-saguaro); color: var(--color-bone); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; } ::selection { background: var(--color-terracotta); color: var(--color-bone); } /* ---------- type ---------- */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: 0.005em; } h1 { font-size: var(--step-h1); font-weight: 700; } h2 { font-size: var(--step-h2); } h3 { font-size: var(--step-h3); font-weight: 600; } p { max-width: 68ch; } .kicker { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.28em; color: var(--color-terracotta); display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-sm); } .bg-sand .kicker { color: var(--color-terracotta-deep); } .kicker::before { content: ""; width: 36px; height: 2px; background: currentColor; flex-shrink: 0; } .lede { font-size: var(--step-lede); max-width: 62ch; color: var(--color-bone-dim); } .bg-sand .lede { color: var(--color-sand-dim); } small, .text-small { font-size: var(--step-small); } a { color: var(--color-terracotta-hot); transition: color 0.2s ease; } .bg-sand a { color: var(--color-terracotta-deep); } a:hover { color: var(--color-terracotta); } /* ---------- layout primitives ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 28px); } .section { padding: var(--section-pad) 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; } /* section-alternation utilities (see header comment, contract) */ .bg-dark { background: var(--color-saguaro); color: var(--color-bone); } .bg-sand { background: var(--color-sand); color: var(--color-ink); } /* scroll-in reveal states (CSS only — Task 1.2 wires the IntersectionObserver) */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } /* above-the-fold load-in variant, staggered via .d1/.d2/.d3/.d4 delay helpers */ .reveal-load { opacity: 0; transform: translateY(24px); animation: sic-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .reveal-load.d1 { animation-delay: 0.08s; } .reveal-load.d2 { animation-delay: 0.22s; } .reveal-load.d3 { animation-delay: 0.36s; } .reveal-load.d4 { animation-delay: 0.52s; } @keyframes sic-rise { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-load { opacity: 1; transform: none; animation: none; transition: none; } } /* ---------- buttons ---------- */ /* min 44x44px touch target on every variant */ .btn-primary, .btn-secondary, .btn-call, .btn-text { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-family: var(--font-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; border: 0; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* dominant site-wide CTA: "Book a free strategy call" */ .btn-primary { background: var(--color-terracotta); color: var(--color-ink); font-size: 1.05rem; padding: 15px 30px; border-radius: var(--radius); } .btn-primary:hover { background: var(--color-terracotta-hot); transform: translateY(-2px); } /* outline/ghost, readable on both dark and sand sections */ .btn-secondary { background: transparent; color: var(--color-bone); box-shadow: inset 0 0 0 1.5px var(--line-dark); font-size: 1rem; padding: 13px 26px; border-radius: var(--radius); } .btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--color-terracotta); color: var(--color-terracotta-hot); } .bg-sand .btn-secondary { color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--line-light); } .bg-sand .btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--color-terracotta-deep); color: var(--color-terracotta-deep); } /* compact icon buttons: phone call + SMS text, sit side by side */ .btn-call, .btn-text { background: var(--color-terracotta); color: var(--color-ink); font-size: 0.92rem; padding: 0 18px; border-radius: calc(var(--radius) - 4px); } .btn-call:hover, .btn-text:hover { background: var(--color-terracotta-hot); } .btn-text { background: transparent; color: var(--color-bone); box-shadow: inset 0 0 0 1.5px var(--line-dark); } .bg-sand .btn-text { color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--line-light); } .btn-text:hover { box-shadow: inset 0 0 0 1.5px var(--color-terracotta); color: var(--color-terracotta); } .btn-call svg, .btn-text svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } /* ========================================================================== Shared components (hard contract — exact class names consumed downstream) ========================================================================== */ /* ---------- stat strip / stat card ---------- */ .stat-strip { display: flex; flex-wrap: wrap; gap: var(--space-md); } .stat-card { flex: 1 1 200px; padding: var(--space-md); border-radius: var(--radius); background: var(--color-saguaro-2); border-top: 3px solid var(--color-terracotta); } .bg-sand .stat-card { background: var(--color-bone); border-top-color: var(--color-terracotta-deep); } .stat-card .stat-number { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--color-terracotta-hot); } .bg-sand .stat-card .stat-number { color: var(--color-terracotta-deep); } .stat-card .stat-label { display: block; margin-top: var(--space-xs); font-size: 1rem; color: var(--color-bone); } .bg-sand .stat-card .stat-label { color: var(--color-ink); } .stat-source { display: block; margin-top: var(--space-sm); font-size: 0.82rem; font-style: italic; color: var(--color-bone-dim); border-top: 1px solid var(--line-dark); padding-top: var(--space-xs); } .bg-sand .stat-source { color: var(--color-sand-dim); border-top-color: var(--line-light); } /* ---------- source/citation line (consolidated 3.R from Home's page-scoped .source-line + About's .about-source — same pattern, unified). Renders a stat/claim's source+date as small italic text on its own line, per the copy pack's pack-wide render directive. Used in body prose; .stat-source above is the equivalent treatment for inside a .stat-card. ---------- */ .source-line { display: block; font-style: italic; font-size: 0.85rem; color: var(--color-bone-dim); margin-top: 6px; } .bg-sand .source-line { color: var(--color-sand-dim); } /* ---------- before/after pair ---------- */ .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: center; } .ba-pair figure { position: relative; } .ba-pair figcaption { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.14em; font-size: 0.85rem; color: var(--color-terracotta-hot); margin-bottom: var(--space-xs); } .bg-sand .ba-pair figcaption { color: var(--color-terracotta-deep); } .ba-pair img { border-radius: var(--radius); width: 100%; height: auto; } /* metric variant: "17 clicks -> 1,647 clicks" */ .ba-pair.ba-metric { grid-template-columns: 1fr auto 1fr; text-align: center; } .ba-pair.ba-metric .ba-before, .ba-pair.ba-metric .ba-after { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); } .ba-pair.ba-metric .ba-before { color: var(--color-bone-dim); } .bg-sand .ba-pair.ba-metric .ba-before { color: var(--color-sand-dim); } .ba-pair.ba-metric .ba-after { color: var(--color-terracotta-hot); } .bg-sand .ba-pair.ba-metric .ba-after { color: var(--color-terracotta-deep); } .ba-pair.ba-metric .ba-arrow { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-terracotta); } .ba-pair.ba-metric .ba-metric-label { display: block; font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: normal; font-size: 0.95rem; color: var(--color-bone-dim); margin-top: 6px; } .bg-sand .ba-pair.ba-metric .ba-metric-label { color: var(--color-sand-dim); } /* ---------- AEO "at a glance" summary block ---------- */ /* hard contract: sand bg + 4px terracotta left border + saguaro text, always, regardless of which section (.bg-dark/.bg-sand) it's placed inside */ .aeo-summary { background: var(--color-sand); border-left: 4px solid var(--color-terracotta); color: var(--color-saguaro); padding: var(--space-md); border-radius: 0 var(--radius) var(--radius) 0; } .aeo-summary .aeo-claim { font-weight: 600; font-size: 1.1rem; line-height: 1.5; } .aeo-summary .aeo-source { display: block; margin-top: var(--space-xs); font-size: 0.82rem; color: var(--color-sand-dim); } .aeo-summary p { margin-top: var(--space-sm); color: var(--color-sand-dim); } .aeo-summary ul { margin-top: var(--space-sm); display: grid; gap: 6px; } .aeo-summary ul li { padding-left: 20px; position: relative; color: var(--color-sand-dim); } .aeo-summary ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--color-terracotta); } /* the .aeo-claim

caps at the global 68ch measure, but the box itself had no cap of its own, leaving visible dead space to the right of the text on wide screens (found in 3.2/3.3, fixed sitewide at 3.R) */ @media (min-width: 1400px) { .aeo-summary { max-width: 840px; } } /* ---------- FAQ accordion (consolidated 3.R from Home's page-scoped .faq-item + About's .about-faq-item + Services' .svc-faq-item + Contact's .contact-faq — same spacing pattern under 4 different names, unified to one shared component). Native

/, no JS. ---------- */ .faq-list { margin-top: var(--space-lg); display: grid; gap: 0; } .faq-item { border-bottom: 1px solid var(--line-dark); } .bg-sand .faq-item { border-bottom-color: var(--line-light); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 14px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--color-terracotta-hot); flex-shrink: 0; } .bg-sand .faq-item summary::after { color: var(--color-terracotta-deep); } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { padding-bottom: var(--space-sm); color: var(--color-bone-dim); } .bg-sand .faq-item p { color: var(--color-sand-dim); } .faq-item p.source-line { padding-bottom: var(--space-sm); margin-top: -4px; } /* ---------- service-page copy stack (consolidated 5.R from 7 page-scoped .svc-copy blocks: Services, GEO, AI Consultant Phoenix, and all 4 blog posts each defined the identical rule) ---------- */ .svc-copy { margin-top: var(--space-sm); } .svc-copy > * + * { margin-top: var(--space-sm); } .svc-callout { background: var(--color-saguaro-2); border-left: 4px solid var(--color-terracotta); padding: var(--space-sm) var(--space-md); border-radius: 0 var(--radius) var(--radius) 0; } .bg-sand .svc-callout { background: var(--color-bone); border-left-color: var(--color-terracotta-deep); } /* ---------- blog post byline (consolidated 5.R from 4 identical page-scoped .post-meta blocks, one per blog post) ---------- */ .post-meta { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--color-bone-dim); margin-top: var(--space-xs); } /* ---------- industry-page bullet list (consolidated 5.R from the plumber + painter pages' identical page-scoped .industry-list block) ---------- */ .industry-list { display: grid; gap: 10px; margin-top: var(--space-sm); } .industry-list li { padding-left: 20px; position: relative; } .industry-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--color-terracotta-deep); } .bg-dark .industry-list li::before { background: var(--color-terracotta); } /* ---------- disclosure banner (WTP case study, proposal-stage) ---------- */ .disclosure-banner { display: flex; align-items: flex-start; gap: var(--space-sm); background: var(--color-saguaro-2); border-left: 4px solid var(--color-terracotta); color: var(--color-bone); padding: var(--space-sm) var(--space-md); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.98rem; } .bg-sand .disclosure-banner { background: var(--color-bone); color: var(--color-ink); border-left-color: var(--color-terracotta-deep); } .disclosure-banner strong { color: var(--color-terracotta-hot); } .bg-sand .disclosure-banner strong { color: var(--color-terracotta-deep); } /* ---------- contact form (Task 2.2 — site/_includes/contact-form*.html) ---------- */ /* Card treatment on either bg: dark card even inside .bg-sand sections, so inputs keep one fixed contrast pair regardless of placement (buttons do the same, see the contract note above). */ .contact-form { display: grid; gap: var(--space-md); background: var(--color-saguaro-2); padding: clamp(24px, 4vw, 36px); border-top: 3px solid var(--color-terracotta); border-radius: var(--radius); max-width: 560px; } .contact-form--condensed { max-width: 420px; gap: var(--space-sm); } .form-row { display: grid; gap: 7px; } .form-row label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--color-bone-dim); } .form-row input, .form-row textarea { width: 100%; background: var(--color-saguaro); border: 1px solid var(--line-dark); border-radius: calc(var(--radius) - 4px); color: var(--color-bone); font-family: var(--font-body); font-size: 1rem; padding: 13px 14px; transition: border-color 0.2s ease; } .form-row textarea { resize: vertical; min-height: 100px; } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--color-terracotta); } .form-row input::placeholder, .form-row textarea::placeholder { color: var(--color-bone-dim); } .form-hint { margin-top: -8px; font-size: 0.85rem; color: var(--color-bone-dim); } .contact-form .cf-turnstile { display: flex; justify-content: center; } .contact-form .btn-primary { width: 100%; } .form-status { min-height: 1.3em; font-size: 0.95rem; } .form-status--ok { color: var(--color-terracotta-hot); } .form-status--error { color: var(--color-terracotta-hot); font-weight: 600; } /* honeypot: off-screen, not display:none (some bots skip display:none checks) */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- booking embed (Task 2.3 — site/_includes/booking-embed.html) ---------- */ /* Google's iframe ships a fixed pixel height; force it fluid width and tall enough on mobile that the booking form is never clipped. */ .booking-embed { width: 100%; max-width: 720px; margin: 0 auto; } .booking-embed iframe { display: block; width: 100%; min-height: 700px; border-radius: var(--radius); } @media (max-width: 480px) { .booking-embed iframe { min-height: 760px; } } .booking-fallback { max-width: 720px; margin: var(--space-sm) auto 0; text-align: center; font-size: 0.9rem; color: var(--color-bone-dim); } .bg-sand .booking-fallback { color: var(--color-ink); } .booking-fallback a { color: var(--color-terracotta-hot); } .bg-sand .booking-fallback a { color: var(--color-terracotta-deep); } /* ========================================================================== Site chrome (Task 1.2 — header, nav, footer, sticky mobile CTA bar) Consumed by site/_template.html and every page copied from it. ========================================================================== */ /* clears the fixed .site-header below. A page with a full-bleed hero directly under the header may opt out with `margin-top: -76px` on its own hero section (plus matching internal top padding); every other page keeps this default so content never renders underneath the header. */ body { padding-top: 76px; } /* ---------- brand mark (two-tone saguaro/peak SVG, header + footer) ---------- */ .mark-fill-bone { fill: var(--color-bone); } .mark-fill-terracotta { fill: var(--color-terracotta); } /* ---------- header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: linear-gradient(to bottom, rgba(45, 58, 46, 0.94), rgba(45, 58, 46, 0.86)); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-dark); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 28px); display: flex; align-items: center; gap: 22px; height: 76px; } .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; } .brand svg { width: 40px; height: 26px; flex-shrink: 0; } .brand-name { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 1.2rem; letter-spacing: 0.09em; color: var(--color-bone); line-height: 1.1; } /* compact phone chip: full number on wide screens, icon + "Call" on narrow */ .call-mini { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-terracotta); color: var(--color-ink); min-height: 44px; padding: 0 18px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.92rem; white-space: nowrap; border-radius: calc(var(--radius) - 4px); transition: background 0.2s ease; } .call-mini:hover { background: var(--color-terracotta-hot); } .call-mini svg { width: 15px; height: 15px; fill: var(--color-ink); flex-shrink: 0; } .call-mini .num { display: inline; } .call-mini::after { content: ""; } .menu-toggle { display: none; background: none; border: 0; color: var(--color-bone); font-size: 1.6rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; } .nav { display: flex; align-items: center; gap: 24px; } .nav a { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: 0.96rem; letter-spacing: 0.1em; color: var(--color-bone); position: relative; padding: 6px 0; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--color-terracotta); transition: width 0.25s ease; } .nav a:hover::after, .nav a.active::after { width: 100%; } .nav a.active { color: var(--color-terracotta-hot); } .nav .nav-cta { padding: 12px 22px; font-size: 0.92rem; } @media (max-width: 820px) { .nav { position: fixed; top: 76px; left: 0; right: 0; z-index: 49; max-height: calc(100vh - 76px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; background: rgba(45, 58, 46, 0.98); padding: 10px clamp(20px, 4vw, 28px) 26px; border-bottom: 1px solid var(--line-dark); transform: translateY(-130%); transition: transform 0.3s ease; } .nav.open { transform: none; } .nav a { padding: 15px 0; font-size: 1.1rem; border-bottom: 1px solid var(--line-dark); } .nav .nav-cta { border-bottom: 0; margin-top: 14px; width: 100%; justify-content: center; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; } .call-mini .num { display: none; } .call-mini::after { content: "Call"; } } /* narrowest phones (~360px): brand+call-mini+menu-toggle don't fit the 820px values; drop the wordmark and keep the icon-only brand link (aria-label preserves the accessible name) so the header never clips the tap targets */ @media (max-width: 370px) { .header-inner { gap: 14px; } .brand-name { display: none; } /* icon-only brand collapses to the 26px SVG without the wordmark's line-height contributing height; force a proper tap target on both header + footer marks */ .brand { min-height: 44px; } } /* ---------- footer (NAP block, dark saguaro, chrome not a content section) ---------- */ .site-footer { background: var(--color-saguaro); color: var(--color-bone); border-top: 1px solid var(--line-dark); padding: var(--space-2xl) 0 var(--space-lg); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-xl); } .foot-brand .brand { padding: 8px 0; } /* footer logo link isn't in a fixed-height row like the header; pad its tap target to clear the 32px secondary-link minimum */ .foot-tagline { color: var(--color-bone-dim); font-size: 0.98rem; max-width: 38ch; margin: var(--space-sm) 0 var(--space-md); } .foot-col h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.85rem; color: var(--color-terracotta-hot); margin-bottom: var(--space-sm); font-weight: 600; } .foot-col ul { display: grid; gap: 9px; color: var(--color-bone-dim); font-size: 0.96rem; } .foot-col ul a:hover { color: var(--color-terracotta-hot); } .foot-bottom { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line-dark); color: var(--color-bone-dim); font-size: 0.85rem; } /* quick contact actions row (footer + contact sections), reused site-wide */ .quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 var(--space-md); } /* ---------- scroll-gated sticky mobile CTA bar ---------- */ .sticky-actions { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35); transform: translateY(110%); transition: transform 0.3s ease; } body.show-sticky .sticky-actions { transform: none; } .sticky-primary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-terracotta); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; padding: 15px 10px calc(15px + env(safe-area-inset-bottom)); } .sticky-icon { display: flex; align-items: center; justify-content: center; width: 60px; background: var(--color-saguaro-2); color: var(--color-bone); padding-bottom: env(safe-area-inset-bottom); } .sticky-icon svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; } @media (max-width: 820px) { .sticky-actions { display: flex; } body { padding-bottom: 64px; } } /* ---------- responsive (chrome) ---------- */ @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: var(--space-lg); } } @media (max-width: 560px) { .foot-col ul a { display: inline-block; padding: 4px 0; } } /* ---------- responsive ---------- */ @media (max-width: 960px) { .stat-card { flex-basis: 45%; } } @media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: var(--space-lg); } .ba-pair { grid-template-columns: 1fr; } .ba-pair.ba-metric { grid-template-columns: 1fr; } .ba-pair.ba-metric .ba-arrow { transform: rotate(90deg); margin: 4px auto; } } @media (max-width: 560px) { body { font-size: 16px; } .section { padding: clamp(48px, 12vw, 76px) 0; } .stat-strip { gap: var(--space-sm); } .stat-card { flex-basis: 100%; } .kicker { letter-spacing: 0.18em; } .btn-primary, .btn-secondary { width: 100%; } .contact-form { padding: 22px; } }