version. */ .eyebrow { font-family: var(--font-body); line-height: 1.4; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-hover); } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: currentColor; display: inline-block; } .lede { font-size: var(--text-md); color: var(--text-muted); line-height: 1.6; max-width: 46ch; } /* focus visibility (a11y §1) */ :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ================= Layout ================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-9); } .section--tight { padding-block: var(--space-8); } .section--dark { background: var(--color-charcoal); color: var(--color-ink-inverse); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-ink-inverse); } .section--dark .lede { color: var(--color-muted-inverse); } .section--paper { background: var(--color-paper); } .section--surface { background: var(--color-surface); } .grid { display: grid; gap: var(--space-6); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1023px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ================= Buttons ================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.95em 1.7em; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); touch-action: manipulation; min-height: 44px; } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--color-ink); border: 1.5px solid var(--border); } .btn--ghost:hover { border-color: var(--color-ink); } .section--dark .btn--ghost { color: var(--color-ink-inverse); border-color: var(--border-inverse); } .section--dark .btn--ghost:hover { border-color: var(--color-ink-inverse); } .btn--on-dark-ghost { color: var(--color-ink-inverse); border: 1.5px solid var(--color-border-inverse); } .btn--on-dark-ghost:hover { border-color: var(--color-ink-inverse); } .btn--sm { padding: 0.7em 1.3em; font-size: var(--text-xs); } .btn--arrow svg { transition: transform var(--dur-fast) var(--ease-out); } .btn--arrow:hover svg { transform: translateX(3px); } /* ================= Header / Nav ================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 248, 244, 0.82); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .site-header.is-scrolled { border-bottom-color: var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); gap: var(--space-6); } .brand { display: flex; align-items: center; gap: 0.5rem; } .brand__mark { width: 34px; height: auto; flex-shrink: 0; } /* Wordmark: Newsreader's tighter optical size, condensed tracking, and a smaller gap to the mark so the lockup reads as one compact unit. */ .brand__word { font-family: 'Archivo Narrow', 'Arial Narrow', var(--font-body), sans-serif; font-weight: 700; font-size: 1.22rem; letter-spacing: 0.005em; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; } .brand__word span { color: var(--accent); } .nav-desktop { display: flex; align-items: center; gap: var(--space-7); } .nav-desktop__links { display: flex; gap: var(--space-6); } .nav-desktop__links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-charcoal-2); position: relative; padding-block: 0.3rem; } .nav-desktop__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out); } .nav-desktop__links a:hover { color: var(--color-ink); } .nav-desktop__links a:hover::after, .nav-desktop__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav-desktop__links a[aria-current="page"] { color: var(--color-ink); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .nav-toggle__bars { position: relative; width: 20px; height: 14px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.6px; background: var(--color-ink); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 6px; } .nav-toggle__bars span:nth-child(3) { top: 12px; } .nav-open .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); } .nav-mobile { position: fixed; inset: 0; top: 0; background: var(--color-paper); z-index: 99; display: flex; flex-direction: column; padding: calc(var(--space-9) + env(safe-area-inset-top)) var(--gutter) var(--space-8); transform: translateY(-100%); opacity: 0; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); visibility: hidden; } .nav-open .nav-mobile { transform: translateY(0); opacity: 1; visibility: visible; } .nav-mobile__links { display: flex; flex-direction: column; gap: var(--space-2); } .nav-mobile__links a { font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 2.4rem); padding-block: var(--space-3); border-bottom: 1px solid var(--border); display: block; } .nav-mobile__footer { margin-top: auto; padding-top: var(--space-6); color: var(--text-muted); font-size: var(--text-sm); } @media (max-width: 899px) { .nav-desktop__links { display: none; } .nav-toggle { display: inline-flex; } } @media (min-width: 900px) { .nav-mobile { display: none; } } /* Phones: logo + "Book a Consultation" + menu button need ~455px, so below that the menu button was pushed off-screen and the page scrolled sideways. The header button steps aside; the hero CTA and the menu's Contact link cover booking. Logo and menu button never shrink below their tap size. */ .brand, .nav-toggle { flex-shrink: 0; } @media (max-width: 499px) { .site-header__inner { gap: var(--space-4); } .nav-desktop .btn { display: none; } } /* ================= Hero ================= */ .hero { position: relative; overflow: hidden; padding-block: var(--space-10) var(--space-9); } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; } @media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; } } .hero__eyebrow { margin-bottom: var(--space-4); } .hero h1 { margin-bottom: var(--space-5); } .hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; } .hero__stats { display: flex; gap: var(--space-7); margin-top: var(--space-8); flex-wrap: wrap; } .hero__stat-num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); display: block; } .hero__stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .hero__visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; } .hero__visual img { width: 100%; height: 100%; object-fit: cover; } .hero__visual-tag { position: absolute; left: var(--space-5); bottom: var(--space-5); background: rgba(28,27,26,0.72); backdrop-filter: blur(6px); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-size: var(--text-xs); letter-spacing: 0.04em; } /* subtle background motif */ .bg-motif { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 85% 10%, rgba(238,124,49,0.10), transparent 45%); z-index: -1; } /* ================= Cards ================= */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-orange-light); color: var(--accent-hover); margin-bottom: var(--space-5); } .card h3 { margin-bottom: var(--space-3); } .card p { color: var(--text-muted); font-size: var(--text-sm); } .card__link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); } .card__link svg { transition: transform var(--dur-fast) var(--ease-out); } .card:hover .card__link svg { transform: translateX(3px); } /* Service card variant with image */ .service-card { display: block; border-radius: var(--radius-md); overflow: hidden; position: relative; background: var(--color-charcoal); aspect-ratio: 4/5; } .service-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .service-card:hover img { transform: scale(1.06); } .service-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,27,26,0) 35%, rgba(20,19,18,0.88) 100%); } .service-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5); z-index: 2; color: #fff; } .service-card__num { font-size: var(--text-xs); color: var(--color-orange); letter-spacing: 0.1em; } .service-card__body h3 { color: #fff; margin-block: var(--space-2); } .service-card__body p { color: rgba(255,255,255,0.78); font-size: var(--text-sm); margin-bottom: var(--space-4); max-width: 34ch; } /* Service grid: all eight service lines in a 4 x 2 block, so the whole offering is visible at once. Cards and their type step down to suit. */ .grid--services { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } @media (max-width: 1199px) { .grid--services { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 899px) { .grid--services { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 559px) { .grid--services { grid-template-columns: 1fr; } } .grid--services .service-card { aspect-ratio: 3/4; } .grid--services .service-card::after { background: linear-gradient(180deg, rgba(28,27,26,0) 28%, rgba(20,19,18,0.9) 100%); } .grid--services .service-card__body { padding: var(--space-4); } .grid--services .service-card__body h3 { font-size: var(--text-md); margin-block: 0.35rem 0.3rem; } .grid--services .service-card__body p { font-size: var(--text-xs); line-height: 1.45; margin-bottom: 0; max-width: 30ch; } /* Gallery */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } @media (max-width: 1023px) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .gallery { grid-template-columns: 1fr; } } .gallery__item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--color-charcoal); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .gallery__item:hover img { transform: scale(1.05); } .gallery__item--tall { aspect-ratio: 4/5; } .gallery__caption { position: absolute; inset: auto 0 0 0; padding: var(--space-4); background: linear-gradient(180deg, transparent, rgba(20,19,18,0.85)); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .gallery__item:hover .gallery__caption { opacity: 1; transform: translateY(0); } /* Touch devices can't hover — keep captions visible. */ @media (hover: none) { .gallery__caption { opacity: 1; transform: translateY(0); } } .gallery__caption strong { display: block; font-size: var(--text-sm); } .gallery__caption span { font-size: var(--text-xs); color: rgba(255,255,255,0.75); } /* Rebuild block — two-column panel used for the Palisades Fire section */ .rebuild { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-7); } @media (max-width: 899px) { .rebuild { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); } } .rebuild h3 { font-size: var(--text-xl); margin: var(--space-3) 0 var(--space-4); } .rebuild p { color: var(--text-muted); margin-bottom: var(--space-4); max-width: 46ch; } .rebuild__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); } .rebuild__list { display: flex; flex-direction: column; gap: var(--space-4); } .rebuild__list li { padding-left: var(--space-5); position: relative; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; } .rebuild__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 2px; background: var(--accent); } .rebuild__list strong { display: block; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--color-ink); margin-bottom: 2px; } /* Image credit line — attribution for third-party / public domain imagery */ .img-credit { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-3); } .section--dark .img-credit { color: var(--color-muted-inverse); } /* Case study block */ .case-study { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-8); border-top: 1px solid var(--border); } .case-study:first-of-type { border-top: 0; } @media (max-width: 899px) { .case-study { grid-template-columns: 1fr; } } .case-study__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; } .case-study__media img { width: 100%; height: 100%; object-fit: cover; } .case-study__meta { display: flex; gap: var(--space-5); margin: var(--space-5) 0; flex-wrap: wrap; } .case-study__meta div { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .case-study__meta strong { display: block; font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); text-transform: none; letter-spacing: 0; } /* Stats strip */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; } @media (max-width: 767px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } } .stats-strip__num { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--accent); } .stats-strip__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted-inverse); margin-top: var(--space-2); } /* Testimonials */ .testimonial { padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); } .testimonial p { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.45; color: var(--color-ink); } .testimonial p::before { content: "\201C"; color: var(--accent); } .testimonial p::after { content: "\201D"; color: var(--accent); } .testimonial__who { margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); } /* Process steps */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); } @media (max-width: 899px) { .steps { grid-template-columns: repeat(2,1fr); } } @media (max-width: 599px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding-top: var(--space-6); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent); display: block; margin-bottom: var(--space-3); } .step h4 { margin-bottom: var(--space-2); } .step p { color: var(--text-muted); font-size: var(--text-sm); } /* CTA band */ .cta-band { border-radius: var(--radius-lg); background: var(--color-charcoal); color: var(--color-ink-inverse); padding: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 120%, rgba(238,124,49,0.35), transparent 55%); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: #fff; margin-bottom: var(--space-2); } .cta-band p { color: var(--color-muted-inverse); } /* Footer */ .site-footer { background: var(--color-charcoal); color: var(--color-ink-inverse); padding-block: var(--space-9) var(--space-6); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); } @media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 599px) { .footer__grid { grid-template-columns: 1fr; } } .footer__brand .brand__word { color: var(--color-ink-inverse); } .footer__tagline { color: var(--color-muted-inverse); font-size: var(--text-sm); margin-top: var(--space-4); max-width: 32ch; } .footer__heading { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted-inverse); margin-bottom: var(--space-4); } .footer__links { display: flex; flex-direction: column; gap: var(--space-3); } .footer__links a { font-size: var(--text-sm); color: var(--color-ink-inverse); } .footer__links a:hover { color: var(--accent); } .footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border-inverse); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-muted-inverse); } /* ================= Forms ================= */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } @media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field--full { grid-column: 1 / -1; } .field label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .field input, .field textarea, .field select { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; background: var(--surface); min-height: 44px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--color-orange-light); outline: none; } .field textarea { resize: vertical; min-height: 130px; } .field__hint { font-size: var(--text-xs); color: var(--color-muted-2); } .form-status { font-size: var(--text-sm); margin-top: var(--space-4); } .form-status[data-state="success"] { color: #1a7a4c; } .form-status[data-state="error"] { color: #c23b1f; } /* Inline validation (the form uses novalidate, so JS writes these) */ .field__error { font-size: var(--text-xs); color: #c23b1f; margin: 0; } .field--invalid input, .field--invalid textarea { border-color: #c23b1f; } .field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 59, 31, 0.15); } button[type="submit"]:disabled { opacity: 0.6; cursor: progress; } /* Honeypot: off-screen for people, still fillable by bots */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ================= Scroll reveal ================= */ /* Hidden state only applies once JS has tagged , so content stays visible if scripts fail to load. */ html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } html.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal-group] > * { transition-delay: calc(var(--stagger-i, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ================= Utility ================= */ .mt-0 { margin-top: 0; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .max-w-narrow { max-width: var(--container-narrow); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -60px; background: var(--color-ink); color: #fff; padding: 0.8rem 1.2rem; border-radius: var(--radius-sm); z-index: 200; transition: top var(--dur-base) var(--ease-out); } .skip-link:focus { top: var(--space-4); } .breadcrumb { font-size: var(--text-xs); color: var(--text-muted); display: flex; gap: 0.5em; align-items: center; margin-bottom: var(--space-5); } .breadcrumb a:hover { color: var(--color-ink); } @media (min-width: 1441px) { :root { --gutter: max(3rem, calc((100vw - 1440px) / 2 + 3rem)); } }