/* ============================================ Big Four Plumbing — Redesign Modern Pacific NW · editorial · photography-led ============================================ */ /* ---------- THEME TOKENS ---------- Default palette: evergreen + copper + cream paper. Switched at runtime via [data-palette] on . */ :root, body[data-palette="evergreen"] { /* Brand */ --ink: #14201A; /* near-black evergreen */ --ink-80: #243A2F; --ink-60: #4D6358; --ink-30: #B8C2BB; --ink-15: #DDE2DC; --paper: #F4EFE6; /* warm cream */ --paper-2: #EAE3D5; /* deeper paper */ --paper-3: #D8D2C2; --white: #FBF8F1; --brand: #1F3D32; /* deep evergreen */ --brand-2: #2C5544; --brand-soft: #DDE6DF; --accent: #C0612A; /* aged copper */ --accent-2: #9C4A1B; --accent-soft:#F1DCC8; --rule: rgba(20,32,26,.18); --rule-soft: rgba(20,32,26,.10); --on-dark: #EFE7D6; --on-dark-mute:#A6B5A8; } /* Slate palette — cooler, more corporate trade */ body[data-palette="slate"] { --ink: #0F1620; --ink-80: #1C2733; --ink-60: #4B5765; --ink-30: #B6BEC9; --ink-15: #DDE2E8; --paper: #F2F4F7; --paper-2: #E6EAF0; --paper-3: #D2D8E0; --white: #FFFFFF; --brand: #1A2E4A; --brand-2: #28456C; --brand-soft: #DDE3EE; --accent: #B5601E; --accent-2: #8E481A; --accent-soft:#F1DCC8; --rule: rgba(15,22,32,.16); --rule-soft: rgba(15,22,32,.08); --on-dark: #E6ECF5; --on-dark-mute:#9DAAC1; } /* Workshop palette — warm browns + safety orange (industrial trade) */ body[data-palette="workshop"] { --ink: #1A1410; --ink-80: #2A2118; --ink-60: #5A4B3D; --ink-30: #BFB1A0; --ink-15: #E2D9CB; --paper: #F1EAD9; --paper-2: #E4DAC0; --paper-3: #D2C4A4; --white: #FBF6EA; --brand: #2A1F14; --brand-2: #3D2D1E; --brand-soft: #E2D9CB; --accent: #D85A1B; /* hi-vis safety orange */ --accent-2: #B0410D; --accent-soft:#F6D9C2; --rule: rgba(26,20,16,.18); --rule-soft: rgba(26,20,16,.08); --on-dark: #F1EAD9; --on-dark-mute:#B7A78F; } /* ---------- TYPE PRESETS ---------- */ :root, body[data-type="editorial"] { --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif; --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: 'DM Mono', ui-monospace, "SF Mono", Menlo, monospace; --display-italic: italic; --display-weight: 500; --display-tracking: -.022em; } body[data-type="grotesk"] { --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'DM Mono', ui-monospace, monospace; --display-italic: normal; --display-weight: 700; --display-tracking: -.038em; } body[data-type="grotesk"] h1, body[data-type="grotesk"] h2 { text-transform: uppercase; line-height: .92; } body[data-type="grotesk"] .hero__title em, body[data-type="grotesk"] em.italic, body[data-type="grotesk"] .review blockquote em { font-style: normal; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .12em; text-underline-offset: .08em; color: inherit; } body[data-type="grotesk"] .hero__title { letter-spacing: -.04em; } body[data-type="grotesk"] .footer__big { font-style: normal; text-transform: uppercase; letter-spacing: -.04em; } body[data-type="grotesk"] .strip__logos span { font-style: normal; } body[data-type="instrument"] { --font-display: 'Instrument Serif', 'Newsreader', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'DM Mono', ui-monospace, monospace; --display-italic: italic; --display-weight: 400; --display-tracking: -.015em; } /* ---------- BASE ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } img { color: transparent; } a { color: inherit; } button { font-family: inherit; cursor: pointer; } ul { padding: 0; margin: 0; list-style: none; } ::selection { background: var(--accent); color: #fff; } .wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 48px; } /* ============================================ Type ============================================ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); margin: 0; line-height: 1.04; color: var(--ink); } h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); } h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.02; } h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; } h4 { font-size: .78rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); } em, .italic { font-style: italic; font-family: var(--font-display); color: var(--accent); font-weight: var(--display-weight); } p { margin: 0; color: var(--ink-80); } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); } .eyebrow--light { color: var(--on-dark-mute); } .eyebrow__rule { display: inline-block; width: 28px; height: 1px; background: var(--accent); } .eyebrow--light .eyebrow__rule { background: var(--accent); } /* ============================================ Buttons ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; border: 1px solid transparent; text-decoration: none; background: transparent; color: var(--ink); transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms ease, color 160ms ease, border-color 160ms ease; white-space: nowrap; } .btn--lg { padding: 17px 28px; font-size: 1rem; } .btn--sm { padding: 10px 16px; font-size: .85rem; } .btn--full { width: 100%; } .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--primary:active { transform: translateY(1px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .section--dark .btn--ghost, .section--cta .btn--ghost, .hero .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.4); } .section--dark .btn--ghost:hover, .section--cta .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); } .btn--text { padding: 14px 0; background: transparent; color: var(--ink); border: none; border-bottom: 1px solid var(--ink); border-radius: 0; } .btn--text:hover { color: var(--accent); border-color: var(--accent); } .btn__arr { display: inline-block; transition: transform 200ms cubic-bezier(.2,.8,.2,1); } .btn:hover .btn__arr { transform: translateX(3px); } /* ============================================ Announce bar ============================================ */ .announce { background: var(--ink); color: var(--on-dark); font-size: .82rem; font-family: var(--font-mono); letter-spacing: .04em; } .announce__row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 11px 32px; } .announce__pill { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; } .announce__pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #5fe4a4; box-shadow: 0 0 0 4px rgba(95,228,164,.18); animation: pulse 2s cubic-bezier(.2,.8,.2,1) infinite; } .announce__sep { opacity: .35; } .announce__txt { text-transform: uppercase; letter-spacing: .14em; } .announce__cta { margin-left: auto; color: var(--accent-soft); font-weight: 500; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; } .announce__cta:hover { color: #fff; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(95,228,164,.45); } 50% { box-shadow: 0 0 0 8px rgba(95,228,164,0); } } /* ============================================ Header ============================================ */ .header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: background 280ms ease, border-color 280ms ease; } .header.scrolled { background: color-mix(in srgb, var(--paper) 96%, transparent); border-bottom-color: var(--rule); } .header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; } .brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); } .brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; } .brand__text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); } .brand__text strong { font-weight: var(--display-weight); font-size: 1.2rem; letter-spacing: -.018em; } .brand__text span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); margin-top: 5px; font-weight: 400; } .brand--light strong { color: var(--on-dark); } .brand--light span { color: var(--on-dark-mute); } .nav { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.4); border: 1px solid var(--rule-soft); border-radius: 999px; padding: 4px; } .nav a { position: relative; padding: 9px 12px; font-size: .85rem; font-weight: 500; color: var(--ink-80); text-decoration: none; border-radius: 999px; white-space: nowrap; transition: color 160ms ease, background 160ms ease; } .nav a:hover { color: var(--ink); background: var(--white); } .header__cta { display: flex; align-items: center; gap: 12px; } .phone { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; border: 1px solid transparent; background: transparent; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; transition: color 160ms ease, background 160ms ease; } .phone:hover { background: rgba(0,0,0,.04); } .phone svg { color: var(--accent); } .menu { display: none; width: 42px; height: 42px; border: 1px solid var(--rule); background: var(--white); border-radius: 12px; padding: 0; align-items: center; justify-content: center; } .menu span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 280ms ease, opacity 280ms ease; } .menu span + span { margin-top: 4px; } .menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 14px 24px 22px; background: var(--paper); border-top: 1px solid var(--rule); } .mobile-nav a { padding: 14px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; } .mobile-nav a:hover { background: var(--white); } .mobile-nav .btn { margin-top: 10px; } /* ============================================ Hero — split editorial ============================================ */ .hero { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; padding: 0 0 0; border-bottom: 1px solid var(--rule); } .hero__split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; padding: 80px 32px 96px; } .hero__content { max-width: 620px; } .hero__title { margin-top: 28px; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.0; } .hero__title em { font-style: var(--display-italic); color: var(--accent); font-weight: var(--display-weight); } .hero__lede { font-size: 1.12rem; line-height: 1.55; margin-top: 26px; max-width: 520px; color: var(--ink-80); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .hero__trust { display: grid; grid-template-columns: repeat(3, auto); gap: 0 32px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); max-width: 520px; } .hero__trust li { display: flex; flex-direction: column; gap: 4px; } .hero__trust-k { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); } .hero__trust-v { font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--display-weight); letter-spacing: -.01em; color: var(--ink); } /* Hero photo */ .hero__photo { position: relative; display: flex; flex-direction: column; align-items: center; } .hero__photo-frame { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: var(--brand); width: 100%; aspect-ratio: 4 / 5; max-width: 480px; isolation: isolate; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 30px 50px -20px rgba(20,32,26,.35); } .hero__photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 800ms cubic-bezier(.2,.8,.2,1); } .hero__photo-frame:hover img { transform: scale(1.03); } .hero__photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,18,14,.85)); pointer-events: none; } .hero__photo-cap { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; display: flex; flex-direction: column; color: #fff; } .hero__photo-tag { align-self: flex-start; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin-bottom: 12px; } .hero__photo-cap strong { font-family: var(--font-display); font-size: 1.65rem; font-weight: var(--display-weight); letter-spacing: -.018em; line-height: 1; } .hero__photo-cap span:not(.hero__photo-tag) { margin-top: 4px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); } /* Floating review card on hero photo */ .hero__photo-card { position: absolute; left: -28px; bottom: -32px; background: var(--white); color: var(--ink); padding: 18px 20px; width: 260px; border: 1px solid var(--rule); border-radius: 4px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 14px 30px -10px rgba(20,32,26,.18); } .hero__photo-card-stars { color: var(--accent); letter-spacing: 3px; font-size: .9rem; } .hero__photo-card p { font-family: var(--font-display); font-size: 1rem; font-style: italic; color: var(--ink); margin: 0; line-height: 1.4; } .hero__photo-card span { font-family: var(--font-mono); color: var(--ink-60); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; } /* Hero stats */ .hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); padding: 36px 32px; background: var(--paper-2); } .hero__stats > div { display: flex; flex-direction: column; gap: 8px; padding-right: 24px; border-right: 1px solid var(--rule); } .hero__stats > div:last-child { border-right: none; } .hero__stats strong { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: var(--display-weight); letter-spacing: -.025em; color: var(--ink); line-height: 1; } .hero__stats span { font-family: var(--font-mono); color: var(--ink-60); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; } /* ============================================ Brand strip ============================================ */ .strip { background: var(--paper); border-bottom: 1px solid var(--rule); } .strip__row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding: 28px 32px; } .strip__label { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); } .strip__logos { display: flex; flex-wrap: wrap; gap: 12px 36px; align-items: center; } .strip__logos span { font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight); font-size: 1.25rem; color: var(--ink); letter-spacing: -.01em; opacity: .6; transition: opacity 160ms ease; } .strip__logos span:hover { opacity: 1; } /* ============================================ Sections ============================================ */ .section { padding: 120px 0; position: relative; } .section--soft { background: var(--paper-2); } .section--dark { background: var(--brand); color: var(--on-dark); } .section--dark h2, .section--dark h3 { color: var(--on-dark); } .section--cta { background: var(--ink); color: var(--on-dark); } .section--cta h2 { color: var(--on-dark); } .section__head { max-width: 880px; margin: 0 0 80px; display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; } .section__head-eyebrow { padding-top: 12px; } .section__head h2 { letter-spacing: -.025em; } .section__head p { margin-top: 18px; font-size: 1.08rem; color: var(--ink-60); max-width: 540px; } .section--dark .section__head p, .section--cta .section__head p { color: var(--on-dark-mute); } .section__head--left { margin: 0 0 40px; } /* ============================================ Services — editorial cards ============================================ */ .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .service { position: relative; background: transparent; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 36px 32px 36px; display: flex; flex-direction: column; transition: background 200ms ease; min-height: 360px; } .service:hover { background: var(--paper-2); } .service__num { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 32px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); display: block; } .service__num::after { content: " / Service"; color: var(--ink-60); opacity: .55; } .service__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 20px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); } .service h3 { font-size: 1.5rem; font-weight: var(--display-weight); letter-spacing: -.015em; margin-bottom: 12px; color: var(--ink); } .service p { font-size: .96rem; color: var(--ink-80); line-height: 1.55; } .service ul { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 6px; } .service ul li { position: relative; padding-left: 18px; font-size: .88rem; color: var(--ink-60); font-family: var(--font-body); } .service ul li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600; } .service__more { margin-top: 22px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid var(--rule); transition: gap .2s ease, border-color .2s ease, color .2s ease; } .service__more span { color: var(--accent); transition: transform .2s ease; } .service__more:hover { gap: 12px; border-bottom-color: var(--ink); } .service__more:hover span { transform: translateX(3px); } /* ============================================ Service-page hero — full-bleed photo with text overlay ============================================ */ .hero--bg { position: relative; background: var(--ink); color: var(--on-dark); overflow: hidden; isolation: isolate; } .hero--bg .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero--bg .hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.96) contrast(1.02); } .hero--bg .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,11,.88) 0%, rgba(10,12,11,.62) 45%, rgba(10,12,11,.18) 100%), linear-gradient(180deg, rgba(10,12,11,.55) 0%, rgba(10,12,11,0) 25%, rgba(10,12,11,.65) 100%); pointer-events: none; } .hero--bg .hero__inner { position: relative; z-index: 1; padding: clamp(72px, 12vh, 140px) 0 clamp(56px, 8vh, 96px); min-height: clamp(560px, 78vh, 820px); display: flex; align-items: flex-end; } .hero--bg .hero__content { max-width: 760px; } .hero--bg .eyebrow, .hero--bg .eyebrow span { color: var(--accent-soft); } .hero--bg .eyebrow__rule { background: var(--accent); } .hero--bg .hero__title { color: var(--on-dark); text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero--bg .hero__title em { color: var(--accent-soft); } body[data-type="grotesk"] .hero--bg .hero__title em { text-decoration-color: var(--accent); color: var(--on-dark); } .hero--bg .hero__lede { color: rgba(245,238,221,.86); max-width: 620px; margin-top: 22px; } .hero--bg .hero__cta { margin-top: 30px; } .hero--bg .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .hero--bg .btn--primary:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); } .hero--bg .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.04); backdrop-filter: blur(2px); } .hero--bg .btn--ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); } .hero--bg .hero__trust { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); display: flex; flex-wrap: wrap; gap: 18px 56px; list-style: none; padding-left: 0; } .hero--bg .hero__trust li { display: flex; flex-direction: column; gap: 4px; } .hero--bg .hero__trust-k { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mute); } .hero--bg .hero__trust-v { font-family: var(--font-body); font-size: .98rem; font-weight: 600; color: var(--on-dark); } /* Caption tag pinned in hero corner — names the location/scene */ .hero--bg .hero__photo-tag { position: absolute; z-index: 2; top: clamp(20px, 4vh, 42px); right: clamp(20px, 4vw, 48px); font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft); padding: 8px 14px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(10,12,11,.4); backdrop-filter: blur(4px); } /* Stats strip on dark hero */ .hero--bg .hero__stats { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.16); padding-top: 28px; padding-bottom: 36px; color: var(--on-dark); } .hero--bg .hero__stats > div { border-right: 1px solid rgba(255,255,255,.12); } .hero--bg .hero__stats strong { color: var(--on-dark); } .hero--bg .hero__stats span { color: var(--on-dark-mute); } @media (max-width: 720px) { .hero--bg .hero__photo-tag { top: 14px; right: 14px; padding: 6px 10px; } .hero--bg .hero__trust { gap: 14px 32px; } } .service--featured { background: var(--ink); color: var(--on-dark); border-right-color: var(--ink); border-bottom-color: var(--ink); } .service--featured:hover { background: var(--ink-80); } .service--featured h3 { color: var(--on-dark); } .service--featured p { color: var(--on-dark-mute); } .service--featured ul li { color: var(--on-dark-mute); } .service--featured .service__icon { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); color: var(--accent-soft); } .service--featured .service__num { color: var(--on-dark-mute); } .service--photo { padding-top: 0; } .service__photo { margin: 0 -32px 28px; height: 220px; overflow: hidden; background: var(--brand); } .service__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 800ms cubic-bezier(.2,.8,.2,1); filter: saturate(1.05); } .service:hover .service__photo img { transform: scale(1.04); } .service--photo .service__num { padding-top: 0; margin-top: 4px; } /* ============ SPOTLIGHT (featured service, pulled out of grid) ============ */ .spotlight { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; margin-bottom: 80px; background: var(--ink); color: var(--on-dark); border: 1px solid var(--ink-80); border-radius: 2px; overflow: hidden; position: relative; } .spotlight__photo { margin: 0; position: relative; min-height: 560px; overflow: hidden; } .spotlight__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .spotlight__caption { position: absolute; left: 24px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); background: rgba(0,0,0,.55); backdrop-filter: blur(6px); padding: 8px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; } .spotlight__caption-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,.08); } .spotlight__body { padding: 56px 56px 48px; display: flex; flex-direction: column; position: relative; } .spotlight__num { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: 28px; } .spotlight__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: .95; letter-spacing: -0.02em; text-transform: none; margin: 0 0 22px; color: var(--on-dark); } .spotlight__title em { font-style: italic; font-weight: 400; color: var(--accent-soft); } .spotlight__lede { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: var(--on-dark-mute); margin: 0 0 32px; max-width: 44ch; } .spotlight__list { list-style: none; padding: 24px 0 0; margin: 0 0 32px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 14px; } .spotlight__list li { display: grid; grid-template-columns: 36px 1fr; align-items: baseline; font-size: .98rem; color: var(--on-dark); font-family: var(--font-body); } .spotlight__list li span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--accent-soft); } .spotlight__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark); text-decoration: none; padding: 14px 0 12px; border-top: 1px solid transparent; border-bottom: 1px solid var(--accent-soft); transition: gap .2s ease, border-color .2s ease; } .spotlight__cta:hover { gap: 18px; border-bottom-color: var(--on-dark); } .spotlight__cta span { color: var(--accent); transition: transform .2s ease; } .spotlight__cta:hover span { transform: translateX(4px); } .ribbon--inline { position: static; align-self: flex-start; margin-bottom: 18px; background: var(--accent); color: var(--ink); } @media (max-width: 1024px) { .spotlight { grid-template-columns: 1fr; } .spotlight__photo { min-height: 360px; } .spotlight__body { padding: 36px 28px; } } /* Hero-feature service: spans all 3 columns, photo on left fills full height */ .service--hero { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; padding: 0; min-height: 520px; overflow: hidden; } .service--hero .service__photo { margin: 0; height: 100%; min-height: 520px; border: none; border-right: 1px solid var(--ink-80); } .service--hero .service__body { padding: 48px 48px 48px; display: flex; flex-direction: column; } .service--hero h3 { font-size: 2.2rem; margin-bottom: 18px; } .service--hero p { font-size: 1.05rem; line-height: 1.55; max-width: 440px; } .service--hero .service__num { margin-bottom: 36px; } .service--hero ul { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); } .service--hero ul li { font-size: .95rem; padding-left: 22px; } .service--hero ul li::before { font-size: 1.1rem; } @media (max-width: 1024px) { .service--hero { grid-template-columns: 1fr; min-height: auto; } .service--hero .service__photo { min-height: 320px; height: 320px; border-right: none; border-bottom: 1px solid var(--ink-80); } .service--hero .service__body { padding: 32px; } .service--hero h3 { font-size: 1.8rem; } } .ribbon { position: absolute; top: 18px; right: 18px; z-index: 2; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; padding: 6px 11px; border-radius: 999px; } /* ============================================ Pillars — Why Big Four (dark editorial) ============================================ */ .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.12); } .pillar { padding: 44px 28px 36px 0; border-right: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; position: relative; } .pillar:last-child { border-right: none; padding-right: 0; } .pillar:not(:first-child) { padding-left: 28px; } .pillar__num { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .16em; color: var(--accent); margin-bottom: 36px; } .pillar h3 { color: var(--on-dark); font-size: 1.5rem; font-weight: var(--display-weight); letter-spacing: -.015em; margin-bottom: 14px; } .pillar p { color: var(--on-dark-mute); font-size: .96rem; line-height: 1.6; } /* ============================================ Steps ============================================ */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: step; border-top: 1px solid var(--rule); } .step { padding: 48px 32px 36px 0; position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--rule); } .step:last-child { border-right: none; padding-right: 0; } .step:not(:first-child) { padding-left: 32px; } .step__num { display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .16em; color: var(--accent); margin-bottom: 36px; } .step h3 { font-size: 1.5rem; font-weight: var(--display-weight); letter-spacing: -.015em; margin-bottom: 14px; color: var(--ink); } .step p { font-size: .96rem; color: var(--ink-80); line-height: 1.6; } /* ============================================ About / Meet Brad ============================================ */ .about { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; max-width: 880px; } .about__photo { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: var(--brand); aspect-ratio: 4 / 5; box-shadow: 0 30px 50px -20px rgba(20,32,26,.25); } .about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .about__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,18,14,.8)); pointer-events: none; } .about__photo figcaption { position: absolute; left: 24px; right: 24px; bottom: 24px; color: #fff; display: flex; flex-direction: column; } .about__photo figcaption span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); font-weight: 500; margin-bottom: 6px; } .about__photo figcaption strong { font-family: var(--font-display); font-size: 1.65rem; font-weight: var(--display-weight); letter-spacing: -.018em; line-height: 1; } .about__copy h2 { margin-top: 28px; } .about__copy p { margin-top: 22px; font-size: 1.08rem; max-width: 540px; line-height: 1.6; color: var(--ink-80); } .about__copy strong { color: var(--ink); font-weight: 600; } .about__badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 36px 0 36px; max-width: 540px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .about__badges > div { padding: 18px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; } .about__badges strong { font-family: var(--font-mono); color: var(--ink-60); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; } .about__badges span { color: var(--ink); font-weight: 600; font-size: .98rem; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -.005em; } .about__cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; } /* ============================================ Service area ============================================ */ .area { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .area__copy h2 { margin-top: 28px; } .area__copy > p { margin-top: 22px; max-width: 480px; font-size: 1.08rem; line-height: 1.6; color: var(--ink-80); } .area__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px; margin: 40px 0 36px; max-width: 480px; } .area__list li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.05rem; letter-spacing: -.005em; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); } .area__list li strong { color: var(--accent); font-family: var(--font-body); font-weight: 700; } .area__map { border-radius: 4px; overflow: hidden; background: var(--paper-2); aspect-ratio: 400 / 380; } /* ============================================ Reviews ============================================ */ .reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .review { background: transparent; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 40px 36px; position: relative; transition: background 200ms ease; } .review:hover { background: var(--paper); } .stars { color: var(--accent); font-size: 1rem; letter-spacing: 4px; margin-bottom: 20px; } .review blockquote { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.35rem; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); } .review blockquote em { font-style: italic; color: var(--accent); font-weight: var(--display-weight); } .review footer { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); } .review footer strong { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--display-weight); letter-spacing: -.005em; } .review footer span { color: var(--ink-60); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; } /* ============================================ FAQ ============================================ */ .faq { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; } .faq .section__head { margin: 0; display: block; position: sticky; top: 110px; } .faq .section__head h2 { margin-top: 24px; } .faq .section__head p { margin-top: 18px; color: var(--ink-60); } .faq .section__head a { color: var(--accent); font-weight: 600; text-decoration: none; } .faq .section__head a:hover { text-decoration: underline; } .faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); } .faq details { border-bottom: 1px solid var(--rule); padding: 4px 0; transition: background 160ms ease; } .faq details[open] { background: transparent; } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 4px; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -.012em; color: var(--ink); font-size: 1.3rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent); } .faq .chev { width: 14px; height: 14px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform 280ms cubic-bezier(.2,.8,.2,1); flex: none; } .faq details[open] .chev { transform: rotate(-135deg); } .faq details p { padding: 0 4px 28px; color: var(--ink-80); font-size: 1.02rem; max-width: 620px; line-height: 1.6; } .faq details p strong { color: var(--ink); font-weight: 600; } /* ============================================ Quote / contact ============================================ */ .quote { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .quote__copy h2 { color: var(--on-dark); margin-top: 28px; } .quote__copy > p { color: var(--on-dark-mute); margin-top: 24px; font-size: 1.12rem; max-width: 460px; line-height: 1.6; } .quote__copy a { color: var(--accent-soft); text-decoration: none; font-weight: 600; } .quote__copy a:hover { color: #fff; } .quote__list { display: flex; flex-direction: column; gap: 0; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.14); } .quote__list li { display: grid; grid-template-columns: 100px 1fr; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--on-dark); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.1rem; letter-spacing: -.008em; } .quote__list-k { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-mute); } .quote__list a { color: var(--accent-soft); text-decoration: none; font-variant-numeric: tabular-nums; } .quote__list a:hover { color: #fff; } .quote__form { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 36px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--rule); } .quote__form-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); } .quote__form-head strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.35rem; letter-spacing: -.018em; } .quote__form-head span { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); } .quote__form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); } .quote__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .quote__form input, .quote__form select, .quote__form textarea { appearance: none; -webkit-appearance: none; border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px; font-size: 1rem; background: var(--white); color: var(--ink); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; transition: border-color 160ms ease, background 160ms ease; } .quote__form input:focus, .quote__form select:focus, .quote__form textarea:focus { outline: none; border-color: var(--ink); background: #fff; } .quote__form textarea { resize: vertical; min-height: 120px; } .quote__form .btn { margin-top: 6px; } .quote__small { font-size: .74rem; color: var(--ink-60); text-align: center; line-height: 1.5; font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: 4px; } .quote__success { background: #E5EFE5; color: #1F3D2E; border: 1px solid #C0D5C0; border-radius: 4px; padding: 16px 18px; font-size: .95rem; font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-weight: 500; } .quote__success a { color: #1F3D2E; font-weight: 700; } /* ============================================ Footer ============================================ */ .footer { background: var(--ink); color: var(--on-dark-mute); padding: 0; } .footer__top { padding: 96px 32px 64px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer__mark { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .footer__big { font-family: var(--font-display); font-style: italic; font-weight: var(--display-weight); font-size: clamp(3rem, 9vw, 8rem); letter-spacing: -.03em; color: var(--on-dark); line-height: .95; } .footer__sub { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: 14px; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding: 64px 32px 64px; } .footer__brand p { color: var(--on-dark-mute); font-size: .96rem; margin-top: 22px; max-width: 320px; line-height: 1.6; } .footer__lic { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: 18px; } .footer__col h4 { color: var(--on-dark); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 22px; } .footer__col ul { display: flex; flex-direction: column; gap: 12px; } .footer__col a { color: var(--on-dark-mute); text-decoration: none; transition: color 160ms ease; font-size: .98rem; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -.005em; } .footer__col a:hover { color: var(--accent-soft); } .footer__col li { font-size: .98rem; line-height: 1.6; } .footer__col .btn { margin-top: 22px; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.1); } .footer__bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 32px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); } .footer__bottom-mark { color: var(--accent-soft); } /* ============================================ Landscape banner (Cascades) ============================================ */ .landscape { position: relative; background: #0c0e0c; color: #fff; overflow: hidden; isolation: isolate; border-bottom: 1px solid rgba(255,255,255,.06); } .landscape__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; filter: saturate(1.05) contrast(1.05); } .landscape__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,14,12,.45) 0%, rgba(10,14,12,.25) 35%, rgba(10,14,12,.92) 100%), linear-gradient(90deg, rgba(10,14,12,.7) 0%, rgba(10,14,12,0) 55%); pointer-events: none; } .landscape__inner { position: relative; z-index: 2; padding: 200px 48px 80px; max-width: 1400px; } .landscape__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft); } .landscape__eyebrow .eyebrow__rule { background: var(--accent); } .landscape__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(3rem, 8vw, 7rem); letter-spacing: var(--display-tracking); line-height: .95; margin-top: 24px; color: #fff; max-width: 920px; } .landscape__title em { font-style: var(--display-italic); color: var(--accent); font-weight: var(--display-weight); } body[data-type="grotesk"] .landscape__title { text-transform: uppercase; line-height: .92; } body[data-type="grotesk"] .landscape__title em { font-style: normal; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .12em; text-underline-offset: .08em; color: inherit; } .landscape__lede { margin-top: 28px; max-width: 540px; font-size: 1.08rem; line-height: 1.6; color: rgba(255,255,255,.78); } .landscape__meta { display: grid; grid-template-columns: repeat(3, auto); gap: 0 56px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); max-width: 760px; } .landscape__meta > div { display: flex; flex-direction: column; gap: 6px; } .landscape__meta-k { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); } .landscape__meta-v { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.05rem; letter-spacing: -.008em; color: #fff; } @media (max-width: 720px) { .landscape__inner { padding: 120px 20px 56px; } .landscape__meta { grid-template-columns: 1fr; gap: 18px; } } /* ============================================ Floating call button (mobile) ============================================ */ .floating-call { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: none; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); padding: 14px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); font-variant-numeric: tabular-nums; } .floating-call:hover { background: var(--accent); } /* ============================================ Reveal animations ============================================ */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } /* ============================================ Hero variant: stacked editorial (huge full-bleed type, photo below) ============================================ */ body[data-hero="stacked"] .hero__split { grid-template-columns: 1fr; gap: 56px; padding: 80px 32px 80px; } body[data-hero="stacked"] .hero__content { max-width: 1100px; } body[data-hero="stacked"] .hero__title { font-size: clamp(3.4rem, 10vw, 9rem); line-height: .95; } body[data-hero="stacked"] .hero__lede { font-size: 1.2rem; max-width: 600px; } body[data-hero="stacked"] .hero__photo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: end; width: 100%; max-width: none; } body[data-hero="stacked"] .hero__photo-frame { max-width: none; aspect-ratio: 16 / 10; } body[data-hero="stacked"] .hero__photo-card { position: static; width: 100%; max-width: 360px; margin-left: auto; } /* ============================================ Hero variant: photo-bg (full-bleed photo with overlay copy) ============================================ */ body[data-hero="photo"] .hero { padding: 0; } body[data-hero="photo"] .hero__split { position: relative; display: block; padding: 0; min-height: 86vh; overflow: hidden; } body[data-hero="photo"] .hero__content { position: relative; z-index: 2; max-width: 720px; padding: 140px 32px 120px; margin: 0 auto; width: 100%; color: #fff; } body[data-hero="photo"] .hero__title { color: #fff; } body[data-hero="photo"] .hero__lede { color: rgba(255,255,255,.85); } body[data-hero="photo"] .hero__trust { border-top-color: rgba(255,255,255,.25); } body[data-hero="photo"] .hero__trust-k { color: rgba(255,255,255,.65); } body[data-hero="photo"] .hero__trust-v { color: #fff; } body[data-hero="photo"] .hero__photo { position: absolute; inset: 0; z-index: 1; display: block; margin: 0; } body[data-hero="photo"] .hero__photo-frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; } body[data-hero="photo"] .hero__photo-frame::after { background: linear-gradient(180deg, rgba(20,32,26,.55) 0%, rgba(20,32,26,.35) 40%, rgba(20,32,26,.85) 100%), linear-gradient(90deg, rgba(20,32,26,.5), rgba(20,32,26,0) 60%); } body[data-hero="photo"] .hero__photo-cap, body[data-hero="photo"] .hero__photo-card { display: none; } body[data-hero="photo"] .hero__stats { background: var(--ink); color: var(--on-dark); border-top: none; } body[data-hero="photo"] .hero__stats > div { border-right-color: rgba(255,255,255,.1); } body[data-hero="photo"] .hero__stats strong { color: #fff; } body[data-hero="photo"] .hero__stats span { color: var(--on-dark-mute); } body[data-hero="photo"] .hero .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } body[data-hero="photo"] .hero .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); } body[data-hero="photo"] .hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); } /* ============================================ Responsive ============================================ */ @media (max-width: 1100px) { .section__head { grid-template-columns: 1fr; gap: 18px; } .section__head-eyebrow { padding-top: 0; } .faq { grid-template-columns: 1fr; gap: 36px; } .faq .section__head { position: static; } } @media (max-width: 1024px) { .hero__split { grid-template-columns: 1fr; gap: 48px; padding: 64px 24px 64px; } .hero__photo { max-width: 540px; margin: 0 auto; width: 100%; } .hero__photo-card { left: auto; right: -12px; bottom: -28px; } .services { grid-template-columns: repeat(2, 1fr); } .pillars { grid-template-columns: repeat(2, 1fr); } .pillars .pillar:nth-child(2) { border-right: none; } .pillars .pillar:nth-child(3) { padding-left: 0; padding-top: 44px; border-top: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12); } .pillars .pillar:nth-child(4) { padding-top: 44px; border-top: 1px solid rgba(255,255,255,.12); } .steps { grid-template-columns: 1fr; } .steps .step { padding: 32px 0; border-right: none; border-bottom: 1px solid var(--rule); } .steps .step:not(:first-child) { padding-left: 0; } .steps .step:last-child { border-bottom: none; } .about { grid-template-columns: 1fr; gap: 40px; } .about__photo { max-width: 480px; margin: 0 auto; } .area { grid-template-columns: 1fr; gap: 40px; } .reviews { grid-template-columns: 1fr; } .quote { grid-template-columns: 1fr; gap: 40px; } .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } .section { padding: 88px 0; } body[data-hero="stacked"] .hero__photo { grid-template-columns: 1fr; } } @media (max-width: 720px) { .wrap { padding: 0 20px; } .nav, .header__cta .phone { display: none; } .menu { display: inline-flex; } .header__row { padding: 14px 20px; gap: 12px; } .announce__row { font-size: .72rem; padding: 9px 18px; gap: 8px; } .announce__sep, .announce__cta { display: none; } .announce__txt { display: none; } .hero__split { padding: 40px 20px 56px; gap: 36px; } .hero__title { font-size: clamp(2.4rem, 11vw, 3.2rem); } .hero__lede { font-size: 1.05rem; } .hero__trust { grid-template-columns: 1fr; gap: 14px; } .hero__photo-card { position: static; width: auto; margin-top: 16px; } .hero__stats { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; gap: 18px 0; } .hero__stats > div:nth-child(odd) { border-right: 1px solid var(--rule); } .hero__stats > div:nth-child(2), .hero__stats > div:nth-child(4) { border-right: none; } .services { grid-template-columns: 1fr; } .pillars { grid-template-columns: 1fr; } .pillars .pillar { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12); padding: 32px 0 !important; } .pillars .pillar:last-child { border-bottom: none; } .area__list { grid-template-columns: repeat(2, 1fr); } .quote__form { padding: 24px; } .quote__form .row { grid-template-columns: 1fr; } .quote__list li { grid-template-columns: 1fr; gap: 4px; } .footer__grid { grid-template-columns: 1fr; } .footer__top { padding: 64px 20px 48px; } .floating-call { display: inline-flex; } .section { padding: 64px 0; } .section__head { margin-bottom: 36px; } body[data-hero="photo"] .hero__split { min-height: auto; } body[data-hero="photo"] .hero__content { padding: 80px 20px 64px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Accessibility / SEO utilities ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Related services rail (service pages) ---------- */ .related-services { padding: 80px 0; border-top: 1px solid var(--rule); background: var(--paper); } .related-services__head { text-align: center; margin-bottom: 36px; } .related-services__head h2 { font-family: var(--font-serif, "Newsreader", serif); font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0 0 8px; color: var(--ink); } .related-services__head p { color: var(--ink-60); margin: 0; font-size: .98rem; } .related-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .related-services__card { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; border: 1px solid var(--rule); background: var(--white); text-decoration: none; color: var(--ink); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .related-services__card:hover { transform: translateY(-2px); border-color: var(--ink-60); background: var(--paper-2); } .related-services__card-num { font-family: "DM Mono", monospace; font-size: .72rem; color: var(--ink-60); letter-spacing: .08em; } .related-services__card-title { font-weight: 600; font-size: 1.05rem; } .related-services__card-desc { color: var(--ink-60); font-size: .9rem; line-height: 1.45; } .related-services__card-arrow { margin-top: auto; font-size: .85rem; color: var(--accent); padding-top: 10px; } @media (max-width: 880px) { .related-services { padding: 56px 0; } .related-services__grid { grid-template-columns: 1fr; } }